https://youtu.be/MstP7noVX78?si=zxtLZtb9Vgmb2xPu

📖 소셜 딜레마(Social Dilemma)란 무엇인가

1. 소셜 딜레마 정의

소셜 딜레마란,
"사람들을 연결하고 이롭게 만들려고 했던 소셜 미디어 기술이 오히려 인간 사회를 파괴하고 있는 모순"

• 기술이 사람을 연결하는 듯 보이지만, 실제로는 분열, 조작, 중독을 초래한다.
• 좋은 의도로 시작된 서비스가 '광고 수익 극대화'를 목표로 하면서
  점점 인간 심리 해킹에 초점을 맞추게 된 결과다.

2. 소셜 딜레마의 핵심 문제

3. 데이터 해킹이 인간 삶에 미치는 영향

• 자기결정권 약화
  (내가 선택하는 게 아니라, 추천받고 길들여진 걸 선택하는 삶)
• 생각의 편향 강화
  (다른 의견을 볼 기회조차 차단되어, 극단적 세계관에 빠짐)
• 시간 착취
  (원래 계획했던 것보다 몇 배 더 오래, 무의식적으로 플랫폼에 갇힘)
• 정체성 혼란
  (좋아요 수, 댓글 반응에 의해 자존감이 좌우되는 구조)
• 사회 신뢰 붕괴
  (모두 다른 사실을 '진실'로 믿게 되어 사회적 대화가 불가능해짐)

✋ 그래서, 우리는 어떤 디자인을 해야 하는가

📖 UX 디자이너가 가져야 할 현실적 중심

1. 우리는 비즈니스 세계에 존재한다

• UX디자이너는 '사익'을 추구하는 조직 안에서 일한다.
• 우리에게 요구되는 것은 좋은 의도가 아니라, 구체적인 성과다.
• 따라서 수익성과 성장 지표를 무시하고는 설계할 수 없다.
• "선의만으로는 월급을 받을 수 없다."
  
  ✅ 핵심: UX는 '성과'를 낼 수 있어야 한다.

2. 그러나 인간을 도구로만 보면 안 된다

• "사람을 클릭 수, 체류 시간, 전환율로만 본다면", 우리는 소셜딜레마가 경고하는 문제를 반복하게 된다.
• 사용자가 '조작당했다'고 느끼는 순간, 브랜드 신뢰는 무너진다.
• 우리가 지켜야 할 것은 인간의 자유 의지와 선택권이다.
  
  ✅ 핵심: 사용자는 '통제 대상'이 아니라 '존중해야 할 존재'다.

 3. 좋은 UX는 유혹하지만, 강제하지 않는다

• 우리는 사용자의 선택을 부드럽게 유도할 수 있다. (ex. 추천, 강조)
• 그러나 절대적으로 "몰래", "은폐", "강요"하는 설계는 지양해야 한다.
• 유혹과 강제 사이에는 선명한 선이 있다. 이 선을 넘어서는 안 된다.
  
  ✅ 핵심: "유혹은 가능, 기만은 금지"

4. 나의 기준은 "납득 가능한 설계"다

• 사용자가 경험을 되돌아봤을 때,
• "아, 그땐 내가 필요해서 선택했지"라고 스스로 느끼게 해야 한다.
• "속았네", "당했네"라고 느끼는 순간, 신뢰는 회복 불가능해진다.
  
  ✅ 핵심: "설계는 사용자의 자기결정감을 지켜야 한다."

5. 윤리와 비즈니스는 '긴장 관계'다

• 윤리만 주장하면 성장이 막히고,
• 비즈니스만 추구하면 브랜드가 망가진다.
• 진짜 프로페셔널은 이 둘 사이에서 균형(Balance)을 잡는 사람이다.
  
  ✅ 핵심: "우리는 '성장하는 서비스'와 '존중받는 사용자'를 동시에 만든다."

📌 소셜딜레마형 다크패턴 피하기 위한 UX 디자인 체크리스트

1. 사용자의 자유를 존중하고 있는가?

• 사용자가 명확하게 선택할 수 있게 하고 있는가?
• 사용자가 쉬운 방법으로 거절할 수 있도록 설계했는가?
• 사용자의 의사 결정을 교묘하게 조작하거나 유도하고 있지 않은가?
  
  🎯 예시: “취소하기” 버튼을 일부러 흐릿하게 만들지 않는다.

2. 사용자의 시간을 존중하고 있는가?

• 사용자가 빠르게 원하는 목표를 달성할 수 있게 돕고 있는가?
• 무한 스크롤, 자동재생 등 중독성 강제 소비 구조를 무비판적으로 넣지는 않았는가?
  
  🎯 예시: '다음 동영상 자동재생'은 기본 OFF, 사용자가 ON할 수 있게 설정.

3. 정보는 투명하게 제공하고 있는가?

