우리의 사월

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

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

오늘은 배달 앱 3사(배달의민족, 쿠팡이츠, 요기요)의 서비스를 분석하고, 이를 바탕으로 더 나은 클론 디자인을 기획하는 시간을 가졌다. 기존 서비스를 단순히 따라 하는 것이 아니라, 어떻게 하면 더 나은 사용자 경험을 만들 수 있을까? 고민하면서 개선점을 찾아보는 과정이었다. 하지만 막상 분석을 시작하니, 내 사고 방식이 다소 흐릿하고 방향성이 뚜렷하지 않다는 걸 바로 깨닫게 되었다.

나는 명확한 문제 해결 방법을 모른 채, 개선할 만한 요소를 전부 적어보는 식으로 접근했다. “이건 불편할 것 같다.”, “이 부분은 이렇게 바꿔도 되지 않을까?” 하는 식으로 생각하면서 목록을 정리했지만, 정작 왜 이 문제를 해결해야 하는지, 그리고 이 해결이 사용자에게 어떤 영향을 줄지 깊이 고민하지 못한 채 피상적인 개선점 나열에 그치고 있었다. 문제를 제대로 정의하지 못한 채 "어디선가 본 UX 개선 방식"을 적용하려고만 했던 것 같다.

그런데 강사님의 피드백 한마디가 내 사고를 완전히 전환시켰다.

“개선점만 찾으려고 하기보다는, 유저 관점에서 문제를 해결해야 하는 이유와 임팩트 있는 문제 해결로 끌고 나갈 수 있도록 정리해보면 더 좋을 것 같습니다. 해당 어플에서 메뉴 고르기가 힘든 것을 고쳐야 하는 이유를 더 명확히 이해해보고 이를 정리해본다면 더 할 나위 없을 거에요. 논리를 더할수록 소연님의 디자인이 설득력을 갖출 수 있을 거예요.”

이 말을 듣는 순간, 마치 안개 속을 헤매던 시야가 탁 트이는 느낌이 들었다. 나는 지금까지 단순히 “디자인을 더 예쁘고 편하게 만드는 것”이 중요한 줄 알았지만, 진짜 중요한 건 사용자가 겪고 있는 문제를 얼마나 논리적으로 정의하고 해결하는지였다.

문제 해결의 논리를 갖추는 연습이 필요하다

나는 개선점을 찾는 데 집중했지, 그 개선이 왜 필요한지를 깊이 고민하지 않았다. 하지만 프로덕트 디자이너로 성장하려면, 단순한 개선 아이디어가 아니라 문제 → 상황 → 영향 → 결과 → 해결 방향의 논리적인 흐름을 갖춘 사고 방식이 필요하다는 걸 깨달았다.

예를 들어, 배달 앱에서 사용자가 메뉴 고르기 어려워하는 문제를 해결한다고 가정해보자.

✔ 문제: 사용자가 메뉴를 쉽게 결정하지 못하고 긴 시간을 소요한다.
✔ 상황: 메뉴 추천 시스템이 부족하거나, UI가 직관적이지 않아 선택이 어렵다.
✔ 영향: 사용자가 주문을 포기하거나, 시간을 낭비하면서 피로감을 느낀다.
✔ 결과: 앱 사용성이 떨어지고, 경쟁 서비스로 이동할 가능성이 높아진다.
✔ 해결 방향: 사용자의 취향과 과거 주문 이력을 반영한 추천 시스템을 도입하거나, 메뉴 비교 기능을 추가한다.

이렇게 문제 해결의 논리를 갖추면, 단순한 "이 부분이 불편하니까 이렇게 바꾸자"가 아니라, "이 문제가 사용자의 경험에 어떤 영향을 미치는지 분석하고, 해결했을 때 어떤 긍정적인 변화가 일어나는지"까지 고려할 수 있게 된다. 그리고 이렇게 설득력 있는 논리가 있어야, 팀원들에게 내 디자인을 제대로 설명할 수도 있고, 개발자나 기획자를 납득시킬 수도 있다.

익숙하지 않은 사고 방식, 하지만 반드시 익혀야 할 것

솔직히 말하면, 이런 식으로 논리를 세우면서 문제를 분석하는 게 쉽지 않았다. 오히려 어려워서 나도 모르게 살금살금 피하고 싶었던 부분이었다. 하지만 오늘 강사님의 피드백을 받고 깨달았다.

두루뭉술하게 넘어갈 수 있는 문제는 사실 아무것도 없다.
어떤 문제든 구체적으로 분석하고 직면해야 한다.
나는 이제 문제를 단순히 알리는 사람이 아니라, 문제를 해결하는 직군에 들어가려는 사람이다.

이건 디자인뿐만이 아니라, 앞으로 내가 어떤 디자이너로 성장할 것인지와도 직결된 문제다. 시각적인 디자인은 도구(툴)만 익숙해지면 누구나 만들 수 있다. 하지만 문제를 정확하게 정의하고, 논리적으로 해결책을 제시할 수 있는 디자이너가 되는 것은 몇 개월, 아니 몇 년의 연습이 필요한 과정이다.

앞으로 나는 더 깊이 고민하고 논리를 정리하는 연습을 할 것이다.
더 이상 피하지 않고, 문제를 해결하는 디자이너로 성장해나가겠다.

🔥 나는 문제를 찾는 사람이 아니라, 해결하는 사람이 될 것이다.
🔥 오늘도 한 걸음 더 성장했다.

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

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

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

피그마의 레이아웃 그리드 기능과 활용 예시

레이아웃 그리드는 디자인 작업에서 일관성을 유지하고 정렬을 쉽게 하기 위해 사용되는 가이드 시스템임.
특히 반응형 UI 설계, 정돈된 컴포넌트 배치, 가독성 향상 등에 유용함.

1. 피그마에서 레이아웃 그리드 설정하는 방법

1) 레이아웃 그리드 추가하기

1. 프레임(Frame)을 선택
2. 오른쪽 패널에서 Layout Grid(레이아웃 그리드) 섹션을 찾음
3. "+" 버튼을 클릭하여 새로운 그리드 추가

추가 후 그리드 타입을 선택하여 원하는 형태로 조정 가능함.

2. 레이아웃 그리드 유형과 활용 예시

1) 그리드(Grid)

설명:

• 정사각형 패턴의 격자 형태
• 아이콘 디자인, 컴포넌트 배치, 8px 또는 10px 단위 디자인에 유용함

활용 예시:

• 아이콘 디자인할 때 8px 간격의 그리드를 설정하여 픽셀 퍼펙트한 디자인 유지
• 일정한 간격으로 UI 요소를 배치하여 정렬감 확보

설정 방법:

• "+" 버튼 클릭 → Grid 선택
• 크기(Size)를 설정하여 간격 조절

2) 컬럼(Columns)

설명:

• 웹과 모바일 UI 디자인에서 가장 많이 사용하는 유형
• 여러 개의 세로 컬럼을 활용하여 콘텐츠를 정렬함
• 일반적으로 12컬럼 시스템을 사용함

활용 예시:

• 반응형 웹 디자인에서 데스크탑(12컬럼), 태블릿(8컬럼), 모바일(4컬럼) 설정
• 텍스트와 이미지 정렬 시 컬럼을 기준으로 배치하여 가독성 향상

설정 방법:

• "+" 버튼 클릭 → Columns 선택
• 컬럼 개수(Count) 조정
• Margin(마진): 양쪽 여백 설정
• Gutter(거터): 컬럼 사이의 간격 조정

