📅 2026.06.16(화) - 42일차

Wayback Machine 활용 과거 웹페이지 아카이브 분석
Figma overlay 및 Variants 기반의 팝업/토글 시스템 설계.
변수(Variables)와 if/else 조건문을 연동한 체크박스 카운트 제어 매커니즘 수립 및 실행 순서에 따른 데이터 연산 주의점 파악.
동일 레이어 구조와 네이밍 매칭을 활용한 기기별(데스크톱, 태블릿, 모바일) 반응형 카드 컴포넌트 제작 및 스마트 애니메이트(Smart Animate) 인터랙션 구현.

1. 아카이브 추적: Wayback Machine을 활용한 서비스 히스토리 분석

레거시 및 변경 이력 추적: 과거 특정 시점의 웹페이지 뼈대와 UI 구조를 역추적하여 벤치마킹할 수 있는 오픈 아카이브 도구 활용.
분석 기법: web.archive.org 플랫폼에 타겟 도메인(예: hankyung.com)을 입력한 뒤 타임라인 캘린더 인터페이스를 통해 연도별·일자별 UI/UX 변경 사양과 비즈니스 피봇팅 히스토리 진단.

2. 피그마(Figma) 오버레이 및 모달 시스템 설계

버튼 제어에 따라 화면 중앙에 팝업이 호출되고 내부 상태가 전이되는 컴포넌트 인터랙션 가이드.

① Open / Close Overlay 및 Change to 기본 연동 (3단계 실습)

에셋 준비: 배경 프레임(Frame 1) 내 호출 버튼 배치, 상위 팝업 프레임(Frame 2) 내 닫기 및 토글 배치. 체크박스의 미선택(Default)과 선택(Checked) 디자인을 묶어 단일 컴포넌트 세트(Variants)로 자산화 후 팝업 내 배치.
프로토타입 매핑: * Open overlay: 호출 버튼 클릭 시 액션을 지정하고 포지션을 Centered로 고정. Close when clicking outside(외부 영역 클릭 시 닫기) 및 Add background behind overlay(딤드 배경 추가) 옵션을 활성화하여 모달리티(Modality) 확보.
- Change to: 팝업 내부 체크박스 인스턴스 선택 시, 컴포넌트 마스터 내 베리언트 간 상태가 Default ➔ Checked로 즉각 변이되도록 설계.
- Close overlay: 팝업 내부의 X 닫기 버튼에 해당 액션을 매핑하여 화면을 클리어 처리.
인라인 프리뷰(Preview): Shift + Space 단축키를 활용하여 팝업 호출, 상태 전이, 팝업 폐쇄 흐름의 동작 여부를 캔버스 내에서 즉각 검증.

② 조건문 없는 전체메뉴 토글 최적화 (Toggle Overlay)

변수나 복잡한 조건문(if/else)을 남용하여 싱크가 꼬이는 설계를 방지하기 위해 피그마 전용 내장 액션 활용.

인터랙션 재설계: 전체메뉴 버튼 클릭 시 액션을 Toggle overlay로 변경하고 대상 메뉴 리스크 프레임을 지정.
Manual 배치의 이점: 포지션을 Manual로 변경하여 메인 화면 내 원하는 절대 좌표(메뉴 버튼 하단 단차 영역)에 직관적으로 드롭 레이아웃 매핑.
Variants 활용 대체안: 드롭다운 화살표 아이콘의 회전 각도($\vee \leftrightarrow \wedge$) 등 정밀한 비주얼 트랜지션을 동반할 경우, 버튼과 메뉴판 전체를 묶은 상위 컴포넌트 세트를 구성하여 Change to와 Smart animate 조합으로 설계하는 것이 정석적인 UX 구현 방식임.

3. 고급 변수(Variables) 제어 및 조건문(if/else) 실습

체크박스 활성화 여부에 따라 정수형 카운트 변수를 가감하고 특정 상태 도달 시 분기 처리를 수행하는 에이전틱 로직 구현.

[유저 On Tap 터치] 
      ⬇
[Set count to count - 1] (카운트 연산 선행)
      ⬇
[if count == 0] (현재 값 조건 검사) ➔ 참(True)일 때 하위 특정 액션 트리거
      ⬇
