UX 심리학 스킬
웹 디자인 결정을 위한 조언 계층. 페이지 및 컴포넌트 설계 시 관련 행동 심리학 원칙을 표면화합니다. 이는 가중치 입력입니다 — 미적 판단, 브랜드 정체성 또는 창의적 방향을 재정의하지 않습니다.
사용 시기
페이지, 컴포넌트 또는 흐름을 구축하거나 설계한 후에 호출하세요. 이 스킬은 검토 계층으로 가장 잘 작동합니다 — 먼저 구축한 다음 심리학 렌즈를 실행하여 놓친 부분을 찾으십시오:
- 랜딩 페이지, 가격 페이지, 온보딩 흐름
- 구독/전환 퍼널
- 대시보드 레이아웃 및 데이터 프레젠테이션
- 내비게이션 및 정보 아키텍처
- 전자상거래 제품 페이지 및 체크아웃 흐름
- 사용자가 특정 행동을 취하도록 유도하는 모든 페이지
결정 프로세스
활성화되면 다음 순서를 따르십시오:
- 페이지 유형 식별 — 랜딩, 가격, 온보딩, 대시보드, 체크아웃 등
- 가장 관련성 높은 3-5개의 원칙 추출 — 아래 페이지 유형별 처방전에서
- 각 원칙에 대해 기술: 무엇인가 → 이 특정 페이지에 어떻게 적용하는가 → 안티 패턴은 무엇인가
- 제약 조건에 따른 가중치 적용 — 브랜드 정체성, 접근성 및 기술 요구사항이 항상 우선합니다
- 구체적이고 구현 가능한 변경 사항 추천 — 추상적인 조언이 아닙니다. 마크업, 레이아웃 또는 카피에서 무엇을 변경해야 하는지 보여주세요. 코드 라인을 가리킬 수 있다면 그렇게 하세요.
가중치 적용 방법
심리학 원칙은 여러 입력 중 하나입니다. 가중치 계층 구조:
- 브랜드 정체성과 창의적 비전 (최우선 — 사이트가 적절하게 보이고 느껴져야 함)
- 접근성과 사용성 (타협 불가 — WCAG 준수, 터치 대상, 대비)
- 기술적 품질 (성능, SEO, 반응형 디자인)
- 심리학 원칙 (이 스킬 — 미묘한 영향, 과도한 조작 금지)
심리학 트릭을 위해 미학이나 사용자 신뢰를 희생하지 마세요. 원칙이 좋은 디자인과 충돌한다면 좋은 디자인이 승리합니다.
이 스킬이 아닌 것
- 다크 패턴 핸드북이 아닙니다 — 여기 있는 모든 원칙은 윤리적 적용만을 위한 것입니다
- 완전한 디자인 시스템이 아닙니다 — 기존 디자인 스킬을 보강합니다
- 사용자 리서치를 대체하지 않습니다 — 실제 사용자 데이터는 항상 이론보다 낫습니다
- 엄격한 체크리스트가 아닙니다 — 적합한 원칙을 사용하고 적합하지 않은 것은 무시하세요
페이지 유형별 처방전 (인라인)
페이지 유형별 주요 원칙, 빠른 참조를 위해 자체 포함됨. 확장된 지침과 일반적인 실수는 knowledge/page-prescriptions.md를 참조하세요.
홈페이지 / 랜딩 페이지
| 원칙 | 적용 |
|---|---|
| 첫인상 | 히어로는 3초 이내에 가치를 전달합니다. 50ms 안에 형성됨 — 두 번째 기회는 없습니다. |
| 앵커링 | 가장 강력한 지표나 주장으로 시작하세요. 처음 본 숫자가 기준을 설정합니다. |
| 사회적 증거 | 실제 숫자를 초기에 표시하세요 (사용자, 결과, 실적). 막연한 주장은 전환되지 않습니다. |
| 정보 향기 | 명확한 내비게이션 — 사용자가 다음에 어디로 가야 할지 정확히 압니다. |
| 미학-사용성 | 시각적 완성도는 콘텐츠보다 먼저 신뢰를 얻습니다. 아름다운 것이 사용하기 더 쉬워 보입니다. |
가격 / 구독
| 원칙 | 적용 |
|---|---|
| 앵커링 | 프리미엄 등급을 먼저 또는 가장 시각적으로 눈에 띄게 표시하세요. 나머지는 모두 할인처럼 느껴집니다. |
| 손실 회피 | 유료 사용자가 얻는 것뿐만 아니라 무료 사용자가 놓치는 것을 중심으로 프레이밍하세요. 손실은 2배 더 아프게 느껴집니다. |
| 기본값 효과 | 권장 등급을 미리 선택하세요. 대부분의 사용자는 기본값을 변경하지 않습니다. |
| 약속/일관성 | 이미 무료 기능을 사용한 사용자는 구독할 준비가 되어 있습니다 — 각 단계가 다음 단계로 이어집니다. |
온보딩 / 가입
| 원칙 | 적용 |
|---|---|
| 점진적 약속 | 먼저 작은 무료 행동, 그 다음 계정, 마지막으로 결제. |
| 인지 부하 | 화면당 하나의 질문이 긴 양식보다 낫습니다. 필수적이지 않은 모든 것을 제거하세요. |
| 제이가르닉 효과 | 진행 상황 표시 (2/4단계). 완료되지 않은 작업은 사용자를 괴롭힙니다 — 사용자가 돌아와서 끝냅니다. |
| 호혜성 | 정보를 요청하기 전에 가치를 제공하세요. 무료 도구 액세스, 미리보기 또는 샘플 결과. |
대시보드 / 데이터 표시
| 원칙 | 적용 |
|---|---|
| 청킹 | 데이터를 하나의 거대한 목록이 아닌 범주나 우선순위별로 그룹화하세요. |
| 공간 기억 | 일관된 레이아웃으로 돌아오는 사용자가 즉시 항목을 찾을 수 있게 하세요. 이동시키지 마세요. |
| 만족 선택 | 가장 중요한 단일 인사이트를 강조하세요. 사용자는 첫 번째 수용 가능한 옵션을 선택합니다. |
| 재인 대 회상 | 전체 컨텍스트(레이블, 타임스탬프, 아이콘)를 표시하세요 — 사용자가 기억하도록 하지 마세요. |
체크아웃 / 결제
| 원칙 | 적용 |
|---|---|
| 인지 부하 | 게스트 체크아웃 옵션. 최소한의 양식 필드. 한 번에 하나의 결정. |
| 투명성 | 결제 단계 전에 모든 비용을 표시하세요. 예상치 못한 수수료는 포기 사유 #1입니다. |
| 손실 회피 | 신뢰 배지와 보증을 푸터가 아닌 결제 버튼 옆에 배치하세요. |
| 기본값 효과 | 표준 배송을 미리 선택하세요. '정보 저장'을 미리 체크하세요. 결정을 줄이세요. |
소개 / 신뢰 페이지
| 원칙 | 적용 |
|---|---|
| 권위 | 방법론, 데이터 출처, 팀 전문성 — 당신이 무엇을 하는지 알고 있음을 증명하세요. |
| 신뢰 계층 | 이 페이지는 레벨 2-3 사용자(관심 → 확신)에게 서비스합니다. 여기서 판매를 요구하지 마세요. |
| 투명성 | 강점뿐만 아니라 한계에 대해서도 솔직하게. 취약함이 신뢰를 쌓습니다. |
코드 수준 구현 예시
앵커링 (가격 페이지)
이전 — 모든 등급이 동등하며 앵커 없음:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan">Pro — $49/mo</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
이후 — Pro가 시각적 기본값으로 앵커됨:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan featured"> <!-- 시각적으로 눈에 띄고 미리 선택됨 -->
<span class="badge">Most Popular</span>
Pro — $49/mo
</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
이유: 추천 등급이 앵커가 됩니다. Basic은 비교적 저렴하게 느껴집니다. Enterprise는 Pro를 합리적으로 보이게 하기 위해 존재합니다. 'Most Popular' 배지는 사회적 증거를 추가합니다.
손실 회피 (구독 CTA)
이전 — 이득 프레이밍:
<button>Get Premium Access</button>
<p>Unlock all features and premium content.</p>
이후 — 손실 프레이밍:
<button>Keep My Premium Access</button>
<p>Without Premium, you'll lose access to daily insights,
saved dashboards, and priority support.</p>
이유: '액세스 권한을 잃게 됩니다'는 손실 회피를 유발합니다 (동등한 이득보다 ~2배 더 강력함). CTA는 '유지'를 사용합니다 — 이미 가지고 있는 것을 보호하는 것으로 프레이밍합니다.
제이가르닉 효과 (온보딩 진행)
이전 — 진행 표시 없음:
<form>
<h2>Tell us about yourself</h2>
{/* 8 fields on one page */}
</form>
이후 — 단계별로 진행 표시:
<div className="progress-bar">
<div className="step completed">Profile</div>
<div className="step active">Preferences</div> {/* 현재 */}
<div className="step">Review</div>
</div>
<form>
<h2>Step 2 of 3 — Your Preferences</h2>
{/* 2-3 fields only */}
</form>
이유: 완료되지 않은 진행 표시줄은 심리적 긴장을 만듭니다. 사용자는 시작한 일을 끝내기 위해 돌아옵니다. 8개 필드를 각각 2-3개 필드의 3단계로 나누면 인지 부하를 줄이고 완료를 위한 동기를 만듭니다.
인지 부하 (체크아웃)
이전 — 강제 계정 생성:
<h2>Create Account to Continue</h2>
<input placeholder="Email" />
<input placeholder="Password" />
<input placeholder="Confirm Password" />
<button>Create Account & Checkout</button>
이후 — 게스트 체크아웃 및 지연된 계정 생성:
<h2>Checkout</h2>
<input placeholder="Email (for receipt)" />
<button>Pay Now</button>
<p class="subtle">Want to save your info for next time?
<a href="/create-account">Create an account</a> after checkout.</p>
이유: 추가 필드는 모두 포기를 유발하는 결정 지점입니다. 먼저 판매를 완료하세요. 계정 생성은 사용자가 이미 약속한 후에(약속/일관성 원칙) 하는 작은 요청입니다.
원칙 범주 (11개)
| 범주 | 수 | 핵심 통찰 |
|---|---|---|
| 주의 | 4 | 사용자는 생각보다 적게 봅니다 |
| 게슈탈트 | 8 | 시각적 그룹화가 이해를 주도합니다 |
| 기억 | 10 | 재인이 회상보다 낫습니다; 모든 것을 청킹하세요 |
| 의미 구성 | 3 | 정신적 모델이 기대를 형성합니다 |
| 의사 결정 | 5 | 더 적은 선택, 더 명확한 결과 |
| 운동/상호작용 | 3 | 큰 목표, 빠른 응답 |
| 동기 부여 | 4 | 자율성 + 유능성 + 관계성 |
| 인지 편향 | 10 | 기본값이 지속됩니다; 첫인상이 앵커링됩니다 |
| 설득 | 9 | 요청 전에 신뢰; 약속 전에 증명 |
| 감정 | 6 | 아름다운 것이 사용하기 더 쉬워 보입니다; 기쁨이 충성도를 얻습니다 |
| 윤리 | 3 | 설득과 조작 사이의 명확한 경계선 |
총계: 65개 원칙 — 전체 데이터베이스와 정의 및 디자인 함의는 knowledge/principles.md를 참조하세요.
안티 패턴 (절대 하지 말 것)
- 가짜 희소성 카운터 — 실제가 아니라면 표시하지 마세요
- 확인 수치심 — '아니요, 돈을 절약하고 싶지 않습니다'는 조작적입니다
- 체크아웃 시 숨겨진 비용 — 장바구니 포기의 #1 원인
- 강제 연속 — 취소하기 어려운 구독은 모든 신뢰를 무너뜨립니다
- 오도 — 잘못된 클릭을 강제하는 시각적 속임수
- 가짜 사회적 증거 — 조작된 사용후기 또는 부풀려진 숫자
- 다크 기본값 — 사용자가 요청하지 않은 옵션 사전 체크
- 로취 모텔 패턴 — 들어가기는 쉽지만 나가기는 불가능
출처
원칙은 NN/g의 UX를 위한 심리학 연구 가이드(11개 범주에 걸친 112개 리소스)에서 파생되었으며, 실행 가능한 디자인 패턴으로 적용되었습니다. 학문적 기반: 카너먼(전망 이론), 노먼(감성 디자인), 치알디니(설득의 심리학), 힉, 피츠, 밀러, 제이가르닉.