으넹

프로덕트 디자이너 10일차 | 디자인 기초를 활용한 종합 결과물 제출

eunhye316 — Wed, 17 Sep 2025 18:17:55 +0900

1. 퍼스널 브랜딩 기획서로 파이어플라이, 익스프레스, 포토샵, 일러스트 중 원하는 툴을 사용하여 나만의 브랜딩

챗gpt

캔바

2. 심리학 법칙 분석 및 사례 조사

수업에서 배운 심리학 법칙 중 하나를 선택하여, 해당 법칙이 실제 디자인에 어떻게 적용되고 있는지 구체적인 사례를 조사하고 분석해 주세요.

선택한 심리학 법칙: 피크-엔드 법칙(Peak-End Rule)
구체적인 사례: 스타벅스
법칙 적용 설명:

1. 스타벅스에서의 피크(peak) 경험

개인화된 주문 경험→ “내가 존중받고 있다”는 감정이 생김.
→ 바리스타가 고객 이름을 불러주며 음료를 건네는 순간은 고객 입장에서 특별한 하이라이트.
매장 분위기와 감각 자극→ 반복적으로 “아, 스타벅스에 왔구나”라는 몰입감 제공.
→ 향(커피향), 배경음악, 매장 인테리어 조명 등이 고객의 감각을 강하게 자극.
시즌 한정 메뉴 출시
→ 펌킨 스파이스 라떼 같은 한정 메뉴는 일상 속에서 특별한 피크 경험을 만듦.

2. 스타벅스에서의 엔드(end) 경험

음료를 마시는 마지막 순간
→ 컵 디자인(계절별 컵, 크리스마스 한정컵 등)과 마무리까지 일관된 브랜드 경험 제공.
체류 마무리 경험
→ 퇴점 시 직원의 마지막 인사, 매장 내에서의 여운(잔잔한 음악, 따뜻한 공간).
디지털 경험의 끝
→ 별 적립(리워드) 알림 → “오늘 소비가 보상으로 연결된다”는 긍정적 마무리.

3. 사용자의 행동·감정 변화

행동 측면
- 좋은 피크·엔드 경험 때문에 “다시 방문”하는 습관 형성.
- 리워드 시스템과 맞물려 “재구매” 유도.
감정 측면
- 중간에 줄이 길거나 가격이 비싸도 → 피크(개인화 경험, 매장 분위기)와 엔드(리워드, 인사, 컵 디자인) 때문에 긍정적 경험으로 기억.
- 결국 전체 경험을 “좋았다”라고 요약 → 충성도 상승.
평가 및 특징:

1. 사용자 경험 개선 효과

긍정적 기억 강화

줄이 길고 가격이 비싸다는 중간 불편 요소가 있음에도,→ 마지막 경험(음료의 여운, 컵 디자인, 보상 알림) 덕분에
전체 경험을 긍정적으로 요약해서 기억.
→ 고객은 **하이라이트(이름 불러주는 순간, 향·공간의 몰입감)**와

재방문/재구매 행동 촉진

*리워드(별 적립)**가 엔드 경험과 연결 → "다시 와야겠다"는 동기 유발.
시즌 한정 메뉴 같은 피크 경험은 “이번에 꼭 경험해야 한다”는 FOMO(기회를 놓치기 싫어하는 심리)를 자극.

일상 → 특별한 경험으로 전환

그냥 “커피 한 잔 사는 일”을 브랜드적으로 포장 → "작은 럭셔리 경험"으로 인식 전환.
사용자가 일상 속 차별화된 감정 경험을 얻도록 UX 개선.

2. 유사 사례와의 비교

일반 카페

보통은 “커피 주문 → 음료 받음 → 마심”으로 끝.
피크 경험이 약하거나 엔드 경험이 단순해서, 전체 경험이 ‘무난했다’로 기억됨.
→ 스타벅스는 감각 자극(향·음악·공간) + 개인화된 전달 + 리워드 프로그램으로 경험을 극대화.

맥도날드 같은 QSR(패스트푸드)

피크: 메뉴 선택/빅맥 맛, End: 빠른 서빙
경험은 "효율성"에 집중, 하지만 "개인화된 따뜻함"은 부족.
→ 스타벅스는 효율성보다는 감정적 만족을 강조 → 경험이 “공유할 만한 이야기”로 남음.

3. 스타벅스만의 차별점

일상적인 소비에 감정적 하이라이트 삽입
→ 커피라는 단순 제품을 감성 브랜드 경험으로 변환.
리워드(보상) 시스템과 피크-엔드 법칙 결합
→ “마지막 순간 = 긍정적 보상”으로 기억 강화.
글로벌하게 동일한 경험 제공
→ 전 세계 어디서든 같은 향·인테리어·리추얼(이름 불러주기) → “일관된 긍정적 피크/엔드 경험” 제공.