[Change to uncheck] (최종 컴포넌트 비주얼 변이)

조건식 작성법: 피그마 Write condition 창 내에서 지정 변수(count)를 선택하고 비교 연산자 == (Equal to) 매칭 후 임계값 숫자(0)를 입력하여 수식 수립.
실행 순서(Order)의 중요성: 피그마 프로토타입은 위에서 아래로 순차 실행되므로, 카운트 차감(Set count)이 조건문(if)보다 먼저 실행되는지 뒤에 실행되는지에 따라 조건 비교 시점의 정수 데이터 원본 값이 달라지므로 스택 순서 배정 시 절대적 주의 요망.

4. 반응형 카드 컴포넌트 및 스마트 애니메이트(Smart Animate)

디바이스 환경(데스크톱/태블릿/모바일)에 따라 레이아웃 구조가 유연하게 가변하는 컴포넌트 자산화 기법.

① 기기별 베리언트 세트(Variants) 구축

오토 레이아웃 필수 적용: 기준 프레임 생성 후 내부 에셋(이미지 래퍼, 타이틀, 바디 텍스트)을 배치하고 Shift + A를 적용하여 고정 패딩 및 마진 스펙 확보.
레이어 네이밍 싱크 (가장 중요): 기기별 크기 변형 과정에서 복사된 프레임 내부 오브젝트들의 이름(Rectangle 1, Title, Body)이 세 가지 베리언트 전체에서 완벽히 일치해야 스마트 애니메이트 구동 시 찌그러짐 현상 없이 부드러운 트랜지션이 연출됨.
속성(Properties) 정의: 컴포넌트 세트 변형 결합 후, 우측 속성명을 Device로 변경하고 각 상태값을 Desktop, Tablet, Mobile로 네이밍 정렬.

② 인터랙션 연결 및 팀 협업 설정

Smart Animate 세팅: 각 디바이스 베리언트 간 파란색 노드를 순환 구조(Desktop ➔ Tablet ➔ Mobile ➔ Desktop)로 연결하고 트리거 On tap, 애니메이션 Smart animate (속도 300ms) 부여.
공유 및 보안 옵션 가이드: 프로덕트의 복제 유출 방지 및 팀원 간 정밀 협업을 위해 복제 권한이 필요한 특수 케이스를 제외하고는 Advanced 영역의 특정 체크박스를 해제(Uncheck)하여 배포 보안 등급을 유지함.
Claude-Figma 커넥터 연동: AI 에이전트 환경(Atlassian Rovo 및 Claude 파이프라인)의 커넥터 설정을 통해 디자인 파일의 스펙 정보를 기획서 및 개발 핸드오프 자산으로 자동 변환하는 시스템 레이어 확장 가능.

피그마(Figma)에서 Open Overlay, Close Overlay, Change to 기능 실습

'버튼을 누르면 팝업(모달)이 뜨고, 팝업 내에서 체크박스를 변경한 뒤, 닫기 버튼으로 팝업을 닫는 흐름'

1단계: 실습용 컴포넌트 및 에셋 준비하기

우선 프로토타입을 연결할 기본 요소들 필요. 피그마 캔버스에 아래 세 가지를 먼저 만들기.

메인 화면 (Frame 1): 배경이 될 프레임을 하나 생성하고, 그 안에 팝업을 열어줄 '설정 열기 버튼'을 하나 만들기.
오버레이로 뜰 팝업 창 (Frame 2): 메인 화면보다 작은 크기의 프레임을 만들고, 그 안에 '체크박스 토글'과 'X (닫기) 버튼'을 넣기.
체크박스 컴포넌트 (Variant): Change to를 테스트하기 위해 필요.
- 체크가 안 된 상태(Default)와 체크가 된 상태(Checked) 두 가지 디자인 생성.
- 두 디자인을 모두 선택한 뒤, 우측 패널에서 Create component set을 눌러 베리언트(Variant)로 구성.
- [중요] 팝업 창(Frame 2) 안에 이 체크박스 컴포넌트의 인스턴스 넣기.

