[UI 디자인] 43. 피그마 디자인 시스템 구축 실습 (컴포넌트, color variables, styles, slot 등)

📅 2026.06.17(수) - 43일차

디자인 시스템 구축 시 흔히 범하는 오류인 '한 땀 한 땀 뜨개질하는 단순 노동' 대신 효
검증된 템플릿(KRDS 등)과 피그마 AI Agent를 레고 판처럼 활용하여 세팅 시간을 획기적으로 단축하는 것이 핵심.
AI 기반 변수(Variables) 세팅 프롬프트부터 실제 서비스 화면 컴포넌트 분해 및 조립, 그리고 개발자 핸드오프를 위한 프리텐다드(Pretendard) 웹폰트 적용법까지의 전체 실습 가이드.

🚀 1단계: AI Agent로 기초 재료(Foundation) 세팅하기

디자인 시스템의 뼈대가 되는 컬러, 모서리 곡률(Radius), 간격(Spacing) 추출 작업을 AI에게 위임하여 단순 노동 방지.

1. Local Variables & Text Style 자동 생성

화면의 레퍼런스를 분석하여 변수를 추출할 때, 피그마 AI에게 명확한 기준을 제시하며 명령 실행.

💬 AI Agent 1차 요청 프롬프트: "선택한 레퍼런스 화면을 분석해서 프로젝트에 필요한 Color, Radius, Spacing 속성들을 파악하고, 이를 피그마 Local Variables로 일괄 생성해줘. 특히 간격과 반지름은 시스템화된 수치 변수로 묶어줘."

AI 수행 결과: 총 52개의 Variables(Colors 34개, Radius 9개, Spacing 9개) 생성 및 수천 개의 요소에 바인딩(Strokes, Fills, Padding, Gap) 자동 완료.

2. 강사님 피드백 반영: Text Style 구조화

Variables에는 폰트의 크기, 행간 등 개별 수치만 담기므로 통째로 묶은 'Text Style'은 따로 지시 필요. 강사님 피드백 반영 후 추가 프롬프트 작성.

💬 강사님 피드백 반영 2차 프롬프트: "방금 만든 Variables 외에, 선택한 요소에 사용된 텍스트 크기와 행간 등을 분석해서 h0, h1, h2, body, caption 같은 명확한 계층의 Text Styles로 등록해줘. 그리고 화면의 각 텍스트 레이어에도 이 생성된 Text Style을 자동으로 적용(Apply)해줘."

3. OKLCH 컬러 스케일 확장

사람의 눈이 느끼는 밝기 기준의 OKLCH 포맷 적용을 추가 지시하여 정밀한 컬러 시스템 구축 및 다크모드 대응력 확보.

💬 OKLCH 반영 추가 프롬프트: "이 스타일 가이드 구조를 기반으로, 앞서 분석한 컬러들을 OKLCH 포맷을 활용해 지각적으로 균일한(Perceptually uniform) 쉐이드 스케일로 확장해줘. color/red/050~900과 같은 Primitive Variables로 먼저 등록하고, 이를 다시 스타일 가이드의 각 컬러 칩과 요소에 매핑해 줘."

💡 꿀팁: AI 오작동을 막는 'Few-shot' 가이드 (Color Example Chip)

AI의 네이밍이나 레이아웃 유실을 막기 위해 직접 완벽한 규칙을 가진 '컬러 칩 샘플 1 세트'를 제작하여 기준점 제시.

💬 Few-shot 학습용 프롬프트: "내가 만든 이 컬러 칩 샘플의 레이아웃, 네이밍 규칙(ex: primitive/red/500), 그리고 OKLCH 변수 바인딩 구조를 완벽히 학습해 줘. 그리고 이 규칙에 따라 나머지 blue, green, gray, orange 계열의 50부터 900까지의 전체 컬러 스케일 칩들을 자동으로 생성해서 스타일 가이드로 정렬해 줘."

실무 마인드셋: 디자이너는 '규칙(시스템)' 설계, 노가다는 'AI' 전담.

🎨 2단계: 스타일 가이드(Style Guide) 초고속 문서화

컴포넌트 제작 전, 기본 규칙들을 시각적으로 한눈에 파악할 수 있는 Style Guide 페이지 빌드.

1. 커뮤니티 템플릿 리모델링 + AI 매핑

