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

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)

배송 조회 실시간 배송 위치 확인 클릭 시 바로 해당 택배사 페이지로 이동
주문 상세보기 전체 주문 정보(결제, 배송지 등) 확인 모달 창 or 상세 페이지로 이동
재주문 동일 상품을 다시 주문 한 번의 터치로 장바구니에 추가
리뷰 작성 상품에 대한 리뷰 및 별점 작성 리뷰 작성 유도 메시지 및 보상 프로그램 제공
반품/교환 신청 반품/교환 프로세스 진행 가이드 제공 및 사유 선택 옵션

✅ 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 강한 브랜드 컬러 (#FF8000 - 오렌지) 구매, 장바구니, 신청 버튼
Secondary CTA 중간 강조 (#808080 - 회색) 보조 기능, 취소 버튼
Disabled CTA 약한 대비 (#D3D3D3 - 연한 회색) 비활성화 상태

나쁜 예시

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

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

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

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

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

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


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

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

상품 상세 페이지 "구매하기" 또는 "장바구니 추가" 버튼을 하단 고정
회원가입/로그인 화면 "회원가입" 버튼을 주요 버튼으로 강조
쿠팡 주문내역 "배송 조회", "재주문", "리뷰 작성" 버튼을 주문 카드 내 포함
팝업(모달) 창 "확인"과 "취소" 버튼을 명확하게 구분

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

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

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

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

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

기본(Default) 클릭 전 기본 상태 배경색 유지, 적절한 명암 대비 적용
호버(Hover) 마우스 오버 시 색상 변경 또는 그림자 추가
클릭(Active) 클릭 순간 버튼이 눌린 느낌을 주도록 효과 적용
비활성(Disabled) 조건이 충족되지 않아 클릭 불가 흐린 색상 처리, 클릭 불가 상태

나쁜 예시

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

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

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

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

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

배송 조회 실시간 배송 상태 확인 클릭 시 바로 택배사 페이지로 연결
재주문 동일한 상품을 다시 주문 원클릭으로 장바구니 추가
리뷰 작성 구매한 상품에 대한 리뷰 작성 시각적 강조 및 보상 프로그램 연계
반품/교환 신청 상품 반품 및 교환 신청 단계별 가이드 제공

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

 


 

 

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

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


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

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

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

"배송 조회" 실시간 배송 상태 확인 🔴 강한 대비 (Primary) 배송 중인 경우 가장 많이 사용됨
"반품/교환 신청" 교환 및 반품 진행 🔴 강한 대비 (Primary) 사용자가 가장 신속하게 접근해야 할 기능
"장바구니 담기" 동일 상품 재구매 🟡 중간 대비 (Secondary) 반복 구매 유도, 하지만 필수 기능은 아님
"판매처에 문의하기" 판매자와 직접 Q&A 약한 대비 (Tertiary) 일부 사용자만 사용, 상대적으로 덜 중요한 기능

✅ 디자인 의도:

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

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) 비교 정리

개념 설명 예제
행간(Line Spacing) 한 행과 다음 행 사이의 간격 1.2~1.6배 정도가 일반적인 가독성 유지
자간(Letter Spacing) 글자와 글자 사이의 간격 조절 letter-spacing: 2px;
커닝(Kerning) 특정 문자 쌍 간격 개별 조정 "A V" 간격 조절

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

1) 서체(Typeface)란?

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

2) 폰트(Font)란?

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

3) 서체의 종류

서체 설명 대표적인 서체
세리프(Serif) 글자 끝에 장식이 있는 전통적인 서체 Times New Roman, Garamond
산세리프(Sans-serif) 장식이 없는 모던한 서체 Helvetica, Arial
스크립트(Script) 손글씨 느낌의 서체 Pacifico, Brush Script

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

요소 역할
제목(Heading) 콘텐츠의 핵심 주제 전달
소제목(Subheading) 제목을 보완하며, 세부 내용을 그룹화
본문(Body Text) 구체적인 정보 설명 및 콘텐츠 전달

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

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

항목 설명
제품 개요 제품의 목적, 목표 사용자 정의
핵심 기능 제공해야 할 주요 기능 목록
사용자 스토리 사용자의 행동 시나리오
UX/UI 요구사항 화면 인터페이스와 사용자 경험 가이드

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

