design-gui-guide

# design-gui-guide — 10 GUI 요소 사용성 가이드라인 SSOT

## 목적과 근거

거의 모든 화면은 10개 표준 GUI 요소로 조립된다. 각 요소는 40년+ 다윈 필터를 통과한 관습이다 — **Jakob's Law**(사용자는 다른 사이트에서 보던 대로 너의 것도 작동하길 기대한다)가 익숙한 버전을 늘 더 낫게 만든다. 혁신 예산은 새 체크박스 종자를 만드는 데 쓰지 말고 콘텐츠와 서비스에 써라.

근거: UX Tigers, Jakob Nielsen, "10 GUI Design Elements Build Every User Interface" (2026-07-29) — 86개 증거 기반 가이드라인 + 보너스 2. 본 스킬은 이를 한국어 실용 지침으로 증류하고 shadcn 63종과 매핑한다. 원문 가이드라인(사용성 원칙·방법)을 재서술한 것이지 복사한 것이 아니다.

**세 가지 상위 명제** (모든 86개 지침은 이 아래 있다):
1. **기억시키지 말 것** — 인식(recognition) 우위 유지
2. **추측시키지 말 것** — 시각 문법·관습을 훼손하지 말 것
3. **기다리게 하지 말 것** — 반응·완결에 엄격한 예산

## 소비 지점

| 소비자 | 사용 방법 |
|---|---|
| `design-prompt-builder` 패턴 3 | 디자인 시스템 생성 시 각 컴포넌트를 해당 요소 가이드라인에 맞춰 설계 |
| `design-prompt-builder` 패턴 6 | 사용성 감사 시 Nielsen 10 휴리스틱 + 본 86개 지침(컴포넌트 단위)으로 평가 |
| `design-system-prep` | DESIGN.md Component recipes 품질 기준 |
| `design-slop-check` | 카피 중심 검수의 보완 — 컴포넌트 동작·레이아웃 품질은 본 스킬 |

---

## 1. Buttons — 누르면 무언가 일어난다
**shadcn**: Button · Button Group

버튼은 세계를 바꾸는 유일한 요소(링크·탭은 옮기고, 메뉴·다이얼로그는 대화를 재배열할 뿐). 그래서 라벨 규칙이 가장 엄격하다 — 잘못된 링크는 Back 한 번이지만, 잘못된 버튼은 고객 한 명을 잃는다.

1. **누를 수 있게 보이게.** 닫힌 형태 + 배경 대비 + 누름 시 상태 변화. 플랫 디자인으로 테두리/그림자를 걷어내면 "어떤 글자가 명령인지" 사용자가 추측하게 된다.
2. **모든 버튼에 결과를 나타내는 동사 라벨.** "Save Invoice"지 "OK"가 아니다. 효과가 2–4단어 안에 안 들어오면 라벨 문제가 아니라 더 깊은 문제.
3. **화면마다 시각적으로 우세한 주 액션 정확히 1개.** 주 액션이 2개 경쟁하면 주 액션이 없는 것.
4. **Fitts's law 준수.** 자주 쓰는 액션은 크고 가깝게. 터치 타깃 최소 1×1cm.
5. **모든 누름을 0.1초 안에 인지.** 반응한 것처럼 느끼는 한계.
6. **비활성 버튼은 주 색의 흐린 버전 + 왜 비활성인지/어떻게 켜는지 설명.** 숨기지 말 것.
7. **액션엔 버튼, 이동엔 링크.** 두 시각 언어를 섞지 말 것.
8. **버튼은 작업이 끝나는 자리에.** 필드·콘텐츠 뒤, 읽기 흐름의 자연스러운 끝.

> **Split button**: 주 액션(큰 영역, 1클릭) + 변형(작은 영역, 화살표/3점). 한 명령이 빈도로 압도적일 때만. 두 영역 사이 가시적 구분자 필수. 기본 하나가 안 정해지면 일반 메뉴 버튼을 써라.

---

## 2. Input Fields & Forms — 돈이 오가는 자리
**shadcn**: Input · Input Group · Input OTP · Textarea · Label · Field · Select · Native Select · Combobox · Date Picker · Checkbox · Radio Group · Switch · Toggle · Toggle Group · Slider

폼은 체크아웃·가입·리드 발생 — 사용성이 수익으로 직결된다(UX = profits). 가장 강한 지침은 **뺄셈**: 불필요한 필드 하나마다 완료율이 떨어진다. 선택 필드도 **필드 세금**(주의를 소모)을 매긴다 — DB에서 선택이어도 사용자 주의에선 선택이 아니다.