피그마 커뮤니티의 우수한 Style guide나 KRDS(공공디자인 가이드라인) 템플릿 레이아웃 복사(Ctrl+C) 및 붙여넣기. 이후 AI에게 가이드 프레임 업데이트 지시.

💬 스타일 가이드 빌드용 프롬프트: "이 템플릿의 레이아웃 구조를 기반으로, 앞서 우리가 등록한 Local Variables(Color, Spacing, Radius 등)와 Text Styles 데이터를 매핑해서 우리 프로젝트에 맞는 스타일 가이드 초안으로 업데이트해 줘. 카드에 사용된 테두리 두께(Border stroke)와 그림자 효과(Drop shadow)도 분석해서 각각 Stroke Variables와 Effect Styles로 등록해줘."

2. 가이드에 포함해야 할 필수 디테일

Border (테두리 두께): Border/Thin (1px) - 일반 카드 및 디바이더, Border/Medium (2px) - 포커스 및 선택 상태 등으로 시스템화.
그림자 (Effects/Shadow): 위계(Elevation) 표현을 위해 카드용(Low), 드롭다운용(Medium), 모달창용(High) 이펙트 스타일 등록.

🧱 3단계: 원자(Atom) 단위부터 컴포넌트 쪼개고 조립하기

실제 주식 랭킹 대시보드 화면을 바탕으로, 가장 작은 단위부터 큰 상자 순서대로 오토레이아웃(Shift + A)을 활용하여 조립.

[Level 1] 배지(Badge) 컴포넌트

화면의 '코스닥', '코스피' 같은 동그란 텍스트 태그.

T로 텍스트 작성 후 Shift + A로 오토레이아웃 적용.
배경색(Fill)에 color/primary 매핑, 곡률(Corner Radius)에 고정 변수 Radius/pill(999) 연결로 완벽한 원형 구현.
Create Component(❖) 실행 후 이름을 Badge / Stock Type으로 지정.

[Level 2] 시그널 뉴스 칩(Signal Chip) 컴포넌트

종목 아래에 배치된 연한 푸른빛의 긴 텍스트 상자.

문장 타이핑 후 Shift + A 실행.
배경색은 color/surface, 곡률은 Radius/xs(4px) 연결.
부모 상자 크기에 맞춰 늘어나도록 가로 크기를 Fill container로 설정한 뒤 컴포넌트화(Chip / Signal News).

[Level 3] 리스트 아이템(List Item) 컴포넌트

순위, 종목명, 가격이 한 줄로 묶이는 핵심 UI 레이어.

왼쪽 그룹 묶기: 순위 텍스트 + Badge 인스턴스 + 종목명 일괄 선택 후 Shift + A 실행 (간격은 spacing/2(8px) 매핑) ➡️ Left_Area
오른쪽 그룹 묶기: 위아래 구조의 등락률(+8.37%)과 가격 선택 후 Shift + A 실행, 방향은 세로 화살표(↓) 및 우측 정렬 설정 ➡️ Right_Area
한 줄로 합치기: Left_Area와 Right_Area 동시 선택 후 다시 한번 Shift + A 실행.
양 끝 밀어내기: 가로 간격 지정을 Auto (Space between)로 변경하거나 Left_Area를 Fill container로 설정하여 가격 영역을 우측 끝으로 밀착.
컴포넌트화 실행 후 이름을 List Item / Stock Row로 지정.

📥 4단계: 뜨개질을 완벽히 끝내는 '슬롯(Slot) 컴포넌트'와 Visibility 제어 설계

실습 화면 내 1번 종목 아래에만 '시그널 뉴스 칩'이 존재하고 2~5번 아래는 비어 있는 상태. 추후 다른 요소를 유연하게 추가/삭제하기 위해 컴포넌트를 깨부수는(Detach) 대신 슬롯(Slot) 개념과 레이어 토글(Visibility) 조합 적용.

1. 슬롯(Slot)의 정의

컴포넌트 내부에 "추후 언제든 원하는 다른 부품으로 갈아 끼울 수 있도록 비워둔 만능 보관함(Placeholder)"을 의미.

2. 컴포넌트 내부에서 슬롯 '껐다 켰다' 구조 설계

