Communitygithub.com

UX 법칙

사람이 **보고, 기억하고, 결정하고, 행동**하는 방식에 대한 30가지 증거 기반 UX 원칙을 에이전트 스킬로 제공합니다 — 각 원칙의 메커니즘, 적용 방법, 함정, 실제 예시를 포함합니다.

UX 법칙란 무엇인가요?

이 스킬은 30가지 증거 기반 UX 법칙을 실용적인 툴킷 형태로 제공하여 AI 에이전트가 UI를 설계하거나 진단할 때 활용할 수 있도록 설계되었습니다. 각 원칙은 지각 및 인지 연구에 기반하며, 특정 플랫폼이나 디자인 트렌드에 국한되지 않고 보편적으로 적용 가능합니다. 사용자는 '너무 많은 버튼', '느리게 느껴짐', '사용자가 양식을 포기함' 같은 증상을 이름 붙인 뒤, 해당 증상과 관련된 1~3개의 원칙을 선택하고 상세 설명(메커니즘, 적용 방법, 함정, 실제 예시)을 참조하여 구체적인 UI 변경을 제안할 수 있습니다. 또한 원칙들 간의 상충 관계(예: 심미성-사용성 효과와 테슬러의 법칙)를 인지하고, 실제 사용자 테스트를 통해 검증해야 한다는 점을 강조합니다. 이 스킬은 Claude Code, Cursor, Codex 등의 에이전트 플랫폼에서 자연어 명령어로 호출되어 디자인 결정을 근거 기반으로 내리는 데 도움을 줍니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add ali-kk/uxlaws

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

UX 법칙은(는) 무엇을 하나요?

사람이 보고, 기억하고, 결정하고, 행동하는 방식에 대한 30가지 원칙으로 구성된 실용적인 툴킷입니다. 각 원칙은 실제 인터페이스에서 내릴 수 있는 결정으로 변환됩니다. 이는 스타일에 대한 의견이 아니라 지각 및 인지 연구에서 비롯되었으며, 플랫폼, 시대, 시각적 트렌드에 관계없이 적용됩니다.

이 스킬을 사용하여 새 UI를 설계하거나, 기존 화면이 어색한 이유를 진단하거나, 디자인 결정을 선호도가 아닌 이유로 뒷받침할 수 있습니다.

UX 검토 실행 방법

  1. 증상을 이름 붙이세요. "버튼이 너무 많다", "느리게 느껴진다", "사용자가 양식을 포기한다", "아무도 CTA를 눈치채지 못한다" 등. 증상은 원칙에 매핑됩니다 — 아래 인덱스가 그렇게 구성되어 있습니다.
  2. 해당하는 1~3개의 원칙을 찾아 reference/laws.md에서 전체 항목을 읽으세요. 정의뿐만 아니라 메커니즘과 함정을 읽으세요 — 거기에 유용한 뉘앙스가 있습니다.
  3. 이 화면에 대한 구체적인 변경 사항을 제안하고, 추론이 추적 가능하도록 원칙 이름을 인용하세요. "대비를 더 추가하세요"가 아니라 다음과 같이: "Von Restorff 효과: 기본 작업을 유일한 채워진 버튼으로 만들어 주변의 세 개의 고스트 버튼과 경쟁하지 않도록 하세요."
  4. 충돌을 확인하세요. 원칙들은 서로 상충합니다. 더 많은 여백(Prägnanz의 법칙) vs. 더 많은 가시적 옵션(발견 가능성). 단순함(Occam의 면도날)에는 하한선이 있습니다(Tesler의 법칙). 의도적으로 해결하세요. 하나의 법칙을 맹목적으로 적용하지 마세요.
  5. 실제 결과가 중요할 때는 사용자와 함께 검증하세요. 이 원칙들은 행동을 잘 예측하지만 테스트를 대체하지는 않습니다 — Aesthetic-Usability Effect는 특히 좋은 디자인이 깨진 작업을 숨길 수 있다고 경고합니다.

30가지 원칙, 분류별

지각 및 시각적 그룹화(게슈탈트) — 눈이 단어를 읽기 전에 화면을 구성하는 방식입니다.

  • 근접성의 법칙 · 공통 영역의 법칙 · 유사성의 법칙 · 균일 연결성의 법칙 · 프레그난츠의 법칙 · 폰 레스토르프 효과 · 선택적 주의 · 심미성-사용성 효과

기억 및 주의 — 사용자가 UI를 사용하는 동안 머릿속에 담을 수 있는 것입니다.

  • 밀러의 법칙 · 작업 기억 · 청킹 · 위치 효과 · 인지 부하 · 자이가르닉 효과 · 절정-종결 법칙

의사 결정 — 선택이 이루어지는 방식과 막히는 지점입니다.

  • 힉의 법칙 · 선택 과부하 · 인지 편향 · 오컴의 면도날 · 파레토 원칙

상호작용 및 성능 — 속도, 노력, 움직임, 기세입니다.

  • 피츠의 법칙 · 도허티 임계값 · 몰입 · 목표-구배 효과 · 파킨슨의 법칙