항목 설명
메뉴 구조 주요 메뉴 및 하위 메뉴 계층화
페이지 간 연결 관계 특정 페이지에서 어디로 이동할 수 있는지
내비게이션 설계 사용자 경험을 최적화하는 메뉴 구조

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

항목 설명
화면 구성 페이지별 레이아웃 및 콘텐츠 배치
사용자 동선 특정 기능을 수행하는 과정에서 거치는 단계
인터랙션 요소 버튼 클릭, 화면 전환 방식

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

1) 개념

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

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

컬러 비율 색상 예시 역할
6 (주색) 스타벅스 그린 (#00704A) 브랜드의 메인 컬러, 로고, 주요 버튼
3 (보조색) 다크 브라운 (#2E1E12) 내비게이션 바, 텍스트 강조
1 (강조색) 크림 화이트 (#F1EDE1) 포인트 요소, 배경, 하이라이트

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

 

 

 

이번 한 주 동안 피그마 기초 수업을 들으며 많은 걸 배웠다. 처음 다뤄보는 툴이라 많이 헤매고 어려웠지만, 다행히 재밌는 점도 알게 되어 흥미가 점점 붙은 한 주였다. 새로운 것을 배우는 과정은 언제나 쉽지 않지만, 익숙해지는 순간이 오면 성취감도 크다. 특히 프로토타입을 만들면서 기술 발전의 속도를 온몸으로 실감하는 계기가 되었다.

가장 충격적이었던 건 대학 시절에 사용했던 툴과 피그마의 엄청난 기술적 차이를 직접 경험한 순간이었다. 약 17년 전에 대학 수업에서 처음 접했던 디자인 툴과 비교하면, 마치 다른 세상처럼 느껴졌다. 그때는 정적인 디자인이 대부분이었고, 기능도 제한적이어서 한 화면을 만들 때도 많은 과정과 시간이 필요했다. 하지만 지금은 피그마 하나만으로 디자인뿐만 아니라 프로토타이핑까지 가능한 시대가 되었다.

그때 배웠던 기술들이 지금은 거의 쓰이지 않는다는 걸 깨닫자, 한편으론 격세지감을 느끼면서도 또 한편으론 긴장도 되었다. 내 배움이 20년 가까이 단절됐다가 다시 이어지는 거니까 신선하면서도 ‘과연 내가 잘 따라갈 수 있을까?’ 하는 불안감이 스며들었다. 기술의 수명이 점점 짧아지고, 끊임없이 새로운 것을 배워야 하는 시대에서 뒤처지지 않기 위해서는 무엇보다도 변화에 대한 두려움을 극복해야 한다는 생각이 들었다.

그럴 때마다 내가 존경하는 분이 했던 말이 떠올랐다. "당장에 무엇이 나한테 와서 닿는 것이 없다 할지라도 그 변화가 중요하다는 점을 항상 응원해야 한다." 이 말이 요즘 따라 더욱 깊이 와닿는다. 지금 당장은 익숙하지 않고 어렵게 느껴질지라도, 계속해서 변화하는 세상을 응원하고 그 흐름에 올라타려는 태도가 중요하다는 뜻이다. 내가 아무리 열심히 배운 내용도 생각보다 빠르게 쓸모없어질 수도 있다. 하지만 중요한 건 그럼에도 불구하고 계속 배우고 성장하기 위해 노력하는 태도다. 변화는 막을 수 없지만, 변화를 두려워하지 않는 건 내 선택에 달려 있다.

이제 오전 10시부터 다시 수업이 시작된다. 오늘도 새로운 개념을 배우고, 익숙해지기까지 헤매는 순간이 오겠지만 그 또한 성장의 일부일 것이다. 분명 처음 접하는 개념들이 어렵게 다가올 수도 있고, 오늘도 시행착오를 겪겠지만, 이런 과정이 쌓여 결국 내 것이 될 거라 믿는다. 가끔은 속도가 느리다고 느껴질 수도 있고, 제대로 이해하지 못하는 순간이 올 수도 있겠지만, 중요한 건 포기하지 않는 것이다.

배움의 과정은 길고 끝이 없지만, 그 길을 즐기면서 가보려고 한다. 지금 당장 완벽하지 않아도 괜찮다. 앞으로도 계속 성장할 기회가 있고, 내가 배우려는 의지만 있다면 언젠가 익숙하게 다룰 수 있는 날이 올 것이다. 그러니 조급해하지 않고 차근차근 배워가자. 오늘도 최선을 다해서 한 걸음 더 나아가 보자. 화이팅!

1. 인터랙션 설정하는 방법

1) 버튼 클릭 시 다른 화면으로 이동하기

  • 버튼을 선택한 상태에서 Prototype 탭을 클릭
  • 버튼에서 드래그하여 연결할 프레임(페이지)로 이동
  • Interaction Details에서
    • Trigger: On Click
    • Action: Navigate To
    • Animation: Smart Animate or Instant 선택

2) 오버(hover) 효과 적용하기

  • 버튼을 선택하고 Prototype 탭으로 이동
  • 버튼을 다른 프레임(호버 상태)과 연결
  • Interaction Details에서
    • Trigger: While Hovering
    • Action: Change To
    • Animation: Smart Animate 적용

3) 모달 팝업 열고 닫기

  • 팝업(모달) 프레임을 만들어 숨겨둠
  • 버튼을 선택 후 Prototype 탭에서 모달 프레임과 연결
  • Interaction Details에서
    • Trigger: On Click
    • Action: Open Overlay
    • Overlay: Center로 설정 (위치 조정 가능)
    • Close when clicking outside 옵션 체크

