DAY 25. 한 번 만들고 계속 쓰는 UI

About this offer

오늘의 핵심 반복되는 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개 정도를 꺼내 상품명과 가격을 서로 다르게 변경해서 제대로 연결됐는지만 확인한다. 피그마에서 실제 작업 순서 1 Primary 버튼 Day 23의 구매하기 버튼 선택 → Create component → 2개 복제 → Default / Hover / Disabled 모양 제작 → 세 개 모두 선택 → Combine as variants → Property 이름을 State_로 변경 → 값은 _Default / Hover / Disabled → Component Set 이름을 Button/Primary 2 Secondary 버튼 똑같이 진행해서 Button/Secondary 를 만들고 State도 동일하게 Default / Hover / Disabled 로 맞춘다. 3 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가 나와야 함.

Offer details

Provider

velog

Source

velog-rss

Score