기대 및 정신 모델 — 사용자가 도착하기 전에 이미 가정하고 있는 것입니다.

  • 야콥의 법칙 · 정신 모델 · 능동적 사용자의 역설 · 포스텔의 법칙 · 테슬러의 법칙

인덱스 — 다음과 같은 상황에서 사용하세요…

원칙다음과 같은 상황에서 사용하세요…
심미성-사용성 효과더 예쁜 디자인이 "더 쉽다"고 평가되는 이유를 알아야 할 때 — 그리고 그것이 함정인 이유도 알아야 할 때.
선택 과부하너무 많은 옵션이 사람들을 얼게 만들거나, 결정을 더 나쁘게 만들거나, 떠나게 할 때.
청킹밀집된 콘텐츠나 긴 문자열을 스캔 가능하게 그룹화해야 할 때.
인지 편향결정이 "합리적"에서 벗어날 때 — 프레이밍, 기본값, 앵커링, 확증 편향.
인지 부하인터페이스가 뇌에 너무 많은 것을 한 번에 유지하거나 처리하도록 요구할 때.
도허티 임계값어떤 것이 느리게 느껴지거나 응답이 ~400ms를 초과할 때; 로딩 상태가 필요할 때.
피츠의 법칙버튼, 링크, 터치 대상의 크기와 배치.
몰입사용자를 몰입하게 유지하고, 도전과 기술을 매칭하며, 마찰을 제거할 때.
목표-구배 효과완료 동기를 부여하고, 목표에 가까워질수록 진행이 가속화될 때.
힉의 법칙선택의 수와 복잡성에 따라 의사 결정 시간이 급증할 때.
야콥의 법칙사용자가 당신의 UI가 그들이 알고 있는 다른 모든 UI처럼 행동하기를 기대할 때.
공통 영역의 법칙테두리, 카드, 배경, 컨테이너로 그룹화할 때.
근접성의 법칙간격만으로 그룹화할 때 — 가까운 것은 관련된 것으로 읽힙니다.
프레그난츠의 법칙시각적 복잡성을 줄이고, 눈은 가장 단순한 해석을 선호합니다.
유사성의 법칙일치하는 모양은 일치하는 기능을 암시합니다 (링크 vs. 일반 텍스트).
균일 연결성의 법칙선, 프레임, 공유 컨테이너로 관련 항목을 함께 묶습니다.
정신 모델사용자가 이미 그 일이 작동해야 한다고 믿는 방식과 일치시킵니다.
밀러의 법칙작업 기억은 작습니다(~7±2 청크); 청킹하세요 — 하지만 지나치게 제한하지 마세요.
오컴의 면도날자리를 차지할 가치가 없는 모든 요소를 제거하세요.
능동적 사용자의 역설사람들은 문서를 읽지 않습니다; 컨텍스트 내에서, 인라인으로, 적시에 가르치세요.
파레토 원칙가치의 ~80%를 주도하는 ~20%의 기능에 노력을 집중하세요.
파킨슨의 법칙작업은 주어진 시간을 채우기 위해 늘어납니다; 단계를 줄이고, 자동 완성하고, 기대치를 설정하세요.
절정-종결 법칙가장 강렬한 순간과 종료를 의도적으로 설계하세요.
포스텔의 법칙지저분한 입력을 관대하게 받아들이고, 깔끔하고 예측 가능한 출력을 내보내세요.
선택적 주의사람들은 사물을 무시합니다; 배너 블라인드니스와 변화 블라인드니스를 피하세요.
위치 효과첫 번째와 마지막 항목이 기억에 남습니다; 주요 작업을 끝에 배치하세요.
테슬러의 법칙일부 복잡성은 줄일 수 없습니다 — 시스템이 부담을 지고 사용자가 지지 않게 하세요.
폰 레스토르프 효과중요한 하나의 항목을 눈에 띄게 구별되게 만드세요 (광고처럼 보이지 않게).
작업 기억회상보다 인식을 지원하고, 화면 간에 상태를 유지하세요.
자이가르닉 효과완료되지 않은 작업은 주의를 끕니다; 진행 신호를 사용하여 완료를 유도하세요.

바로 사용 가능한 조합

  • 복잡한 화면 정리하기 → 오컴의 면도날 + 근접성의 법칙 + 밀러의 법칙.
  • 느리게 느껴지는 흐름 없애기 → 도허티 임계값 + 목표-구배 효과 + 낙관적 UI.
  • 혼란스러운 새 기능 수정하기 → 야콥의 법칙 + 정신 모델 + 능동적 사용자의 역설.
  • 버려진 양식 구하기 → 힉의 법칙 + 파킨슨의 법칙 + 포스텔의 법칙 + 진행 신호(자이가르닉 효과 / 목표-구배 효과).
  • 랜딩 페이지 날카롭게 다듬기 → 폰 레스토르프 효과 + 선택적 주의 + 위치 효과 + 절정-종결 법칙.

각 항목의 메커니즘, 적용 방법, 함정, 실제 예시는 **reference/laws.md**에서 확인할 수 있습니다.

관련 스킬