• 사용자가 내 데이터가 어떻게 사용되는지 쉽게 알 수 있도록 되어 있는가?
• 알림, 추천 등의 목적을 솔직하게 설명하고 있는가?
  
  🎯 예시: "당신의 관심사에 맞춰 보여드리는 추천입니다" 문구 명시.

4. 감정 자극에 의존하고 있지 않은가?

• 공포, 불안, 조급함을 고의로 자극하는 알림/메시지를 쓰고 있지 않은가?
• 긍정적인 동기 부여로 행동을 유도하고 있는가?
  
  🎯 예시: “놓치면 후회할지도 몰라요!” 대신 “필요할 때 언제든 다시 찾아오세요.”

5. 다양한 관점을 허용하고 있는가?

• 사용자가 다양한 정보와 의견을 탐색할 수 있도록 설계했는가?
• 알고리즘이 사용자를 극단적 편향으로 몰고 가는 걸 방지하고 있는가?
  
  🎯 예시: 추천 영역에 “다른 관점 보기” 옵션 추가.

✨ 요약
✅ "사용자가 스스로 생각하고 결정할 수 있도록 돕는다."
✅ "시간을 빼앗는 것이 아니라, 시간을 아껴주는 UX를 만든다."
✅ "진짜 가치 경험을 중심으로 디자인한다."

notion: https://www.notion.so/DAY-38-GA4-GA-Re-brew-1e34bb609e3a80e4bcbddfede211a084?pvs=4

Figma: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=1598-2&p=f&t=RtgeK52eG0rdfzHX-0

1. 키파인딩 (Key Findings)

키파인딩(Key Findings)이란?

• 리서치 결과 중 디자인 방향성에 의미 있는 핵심 발견만 간추린 것
• 단순 사용성 오류나 반응이 아니라, 디자인 변화로 이어질 수 있는 본질적인 발견을 말함

왜 중요한가?

• 키파인딩이 있어야 비로소 "문제를 해결하는 과정" (Problem-solving)이 시작될 수 있음

주의할 점:

• 사용자 불만을 피상적으로 해석하지 않고,
  사용자 감정 흐름(User Emotional Journey)까지 이해해야 진짜 문제를 짚을 수 있음

→ Re:brew 프로젝트에서도, 단순 이탈률이 아니라
'언제', '왜' 이탈했는지 감정선(Emotional Curve)까지 살펴야 했다는 걸 깨달았다.

2. UX 모델링 (UX Modeling)

UX 모델링이란?

• 특정 서비스의*사용자 경험(User Experience)을
  페르소나(Persona), 유저저니(User Journey Map), 친화도법(Affinity Diagram),
  공감모델(Empathy Map), 가치제안캔버스(Value Proposition Canvas) 등으로
  구조화/도식화하여 한눈에 이해할 수 있도록 정리하는 것

최근 트렌드:
스타트업/애자일(Agile) 환경에서는 빠른 실행을 위해 모델링을 생략하고
리서치 → 키파인딩 → 인사이트만으로 빠르게 넘어가는 경우가 많음

3. 인사이트 (Insight)

인사이트란?

• 리서치/키파인딩을 바탕으로,
  "서비스가 취해야 할 변화 방향(Change Direction)"을 자각하는 것

정리 구조:

• 키파인딩 → "이런 문제가 있구나."
• 인사이트 → "이 문제를 이렇게 바꿔야겠구나."

주의할 점:

• 인사이트(Insight) ≠ 아이디어(Idea)
  • 인사이트: 방향성 제안 (Direction)
  • 아이디어: 구체적 실행 방법 (How-to)

4. 구체화 단계 (Develop 단계)

Develop(구체화 단계) 순서:

1. 인사이트 기반으로 가치(Value)를 도출
2. 비즈니스 목표(Business Goals), 기술적 타당성(Technical Feasibility) 검토
3. 가치 우선순위(Value Prioritization) 설정
4. 차별화 전략(Positioning) 수립
5. 컨셉트(Concept) 정리
6. 서비스 모델(Service Model) 정의 및 실행방안(Action Plans) 수립

Re:brew 프로젝트에 적용할 시사점:
대대적인 전략 변경이 필요 없을 때는 기존 서비스 감성 유지 + 몰입성 강화 중심으로 디벨롭해야 한다.

5. 인터랙션 설계 (Interaction Design)

핵심 요소:

• 터치/탭(Tap), 스와이프(Swipe), 스크롤(Scroll), 드래그 앤 드롭(Drag & Drop), 핀치 인/아웃(Pinch In/Out)
• 상태 변환(State Change): 빠른 애니메이션, 확장/축소, 뒤집기(Flip), 수평 이동(Horizontal Scroll) 등

깨달은 점:
사용자의 손동작 흐름(User Gesture Flow)까지 설계해야 진짜 UX 개선이 된다.