3) 행(Rows)

설명:

• 세로 방향이 아닌 가로 방향의 정렬 가이드
• 스크롤형 콘텐츠 디자인, 카드형 UI, 리스트 정렬 등에 사용

활용 예시:

• 모바일 앱의 리스트 UI를 균등한 간격으로 배치할 때 활용
• 카드형 UI 디자인 시 일정한 높이를 유지하는 데 사용

설정 방법:

• "+" 버튼 클릭 → Rows 선택
• 행 개수(Count), 거터, 마진 설정

4) 점(Line)

설명:

• 점선 형태로 배치되는 가이드
• 정밀한 맞춤이 필요한 디자인에서 사용됨

활용 예시:

• UI 요소의 픽셀 단위를 맞추기 위해 보조 가이드로 활용
• 손으로 자유롭게 배치할 때 기준점으로 사용

3. 레이아웃 그리드 활용 예시

1) 반응형 웹 디자인

• 데스크탑: 12컬럼
• 태블릿: 8컬럼
• 모바일: 4컬럼
• 컬럼 기반으로 UI 요소를 정렬하여 다양한 화면 크기에 적응할 수 있도록 설계

2) 모바일 앱 UI 디자인

• 리스트형 콘텐츠(예: 뉴스 피드, 카드형 UI)에서 행(Row) 그리드를 사용하여 균등한 간격 유지

3) 버튼과 텍스트 정렬

• 버튼 크기, 텍스트 정렬을 맞출 때 8px 또는 10px 그리드를 활용하여 균형감 있는 디자인 적용

피그마에서 프레임 바깥으로 레이어가 튀어나오지 않게 하는 방법

1. 프레임을 클립(Clip Content) 설정하기

프레임 내부의 요소가 프레임 바깥으로 넘치지 않도록 잘라내는 방법임.

설정 방법:

1. 프레임을 선택
2. 우측 패널에서 Clip Content 체크
3. 프레임 크기를 벗어난 요소가 프레임 내부에만 표시됨

2. 마스크(Mask) 기능을 활용하기

마스크를 적용하면 특정 영역 외부로 나가는 부분이 보이지 않게 됨.

설정 방법:

1. 프레임 내부에 마스크 역할을 할 쉐이프(예: 사각형) 추가
2. 마스크할 요소와 함께 선택한 후 Ctrl + Alt + M (Mac: ⌥ + ⌘ + M)
3. 마스크된 부분 외에는 보이지 않음

3. Auto Layout을 활용하여 정리하기

프레임 내부의 콘텐츠를 정렬하여 요소가 튀어나가지 않도록 하는 방법임.

설정 방법:

1. 프레임을 선택한 후 Shift + A를 눌러 Auto Layout 적용
2. 패딩, 마진을 조절하여 콘텐츠가 프레임 내부에 정렬되도록 설정
3. 넘치는 요소가 프레임 내부에 맞춰 조정됨

4. 수동으로 요소 정렬 및 제한하기

프레임 바깥으로 나가지 않도록 수동으로 제한하는 방법임.

설정 방법:

1. 프레임 크기를 조정하여 콘텐츠가 넘치지 않도록 함
2. 정렬(Align) 옵션을 사용하여 요소를 프레임 내부에 배치
3. 필요 시 프레임 내부의 요소 크기를 조정하여 맞춤

[추가 피드백: 8px 단위의 공간 시스템 활용]

1. 8px 단위의 공간 시스템이란?

• 디자인 요소들의 간격(Spacing)과 크기(Size)를 8의 배수로 정하는 방식을 의미함.
• 예를 들면, 여백, 패딩, 마진, 버튼 크기, 카드 UI, 행 간격 등을 8px, 16px, 24px, 32px 등 8의 배수로 설정하는 것임.

2. 왜 8px 단위 시스템이 중요한가?

✅ 일관성 유지

• 디자인 시스템에서 모든 요소가 일정한 간격을 가지므로 깔끔한 레이아웃을 유지할 수 있음.
• 특정 요소의 크기를 조정할 때 기존 구조와 어긋나지 않도록 조정 가능함.

✅ 수정 및 확장 용이

• 만약 UI를 수정할 때 8px 단위로 설계되어 있다면, 수치를 쉽게 변경 가능함.
• 예를 들어 버튼의 크기를 37px에서 40px로 수정하는 것보다 32px → 40px로 수정하는 것이 훨씬 자연스럽고 체계적으로 변경 가능함.

✅ 반응형 디자인에 유리

• 8px 단위는 다양한 해상도에서도 균형 잡힌 간격을 유지할 수 있도록 도와줌.
• 특히, 모바일(360px, 375px, 390px), 태블릿(768px, 1024px), 데스크탑(1440px 이상) 등의 해상도에서도 정렬이 깨지지 않도록 설계 가능함.

3. 8px 단위 시스템을 적용하는 방법

• 피그마(Figma)에서 그리드 설정
  1. 프레임을 선택하고 Layout Grid를 추가
  2. Grid Type을 ‘Grid’가 아닌 ‘Columns’ 혹은 ‘Rows’로 설정
  3. Spacing(간격)을 8px 단위로 설정하여 모든 요소가 8의 배수로 정렬되도록 함
  4. 필요한 경우 Base Unit을 4px로 설정하여 좀 더 세밀한 조정이 가능하게 함 (ex. 4px, 8px, 16px 등)
• 기본 컴포넌트 크기 예시
  • 버튼 높이: 40px (8px 단위)
  • 카드 UI 패딩: 16px (8px 단위)
  • 아이콘 크기: 24px (8px 단위)
  • 리스트 아이템 간격: 8px or 16px
  • 헤더 높이: 64px

4. 결론

💡 8px 단위 시스템을 활용하면 디자인의 일관성이 높아지고, 유지보수 및 수정이 편리해짐.
💡 반응형 웹과 앱 디자인에서도 유용하게 활용할 수 있어 확장성이 높음.
💡 Figma에서 Layout Grid 기능을 활용하여 간격을 설정하면 보다 체계적인 디자인을 할 수 있음.

오늘은 예기치 못한 변수를 만났을 때, 내가 취할 수 있는 태도에 대해 생각해보려 한다. 과거의 경험을 떠올려 보면, 나는 변화를 맞이할 때마다 크든 작든 여러 감정을 겪으며 성장해왔다. 그리고 이제 새로운 분야로 이직을 준비하면서, 다시 한 번 그런 순간들이 찾아올 거라는 걸 알고 있다. 그때마다 흔들리지 않고 나아가기 위해서, 나 자신에게 전하고 싶은 이야기가 있다.

4년 전, 나는 인물 상업 사진에서 제품 사진 분야로 이직을 했다. 고객을 직접 응대하고 촬영장에서 분위기를 이끌며 피사체를 조율하는 일은 익숙했지만, ‘제품 촬영팀을 이끄는 역할’은 완전히 다른 도전이었다. 팀을 리드해야 했고, 촬영 기획을 짜야 했으며, 정해진 시간 안에 결과물을 만들어내야 했다. 개인적인 작업과는 차원이 다른 압박이 나를 짓눌렀다.

특히 처음 3개월은 지금도 잊을 수 없는 충격적인 시기였다. 최선을 다했지만, 팀 리더로서의 역할을 제대로 인정받지 못했던 시간이었다. 촬영의 흐름을 조율하고, 제한된 환경에서 최상의 결과물을 도출해야 했지만, 처음부터 모든 게 매끄럽게 풀릴 리가 없었다. 팀원들은 나를 리더로서 온전히 신뢰하지 않았고, 나는 그 기대와 현실의 차이 속에서 점점 더 초조해졌다.

