디자인 시스템 버튼을 만드는 데 얼마나 걸릴까? 전후 비교

Source: Dev.to

“디자인 시스템 문서는 어디에 있나요?”
정부나 대기업 프로젝트를 해본 적이 있다면 이 말을 들어봤을 겁니다. 그 다음 200페이지짜리 PDF를 열어 색상 코드를 찾고, 간격 값을 복사하고, 테두리 반경이 4 px인지 8 px인지 논쟁합니다… 버튼 하나만 만들는데 반나절이 사라집니다.
오늘은 실제 코드를 보여드리겠습니다 — 컴포넌트 라이브러리를 사용하기 전과 후를 비교합니다.

사례 1: 버튼 만들기

이전: 디자인 시스템 PDF에서 구현

// Step 1: Find color values in design guide (10 min)
// Primary: #0A5ECA, Hover: #0852B2, Active: #064794...

// Step 2: Write CSS (30 min)
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 80px;
  height: 48px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  background-color: #0A5ECA;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary:hover   { background-color: #0852B2; }
.btn-primary:active  { background-color: #064794; }
.btn-primary:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary:focus-visible{
  outline: 2px solid #0A5ECA;
  outline-offset: 2px;
}

// Step 3: Write component (20 min)
function Button({ children, ...props }) {
  return (
    <button {...props}>{children}</button>
  );
}

// Step 4: Add variants? (1 hour)
// secondary, tertiary, danger… find each color, add CSS

// Step 5: Add sizes? (30 min)
// xs, sm, md, lg, xl… calculate height, padding, font‑size

// Total time: 2‑3 hours
// And next project? Start over.

이후: HANUI 사용

npx hanui add button

import { Button } from '@/components/ui/button';

// Done. Use immediately.
<Button>Default Button</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Delete</Button>
<Button isLoading>Saving…</Button>
<Button icon={<SearchIcon />}>Search</Button>

시간: 10 초

8가지 변형, 6가지 크기, 로딩 상태, 아이콘 지원 — 모두 포함됩니다. 접근성(aria-busy, aria-disabled, 포커스 링)은 자동으로 적용됩니다.

사례 2: Form Field

이전: Manual Implementation

function FormField({ label, error, helperText, required, children }) {
  const id = useId();
  const errorId = `${id}-error`;
  const helperId = `${id}-helper`;

  return (
    <div>
      <label htmlFor={id}>
        {label}
        {required && <span>*</span>}
      </label>

      {/* How do I pass id, aria-describedby to children? */}
      {/* cloneElement? Context? */}
      {children}

      {error && (
        <p id={errorId}>{error}</p>
      )}

      {helperText && (
        <p id={helperId}>{helperText}</p>
      )}
    </div>
  );
}

// aria-describedby connection?
// Input error styling?
// Error icon?
// Screen reader support?
// … complexity grows

이후: Using HANUI

npx hanui add form-field input

import {
  FormField,
  FormLabel,
  FormError,
  FormHelperText,
} from '@/components/ui/form-field';
import { Input } from '@/components/ui/input';

<FormField>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormError>Invalid email format</FormError>
</FormField>

<FormField>
  <FormLabel>Username</FormLabel>
  <Input type="text" />
  <FormHelperText>Username is available</FormHelperText>
</FormField>

Context가 id와 ARIA 속성을 자동으로 연결합니다. 오류/성공 아이콘이 자동으로 표시됩니다. role="alert"와 aria-live="polite"가 적용됩니다.

사례 3: 헤더 + 메가 메뉴

이것을 처음부터 구축하려면 며칠이 걸립니다.

이전: 다음 모두 고려

• 반응형 (모바일 햄버거 메뉴)
• 메가 메뉴 드롭다운
• 키보드 네비게이션 (Tab, Arrow, Escape)
• 포커스 트랩
• 스크롤 동작 (스티키/숨김)
• WAI‑ARIA 패턴

솔직히, 이를 제대로 구축하려면 일주일이 걸립니다.

이후: HANUI 사용

npx hanui add header

import { HeaderWithMegaMenu } from '@/components/ui/header';

// Use <HeaderWithMegaMenu /> directly – mega menu, mobile support,
// keyboard navigation, scroll behavior are all included.

실제 비교

수동으로 구축할 때 자주 놓치는 사항

• aria-describedby 연결
• aria-expanded, aria-haspopup
• 포커스 관리
• Esc 키로 닫기
• 스크린 리더 알림

숨겨진 비용

수동 구현의 실제 문제는 시간만이 아닙니다.

1. 일관성 부족

/* Developer A */
.btn { border-radius: 4px; }

/* Developer B */
.button { border-radius: 6px; }

/* Developer C */
.cus { border-radius: 5px; }

각 팀원이 PDF에서 값을 복사‑붙여넣기 할 때 미묘한 차이가 생겨 UI가 파편화되고 유지보수 비용이 추가됩니다.

HANUI 같은 컴포넌트 라이브러리를 사용하면 추측을 없애고 접근성을 보장하며, 기능을 며칠이 아니라 몇 초 만에 배포할 수 있습니다.

tom-btn {
  border-radius: 8px;
}

2. 접근성 누락

바쁠 때 ARIA 속성을 놓치기 쉽습니다. “나중에 추가할게”가 “감사에서 실패”로 바뀝니다.

3. 유지보수 지옥

디자인 시스템이 업데이트되면? 모든 프로젝트의 모든 컴포넌트를 수동으로 업데이트해야 합니다.

요약

한국 정부 프로젝트를 진행한다면 HANUI 가 KRDS‑준수 React 컴포넌트를 바로 제공합니다.

npx hanui init
npx hanui add button input select form-field header modal

설정에 5분 정도 걸립니다. 나머지 시간은 비즈니스 로직에 투자하세요.

GitHub:
문서