4) 드래그 인터랙션 설정하기

  • 드래그할 요소를 선택
  • Prototype 탭에서 드래그 후 연결할 프레임으로 이동
  • Interaction Details에서
    • Trigger: On Drag
    • Action: Navigate To or Smart Animate
    • Easing: Ease Out 또는 Linear 선택

2. 딤드 처리하는 방법

1) 팝업 창에 딤드 배경 추가하기

  • 팝업 창 뒤에 새로운 프레임(사각형)을 추가
  • 배경색을 블랙 (#000000) 또는 다크 그레이로 설정
  • Opacity (투명도)를 30~50%로 조정하여 반투명한 느낌으로 만들기
  • 팝업 창과 함께 그룹화하여 관리

2) 딤드 배경을 클릭하면 팝업 닫기

  • 딤드 배경을 선택 후 Prototype 탭에서 연결할 프레임 설정
  • Interaction Details에서
    • Trigger: On Click
    • Action: Close Overlay

3) 딤드 애니메이션 효과 추가하기

  • 딤드 배경과 팝업을 Smart Animate로 설정
  • Fade In / Fade Out 효과를 적용하여 부드럽게 등장하도록 연출

3. 플로우 경로(Prototype 연결선)가 안 보일 때 해결 방법

1) Prototype 연결이 사라진 경우

  • Prototype 탭에서 버튼을 클릭했을 때 연결선이 없는지 확인
  • 연결이 안 되어 있다면 다시 드래그하여 프레임과 연결

2) Prototype 탭이 비활성화된 경우

  • 상단에서 Design → Prototype 탭이 선택되어 있는지 확인
  • Prototype 탭이 비활성화된 경우 다시 활성화

3) Flow(시작 프레임)가 설정되지 않은 경우

  • 프로토타입에서 시작 프레임을 설정해야 플로우가 표시됨
  • 시작할 프레임을 선택 후 **"Set as Starting Frame"**을 클릭

4) Prototype 연결선이 가려진 경우

  • 확대/축소 비율을 조정하여 연결선이 보이는지 확인
  • 레이어가 많을 경우 다른 요소가 연결선을 가릴 수 있으므로 레이어 순서를 조정

5) 플로우가 표시되지 않는 경우

  • View 옵션에서 "Show Prototype Connections"가 활성화되어 있는지 확인
  • Ctrl + Shift + P (Mac: ⌘ + Shift + P) 를 눌러 Prototype 플로우를 다시 표시

 

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

 


 

디자인 레퍼런스 만들기 / 나만의 디자인 시스템 만들기

 

 

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

 

 

 

 

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

 


 

 

🎨 Figma에서 마스크(Mask) 기능 활용법

마스크(Mask) 기능은 특정 이미지나 개체를 원하는 모양으로 잘라내거나 제한된 영역만 보이게 하는 기능임. 포토샵의 클리핑 마스크처럼 동작한다고 보면 됨.


1. 기본적인 마스크 적용 방법