그때의 나는 정말 최선을 다했다. 촬영 일정이 밀리면 남들보다 더 일찍 출근했고, 예상치 못한 문제에도 유연하게 대처하려고 노력했다. 촬영의 완성도를 높이기 위해 디테일을 점검하는 시간도 늘렸다. 그런데도 결과는 기대에 미치지 못했다. 나는 ‘나는 이렇게 열심히 하는데, 왜 인정받지 못할까?’ 하는 억울한 감정에 휩싸였다.

그 감정이 극에 달했을 때, 모든 걸 그만두고 떠나버리고 싶었다. ‘나 같은 사람 필요 없다고 생각하는 곳에서 더 이상 노력하는 게 무슨 의미가 있지?’ 하는 생각이 들었다. 그냥 모든 걸 던져버리고 집으로 가고 싶었다. 하지만 그렇게 집으로 돌아가면 내 속이 후련할까? 나중에 돌아봤을 때 찝찝하지 않을까?

결국, 나는 이를 악물고 끝까지 마무리하기로 했다. 마지막 촬영은 음식물 쓰레기 여과기 제품 촬영이었다. 아직도 기억이 생생하다. 촬영장에는 아무도 없었고, 나는 혼자서 수많은 음식을 잘게 쪼개서 음식물 쓰레기를 만들어야 했다. 손에 묻고, 냄새가 배고, 혼자서 조명을 조정하며 모든 구도를 잡아야 했다. 어쩌면 그 순간이 내가 느꼈던 가장 깊은 고독한 성취의 순간이었을지도 모른다. 다들 메인 촬영에 나가 있는 동안, 나는 묵묵히 내게 주어진 촬영을 끝까지 마무리했다.

그때의 내 심정은 나만 안다. 그 순간을 포기하지 않고 버틴 내가 대견하고 자랑스럽다. 그때 만약 억울한 감정에 휩싸여 모든 걸 놓아버렸다면, 나는 지금과 같은 나로 성장하지 못했을 것이다.

시간이 지나고 나서야 깨달았다. 억울한 감정을 당장 풀 수 없는 순간이 있다는 것. 그리고, 그 순간에 무너지는 대신 묵묵히 내 몫을 해내면 결국 진심이 통한다는 것.

사람 사는 일이란 결국 수많은 변화를 파도타듯 넘기는 것 아닐까? 변화를 거부하거나 두려워할 수도 있지만, 그렇게 해서는 앞으로 나아갈 수 없다. 변화는 항상 예상치 못한 방식으로 찾아오고, 나는 다시 한 번 그 변화를 마주하게 될 것이다.

이제 나는 새로운 분야로 이직을 준비 중이다. 그리고 또다시 낯선 환경 속에서 어려움을 겪을 수도 있다. 때론 내가 충분하지 않다고 느껴질 수도 있고, 내 노력이 인정받지 못한다고 생각할 수도 있다. 하지만 나는 안다. 나는 그런 순간을 넘어설 수 있는 사람이라는 걸.

그럴 때마다 그때의 3개월을 떠올리며 다시 일어설 것이다. 그리고 나 자신에게 이렇게 말할 것이다.

"나는 또 한 번 넘어설 수 있고, 앞으로도 괜찮을 거야."
"열심히 해온 나를 내가 제일 잘 알잖아."

배움과 성장은 끝이 없다. 중요한 건 넘어지더라도 다시 일어나는 것, 그리고 포기하지 않는 것이다. 변화의 파도를 다시 한 번 타볼 준비를 하며, 마음을 다잡아본다.

카페 만월경 웹사이트 참고해서 분석 및 UX 기획 가이드 공부

