애자일에서 UI 개발자는 디자인을 기다리지 않는다
와이어프레임과 디자인 시스템만 있으면 UI 개발자는 디자인 완료 전에 화면을 칠 수 있어요. KRDS 사례로 설명합니다.
디자인 시스템에서 접근성 자동화하기 — axe + Storybook + CI
디자인 시스템에 접근성 자동화를 붙이는 방법. axe-core로 단위 테스트, Storybook a11y 애드온으로 시각 검사, GitHub Actions CI로 PR마다 자동 차단까지 실전 가이드.
스크린 리더 테스트 실전 — VoiceOver/NVDA로 내 앱 검증하기
VoiceOver(Mac)와 NVDA(Windows)로 웹 접근성을 직접 테스트하는 방법. 스크린 리더 기본 조작부터 실전 테스트 시나리오, 자주 발견되는 문제와 수정법까지 정리합니다.
키보드 네비게이션 완전 가이드 — Tab, Arrow, Esc 패턴
웹 접근성의 핵심인 키보드 네비게이션 패턴을 정리합니다. Tab/Arrow/Esc/Enter 각각의 역할과 WAI-ARIA 패턴, HANUI 컴포넌트 적용 사례를 공유해요.
금융 프론트엔드에서 접근성이 필수인 이유 — 전자금융 접근성 실무 가이드
전자금융 서비스의 웹접근성 의무와 프론트엔드 개발자가 실무에서 챙겨야 할 접근성 체크리스트. KWCAG 2.2 기반 HANUI 디자인 시스템 적용 사례를 공유합니다.
백엔드 잘 모르는 프론트가 Spring Boot API 짠 이야기
전자정부프레임워크가 뭔지도 몰랐던 프론트엔드 개발자가 Claude Code로 Spring Boot 백엔드를 짜게 된 과정. eGovFrame v5 블록 조합 + Claude Code 스터디 모드로 풀스택 구현.
Claude Code + MCP로 노션·피그마 연동하기
MCP(Model Context Protocol)로 Claude Code에 Notion, Figma를 연결하는 방법. 노션 페이지를 읽고, 피그마 디자인을 코드로 변환하는 실제 워크플로우를 공유해요.
나만의 Claude Code 커맨드 만들기 — 마크다운 하나로 자동화
Claude Code 슬래시 커맨드를 직접 만드는 법. /commit 커맨드를 처음부터 만드는 과정, 에이전트와 훅까지. 팀에 공유하는 방법도.
CLAUDE.md 하나로 AI가 내 코드 스타일을 따라한다
Claude Code의 핵심 설정 파일 CLAUDE.md 작성법. 실제 HANUI 프로젝트의 CLAUDE.md를 공개하고, 잘 쓰는 법과 못 쓰면 생기는 문제를 정리했어요.
Claude Code 슬래시 커맨드 21종 — 설치 한 줄이면 끝
Claude Code에 /commit, /api, /security 같은 슬래시 커맨드 21종 + 에이전트 4종 + 훅 5종을 원라인 설치. 프론트엔드/백엔드/풀스택 선택 가능.
Claude Code로 CMS 프로젝트 하루만에 만들기 — 기획부터 코딩까지 자동화
Claude Code로 노션 기획서 작성부터 읽기, GitHub 이슈 자동 생성, Tiptap 에디터 구현, PR 생성까지. 실제 CMS 프로젝트에서 18개 이슈를 하루만에 처리한 워크플로우.
HANUI Kits — 복사해서 바로 쓰는 기능 패턴
컴포넌트만으론 부족해요. 게시판, 인증, 대시보드 같은 기능을 API URL만 바꾸면 바로 쓸 수 있는 HANUI Kits를 소개합니다.
KRDS MegaMenu 완전정복 — 공공 웹사이트 네비게이션 만들기
공공 웹사이트 헤더 메뉴를 HANUI로 구현하는 법. 웹접근성 키보드 네비게이션, ARIA 속성, 포커스 관리까지 자동 처리되는 MegaMenu 사용법.
Next.js + HANUI 프로젝트 세팅 가이드
Next.js에서 HANUI(KRDS 기반 디자인 시스템)를 세팅하는 방법. npx hanui init 한 줄로 Tailwind, 토큰, 폰트까지 자동 설정.
KRDS React Form 컴포넌트 - Input, Select, 자동 접근성 연결
FormField로 감싸면 label 연결, 에러 메시지, aria 속성이 자동으로 처리됩니다. react-hook-form 연동 예시까지.
KRDS 디자인 토큰 Tailwind CSS 적용 방법 - 17px 폰트, 색상 시스템
KRDS의 17px 기본 폰트를 Tailwind CSS에서 처리하는 방법. 숫자 스케일과 시맨틱 토큰을 활용한 색상 시스템, 반응형 타이포그래피 구현.
KWCAG 2.2 웹접근성 자동 적용 - KRDS React 컴포넌트로 검수 통과하기
HANUI 컴포넌트에 내장된 웹접근성 기능. aria 속성, 키보드 네비게이션, 포커스 관리까지 자동 적용되어 KWCAG 2.2 검수를 통과할 수 있습니다.
공공 SI React 기술스택 2025
2025년 공공기관 React 프로젝트 권장 기술스택. Next.js 15, Tailwind 4, KRDS, Zustand, TanStack Query 등 실전 조합 가이드.
KRDS React Button 컴포넌트 설계 - variant, 접근성, cva 패턴
HANUI Button 컴포넌트의 설계 철학. 8개 variant, cva 패턴, 접근성(aria-busy, 포커스 링), asChild, 아이콘 지원까지.
KRDS React 컴포넌트 구현 시간 비교 - 직접 코딩 vs HANUI
버튼, 폼, 헤더+메가메뉴를 직접 구현할 때와 HANUI를 쓸 때의 실제 코드와 시간 비교. Before/After로 보여드립니다.
CSS 변수로 다크모드 구현하기
CSS 변수(Custom Properties)를 활용한 다크모드 구현법. 시맨틱 토큰, Tailwind 연동, SSR 깜빡임 방지까지 실전 가이드.
shadcn/ui 방식의 KRDS React 컴포넌트 - 왜 npm 패키지가 아닌가
HANUI가 npm 패키지 대신 shadcn/ui 방식의 소스 복사를 택한 기술적 이유. Tailwind CSS, Radix UI 기반 아키텍처 설명.
KRDS React 컴포넌트 라이브러리 HANUI - 그냥 가져다 쓰세요
KRDS 2.2 표준을 따르는 React 컴포넌트 라이브러리. shadcn/ui 방식으로 소스 코드를 복사해서 자유롭게 수정할 수 있습니다.
shadcn/ui 한국 프로젝트에서 제대로 쓰는 법
shadcn/ui를 한국 프로젝트에 적용할 때 필요한 한글 폰트, 색상 커스터마이징, DatePicker 한글화, 접근성 설정을 정리합니다.
Tailwind CSS로 디자인 시스템 만들기
Tailwind CSS로 색상 토큰, 타이포그래피, 간격 시스템을 설정하고 cva로 타입 안전한 컴포넌트를 만드는 방법. 공공기관은 KRDS 기반 HANUI 프리셋 활용법도 포함.
React 웹접근성 체크리스트 — 공공 SI 심사 통과하기
React 프로젝트에서 자주 걸리는 웹접근성 항목 TOP 5와 컴포넌트별 체크리스트를 정리합니다. eslint-plugin-jsx-a11y, axe DevTools 활용법까지.