Design Gui Guide

---
name: design-gui-guide
description: |
  모든 화면을 구성하는 10개 GUI 요소(버튼·폼·메뉴·링크·다이얼로그·알림·아이콘·체크박스/라디오·탭·검색)와 보너스 2(윈도우·포인터)에 대한 증거 기반 사용성 가이드라인 86종.
  UX Tigers(Jakob Nielsen, 2026-07-29) "10 GUI Design Elements"를 shadcn 컴포넌트와 1:1로 매핑해 한국어 실용 지침으로 증류.
  design-prompt-builder 패턴 3(디자인 시스템 생성)·패턴 6(사용성 감사)이 컴포넌트별 체크리스트로 참조.

  다음과 같은 요청 시 반드시 이 스킬을 사용하세요:
  - "컴포넌트 사용성 가이드라인"
  - "GUI 위젯 설계 규칙"
  - "버튼/폼/다이얼로그 잘 만드는 법"
  - "Nielsen GUI 가이드라인"
  - "디자인 시스템 컴포넌트 감사 체크리스트"
version: "1.1.1"
---

# 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. **아이콘 전용 버튼은 보편 소수만.** 돋보기는 단독 가능, 네 "insights" 글리프는 안 된다.

> **텍스트 라벨은 살 수 있는 가장 싼 사용성 보험이다.** 라벨링된 아이콘은 *수업*이고, 라벨 없는 아이콘은 *시험*이다.

---

## 8. Checkboxes · Radio Buttons · Toggles — 네모는 "아무거나", 동그라미는 "하나만"
**shadcn**: Checkbox · Radio Group · Switch · Toggle · Toggle Group

형태가 선택 모델을 가르친다 — 네모는 복수, 동그라미는 정확히 1개. 수십년 노출로 사용자가 배운 문법. 디자이너가 둘을 바꾸면 화면이 자기 규칙에 대해 거짓말한다.

1. **독립 옵션엔 체크박스, 상호배타엔 라디오.** 형태가 계약 — 지켜라.
2. **옵션은 세로 배치.** 가로는 어느 라벨이 어느 컨트롤인지 모호하게 만든다.
3. **라벨 클릭 가능.** 14px 동그라미는 잔인한 타깃 — 라벨이 면적을 공짜로 늘린다.
4. **라디오 그룹엔 합리적 기본값 + (기권 유효하면) "None" 옵션.** 한 번 누르면 취소 불가하다.
5. **옵션은 긍정 어법.** "뉴스레터 받기"가 "통신에서 제외하지 마세요"보다 낫다.
6. **토글은 즉시 적용될 때만.** 제출 단계가 뒤따르면 체크박스다 — Save 버튼 위 토글은 모순.
7. **예/아니오는 라디오 2개가 아니라 체크박스 1개.** 컨트롤 1, 결정 1, 읽기 절반.
8. **2–4 옵션은 드롭다운 대신 가시 라디오.** 한 번에 보는 게 클릭+기억 테스트보다 낫다.

---

## 9. Tabs — 한 행, 같은 타입, 같은 단계
**shadcn**: Tabs

물리적 비유가 규칙을 정한다 — 선택 탭은 패널에 붙어 보여야, 미선택은 클릭 가능하되 종속적으로. 라벨은 짧고 **1행이 한도**.

1. **탭은 항상 1행.** 안 들어맞으면 탭이 너무 많거나 라벨이 긴 것 — 탭 수/라벨을 고쳐라.
2. **라벨은 평범한 1–2단어.** 탭은 병렬 콘텐츠의 제목, 문장이 아니다.
3. **선택 탭을 패널에 시각 연결 + 이웃과 구별.** current/hover/unselected 세 가지 다른 외관.
4. **같은 타입·같은 단계 콘텐츠에만 탭.** 순차 프로세스엔 단계 표시자 있는 마법사.
5. **대다수가 먼저 필요로 하는 탭을 기본.** 탭 영역의 첫인상은 네가 열어둔 패널이다.
6. **비교해야 할 콘텐츠를 탭에 걸치지 말 것.** 앞뒤로 넘기는 건 기억 테스트 — 비교표가 답이다.
7. **플랫폼이 허락하면 탭마다 URL.** 사용자는 북마크·공유·Back — 링크 가능한 장소만 온전히 존재한다.

---

## 10. Search — 사용자가 자기 말로 목표를 말한다
**shadcn**: Command

검색은 살아남은 명령줄 — 가능성 공간이 메뉴를 넘어서면 글자가 이긴다. AI 프롬프트 입력란도 같은 화석의 환생. **검색 로그는 얻을 수 있는 가장 싼 사용자 리서치**다.

1. **콘텐츠 많은 사이트 매 페이지 상단에 오픈 검색창.** 아이콘이 상자를 숨기면 클릭 한 번 + 가시성 마이너스.
2. **상자 최소 27문자 폭.** 전체 쿼리가 보여야 편집 가능 — 필드 안 스크롤은 비참하다.
3. **제출은 돋보기 표시 + Enter 작동.** 둘 다 사용자가 가져오는 관습.
4. **오타·복수·동의어 관용.** 엔진의 일은 사용자가 *의미*한 걸 찾는 것, *친* 걸 채점하는 게 아니다.
5. **결과 페이지에서 쿼리를 상자에 유지.** 재구성이 검색 행동의 절반 — 편집을 재시작이 아니라 키 입력으로.
6. **결과 페이지를 온전한 UI로 설계.** 스캔 가능한 제목, 왜 매치했는지 드러내는 스니펫, 컬렉션 커지면 필터.
7. **사용자가 사이트 일부로 여기는 모든 것 색인.** 지원 섹션을 조용히 건너뛰면 거짓 "결과 없음"을 양산한다.
8. **검색 로그 월 1회 마이닝.** 대량·빈약 결과 쿼리는 사용자가 직접 접수한 사용성 버그다.