카페 만월경 웹사이트(https://www.cafewhale.com/)

1. 그리드 시스템의 구성 요소

컬럼 (Column)

컬럼은 콘텐츠를 배치하는 영역으로, 그리드 시스템에서 가장 중요한 단위임

일반적으로 12컬럼 그리드를 많이 사용하며, 필요에 따라 8컬럼, 16컬럼 등으로 변경 가능함

반응형 디자인에서는 화면 크기에 따라 컬럼 수가 줄어들거나 변형됨

컬럼의 너비는 고정될 수도 있고, 유동적인 크기를 가질 수도 있음

마진 (Margin)

레이아웃 전체 바깥쪽 여백을 의미하며, 컨테이너의 경계와 화면의 끝 사이의 공간임

콘텐츠가 화면 끝에 너무 붙지 않도록 하기 위해 사용됨

일반적으로 양쪽 마진을 동일하게 설정하여 균형 잡힌 레이아웃을 구성함

거터 (Gutter)

컬럼과 컬럼 사이의 간격을 의미함

컬럼들이 너무 밀착되지 않도록 하고, 콘텐츠 간 여백을 유지하여 가독성을 높임

UI에서 정렬된 레이아웃을 만들 때 중요한 역할을 함

컨테이너 (Container)

그리드 시스템을 감싸는 전체적인 영역을 의미함

웹사이트의 전체적인 너비를 지정하며, 반응형 웹에서는 유동적 또는 고정형 컨테이너를 사용함

컨테이너는 내부에 컬럼을 포함하고 있으며, 좌우 마진과 함께 화면 중앙 정렬이 일반적임

2. 카페 만월경 웹사이트 분석 및 UX 기획 가이드

주요 기능과 UI 구조

카페 만월경 웹사이트는 브랜드의 감성을 강조하면서도 사용자가 정보를 쉽게 탐색할 수 있도록 설계되었음

홈페이지는 브랜드 아이덴티티를 강조하는 풀스크린 이미지와 감각적인 타이포그래피를 사용함

메뉴 페이지는 이미지 중심의 UI 구성으로 직관적인 메뉴 탐색을 지원함

스토어 페이지에서는 오프라인 매장 위치 및 정보를 제공하며 예약 기능이 포함됨

뉴스룸에서는 브랜드 소식 및 이벤트 정보를 제공함

멤버십 및 앱 기능을 통해 사용자 참여를 유도하며, 포인트 적립 및 멤버십 혜택을 안내함

내비게이션은 데스크탑에서는 수평 메뉴, 모바일에서는 햄버거 메뉴로 변경됨

사용된 그리드 시스템

카페 만월경 웹사이트는 12컬럼 그리드 시스템을 기반으로 디자인되었으며, 유동적인 레이아웃을 지원하기 위해 플루이드 그리드 방식을 사용함

데스크탑에서는 12컬럼 그리드를 적용하여 컬럼 너비는 고정하고, 여백은 가변적으로 설정됨

태블릿에서는 8컬럼 그리드로 변형되어 일부 사이드바 요소가 숨겨지거나 축소됨

모바일에서는 4컬럼 또는 단일 컬럼 구조로 변경되며, 콘텐츠가 세로 스크롤 중심으로 재배치됨

각 디바이스 해상도에 따라 미디어 쿼리를 활용하여 그리드가 동적으로 조정됨

반응형 디자인 전략

데스크탑 환경에서는 넓은 화면을 활용하여 여러 열의 레이아웃을 구성하며, 주요 콘텐츠와 사이드바를 배치함

풀스크린 이미지 및 대형 타이포그래피를 활용하며, 상단에 고정된 내비게이션 바를 사용함

태블릿 환경에서는 8컬럼 그리드를 적용하고, 일부 UI 요소가 축소되거나 접힘

내비게이션 바의 크기가 조정되며 일부 메뉴는 아이콘화됨

콘텐츠 크기는 텍스트 크기 자동 조절, 이미지 최적화 등을 통해 가독성을 유지함

모바일 환경에서는 단일 열 레이아웃이 적용되어 세로 스크롤 방식으로 콘텐츠가 배치됨

햄버거 메뉴 아이콘을 활용하여 내비게이션이 숨김 처리되며, 터치 최적화 버튼 및 인터랙션이 적용됨

디자인 시스템과 사용성의 균형

컬러 시스템은 브랜드 아이덴티티를 강조하는 크림색, 우드 브라운, 다크 그린 등의 따뜻한 색감으로 구성됨

타이포그래피는 브랜드 아이덴티티를 강조하기 위해 세리프 폰트를 사용하되, 본문에는 가독성을 고려한 산세리프 폰트를 적용함

UI 컴포넌트는 주요 액션 버튼은 명확한 대비를 주고, 보조 버튼은 낮은 대비를 적용하는 방식을 사용함

카드 레이아웃을 활용하여 메뉴 및 제품을 강조하고, 부드러운 페이드인 및 페이드아웃 효과를 적용하여 자연스러운 전환을 제공함

접근성을 고려하여 색상 대비를 준수하고 충분한 터치 영역을 확보하며, 반응형 인터랙션을 최적화함

디자이너와 개발자의 협업 방식

디자인 시스템 문서를 통해 Figma에서 컬러, 폰트, UI 컴포넌트를 정의하고 공유함

핸드오프 툴로 Zeplin을 활용하여 개발자가 정확한 스펙을 확인할 수 있도록 함

인터랙션이 포함된 프로토타입을 제작하여 개발자가 UI 동작을 직관적으로 이해할 수 있도록 함

코드 가이드 작성 시 CSS 변수 활용 및 UI 재사용을 위한 공통 컴포넌트를 구축함

실시간 커뮤니케이션을 위해 Slack, Notion, Jira 등을 활용하여 피드백 및 진행 상황을 공유함

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

쿠팡 앱 주문내역 섹션 UI 구조 상세 분석

쿠팡 앱의 주문내역(Order History) 섹션은 사용자가 주문한 상품의 상태를 확인하고, 재주문, 반품/환불 등의 기능을 수행하는 핵심 페이지임. 이 섹션을 UX/UI 관점에서 분석하여 구성 요소, 인터랙션, 사용성을 최적화하는 방법을 정리함.

1. 주문내역 섹션의 주요 목적

✔ 사용자가 최근 주문한 상품을 한눈에 확인할 수 있도록 정리.
✔ 주문 상태(배송 중, 배송 완료, 반품 가능 등)를 명확하게 제공.
✔ 쉽게 재주문, 리뷰 작성, 반품 신청 등의 추가 작업을 할 수 있도록 지원.
✔ 주문 필터 및 검색 기능을 제공하여 빠르게 특정 주문을 찾을 수 있도록 함.

2. 주문내역 UI 구조

쿠팡 앱의 주문내역 섹션은 헤더, 필터/검색 바, 주문 리스트(각 주문 카드 포함), 푸터로 구성됨.

(1) 헤더 영역

• 뒤로 가기 버튼 → 이전 화면(마이페이지 또는 홈)으로 이동.
• 화면 타이틀: "주문내역" → 현재 페이지가 주문내역임을 명확히 표시.
• 고객센터 아이콘 → 주문 관련 문의를 바로 할 수 있도록 연결.

(2) 필터 및 검색 바

• 주문 검색 입력 필드 → 상품명, 주문번호 입력 시 해당 주문만 필터링 가능.
• 필터 버튼 → 기간별(1개월, 3개월, 6개월, 1년), 주문 상태(배송 중, 완료, 반품 가능) 등의 필터 적용.
• 정렬 옵션 → 최신 주문순, 배송 상태별 정렬 가능.

✅ UX 최적화 포인트
✔ 검색 기능을 통해 많은 주문 중 원하는 상품을 빠르게 찾을 수 있음.
✔ 필터를 활용하여 주문 기간 및 배송 상태에 따라 리스트를 정리할 수 있음.

(3) 주문 리스트 (개별 주문 카드 UI 분석)

쿠팡의 주문내역에서 각 주문은 카드 형태로 표시되며, 각 주문 카드에는 다음과 같은 정보가 포함됨.

① 주문 기본 정보

② 대표 상품 정보

③ 배송 상태 정보

④ 주요 기능 버튼 (CTA, Call To Action)

✅ UX 최적화 포인트
✔ 주문 상태를 직관적으로 표시하여 사용자가 배송 진행 상황을 쉽게 확인 가능.
✔ CTA 버튼(배송 조회, 재주문, 리뷰 작성)을 강조하여 사용자의 액션을 유도.
✔ 주문 상세 페이지에서 결제 내역, 배송 주소, 영수증 출력 등의 추가 기능 제공.

(4) 푸터 영역

• 최근 본 상품 → 주문한 상품과 유사한 추천 상품을 표시.
• 고객센터 연결 → 주문 관련 문제 해결을 위한 문의 옵션 제공.
• 홈 버튼 → 빠른 이동을 위해 네비게이션 바 포함.

📌 1. 주문 관련 정보

1) 주문 날짜

✔ 주문의 발생 시점(YYYY-MM-DD) 표시
✔ 최근 주문을 빠르게 찾을 수 있도록 최신순 정렬
✔ 필터 기능 제공 → "1개월, 3개월, 6개월, 1년" 단위로 검색 가능
✔ UI에서 "YYYY.MM.DD" 또는 "YYYY-MM-DD" 형식으로 통일

✅ UX 최적화 요소
✔ 최근 주문을 강조하여 빠르게 찾을 수 있도록 상단 정렬.
✔ 특정 날짜 선택 시 주문 내역 필터링 가능하도록 캘린더 UI 제공.

2) 주문 번호

✔ 각 주문을 고유하게 식별할 수 있는 번호 제공 (예: 20240314-12345678)
✔ 주문 관련 문의 또는 반품/교환 진행 시 필수 정보
✔ 복사 버튼 제공 → 버튼 클릭 시 주문번호가 클립보드에 자동 복사됨

✅ UX 최적화 요소
✔ 주문 번호를 한눈에 보기 쉽게 가독성 있는 폰트 & 여백 적용
✔ "복사" 버튼을 추가하여 고객센터 문의 시 빠르게 복사 가능
✔ 주문번호를 터치하면 자동 복사되는 기능 제공

3) 주문자 정보 (카드 형식 UI)

✔ 주문을 진행한 사용자의 정보 표시 (이름, 연락처, 배송지)
✔ 카드 UI 형태로 시각적 구분 (박스 처리, 아이콘 포함)
✔ 주소 변경 시 "배송지 변경" 버튼 제공

✅ UX 최적화 요소
✔ 주문자 정보를 개인정보 보호를 위해 일부 마스킹 처리 (예: 홍길동 → 홍**).
✔ "수정" 버튼을 배치하여, 배송지 변경이 필요한 경우 쉽게 수정 가능.

📌 2. 결제 정보 관련 UI 요소 (쿠팡 앱 주문상세페이지 기준)

1) 결제 정보 (카드형 UI - 주문상세페이지 기준)

쿠팡 앱의 주문상세페이지에서는 사용자가 결제한 내역을 확인할 수 있도록 결제 수단 및 결제 정보가 카드 형태(UI Card)로 제공됨.