프로덕트 디자이너 2일차 | AI 시대의 디자인 활용 1 - 프롬프트 과제

eunhye316 — Mon, 15 Sep 2025 10:26:54 +0900

나는 맛집가는걸좋아해 동네에 맛집 하나씩 가보는걸 좋아하는데 이거랑 관련해서 앱 이름을 지어줘
발자국: 내가 다녀온 맛집 발자국을 하나씩 남긴다는 의미로, 기록의 재미를 강조합니다.

1.'발자국'앱 핵심 기능 목표

맛집 기록의 즐거움: 사용자가 방문한 맛집의 경험(사진, 솔직한 후기, 평점 등)을 쉽게 기록하고, 한눈에 볼 수 있도록 시각화하여 '나만의 맛집 지도'를 만드는 재미를 제공합니다.
동네 탐험 동기 부여: 사용자가 현재 위치를 기반으로 주변의 숨겨진 맛집이나 새로운 맛집을 발견할 수 있도록 돕고, 동네 맛집을 하나씩 '정복'하는 듯한 성취감을 줄 수 있는 시스템을 도입합니다.

2.타겟 사용자
구분주요 타겟서브 타겟나이대20대 중반 ~ 30대 후반 (밀레니얼 및 Z세대)40대 초반 (맛집 탐방을 즐기는 직장인)
:친구들과의 모임, 데이트, 혹은 혼자서 동네를 탐험하는 것을 즐기는 MZ 세대입니다. SNS를 통해 맛집을 찾고, 자신의 경험을 시각적으로 기록하는 데 익숙합니다. 맛있는 음식을 먹는 것을 일상 속 소소한 행복으로 여기며, 새로운 장소를 발견하는 데 흥미가 많습니다.
직업/특징직장인, 자취생, 1인 가구, 커플프리랜서, 육아로 외식 빈도가 높은 주부
:여유를 가지고 맛집을 찾아다니는 젊은 직장인 또는 신혼부부/소규모 가족입니다. 광고성 정보보다는 주변 지인이나 신뢰할 수 있는 플랫폼의 후기를 통해 맛집을 선택하는 경향이 강합니다. 외식의 빈도는 잦지 않지만, 한번 갈 때 '실패하지 않는' 곳을 고르고 싶어 합니다.

주요 경쟁사: 망고플레이트, 다이닝코드, 네이버 플레이스
경쟁사 강점:
- 방대한 양의 식당 정보와 후기 데이터를 보유하고 있어, 검색 시 거의 모든 식당을 찾을 수 있습니다.
- 광범위한 사용자층을 기반으로 높은 인지도를 확보하고 있습니다.
- 결제, 예약, 배달 등 다양한 부가 서비스를 연동하여 편의성을 높였습니다.
경쟁사 약점 (== 발자국 앱의 기회):
- 정보의 양은 많지만, 광고성 후기나 신뢰성이 떨어지는 정보가 많아 사용자 피로도가 높습니다.
- 개인화된 취향을 반영하기보다는 평점, 방문자 수 등 정량적 데이터에 의존하여 추천합니다.
- 사용자 본인의 맛집 경험을 체계적으로 정리하고 기록하기보다는, 일회성 검색에 초점이 맞춰져 있습니다.

1. 기능적 요구 (Functional Requirements)

'발자국' 앱은 사용자가 맛집을 기록하고, 탐색하며, 관리하는 모든 과정이 매끄럽게 연결되도록 설계되어야 합니다.

메인 화면: 지도 기반 UI
- 앱을 열었을 때 현재 위치를 중심으로 지도가 나타나고, 내가 방문한 맛집들은 '발자국' 아이콘으로 표시됩니다.
- 지도를 확대/축소하거나 이동하면 주변 맛집 정보가 동적으로 나타나, 시각적으로 탐험하는 즐거움을 줍니다.
기록 기능: 최소한의 노력으로 최대한의 정보를
- 맛집 기록은 '빠르고, 쉽고, 재미있게' 이루어져야 합니다.
- 사진 업로드: 한두 장의 사진만으로도 기록을 시작할 수 있도록 간편한 인터페이스를 제공합니다.
- 평점과 한 줄 후기: 간단한 별점과 함께 짧은 코멘트만으로도 기록이 완성되도록 합니다.
- 태그: #분위기좋은, #가성비, #혼밥 등 미리 정의된 해시태그를 제공하여 기록의 통일성을 높입니다.
마이 페이지: 나만의 맛집 아카이브
- 사용자의 모든 발자국이 시간 순으로 정리된 '타임라인' 뷰를 제공합니다.
- 지도에서 발자국을 누르면 해당 맛집에 대한 기록과 정보가 깔끔하게 나타나도록 구성합니다.
- '찜하기' 기능을 통해 가고 싶은 맛집 리스트를 따로 관리할 수 있어야 합니다.
탐색 기능: 개인화된 정보 필터링
- 맛집을 검색할 때 지도, 리스트, 필터링 기능을 모두 제공하여 사용자가 원하는 방식으로 탐색할 수 있게 합니다.
- 사용자의 기록 데이터(평점, 방문 태그 등)를 기반으로 **'당신이 좋아할 만한 맛집'**을 추천하여 개인화된 경험을 제공합니다.