🛠️ 독서를 통해 얻은 Re:brew 프로젝트 보완 포인트

🛠️ 독서를 통해 얻은 Re:brew 프로젝트 개선 아이디어

➊ 초기 이탈 감정선을 더 섬세하게 추적하려면 어떤 방법을 추가할까?

1. 클릭스트림 분석 (Clickstream Analysis)

• 사용자가 앱에 접속한 후 어떤 버튼 → 어떤 화면 → 어떤 액션을 순서대로 기록해서
  이탈 직전까지의 흐름을 시퀀스(Sequence)로 시각화하는 방법.
• 특정 액션 후 바로 이탈하는 패턴이 반복된다면, 그 시점에 감정선이 급락했을 가능성이 큼.

2. 이벤트 기반 세분화 (Event Segmentation)

• '시작했지만 완료하지 않은 행동'을 추적.
  예: 튜토리얼 중 "꾸미기" 기능 시도 없이 종료한 유저만 따로 묶기.
• 이렇게 묶은 그룹에 대해 체류 시간, 클릭 수 등 비교 분석하면 어디서 흥미가 꺾였는지 더 정확히 알 수 있음

3. 감정 키워드 수집 (Emotional Keyword Mining)

• 짧은 설문, 앱 내 피드백 창 등을 통해
  '지금 기분'을 선택하게 해서 데이터 수집. (예: "재밌어요 / 헷갈려요 / 지루해요" 중 선택)
• 이 데이터를 이탈 시점과 매칭하면 객관적인 감정선 그래프(Emotional Curve Graph)를 그릴 수 있음.

4. 이탈 직전 행동 리플레이 (Session Replay)

• 실제로 유저가 이탈하기 직전 어떤 조작을 했는지 녹화해서 보는 방법.
  (ex: Hotjar, Contentsquare 같은 툴에서 지원)
• 클릭 오작동, UI 혼란 등 감정선 급락 원인을 직접 눈으로 확인 가능.

➋ 복귀 유저 첫 30초 안에 감성 보상을 자연스럽게 녹이려면 어떤 연출이 효과적일까?

1. 리턴 환영 애니메이션 (Return Welcome Animation)

• 복귀 즉시, 화면 전체를 부드럽게 덮는
  "돌아와줘서 고마워요!" 애니메이션을 띄우고
  따뜻한 음악과 함께 보상을 슬라이드 방식으로 자연스럽게 보여주는 것.
  (지루한 팝업 알림이 아니라, 감정선을 터치하는 부드러운 흐름)

2. 스토리텔링 기반 미션 제공 (Narrative Return Quest)

• "그동안 당신의 카페가 조용했어요. 다시 활기를 불어넣어 주세요!" 같은 작은 스토리로
  보상과 미션을 감정적으로 연결해준다.
• 그냥 "보상 지급"이 아니라, 유저가 세계관에 다시 몰입하게 유도.

3. '보상 타임라인' 연출 (Reward Timeline Animation)

• 과거 활동 이력을 타임라인처럼 짧게 보여준 뒤,
  "당신의 여정은 계속됩니다" 식의 메시지와 함께 보상 지급.
• 과거-현재를 이어주는 감정 흐름 덕분에 '끊김 없이 이어진 느낌'을 주기 좋음.

4. UI 레이어 최소화 (Minimal UI Layering)

• 복귀하자마자 무거운 팝업 3개 띄우는 식은 최악.
  애니메이션 1개 → 짧은 설명 1줄 → 바로 클릭 가능한 보상 수령 버튼만 보여주는 걸 추천.
• 30초 안에 자연스럽게 리워드를 받고 탐색 시작할 수 있어야 함.

figma: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=1527-2&p=f&t=RYC1G0kk29P8d08W-0

notion: https://www.notion.so/DAY-37-GA4-3-1e04bb609e3a80d59d1ecdb2230d1952?pvs=4

🔗 마비노기 UI 클론 프로토타입 링크: https://www.figma.com/proto/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=1280-871&p=f&t=B0JG8v7gVzmgnffl-1&scaling=scale-down&content-scaling=fixed&page-id=1280%3A818&starting-point-node-id=1280%3A871

🔗 피그마 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_강소연?node-id=1280-5754&t=TweYFx8RpgXyUZQJ-0

🔗 노션 링크:
https://www.notion.so/DAY-32-UI-UX-UX-Value-1d94bb609e3a80f2ab25d7a60ab1b4f3?pvs=4

노션 링크:
https://www.notion.so/DAY-30-UX-UX-Value-1d74bb609e3a8000b177ddcb3a3931e1?pvs=4

피그마 링크:
https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=1195-265&p=f&t=504DLMH2PKSehhCn-0

어피니티 다이어그램

유저 저니 맵

피그마 링크:
https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_강소연?node-id=1140-35&p=f&t=uLfEBhOU3ly4jLyZ-0