✔ 사용자가 선택한 결제 수단(신용카드, 쿠페이 머니, 간편결제 등) 표시
✔ 결제 수단 아이콘 포함 → 카드사 로고(예: VISA, Mastercard) 또는 간편결제 로고(예: 네이버페이, 삼성페이)
✔ 카드번호 일부 마스킹 처리 (예: KB국민카드 1234-****-5678)
✔ 결제 일시 표시 → (예: 2024.03.14 12:35 결제 완료)
✔ 결제 승인번호 표시 → 결제 인증이 필요한 경우 고객센터 문의를 위한 승인번호 제공

✅ UX 최적화 요소 (주문상세페이지 기준)

✔ 결제 수단을 한눈에 알아볼 수 있도록 카드형 UI 적용
✔ 결제 수단을 변경하는 옵션은 제공하지 않음 (결제 완료 후 변경 불가)
✔ "영수증 보기" 또는 "세금계산서 요청" 버튼 제공하여 결제 증빙 가능
✔ 결제 상태(승인 완료, 취소 요청, 환불 완료 등)를 시각적으로 강조하여 가독성 강화
✔ 환불이 가능한 경우 "환불 요청" CTA 버튼 추가
✔ 쿠페이머니를 사용한 경우 잔액 및 사용 내역을 별도 표시하여 혼동 방지

2) 상품 가격

✔ 주문한 상품의 원가를 표시
✔ 여러 개의 상품이 있을 경우 총 상품 가격을 함께 표시
✔ 할인 적용 전 가격을 취소선(strikethrough)으로 시각적으로 구분

✅ UX 최적화 요소
✔ 원가 대비 할인 가격을 강조하여 시각적으로 직관적 표시.
✔ 할인 적용 전 가격과 최종 결제 가격을 대비하여 표시하여 가격 혜택을 강조.

3) 할인 금액

✔ 쿠폰, 프로모션 할인, 카드 즉시 할인 등 적용된 할인 내역 표시
✔ 할인 유형별 구분 (예: "카드 할인 5,000원", "쿠폰 할인 3,000원")
✔ 할인 금액을 녹색 또는 강조된 텍스트로 표시하여 시각적 구분

✅ UX 최적화 요소
✔ 할인 적용 전/후 가격을 비교하여 사용자가 혜택을 직관적으로 이해할 수 있도록 표시.
✔ "더보기" 버튼을 추가하여 상세 할인 내역을 확인 가능하도록 제공.

4) 배송비

✔ 기본 배송비 표시 (무료 배송일 경우 "무료 배송" 강조)
✔ 로켓배송/로켓프레시/일반배송 등의 차이를 명확하게 구분
✔ 할인 적용 시 "배송비 할인 -3,000원" 등으로 명확히 표시

✅ UX 최적화 요소
✔ 무료 배송 혜택을 강조하여 사용자가 배송비 부담 없이 구매할 수 있도록 유도.
✔ "쿠페이 정기 배송 할인" 등의 추가 혜택이 있을 경우 자동 적용 여부 표시.

📌 3. 쿠페이 관련 정보

1) 쿠페이머니 (잔액 표시)

✔ 현재 보유한 쿠페이머니 잔액 표시
✔ "충전하기" 버튼 추가하여 부족할 경우 즉시 충전 가능

✅ UX 최적화 요소
✔ 현재 잔액이 부족하면 "충전하기" 버튼을 강조하여 자연스럽게 충전 유도.
✔ 잔액이 충분한 경우 "사용 가능" 상태로 표시하여 사용자가 혼동하지 않도록 함.

2) 잔액 및 충전 내역 보기

✔ 사용자가 이전 쿠페이머니 사용 내역 및 충전 내역을 확인할 수 있도록 별도 페이지 제공
✔ "최근 충전 내역", "최근 사용 내역"을 구분하여 표시
✔ 검색 기능 제공하여 특정 날짜의 내역을 쉽게 찾을 수 있도록 지원

✅ UX 최적화 요소
✔ 검색 및 필터 기능을 추가하여 특정 기간의 내역을 쉽게 확인 가능하도록 지원.
✔ 사용 금액과 적립 내역을 한눈에 볼 수 있도록 카드 UI 적용.

3) 쿠페이머니 (사용 금액)

✔ 이번 결제에서 사용된 쿠페이머니 금액 표시
✔ 할인과 결합하여 "최종 결제금액"이 어떻게 결정되었는지 명확하게 표시

✅ UX 최적화 요소
✔ 사용된 금액과 남은 잔액을 동시에 표시하여 가독성을 높임.
✔ "전체 사용" 버튼을 제공하여 쿠페이머니를 한 번에 사용할 수 있도록 지원.

📌 4. 총 결제금액 및 적립 예정 금액

1) 총 결제금액

✔ 상품 가격 - 할인금액 + 배송비 - 쿠페이머니 사용금액 = 총 결제금액
✔ "최종 결제금액"을 강조하여 직관적으로 표시

✅ UX 최적화 요소
✔ 결제 화면에서 최종 결제금액을 가장 눈에 띄게 표시하여 사용자가 혼동하지 않도록 설계.
✔ 모든 할인과 적립 혜택을 계산한 후의 "실 결제 금액"을 강조하여 명확히 표시.

2) 쿠팡캐시 적립 예정 금액

✔ 결제 후 적립 예정인 쿠팡캐시 금액을 표시
✔ 예상 적립일과 함께 "적립 내역 보기" 버튼 제공

✅ UX 최적화 요소
✔ 적립 예정 금액이 많은 경우, "추가 쿠팡캐시 적립 혜택" 안내하여 결제 유도.
✔ 적립 예정 금액이 실제 지급되는 날짜를 명확하게 표시하여 사용자 신뢰도 강화.

CTA (Call to Action) 버튼의 개념 및 UX/UI 적용 방법

1. CTA 버튼이란?

CTA(Call to Action) 버튼은 사용자의 특정 행동(액션)을 유도하는 버튼으로, 클릭, 터치, 스와이프 등 사용자의 인터랙션을 유발하는 가장 중요한 UI 요소 중 하나임.
CTA 버튼이 효과적으로 설계되면 전환율(Conversion Rate)이 증가하고, 사용자 경험(UX)이 향상됨.

2. CTA 버튼의 주요 역할

CTA 버튼은 다음과 같은 핵심 역할을 수행함.

✔ 사용자의 즉각적인 행동 유도 → 주문, 구매, 회원가입 등 특정 액션을 유발.
✔ 페이지 내 정보 구조의 명확한 가이드 제공 → 사용자 흐름을 직관적으로 안내.
✔ UI/UX 최적화 → 사용자 경험을 고려하여 색상, 크기, 위치를 설계하여 클릭률 증가.

3. CTA 버튼의 UI/UX 설계 원칙

CTA 버튼은 단순한 클릭 요소가 아니라, 심리적, 디자인적 요소를 함께 고려하여 최적화해야 함.

(1) 가독성이 높은 텍스트 사용

• CTA 버튼에는 명확하고 직관적인 문구를 사용해야 함.
• 사용자가 버튼을 봤을 때, 어떤 액션을 수행할지 바로 이해할 수 있도록 설계해야 함.

✔ 좋은 예시
✅ "지금 구매하기"
✅ "무료 체험 시작"
✅ "배송 조회"
✅ "장바구니에 추가"

✖ 나쁜 예시
❌ "확인" (무엇을 확인하는지 불명확)
❌ "더 알아보기" (구체적인 행동을 유도하지 않음)

