📍목차
1. 반응형 vs 적응형
2. 그리드
3. 컴포넌트, 인스턴스
4. 디자인 시스템 구조
1. 반응형 vs 적응형
| 반응형 (Responsive) | 적응형 (Adaptive) |
| - 유저의 해상도에 맞는 적절한 사이즈의 화면을 보여주는 방식 | - 각 해상도에 맞춘 화면을 개별로 제작하는 방식 |
| - 제작된 웹사이트 하나로 다양한 기기에 대응할 수 있고, 하나의 코드로 대응이 가능 - 모든 화면에서 일관된 콘텐츠 경험을 줄 수 있다. |
- 기기별 최적화된 맞춤 디자인과 맞춤 경험 제공 가능 - 고정된 화면들을 만들기 때문에 초기 기획과 디자인이 편리 - 로딩 속도가 빠름 |
| - 모든 기기에 대응해야하기 때문에 기기별 웹사이트가 작동되는 방식에 통제가 어려울 수 있음 - 디자인에 더 많은 기간과 지식이 필요 |
- 기기별로 화면을 따로 만들어야 해서 유지보수에 불리 - 모든 기기에 대한 대응이 어려울 수 있음 |
2. 그리드
그리드란?
Layout : 화면 크기, 텍스트, 이미지, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것
Grid System: 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙 (그리드를 활용하면 시각적 통일성을 줄 수 있다.)
8배수 그리드 / 4배수 그리드
실습
3. 컴포넌트, 인스턴스
| 컴포넌트 | 인스턴스 |
| 디자인에서 반복적으로 사용하는 요소를 하나로 묶어 재사용 가능하게 만든 디자인 템플릿 |
원본 컨포넌트를 복제한 오브젝트 |
| 여기저기 흩어져 있는 디자인 요소를 한번에 수정하고 변경할 수 있다. ex. 버튼, 텍스트 필드, 캐러셀 콘텐츠 |
위치, 텍스트, 색상 오버라이드 가능 |
| 인스턴스의 색상, 크기, 형태 변화에 영향을 준다 | 인스턴스의 속성을 변경하면 원본 컨포넌트에는 영향을 주지 않음 |
컨포넌트 등록
1. 상단 컨포넌트 아이콘 클릭
2. 단축키: cmd + option + k
컴포넌트 실습
4. 디자인 시스템 구조
1) 디자인 시스템
- 디자인시스템은 디자인과 개발에 사용되는 일관된 컴포넌트, 가이드라인, 디자인 가치를 포괄하는 체계적인 구조
- 디자인 시스템을 통해 더 빠르고 효율적으로 디자인 결정을 내리며 프로젝트의 일관성을 유지할 수 있다.
2) 디자인 시스템 구조
디자인 시스템은 기업마다 추구하는 가치와 제품, 서비스에 따라 다양한 구조를 가진다.
일반적으로 개요, 파운데이션, 컴포넌트, 패턴, 기타 등으로 구성할 수 있다.
| Foundation | Components | Patterns | Templates | Style Guidelines |
| 색상 타이포그래피 간격 / 레이아웃 아이콘 모션 접근성  |
버튼 폼 요소 토스트 / 모달 복합 컨포넌트  |
로그인 패턴 검색 필터링 테이블 정렬  |
대시보드 템플릿 목록 페이지 온보딩 화면  |
Foundation을 중심으로 전체 스타일을 설명하는 문서 |
'PRODUCT DESIGNER > Daily 🫧' 카테고리의 다른 글
| [Day 18] 디자인 프로세스 & 베리언트 실습 2 (0) | 2025.10.07 |
|---|---|
| [Day 17] 웹 & 베리언트 실습 (0) | 2025.10.07 |
| [Day 13-14] Basic Figma (0) | 2025.10.02 |
| [Day 12] 와이어프레임 및 워크플로우 설계 (0) | 2025.09.30 |
| [Day 11] UXUI 개념 입문 (1) | 2025.09.30 |