오늘의 핵심
반복되는 UI는 복사해서 쓰는 게 아니라 Component로 원본을 만들고 Instance를 꺼내 쓴다.
같은 요소의 상태 차이는 Variant로 묶어서 관리한다.
01. Component — 원본 하나, 복사본은 여러 개
버튼이나 카드처럼 여러 화면에서 반복해서 사용하는 UI 요소를 Component로 등록한다.
- Main Component = 원본
- Instance = 원본을 가져와 사용하는 복사본
- 원본의 여백·크기·구조 등을 수정하면 Instance에도 반영된다.
- Instance에서는 텍스트나 일부 속성처럼 내용만 다르게 사용할 수 있다.
즉,
❌ 버튼을 화면마다 복붙해서 각각 관리
⭕ 버튼 하나를 Component로 만들고 Instance를 여러 번 사용
2번 이상 반복되는 요소부터 컴포넌트화한다.
02. Instance — Assets에서 꺼내 사용
컴포넌트를 만든 뒤에는 새로 복붙하지 않고 Assets → 해당 Component를 드래그해서 사용한다.
여기서 중요한 구분은:
내용은 Instance에서 / 구조는 Main Component에서
예를 들어 제품 카드라면 Instance마다
- 상품명
- 가격
- 이미지
같은 내용은 바꿔도 된다.
반대로
- 카드 Padding
- 요소 간 Gap
- 전체 크기 규칙
같이 모든 카드가 공유해야 하는 구조는 Main Component에서 수정하는 것이 좋다.
03. Variant — 하나의 UI에 여러 상태 넣기
버튼은 하나의 디자인만 있는 게 아니라 상태에 따라 존재한다.
그래서,
Default / Hover / Disabled
이 3개를 만들어 하나의 Component Set으로 묶는다.
흐름은:
버튼 제작 → 3개 복제 → 상태별 디자인 변경 → 각각 Component → 3개 선택 → Combine as variants
이렇게 되면 버튼 하나 안에서 State 값만 바꿔 상태를 전환할 수 있다.
04. Variant 이름은 속성=값
❌ 잘못된 방식
버튼1 / 버튼2 / 버튼3
⭕ 옳은 방식
State=Default
State=Hover
State=Disabled
종류까지 여러 개라면:
Type=Primary
Type=Secondary
크기까지 관리한다면:
Size=Large
Size=Medium
즉 무엇이 달라지는지 = 어떤 값인지가 이름만 보고 보여야 한다.
영어를 자주 쓰는 듯.
05. 오늘자 과제
강의에선 Type + State를 합치면 6개가 된다는 예시가 나오지만, 직접 진행하는 과제에서는 간략하게 진행되었다.
버튼 종류 자체를 별도 Component Set으로 나눠서:
Button/Primary
- Default
- Hover
- Disabled
Button/Secondary
- Default
- Hover
- Disabled
이렇게 만든다.
즉, 버튼 2종 × 상태 3개 = 총 6개 버튼 디자인, 하지만 Component Set은 2개라고 이해하면 된다.
| 만들 것 | 이름 | Variant |
|---|---|---|
| 구매하기 버튼 | Button/Primary | Default / Hover / Disabled |
| 장바구니 버튼 | Button/Secondary | Default / Hover / Disabled |
| 제품 카드 | Card/Product | 없음 |
최종 결과물은 컴포넌트 3종.
카드는 Variant가 필요 없고, Instance 2개 정도를 꺼내 상품명과 가격을 서로 다르게 변경해서 제대로 연결됐는지만 확인한다.
피그마에서 실제 작업 순서
① Primary 버튼
Day 23의 구매하기 버튼 선택
→ Create component
→ 2개 복제
→ Default / Hover / Disabled 모양 제작
→ 세 개 모두 선택
→ Combine as variants
→ Property 이름을 State로 변경
→ 값은 Default / Hover / Disabled
→ Component Set 이름을 Button/Primary
② Secondary 버튼
똑같이 진행해서
Button/Secondary
를 만들고 State도 동일하게
Default / Hover / Disabled
로 맞춘다.
③ Product Card
Day 23 카드 하나 선택
→ Create component
→ 이름 Card/Product
그다음 Assets에서 Card/Product를 2개 꺼내서
Instance A
딩독 마약김밥
18,900원
Instance B
딩독 마약햄버거
16,900원
같은 식으로 텍스트만 다르게 만든다.
그리고 Main Component의 Padding이나 Gap을 한 번 변경해서 두 Instance가 동시에 따라오는지 확인한다.
⭐ 오늘 기억해둘 것
1. UI 요소를 컴포넌트로 등록한다.
원본 하나, 인스턴스 여럿, 2번 이상 쓰는 것만.
2. 상태는 Variant로 모은다.
State = Default / Hover / Disabled. 속성=값으로 이름을 적는다.
3.버튼 2종, 카드 1종을 점검한다.
원본 수정, 상대 전환, 스타일 유지. Button, Card가 나와야 함.