(2) 시각적 대비(Contrast) 적용

CTA 버튼은 사용자가 즉시 인식할 수 있도록 배경과 대비되는 색상으로 설정해야 함.

• Primary CTA(주요 버튼): 브랜드 컬러를 사용하고, 명확한 대비를 적용.
• Secondary CTA(보조 버튼): Primary CTA보다 덜 강조된 색상으로 설정.

✔ 좋은 예시 (CTA 색상 대비 적용)

✖ 나쁜 예시

• 버튼 색상이 배경색과 너무 유사하여 잘 보이지 않음.
• Primary CTA와 Secondary CTA의 색상이 동일하여 구분이 어려움.

(3) 버튼 크기 및 터치 영역 최적화

CTA 버튼은 사용자의 손가락 크기에 맞게 충분한 터치 영역을 제공해야 함.

• 모바일 환경에서는 최소 48px × 48px 이상의 크기를 확보해야 함.
• 버튼 간 간격(Spacing)이 충분해야 잘못된 터치를 방지할 수 있음.

✔ 좋은 예시
✅ 버튼 크기: 48px 이상 (터치 친화적)
✅ 버튼 간 간격: 8~16px 유지 (실수 방지)

✖ 나쁜 예시
❌ 버튼 크기가 작아 손가락으로 정확한 터치가 어려움.
❌ 버튼 간 간격이 너무 좁아 실수로 다른 버튼을 누를 가능성이 높음.

(4) 사용자 행동 패턴을 고려한 배치

CTA 버튼은 사용자의 흐름을 고려하여 최적의 위치에 배치해야 함.

✔ CTA 버튼의 일반적인 배치 원칙

• 구매, 결제 등 주요 CTA 버튼은 화면 하단에 고정하여 쉽게 접근 가능하도록 배치.
• 모바일에서는 손가락이 닿기 쉬운 하단 영역에 CTA 버튼 배치(엄지 손가락 존).
• Primary CTA 버튼을 항상 오른쪽(직관적인 진행 방향)에 배치.

4. CTA 버튼의 인터랙션(Interaction) 설계

CTA 버튼은 단순히 누를 수 있는 요소가 아니라, 사용자의 액션을 유도하는 중요한 상호작용 요소이므로 피드백을 포함해야 함.

(1) 버튼 상태별 스타일 적용

✖ 나쁜 예시

• 모든 상태에서 동일한 색상을 사용하여 시각적 피드백이 없음.
• 비활성화 상태에서도 클릭이 가능한 것처럼 보이는 디자인 적용.

(2) 애니메이션 및 트랜지션 적용

• 버튼을 클릭했을 때, 즉각적인 반응(애니메이션)이 제공되어야 함.
• 트랜지션 효과를 적용하여 부드러운 시각적 피드백 제공.

5. 쿠팡 주문내역에서 CTA 버튼 최적화

쿠팡 주문내역 화면에서 CTA 버튼의 역할을 UX 관점에서 분석하면 다음과 같음.

✔ CTA 버튼이 사용자 액션을 쉽게 유도하도록 크기, 색상, 배치를 최적화해야 함.

"판매처에 문의하기" 버튼의 낮은 대비(Weak Contrast) 디자인 의도 분석

쿠팡 앱에서 "판매처에 문의하기" 버튼이 다른 CTA 버튼(예: 배송 조회, 반품 신청 등)보다 약한 대비로 표현된 이유를 UX/UI 디자인 관점에서 분석하면 다음과 같음.

1. CTA 버튼의 계층 구조(Hierarchy)와 중요도 조절

모든 CTA 버튼이 동일한 강조 수준을 가지면 사용자는 무엇을 먼저 해야 할지 혼란을 느낄 가능성이 있음.
따라서, 주문 상세 페이지에서 가장 중요한 액션을 우선적으로 강조하고, 상대적으로 중요도가 낮은 기능은 약한 대비로 표현함.

✔ CTA 버튼의 계층 구조 (쿠팡 주문 상세 페이지 기준)

✅ 디자인 의도:

• 사용자 행동을 분석한 결과, 배송 조회/반품 신청 버튼이 가장 많이 클릭되므로, 이 두 가지 버튼을 강한 대비로 제공.
• 반면, 판매처에 직접 문의하는 사용자는 상대적으로 적고, 모든 사용자에게 필수적인 기능이 아니므로 강조도를 낮춤.
• "판매처 문의" 버튼이 필요한 사용자만 인식하고 사용할 수 있도록 시각적 노이즈를 줄이는 전략 적용.

2. 고객센터(쿠팡) vs. 판매자(제3자) 문의 우선순위

쿠팡 앱에서는 "판매처 문의"보다 쿠팡 고객센터로 문의하는 방식이 더 일반적이며, 문제 해결 속도가 빠름.
따라서, 쿠팡 고객센터의 문의 기능을 우선적으로 강조하고, 판매처 문의 기능은 보조적인 역할을 하도록 디자인됨.

✔ 일반적인 문제 해결 흐름:
1️⃣ 배송/교환/환불 관련 문의 → 쿠팡 고객센터가 해결 (Primary CTA)
2️⃣ 제품의 상세 정보나 특수한 사유가 있는 경우 → 판매처 문의 가능 (Tertiary CTA)

✅ 디자인 의도:

• "판매처 문의하기" 버튼의 강조도를 낮추어 일반적인 고객 문의는 쿠팡 고객센터를 이용하도록 유도.
• 쿠팡 고객센터에서 해결할 수 없는 특수한 경우에만 판매처와 직접 소통할 수 있도록 함.

3. 사용자 피로도 감소 (Cognitive Load Reduction) 전략

사용자가 모든 버튼이 동일한 강조 수준이면 어떤 버튼을 눌러야 할지 직관적으로 인식하기 어려움.
특히, 강조된 CTA 버튼이 많으면 사용자는 선택을 망설이게 되고, UX 피로도가 증가할 수 있음.

✔ CTA 버튼 대비를 조정하면?

• 시각적 피로도를 줄이고, 사용자의 흐름을 더 직관적으로 유도 가능.
• 가장 중요한 액션(배송 조회, 반품 신청)만 강조하면 사용자가 빠르게 핵심 기능을 사용할 수 있음.
• 반면, 중요도가 낮은 기능(판매처 문의하기)은 대비를 줄여 필요할 때만 사용하도록 유도.

✅ 디자인 의도:

• 사용자의 혼란을 방지하고 최우선 액션을 빠르게 선택하도록 유도.
• 강한 대비를 적용하지 않아도 필요한 사용자는 버튼을 찾을 수 있음.

4. 판매처 응답 속도 및 고객 경험 관리

일반적으로 판매처의 응답 속도는 쿠팡 고객센터보다 느릴 가능성이 높음.
즉, 판매처와 직접 연락하는 방식이 즉각적인 문제 해결을 보장하지 않으므로, 사용자 경험(UX)을 저하시킬 수 있음.

✔ 강한 대비를 적용하면 생길 문제점

• 모든 사용자가 판매처 문의를 우선적으로 시도하면, 판매자가 빠르게 응답하지 못할 경우 부정적인 사용자 경험이 증가.
• 반면, 쿠팡 고객센터는 더 빠른 응답을 제공할 수 있어 고객 만족도가 높아질 가능성이 큼.

✅ 디자인 의도:

• 필요한 사용자만 판매처에 문의하도록 유도하여, 불필요한 문의 증가를 방지.
• 쿠팡 고객센터를 우선적으로 이용하도록 디자인하여 문제 해결 속도를 높임.