✅ UX/UI 디자인 시스템 핵심 원칙 정리

1. 명확성 (Clarity)

• 사용자에게 무엇을 해야 할지 헷갈리지 않게 명확히 안내함.
• 흐릿하거나 중복된 메시지, 불분명한 버튼 라벨은 피해야 함.

2. 일관성 (Consistency)

• 모든 화면에서 같은 요소는 같은 방식으로 작동해야 함.
• 컬러, 아이콘, 내비게이션 방식, 문구 톤도 통일시켜야 함.

3. 단순함 (Simplicity)

• 필요한 정보만 보여주고, 복잡한 구조나 과잉 요소는 배제함.
• 사용자의 선택 부담을 줄이기 위해 정보량을 줄이는 게 중요함.

4. 피드백 제공 (Feedback)

• 사용자의 행동(클릭, 입력 등)에 대해 즉시 시스템 반응을 보여줘야 함.
• 버튼 눌림 효과, 로딩 중 표시, 저장 완료 메시지 등이 포함됨.

5. 유연성 (Flexibility)

• 초보자부터 숙련자까지 다양한 사용자 니즈를 수용해야 함.
• 예: 단축키, 자동 완성, 옵션 변경 기능 등.

6. 사용자 중심 (User-Centered Design, UCD)

• 디자이너 관점이 아니라 사용자 입장에서 생각하고 설계함.
• 사용자의 맥락, 목표, 환경을 반영해야 진짜 쓰기 좋은 디자인이 나옴.

7. 예측 가능성 (Predictability)

• 사용자가 "이걸 누르면 이런 일이 생기겠지"라고 예상할 수 있어야 함.
• 인터랙션, 플로우, 버튼 위치 등이 직관적이어야 함.

8. 오류 방지 (Error Prevention)

• 실수를 미리 막는 디자인이 중요함.
• 예: 비활성화 버튼, 경고창, 실시간 유효성 검사

9. 가독성 (Readability)

• 텍스트는 쉽게 읽히고 빠르게 이해될 수 있어야 함.
• 적절한 폰트 크기, 행간, 컬러 대비, 줄바꿈 설계가 필요함.

10. 접근성 (Accessibility)

• 장애가 있는 사람도 불편 없이 이용할 수 있도록 배려함.
• 색상 대비, 키보드 네비게이션, 스크린 리더 호환 등을 고려함.

✅ UX 휴리스틱 10가지 원칙 (Jakob Nielsen)

✅ 휴리스틱 항목별 UI 컴포넌트 실제 사례

• 휴리스틱 원칙은 컴포넌트 설계, 인터랙션 설계, 그리드/배치 등 전반적인 디자인 전략에 깊이 연관됨
• 그리드 시스템은 일관성과 가독성, 시각적 안정감을 높이는 UI의 뼈대 역할을 하며, 디자인 시스템에 구조적으로 반영되어야 함
• 모바일 UI 우측 정렬은 사용자 습관과 손가락 도달 범위를 고려한 인간 중심 설계임

🔸 1. 시스템 상태 가시성 (Visibility of System Status)

• 로딩 스피너 / 진행바: 요청 상태를 사용자에게 즉시 알려줌.
• 토스트 메시지 / Snackbar: “삭제되었습니다”, “저장 완료” 등 즉각적인 피드백 제공.

🔸 2. 사용자와 시스템 간 일치 (Match between system and the real world)

• 카드 UI: 실생활에서의 카드, 포스터처럼 작동 (정보 단위 묶음)
• 아이콘: 휴지통, 검색 돋보기 등 실제 사물에서 가져온 은유적 디자인 사용

🔸 3. 사용자 제어와 자유 (User control and freedom)

• 뒤로 가기 버튼 / 닫기 아이콘: 실수로 들어간 화면에서 쉽게 탈출 가능
• Undo / 되돌리기 기능: Gmail의 ‘메일 보내기 취소’가 대표 사례

🔸 4. 일관성과 표준 (Consistency and standards)

• 탭바 위치/기능 통일: iOS, Android 모두 하단 탭에 홈/검색/마이 등 위치 유지
• 폰트, 컬러 스타일 가이드: H1~H3, 본문 텍스트 크기와 간격 규칙 통일

🔸 5. 오류 방지 (Error prevention)

• 입력 필드 유효성 검사: 비밀번호 입력 시 실시간 안내 메시지
• 비활성화된 CTA 버튼: 필수 입력이 완료되지 않으면 '다음' 비활성 처리

🔸 6. 인지보다는 인식 (Recognition rather than recall)

• 자동 완성 / 최근 검색어 추천: 기억보다 인지에 의존
• 툴팁 / 버튼 안 아이콘: 숨겨진 기능 설명을 시각적으로 제공

🔸 7. 유연성과 효율성 (Flexibility and efficiency of use)