---

## 보너스 A. Windows & Scrolling — 상속받은 것, 새로 띄우지 말 것
**shadcn**: Sidebar · Scroll Area · Resizable (컨텍스트)

오늘날 디자이너는 윈도우(브라우저 탭)를 상속받지 디자인하지 않는다. 남은 설계 질문은 "언제 새 창을 띄울까" — 답: **드물게**. 깜짝 창은 웹의 후진 기어(Back)를 부순다.

1. **기본 같은 창/탭에서 열기.** 새 탭을 원하는 사용자는 스스로 연다 — 대신 결정하지 말 것.
2. **스크롤 속도·방향 하이재킹 금지.** 스크롤은 근육 기억 — 덮어쓰면 페이지 전체가 빙의된 느낌.
3. **스크롤 가능한 모든 영역에 스크롤바 가시 유지.** 지도를 숨긴다고 영토가 짧아지진 않는다.
4. **무한 스크롤은 아래에 사용자가 필요한 것이 없을 때만.** 푸터가 중요하면 "Load More" 버튼.
5. **콘텐츠를 중요도순 배치.** 사용자는 스크롤하지만 주의는 매 화면마다 얇아진다 — 위가 프라임 부동산.
6. **Back 버튼 보호.** 이것을 부수는 것(불필요한 새 창 포함)은 내비게이션의 주 undo를 부순다.

---

## 보너스 B. Pointers & Cursors — 화면 위의 손
**shadcn**: (커서/포커스 표시 — 간접)

포인터 형태는 클릭이 할 일을 알리는 기호 언어 — 화살표·손·잡기 손·I-beam. 디자이너가 커서를 직접 그리는 일은 드물지만 신호를 존중해야 한다.

1. **플랫폼 표준 커서 사용, 재스타일링 금지.** 커스텀 커서는 디자이너엔 참신, 사용자엔 거짓말 탐지기다.
2. **진짜 클릭 가능 요소에만 손 모양, 편집 가능 텍스트에만 I-beam.** 커서 변화는 약속 — 거짓은 진짜들을 갉아먹는다.
3. **1초 이상 대기엔 busy 표시.** 커서의 가장 오래된 일은 시스템이 들었는지 솔직해지는 것.
4. **중요 정보·액션 경로를 hover 유일으로 만들지 말 것.** 터치 기기엔 hover가 없다 — 키보드도.
5. **키보드 사용자에게 가시 포커스 표시.** 포커스 아웃라인은 키보드의 커서 — 미학상 제거하면 Tab으로 이동하는 모두를 고립시킨다.

---

## 자주 헷갈리는 경계 — 요약표

| 하려는 일 | 쓸 것 | 금지 |
|---|---|---|
| 페이지 이동 | Link | 버튼으로 복장 |
| 즉시 실행(상태 토글) | Switch / Toggle | Save 버튼 위 토글(모순) |
| 제출로 확정 | Checkbox + Button | 같은 것에 토글 |
| 복수 선택 | Checkbox | Radio |
| 정확히 1개 | Radio | Checkbox |
| 차단 결정 | Modal Dialog | 인라인 가능한 데 modal |
| FYI 확인 | Toast | 에러(사라지면 안 됨) |
| 정보가 많은 내비게이션 | Search / Command | 햄버거(데스크톱) |

## 출처

- Jakob Nielsen, UX Tigers, "10 GUI Design Elements Build Every User Interface" (2026-07-29) — 86개 증거 기반 가이드라인 + 보너스(윈도우·포인터). https://www.uxtigers.com/post/gui-widgets
- 본 스킬은 원문의 가이드라인(사용성 원칙·방법)을 한국어 실용 지침으로 증류·재서술한 것이지 원문을 복사한 것이 아니다. 인용 사례(Expedia $12M·Fitts's law·남성 1/12 색약·27문자 폭·앞 11문자·0.1초 반응 등)는 사실 관계에 기반한다.
- 이론 뿌리: Jakob's Law · 인식>재인(Nielsen heuristic 6) · Fitts's law(1954) · perceived affordance(Don Norman) · information scent(Pirolli & Card).

## 관련 스킬

| 스킬 | 사용 시점 |
|---|---|
| `moai-designer:design-prompt-builder` | 패턴 3(생성)·6(감사)이 본 가이드라인을 컴포넌트별 체크리스트로 참조 |
| `moai-designer:design-system-prep` | DESIGN.md Component recipes 품질 기준 |
| `moai-designer:design-slop-check` | 카피 중심 검수의 보완 — 컴포넌트 동작·레이아웃 품질은 본 스킬 |
| `moai-designer:design-system-library` | shadcn vanilla 컴포넌트 참조 마크업과 본 가이드라인의 짝 |