우리의 사월

FGI(Focus Group Interview) 기획안(’아이러브커피’ UX/UI 개선 목표)

과제 노션 링크: https://www.notion.so/DAY-25-FGI-UX-UI-1d04bb609e3a80889140dba29ae03dfd?pvs=4

참여자 모집 구글 폼 제작

구글 폼 링크:
https://docs.google.com/forms/d/e/1FAIpQLSc0u1wa2BpeG-nqqwzHbpwqzRThlBQDLbL-iBf-LlaSQPy8PA/viewform

아이러브커피 UX/UI 개선을 위한 심층 리서치 및 사용자 조사

과제 노션 링크:
https://www.notion.so/DAY-22-24-UX-1cf4bb609e3a80958d7df51b7a8f9a72?pvs=4

📋 아이러브커피 UX/UI 개선을 위한 사용자 설문지 (구글 폼 활용)

구글 폼 설문지: https://forms.gle/DWyQ7Rer5fCWXcFdA

도서: 이것이 UX/UI 디자인이다 (조성봉 저)
읽은 범위: Chapter 2 _94~120p

오늘은 지난번에 이어 ‘이것이 UX/UI 디자인이다’의 2챕터의 일부를 읽었다. 이번 장에서는 UX/UI 디자인의 기본 프로세스가 소개되는데, 단순한 단계 나열이 아니라 사고방식의 전환을 요구하는 깊이 있는 내용이었다.

디자인 과정은 '발견 → 도출 → 구체화 → 산출' 네 가지 흐름으로 구성되어 있는데, 오늘은 그 중 ‘발견’ 단계에 집중된 내용을 읽었다. 문제를 곧바로 정의하고 결론을 내려고 하기보다는, 상향식으로 사용자 경험 속에서 문제를 '찾아나가는' 방식이 매우 중요하다는 점이 계속 강조되었다. 사실 나는 지금까지 디자인 과정을 시작할 때 어떤 결론을 이미 마음속으로 정해두고 거기에 맞는 솔루션을 조립해왔던 것 같다. 그래서 “문제를 단정 짓지 말고 발견하라”는 구절에서 마치 머리를 ‘띵’ 하고 맞은 듯한 기분이 들었다.

'발견' 단계에서는 먼저 **사용자의 프로필을 설정(페르소나 작성)**하고, 사용자 여정(User Flow)과 연결하여 그들의 동기와 행동을 관찰하는 데서 시작한다. 그 후 자연스럽게 이슈가 도출되고, 해결했을 때 결과가 바람직한지 여부까지 살펴보는 과정이 이어진다.

이슈를 제기하기 전에는 반드시 리서치 과정이 동반되어야 하는데, 리서치는 총 4가지로 나뉘어 정리되어 있었다:

🔎 UX 리서치의 4가지 방법

1. 통계 분석: 사용자 수치 기반의 정량적 데이터 분석 (설문, 이용 패턴 등)
2. 경쟁 분석: 경쟁사 서비스와 비교하여 문제점 또는 강점 파악
3. 문헌 조사: 기존 연구자료, 보고서, 관련 논문 등을 통한 정보 수집
4. 동향 조사: 업계 트렌드, 기술 변화, 사용자 흐름을 파악하는 조사

이러한 리서치 중에는 평가 단계로서 두 가지 개념도 소개되었다.

• 사용성 평가: 사용자가 실제 제품이나 서비스를 사용하는 과정에서의 문제점 파악
• 어림 평가: 초기 단계 설계나 아이디어에 대한 대략적인 가능성 탐색

특히 나는 이번 장을 읽으며 ‘필드 리서치’ 부분에 깊게 몰입하게 되었다. 단순히 데이터를 검색하거나 책에서 정보를 읽는 수준을 넘어, 현장을 관찰하고 실제 사용자와 직접 대화하며 맥락을 파악하는 과정은 무척 도전적이지만 매력적이었다.

🌿 필드 리서치 정리

• 목적: 실제 사용자 환경을 이해하고, 말로 설명하기 어려운 사용자의 무의식적 행동을 관찰
• 과정: 현장 방문 → 관찰/기록 → 사용자의 행동 흐름 및 맥락 분석
• 목표: 사용자가 인식하지 못하는 문제나 패턴을 발견하여 인사이트 도출

이 과정에서 특히 흥미로웠던 점은 ‘심층 인터뷰’ 기법이었다. 단순히 “왜 그랬어요?”를 반복하는 게 아니라, ‘5Whys’ 질문법을 활용해 사용자의 심층적 동기와 배경을 파악하는 방식이다.

이 방법은 과거 수업 초반에 내 자기소개서를 재정리할 때 사용했던 방법이라 더 익숙하고 의미 깊게 다가왔다.

💬 5Whys 질문 기법

• 한 번의 WHY로는 드러나지 않는 핵심 동기를 파악하기 위해
  같은 질문을 5단계로 반복하면서 본질에 가까이 다가가는 인터뷰 방식

