멜 로빈스의 만트라!🌿

“오늘 인생에서 신나는 새 장이 시작됩니다.”

아침마다 작은 문장을 뇌에 심어두면 하루의 기분이 달라질 수 있다.
문장은 단순한 다짐이 아니라 뇌에게 신호를 보내는 프로그래밍이다.
언제든 새로운 날을 시작할 수 있고, 일상 속 작은 가능성도 발견할 수 있다는 믿음.
하루하루 긍정적인 마음으로 살아가자~~!!

프로덕트 디자이너의 역할

오늘은 프로덕트 디자이너(Product Designer) 의 실제 업무 프로세스를 정리했다.
단순히 “예쁘게 디자인”하는 것을 넘어, *시장조사부터 개발자와의 협업까지 이어지는 긴 여정을 다룬다.

1. 시장조사 (레퍼런스 리서치)

경쟁 서비스 및 트렌드 분석
사용자들이 가진 페인포인트 파악
레퍼런스를 모아 차별화 포인트 도출

2. 콘셉트 기획 및 제안

킥오프(Kick-off): 기업과 첫 미팅, 프로젝트 방향성을 잡는 단계
서비스의 목표와 UX 전략을 구체화

3. 디자인 기획 및 시안 제작

와이어프레임, 유저 저니 맵, 프로토타입 작성
다양한 디자인 시안을 통해 방향성을 탐색

4. 디자인 시안 확정

클라이언트가 쉽게 결정할 수 있도록 구체적 근거를 제시하며 리딩하는 게 중요
최종 시안을 확정하고, 개발자에게 넘기기 전 정리

→ 핸드오프(Handoff):
개발자가 구현할 수 있도록 작업물을 전달하는 과정
유저플로우, 각 화면별 유즈 케이스, 반응형 레이아웃까지 함께 포함해야 함

5. 디자인 수정 및 검토

실제 구현 과정에서 피드백을 받고 수정
최종적으로 사용자 경험이 자연스럽게 이어지는지 점검

---

오늘의 실습 : Figma 컴포넌트

실제 툴을 다루며 몇 가지 중요한 기능을 배웠다.

✅ Create Component Set

여러 상태(Variants)를 묶어 하나의 컴포넌트 세트로 만들기

다양한 베리언트를 지정하여 컴포넌트를 쉽게 관리할 수 있다.

---

✅ Properties 설정

컴포넌트의 속성을 정의해, 인스턴스에서 바로 변경 가능
텍스트, 아이콘, 색상 등 오버라이드 가능

---

✅ Nested Instances

컴포넌트 안에 다른 컴포넌트를 넣는 개념
상위 구조에서 하위 요소를 유연하게 바꿀 수 있어 재사용성이 극대화됨

하위 요소의 토글 프로퍼티를 바로 사용할 수 있다.

스타벅스 클론을 실습으로 해보았다.
새로운 기능들을 알아가는게 넘 신기하고 재밌는 ㅎㅎ 😝

---

느낀 점
오늘 배운 컴포넌트 기능들을 사용하니 빠르게 클론할 수 있었다.
어제 만들어놓은 타이틀과 하단 네비도 재사용하니 속도가 빠르게 붙고
효율적으로 디자인을 할 수 있다는 점이 아주 좋았다 👍

---

과제

후기(Testimonial,User review) 페이지 디자인

User Review과 testimonial 차이는?

User Review (사용자 리뷰)
: 보통 앱스토어나 웹사이트에서 별점 ⭐️과 함께 남기는 리뷰
→ 개인적인 만족도나 불편 사항을 간단히 표현하는 피드백에 가깝다.

Testimonial (추천 후기)
: 브랜드나 제품이 공식적으로 홍보할 때 사용하는 긍정적인 사용자 리뷰
→ 일반 리뷰보다 구체적이고 스토리텔링이 들어가며, 회사 홈페이지나 캠페인에서 자주 활용됨.

즉, 리뷰는 자유롭게 쓰는 평점/피드백, 테스티모니얼은 브랜드가 보여주고 싶은 추천 이야기!

레퍼런스 탐색 및 구성요소 분석

테스티모니얼 레퍼런스를 핀터레스트에서 서치해보았다.
UI/UX 구성요소를 분석하고, 그 후 클론하였다.

• UI 요소
  • Title
  • Subtitle
  • review [유저 이름, 별점, 작성 리뷰 내용, 유저 프로필 사진]
  • 하단 구매 링크
• UX적 고객 분석
  • F1 경기 티켓 구매자
  • 별점 5점 만점 스타일 평가 포함됨.

후기 내용은 Google Gemini를 통해 만들어주었다.
배운 툴 틈틈히 써먹기 ㅎㅎ 😆

제작 과정 및 컴포넌트

크게 header, body, footer 부분으로 레이아웃을 나누었다.
header에는 title과 subtitle, body에는 review 박스 3개, footer는 구매 링크로 구성해주었다.

배운 기능을 더 공부해보고 싶어서 모두 컴포넌트로 제작하였다.

프로퍼티는 이름, 리뷰내용, 그리고 별 갯수를 Nested Instances 기능을 통해서 가져왔다.

완성 ~~

인스타그램 스토리에서 자주 봤던 것 같아서 해당 사이즈로 제작해주었다. 🤓
또 사용해보고 싶었던 글래스 효과도 사용해보았다 >_<

회고

오늘은 “디자인은 결국 문제를 해결하는 과정이다”라는 말을 다시 실감했다.
프로덕트 디자이너는 시장의 흐름을 읽고, 클라이언트와 협상하며, 개발자가 구현할 수 있는 형태로 디자인 해야한다 ‼️

그리고 툴 실습을 통해 느낀 건, Figma의 컴포넌트 시스템은 논리적 사고 훈련 같았다.
Nested Instances를 쓰며 마치 클래스 안에 클래스, 또 함수를 넣는 것 같았고,
디자인이 프로그래밍과 닮았다고 또 느꼈다. 🤩 << 요즘 계속 느낌 피그마 하면서,,,

둘 다 문제를 해결하는 과정이라서 그럴까? 🧐

#논리적으로생각하기!