담 이슈로 병원에 갔기 때문에 내용이 적다...ㅠ

📌
1. 앱 바 컴포넌트
2. 리스트 컴포넌트
3. 화면 제작 실습
4. 스크롤 컨테이너

1. 앱 바 컴포넌트

컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트
앱 화면의 상단에 고정되어 현재 화면의 이름을 알려주면서, 이전화면으로 돌아갈 수 있는 버튼이 있기도 하고 현재화면에서 할 수 있는 보조 기능을 제공하기도 한다.

머티리얼 디자인에서는 앱 바 (App Bar)라고 부르지만, iOS 에서는 네비게이션 바 (Navigation Bar)라고도 불리며 디자인 시스템마다 부르는 이름이 모두 다르다.

구조

• 컨테이너 : 요소들을 감싸는 박스

• 타이틀 : 현재 화면의 제목

• 힌트 텍스트 : 현재 화면의 부가적인 설명

• 리딩 엘리먼트 : 앱 바의 앞쪽 (좌측) 에 위치하는 요소, 아이콘, 버튼 등

• 트레일링 엘리먼트 : 앱 바의 뒤쪽 (우측) 에 위치하는 요소, 아이콘, 버튼 등

📍Tip

1. 글자 레이어를 입력하고 오토레이아웃을 적용한 후 너비를 늘린 뒤에 글자 레이어의 크기를 따로 입력할 필요없이 Fill로 변경해주면 아이콘 너비를 제외한 나머지 너비를 채워준다.
2. 위의 요소는 기본 앱 바이고 아래의 요소는 홈화면에서의 앱 바이다.
   이때 베리언트를 추가하고 속성 이름을 Style로 적용하고 속성값을 각각 Default, Home 으로 지정한다.
3. Text 프로퍼티 추가 및 화면 제목에 적용

2. 리스트 컴포넌트

컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용
ex. 쇼핑 앱의 상품 목록 , 배달앱의 가게 목록 등

구조

• 라벨 : 리스트 제목

• 설명 : 리스트의 보조 설명

• 리딩 엘리먼트

• 트레일링 엘리먼트

📍Tip

1. 리딩 엘리먼트로 사진이 들어갈 자리 만들어둔다.
2. 텍스트 프로퍼티 추가 및 리스트 제목에 적용
3. 나중에 필요하다면 아이콘에 Instance Swap 추가

3. 화면 제작 실습

📍Tip

1. 프레임을 선택하고 프레임 패널에서 원하는 사이즈를 선택하면 빠르게 만들 수 있다.
   (강의에서는 iphone 13 mini로 제작)
2. 필요한 요소들을 이미 컴포넌트로 만들어두었다면 좌측 패널의 Page 옆 Assets를 클릭한 후 가져올 수 있다.
   (좀 더 편하게 작업하고 싶다면 프로퍼티 적용 꼭 하기)
3. 각 요소에 좌우 여백 20px 씩 적용하기
   (글로벌 마진이라고도 불리며 사이즈가 달라도 잘리지 않도록 하고 나열할 때도 통일성을 가진다.)

- 홈 화면

앱 바 컴포넌트 아래의 회색 직사각형을 히어로 섹션이라고 한다.
히어로 섹션이란 메인화면의 최상단 영역을 의미한다.

- 목록 화면

- 상세설명 화면

가장 하단의 버튼은 어제 만들어둔 버튼 컴포넌트로 가져와서 오토레이 아웃을 적용한다.
그러고 상하, 좌우 여백에 20px 씩 적용하여 프레임 맨 하단에 딱 맞게 붙여도 여백이 있어 어색하게 보이지 않는다.

- 로그인 화면

4. 스크롤 컨테이너

오버 플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능
(프로토 타입 패널에서 적용)

조건

1. 스크롤이 되게 하려면 프레임보다 컨텐츠가 더 길어서 넘쳐야한다.
2. 스크롤을 만드려면 실제로 스크롤 되어야하는 컨텐츠와 스크롤 속성을 적용할 컨테이너가 있어야한다.

📌오버플로우 (Overflow)

프레임 밖으로 컨텐츠가 넘어가는 것
프레임에 오버 플로우가 발생하면, 프레임 밖으로 넘어간 컨텐츠를 스크롤로 보여줄 수 있다.

종류

• No scrolling
  스크롤 하지 않는다. 기본값
• Horizontal
  내부의 콘텐츠가 가로로 넘칠 때, 가로 방향으로 스크롤
• Vertical
  내부의 컨텐츠가 세로로 넘칠 때, 세로 방향으로 스크롤
• Both directions
  가로 및 세로 방향으로 모두 스크롤

방법

1. 프레임 안에 오버 플로우(넘치는)되는 요소가 있는지 확인
2. 해당 프레임 클릭한 후 우측 패널의 Design에서 Prototype으로 이동
3. Scroll behavior 에서 원하는 방향 스크롤 선택
4. 해당 프레임 클릭하고 프리뷰 (Shift + Scroll bar)해서 확인

🍙다음 시간에 학습할 내용
화면 디자인 연결하기
디자인 핸드오프
디자인 공유하기