2단계: 프로토타입 연결하기 (인터랙션 설정)
이제 우측 상단 탭에서 Prototype으로 전환하고 하나씩 연결.
① Open Overlay (팝업 열기)

대상: 메인 화면(Frame 1)에 있는 '설정 열기 버튼'
연결: 버튼을 드래그하여 팝업 창(Frame 2)에 연결.
설정 패널 (Interaction Details):
- Trigger: On click
- Action: Open overlay (기존 Navigate to에서 변경)
- Position: Centered (화면 중앙에 뜨도록 설정)
- [체크] Close when clicking outside (팝업 바깥 영역 클릭 시 닫히게 하려면 체크)
- [체크] Add background behind overlay (팝업 뒤에 어두운 배경을 깔아주려면 체크)

② Change to (팝업 내부에서 상태 변경하기)

대상: 팝업 창 내부에 넣은 '체크박스 컴포넌트(Default)'
연결: 컴포넌트 자체의 내부 연결. 컴포넌트 마스터 안에서 Default 상태를 Checked 상태로 드래그하여 연결.
설정 패널:
- Trigger: On click
- Action: Change to
- Target: Checked (혹은 설정한 베리언트 이름)
- Animation: Instant 또는 Smart animate

③ Close Overlay (팝업 닫기)

대상: 팝업 창(Frame 2) 내부에 있는 'X (닫기) 버튼'
연결: X 버튼 선택 후 파란색 노드를 캔버스 빈 곳으로 드래그하거나, 그냥 선택만 하고 우측 Prototype 패널에서 + 버튼 클릭.
설정 패널:
- Trigger: On click
- Action: Close overlay

3단계: 확인하기 (Preview)

메인 화면(Frame 1)을 선택합니다.
우측 상단의 Preview (▸ 모양 단축키: Shift + Space) 또는 Present 아이콘을 클릭.
아래 순서대로 작동하는지 테스트합니다.
- '설정 열기 버튼' 클릭 ➔ 화면 중앙에 팝업이 뜨는지 확인 (Open Overlay)
- 팝업 안의 '체크박스' 클릭 ➔ 디자인이 체크된 상태로 바뀌는지 확인 (Change to)
- 팝업 안의 'X 버튼' 클릭 ➔ 팝업이 사라지고 메인 화면만 남는지 확인 (Close Overlay)

💡 실습 팁: Change to는 반드시 동일한 컴포넌트 세트(Component Set)의 베리언트 간에서만 작동. 일반 프레임끼리는 Change to 액션이 활성화되지 않으니, 1단계에서 체크박스를 컴포넌트 세트로 묶었는지 꼭 확인

피그마 더블클릭

메뉴 overlay 기능

너무 어려워서 Gemini의 도움을 받았다

피그마(Figma) 프로토타입 인터랙션 설정 중!

'전체메뉴' 버튼을 누르면 아래로 메뉴 리스트가 열리고, 닫히는 토글(Toggle) 기능을 구현하려고 하시는 것 같아요.

image.png와 image_2.png를 보니 조건문(if/else)과 변수(switch), 그리고 오버레이(Open overlay)를 섞어서 복잡하게 설정하셨는데, 오버레이가 제대로 열리거나 닫히지 않아서 어려움을 겪고 계신 상황으로 보입니다.

지금 설정하신 방식의 문제점과, 이를 가장 쉽고 확실하게 해결하는 방법 2가지를 알려드릴게요!

🔍 지금 설정의 문제점 (왜 안 될까요?)

image.png의 Interaction 창을 보면 한 번 누를 때(On tap) 아래 Actions가 동시에 실행되도록 설계되어 있습니다.

Set switch to not switch (스위치 변수 값을 반대로 바꿈)
if switch == false 이면 오버레이를 열고, 아니면 오버레이를 닫음.

이 방식은 로직상 꼬이기 쉽고, 피그마에서 제공하는 오버레이 전용 옵션을 활용하면 변수(Variable)나 조건문 없이도 훨씬 간단하게 만들 수 있습니다.

🛠️ 해결 방법 1: 오버레이 전용 기능 활용하기 (가장 추천! 변수 X)