📌 기본 마스크 만들기

  1. 마스크할 이미지 또는 개체 준비
    • 먼저 마스크를 적용할 이미지(또는 벡터 개체)를 추가함.
  2. 마스크 형태가 될 개체 준비
    • 마스크할 도형(Shape) 또는 벡터 개체를 추가함.
    • 예를 들어 원을 만들면 이미지가 원 형태로 잘려 보이게 됨.
  3. 두 개체를 선택한 후 "Mask" 적용
    • 마스크할 개체(이미지) + 마스크 형태(도형)를 함께 선택함.
    • Ctrl + Shift + M (Mac: ⌘ + Shift + M) 또는 우클릭 → "Use as Mask" 선택.
  4. 마스크 그룹이 생성됨
    • Layers 패널에서 마스크가 적용된 그룹이 만들어지고, 도형이 마스크 역할을 하게 됨.

2. 마스크된 이미지 조정하기

📌 마스크 안의 이미지 이동하기

  1. 마스크 그룹을 선택한 후, 내부에 있는 이미지를 개별적으로 선택함.
  2. Ctrl (Mac: ⌘)을 누른 채 이미지를 드래그하여 위치 조정함.
  3. 크기 조절도 가능하므로 원하는 영역이 정확하게 보이도록 조절할 수 있음.

3. 마스크를 벡터 쉐이프와 함께 사용하기

📌 펜 툴을 이용한 자유로운 마스킹

  1. P를 눌러 **Pen Tool(펜 툴)**을 활성화함.
  2. 원하는 형태로 벡터 쉐이프를 만듦.
    • 예를 들어, 복잡한 곡선 모양으로도 마스크 가능함.
  3. 마스크할 이미지와 벡터 쉐이프를 함께 선택 후 Ctrl + Shift + M (Mac: ⌘ + Shift + M)을 눌러 마스크 적용.

💡 Tip: 벡터를 마스크로 사용하면 곡선, 비정형 모양의 마스크를 만들 수 있음.


4. 마스크 해제 및 수정

📌 마스크 해제

  • 마스크된 그룹을 선택한 후, Ctrl + Shift + G (Mac: ⌘ + Shift + G)를 눌러 그룹 해제할 수 있음.
  • 또는 Layers 패널에서 마스크 개체를 삭제하면 원래 상태로 돌아감.

5. 마스크와 클리핑 콘텐츠 차이

Mask (마스크) 특정 모양을 기준으로 내부 콘텐츠를 가리는 역할을 함
Clip Content (클리핑 콘텐츠) 프레임(Frame) 내부의 요소를 프레임 크기 내에서만 보이게 제한함
  • Frame을 사용할 경우 Clip Content 옵션을 체크하면 마스크 없이도 프레임 영역만 보이도록 제한할 수 있음.
  • 하지만 복잡한 형태로 자르려면 마스크 기능이 더 유용함.

 


 

🌐 크롬에서 개발자 도구(검사)를 활용한 이미지 다운로드 방법

크롬에서 **우클릭 → 검사(개발자 도구)**를 활용하여 페이지의 이미지 소스를 찾고 다운로드하는 방법을 단계별로 정리함.


1. 기본적인 우클릭 다운로드

  1. 크롬에서 원하는 페이지를 엶.
  2. 다운로드할 이미지를 **우클릭 → "이미지를 다른 이름으로 저장"**을 선택.
  3. 원하는 위치에 저장.

⚠️ 일부 웹사이트에서는 우클릭을 막아두거나, 이미지를 백그라운드에서 로드하는 경우가 있음.
이럴 때는 개발자 도구(DevTools)를 활용해야 함.


2. 개발자 도구(검사)에서 직접 다운로드

📌 1️⃣ 이미지 URL 찾기

  1. 크롬에서 원하는 웹페이지를 열고 F12 또는 Ctrl + Shift + I (Mac: ⌘ + Option + I)를 눌러 개발자 도구(DevTools) 실행.
  2. Elements (요소) 탭으로 이동한 뒤, Ctrl + Shift + C (Mac: ⌘ + Shift + C)를 눌러 화면에서 이미지 부분을 클릭하면, 해당 요소가 자동 선택됨.
  3. <img> 태그를 확인하고 src 속성 값을 찾음.
  4. src="..."에 있는 이미지 URL을 복사한 후, 새 탭에서 열어 다운로드.