• 단축 키 / 스와이프 제스처: 고급 사용자 대상 속도 향상
• 최근에 본 상품 / 최근 주문 기능: 반복 행동 최소화

🔸 8. 미니멀리즘 (Aesthetic and minimalist design)

• 불필요한 라벨 생략: ‘홈’ 아이콘에 굳이 텍스트 설명 없이도 인식 가능
• 그리드 기반 카드 배열: 정보 정렬성과 시각적 안정성 강화

🔸 9. 오류 인식, 진단, 복구 (Help users recognize, diagnose, and recover from errors)

• 에러 메시지에 원인 + 해결 방법 포함: 예) “비밀번호가 너무 짧습니다. 최소 8자 이상 입력해 주세요.”

🔸 10. 도움말과 설명서 (Help and documentation)

• FAQ / 툴팁 / 온보딩 안내: 사용자가 기능을 잘 이해하지 못할 경우 대비

✅ 그리드 설계 원칙을 디자인 시스템에 반영하는 방법

디자인 시스템에서 그리드는 단순히 격자 배치가 아니라 전체 UI 구조를 조직화하는 기준선임.

📐 핵심 구성 요소

🧱 시스템 적용 예시

📘 디자인 시스템 반영 방법

• Figma 기준: Layout Grid 설정으로 컬럼/거터/마진 지정
• 컴포넌트 위치, 정렬 기준은 컬럼 기준선에 맞춰 설계
• 버튼/폼/카드 등 주요 컴포넌트의 가로폭을 그리드 단위로 제한하여 정렬 유지
• Breakpoint 기준에 따라 컴포넌트를 몇 개 컬럼에 걸칠지 정의 (col-span 같은 개념 활용)

✅모바일 UI에서 우측 배치가 많은 이유

📱 사용자 습관과 인터랙션 위치 분석

• 오른손잡이 기준의 UX: 대다수 사용자(90% 이상)가 오른손을 사용하기 때문에, 오른쪽 하단 영역이 가장 쉽게 닿는 터치 영역임.
• 주요 액션은 손가락이 가장 빠르게 도달할 수 있는 위치에 배치하는 것이 일반적임.

🟦 우측 배치 UI 예시

🤳 터치 영역 기준 (Thumb Zone)

• 한 손 사용 기준, 오른쪽 하단은 "Reachable Zone", 왼쪽 상단은 "Hard to Reach Zone"
• 이 기준은 Google Material Design 가이드에서도 명시함

✅ 문화적 배경에 따른 색상과 디자인 선호도

• 디자인은 문화와 언어의 영향을 받는 사용자 습관의 집합체임.
• 글로벌 UX에서는 컬러, 타이포, 레이아웃, 피드백의 표현까지 모두 문화적 맥락에 맞춰 로컬라이징되어야 함.
• 한국 사용자는 안정적이고 정제된 색상과 구조, 미국 사용자는 강렬하고 행동 중심적인 인터페이스, 일본 사용자는 디테일과 컬러 다양성을 중요하게 여김.

✅ 색상에 대한 나라별 감정 반응

같은 색이라도 문화적 해석은 달라짐. 디자인 시스템을 글로벌로 확장할 경우 반드시 컬러 로컬라이징 전략이 필요함.

✅ 사용자 습관 기반 디자인 적용 예시

✅ 1. 토스의 ‘One Thing, One Page’ 란 무엇인가?

토스는 이를 디자인 시스템의 철학으로 삼고 있으며,
이 방식은 지금의 모바일 중심 UI/UX 트렌드, 마이크로 인터랙션, 미니멀 콘텐츠 흐름과 완전히 맞닿아 있음.

• 하나의 페이지에서 단 하나의 메시지나 행동만 유도하는 UI 구조
• 토스는 사용자의 혼란을 줄이기 위해 모든 화면에서 사용자가 “딱 하나”에 집중할 수 있도록 구성함
• 예시: 결제 요청 화면에서는 ‘얼마를 누구에게 보낼지’만 보여줌 → 이후 단계로 넘김

📌 핵심 구성 요소

• 군더더기 없는 구성: 정보 1개, CTA 1개
• 페이지 전환 구조: 한 번에 여러 정보를 보여주지 않고 순차적으로 유도
• 예측 가능한 흐름: 사용자가 어떤 행동을 해야 할지 고민하지 않게 만듦

✅ 2. Simplicity와의 연관성

Simplicity는 단순히 ‘간단하게 보인다’는 개념이 아님.
핵심만 남기고, 불필요한 요소를 제거해 사용자 사고를 줄이는 구조 설계.

→ 결국 Simplicity는 사용자 중심의 정보 설계 전략이며,
One Thing, One Page는 이를 UI 구조에 적용한 실현 방식.

✅ 3. Simplicity가 왜 가장 주목받는 UI 트렌드인가?

1) 인지 피로 최소화 (Cognitive Load Reduction)