'발자국' 앱은 사용자가 맛집을 기록하고, 탐색하며, 관리하는 모든 과정이 매끄럽게 연결되도록 설계되어야 합니다.

메인 화면: 지도 기반 UI
- 앱을 열었을 때 현재 위치를 중심으로 지도가 나타나고, 내가 방문한 맛집들은 '발자국' 아이콘으로 표시됩니다.
- 지도를 확대/축소하거나 이동하면 주변 맛집 정보가 동적으로 나타나, 시각적으로 탐험하는 즐거움을 줍니다.
기록 기능: 최소한의 노력으로 최대한의 정보를
- 맛집 기록은 '빠르고, 쉽고, 재미있게' 이루어져야 합니다.
- 사진 업로드: 한두 장의 사진만으로도 기록을 시작할 수 있도록 간편한 인터페이스를 제공합니다.
- 평점과 한 줄 후기: 간단한 별점과 함께 짧은 코멘트만으로도 기록이 완성되도록 합니다.
- 태그: #분위기좋은, #가성비, #혼밥 등 미리 정의된 해시태그를 제공하여 기록의 통일성을 높입니다.
마이 페이지: 나만의 맛집 아카이브
- 사용자의 모든 발자국이 시간 순으로 정리된 '타임라인' 뷰를 제공합니다.
- 지도에서 발자국을 누르면 해당 맛집에 대한 기록과 정보가 깔끔하게 나타나도록 구성합니다.
- '찜하기' 기능을 통해 가고 싶은 맛집 리스트를 따로 관리할 수 있어야 합니다.
탐색 기능: 개인화된 정보 필터링
- 맛집을 검색할 때 지도, 리스트, 필터링 기능을 모두 제공하여 사용자가 원하는 방식으로 탐색할 수 있게 합니다.
- 사용자의 기록 데이터(평점, 방문 태그 등)를 기반으로 **'당신이 좋아할 만한 맛집'**을 추천하여 개인화된 경험을 제공합니다.

2. 비주얼 디자인 (Visual Design)

'발자국' 앱의 디자인은 아날로그적인 따뜻함과 현대적인 깔끔함을 동시에 담아 사용자에게 '나만의 일기장' 같은 느낌을 주어야 합니다.
사진과 레이아웃: 사용자 콘텐츠가 주인공

사용자가 직접 올린 음식 사진이 앱 디자인의 핵심입니다.
불필요한 장식을 최소화하고, 사진이 돋보일 수 있는 여백의 미를 강조하여 사용자의 기록 자체가 훌륭한 콘텐츠가 되도록 구성합니다.

레퍼런스 연습

eunhye316 — Sat, 6 Sep 2025 15:06:25 +0900

주말에 레퍼런스 연습해보기ㅎㅎ

프로덕트 디자이너 2일차 | 색상, 타이포그래피, 색상환, 컬러팔레트

eunhye316 — Fri, 5 Sep 2025 16:18:27 +0900

색상의 기본개념과 원리

색의 3요소 (색상Hue, 명도Value, 채도Saturation)

색상
올해의 컬러 트랜드 같은건 팬톤컬러에서 영향을 받음
올해는 모카무스~
*pantone사이트 참고 (매년 컬러 트랜드 알 수 있음)
명도
색의 밝기/ 같은색이어도 밝으면 눈에 띄고, 어두우면 차분한느낌
명도활용하면 글씨 가독성 좋게 할 수 있음, 어떤 버튼일 때 명도로 더 눈에띄게 할 수 있음
명도에 따라 분위기가 달라진다
채도
얼마나 맑아?얼마나쨍해?느낌
원색에 가까우면 채도가 높음
채도가 높으면 색이 선명함
낮은채도는 회색끼가 돈다.
ex)유튜브 썸네일같은거, 강조하고자 할때

타이포그래피 기초

글자를 배치하고 디자인하는 기술과 예술

폰트,글자 크기, 간격, 정렬, 색상 등을 조절하여 가독성과 시각적인 완성도를 높인다.

같은 "안녕하세요"도 심리적, 시각적 완성도가 다르게 표현된다.

