우리의 사월

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=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

UX 개선안을 적용한 클론 디자인 마무리

IA(정보구조, Information Architecture)

와이어프레임 (Wireframe)

워크플로우 (Workflow)

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

디자인 씽킹 연습

✅ 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 라이팅 설계 팁

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

프로덕트 디자이너를 지향하는 이력서에 추가해야 할 내용

1. "프로덕트 디자이너"를 강조하는 핵심 요소

1) 제품 중심의 사고(Product Thinking) 강조

프로덕트 디자이너(Product Designer)는 단순히 UI를 디자인하는 역할이 아니라, 제품의 문제를 발견하고 해결하는 데 집중.
✅ 추가해야 할 내용

• "UI 디자인이 아니라 사용자의 문제를 해결하는 디자인을 목표로 합니다."
• "제품의 목표와 비즈니스 니즈를 이해하고, 데이터 분석과 사용자 리서치를 통해 최적의 사용자 경험을 설계합니다."
• "디자인의 목적은 단순한 시각적 완성도가 아니라, **제품의 성과(사용성 향상, 전환율 증가, 리텐션 개선)**에 기여하는 것입니다."

📌 이력서 예시
"비즈니스 목표를 고려한 UX 설계를 통해 제품의 성장을 돕는 프로덕트 디자이너를 지향합니다. 단순한 UI 디자인이 아니라, 사용자의 페인 포인트를 해결하고, 제품의 성과(전환율, 리텐션, 사용성 개선)에 기여하는 디자인을 목표로 합니다."

2) 협업 능력과 크로스 팀 커뮤니케이션

프로덕트 디자이너는 단독으로 작업하지 않고, 기획자, 개발자, 마케터, 데이터 분석가 등과 협업하면서 제품을 개선해 나가는 역할.
✅ 추가해야 할 내용

• "디자인만이 아니라, 기획 단계에서부터 데이터 기반으로 문제를 분석하고, 개발팀과 긴밀히 협업하여 솔루션을 도출합니다."
• "개발이 용이한 디자인, 확장 가능한 디자인 시스템을 고려하며, 팀원들과 긴밀히 소통하는 것이 중요합니다."

📌 이력서 예시
"개발팀, 기획팀과 협업하여, 제품 목표에 맞는 UX/UI 솔루션을 도출하는 과정을 중요하게 생각합니다. Figma, Notion, Jira 등의 협업 툴을 활용하여 원활한 커뮤니케이션을 진행하며, 디자인과 개발이 조화를 이루도록 합니다."

3) UX 리서치 & 데이터 기반 디자인 역량

단순한 UI 디자인이 아니라, 사용자의 행동 데이터, 피드백, 리서치 결과를 기반으로 디자인하는 방식을 강조.
✅ 추가해야 할 내용

• "사용자 조사, A/B 테스트, 히트맵 분석 등의 데이터를 활용하여 디자인의 효과를 검증하고 개선합니다."
• "비즈니스 성과를 높일 수 있도록 정량적/정성적 리서치를 병행하여 문제를 정의하고 해결합니다."

📌 이력서 예시
"사용자의 실제 행동 데이터를 기반으로 UI/UX를 지속적으로 개선하는 디자인 프로세스를 지향합니다. A/B 테스트, 사용자 피드백 분석을 통해 디자인의 효과를 검증하고, 최적의 솔루션을 도출합니다."

4) 디자인 시스템 구축 및 확장 가능성

제품이 커질수록 디자인 시스템(Design System)이 필요하며, 프로덕트 디자이너는 이를 구축하고 확장할 수 있는 능력이 필요.
✅ 추가해야 할 내용

• "일관된 사용자 경험을 제공하기 위해 디자인 시스템을 구축하고 관리한 경험이 있습니다."
• "토큰 기반 디자인, 컴포넌트 라이브러리 관리 등을 통해 확장 가능한 디자인을 고려합니다."