피그마에는 변수 설정 없이 버튼 하나로 오버레이를 열고 닫을 수 있는 'Toggle overlay' 기능과 '밖을 클릭하면 닫히는' 옵션이 있습니다. switch 변수를 다 지우고 아래처럼 새로 세팅해 보세요.

1단계: 기존 복잡한 인터랙션 지우기

'전체메뉴' 버튼을 선택하고, 우측 패널의 Interaction 목록에서 지금 만들어둔 복잡한 조건문 설정을 - 버튼을 눌러 지웁니다.

2단계: 깔끔하게 새로 인터랙션 걸기

'전체메뉴' 버튼에서 메뉴 리스트 프레임(메뉴아이템1~4가 있는 프레임)으로 파란색 화살표 선을 연결합니다.
Interaction 창을 열고 아래 테이블처럼 설정을 변경해 주세요.

항목	설정할 값	설명
Trigger	On tap	터치/클릭했을 때 실행
Action	Toggle overlay (또는 Open overlay)	닫혀있으면 열고, 열려있으면 닫아주는 마법의 기능입니다.
Overlay	메뉴리스트	불러올 메뉴 프레임 선택
Position	Manual	image_2.png에서 하신 것처럼 원하는 위치(전체메뉴 바로 아래)로 직접 드래그해서 배치합니다.
체크박스	✅ Close when clicking outside	여기에 꼭 체크하세요! 메뉴 바깥 영역을 누르면 메뉴판이 자동으로 닫힙니다.

💡 요약: Action을 **Toggle overlay**로 바꾸고, **Close when clicking outside**에 체크만 해주면 변수 없이 완벽하게 작동합니다!

🛠️ 해결 방법 2: 컴포넌트 변형(Variants) 활용하기 (더 자연스러운 UI)

만약 '전체메뉴'의 우측 화살표 아이콘 모양($\vee$ 모양에서 $\wedge$ 모양으로)까지 자연스럽게 바뀌는 걸 원하신다면, 오버레이보다는 컴포넌트의 Variants(변형) 기능을 쓰는 게 정석입니다.

에셋 만들기:
- [닫힌 상태]: '전체메뉴 $\vee$' 버튼만 있는 프레임
- [열린 상태]: '전체메뉴 $\wedge$' 버튼 아래에 메뉴 리스트까지 통째로 붙어있는 프레임
컴포넌트 세트 만들기: 두 프레임을 같이 선택하고 상단에서 Create component set을 누릅니다.
연결하기:
- [닫힌 상태] 버튼을 클릭하면 On tap ➡️ Change to ➡️ [열린 상태] (Smart animate 적용)
- [열린 상태] 버튼을 다시 클릭하면 On tap ➡️ Change to ➡️ [닫힌 상태]

이 방식을 쓰면 오버레이 위치를 일일이 맞출 필요 없이, 실제 앱처럼 부드럽게 메뉴가 열리고 닫힙니다.

지금 당장 실습 과제를 빠르게 해결하셔야 한다면 [해결 방법 1]의 Toggle overlay와 Close when clicking outside 체크 조합으로 바꿔보세요. 막히던 부분이 바로 해결될 거예요!

하다가 또 잘 안되는 부분이 있으면 언제든 댓글처럼 다시 물어봐 주세요. 화이팅입니다! 👍

이번엔 체크박스를 활용한 카운트 변수 제어와 조건문 실습이군요! image_3.png를 보니 체크박스를 해제할 때 count 값을 줄이고, 특정 조건(예: 모두 체크되었을 때 'ALL CHECKED!!!'를 띄우는 등)을 처리하시려는 것 같아요.

지금 if 문 조건식을 작성하는 단계(Write condition)에서 막히신 것 같은데, 어떤 흐름으로 완성해야 하는지 차근차근 짚어드릴게요.

🔍 현재 상태 분석 및 목표

지금 만드시는 인터랙션은 "체크된 상태의 아이템을 클릭해서 '체크 해제(Uncheck)' 상태로 바꿀 때"의 로직입니다.

화면을 보면 이미 클릭했을 때 Set count to count - 1 (카운트 1 감소)과 맨 아래 Change to uncheck (컴포넌트 상태 변경)는 잘 넣어두셨어요. 이제 그 사이에 있는 if 조건문을 완성해야 합니다.