예시:
Q. 왜 이 기능을 자주 사용하나요?
→ A. 시간이 없을 때 빨라서요.
Q. 왜 시간이 없을 때 이걸 선택하죠?
→ A. 다른 앱은 실행 속도가 느려서요.
Q. 왜 그게 불편하게 느껴졌나요?
→ A. 주문하다 끊긴 적이 몇 번 있어서요...
→ … (계속 진행)

질문이 깊어질수록 문제의 진짜 원인을 더 명확히 파악하게 된다는 것이 인상 깊었다. 이와 함께 소개된 단답형 질문법인 5W1H 기법도 정리해두었다.

🧭 5W1H 질문 예시

• Who: 어떤 사용자가?
• What: 무엇을 하고 싶은가?
• When: 언제 사용하는가?
• Where: 어디서?
• Why: 왜 이 기능이 필요한가?
• How: 어떤 방식으로 해결할 수 있을까?

오늘의 느낀점:

오늘 읽은 ‘발견’ 챕터는 단순히 개념 설명이 아니라, 내가 앞으로 프로젝트를 시작할 때 어떻게 질문을 던지고, 어떤 태도로 문제를 바라봐야 하는지를 일깨워주는 소중한 내용이었다.

앞으로는 문제를 ‘정의하려고 애쓰기보다’,
"무엇이 문제일 수 있을까?"라는 질문부터 조심스럽게 시작해야겠다는 생각이 들었다.
UX디자인은 정말 사유의 깊이를 요구하는 일이구나.

이 책을 통해 또 한 걸음 내 사고의 깊이가 확장되었음을 느낄 수 있었던 하루였다.

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

📖 오늘의 UX 독서 일기

도서: 이것이 UX/UI 디자이너다 (조성봉 저)
읽은 범위: Chapter 1 (2~92페이지)

1. UX/UI 기본 개념 복습

챕터 1은 UX의 전반적인 개요와 핵심 개념들을 체계적으로 정리하고 있어 기초 수업 때 배웠던 내용을 다시 한번 정리할 수 있는 시간이었다.
UX(User Experience)는 단순히 시각적인 디자인을 뜻하는 것이 아니라, 사용자가 제품이나 서비스를 사용하는 전체 흐름에서 겪는 경험 전반을 의미하며, UI(User Interface)는 그 UX를 구성하는 시각적, 기능적 요소 중 하나라는 점을 명확히 설명해주고 있다.

또한 '좋은 UX'란 기능적 완성도에 머무르지 않고, 감성적 만족과 의미 있는 경험까지 제공하는 것을 목표로 해야 한다는 점도 인상 깊었다.
이는 최근 수업 중에서도 자주 언급된 개념으로, ‘예쁜 것보다 먼저 해야 할 일’에 대해 다시 생각해보게 되었다.

2. UX 피라미드 구조로 본 사용자 경험의 완성

UX 피라미드 구조는 사용자 경험을 유용성 → 신뢰성 → 사용성 → 편의성 → 감성 → 의미성의 6단계로 설명하고 있는데,
그중에서도 가장 기반이 되는 ‘유용성(Useful/Functional)’에 특히 집중해 읽었다.

그 이유는 수업 초기부터 강사님이 꾸준히 강조하시던 주제이기도 하기 때문이다.
강사님은 항상 "심미성은 기술 위에 얹어지는 것이지, 그 반대가 되어서는 안 된다"고 말씀해주셨고,
이 책에서도 똑같이 기술 기반 없이 감각적인 디자인은 무의미하다는 구조적 설명이 이어져 깊은 인상을 받았다.

디자이너는 '만족스러운 사용자 경험'을 설계하는 역할을 한다는 점에서, 기술적 기반 없이 감성적 디자인만 추구하는 것은 UX의 본질을 놓치는 일임을 다시금 상기하게 되었다.

3. UX 구성 요소: 동기 / 행동 / 고충 / 니즈 / 태도

사용자 경험을 이루는 핵심 요소로
동기, 행동, 고충, 니즈, 태도가 소개되었는데,
특히 ‘맥락의 영향력’에 대한 개념이 인상 깊었다.

동기는 단순히 욕구에서 끝나는 것이 아니라,
사용자가 왜 지금 이 순간에 그 행동을 하는가라는 배경 맥락을 함께 이해해야 한다는 점이 중요하다고 느꼈다.

예를 들어, 배달 앱을 켠 사용자의 동기는 단순히 음식을 주문하려는 것이 아니라,
‘야근 중 빠르게 끼니를 해결하고 싶다’거나,
‘지친 하루를 위로받고 싶다’는 상황 맥락이 함께 작용할 수 있다.

