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 컴포넌트 참조 마크업과 본 가이드라인의 짝 |