5. 쿠팡의 전반적인 UI/UX 디자인 전략

쿠팡은 사용자의 행동 데이터를 기반으로 UI를 최적화하는 A/B 테스트를 지속적으로 진행함.
이러한 테스트 결과에 따라, 강조할 버튼과 그렇지 않은 버튼을 구분하여 시각적 계층 구조를 설계함.

✔ CTA 버튼 디자인 전략 요약

결론: "판매처에 문의하기" 버튼이 약한 대비로 표현된 이유

1️⃣ CTA 버튼의 계층 구조를 유지하기 위해
→ 가장 중요한 기능(배송 조회, 반품 신청)을 최우선으로 강조하고, 덜 중요한 기능(판매처 문의)은 약한 대비로 제공.

2️⃣ 쿠팡 고객센터를 우선적인 문제 해결 창구로 설정하기 위해
→ 대부분의 주문 관련 문제는 쿠팡 고객센터가 해결할 수 있으므로, 판매처 문의를 기본 옵션으로 제공하지 않음.

3️⃣ 사용자의 피로도를 줄이고 UX를 최적화하기 위해
→ 모든 버튼이 강한 대비를 가지면 사용자가 어떤 버튼을 눌러야 할지 혼란을 느낄 수 있음.

4️⃣ 판매처의 응답 속도가 느릴 가능성이 높기 때문
→ 즉각적인 해결이 어려울 수 있으므로, 필요할 때만 접근하도록 설계.

5️⃣ 사용자의 행동 데이터를 기반으로 최적화된 A/B 테스트 결과 반영
→ 주요 액션(반품 신청, 배송 조회)과 보조 액션(판매처 문의)의 시각적 구분을 통해 최적의 UI를 유지.

1. 행(Row)과 열(Column)의 차이

1) 행(Row)란?

• 가로(→) 방향으로 데이터를 정렬한 구조.
• 여러 개의 **열(Column)**이 모여 **행(Row)**을 구성.
• 엑셀, 데이터베이스, 테이블에서 한 개의 레코드(Record)를 의미함.

2) 열(Column)란?

• 세로(↓) 방향으로 데이터를 정렬한 구조.
• 여러 개의 **행(Row)**이 모여 **열(Column)**을 구성.
• 엑셀, 데이터베이스, 테이블에서 속성(Attribute)이나 필드(Field)를 의미함.

3) 행과 열 비교

2. 행간(Line Spacing), 자간(Letter Spacing), 커닝(Kerning) 차이

1) 행간(Line Spacing)이란?

• 한 행과 다음 행 사이의 간격을 의미함.
• 가독성에 영향을 주며, 텍스트가 너무 붙으면 읽기 어렵고, 너무 넓으면 흐름이 끊김.
• 보통 1.4~1.6배 정도의 행간이 가독성에 적절함.

2) 자간(Letter Spacing)이란?

• 문자와 문자 사이의 간격을 일정하게 조절하는 것.
• 웹 디자인에서는 CSS 속성 letter-spacing을 사용하여 조절 가능.
• 글자가 서로 붙으면 가독성이 떨어지고, 너무 넓으면 흐트러진 느낌을 줌.

3) 커닝(Kerning)이란?

• 특정 문자 조합 간격을 개별적으로 조정하는 것.
• 자간과 다르게 특정 문자 쌍에만 영향을 줌 (예: 'AV'처럼 시각적으로 불균형한 경우).

4) 비교 정리

3. 서체(Typeface)와 폰트(Font)의 차이 & 세리프/산세리프

1) 서체(Typeface)란?

• 특정 스타일로 디자인된 글자 패밀리 전체를 의미함.
• 예: Helvetica, Times New Roman, Arial.

2) 폰트(Font)란?

• 같은 서체라도 크기, 굵기, 기울기 등이 다르면 각각 다른 폰트로 구분됨.
• 예: Helvetica Regular 12px, Helvetica Bold 16px.

3) 서체의 종류

4. 제목, 소제목, 본문 간 관계 = 정보 계층 구조(Information Hierarchy)

5. UX 문서 작성 순서: PRD → IA → 와이어플로우

(1) PRD (제품 요구사항 정의서, Product Requirements Document)

(2) IA (정보 구조, Information Architecture)

(3) 와이어플로우 (Wireflow, 화면 흐름도)

6. 6:3:1 컬러 비율 개념 & 스타벅스 예시

1) 개념

• 6(주색, Primary Color) : 3(보조색, Secondary Color) : 1(강조색, Accent Color)

2) 스타벅스 UI 컬러 비율 예시

✔ 6:3:1 컬러 비율을 활용하면 시각적으로 균형 잡힌 UI를 디자인할 수 있음. 🚀

Figma 프로토타입 슬라이드 및 팝업 기능 사용 방법

1. 슬라이드(카로셀) 기능 설정 방법

1) 아트보드(프레임) 설정

1. Figma에서 **Frame (프레임)**을 생성하고, 슬라이드할 콘텐츠를 추가함.
2. 한 프레임에 여러 개의 이미지 또는 콘텐츠를 가로로 정렬하여 배치함.
3. 슬라이드할 콘텐츠를 감싸는 마스크(Mask) 프레임을 만들어 가려지는 부분을 설정함.

2) 오토 애니메이트 기능 적용

1. 각 슬라이드 상태를 별도의 프레임으로 복사함.
2. 첫 번째 슬라이드가 있는 프레임을 선택하고 Prototype 탭으로 이동.
3. 슬라이드할 방향(다음 프레임)으로 드래그하여 연결선을 생성.
4. Interaction Details에서
   • Trigger: On Drag
   • Action: Navigate To
   • Animation: Smart Animate
   • Easing: Ease Out 또는 Ease In-Out 적용
5. 동일한 방법으로 이전 슬라이드로 돌아가는 기능을 설정.
6. 프레젠테이션 모드에서 슬라이드가 정상 작동하는지 테스트.

3) 자동 슬라이드(Loop) 설정

1. 슬라이드 콘텐츠를 연결한 후, 각 프레임에서 After Delay 트리거 추가.
2. Trigger: After Delay (2~3초 추천)
3. Action: Navigate To (다음 슬라이드)
4. 마지막 슬라이드에서 다시 첫 번째 슬라이드로 연결하여 무한 루프 설정 가능.

2. 팝업(모달) 기능 설정 방법

1) 팝업 디자인 구성

1. 팝업이 될 프레임(모달)을 기존 프레임 위에 생성.
2. 팝업 배경(딤드 처리)을 추가하고 **Opacity(불투명도)**를 30~50%로 조정.
3. 닫기 버튼(X) 또는 다른 영역을 터치하면 팝업이 닫히도록 설정할 예정.

2) 팝업(Overlay) 프로토타입 연결

1. 팝업을 트리거할 **버튼(예: "자세히 보기")**을 선택.
2. Prototype 탭에서 팝업 프레임으로 연결선을 드래그함.
3. Interaction Details에서
   • Trigger: On Click
   • Action: Open Overlay
   • Overlay: Center (또는 사용자 지정 위치)
   • Animation: Smart Animate 또는 Dissolve 적용
   • Close when clicking outside 옵션 체크 (팝업 외부 터치 시 닫힘 설정)

3) 팝업 닫기 기능 추가