*스타벅스 가서 글자를 자세히 보기 / 저 메뉴판 바꿔주고싶다~ 마음으로 보기ㅎㅎ

명조체/ 셰리프serif - 장식이 있음(전통적,신뢰적느낌)

고딕체/ 산셰리프Sans-serif - 장식이 없음(현대적,직관적느낌)

글자크기와 계층구조

본문, 캡션 등 글자의 크기를 조절하여 중요한 정보에 시선을 유도

제목은 크고 굵게, 본문은 작고 가독성 있게

강조하고싶은 곳, 시선이 꽂히게 하고싶은 것에 강조하며 계층구조

자간 (Letter Spacing)

글자 사이의 간격/ 가독성향상

ex)스타벅스 메뉴판 참고

행간 (Line Height)

행과 다음행 사이의 간격

ex)책마다 행간 다르게 설정되어 있음

색상&대비

텍스트와 배경 간의 시각적 구분을 명확하게 하여 가독성 높임

중요한 정보를 강조

정보를 더 쉽게 이해하고 빠르게 읽을 수 있다.

타이포그래피 두분야

기능정 타이포그래피, 가독성>미적기능, 내용전달, 읽기편하게

실험적 타이포그래피, 가독성<미적기능 , 글자를 재료로 삼아 미적으로 사용함 ex) 광고, 포스터

색상환 color wheel

색상 간의 수학적 관계를 기반으로 작동함

hex 코드 : 색상을 16진수로 인식함 (예:#FF5733)

RGB 빨강, 초록, 파랑 (예: 255,0,0)
HSL 색조,채도,명도

컬러팔레트

1. https://www.khroma.co/generator

50개 색상을 클릭하면 자동으로 컬러조합 해줌

원하는 색상에 마우스를 갖다대고 오른쪽 위에 정보표시 클릭하면 HEX코드랑 RGB코드가 나온다

신기하다!

개인적으로 Downy 색상 예쁘다 ㅎㅎ

2. 컬리나 다른 사이트에서 폰트궁금할 때 크롬에서 fn+F12(개발자코드) 에서 맨앞 화살표 누르면 어떤 폰트 썼는지 알 수 있음

3. 폰트가져오기 : 눈누 사이트에서 다운 가능

1.원하는 폰트 검색 후 다운로드 페이지로 이동 클릭

2. 글꼴 다운로드 클릭

3. 다운로드-public-static-가져온 폰트 전부 선택 후 마우스 우클릭 -열기 - 설치하면 다운로드 완료

둘째날 과제1. 나만의 팔레트(무드보드) 만들기

1. 핀터레스트에 원하는 이미지 검색

2. 어도비 가서 테마추출 - 핀터레스트에서 가져온 이미지 가져오기 https://color.adobe.com/ko/

3. 그럼 비슷한 무드의 색상이 추출됨

과제2. 컬러 화면 제작하기 (타이포만)

마켓컬리 홈페이지에서 캡쳐해서 따라만들어보기

과제3. 자유롭게 타이포화면 만들어보기

1. 챗지피티한테 질문해서 글 소재 얻기

2. 핀터레스트에 '편집디자인 레이아웃'검색해서 레퍼런스 하고 싶은 디자인 고르기

3. 피그마로 나만의 타이포화면 만들기

둘째날 과제1. 나만의 팔레트(무드보드) 만들기

과제2. 컬러 화면 제작하기 (타이포만)

과제3. 자유롭게 타이포화면 만들어보기

프로덕트 디자이너 1일차 | 디자인이란?

eunhye316 — Thu, 4 Sep 2025 18:11:06 +0900

●데이터를 참고하면 더 나은 디자인을 결정할 수 있다.

●아무리 예뻐도, 테스트를 했을 때 좋은 데이터를 보여주지 않으면 탈락.

ex) A는 깔끔하고 정돈되어있음, B는 글씨도크고 한눈에 볼 수 있음

테스킹했을 때 사용자들이 B를 더 이탈하지 않고 좋아하면 B를 채택

●UX/UI디자이너는 사용자 행동을 이해하는게 중요한데 데이터 기반으로 이해하는 것이 중요하다.

●또한 디자니어는 팀워크가 필수! 팀웤이 좋을수록 창조적이고 더 좋은 디자인을 만들어낼 수 있다.
* 근거는 데이터로, 중요한건 팀웤!

디자인이란?

디자인은 단순히 예쁜것, 꾸미는것, 장식이아니라 겪는 문제를 발견하고 해결하는 것

단순하게 예쁜 결과물이 아니라 문제를 해결하는 과정이 디자인으로 나온 것

디자인 = 문제를 해결하는 과정

분명한 목적,의도를 가지고 설계하는것!