📌 2️⃣ 네트워크 패널에서 이미지 파일 직접 찾기

💡 이 방법은 이미지가 동적으로 로드될 때 유용함.

  1. 개발자 도구(DevTools)에서 "Network" (네트워크) 탭으로 이동.
  2. **페이지를 새로고침 (F5 또는 Ctrl + R)**하면 페이지에 로드된 모든 파일 목록이 나타남.
  3. 필터를 **"Img"**로 변경하면, 웹사이트에서 로드된 이미지 파일들만 확인 가능.
  4. 원하는 이미지의 URL을 우클릭 → "Open in new tab" (새 탭에서 열기).
  5. 새 탭에서 **우클릭 → "이미지를 다른 이름으로 저장"**하여 다운로드.

3. 전체 페이지 이미지 한 번에 다운로드

📌 1️⃣ 개발자 도구 콘솔에서 자동 추출

웹사이트의 모든 이미지 URL을 한 번에 찾으려면 콘솔에서 아래 코드를 실행하면 됨.

  1. 개발자 도구(DevTools)에서 "Console" (콘솔) 탭 선택.
  2. 아래 코드를 입력하고 실행 (Enter):
  3. javascript
    복사편집
    const images = document.querySelectorAll('img'); images.forEach(img => console.log(img.src));
  4. 출력된 이미지 URL을 복사해서 다운로드하면 됨.

4. 마우스 우클릭 없이 다운로드 (이미지 보호 사이트)

일부 사이트에서는 우클릭이 막혀 있을 수도 있음.
이럴 경우 다음 방법을 활용할 수 있음.

📌 1️⃣ 개발자 도구를 활용하여 다운로드

  • F12 (Mac: ⌘ + Option + I)를 눌러 개발자 도구 실행 후, 위에서 설명한 Elements 탭 또는 Network 탭을 활용하면 됨.

📌 2️⃣ 브라우저 확장 프로그램 활용

개발자 도구 사용이 어렵다면, 확장 프로그램을 설치하여 쉽게 다운로드할 수도 있음.