1. **엄격히 필요 없는 필드는 삭제.** 남길 필드 하나는 잃는 완료율/매출과 저울질해야 한다.
2. **모든 필드에 필드 밖의 영구 라벨.** placeholder는 힌트지 라벨이 아니다 — 타이핑 시작하면 사라진다.
3. **유연한 입력 포맷 수용.** 전화번호 하이픈 유무를 가리지 말고 코드에서 정제. 컴퓨터가 사람에게 떠넘긴 일을 되찾아라.
4. **에러는 해당 필드 옆에, 사용자가 입력한 값은 보존.** 에러로 입력을 날리는 폼은 두 번 쓰이지 않는다.
5. **작업에 맞는 전용 컨트롤 사용.** 날짜엔 Date Picker, 장바구니 제거엔 휴지통 아이콘(사용자 머릿속 "0으로 설정"이 아니라 "제거").
6. **단일 컬럼 + 관련 필드 그룹화.** 다중 컬럼은 읽기 순서를 모호하게 해 필드를 건너뛰게 한다.
7. **제출 버튼은 결과 라벨.** "Submit"이 아니라 "Place Order".
8. **입력 도중 검증 금지.** 키 입력 중 "잘못된 이메일"은 성급한 판단 — 필드를 벗어날 때 검증.

> **부담 인쇄 역설**: "3문항, 40초"처럼 부담을 미리 말하면 두려움이 거래로 바뀐다. 단, 거짓말 금지 — 1분이라 했는데 5분이면 신뢰가 사라진다.

---

## 3. Menus — 정보 구조의 시각화
**shadcn**: Dropdown Menu · Navigation Menu · Menubar · Context Menu · Breadcrumb

메뉴는 공간 절약 + 인식 우위(가시 선택에서 고르기). 단, **완결성 주장**이라는 함정 — 사용자는 메뉴를 "부엌이 만들 수 있는 전체 목록"으로 읽는다. 열리지 않을 라벨 아래 있는 것은 사용자에겐 없는 것이다.

1. **카테고리는 사용자 어휘로 — card sorting·tree testing으로 검증.** 조직도는 정보 구조가 아니다.
2. **hover보다 click-to-open.** hover 필수면 짧은 지연 + 대각선 허용 경로 추가.
3. **캐스케이드 2단계 한도.** 더 깊으면 깊이 말고 카테고리를 재구성.
4. **데스크톱에선 최상위 내비게이션 노출.** 햄버거는 작은 화면 전용 — 보이지 않는 내비게이션은 안 쓰는 것이다.
5. **현재 위치 표시.** "you are here" 점 없는 지도.
6. **중요도·작업 빈도순 정렬.** 정확한 이름을 아는 경우에만 가나다/알파벳순.
7. **가장 자주 쓰는 2–3 명령은 메뉴에서 빼고 가시 버튼으로 승격.** 메뉴는 긴 꼬리용.

---

## 4. Links — 웹의 원자
**shadcn**: (Typography·Breadcrumb 맥락)

링크는 두 약속 — 클릭 가능하다는 시각 약속(색+밑줄)과, 반대편에 무엇이 있는지에 대한 약속(information scent). "Click here"/"Learn more"는 향이 0이다. 스캐닝 사용자는 링크 **앞 11문자**를 주로 읽는다.

1. **링크는 링크답게.** 본문 속 링크는 색+밑줄 — 색만은 색맹·저가 화면에서 실패.
2. **링크 서식은 링크 전용.** 다른 것에 밑줄을 주면 가구를 클리커블로 훈련시킨다.
3. **정보를 담은 단어를 앞에.** 앞 11문자가 대부분의 일을 한다.
4. **목적지를 예측하게 + 맥락 없이도 의미 통하는 텍스트.** 스크린리더는 링크 목록을 뽑아준다 — "click here" 14개는 무용.
5. **방문·미방문 링크 구분** (링크 많은 디자인).
6. **링크를 버튼으로, 버튼을 링크로 교차 복장 금지.** 시각 문법이 의미를 운반한다.
7. **기본 같은 탭에서 열기.** 예외 시 링크에 표시(예: "(PDF)").

> **핵심 경계**: 링크는 *가고*, 버튼은 *한다*. 두 언어를 흐리면 매 클릭마다 작은 세금이 붙는다.

---

## 5. Dialog Boxes — 중단은 그 값을 증명해야
**shadcn**: Dialog · Alert Dialog · Sheet · Drawer