주로 이 실습에서 원하는 최종 목표는 "체크박스가 다 켜지거나 꺼졌을 때 화면에 특정 반응(ALL CHECKED!!! 같은 문구)을 보여주는 것"일 확률이 높습니다.

🛠️ 해결 방법: 조건문 완성과 순서 교정

피그마에서 if 문을 쓸 때 가장 중요한 점은 "조건을 검사하는 시점의 count 값"과 "액션의 실행 순서"입니다.

만약 "카운트가 0이 되었을 때(모든 체크가 해제되었을 때) 혹은 특정 개수가 되었을 때" 동작하게 만들고 싶다면 아래와 같이 세팅해야 합니다.

1단계: if 조건식 완성하기

Write condition 칸을 클릭합니다.
띄워진 변수 목록 팝업에서 마우스 커서가 가리키고 있는 count를 선택합니다.
비교 연산자 선택창이 뜨면 == (Equal to)를 선택합니다.
마지막 칸에 원하는 기준 숫자(예: 전부 해제된 기준이라면 0)를 입력하고 엔터를 누릅니다.
- 예시: if count == 0

2단계: if / else 안에 실행할 액션 넣기

if (조건이 맞을 때) 아래의 + Add action:
- 카운트가 0이 되었을 때 일어날 일(예: 어떤 안내 프레임을 숨기거나, 다른 변수를 바꾸는 액션)을 넣어줍니다.
else (조건이 아닐 때) 아래의 + Add action:
- 조건이 맞지 않을 때는 아무 일도 안 일어나게 하려면 그냥 비워두셔도 됩니다.

⚠️ 주의해야 할 피그마의 '순서(Order)' 팁!

image_3.png의 액션 순서를 보면 아래와 같이 되어 있습니다.

Set count to count - 1 (카운트 차감)
if (조건문)
Change to uncheck

피그마는 위에서부터 순서대로 실행하기 때문에, 1번에서 이미 카운트가 1 줄어든 상태로 2번 조건문을 체크하게 됩니다.

만약 기존 count가 1이었는데 클릭했다면 ➡️ 1번을 지나며 0이 됨 ➡️ 2번 if count == 0 조건문이 참(True)이 되어 내부 액션이 실행됩니다.
의도하신 타이밍이 이게 맞다면 지금 순서가 정답입니다! 만약 계산하기 전의 원래 숫자로 조건을 따져야 한다면 Set count 액션을 if문 아래로 드래그해서 순서를 바꾸셔야 합니다.

혹시 이 체크박스들을 통해 최종적으로 구현하고 싶으신 기능(예: 아래에 있는 'ALL CHECKED!!!' 텍스트를 언제 나타나게 하고 싶다 등)이 정확히 어떤 것인지 말씀해주시면, 거기에 딱 맞는 변수와 조건문 수식을 바로 짜 드릴게요!

실습 링크 https://www.figma.com/design/LQPRKmnsRVPR06s7McXDqC/4-check-list--Copy-?node-id=5-1075&t=rj28376lOGUbigwP-0

Smart Animate

피그마(Figma)에서 반응형 카드 컴포넌트를 만들고, 기기별 전환 시 부드러운 스마트 애니메이트(Smart Animate) 효과를 주는 전체 과정을 블로그 포스팅용으로 깔끔하게 정리해 드립니다. 복사해서 바로 활용하실 수 있도록 명확한 이모지와 강조 스타일로 작성했습니다.

[Figma] 피그마 반응형 카드 컴포넌트(Variants) 제작 및 스마트 애니메이트 적용 가이드

안녕하세요! 오늘은 피그마(Figma)에서 하나의 카드 디자인을 바탕으로 데스크톱(Desktop), 태블릿(Tablet), 모바일(Mobile) 크기에 대응하는 반응형 컴포넌트 세트(Variants)를 만들고, 화면 전환 시 쫀득하고 부드럽게 크기가 변하는 스마트 애니메이트(Smart Animate)를 적용하는 방법을 단계별로 정리해 보겠습니다.

🟥 1단계: 기준이 되는 카드 만들기 (Desktop)

