Product Design/오즈코딩스쿨
디자인부트캠프 Chapter 2. DAY 14
you_rim
2025. 3. 25. 20:01
컴포넌트(Component)란?
- 반복되는 요소를 한 번에 관리할 수 있는 재사용 가능한 디자인 단위
- 변경사항을 **마스터(원본) → 인스턴스(복제본)**에 자동 반영 가능
- 버튼, 아이콘, 카드, 네비게이션 등 UI 요소를 체계적으로 관리할 때 사용
컴포넌트 만드는 방법
- 요소 선택 후 Cmd/Ctrl + Alt + K → 컴포넌트로 변환
- 오른쪽 패널에서 이름 설정
- Components 탭 또는 Assets에서 재사용 가능
인스턴스란?
- 컴포넌트를 복제한 객체
- 마스터 컴포넌트의 구조를 유지하면서 일부 속성만 수정 가능
- 색상, 텍스트, 아이콘 등 커스터마이징 가능 (디자인 시스템 기반 작업에 필수)
Variants (상태/스타일 통합)
- 여러 컴포넌트를 하나의 세트로 묶어 상태/사이즈/버전 등을 통합 관리
- 예: Button → Type=primary, Size=sm, State=disabled 등
- 속성(prop) 기반으로 인스턴스에서 빠르게 스타일 변경 가능
컴포넌트 구조화
- 이름 규칙: ComponentName/VariantName 또는 Category/ComponentName
- 그룹화: 아이콘, 버튼, 카드 등 역할별로 Assets 패널에서 정리
- 예: icon/traffic/bus, button/primary/small
활용
- 페이지 전반에 반복되는 UI는 무조건 컴포넌트로 관리
- 디자인 시스템이 있는 경우, 통일성 + 유지보수 효율 극대화
- 개발자와 협업 시 컴포넌트 단위로 전달하면 코드화도 쉬워짐
https://www.krds.go.kr/html/site/utility/utility_03.html
네이밍 원칙 | KRDS 소개 - KRDS
디자인 시스템의 네이밍 규칙은 시스템 운영 및 관리 측면에서 매우 중요한 역할을 한다. 협업의 효율성을 높이며, 기획자, 디자이너, 개발자들이 작업을 명확히 구분하고 빠르게 이해할 수 있
www.krds.go.kr