우리의 사월

디자인 씽킹 연습

✅ UX 가설 템플릿

“만약 [기능/설계를 이렇게 바꾼다면], [사용자의 어떤 문제/불편이 해결되어], [사용 행동/성과가 어떻게 개선될 것이다].”

✅ 실전 예시 (카페 주문 앱)

문제 상황: 사용자는 앱 주문을 했는데도 음료 픽업 시간 예측이 어려워 대기 불만을 느낌.

가설:  “만약 앱에서 ‘주문 완료 후 예상 픽업 시간’을 실시간으로 보여준다면,

사용자는 대기 시간에 대한 불안을 줄이고, 앱 주문 후 재사용 확률이 증가할 것이다.”

✅ 다른 유형별 예시들

▸ 온보딩 화면에서 이탈이 많은 경우

“만약 회원가입 과정을 3단계에서 1단계로 줄인다면,

사용자는 복잡하다는 인식을 덜고,
온보딩 완료율이 20% 이상 상승할 것이다.”

▸ 메뉴 선택이 어려운 배달앱 UX

“만약 사용자가 메뉴를 먼저 선택하고, 해당 메뉴를 파는 가게만 보여주는 구조로 바꾼다면,

사용자는 원하는 메뉴를 더 빠르게 찾고,
전체 주문까지 걸리는 시간이 단축될 것이다.”

▸ 검색 결과가 너무 많은 경우

“만약 검색 결과에서 필터를 더 간결하고 직관적인 아이콘 형태로 제공한다면,

사용자는 검색 피로도가 줄고,
평균 체류 시간이 늘어날 것이다.”

✅ 직접 만들 수 있는 예시 구조

1. 현재 사용자가 어떤 행동에서 멈추거나 고민하는지 먼저 적어보기
2. 왜 그런 행동을 하는지 관찰이나 인터뷰로 이유 파악
3. 어떤 UI나 콘텐츠, 플로우를 바꾸면 달라질지 상상해서 작성

✅ 연습 예제:  카페 모바일 주문 UX 개선

Step 1. 문제 정의 (Problem Framing)

“고객이 카페에서 앱으로 음료를 미리 주문하고 픽업할 때, 여전히 대기 시간이 길다는 불만이 있다.”

Step 2. 관찰 기반 인사이트 (User Insight)

매장에서 대기하는 고객의 78%가 “음료가 언제 나올지 몰라서 불안하다”고 응답

고객은 픽업 예상 시간 정보가 부족하다고 느낌

바쁜 출근 시간에는 앱 주문보다 줄 서는 게 더 빠르다고 생각함

Step 3. UX 가설 (Hypothesis)

“만약 사용자가 주문 시 예상 준비 시간과 실시간 진행 상태를 앱에서 확인할 수 있다면,

대기 불편이 줄고 앱 주문 이용률이 증가할 것이다.”

Step 4. 해결 아이디어 (UX Solution)

• 주문 완료 후, ‘준비 중 / 제조 중 / 픽업 가능’ 상태를 실시간으로 보여주는 UI 제공
• 예상 대기 시간(예: "5분 후 픽업 가능")을 명확히 표시
• 시간 초과 시 알림 기능 추가 ("음료 준비가 지연되고 있어요")

Step 5. 설득 근거 (Impact)

예상 시간 제공만으로 대기 불안 40% 감소

유사 서비스(스타벅스 앱) 사용자 재사용률 1.6배 증가 사례

실시간 진행 표시 → 앱 이용자 수 22% 증가 가능성

🌿 디자인 씽킹 구조 요약

1. 공감 (Empathize): 사용자의 불만이나 불편을 관찰함
2. 정의 (Define): 구체적인 문제로 정리함
3. 아이디어 도출 (Ideate): 해결 아이디어를 브레인스토밍함
4. 프로토타입 (Prototype): UX 플로우나 화면을 시각화함
5. 테스트 (Test): 사용자 반응이나 데이터로 가설을 검증함

1. 정보구조(IA: Information Architecture)란

정보구조란 웹사이트나 앱에 존재하는 콘텐츠와 기능을 사용자가 쉽고 논리적으로 탐색할 수 있도록 구조화하는 작업을 말함.
전체 메뉴, 페이지 계층, 내비게이션 흐름 등을 정리하고, 콘텐츠 간의 관계를 명확히 하여 사용자 경험을 설계함.

예를 들어 전자상거래 앱이라면 ‘홈 > 카테고리 > 여성의류 > 블라우스 > 상품 상세’처럼 계층적 구조를 시각화하는 사이트맵이 IA의 대표적인 산출물임.

정보구조 설계 시 고려할 요소

• 사용자 중심으로 콘텐츠를 정렬함
• 너무 복잡하거나 모호한 메뉴명은 피하고 직관적인 명칭을 사용함
• 콘텐츠를 그룹화하고 우선순위를 정함
• 탐색 흐름을 예측 가능하게 설계함
• 결과물을 사이트맵 또는 콘텐츠 플로우로 정리함

이러한 정보구조는 디자이너, 개발자, 기획자 간 커뮤니케이션 도구로도 활용되며, 사용자 테스트 시 사용자 흐름을 미리 검토하고 구조적인 문제를 조기에 파악할 수 있도록 도움을 줌.

2. 와이어프레임(Wireframe)이란

와이어프레임은 웹/앱의 페이지 구조를 단순화한 스케치 형태의 설계도임.
색상이나 시각적 스타일보다는 기능 배치와 정보 우선순위를 정리하는 데 집중함.

와이어프레임은 보통 다음과 같은 요소들을 포함함:

• 헤더 (로고, 검색창 등)
• 내비게이션 메뉴
• 콘텐츠 블록 (텍스트, 이미지, 버튼)
• 푸터 영역

이를 통해 개발 전에 사용자 흐름과 레이아웃을 점검할 수 있으며, 사용성 테스트에 활용되기도 함.

✅  설계 초기 단계에서의 역할과 중요성

IA와 와이어프레임은 UX 설계 초기에 전체 시스템의 구조와 흐름을 시각화함으로써
아래와 같은 이점을 제공함:

• 사용자 경험 향상: 콘텐츠 구조가 명확해져 사용자가 원하는 정보를 빠르게 찾을 수 있음
• 커뮤니케이션 도구: 디자이너, 개발자, 기획자 간 협업 시 오해를 줄이고 방향을 명확히 전달할 수 있음
• 문제 조기 발견: 기능 누락, 동선 문제, 콘텐츠 과밀 등 설계 오류를 초기 단계에서 검토하고 수정할 수 있음

✅ 실전 예시로 보는 IA와 와이어프레임

IA 예시 흐름:

1. 사용자 시나리오를 기반으로 주요 콘텐츠 정의
2. 콘텐츠를 논리적 그룹으로 묶고 계층 구조화
3. 메뉴 구성 및 페이지 간 이동 흐름 설계

→ 결과물: 사이트맵, 내비게이션 플로우

와이어프레임 예시 흐름:

1. IA 기반으로 페이지 단위 레이아웃 설계
2. 요소별 우선순위에 따라 콘텐츠 위치 결정
3. 기능 흐름을 테스트하기 위한 간단한 인터랙션 표시

→ 결과물: 화면 설계서, 기능 중심 레이아웃

3. 플로우차트(Flowchart)란

플로우차트란 사용자 또는 시스템의 작업 흐름을 도형과 화살표를 이용해 시각적으로 표현한 도구임.
기획, 개발, 운영 등 다양한 협업 팀에게 전체 기능 흐름을 한눈에 공유할 수 있도록 정리함.

기본 기호

• 시작/종료: 타원형
• 처리(프로세스): 사각형
• 조건(분기): 마름모
• 입력/출력: 평행사변형
• 연결선: 화살표

작성 예시

예를 들어, 회원가입 프로세스를 플로우차트로 그리면 다음과 같음:

시작 → 회원 정보 입력 → 이메일 중복 확인 → 조건 분기(중복이면 경고 / 통과되면 다음 단계) → 가입 완료 → 종료

이처럼 조건 분기를 명확히 표시하여 사용자나 시스템이 어떤 분기에서 어떤 행동을 선택하는지를 시각적으로 보여줌.

플로우차트 작성 시 유의사항

• 흐름은 일반적으로 위에서 아래로, 또는 왼쪽에서 오른쪽으로 설정함
• 각 기호는 간단한 설명을 함께 포함하여 직관성을 높임
• 기능의 분기나 오류 처리를 포함하여 전체 유저 흐름을 빠짐없이 구성함

플로우차트의 장점

• 전체 사용 흐름을 한눈에 보여줄 수 있음
• 누락된 화면이나 예외 케이스를 빠르게 식별할 수 있음
• 개발자나 디자이너, 클라이언트 모두와의 커뮤니케이션 효율이 높아짐
• 기능의 우선순위를 시각화할 수 있어 MVP 개발에도 적합함

✅ 플로우차트에서 UX 라이팅이 필요한 이유

• 사용자가 각 단계를 어떻게 이해하고 행동할지 예측 가능하게 만들기 위해
• 버튼, 알림, 오류 메시지 등에서 사용자의 불안이나 혼란을 줄이기 위해
• 기능 중심이 아닌 사람 중심의 흐름을 만드는 데 도움을 주기 위해
• UI 설계자, 개발자, 기획자가 동일한 사용 흐름 언어로 소통하기 위해

✅ 플로우차트에 포함되는 UX 라이팅의 위치

✅ 예시 플로우차트와 UX 라이팅

[회원가입 흐름 예시]

1. 시작
2. 이메일 입력
   → UX 라이팅: "이메일 주소를 입력해주세요. 가입 확인 메일이 발송됩니다."

1. 비밀번호 입력
   → UX 라이팅: "영문, 숫자, 특수문자를 포함해 8자 이상으로 설정해주세요."

1. 비밀번호 재입력
   → UX 라이팅: "비밀번호가 일치해야 다음 단계로 이동할 수 있어요."

1. 가입 버튼 클릭
   → 버튼 UX 라이팅: "가입하고 시작하기"

1. 완료
   → 완료 메시지: "환영합니다! 이제 서비스를 자유롭게 이용하실 수 있어요."

✅ UX 라이팅 시 주의할 점

• 사용자 입장에서 말 걸 듯 자연스럽게 표현함
• 명령조보다는 안내형, 친근한 어조를 사용함
• 기술적 용어 대신 사용자가 이해할 수 있는 언어로 작성함
• 상황, 맥락, 감정을 고려하여 복잡하거나 민감한 순간에는 위로하거나 안내하는 말투 사용함

✅ 플로우차트 UX 라이팅 설계 팁

• 각 단계마다 사용자에게 무엇을 기대하는지 명확히 설명함
• 오류나 조건 분기 시 사용자가 다음 행동을 쉽게 선택할 수 있도록 말함
• 중복된 메시지는 줄이고, 반복 사용되는 버튼명은 일관성 있게 유지함
• 사용자 의심을 줄이는 투명하고 솔직한 문장 구성이 중요함