📌
1. 반복되는 UI 디자인 분석
2. 컴포넌트
3. 실습
4. 과제

1. 반복되는 UI 디자인 분석

UI 디자인 분석을 통해 공통으로 사용되는 요소를 찾고 컴포넌트로 만들 수 있다.

• 여러 화면에서 공통으로 사용되는 UI 요소는 무엇인가?
• 동일한 스타일이나 동작을 가진 요소는 무엇인가?

공통 요소

기본 요소 Item

가장 작은 요소의 컴포넌트
ex. 버튼, 칩, 아이콘, 체크박스 등

조합 요소 Module

기본 요소끼리 조합하거나 기본 요소와 조합 요소를 조합하여 만든 컴포넌트
ex. 카드, 스낵바, 서치바 등

섹션 Section

다수의 조합 요소에 여백을 적용한 것
ex. 네비게이션 바, 앱 바, 캐러셀 탭, 리스트 등

💡

각 요소의 기준을 명확하게 정의하는 것이 중요하다.

개발자 모드

우리가 보는 화면은 개발된 화면을 캡쳐하여 보는 것이기 때문에 어떠한 구조로 만들어졌는지 알 수 없기 때문에 개발자 모드를 활용하여 디자인 구조를 파악한다.

2. 컴포넌트

구성

앨리먼트

더 이상 쪼개지지 않는 가장 작은 단위
ex. 컬러, 타이포그래피, 아이콘, 여백, 곡률 등

컴포넌트

엘리먼트를 조합한 재사용이 가능한 블록 형태의 컴포넌트
ex. 컬러 + 테두리 + 폰트 + 아이콘 + 여백 = 버튼

합성 컴포넌트

컴포넌트끼리 혹은 컴포넌트와 합성 컴포넌트를 조합하여 생성

같은 기능이나 주제를 가진 컴포넌트를 조합하여 합성 컴포넌트를 만들고 이를 이용하여 페이지를 만듦

💡

작은 단위부터 큰 단위 순서대로 작업

네이밍

개발로 활용될 확률이 높기 때문에 영문으로 네이밍한다.

• level : item, module, section
• type : button, card, list, chips
• direction : row, vertical, column, horizontal
• size : small, medium, large, xlarge

에셋 패널

파일의 구조를 반영하여 라이브러리 경로 표시

파일 > 페이지 > 섹션

알파벳순으로 페이지 표시

3. 실습

1️⃣ 넷플릭스 UI 분석

내비게이션 별 화면에서 공통 요소 찾기

공통 요소 용도별로 분류

2️⃣ 컴포넌트 만들기

- 네비게이션 바 컴포넌트

- 카드 컴포넌트

순위를 보여주는 카드 만들기
2-10까지의 숫자는 1보다 너비가 넓기때문에 따로 만들어준다.

숫자와 썸네일 부분에 컨스트레인츠 - 스케일이 적용이 되어있어야 둘을 감싸는 프레임의 크기 변화에 맞춰 크기가 변할 수 있다. (반응형이 적용된다.)

완성 🎉

- 캐러셀 컴포넌트 만들기

완성 🎉

4. 과제

실 서비스에 사용된 카드 컴포넌트 만들기

🎙️느낀점

원래 네비게이션 바 같은 컴포넌트를 만들 때 하나의 탭만 만들고 필요한 아이콘을 모두 인스턴스 스왑을 적용하여 복사 붙여넣기 한 뒤 요소들을 한꺼번에 묶어서 오토레이아웃을 적용하고 네스티드 프로퍼티를 적용했었다.

❗ 강의에서는 종류에 따라 탭을 분리하여 선택됐을 경우 / 아닐 경우를 베리언츠로 적용하고 탭 자체를 인스턴스 스왑으로 설정하여 네비게이션 탭에서 아이콘만 바꾸는 것이 아니라 아예 탭 자체를 바꾸는 방법을 배웠다.
이 방법이 좀 더 효율적으로 탭을 관리할 수 있을 것 같다.

❗ 컨스트레인츠를 적용하는 것을 잘 못 했고 이번 실습을 진행할 때도 컨스트레인츠 패널이 안 떠서 당황했었는데 컨스트레인츠와 오토 레이아웃는 함께 적용이 안 된다는 것을 알았다.
그래서 오토 레이아웃을 제거해줬더니 컨스트레인츠를 적용할 수 있었다.

❗ 수평 드래그를 적용해야할 때 화면 사이즈 (375)를 넘어가는 전체 컴포넌트를 오토레이아웃으로 한 번 더 감싸서 프로토타입에서 가로 스크롤을 적용했는데, 슬라이더 아이템들을 모두 선택하여 오토레이아웃을 적용하고 클립 컨텐트에 체크를 하면 화면 사이즈를 넘어가는 요소들을 숨길 수 있고 프로토타입에서 가로 스크롤을 적용하면 중첩없이 적용할 수 있다.