추천 확장 프로그램:

  1. Image Downloader (https://chromewebstore.google.com/detail/image-downloader-save-pic/daeljdgmllhgmbdkpgnaojldjkdgkbjg?utm_source=ext_app_menu)
  2. Fatkun Batch Download Image
  3. Download All Images

설치 후, 웹페이지에서 실행하면 한 번에 모든 이미지 다운로드가 가능함.


🚀 결론

  1. 간단한 경우 👉 우클릭 → 이미지 저장
  2. 이미지 URL 확인 👉 개발자 도구 Elements 탭에서 <img> src 확인
  3. 동적 이미지 👉 개발자 도구 Network 탭에서 필터 "Img" 사용
  4. 전체 이미지 URL 수집 👉 Console에서 JavaScript 코드 실행
  5. 보호된 사이트 👉 브라우저 확장 프로그램 사용

 

 

 

 

오늘은 피그마에서 부모 컴포넌트와 자식 컴포넌트를 배웠다. 설명을 들을 때는 이해한 것 같았는데, 직접 해보니 전혀 다른 이야기였다.

처음엔 부모와 자식 컴포넌트의 개념 자체가 생소했다. 부모 컴포넌트는 기본이 되는 디자인 요소로, 이를 기반으로 여러 개의 자식 컴포넌트가 생성된다. 부모를 수정하면 자식 컴포넌트에도 동일한 변화가 반영되지만, 자식 컴포넌트에서 특정 부분만 따로 변경하려고 하면 생각보다 쉽지 않았다. 원래 의도한 대로 조작이 되지 않거나 예상치 못한 결과가 나오면 다시 원인을 찾아야 했는데, 그 과정이 쉽지 않았다.

특히 컴바인 베리언츠를 배우면서 더 복잡해졌다. 컴바인 베리언츠를 활용하면 하나의 컴포넌트에서 속성 값을 변경해 다양한 변형을 줄 수 있는데, 개념적으로는 이해가 되지만 막상 적용하려니 생각처럼 되지 않았다. 한 컴포넌트에서 여러 가지 상태를 설정하고, 이를 변형해가며 활용하는 과정이 익숙하지 않아서 몇 번이고 시도해 봤다. 챗GPT로 검색하고, 공식 문서를 찾아보며 하나하나 해결해 나갔지만, 처음이라 그런지 쉽지 않았다. 그래도 계속 반복하다 보니 조금씩 감이 오기 시작했다.

이어서는 KRDS 가이드를 배웠다. 처음에는 단순한 스타일 가이드 정도로 생각했는데, 내용을 들여다보니 UX 디자인의 본질을 꿰뚫는 기준들이 정리되어 있었다. 단순히 보기 좋은 화면을 만드는 것이 아니라, 사용자가 자연스럽고 직관적으로 경험할 수 있도록 철저하게 설계된 시스템이라는 걸 깨달았다. KRDS처럼 정교한 디자인 시스템이 완성되려면 얼마나 많은 리서치와 실험, 피드백이 반복되었을지 상상조차 어려웠다.

특히 KRDS 가이드 중에서도 디지털 포용 가이드가 무척 인상적으로 기억에 남았다. 평소 건강한 몸을 가진 나로서는 생각지도 못했던 사용성 기준들이 담겨 있었고, 이를 보면서 머리를 띵 맞은 듯한 기분이 들었다. UX 디자인을 할 때 항상 약자에 대한 배려가 있어야 한다는 점을 크게 깨달았다. 단순히 편리한 인터페이스를 만드는 것이 아니라, 장애가 있는 사용자나 디지털 접근성이 낮은 사람들까지 고려하는 것이 UX 디자인의 본질이라는 점을 다시금 생각하게 되었다.

이후 KRDS 가이드를 적용해 고용24 웹페이지를 분석하는 시간을 가졌다. 국가에서 완성도 높게 만든 결과물도 가이드에 맞지 않는 부분이 있거나 개선할 점이 발견된다는 점이 신기했다. 아무리 탄탄하게 설계된 UX라 해도 지속적인 수정과 보완이 필요하다는 걸 몸소 느낀 시간이었다. UX 디자인은 단순한 디자인 작업이 아니라 끊임없이 고민하고 개선해나가야 하는 끝없는 과정이라는 생각이 들었다.

이번 경험을 통해 UX 디자인을 배울 때 어떤 점을 더 짚어야 할지도 고민하게 되었다. 우선, 단순히 툴 사용법을 익히는 것이 아니라 사용자의 행동 패턴과 심리를 이해하는 것이 중요하다는 걸 깨달았다. 디자인을 단순히 예쁘게 만드는 것이 아니라, 사용자 입장에서 얼마나 편하게 이용할 수 있는지를 고려하는 과정이 필요하다. 그리고 한 번의 설계로 끝나는 것이 아니라 테스트하고 개선하는 과정이 필수적이라는 것도 다시금 느꼈다.

지금은 간신히 과제를 80%쯤 해낸 수준이지만, 언젠가는 이런 프로젝트에 당당하게 참여할 수 있을까? 그런 생각이 들자 막연한 불안감도 스며들었다. 하지만 결국 방법은 하나뿐이다. 계속 부딪쳐보는 것. 지금도 시행착오를 겪으며 조금씩 성장하고 있으니까. 머리로 이해하는 것과 손으로 직접 해보는 것은 다르고, 처음부터 잘하는 사람은 없으니까. 오늘은 조금 벅찬 하루였지만, 내일은 또 나아지겠지. 포기하지 않고 꾸준히 해보자. 화이팅!

 

 

 

 

 

📌 Figma 부모 컴포넌트 & 자식 컴포넌트 개념 정리

1. 부모 컴포넌트 vs. 자식 컴포넌트 아이콘 차이

  • 부모 컴포넌트: 컴포넌트의 원본(마스터) 역할을 하며, 수정하면 모든 자식 컴포넌트에 변경이 적용됨.
    • 아이콘: 원형 다이아몬드
  • 자식 컴포넌트: 부모 컴포넌트를 인스턴스로 가져온 것으로, 부모의 스타일과 속성을 상속하지만, 일부 속성을 개별적으로 변경 가능.
    • 아이콘: 속이 빈 다이아몬드

 

2. 실무 활용 팁

디자인 시스템에서 일관성 유지

  • 버튼, 카드, 입력 필드 같은 UI 요소를 부모 컴포넌트로 만들어 관리하면 일관성을 유지할 수 있음.

작업 효율성 향상

  • 부모 컴포넌트 하나만 수정해도 모든 자식 컴포넌트가 업데이트되므로, 디자인 수정 시간을 줄일 수 있음.

오버라이드 기능 활용

  • 자식 컴포넌트에서 텍스트, 색상, 아이콘만 변경하면 커스터마이징이 가능하므로, 같은 레이아웃의 다양한 변형을 쉽게 적용할 수 있음.

컴포넌트 재사용 최적화

  • 반복적으로 사용되는 UI 요소를 컴포넌트로 만들어 관리하면 디자인 시스템을 더욱 체계적으로 운영할 수 있음.

 

3. Figma에서 부모 & 자식 컴포넌트 사용 방법

(1) 부모 컴포넌트 생성 방법

  1. Figma에서 새 프레임(Frame) 또는 원하는 UI 요소를 디자인함.
  2. 선택한 요소를 우클릭 → Create Component(컴포넌트 만들기) 선택.
  3. 생성된 컴포넌트는 레이어 패널에서 원형 다이아몬드 아이콘으로 표시됨.

(2) 자식 컴포넌트(인스턴스) 만들기

  1. 부모 컴포넌트를 선택하고 Option(Alt) + 드래그하여 복사하면 자식 컴포넌트가 생성됨.
  2. 생성된 인스턴스는 속이 빈 다이아몬드 아이콘으로 표시됨.
  3. 필요하면 텍스트, 색상 등을 개별적으로 변경하여 사용할 수 있음.

 

4. 컴바인 베리언츠(Combine Variants) 사용 방법

(1) 개념

  • 여러 개의 유사한 컴포넌트를 하나의 Variants(변형) 그룹으로 결합하여, 속성(Property) 값만 변경하면 다양한 변형을 쉽게 적용할 수 있음.

(2) 사용 방법

  1. 여러 개의 컴포넌트 선택 → 우클릭 → Combine as Variants(베리언츠로 결합) 클릭.
  2. 오른쪽 패널에서 Properties를 설정하여 각 변형에 대한 옵션을 정의함 (예: Size, Color, State 등).
  3. 자식 컴포넌트를 만들면 오른쪽 속성 패널에서 Variants 옵션을 변경할 수 있음.

활용 예시

  • 버튼(Primary, Secondary, Disabled) 변형 관리
  • 아이콘 컬러 변경
  • 카드 UI에서 텍스트 정렬 방식(왼쪽, 가운데, 오른쪽) 변경

 

5. 레스토어 컴포넌트(Restore Component) 기능 활용

(1) 개념

  • 부모 컴포넌트에서 변경된 내용을 자식 컴포넌트가 원래대로 복원할 수 있는 기능.

(2) 사용 방법

  1. 자식 컴포넌트에서 이미지를 변경하거나 다른 속성을 수정함.
  2. 변경된 자식 컴포넌트를 우클릭 → Restore Default Property(기본 속성 복원) 클릭.
  3. 부모 컴포넌트의 원래 상태로 복구됨.

활용 예시

  • 디자인 시안 검토 중 원본 상태로 되돌릴 때 유용함.
  • 실수로 변경한 속성을 복원할 때 사용 가능함.

 

6. 레스토어 컴포넌트 기능을 활용한 이미지 변경 예제

(1) 기존 이미지 변경

  1. 자식 컴포넌트에서 이미지가 포함된 Frame을 선택.
  2. 오른쪽 속성 패널에서 Fill 클릭 후 원하는 이미지로 변경.

(2) 원래 이미지 복원

  1. 변경된 자식 컴포넌트를 선택.
  2. 우클릭 → Restore Default Property 클릭.
  3. 부모 컴포넌트의 원본 이미지로 복구됨.

 

🎯 정리

부모 컴포넌트 원본 컴포넌트, 모든 인스턴스에 영향 디자인 시스템 구축
자식 컴포넌트 부모 컴포넌트의 인스턴스, 일부 속성 변경 가능 UI 요소 변형 관리
컴바인 베리언츠 여러 컴포넌트를 하나의 Variants 그룹으로 결합 버튼 상태 관리, 아이콘 색상 변경
레스토어 컴포넌트 부모 컴포넌트의 원본 상태로 복원 실수로 변경한 디자인 복구

+ Recent posts