텅 빈 오토레이아웃 사각형 생성 후 _Slot / Default 명칭으로 컴포넌트화. 메인 리스트 아이템 컴포넌트 내부 하단에 해당 인스턴스를 배치한 뒤 피그마 AI에게 설계 요청.

💬 슬롯 및 Visibility 매핑용 프롬프트: "내가 생성한 List Item / Stock Row 컴포넌트 하단에 가로 Fill container 속성을 가진 _Slot / Default 인스턴스를 중첩(Nested)해줘. 이 슬롯 영역이 평소(Default)에는 화면에서 숨김(Hidden) 처리되어 부모 오토레이아웃 크기에 영향을 주지 않다가, 인스턴스 속성(Instance Property)의 Boolean(True/False) 설정을 통해 우측 패널에서 언제든 켜고 끌 수 있도록 구조를 잡아줘."

3. 슬롯 오프/온(Toggle) 제어의 효과

불필요한 공백 제거 (Hidden): 뉴스 칩이 없는 영역(2~5번 종목)에서는 우측 패널의 Show Slot 스위치를 False(꺼짐)로 변경. 오토레이아웃 트리거로 인해 공백 없이 상자가 밀착됨.
필요할 때만 활성화 (Visible): 내용물 삽입 시 토글 스위치를 True(켜짐)로 변경. 슬롯 공간 노출 후 Swap Instance 기능을 통해 Chip / Signal News 컴포넌트로 즉시 교체. 단 하나의 마스터 컴포넌트만으로 다형성 레이아웃 커버 가능.

🎨 5단계: 디자인과 개발의 싱크를 맞추는 프리텐다드(Pretendard) 폰트 세팅

디자인 시스템의 타이포그래피 스펙을 코드 레벨과 일치시키기 위해 오픈소스 서체인 프리텐다드(Pretendard) 가이드라인 적용.

1. 피그마 환경을 위한 글꼴 다운로드 및 설치하는 법

폰트 패키지 다운로드: Pretendard 공식 GitHub 레포지토리 접속 후 최신 버전 파일(.otf 또는 .ttf) 다운로드.
로컬 PC 설치: 다운로드한 폰트 파일을 전체 선택 후 마우스 우클릭 ➡️ [설치] 또는 [모든 사용자용 설치] 클릭.
피그마 반영: 피그마 데스크톱 앱 및 웹 브라우저 재시작. 폰트 패밀리 리스트에서 Pretendard 서체 활성화 확인 후 사용 가능.

2. 웹 개발 환경을 위한 웹폰트(CDN) 연동

개발 단계에서 파일 다운로드 없이 고속 로드를 위해 CDN(Content Delivery Network) 활용. 기본 추천 경로인 jsDelivr 외에 cdnjs, UNPKG 선택 가능.

프로젝트 HTML의 <head> 태그 내 아래 코드 삽입. 사용하는 font-family 명칭은 Pretendard.

HTML

<!-- HTML에 Pretendard 웹폰트 CDN 링크 추가 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />

CSS

/* CSS 적용 예시 */
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

🏷️ 6단계: 협업 효율을 높이는 '컴포넌트 잘 활용하기 & 라벨 잘 달기'

디자인 시스템은 제작보다 관리가 더 중요. 개발자 모드(Dev Mode) 소통 비용 최소화를 위한 컴포넌트 활용 및 라벨링 핵심 규칙.

1. 컴포넌트(Component) 제대로 활용하기

인스턴스 분리 금지(No Detach): 페이지 조립 시 컴포넌트를 깨부수는(Detach Instance) 행위 금지. 변형이 필요한 경우 슬롯(Slot)이나 배리언트(Variants) 구조를 활용하여 순정 상태 유지.
단일 출처 원칙(Single Source of Truth): 마스터 컴포넌트(❖) 한 곳에서 모든 변경 사항이 제어되도록 화면에는 항상 복사본(◇)만 배치.

2. 라벨(Labeling) 잘 달기 규칙 중요성

협업을 위한 인스턴스 네이밍: 컴포넌트 이름은 기분대로 짓지 않고 슬래시(/)를 이용해 카테고리 / 컴포넌트명 / 상태 구조로 명확하게 구조화. (ex: List Item / Stock Row / Default, Button / Primary / Hover).
속성(Property) 명확화: 슬롯 제어 토글 명칭을 Show Slot = True/False와 같은 Boolean 타입 라벨로 선언하여 개발자가 코드로 직관화할 수 있는 환경 제공. 라벨을 명확하게 다는 것만으로도 디자인 시스템 핸드오프 시 발생하는 소통 비용 90% 이상 절감 가능.

