[5강] 화면 디자인 실습

메인 화면 디자인 

 

• 만들고자하는 장치의 프리셋을 가져온다.
  
  

 

• 히어로 섹션으로 사용할 프레임을 하나 만들고 크기를 조절한 뒤, 해당 프레임을 선택한 채 드래그해서 홈 화면 안으로 넣고, 좌우 너비를 조정한 뒤  Constraint를 Left and Right로 적용한다.

앱 바 컴포넌트

• 앱 바의 타이틀에 해당하는 텍스트 레이어를 만들고 오토 레이아웃을 적용한다.

 

• 이름은 App Bar로 변경하고, 타이틀 앞과 뒤에 아이콘을 넣어 스타일을 꾸며준다.

 

 

 

• 이후 앱 바 프레임의 길이를 장치의 길이에 맞도록 변경해준다.

 

 

• 이후 타이틀의 리사이징 값을 Fill container 로 적용한다.

 

 

• 앱 바를 컴포넌트로 변환한 뒤, 텍스트 프로퍼티를 선택해서 이름은 Title, 값은 타이틀이라고 작성한 뒤 해당 프로퍼티를 적용한다.

 

• 앱 바를 선택하고, 프로퍼티에서 배리언츠를 선택,  배리언츠 프로퍼티 이름을 Style 로 변경한다.

 

•  + 를 눌러 컴포넌트를 하나 더 만들고, 새로 만들어진 배리언츠의 스타일 이름을 `Home` 으로 변경한다.

 

 

• 이전에 만들어진 배리언츠와 차이를  주기 위해 Home 배리언츠의 스타일을 변경한다.

 

• 홈 화면 디자인이 있는 페이지로 이동한다. 그리고 왼쪽 레이어 패널에서 에셋 패널로 이동한다.

 

 

 

• App Bar를 검색하여 찾은 뒤, 드래그해서 인스턴스를 생성한 다음 홈 화면 디자인 안으로 넣고 위치를 알 맞게 조정한다.

 

 

• 잘 적용 되었으면, App Bar를 선택하고 값을 변경하면 잘 적용되는 모습을 확인할 수 있다.

---

목록 생성

 

• 홈 화면과 같은 사이즈의 프레임을 만들고 이름을 목록 화면으로 변경한다.

 

 

• 앱 바 컴포넌트를 삽입하고, 위치와 크기를 맞춰준다.

 

 

• 텍스트 레이어를 만들고, 오토레이아웃을 지정해 이름을 List로 변경한 다음 아이콘과 디자인을 적용한다.

 

 

 

• 리스트 제목의 리사이징 값을 Fill container 로 적용하고 리스트의 너비를 프레임에 맞춰서 늘린다.

 

 

 

• 썸네일이 들어갈 위치에 프레임을 넣어주고, 컴포넌트로 만든 뒤 리스트 제목에 텍스트 프로퍼티를 적용한다.

 

• 화면 디자인 페이지로 넘어와서, 리스트 컴포넌트의 인스턴스를 가져와서, 프레임에 맞춰 정렬한 다음 여러 개로 복제한다.

 

복제한 인스턴스들을 오토 레이아웃으로 묶고, 이름을 List Container로 변경한다.

 

• 리스트 컨테이너를 복사해서 홈 화면 디자인 안에 넣어준다.

 

• 홈 화면 디자인 안에 텍스트 레이어를 추가한다.

 

• 목록 화면에도 동일하게 List Container를 맞춰 적용한다.

---

상세 화면 만들기

 

 

• 목록 화면 옆에 같은 사이즈의 프레임을 새로 만들고, 프레임 이름을 `상세 화면` 으로 변경

 

 

• 앱 바 컴포넌트를 삽입하고, 상단 모서리에 맞춰 주고, 썸네일에 해당하는 부분을 프레임으로 만들어준다.

 

 

• 상품 명 및 정보 텍스트를 넣는다.

 

• 버튼 컴포넌트의 인스턴스를 들고와서 넣고, 오토레이아웃으로 묶은 뒤 이름을 Action이라고 바꾼다.

 

 

• 프레임에 맞춰서 크기를 늘린 뒤 화면 하단으로 내린다.