1. 팝업 프레임 내 닫기 버튼(X)을 선택하고 Prototype 탭으로 이동.
2. 닫기 버튼 → 기존 화면으로 연결 후, Interaction Details 설정.
   • Trigger: On Click
   • Action: Close Overlay
   • Animation: Smart Animate 또는 Dissolve

3. 슬라이드 & 팝업 결합하기 (예: 이미지 확대 보기 팝업 + 슬라이드 기능)

1. 팝업(모달) 내부에 슬라이드(카로셀) 콘텐츠를 추가함.
2. 팝업 내부의 이미지 또는 콘텐츠를 슬라이드 기능과 동일한 방식으로 설정.
3. 팝업이 열리면 슬라이드 기능이 활성화되도록 연결 설정.
4. 팝업 내부에서 좌우 드래그 기능을 추가하여 이미지 탐색 가능하게 설정.

📌 요약

• 슬라이드(카로셀) → Smart Animate + Drag 설정
• 자동 슬라이드(Loop) → After Delay 트리거 사용
• 팝업(모달) → Open Overlay 설정 + 닫기 버튼은 Close Overlay 설정
• 슬라이드 & 팝업 결합 → 팝업 내부에서 슬라이드 기능 설정 가능

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

쿠팡 앱 UI 요소 상세 정리
1. 헤더 영역

• 뒤로 가기 버튼 → 이전 화면(홈 또는 카테고리 페이지)으로 이동.
• 검색 바 → 검색어 입력 및 자동완성 추천어 제공.
• 검색 바 Placeholder → "검색어를 입력하세요" 또는 인기 검색어를 표시하여 사용자 가이드 역할 수행.
• 취소 버튼 → 검색어 입력 도중 터치 시 입력된 검색어 삭제 또는 검색 페이지 닫기.
• 전체 삭제 버튼 → 최근 검색어나 입력한 검색어 목록을 한 번에 삭제하는 기능 제공.
• 입력 필드 → 사용자가 검색어를 입력할 수 있는 공간으로, 키보드 입력과 자동완성 기능을 지원.
• 음성 검색 아이콘 → 음성 명령을 통한 검색 기능 제공.
• 카테고리 필터 버튼 → 특정 카테고리 내에서 검색할 수 있도록 필터 옵션 제공.
• 햄버거 메뉴 아이콘 → 터치 시 사이드 또는 풀스크린 메뉴가 열리며, 상품 카테고리 및 추가 기능(이벤트, 설정 등) 탐색 지원.
• 장바구니 아이콘 → 현재 담긴 장바구니 상품 개수를 표시하며, 터치 시 장바구니 페이지로 이동.

2. 컨텐츠 영역 (검색 결과 및 상품 리스트)

• 최근 검색어 → 사용자가 이전에 검색한 내역을 표시하여 빠른 재검색 가능.
• 추천 검색어 → 쿠팡이 제안하는 맞춤형 검색어 목록을 제공.
• 인기 검색어 → 실시간 트렌드 기반의 검색어 순위를 표시하여 사용자 유입 유도.
• 관련 검색어 → 입력한 검색어와 연관된 추가 검색어 리스트를 제공하여 검색 확장 가능.
• 더보기 버튼 → 추천 및 최근 검색어 리스트를 확장하여 더 많은 검색어를 표시함.
• 로켓프레시 상품 필터 → 로켓프레시 배송이 가능한 상품만 검색 결과에 표시되도록 설정.
• 로켓배송 체크박스 → 체크 시 로켓배송이 가능한 상품만 필터링하여 표시.
• 배송 포함 버튼 → 검색 결과에서 표시되는 상품 가격이 배송비를 포함한 가격으로 정렬되도록 설정.
• 카테고리 필터 → 특정 카테고리 선택 시 해당 범위 내에서만 검색 가능.
• 썸네일 레이아웃 버튼 → 상품 리스트를 리스트형 또는 그리드형으로 전환할 수 있는 UI 제공.
• 추천 상품 → 사용자의 검색 기록 및 관심 상품을 기반으로 맞춤형 상품을 제안.
• 광고 상품 → 스폰서 배지가 포함된 상품으로, 특정 키워드 검색 시 상단 또는 특정 위치에 배치됨.
• 제품 썸네일 → 검색 결과에 표시되는 제품 이미지로, 터치 시 해당 상품의 상세 페이지로 이동.
• 상품 제목 → 제품명을 표시하며, 길이가 길 경우 일부만 보이도록 축약 처리됨.
• 가격 정보 → 정가, 할인 가격, 쿠폰 적용가 등을 함께 표시하여 가격 비교를 용이하게 함.
• 할인 배지 → "특가", "할인 중" 등의 배지를 추가하여 사용자 클릭 유도.
• 리뷰 개수 및 평점 → 사용자 리뷰 수와 별점(1~5)을 함께 표시하여 신뢰도 강화.
• 찜(♥) 버튼 → 터치 시 해당 상품을 관심 목록에 추가하거나 삭제할 수 있음.
• 스토어 정보 → 해당 상품을 판매하는 스토어 정보(쿠팡 직접 판매 또는 입점 판매자)를 표시.
• 배송 정보 → "내일 도착", "로켓배송" 등의 빠른 배송 옵션을 강조하는 텍스트 제공.

3. 키보드 요소

• 기본 키보드 → 검색어 입력을 위한 일반 텍스트 키보드 제공.
• 음성 입력 버튼 → 음성 명령을 통한 검색 기능 지원.
• 완료(Enter) 버튼 → 검색어 입력 후 실행 버튼 역할 수행.
• 검색 제안 리스트 → 입력 중 추천 검색어 및 자동완성 기능 제공.
• 키보드 내 검색 버튼 → 키보드에서 바로 검색 실행 가능.
• 한영 전환 버튼 → 한국어와 영어 입력 방식을 변경할 수 있도록 지원.
• 이모지 입력 버튼 → 검색어 입력 시 이모지를 추가할 수 있도록 지원.

4. 하단 네비게이션 요소

• 홈 버튼 → 메인 홈 화면으로 이동.
• 검색 버튼 → 검색 페이지로 이동.
• 마이페이지 버튼 → 주문 내역 및 개인화된 정보 확인.
• 장바구니 버튼 → 장바구니 페이지로 이동 및 상품 개수 표시.
• 햄버거 메뉴 아이콘 → 상품 카테고리 및 추가 메뉴 탐색을 지원하는 UI 요소.

5. 추가 UI 요소

• 세그멘티드 컨트롤 → 검색 결과를 다양한 기준(예: 추천순, 낮은 가격순, 최신순)으로 필터링할 수 있는 탭형 UI.
• 카로셀 영역 → 여러 개의 추천 상품 또는 광고 배너를 가로 슬라이드 방식으로 제공.
• 태그 영역 → 특정 키워드(예: "무료배송", "베스트셀러")를 강조하여 사용자가 검색 결과를 쉽게 필터링할 수 있도록 제공.
• 상품 비교 버튼 → 여러 개의 상품을 선택하여 가격, 리뷰, 배송 조건 등을 비교할 수 있는 기능.
• 필터 아이콘 → 터치 시 가격, 브랜드, 배송 옵션 등의 상세 필터를 적용할 수 있도록 설정.
• 알림 아이콘 → 이벤트, 할인 정보, 장바구니 알림 등을 확인할 수 있는 UI 제공.
• 페이지네이션 → 검색 결과가 많을 경우 페이지 이동을 지원하는 UI(또는 무한 스크롤 적용 가능).
• 다크 모드 지원 → UI 요소가 다크 모드에서도 가독성이 유지되도록 디자인됨.

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