• 사용자들은 빠르게 정보 처리하고 싶어함
• 복잡한 인터페이스는 이탈률을 높임
• Simplicity는 **“결정이 쉬운 UI”**를 만든다는 점에서 사용자 편의성과 직결됨

2) 모바일 환경 최적화

• 작은 화면에서는 정보 과잉보다 정보 집중이 더 효과적임
• ‘한 번에 하나만 보여주는 구조’는 스크롤 실수, 클릭 오류도 줄여줌

3) 행동 유도(Conversion) 최적화

• CTA 버튼의 효율은 ‘경쟁 요소가 없을 때’ 가장 높아짐
• One Thing 구조는 명확한 행동 흐름 설계에 최적화되어 있음

4) 브랜드 신뢰도 향상

• 혼란스럽지 않고, 정리된 디자인은 신뢰를 줌
• 특히 금융 서비스(토스)처럼 정확함과 신속함이 중요한 서비스에서 Simple UI는 곧 브랜드 가치임

✅ 인터랙션(Interaction)

인터랙션(Interaction)은 사용자의 행동에 **즉각적인 반응(피드백)**을 주는 것을 의미하며,
그 피드백이 명확하고 직관적일수록 UX 품질이 높아짐.

✅ 좋은 피드백 인터랙션 예시

1. 버튼 클릭 효과

• 버튼을 누르면 살짝 눌리는 듯한 애니메이션 + 컬러 변경
  → “내가 누른 게 맞다”는 감각적 피드백 제공

2. 폼 입력 중 실시간 검증

• 이메일 형식이 틀리면 빨간색 경고 메시지
• 올바르면 체크 아이콘으로 변경
  → 입력 오류를 미리 예방하고 학습 부담을 줄임

3. 파일 업로드 시 진행 표시

• 프로그레스 바가 실시간으로 % 표시
  → 사용자가 기다릴 수 있는 이유를 제공

4. 스와이프 삭제

• 왼쪽으로 밀면 ‘삭제’ 버튼이 슬라이드로 등장
  → 행동과 결과의 연결이 직관적임

5. 체크리스트 완료 시 애니메이션

• 체크 아이콘이 ‘퐁’ 하고 튀면서 색상이 변함
  → 사용자가 완료한 행동에 대해 보람을 느낌

6. CTA 클릭 후 상태 전환

• “다음” 버튼 클릭 → 버튼이 로딩 중으로 바뀌고 다음 단계로 전환
  → 사용자 흐름을 유도하며 불확실성을 줄임

✅ 좋은 Flexibility 예시

이들 사이트는 다양한 기기와 화면 크기에 최적화된 사용자 경험을 제공함.​

1. 토요타(Toyota) 공식 웹사이트
   • 설명: 토요타의 웹사이트는 유동적인 그리드 디자인을 통해 다양한 화면 크기에 맞게 콘텐츠가 자연스럽게 조정됨. ​wix.com+1Brunch Story+1
   • URL: https://www.toyota.com/
2. 유튜브(YouTube)
   • 설명: 유튜브는 화면 크기에 따라 이미지와 글이 재배치되는 반응형 디자인을 적용하여 다양한 기기에서 최적화된 사용자 경험을 제공함. ​네이버 블로그+1Brunch Story+1
   • URL: https://www.youtube.com/
3. 애플(Apple) 공식 웹사이트
   • 설명: 애플의 웹사이트는 적응형 디자인을 활용하여 다양한 기기에 최적화된 레이아웃을 제공하며, 이는 반응형 디자인과 유사한 사용자 경험을 제공함. ​wix.com
   • URL: https://www.apple.com/
4. 텐바이텐(10x10)
   • 설명: 텐바이텐은 해상도별로 콘텐츠 차이를 두어 다양한 기기에서 최적화된 사용자 경험을 제공함. ​wix.com+2Brunch Story+2Brunch Story+2
   • URL: https://www.10x10.co.kr/
5. 홍익대학교 공식 웹사이트
   • 설명: 홍익대학교의 웹사이트는 해상도별로 콘텐츠 차이가 없는 반응형 디자인을 적용하여 다양한 기기에서 일관된 사용자 경험을 제공함. ​Brunch Story
   • URL: https://www.hongik.ac.kr/

✅ 좋은 Accessibility 예시 / 개선 여지 있는 예시

접근성 디자인 시스템은 장애를 가진 사용자나 디지털 약자도 웹사이트나 앱을 불편 없이 사용할 수 있도록 돕는 설계 원칙과 컴포넌트의 집합임. 이 시스템은 다양한 신체적, 인지적 조건을 고려해 누구나 동등하게 접근 가능한 인터페이스를 만드는 것을 목표로 함.