가장 먼저 정보가 모두 들어가는 가장 큰 기준 크기(데스크톱용) 카드를 제작합니다.

프레임 생성: 단축키 F를 누르고 적당한 크기(예: $W: 360$, $H: 240$)로 프레임을 그립니다.
요소 배치: 프레임 내부에 이미지 영역(네모), 제목(텍스트), 본문(텍스트)을 자유롭게 디자인합니다.
둥근 모서리: 우측 패널 상단 Corner radius에 12 정도를 주어 부드럽게 깎아줍니다.
오토 레이아웃(필수): 카드를 반응형으로 쉽게 늘리고 줄이기 위해 카드 프레임을 선택한 상태에서 Shift + A를 눌러 오토 레이아웃을 적용합니다.
이름 변경: 왼쪽 레이어 패널에서 이 프레임의 이름을 Desktop으로 변경합니다.

🟨 2단계: 기기별 크기로 복사 및 리사이징 (Tablet, Mobile)

기본 카드를 복사하여 태블릿과 모바일 환경에 맞게 크기와 배치를 최적화합니다.

태블릿 버전 생성: Desktop 프레임을 선택하고 Ctrl + D로 복사한 뒤, 이름을 Table(또는 Tablet)로 바꿉니다. 우측 패널에서 가로 길이를 중간 크기(예: $W: 280$)로 줄이고 내부 정렬을 다듬습니다.
모바일 버전 생성: Table 프레임을 선택하고 Ctrl + D로 한 번 더 복사한 뒤, 이름을 Mobile로 바꿉니다. 가로 길이를 최소 크기(예: $W: 200$)로 콤팩트하게 줄이고, 필요하다면 글씨 크기를 조절합니다.

🚨 스마트 애니메이트 핵심 팁: Desktop, Table, Mobile 세 카드 내부에 들어있는 이미지 상자나 텍스트 레이어들의 이름(예: Rectangle 1, Title, Body)이 세 기기 모두 완벽하게 똑같아야 나중에 찌그러지지 않고 부드럽게 크기가 변합니다!

🟦 3단계: 변형 컴포넌트 세트(Variants)로 합치기

따로 노는 3개의 카드를 하나의 스마트한 변형 세트로 묶어주는 과정입니다.

마우스 드래그로 Desktop, Table, Mobile 카드 프레임 3개를 동시에 모두 선택합니다.
3개가 선택되면 우측 패널에 나타나는 Combine as variants (변형으로 결합) 버튼을 클릭합니다.
화면에 보라색 점선 상자가 생기며 3개의 카드가 하나로 묶입니다. 이 보라색 상자 전체의 이름은 우측 패널 맨 위에서 Card로 지정해 줍니다.
속성 이름 정리: 보라색 점선 상자 테두리를 클릭한 후, 우측 패널 Properties 섹션에 컴퓨터가 자동으로 지어준 Property 1 글자를 더블클릭하여 Device로 예쁘게 바꿔줍니다.

🚀 4단계: 스마트 애니메이트(Smart Animate) 연결하기

기기 종류가 바뀔 때 툭툭 끊기지 않고 스르륵 줄어들거나 늘어나는 움직임을 심어줍니다.

피그마 우측 패널 맨 상단에서 디자인 모드가 아닌 Prototype 탭을 클릭합니다.
보라색 상자 안의 Desktop 카드를 클릭하면 생기는 파란색 + 버튼을 마우스로 드래그하여 Table 카드로 화살표를 연결합니다.
Interaction 설정 창이 뜨면 애니메이션 세팅을 아래와 같이 변경합니다.
- Trigger: On tap (클릭했을 때)
- Action: Change to ➡️ Table
- Animation: 기존 Instant나 Dissolve 대신 Smart animate 선택! (속도는 부드러운 300ms 전후 추천)
동일한 방식으로 Table ➡️ Mobile로 파란 선을 잇고 Smart animate를 적용합니다.
무한 반복 조회를 위해 Mobile ➡️ Desktop으로 다시 파란 선을 연결하고 똑같이 세팅합니다.

🖥️ 5단계: 실전 배치 및 프로토타입 확인