의도적으로 계획해서 하는 행위

UX/UI디자이너로서 항상 사용자 입장을 생각하기! 신념갖기 (흔들리지마~ㅋㅋ)

스스로의 철학 가지기! 롱런하기 위해서ㅎㅎ

디자인 기본 요소: 색상/균형/강조/비례

색상

가장먼저 눈에 들어오는게 색상

색상은 예쁨꾸밈이 아니라 사용자의 감정을 자극함

ex) 빨강 - 에너지, 열정, 중요/ 파랑 - 안정감/ 초록 - 성공, 노랑 - 안정감,신뢰감

색상은 조화가 잘 어우러져야함

* 같은색이어도 신뢰감 만족도가 다르기때문에 사용자가 어떤 감정을 느끼기를 원하는지를 고려해서 만들어야 함

균형

화면안에 요소들이 어떻게 배치되어 있는지에 따라 시각적 안정감을 줄 수있음

*균형은 시각적인 무게 개념을 이해하는 것이 중요

대칭이라고 비대칭이라고 다 좋고 안좋은게 아님

강조

무엇을 집중해서 봐야하는지 보여주는 것

우선순위를 정해서~

눈에 띄게만 하는게 아니라 사용자가 어떤 경험, 행동을 했으면 좋겠는지 안내하는 것

다른 사이즈, 색상 등의 방법이 있음

자연스럽게 시선이 가는 곳에 위치시키는 것도 강조임

비례

서로 조화를 이루는 것

시각적으로 안정적으로 느껴지고, 자연스럽게 받아들임

비례가 맞지않으면 산만한 느낌

UI와 UX차이

UI 우리가 직접 보고 만지는 화면 요소들 (눈으로확인, 손으로 조작하는 것들)

단순하게 예쁘게 만드는게 아니라 사용자가 쉽고 직관적으로 행동하게끔 안내하는 것 (폰트, 이미지 등..)

UX 우리가 사용할 때 느끼는 경험 전체

얼마나 쉽고 만족스럽게 사용자가 썼는지, 문제를 발견하고 해결하고 설계하는 과정

과제1. Ted 강연영상, 시청 후 리뷰 포스팅

Ted 강연영상을 시청한 후 느낀점을 리뷰로 써보아요.

느낀점: 디자이너는 고객이 원하는 것을 끊임없이 찾아내고, 테스트 하는 것! 디자인으로 생각하지 못한 사소한 것이라도, 고객의 입장에서는 다를 수 있다. 데이터를 기반으로 다양한 고객에 니즈에 대해 알아가고 문제를 해결하는 능력을 키우자

2. 디자인 원리 적용 분석

2-1) UX 해결이 좋은 사례 찾기

신호등을 항상 막연하게만 기다렸는데 시간이 표시되서 굉장히 편해졌습니다. 그림과 숫자가 초록색으로 통일되서 시각적으로 안정감이 느껴지고, 숫자 크기가 커서 멀리서도 눈에 튑니다.

2-2) 문제를 찾아주세요 (1번 문제와 다른)

이 정수기는 우리가 알아보기 쉬운 아이콘들을 사용했습니다.

예를들어 김이 모락모락 나는 듯한 아이콘은 온수, 물방울 모양은 정수, 차가운 얼음은 냉수를 나타내는 등

직관적인 아이콘들로 사용했습니다. 혹여나 아이콘을 이해하지 못하더라도 아래 글씨를 두어 어떤 아이콘이 어떤 기능을 하는지 알기 쉽습니다.

또한 양쪽으로 아이콘을 배치하고 가운데 원을 둠으로써 대칭이 맞는 안정적인 디자인 느낌입니다.

전체적으로 화이트 톤에 불필요한 버튼 없이 심플하고 깔끔한 느낌입니다.

문제점: 한컵일 때, 두컵일 때 물의 용량이 어느정도인지 가늠할 수가 없습니다. 컵의 크기가 다 제각각인데 얼만큼의 물이 나오는지 알 수 있으면 좋겠습니다.

2-3) 2번에서 찾은 문제를 어떻게 개선할지 개선할 점을 찾고 무엇인지 글로 작성해 봅시다.

아이콘 위 또는 글씨 하단에 한컵, 두컵일 때 어느정도 용량인지 적어놓으면 좋겠습니다.

autolayout 채우기, 허그, 고정 속성

eunhye316 — Tue, 2 Sep 2025 16:39:49 +0900

1.프레임을 만들고 텍스트 추가해서 쓰기

2.하나 복사해서 이번엔 더 길게 쓰기

3.아래에 버튼을 하나 만든다 (버튼에 자동 레이아웃과 채우기로 색 추가/ 테두리 곡률, 수평패딩, 수직패딩 설정)
4.전체 프레임에 자동 레이아웃을 추가한다 (shifte+a)

