Microinteractions
정의: 하나의 작업을 중심으로 하는 작은 제품의 순간들
∙ 알람 설정하기
∙ 좋아요 누르기
∙ 새로고침하기
∙ 볼륨 조절하기
Microinteractions의 4단계 구조
1. Trigger (트리거): 마이크로인터랙션을 '발동'시키는 계기
Manual Trigger (사용자가 시작)
∙ 버튼을 누를 때
∙ 스위치를 켤 때
∙ 음성 명령을 할 때
∙ 좋은 Manual Trigger는 발견하기 쉬워야
System Trigger (시스템이 시작)
∙ 오전 8시 알람
∙ 새 메시지 도착
∙ 배터리 부족 경고
∙ 너무 자주 발생하면 스팸이 되고, 너무 뜸하면 존재감이 없어짐
2. Rules (규칙): "트리거가 발생했을 때 정확히 무엇이 어떻게 일어나는가"
3. Feedback (피드백): 시스템이 사용자에게 "말하는" 방식
4. Loops & Modes: 시간에 따라 진화함
Loop (반복)
∙ 알람은 몇 분마다 울릴까?
∙ 스누즈는 몇 번까지 허용할까?
∙ 애니메이션은 한 번? 반복?
Mode (모드)
∙ 첫 사용자 vs 숙련자
∙ 평상시 vs 방해금지 모드
∙ 낮은 배터리 vs 충분한 배터리
Instagram 스토리 알림의 Mode 변화:
∙ 처음: "친구가 새 스토리를 올렸어요!" (적극적)
∙ 자주 무시하면: 조용히 표시만 (소극적)
∙ 다시 관심 보이면: 알림 재개 (적응적)
마이크로인터랙션 설계 원칙
1. 인간적이어야 한다
∙ 기계적 반응 ❌: "ERROR 404"
∙ 인간적 반응 ✅: "앗, 페이지를 찾을 수 없네요"
2. 예측 가능해야 한다
∙ 같은 행동 = 같은 결과
∙ 패턴을 학습할 수 있도록
∙ 예외는 명확히 설명
3. 효율적이어야 한다
∙ 필요 이상으로 화려하지 않게
∙ 반복 사용 시 지루하지 않게
∙ 생략 가능한 옵션 제공
4. 즐거워야 한다
∙ 작은 디테일로 미소 짓게
∙ 브랜드 개성 표현
∙ 사용할수록 애착 형성
Form Design: 사용자가 포기하지 않는 입력 양식
Form(입력창): 사용자와 비즈니스의 접점
Form 디자인이 곧 비즈니스 성과 💡
✅ Single Column
이름 ____
이메일 ____
비밀번호 ____
❌ Multi Column
이름 ____ 성 ____
이메일 ____ 전화 ____
Progress Indicator의 심리학
"사람들은 이미 진행된 작업을 완료하려는 경향이 강하다"A그룹: 10개 도장 카드 → 완료율 34%
B그룹: 12개 도장 카드 (2개 미리 찍힘) → 완료율 82%
👎🏻 나쁜 진행 표시
Step 1 of 7 (으... 7단계나?)
👍🏻 좋은 진행 표시
거의 다 왔어요! [◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◻︎◻︎] 80%
Radio Button vs Dropdown vs Toggle
Radio Button
∙ 옵션 2-5개
∙ 모든 옵션을 봐야 할 때
∙ 옵션 간 비교가 필요할 때
Check Box
∙ 여러개의 멀티옵션이 필요할 때
Toggle Switch
∙ On/Off 선택
∙ 즉시 적용되는 설정
∙ 현재 상태가 중요할 때
Dropdown
∙ 옵션 6개 이상
∙ 공간 절약 필요
∙ 기본값이 대부분 적합할 때
Label의 위치별 장단점
Floating Label
✅ 공간 효율적
✅ 맥락 유지
❌ 구현 복잡
❌ 접근성 이슈 가능 (시각장애인, 색약)
Top-Aligned [추천]
✅ 완료 속도 50% 빠름
✅ 긴 레이블 수용 가능
✅ 번역 대응 용이
❌ 수직 공간 많이 차지
Default의 세 가지 유형
1️⃣ Personal Defaults (개인화)
사용자의 과거 행동과 현재 상황을 기반으로 한 예측
마지막 주문 정보 활용
→ 이전 배송지 주소 자동 입력
→ 최근 결제 수단 기본 선택
위치 기반 추천
→ 사용자가 서울에 있으면 '서울특별시' 자동 선택
→ GPS 기반 가장 가까운 매장 표시
2️⃣ Smart Defaults (맥락적)
시간, 상황, 디바이스 등 현재 맥락을 고려한 기본값
시간대별 다른 기본값
→ 오전 11시 이전: '아침 식사' 카테고리
→ 오후 5시 이전: '점심 식사' 카테고리
→ 저녁 시간: '저녁 식사' 카테고리
디바이스별 최적화
→ 모바일: 간편 결제 우선
→ 데스크톱: 상세 옵션 표시
3️⃣ Statistical Defaults (통계적)
다수 사용자의 선택 패턴을 기반으로 한 기본값
가장 많이 선택되는 옵션
→ 배송 방법: '일반 배송' (82% 선택률)
→ 결제 수단: '신용카드' (76% 선택률)
→ 수량: '1개' (91% 선택률)
A/B 테스트로 검증된 최적값
→ 알림 설정: '중요 알림만' (이탈률 최소)
→ 정렬 순서: '인기순' (전환율 최대)
Dark Pattern 피하기
❌ 마케팅 수신 동의 ☑ (기본 체크)
❌ 자동 갱신 ☑ (기본 체크)
❌ 추가 보험 ☑ (기본 체크)
Validation & Error Handling
Inline Validation의 타이밍
너무 빠른 검증 (좌절감)
∙ 이메일: u|
∙ ⚠️ 올바른 이메일이 아닙니다 (아직 입력 중인데!)
적절한 검증 (도움)
∙ 이메일: user@|
∙ ⚠️ 이메일 도메인을 입력해주세요
에러 메시지의 3요소
1. 무엇이 잘못되었나
❌ "오류가 발생했습니다"
✅ "비밀번호가 너무 짧습니다"
2. 왜 잘못되었나
❌ "유효하지 않음"
✅ "비밀번호는 보안을 위해 8자 이상이어야 합니다"
3. 어떻게 고칠 수 있나
❌ "다시 시도하세요"
✅ "현재 6자입니다. 2자 이상 추가해주세요"
폼 디자인의 심리학적 트릭
1. Chunking 청킹
👉🏻 인간의 단기 기억은 7±2개 단위이므로, 긴 정보는 작은 덩어리로 나누기
∙ ❌ 16자리 카드번호: 1234567812345678
∙ ✅ 4자리씩 구분: 1234 5678 1234 5678
2. Anchoring 앵커링
👉🏻 첫 번째 옵션이 기준점이 되므로, 전략적으로 배치하기
∙ 100,000원 (마음 후원자)
∙ 50,000원 (사랑 후원자) ← 대부분 선택
∙ 30,000원 (응원 후원자)
∙ 직접 입력
3. Loss Aversion 손실 회피
👉🏻 얻는 것보다 잃는 것을 더 싫어하는 심리를 활용
∙ "10분 안에 완료하면 10% 할인!"
∙ 남은 시간: 08:23
🫙 Whitespace
1. Macro Space (큰 여백) - 요소 그룹 간의 공간
∙ 섹션 간 구분
∙ 헤더/푸터와 콘텐츠 분리
∙ 주요 CTA 주변
2. Micro Space (작은 여백) - 요소 내부의 공간
∙ 버튼 내부 패딩
∙ 텍스트와 이미지 간격
∙ 폼 필드 간격
박스 모델에서의 여백
∙ Margin: 요소 외부 여백
∙ Padding: 요소 내부 여백
∙ Line Spacing: 텍스트 줄 간격
∙ Letter Spacing: 글자 간격
언제 여백을 늘려야 하나?
∙ 사용자가 "복잡하다"고 피드백할 때
∙ 중요 CTA 전환율이 낮을 때
∙ 정보 계층이 불명확할 때
∙ 모바일 최적화 시
🔳 Contrast
∙ 차이가 만드는 명확성 (단순히 색상 대비 X)
∙ 두 요소 간의 시각적 차이를 통해 '정보의 위계와 중요도를 전달하는 도구'
Contrast를 만드는 요소들
1. 색상 (Color)
∙ Primary Action: 채도 높은 브랜드 컬러
∙ Secondary Action: 무채색 또는 옅은 색
∙ Disabled: 회색조
2. 크기 (Size)
∙ H1: 32px - 페이지 제목
∙ H2: 24px - 섹션 제목
∙ Body: 16px - 본문
∙ Caption: 14px - 부가 설명
3. 굵기 (Weight)
∙ Bold (700): 제목, 중요 정보
∙ Medium (500): 부제목
∙ Regular (400): 본문
∙ Light (300): 보조 정보
4. 위치와 정렬 (Position & Alignment)
∙ 중앙 정렬된 CTA
∙ 우측 상단의 알림
∙ 플로팅 액션 버튼
5. 형태와 스타일 (Shape & Style)
∙ 둥근 모서리: 친근한 액션
∙ 각진 모서리: 공식적 액션
∙ 원형: 프로필, 플로팅 버튼
🪄 Modals: 맥락 전환의 순간
∙ 현재 작업을 중단시킴
∙ 선택을 강요함
∙ 맥락을 전환함
✅ 적절한 사용 케이스
1. 중요한 정보 전달
∙ 파괴적 액션 확인 (삭제, 취소)
∙ 법적 동의 필요
∙ 시스템 중요 공지
2. 집중된 작업
∙ 짧은 폼 작성
∙ 간단한 설정 변경
∙ 미디어 미리보기
3. 일시적 상태
∙ 로그인/회원가입
∙ 공유 옵션
∙ 필터 설정
❌ 피해야 할 사용
1. 긴 콘텐츠나 복잡한 작업
∙ 여러 단계의 폼
∙ 긴 약관 텍스트
∙ 복잡한 설정
2. 자주 필요한 기능
∙ 네비게이션 메뉴
∙ 검색
∙ 자주 쓰는 필터
Error 처리의 6단계 라이프사이클
1. Product Development (제품 개발) - 에러를 미리 예측하고 설계
∙ 일반적인 실수 패턴 연구
∙ 엣지 케이스 고려
∙ 프로토타입 테스트
2. Release (출시) - 모니터링 시스템 구축
∙ 에러 추적 도구 설정
∙ 사용자 피드백 채널
∙ 초기 데이터 수집
3. Prevention (예방) - 에러 발생 자체를 차단
∙ 제약 조건 설정
∙ 명확한 행동 유도
∙ 가이드와 힌트
∙ 진행 방향 명시
4. Error (에러 발생) - 발견 가능하고 이해 가능하게
∙ 즉각적인 피드백
∙ 명확한 에러 표시
∙ 상황 정보 제공
5. Recovery (복구) - 빠르고 쉬운 복구 경로
∙ Undo 기능
∙ 자동 저장/복구
∙ 명확한 해결 방법
∙ 대안 제시
6. Reporting/Redesign (개선) - 지속적인 개선 사이클
∙ 에러 패턴 분석
∙ 사용자 피드백 수집
∙ 디자인 개선
∙ A/B 테스트
Error Messages: 인간적인 커뮤니케이션
좋은 에러 메시지의 구조
1. 무엇이 일어났는가 (What)
∙ ❌ "Error 404"
∙ ✅ "페이지를 찾을 수 없습니다"
2. 왜 일어났는가 (Why)
∙ ❌ "Invalid input"
∙ ✅ "이메일 주소에 @가 포함되어야 합니다"
3. 어떻게 해결하나 (How)
∙ ❌ "Try again"
∙ ✅ "이메일 주소를 확인하고 다시 입력해주세요"
상황별 메시지 예시
네트워크 오류
❌ "Network Error: Connection Failed"
✅ "인터넷 연결을 확인해주세요"
"연결이 불안정한 것 같습니다"
"잠시 후 다시 시도해주세요"
입력 검증 실패
❌ "Validation Error"
✅ "비밀번호는 8자 이상이어야 합니다"
"현재 6자를 입력하셨네요"
"2자 더 추가해주세요"
권한 오류
❌ "Access Denied"
✅ "이 페이지를 보시려면 로그인이 필요합니다"
"로그인 후 계속하실 수 있어요"
[로그인하기][돌아가기]
그룹 과제
-
평소에 자주 사용하지만 UI가 맘에 안들었던 제품을 하나 선택하고 사람들과 공유합니다.
-
해당 제품의 주요 페이지의 UI 구조를 학습한 내용들에 맞춰 분석해 정리합니다.
-
각 파트별로 목적에 맞게 설계되지 않은 부분을 찾아 학습한 내용에 맞춰 개선 제안을 정리합니다.
-
그 중 제품의 핵심 가치 구현에 맞게 우선순위를 정하고 UI 개선 계획을 수립합니다.
