[UI 디자인 숙련] 그리드, 컴포넌트, 클론

📝 레이아웃, 그리드

https://hotchocoba97.tistory.com/20  내용참고

[UXUI 심화 1주차] UI 개념 심화

📝 컴포넌트

1️⃣ 반복되는 UI 디자인 분석

※ 반복적 요소로 재활용 가능한 컴포넌트

▶ 기본 요소_아이템

• 칩, 아이콘, 라디오 버튼, 체크박스, 버튼

▶ 조합 요소_모듈

• 파운데이션 + 파운데이션, 파운데이션 + 컴포넌트
• 카드(이미지 + 텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트 + 버튼)

▶ 섹션

• 컴포넌트 + 컴포넌트 + 패딩
• 네비게이션 바, 앱 바, 탭, 리스트

2️⃣ 개발자 모드로 섹션 분석하기

▶ 안드로이드

1. 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > Pin번호 입력
2. 설정 > 개발자 옵션 > 레이아웃 범위 표시

▶ 웹

• 맥 : ⌥ Option + ⌘command + i
• 윈도우 : F12

📝 UI 클론 디자인

• UI를 클로닝 하면서 디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법 등을 학습할 수 있다
• 전반적인 UI 구조를 파악할 수 있다

▶ UI 화면 구조

❗ 컴포넌트를 블록처럼 설계하면 확장성과 유지 보수가 용이하다

• 재사용성 : 같은 컴포넌트를 여러 곳에 활용할 수 있다
• 유지 보수 용이 : 한번의 수정으로 전체 UI에 반영할 수 있다
• 유연성 : 추가, 삭제하거나 혹은 위치를 변경할 때, 레이아웃에 큰 변화 없이 유연하게 적용할 수 있다