🌐 7단계: 실무자들의 치트키, 원본 SVG 소스 추출 및 GNB 빌드

1. 개발자 도구(F12)로 원본 SVG 추출하기

레퍼런스 웹페이지의 아이콘 및 로고를 깨짐 없는 벡터 데이터로 획득하는 방법.

타깃 로고 위에서 우클릭 ➡️ 검사 실행.
하이라이트된 HTML 코드 인근의 <svg> 태그 탐색.
태그 위에서 우클릭 ➡️ [Copy] ➡️ [Copy element] 선택.
피그마 캔버스 상에서 Ctrl + V 실행 시 완벽한 벡터 그래픽 에셋 입수 완료.

2. GNB(Global Navigation Bar) 조립

추출한 로고 및 Shift + I(Lucide Icons 플러그인) 기반 햄버거 버튼(☰), 마이페이지(👤) 아이콘 정렬 후 Shift + A 실행. 간격을 Auto로 지정하여 양 끝단 정렬 후 컴포넌트화(GNB / Main Header).

🛠️ 8단계: 아이콘을 'Nested Instance'로 관리해야 하는 진짜 이유

내부 아이콘 에셋 배치 시 벡터 패스로 분해하지 않고 Nested Instance(하위 인스턴스) 구조를 유지해야 하는 기술적 이유.

Swap Instance 편의성: 컴포넌트화된 상태에서도 우측 패널 검색을 통해 단 한 번의 클릭만으로 타 아이콘 교체 가능.
색상 오버라이드(Overrides) 유지: 아이콘 에셋 사양 변경 시에도 사전에 매핑해 둔 브랜드 세만틱 컬러(파란색, 회색 등) 초기화 방지.
바운딩 박스 고정: 아이콘 형태 변화와 무관하게 원본 프레임 규격(24x24 등)이 고정되어 컴포넌트 전체 여백 및 정렬 상태 보존.
개발자 모드(Dev Mode) 최적화: 코드 레벨의 컴포넌트 호출 구조와 피그마 에셋 구조가 1:1 매핑되어 핸드오프 효율 극대화.

🏁 최종 화면(Page) 완성

컴포넌트 공정에서 생산된 부품들을 최종 조립식 완제품 프레임으로 제작하는 단계. 모바일 규격의 빈 프레임(F) 생성.

최상단 영역에 GNB / Main Header 인스턴스 배치.
그 아래 레이어에 검색창(Input) 배치.
하단 영역에 List Item / Stock Row 인스턴스를 수직 방향으로 5개 적층 (기본 상태는 슬롯이 꺼진 간결한 리스트 형태).
[Slot & Visibility 활용] 1번 종목 인스턴스 선택 후 우측 디자인 패널 내 슬롯 토글 속성 On 변경. 슬롯 영역 활성화 확인 후 Swap Instance 기능을 통해 Chip / Signal News 컴포넌트로 교체. 오토레이아웃 연쇄 반응으로 2~5번 요소 자동 다운 밀림 확인.
전체 레이어 결합 후 최종 Shift + A 실행으로 데이터 오버라이드 시 레이아웃 균열이 전혀 없는 완벽한 대시보드 화면 빌드 완료.

✍️ 실습 후기 및 에러 핸들링 팁

Figma 작업 중 텍스트 스타일 수정 불가 현상: 우측 패널 Typography 영역 내 타 배리어블(ex: #radius/3xl 등) 오인 바인딩 여부 확인 필요. AI 자동 생성 과정의 충돌 칩일 가능성이 높으므로 해당 링크 해제(Detach 🔗) 또는 올바른 Text Style 지정으로 해결 가능.

단순 뜨개질식 작업 지양 및 정확한 로컬 폰트 설치 및 웹폰트 스펙 연동(Pretendard GitHub), 슬롯 구조 설계와 Visibility 제어, 명확한 컴포넌트 구조화 및 라벨링 시스템 도입이 진정한 UI/UX 디자인 시스템의 종착지.

today-i-learned 님의 블로그