→ 이제 텍스트는 자동 레이아웃을 따라 움직인다. 방향 변경도 가능(세로 또는 가로 등)
이제 텍스트를 선택하면 가로 크기 조정, 세로 크기 조정 등을 할 수 있음

프레임 크기를 가로로 조정하면 프레임에 따라 동작하지 않고 콘텐츠의 너비가 고정된다.

→텍스트를 반응형으로 만들어보자!

속성을 고정에서 컨테이너 채우기(Fill container)로 변경하고 프레임 크기를 조정하면 텍스트가 반응한다
(프레임 크기 조정하는 대로 움직임)

→버튼을 반응형으로 만들어보자!

버튼을 선택하고 컨테이너 채우기로 변경하고 텍스트를 중앙에 배치한다.(Alignment에서 중앙으로 눌러주기)

프레임의 크기를 가로로 조정하면 이 세 요소가 반응하여 움직임

수직 방향도 적용하기

버튼을 선택하고 허그 콘텐츠에서 컨테이너 채우기로 변경, 나머지 텍스트들도 선택해서 허그 콘텐츠에서 컨테이너 채우기로 변경한다.

프레임을 선택하고 크기를 조정하면 요소가 반응함!

버튼을 선택하고 해당 속성을 컨테이너 채우기에서 고정 높이로 변경한다(Fixed height)

그럼 텍스트, 텍스트, 버튼 세가지 요소가 반응한다.

자동 레이아웃 활용하기 (버튼생성, 텍스트 기준선 정렬, 아이콘)

eunhye316 — Tue, 2 Sep 2025 15:15:32 +0900

● 자동 레이아웃을 활용하여 버튼 생성 방법

자동 레이아웃 단축키 Shifte + A

Option키 누른채 양쪽 패딩누르고 원하는 값 입력하면 양쪽 패딩값이 동일하게 된다.

여러 요소에 자동 레이아웃을 지정하면 순차적으로 정렬된다.

강의에서 "pacing mode"라는 이름의 버튼을 찾으라는데 아무리 찾아도 없어서 알아보니,

"pacing mode" 버튼은 사라지고 Gap 필드 자체가 모드 전환 기능을 가지게 되었다고 한다.

기본적으로 숫자가 들어가 있음 → Packed 상태
숫자 대신 Auto를 입력 → Space Between 상태

packed 모드는 메인 프레임에 따라 동작하지 않는다.

Space Between 모드는 레이아웃 프레임에 따라 동작한다.

50의 수직패딩을 적용했을 때
Excluded일 경우 이 50값은 모양의 가장자리에서 스트로크의 외부 가장자리까지 적용된다.

이를 원하지 않으면 제외에서 포함으로 변경하면 됨

Included를 누르면 모양의 가장자리에서 스트로크의 내부 가장자리까지 계산된다.

● 텍스트 하단 또는 자동 레이아웃을 기준으로 아이콘을 정렬하는 방법

Figma에서 상단의 Resources (Shift + I) 패널을 연다.
검색창에 Feather Icons를 입력

프레임 내에서 아이콘을 이동하면 자동으로 아이콘이 배치된다. (Home 텍스트 옆에 홈 아이콘이 자동으로 배치됨)

→ 그이유는 자동 레이아웃 프레임이 적용했고 기본적으로 가로 방향으로 선택되어 있기 때문!

확대 해 보면 텍스트와 아이콘이 제대로 정렬되지 않았다는 것을 알게 된다.

→정렬하기 위해선 자동 레이아웃 프레임 선택 - 오른쪽에 중앙을 눌러주면 된다.

기준선을 중심으로 정렬하기는 Align text baseline에 v표시를 클릭

Effects 기능 살펴보기

eunhye316 — Mon, 1 Sep 2025 13:35:28 +0900

레이어블러

1. 프레임 생성

2. 프레임 위에 동일한 직사각형을 만든다. (덮어준다)

3. 직사각형 선택 후 마우스 우클릭 Plugins - Saved pligins - unsplash 클릭해서 이미지를 가져온다.

4. Effects 에서 Layer blur로 변경해서 블러 효과를 준다.

(이 레이어 블러는 이미지를 넣은 직사각형에 적용된다./ 직사각형이 아닌 프레임에 적용될 경우 나중에 텍스트가 흐리게 보임)

5. 그 위에 텍스트 도구를 사용하여 문구를 입력한다.

그럼 뒤에는 블러처리가 되고 텍스트는 선명한 이미지 완성!

근데 왜 프레임 안에 이미지를 직접 배치하지 않았을까?

왜 직사각형을 가져와서 효과를 적용했을까?

