디자인 시스템 제작으로 Toss App 클론하기

[10/02_To Do]

• UI 디자인 강의 수강
  • 5강 - 마무리, UI 클론 디자인
  • 5강 - HW. 숙제 토스 클론 디자인

 

5-2. 화면 디자인 실습 목록 화면

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

✅  list 컴포넌트 만들기

리스트를 구성하는 아이템은 item/list 라고 명명한다.

에셋에서 확인해주면 item 서브 폴더 안에 item/list 컴포넌트가 위치한다.

슬레쉬로 서브 폴더를 만들 수 있는 것을 배웠다.

 

 

5-3. 화면 디자인 실습 상세 화면

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

✅  tap 컴포넌트 만들기

선택된 tap에 인디케이터가 있는 경우에는 인디케이터를 먼저 제작하고 컴포넌트로 만들어준다.

라벨과 오토레아아웃 해준 뒤 높이값을 정해주고(Fixed) 얼라인먼트를 오토값으로 설정해준다.

 

 

 

HW. 숙제

토스 클론 디자인

 

1️⃣  반복되는 UI 요소 분석

1. 토스의 3가지 탭 화면에서 반복되는 section을 찾고, 그 안에 또 반복되는 module을 찾아 분석하였다.
2. module은 기능에 따라 분류하였다.

좌: 탭별 section / 우: 기능별 module

 

2️⃣  디자인 시스템 제작

1. 컬러와 타이포그래피 파운데이션을 제작하여 스타일에서 사용할 수 있도록 구성하였다.
2. 앞서 기능별로 분류한 module의 컴포넌트를 제작하였다.
3. 컴포넌트의 네이밍은 띄어쓰기는 언더바(_), item 수납을 위한 서브폴더는 슬래쉬(item/)로 명명하였다.

제작한 Foundation

제작한 component

 

3️⃣  주요 UI 화면 클론

1. 컴포넌트를 활용하여 토스의 3가지 탭 화면을 제작하였다.
2. 활용한 컴포넌트 자체에 여백도 포함되어 있어 화면을 제작할 때는 컴포넌트들 간 여백 없이 쌓아주었다.

 

 

 

 

[회고]

체계적으로 화면을 분석하고 파운데이션과 컴포넌트 제작으로 디자인 시스템을 활용한 토스 클론을 진행하였다.

이를 통해 디자인 시스템의 효율성을 체감할 수 있었고, 클론 화면 또한 완성도가 높아진다는 것을 확인하였다.

컴포넌트들을 영어로 네이밍하는게 어려웠는데, 또 다른 클론을 진행하며 익숙해질 수 있도록 학습할 예정이다.