📌 이력서 예시
"일관된 사용자 경험을 제공하기 위해 디자인 시스템을 구축하고 관리하는 데 집중합니다. 재사용 가능한 UI 컴포넌트 및 토큰 기반 디자인을 통해 확장성을 고려한 설계를 합니다."

5) AI 및 자동화 도구 활용 역량

AI 기반 디자인 도구(Figma AI, Midjourney, ChatGPT 등)를 적극적으로 활용하고 있다는 점을 차별화 요소로 강조.
✅ 추가해야 할 내용

• "AI 기반 디자인 자동화를 활용하여 작업 효율성을 높이고, 반복적인 작업을 최소화하는 방식을 적용합니다."
• "AI의 강점과 한계를 이해하고, 자동화할 수 없는 UX 설계와 인터랙션 디자인에 집중합니다."

📌 이력서 예시
"Figma AI, ChatGPT, Midjourney 등의 AI 도구를 활용하여 디자인 프로세스를 자동화하고, 더 창의적인 UX 설계에 집중할 수 있도록 합니다. 하지만 AI가 대체할 수 없는 UX 리서치 및 인터랙션 설계를 중심으로, 차별화된 디자인을 고민합니다."

2. 포트폴리오에서 강조할 추가 내용

✅ 이력서 외에 포트폴리오에 추가할 부분

• 프로젝트마다 사용자 문제(페인 포인트) → 해결 과정(리서치 & 데이터) → 최종 디자인 → 성과를 명확히 정리
• 단순한 UI 디자인이 아니라, 디자인을 적용한 후 개선된 사용자 경험과 데이터 변화(A/B 테스트 결과 등) 포함
• "비즈니스 목표를 고려한 디자인"을 강조하고, **수치적 성과(전환율 증가, 이탈율 감소, 사용자 만족도 개선 등)**를 명확히 기재

📌 포트폴리오 프로젝트 구성 예시
💡 프로젝트: E-commerce UI 개선 프로젝트

• 문제: 사용자가 제품을 쉽게 찾지 못해 이탈율이 높았음
• UX 리서치: 사용자 히트맵 분석 → 상품 탐색 과정에서 불편한 UX 패턴 발견
• 해결 방법: 필터 UI 및 검색 기능 개선
• 결과: 전환율 15% 증가, 평균 세션 시간 20% 증가

📌 프로젝트 구성 방식
✅ 문제 정의 → UX 리서치 & 데이터 분석 → 디자인 솔루션 → 결과 & 개선점

3. 결론: 프로덕트 디자이너를 목표로 하는 이력서 & 포트폴리오 전략

✅ 이력서에서 강조할 추가 요소

1. 단순한 UI 디자인이 아니라 제품의 문제 해결에 집중하는 디자인 철학
2. 협업 능력 및 크로스 팀 커뮤니케이션 역량
3. UX 리서치 & 데이터 기반의 디자인 검증 및 개선 사례
4. 디자인 시스템 구축 & 확장 가능성
5. AI 활용 역량과 차별화된 UX 설계 접근법

✅ 포트폴리오에서 강조할 추가 요소

• 각 프로젝트마다 문제 정의 → 리서치 → 솔루션 → 성과 데이터 구조로 정리
• 디자인의 비즈니스적 영향력(전환율 증가, 이탈율 감소 등)을 명확한 수치로 표현
• 디자인 시스템 구축 경험, 인터랙션 설계, AI 기반 자동화 디자인 사례 포함

최종 요약

이력서에서는 "프로덕트 디자이너는 단순한 UI 디자이너가 아니라, 제품의 문제를 해결하는 역할"이라는 점을 강조.
포트폴리오에서는 "디자인이 어떻게 사용자의 문제를 해결했으며, 어떤 데이터 기반으로 개선했는가"를 명확하게 설명하기.

DAY11 과제

배달 어플 사용할 때 불편한 경험 찾아보기 (사용자 설문조사 진행)

유사한 서비스 비교 분석

클론 디자인을 위한 서비스 화면 선택 (미완성 / +강사님 피드백)

(추가) 강사님 피드백을 바탕으로 분석 내용 수정해보기

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