예를 들어 시각 장애인을 위해 화면 리더(Screen Reader)가 인식 가능한 구조를 사용하고, 색약 사용자도 정보를 쉽게 인식할 수 있도록 색상 대비를 충분히 확보함. 마우스를 사용할 수 없는 사용자도 키보드만으로 주요 기능을 탐색할 수 있도록 포커스 흐름과 탭 순서가 정리되어야 함.

이러한 접근성 지침은 디자인 시스템에 기본값처럼 포함되며, 팀 전체가 동일한 기준에서 UI를 만들 수 있게 도와줌. 결과적으로 사용자 경험이 향상되고, 법적 기준도 충족하며, 다양한 상황의 사용자에게 브랜드 신뢰도를 높일 수 있음.

1. 좋은 예시 사이트– KRDS (대한민국 정부 디자인 시스템)

• 누구나 정부 서비스를 쉽게 사용할 수 있도록 접근성 중심으로 설계되었음.
• 색상 대비, 타이포그래피, 버튼 크기, 라벨링 등에서 국제 웹 접근성 표준을 따르고 있음.
• 맥북, 모바일, 다양한 화면에서도 유연하게 반응하며 정보를 일관되게 제공함.
• 사이트 주소: https://www.krds.go.kr

2. 접근성 개선 여지가 있는 사이트 

1. https://www.emart.com/

• 분류: 대형 유통사 쇼핑몰
• 이유: 시각장애인을 위한 대체 텍스트 누락, 키보드 네비게이션 미지원 사례 존재
• 개선 포인트: 스크린리더 호환성, 폼 요소 라벨링 강화

2. https://www.coupang.com/

• 분류: 대표 온라인 커머스
• 이유: 일부 페이지에서 배경색 대비 부족, 버튼 요소 설명 부족 지적 사례 존재
• 개선 포인트: 명도 대비 기준 충족, 텍스트 대체 설명 추가

3. https://www.yanolja.com/

• 분류: 숙박·여행 예약 플랫폼
• 이유: WCAG 기준에서 시각적 피드백 부족 및 키보드 접근성 제한 보고됨
• 개선 포인트: 키보드 접근성 향상, 모션 기반 피드백 보완

UX디자인에서 '다크 패턴(Dark Patterns)'이란 사용자의 의도와 다르게 행동하도록 유도하거나, 불편함을 통해 기업에게 유리한 선택을 하게 만드는 기만적 디자인 수단을 말함. 일상 속에서 다크 패턴은 종종 마케팅 전략이라는 이름 아래 실행되며, 사용자 경험을 해치기도 함.

✅ 쿠팡 사례를 중심으로 다크 패턴 정리

1. 복잡한 해지 플로우

쿠팡 와우 멤버십 해지 과정을 보면, 여러 번의 단계를 거치고, 해지 의사를 번복하게끔 유도하는 UI가 포함됨.
버튼 색상 대비나 텍스트 강조 방식에서도 사용자가 무심코 '유지'를 누르게끔 유도하는 흐름이 보임.
이는 ‘방해형 다크패턴(interruption-based)’으로 분류됨.

2. 자동 결제 유도

무료 체험 후 유료로 자동 전환되는 구조에서, 사용자가 충분히 인지하지 못한 채 결제가 이루어지는 경우가 많음.
해지 방법은 명확히 노출되지 않으며, 해당 구조는 ‘편취형 다크패턴(sneaking)’에 해당함.

3. 감정 유도형 표현

‘혜택을 포기하시겠어요?’ 같은 문구로 사용자의 감정을 건드려 멤버십 유지를 유도함.
이런 접근은 '수치심 유발(confirmshaming)' 유형으로 불림.

✅ 일상에서 자주 겪는 다크 패턴 사례

• 비교 방해형 패턴: 요금제를 일부러 복잡하게 제시하거나, 핵심 옵션을 숨기는 경우
• 광고 위장형 패턴: 콘텐츠처럼 보이는 광고 배치
• 기본 선택 설정: 유료 옵션이 기본 선택된 상태로 노출되어, 사용자 부주의를 유도함

✅ 프로덕트 디자이너가 취할 태도는?

다크 패턴이 종종 마케팅 목표와 UX 윤리의 충돌에서 비롯되는 경우가 많음.
디자이너 입장에서 아래와 같은 태도를 지향할 필요가 있음.

1. 사용자의 신뢰를 장기 자산으로 본다면

• 사용자가 스스로 선택했다고 느낄 수 있는 UI를 만들어야 함.
• 해지 과정이 어렵거나 사용자가 실수하게 설계된 흐름은 단기 이익은 줄 수 있지만 장기적으로 브랜드 신뢰를 잃게 됨.

2. 데이터에 기반한 사용자 보호 설계

• 'A/B 테스트'를 통해 성과만 보는 것이 아니라, 유저 행동의 배경과 감정 상태까지 분석해야 함.
• 심리적 압박으로 선택한 행동이 사용자 유지에 어떤 영향을 미치는지를 객관적으로 분석함.

