UI 디자인 레이아웃과 그리드, 컴포넌트 제작

[10/01_To Do]

• UI 디자인 강의 수강
  • 3강 - 레이아웃과 그리드 시스템
  • 4강 - 일관된 UI 디자인을 위한 컴포넌트
  • 5강 - 마무리, UI 클론 디자인

 

3-1. 레이아웃

해상도

• 화면의 정밀도를 나타내는 지표.
• 가로 픽셀 수 X 세로 픽셀 수
• 스크린 점유율을 기준으로 작업 추천 🔗StatCounter(점유율확인사이트)
• 대표적으로 안드로이드 360*800 / ios 375*812

 

일관된 디자인

• 사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록
• 다양한 해상도에 대응할 수 있도록 디자인

 

고정과 가변 영역

• 고정(Fix)
  • 해상도가 커지거나 작아져도 수치값이 일정하게 유지
  • 좌우 마진은 고정
• 가변(Flexible)
  • 비율에 맞게 확대, 축소
  • 디바이스 사이즈에 맞춰 변동되는 부분들
  • 해상도에 따라 크기가 변하는 버튼, 배너와와 같은 이미지는 가변

 

 

3-2. 그리드 시스템

그리드(Grid)

• 컨테이너(Container)
  • 콘텐츠의 폭, 콘텐츠를 감싸고 있는 너비

 

• 컬럼(Column)
  • 콘텐츠를 담고 있는 실제 영역, 콘텐츠를 정렬하고 배치
  • 해상도에 따라 컬럼의 너비는 가변됨
  • 일반적인 컬럼 개수(절댓값X)
    • Mobile : 2~6 (4컬럼을 주로 사용)
    • Tablet : 6~12 (6~8컬럼을 주로 사용)
    • Desktop : 12~16 (12컬럼을 주로 사용)

 

• 거터(Gutter)
  • 컬럼과 컬럼 사이의 간격
  • 일반적인 거터 값
    • Mobile : 8~16
    • Tablet : 16~24
    • Desktop : 24~32

 

• 마진(Margine)
  • 화면의 좌우 여백
  • 일반적인 마진 값
    • Mobile : 16~20
    • Tablet : 20~36
    • Desktop : 24~36
• 그리드 설정
  • 🔗Gridcalculator - 컨테이너 사이즈에 따라 컬럼, 마진, 거터 값 설정 사이트

 

 

반응형 디자인

• 정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경
• 브레이크 포인트
  • 반응형 디자인에서 레이아웃이 변화되는 지점

 

• 브레이크 포인트 설정
  • 대표적인 브레이크 포인트 값
    • Mobile : 0~599
    • Tablet : 600~1024
    • Desktop : 1024~
• 최적화된 그리드, 12컬럼
  • 2, 3, 4, 6 단에 대응할 수 있는 12컬럼은 디자인과 개발에 최적화

 

 

HW. 숙제

레이아웃과 그리드 분석

1️⃣  쿠팡 화면 분석

 

2️⃣  메가박스 모바일 화면 분석

 

 

 

4-1. 디자인 패턴 발견

공통 UI 요소 찾아보기

여러 화면에서 공통으로 사용되는 UI 요소

동일한 스타일이나 동작을 가진 요소

 

• 기본 요소(Item)
  • 가장 작은 요소의 컴포넌트
  • 칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등
• 조합 요소(Module)
  • 기본 요소 + 기본 요소, 기본 요소 + 조합 요소
  • 가드(이미지+텍스트), 서치바(아이콘+입력 필드), Snackbar(텍스트+버튼) 등
• 섹션(Section)
  • 조합 요소 + 조합 요소 + 여백(마진, 패딩)
  • 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등
• 개발자 모드에서 분석하기
  • 안드로이드 개발자 모드
    • 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > pin 번호 입력 >> 설정 > 개발자 옵션 > 레이아웃 범위 표시
  • web 개발자 모드(ios) 
    • ⌥ Option + ⌘command + i 로 진입

 

실습: 실 서비스 UI 뜯어보기

넷플릭스 UI 분석

 

 

4-2. 엘리먼트와 컴포넌트

컴포넌트 구성

• 엘리먼트(Element)
  • 더 이상 쪼개지지 않는 가장 작은 단위
  • 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등
• 컴포넌트(Component)
  • 엘리먼트 + 엘리먼트 를 조합한 재사용이 가능한 블록 형태
• 합성 컴포넌트(Compound Component)
  • 컴포넌트 + 컴포넌트 를 조합한 형태
• 페이지(Page)
  • 합성 컴포넌트를 활용하여 UI 화면 제작

 

컴포넌트 네이밍

• 네이밍은 영문으로 정의
• 사용 맥락에 따른 네이밍

 

• Assets 패널 적용
  • 파일명이 에셋 목록에도 적용됨. 네이밍을 꼭 진행할 것

 

 

4-3. 네비게이션/카드/캐러셀 컴포넌트

실습: 네비게이션 바 컴포넌트

 

실습: 카드, 캐러셀 컴포넌트

 

 

HW. 숙제

넷플릭스 카드 컴포넌트 만들기

 

 

 

5-1. 화면 디자인 실습 홈 화면

UI 화면 구조

• 큰 블록(페이지) → 작은 블록(컴포넌트) 순으로 설계, 작은 블록 → 큰 블록 순으로 제작하는 것이 핵심
• Page → Section → Module 순으로 분석  ▶︎  Item → Module → Section → Page 순으로 제작

 

실습: 실 서비스 디자인 - 홈 화면

 

✅  chip section 컴포넌트 만들기

1️⃣  Button 컴포넌트 제작

1. label 만들고 icon을 붙여 오토레이아웃을 지정한다.
2. 높이값을 8배수로 지정한다.(fixed)
3. gap, pading 값을 4배수로 지정한다.
4. 곡률, 색상을 지정한다.(이때 완전 곡선일 경우 안정하게 999값을 적용시킨다.)
5. 시각적 보정을 위해 pading 값을 조정한다.

2️⃣  chip 컴포넌트 제작

1. 버튼을 종류별로 제작한다.(선택, 선택 안 함, 아이콘 유, 아이콘 무 → 4가지 버튼 제작)
2. 4개의 버튼에 멀티풀 컴포넌트 적용하고, 베리언츠 적용한다.
3. 프로퍼티를 적용한다.(selected-ture/false, configration-label+trailing_icon/label_only, text)

3️⃣  section 제작

1. chip 인스턴스들을 나열한 뒤 오토레이아웃을 적용한다.
2. 가로 값을 디바이스 값인 375로 지정한다.(fixed)
3. gap, pading 값을 적용한다. 이때, 캐러셀이므로 오른쪽엔 패딩 값은 0으로 한다.
4. 프로퍼티 값을 클론에 맞게 수정해준다.
5. section/filter_chip으로 네이밍하고 컴포넌트를 적용시킨다.
6. 에셋에서 만들어진 컴포넌트를 확인한다.

 

 

✅  home 화면 만들기

1. 에셋에 있는 컴포넌트들을 활용하여 홈 화면에 맞게 나열한다.
2. 이때, 빈 공간이 없이 블럭을 쌓듯 나열하는 것이 포인트
3. 모두 나열해 준 뒤, home 프레임을 선택하고 오토레이아웃을 적용한다.
4. 홈 화면 클론 완료