왼쪽 패널의 Assets 탭을 누르고, 방금 만든 스마트 반응형 Card를 드래그하여 실제 작업 중인 스마트폰/웹 프레임 내부에 배치합니다.
피그마 우측 상단의 세모 모양 재생 버튼(▶️, Present)을 눌러 프로토타입 뷰어를 켭니다.
화면에 뜬 카드를 마우스로 툭 툭 클릭해 봅니다!

✨ 결과: 카드를 클릭할 때마다 데스크톱 ➡️ 태블릿 ➡️ 모바일 크기로 모양과 레이아웃이 끊김 없이 스르륵 늘어나고 줄어드는 쫀득한 스마트 애니메이션이 완성됩니다!

💡 요약 노트

스마트 애니메이트는 양쪽 화면의 레이어 이름이 일치해야 제대로 작동한다.
개별 컴포넌트들을 통째로 선택한 뒤 오른쪽 패널의 Combine as variants를 누르면 헤매지 않고 한 번에 세트를 만들 수 있다!

아하, 선생님이 예시로 보여주신 완성본 화면이었군요! 제가 오해했습니다. 완전히 빈 캔버스에서 시작해서 image.png와 image_2.png에 나오는 4가지 토스트 메시지 컴포넌트 세트(인스턴스 속성 포함)를 만들고 애니메이션까지 구현하는 전체 과정을 처음부터 차근차근 함께 해볼게요.

🛠️ 1단계: 토스트 메시지 기본 바(Bar) 만들기

먼저 하나의 토스트 메시지 형태를 완벽하게 디자인합니다.

텍스트 생성: 단축키 T를 누르고 화면을 클릭해 Message.........라고 입력합니다.
오토 레이아웃(Auto Layout) 적용: 텍스트 레이어가 선택된 상태에서 Shift + A를 누릅니다. (텍스트를 감싸는 프레임이 생성됩니다.)
아이콘 넣기:
- image_2.png 우측에 보이는 lucide 아이콘 팩처럼, 사용하실 아이콘(해골, 체크, 인포, 경고, X 버튼 등)을 피그마 플러그인(Iconify 등)이나 컴포넌트에서 가져옵니다.
- 왼쪽에는 상태 아이콘, 가운데는 텍스트, 오른쪽에는 X 아이콘이 가로로 배치되도록 오토 레이아웃 프레임 안에 순서대로 드래그해서 넣습니다.
정렬 및 간격 조절: 우측 레이아웃 패널에서 세로 정렬은 가운데 정렬(Align Center)로 맞추고, 요소 사이의 간격을 적절히(예: 12~16) 줍니다. image.png처럼 가로 길이를 고정하고 싶다면 패널에서 가로 값을 Fixed로 바꾸고 176 Fill 형태처럼 늘려주셔도 됩니다.
스타일 입히기 (기본형 완성): 프레임의 테두리를 둥글게(Corner Radius 예: 8) 만들고, 패딩(여백)을 준 뒤, 우선 기본 배경색(예: 회색)을 칠해줍니다.

🎨 2단계: 4가지 상태 배리언트(Variants) 세트 만들기

이제 이 기본 토스트를 복제해서 4가지 색상 버전으로 확장합니다.

방금 만든 오토 레이아웃 프레임을 선택하고, 상단 중앙의 컴포넌트 아이콘을 눌러 [Create Component]를 합니다. (단축키 Ctrl + Alt + K)
컴포넌트가 된 상태에서 우측 패널의 Properties -> [+] 버튼 -> Variant를 누르거나, 상단 중앙의 [Add Variant] 버튼을 누릅니다. 똑같은 모양의 컴포넌트가 아래에 하나 더 생기며 점선 상자(Component Set)로 묶입니다.
이 작업을 반복하여 총 4개의 배리언트를 만듭니다.
image.png를 참고하여 각 배리언트의 디자인과 색상을 변경합니다:
- 1번 (에러): 배경 레드 계열 + 에러/해골 아이콘 + X 아이콘
- 2번 (성공): 배경 그린 계열 + 체크 아이콘 + X 아이콘
- 3번 (정보): 배경 블루 계열 + i 아이콘 + X 아이콘
- 4번 (경고): 배경 옐로우/올리브 계열 + 경고(!) 아이콘 + X 아이콘
이름 정리: 점선 상자 전체를 선택하고 우측 패널에서 Property 1 이름을 Type으로 바꿉니다. 그리고 각 배리언트를 하나씩 선택해 값을 각각 Error, Success, Info, Warning으로 지정합니다.