프레임에 블러를 적용할 경우 텍스트로 레이어도 흐려지기 때문

주의할점

1. 꼭 프레임 위에 직사각형 올릴 것!

2. 직사각형 위에 이미지 올릴 것!

3. 이미지 블러처리할 때 이미지만 클릭하고 블러처리 하기! (프레임,이미지 둘다 선택하고 블러처리 하면 나중에 텍스트도 블러처리 됨)

레이어 흐림으로 그라디언트 만들어보기

1. 프레임을 하나 만들고 원을 5개 복제해서 색상을 다르게 해준다.

원과 프레임을 선택 후 마스크를 지운다 (우측 상단 use as mask 클릭)

*이때 원들이 프레임 안에 있으면 안됨! 마스해도 안먹힘; 프레임이랑 원들이 분리되어있어야 된다!

shift 키를 누른 채 원을 하나하나 선택 후 Effecxts에서 Layer blur 클릭

레이어 블러 효과를 높여주면 오로라 그라데이션 완성

레이어 흐림 기능을 사용하면 최상의 그라디언트를 쉽게 만들 수 있다.

배경흐림효과

1. 프레임 생성 후 마우스 우클릭 - Plugins - Saved pligins - unsplash에서 이미지를 가져온다.

2. 프레임 위에 직사각형을 반만 채우고 - fill을 흰색 - 불투명도 20%

3.백그라운드 블러로 변경후 블러 값을 높여주면 블러효과를 줄 수 있음

근데 왜 프레임에 바로 백그라운드를 적용하지 않았을까?

왜 직사각형을 가져와서 효과를 적용했을까?

중요한점!
백그라운드 블럭은 프레임 위에서 직접적으로 작용하지 않는다

프레임이 백그라운드를 설정할 경우 아래사진처럼 이미지는 흐림처리 되지 않는다.

백그라운드 블러가 작동하는 방식 때문

백그라운드 블러는 단지 배경을 흐림처리할 뿐, 블러를 위해서는 별도의 배경이 필요함

배경 자체에는 효과를 적용할 수 없음

색상팔레트

eunhye316 — Mon, 1 Sep 2025 12:00:54 +0900

홈 - templates and tools - 검색창에 color cpmpass 검색 후 Try in 클릭

그럼 플러그인에 저장이 되어서 가져올 수 있음

프레임을 하나 만들고 원하는 색상을 fill로 채워준다.

헥스 코드를 복사해서 Active color칸에 붙여넣기 한 후 Update 클릭

그럼 기본 색상이 있고 그 아래에 강도가 있는 색상, 오른쪽은 색상 조화가 있다.

틴트팔레트 내보내기 등 다양한 색상 조화를 내보낼 수 있다.

기본색상을 변경해서 만들 수 있다.

기본 색상이 핑크이고 핑크색조들과 핑크 세트 등이 있다.

쉐이드와 틴트를 같이 배치할 수 있다. 모서리를 클릭한 채로 모양을 회전시켜 배치한다.

혼합색상팔레트도 만들 수 있다 (핑크팔레트 맨 위에 사진)

→ 이 옵션은 현재 기본색상과 이전 기본 색상을 혼합한다. (현재의 핑크컬러와 이전의 파랑컬러가 혼합되어 있음을 볼 수 있다.)

기본 색상을 바꾸어 업데이트 후 색상 팔레트를 클릭하면 두가지 색상이 혼합되어 있는 것을 볼 수 있다. (현재의 그린컬러와 이전의 핑크 컬러)

피그마 프로토타이핑

eunhye316 — Fri, 29 Aug 2025 02:29:53 +0900

우측 Prototyoe - Flow starting point 클릭 하면 Flow1번이 된다.

Flow1번은 가정 첫번째로 시작되는 화면을 설정해 주는 것

프로토모드로 들어가게 되면 오브젝트 또는 프레임을 선택하면 원이 생김

그 원을 잡아끌면 원하는 위치로 옮길 수 있고 인터렉션이 연결됨

토글 팝업창에 사용자의 행동과 인터랙션 종류를 정해주면 특정 애니메이션이 연출됨

중간에 화면 또는 인터랙션이 끊어지게 되면 Flow2번,3번,4번...계속 늘어나게 됨

Flow1번 위치는 원하는 곳으로 옮겨질 수 있음

인터랙션: 어떤 버튼을 사용자가 누르면 그로인해 나타나는 작은 효과 상호작용 현상

on tap 무언가를 눌렀다가 떼는 행위

on drag 마우스 커서는 잡고 끌거나 손가락을 잡고 끄는 행위(스와이프)

while hovering 마우스 커서를 갖다대는 행위

while pressig 은 마우스 커서를 갖다대고 쭉누르고 있는 행위

