사람에 대한 이해와 공감
더 좋은 경험을 설계하는 디자인 팀의 핵심 역할이다

디자인은 예쁘게 꾸미는 기술이 아니라, 사용자가 더 편하게 목표를 달성할 수 있도록 돕는 과정이라는 걸 다시 한번 느꼈다. ‼️

---

강의

👤 페르소나(Persona)

: 서비스를 대표하는 사용자의 ‘구체적인 얼굴’
즉, 실제 사용자 조사 데이터를 기반으로 만든 가상의 한 사람이다.

공통 행동 패턴과 니즈를 하나의 인물로 압축해 표현
"우리 서비스는 이 사람을 위해 만든다"를 명확하게 하기 위한 도구

잘 만든 페르소나의 특징

실제 데이터 기반 : 막연한 추측 X, 실제 리서치 데이터 기반
현실적인 고민과 목표 : 완벽한 인물이 아니라, 갈등과 제한이 있는 사용자
의사결정에 직접 도움 : "이 기능이 페르소나에게 의미 있나?" 판단 가능
1~2명만 압축 : 5명, 6명… 많아질수록 방향 흐려짐. 핵심만 남기기!

주의 ‼️
귀여운 캐릭터 X
불필요하게 다양한 연령층 X

즉, 핵심 사용자 1~2명에 집중하는 것이 중요하다

페르소나 도출 프로세스

1️⃣ 정량조사 → 설문(SURVEY)
2️⃣ 정성조사 → 인터뷰(IDI)
3️⃣ 어피니티 다이어그램 → 패턴 분석 및 묶기

양적 데이터로 방향 확인 → 인터뷰로 깊이 이해 → 패턴 묶어서 페르소나 생성

---

IA — Information Architecture (정보구조 설계)

: 서비스의 구조를 한눈에 볼 수 있도록 시각화하는 과정
사용자가 길을 잃지 않도록 정보가 어떻게 흐르는지 정리하는 설계도 역할이다.

구성 방식

• Main Category — 큰 메뉴 (홈, 발견, 스토어 등)
• Sub Category — 메인에서 바로 보이는 첫 구조
• Depth — 더 깊이 들어가는 상세 페이지 흐름
• 공통영역 — 검색, 알림, 마이페이지 같은 곳

👉 IA를 그려야 유저 플로우가 명확해지고, ‘어디에서 사용자가 이탈하는지’ 진단 가능해짐.

---

포트폴리오 기획 꿀팁

개선 프로젝트 구성 시 볼륨감을 설계하라

ex)
작은 볼륨 : 버튼 가시성 강화, 시각적 위계 잡기
중간 볼륨 : 복잡한 뎁스 구조 단순화
큰 볼륨 : 새로운 기능 제안 / 사용자 여정 재설계

=> AS-IS / TO-BE 구조로 보여주면 전달력 3배 상승
ㄴ 현재 상태(As is)와 이상적인 미래 상태(To be)를 비교하여 문제점을 찾고 해결책을 모색하는 분석 기법

---

실습

오늘은 피그마 Variable 기능에 대해 배워보았다.

Variable (디자인 시스템 변수화)

: 추상적인 감각 → 수치화된 기준으로 전환하는 과정

여백, 컬러, 라운드 값 등을 다 변수로 관리한다.
한 번 정의하면 전체 수정이 쉬워진다. Style 지정과 비슷하다.
(디자인 시스템의 일부)

변수를 지정하면, Light/Dark 모드 간 변환이 쉬워진다.
굳이 값을 변경해주지 않아도 됨!
어피어런스에서 베리어블-Light/Dark 로 설정해주면 된다.

---

버튼 실습을 바탕으로 로빈훗 어플을 클론하여 Light/Dark 모드를 전환해보았다.

로빈후드는 Light/Dark 모드 간 큰 색상 차이는 없었다.

변수들로 색을 지정하고, 어피어런스에서 베리어블 설정하기!

결과 화면이다.

오호호 아주 신세계였당
한 번 베리어블을 통해 디자인 시스템을 구축해 놓으면
하나하나 수정하지 않아도 라이트 다크 모드 뚝딱임!

---

과제

오늘은 21일차라서, 최종과제가 부여되었다 +_+
지금까지 배운 모든 피그마 기능 총출동하여 앱서비스 선정 후 클론 제작하기!

레퍼런스 선정

핀터레스트, 윗, 모빈 등 다양한 UI 사이트를 통해 서치해보았다!
원래 토스를 하고 싶었는데, 최근 업데이트가 된 토스가 없었다 ㅠㅠ
그래서 모빈에서 랜딩페이지~사용페이지까지 다양하게 나와져 있는 Cal AI 어플을 선정해주었다

Variable 설정

가장 먼저 오늘 배운 베리어블을 통해 색상을 설정해주었다.

클론과정 및 만든 컴포넌트와 벡터들

복잡한 벡터가 아니라면 도형툴도 복습해볼 겸 직접 제작해보았다!

그리드 기능을 통해 마진값(24px)로 통일하고, 스마트 레이아웃으로 패딩을 넣는 방식으로 구현해주었다.
재사용할 헤더나 상태(기본/선택됨) 지정이 필요한 것도 컴포넌트로 제작해보았다.

기본 레이아웃은 헤더/바디/하단 버튼으로 구성해주었다.
레이어 이름 하나하나 다 정리햇지롱 ~,~

레퍼런스와 클론 비교샷

최종 완성 클론

내가 html이랑 css 하면서 스타일 포지션 지정만 하면 애들이 다 날라다니고... 화면이 망가져서 왜그런가 의문을 가진 적이 많았다. 당시 강의를 들으며 배운 것은 div를 통해 굉장히 많이 섹션을 나눠 준다는 것이었다. 또 그 섹션은 내가 만들고자 하는 화면에 꽉차게 감싸주는 방식이었다.

그걸 토대로 스마트 레이아웃을 여러겹 사용하여, 가장 큰 스마트레이아웃은 너비를 화면 크기로 맞추고, 패딩을 24px로 고정해주어 요소들이 둥둥 떠다니지 않도록 지정해주는 방식으로 제작하였다!

기본적인 도형툴부터 베리어블까지 피그마의 정말 다양한 기능을 배웠고, 또 그걸 사용하여 클론 디자인을 한 과제였다. 피그마에 코딩적인 기능이 많아서, 정말 UI를 디자인 하는데 친절한 어플인 것 같다고 느꼈다. 👍

또 지금까지 열심히 피그마 기능을 배운 나~~ 너무 뿌듯했다 ㅎㅎ

---

회고

정말 성장한 내 모습을 오늘 과제를 하면서 느꼈다. (그리고 내가 아주 손이 느리다는 것두...🥹)
피그마가 뭐야.. 포토샵으로 친숙한 디자인 툴만 겨우 깔짝여봤던 내가
다양한 기능들을 사용하여 얌쥐게 클론 디자인 완성한 게 정말 성취감이 들었다 😝
프로덕트 디자이너로써 성장하고 잇구나~~

#자라나라그마그마