3. 사내에서 UX 관점의 Advocacy 역할 수행

• "이 흐름은 사용자에게 혼란을 줄 수 있습니다", "과도한 리텐션 유도보다는 진정성 있는 정보 전달이 장기적으로 효과적입니다" 같은 발언을 할 수 있는 팀 분위기를 만드는 것도 디자이너의 리더십 중 하나임.

✅ Q1. 브랜드를 신뢰 기반으로 구축한 선한 UX 사례

1. 에어비앤비(Airbnb)

• 사용자와 호스트 모두에게 정직하고 신뢰할 수 있는 경험을 우선순위로 설계함.
• 예약 취소 시 명확한 정책 안내와 환불 가이드, 후기 기반의 실제 신뢰도 시스템을 도입하여, 서비스 불만보다 "다시 써도 되겠다"는 인식을 남겼음.
• 가입 시 과도한 마케팅 유도 없이 "게스트 중심"의 행동 흐름을 디자인했음.

2. 노션(Notion)

• 유료 전환 흐름이 매우 자연스러움. 강제하거나 숨기지 않음.
• 무료 플랜만으로도 충분히 쓸 수 있도록 허용한 뒤, 필요 시 자연스럽게 유료 기능으로 유도함.
• 사용자의 생산성을 신뢰 기반의 장기 관점으로 설계한 결과, 유저 자발적 확산 효과가 매우 강했음.

3. 던킨 US 앱

• 알림 설정, 쿠폰 수신 여부, 위치 권한 요청 등을 모두 사용자 선택에 맡기는 흐름으로 설계함.
• 강요 없이 유도하는 방식으로 브랜드에 대한 거부감을 최소화했음.

✅ Q2. 사용자 보호를 위한 UX 원칙을 정리

사용자 보호 관점에서 지켜야 할 UX 원칙을 아래와 같이 정리해볼 수 있음:

🟠 1. 정보 명확성 (Clarity)

• 사용자의 선택 앞에 모든 정보는 이해하기 쉬운 언어와 구조로 제공되어야 함.
• 예: 가격, 기능, 해지 방법 등을 숨기지 않음.

🟠 2. 자율성 존중 (Autonomy)

• 사용자가 원치 않는 행동을 하지 않도록 설계해야 함.
• 예: 체크박스 자동 선택 X, 해지 절차 복잡하게 만들지 않음.

🟠 3. 피로 최소화 (Friction Balance)

• 반복적인 확인 메시지, 경로 꼬기 등으로 사용자의 흐름을 방해하지 않음.
• 필요한 경우는 최소한의 경고 메시지로 정돈함.

🟠 4. 정직한 설득 (Honest Persuasion)

• 할인, 혜택을 말할 때도 중요 조건은 강조하고, 실제로 받을 수 있는 범위를 명시함.

🟠 5. 데이터 권한 존중 (Data Ethics)

• 개인정보 제공과 마케팅 수신은 별개로 구분하여 처리함.
• 사용자 요청 시 데이터 확인/삭제 절차를 명확하게 제공함.

✅ Q3. 조직 내에서 UX 관점을 마케팅 부서와 논의할 때 설득 포인트를 정리

마케팅 부서와 협업하거나 설득할 때는 성과 + 신뢰의 관점에서 접근하는 것이 효과적임.

💡 1. "리텐션은 신뢰에서 온다"는 논리 구조

• “사용자가 다시 돌아오는 이유는 기억에 남는 경험이 아니라 불쾌하지 않았던 경험이기 때문입니다.”
• “한 번의 클릭보다, 한 번의 만족이 더 오래갑니다.”

💡 2. 장기 관점의 수치 제시

• 단기 클릭율이 높더라도 해지율, 문의율, 이탈률이 높다면 그것은 '위험한 성공'임을 수치로 설명함.
• A/B 테스트를 통해 ‘좋은 UX가 전환율도 높인다’는 사례를 공유함.

💡 3. 사용자 불만 → 브랜드 이미지 하락 사례 제시

• 쿠팡, 네이버, 넷플릭스 등 실제 사용자 항의가 커진 이슈를 예로 들어, 다크패턴이 브랜드에 미치는 위험을 보여줌.

💡 4. 같은 목표, 다른 방법 제안

• 마케팅의 목적은 전환/가입이지만, UX는 그것을 ‘상처 없이’ 유도하는 방식임을 강조함.
• 같은 결과를 낼 수 있는 윤리적인 UX 설계안을 제시하며 대안 중심으로 설득함.

피그마 배운 기능 활용해서 포트폴리오 커버 만들기 / 과제 프로세스 문서화 하기

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=495-644&p=f&t=XZebvWaAAEdALTNn-0

피그마 기초 실습

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=495-344&p=f&t=XZebvWaAAEdALTNn-0