Modal은 모든 작업을 차단하고 사용자의 작업 기억에 세금을 매긴다. 그래서 중단을 **벌어야** 한다 — 차단 결정, 되돌릴 수 없는 결과, 없으면 진행 못 하는 입력.

1. **진짜 차단 결정에만 modal.** 합리적으로 계속 작업할 수 있다면 중단은 정당화 안 된다.
2. **버튼은 결과 라벨.** "Delete 3 Files" / "Keep Files"가 질문에 답한다 — "OK"/"Cancel"은 모호.
3. **안전한 선택을 기본으로, Esc는 항상 취소.** 잘못된 Enter 한 번이 무언가를 파괴해선 안 된다.
4. **다이얼로그당 1문제, 1–2문장.** 상황·결과·선택 — 읽기 과제가 아니다.
5. **되돌릴 수 있는 액션엔 확인 대신 undo.** undo는 경고를 클릭하도록 훈련하지 않고 사용자를 보호.
6. **작업 계속 가능하면 modeless.** 찾기바꾸기가 1980년대에 푼 문제.
7. **첫 방문자에게 오버레이로 인사 금지.** 가치 전달 전 이메일을 요구하는 건 인사 전에 교제를 요구하는 것.
8. **다이얼로그 위에 다이얼로그 금지.** 중단 대기열은 상류 설계가 이미 실패한 것이다.

> **다크 패턴 경고**: 오버레이는 3% 전환은 측정하지만 97%의 반감은 측정 안 된다 — "원한은 이벤트 핸들러가 없다". 강제 전환의 비용도 같이 측정하라.

---

## 6. Alerts · Notifications · Errors — 시스템의 대화 차례
**shadcn**: Alert · Toast · Message · Message Scroller

에러 메시지 가이드라인은 GUI 이전부터: 평언으로 무엇이 잘못됐는지, 정확히 어디서, 어떻게 복구하는지 — 사용자 탓 금지.

1. **평언, 날것의 에러코드만 금지.** "Error 0x80004005"는 개발자가 자기 위해 쓴 것이다.
2. **무엇이·어디서 잘못됐는지 정확히.** "문제가 발생했습니다"는 아무 도움 안 된다.
3. **나아갈 길 제시.** 좋은 에러 메시지는 1문장 복구 계획.
4. **사용자 탓 금지.** "illegal", "fatal", "invalid user" — 신뢰한 사람에게 죄를 떠넘기는 표현 금지.
5. **심각도 ↔ 포맷 매칭.** Toast는 FYI, 에러는 고쳐질 때까지 남는 인라인, modal은 재난 전용.
6. **아이콘 + 색 + 글자로 신호(중복 코딩).** 남성 약 1/12가 적녹 색약 — "빨간색 표시"만으로는 의미가 없다.
7. **알림 배급.** 기본 적게, 사용자가 볼륨 조절 — 매 중단은 한정된 신뢰 통장에서 인출.

> **Toast 함정**: 자가 소멸이라 확인용("메시지 전송됨")엔 좋지만, 사용자가 조치해야 할 에러에 쓰면 4초 뒤 사라져 하드 웨이로 재발견된다.

---

## 7. Icons — 작은 그림, 큰 오해
**shadcn**: Lucide 아이콘 전반

아이콘의 만성 약점 — 사용자가 낯선 그림을 자주 잘못 추측. 보편 인식에 가까운 건 손에 꼽는다(돋보기·집·기어·휴지통). 나머지는 테스트 대기 중인 가설.

1. **아이콘에 글자 라벨 짝지음.** 공간이 진짜 안 되면 tooltip 제공 + 학습성을 픽셀과 맞바꿨음을 인정.
2. **표준 은유가 있으면 그것 사용.** 검색·설정의 새 기호는 사용자 주의를 써서 아무것도 사지 않는다.
3. **은유를 믿기 전 인식 테스트.** 5명에게 아이콘만 보여 의미를 물어라 — 망설임이 답이다.
4. **일관된 스타일 + 구별되는 실루엣.** 형제처럼 보이되 흘겨봐도 구별 가능하게.
5. **학습된 아이콘을 유행으로 재디자인 금지.** 친숙한 기호 재설계는 모든 기존 사용자에게 세금을 매긴다.
6. **16×16에서 살아남는 favicon.** 로고를 한 강한 형태 + 브랜드 색으로 단순화 — 정밀 디테일은 진흙이 된다.
7. **아이콘 전용 버튼은 보편 소수