⚙️ 3단계: 텍스트 일괄 변경 속성(Component Property) 지정하기

image.png에서 하려고 하셨던 바로 그 단계입니다! 꺼내 쓸 때 글씨를 더 편하게 바꾸기 위한 세팅입니다.

컴포넌트 세트 내부에서 4개의 Message......... 텍스트 레이어만 동시에 선택합니다. (하나를 선택하고 Ctrl이나 Shift를 누른 채 나머지를 클릭하거나, 레이어 패널에서 선택)
우측 디자인 패널의 Content(또는 Typography) 항목 옆을 보면 작은 화살표/타겟 모양 아이콘(Apply text property)이 있습니다. 그걸 클릭합니다.
팝업창(Create property or variable)이 뜨면:
- Name: Label 또는 Message 입력
- Value: Message......... 확인
- [Create property] 버튼을 누릅니다. 이제 글씨를 한 번에 바꿀 수 있는 속성이 연결되었습니다.

🎬 4단계: 화면 배치 및 애니메이션(Prototype) 연결

이제 완성된 토스트 시스템을 실제 화면에 작동시켜 봅니다.

테스트 화면 프레임 만들기: 단축키 F를 눌러 우측에서 모바일 프레임(예: iPhone 15)을 하나 생성합니다. 화면 이름은 Main으로 하겠습니다. 화면 안에 클릭할 "버튼"도 하나 디자인해 둡니다.
토스트 인스턴스 꺼내기: 우리가 만든 컴포넌트 세트 안에서 아무 토스트나 하나 복사(Ctrl + C)해서 Main 프레임 밖(바탕 캔버스)에 붙여넣기(Ctrl + V)합니다.
프로토타입 연결:
- 피그마 우측 상단에서 [Prototype] 탭을 클릭합니다.
- Main 프레임 안에 있는 버튼을 클릭하면 나오는 파란색 + 화살표를 드래그하여, 프레임 밖에 떼어놓은 토스트 인스턴스에 연결합니다.
인터랙션(Interaction Details) 설정:
- Trigger: On click
- Action: Open overlay (토스트를 화면 위에 띄우는 핵심 기능)
- Position: Bottom center (화면 아래쪽에 정렬)
- Animation: Move in 선택 후, 방향은 위쪽 화살표(↑) 선택 (아래에서 위로 올라오는 효과)
- 시간: Ease in and out, 300ms
자동으로 닫히는 효과 추가 (선택):
- 프레임 밖에 있는 토스트 인스턴스를 선택하고, 프로토타입 탭에서 해당 인스턴스의 파란 + 화살표를 드래그하여 자기 자신이나 빈 공간에 놓습니다. (혹은 우측 패널 Interaction에서 + 클릭)
- Trigger: After delay -> 2000ms (2초 뒤)
- Action: Close overlay
- Animation: Move out 선택 후, 방향은 아래쪽 화살표(↓) 선택 (아래로 내려가며 사라짐)

🎉 5단계: 재생하고 테스트하기

우측 상단의 [Preview (▷)] 버튼을 눌러 프로토타입을 실행합니다.
화면의 버튼을 누르면 토스트 메시지가 아래에서 위로 부드럽게 팝업되었다가 2초 뒤 사라지는지 확인합니다.
색상을 바꾸고 싶다면? 캔버스 밖에 있는 토스트 인스턴스를 클릭하고, 우측 디자인 패널에서 Type 속성을 Success나 Error로 바꿔보세요. 프로토타입을 다시 실행하면 바뀐 색상으로 애니메이션이 똑같이 작동합니다!

처음부터 만드시다가 막히는 구간이나 헷갈리는 메뉴 명칭이 있으면 바로 말씀해 주세요. 다시 안내해 드릴게요!

today-i-learned 님의 블로그

[UX/UI] 42. 피그마 (Overlay, Smart Animate): 인터렉션 프로토타이핑