key/gamepad 특정 키를 누르거나 게임 패드를 연결시키면 어떤 인터렉션이 나타나는 가정을 할 수 있음

mouse enter 마우스가 안쪽으로 들어오거나

mouse leave 마우스가 떠났을 때

touch down 터치를 아래쪽으로 하거나

touch up 터치를 위쪽으로 했을 때

After delay 사용자가 어떤 행동을 하지 않아도 특정한 시간이 지나면 인터렉션이 실행됨

사용자 행동이 정해짐

움직임을 정할 수 있음

Navigate to 가장 기본적인 움직임 1번화면에서 2번화면으로 이동

open overlay 네비게이션, 팝업창이 열리는 것, 추가값이 생김(가운데 열리게 할건지, 왼쪽, 밑, 위, 오른쪽에서 열리게 할건지 선택)

open overlay-> 하단에 Background 팝업창 바깥면을 어둡게 만들어줌 (딤 처리, 딤드 처리)

close when clicking outside 팝업창 바깥 면을 누르면 자동으로 닫히는 애니메이션

close overlay는 open overlay를 걸어 낸 팝업창에 클로즈 버튼이 있으면 open overlay와 반대대는 옵션이 적용됨 (서로 열고 닫는 옵션)

swap overlay 2개의 화면을 서로 연결되면서 바뀌는 동작 연결된 동작을 할 때 (마우스 커서를 갖다대면 불이 들어온다거나, 화면에 가려져 있는 슬라이드 처리된 디자인을 드래그 하면 쪼르르 펼쳐질 때)

Back 뒤로 가기

scroll to 프레임 특정 좌푯값으로 이동하고 싶을 때 (다른화면으로 넘어가지 않고, 디자인 해놓은 프레임 안에서 특정 위치로 바로 이동시키고자 할 때 (지도에서 현재 위치 검색하기 기능, 긴 페이지에서 가장 밑으로 내려왔을 때 탑 버튼 누르면 가장 위로 올라가는 것, 링크를 여는 동작도 변할 수 있음)

2개의 화면이 펼쳐진 상태를 준비 한 후 디자인을 한 다음 복사한다.

회색 버튼을 모두 드래그 한 후 우측 다자인 패널에서 정렬을 포개주기 (왼쪽에서 5번째꺼 클릭)

드래그 해서 위치 통일시켜 주기

레이어 순서를 바꿔서 빨간 버튼이 위로 나오게 한다.

포갠 회색버튼을 전부 선택 후 혹시라도 보이지 않게끔 우측 Layer에서 투명도를 0% 낮춘다.

빨간 버튼을 프로토타입으로 설정하고 on click, navigate to, smart animate로 설정한다.

instant 순간 이동

dissolve 약간의 시간차를 두고 움직임, 서서히 움직이는 느낌

smart animate 1번 화면에서 2번 화면으로 연결되며 움직임

*dissolve와의 차이는 dissolve는 오버레이 처리된 느낌, smart animate는 연결되는 과정들이 연결되며 바뀜

음 약간 헷갈린다.!

그 밑에있는 것들은 슬라이드 액션!

move in은 A라는 요소가 있으면 B라는 요소가 등장하면서 덮이는 것 a는 가만히 있고 b가 덮음

move out는 뒤에있는 요소 가만히 있고 바깥에 있는 것이 없어짐
push는 기존의 것을 밀어내면서 등장

slide in 기존의 것이 없어지면서 등장 (move는 기존 것이 그대로 고정되어 덮이는 동작, slide는 기존 게 오버레이 처리되면서 없어지면서 등장

slide out 기존의 것이 슬라이드 처리돼서 기존의 것이 등장하는 개념으로 나타남

오른쪽것도 smart animate로 연결

(왼쪽 재생 버튼을 누르면 볼 수 있음) 버튼이 촤르르 펼쳐지고 촤르르 접혀진 동작이 완성된다.

보이지 않는 곳까지 디자인이 다 되어있어야 한다!

우측 Layout에 Clip content가 체크되어 있지 않으면 프레임 안에 있지만 바깥에 숨겨저 있는 것들 까지 같이 보인다.

Clip content가 체크되어 있으면 가려지게 된다.

commend+g 눌러서 그룹핑 해준다.

복제 후 2개의 화면을 만들어서 첫번째 화면은 첫 번째 지점에서, 두번째 화면은 마지막 지점을 연출해준다

둘다 on drag, swap overlay, smart animate로 설정

*인터랙션은 오브젝트에서 프레임으로 연결 가능

프레임에서 프레임으로만 연결 가능

프레임에서 특정 오브젝트로는 절대 연결될 수 없음

각자 프레임에 연결해주기

재생버튼 누르면 옆으로 움직인다.