책에서 소개한 동기 유형(문제해결형, 탐색형, 반복형),
경험의 진행 형태(점진형, 반복형, 즉흥형),
경험의 성격(기대 중심, 감정 중심, 회피 중심) 등의 구분은
사용자를 더 입체적으로 이해하는 데 도움이 되었고, 향후 사용자 인터뷰나 페르소나 설계 시 유용하게 적용할 수 있을 것 같다.

4. 사용자 여정 단계 (User Journey)

사용자 여정은 사용자가 서비스를 이용하면서 거치는 전체 흐름을
외부 탐색 → 접근 → 탐색 → 조회 → 활동 → 이탈
의 순서로 나누어 설명하고 있다.

이 구성을 보며 최근 진행했던 배달의민족 앱 UX 클론 디자인 과제가 자연스럽게 떠올랐다.
당시 나는 배달의민족 앱의 복잡한 정보 구조와 다소 과도한 광고 노출 문제, 메뉴 탐색 흐름의 난해함 등을
사용자 여정 상 ‘탐색 → 조회 → 활동’ 단계에서의 장애 요소로 판단했고,
이 문제를 해결하기 위해 쿠팡이츠의 간결한 탐색 흐름과 반복 사용자 중심 인터페이스를 참고하여 개선안을 도출했다.

이 경험을 통해 사용자의 이탈 원인이 단순한 UI 문제가 아니라 전반적인 흐름에서 느껴지는 피로감과도 연결된다는 점을 체감했고,
특히 디자이너가 비즈니스와 사용자 중심 사이에서 어떤 균형을 택할 것인가에 대한 고민도 깊어졌다.

이 과정에서 ‘의도적으로 복잡하게 만든 구조’, ‘취소 유도 요소를 숨기는 인터페이스’처럼
기업의 수익성과 충돌하는 다크 패턴의 유혹도 간접적으로 접하게 되었고,
디자이너로서 정직한 구조를 설계할 용기와 철학도 필요하다는 걸 배웠다.

5. 오늘의 느낀점

이번 1챕터를 읽으며 그동안 수업을 통해 접했던 개념들이 더 구조적으로 연결되었다.
무엇보다, 디자이너의 역할이 단순히 '예쁘게 만드는 것'이 아니라
사용자가 흐름 속에서 얼마나 편하게, 의미 있게, 신뢰하며 사용할 수 있도록 유도할 것인가에 달려 있다는 점이 더 명확해졌다.

UX 피라미드의 기반인 유용성에서부터 출발해,
신뢰성과 사용성을 확보한 후 감성과 의미성으로 확장해 나가는 흐름은
앞으로 내가 디자인할 모든 프로젝트에서 가장 먼저 생각해야 할 기준이 될 것 같다.

또한, 사용자 여정과 UX 구성 요소들을 통해 ‘사용자 중심 사고란 실제로 어떻게 작동하는가’를 구체적으로 배울 수 있었고,
이후 실무에서 페르소나 설계, 사용자 시나리오 작성, 플로우 구성 시에도 큰 기준점이 되어줄 것이라 느꼈다.

*디자인 시스템 개선 사항:
사용 환경(웹/모바일)에 맞춰 타이포그래피를 이원화하여
가독성과 시각적 위계를 개선했음.
지나치게 크거나 일관성이 없던 제목 계층을 조정하고
본문 및 버튼 텍스트는 표준 가이드라인에 따라 재설정 했음.
반응형 환경에서도 브랜드 감성과 사용자 피로도를 고려한
실용적인 텍스트 시스템을 구축함.

*웹 디자인 개선 사항 (프로토타입 테스트 완료):
텍스트 위계 정돈과 시인성 강화를 통해
사용자 가독성을 높였으며,
콘텐츠 중심의 시각 흐름을 조정하여
메시지 전달력을 개선했음.
감성 요소(발바닥, 폴라로이드 등)는 브랜드 몰입도를 높이고,
UI 구조는 인터랙션 효율성과 정보 집중도를 향상 시켰음.
사용할 때 오른손 사용자 기준으로 최대한 불편함 없이 배치함.

*모바일 디자인 개선 사항 (프로토타입 테스트 완료):
사용자가 정보를 빠르게 인식할 수 있도록
텍스트를 최소화하고 주요 콘텐츠 중심으로 구조를 단순화했음.
과도한 정보 제공 대신, 핵심 요소에 집중해 사용자 주의를 유도하고,캐로셀과 아코디언 컴포넌트를 활용해 시각적 몰입과
사용성 모두를 고려했음. 모바일 환경에서도 감성적이고 직관적인 탐색이 가능하도록
정보량을 줄이고, 터치 기반 인터랙션에 최적화된 구조로 설계했음.

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?t=xoKk8AacseX6skkh-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=718-526&p=f&t=CBF50ERS3Vslxh5y-0

웹페이지 디자인 해보기

Figma 실습 링크: 

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

그리드 예제 실습하기

Figma 실습 링크: 

https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=614-561&t=CbXIT3svonNMbfRb-0