원티드 UI 구조 분석과 클론 디자인

✅  클론 디자인 목표

채용 플랫폼 원티드의 화면 속 UI 구조를 분석하여 화면 속에 숨겨진 구조와 디자인 의도를 파악한다.

 

 

1️⃣  UI 구조 분석

1. 큰 단위부터 작은 단위로, Section → Module → Item 순으로 분석한다.
2. Section은 사용자의 목적에 따라 어떤 역할을 가지고 있는지 분석한다.
3. Module은 Section 안에서 기능으로 분석, 분류한다.
4. Item은 Module 안에서 어떤 개체로 이루어져 있는지 분석한다.

 

 

 

2️⃣  UI 스타일 분석

1. 컬러와 타이포그래피를 분석하여 스타일 항목 color style, text style에 저장한다.
2. 아이콘은 원티드의 오픈라이브러리를 참고하여 사용한다.
3. 형태와 여백, 간격 등을 분석한다.

 

color style

text style

icon

radius, spacing

 

 

 

3️⃣  UI 구조 설계

1. 위에서 분석한 item → Module → Section 순으로 설계한다.
2. 오토레이아웃을 사용하여 제작한다.
3. Navigation bar와 Card list 1개는 컴포넌트로 제작한다.

Navigation bar, Card list 컴포넌트

 

 

 

4️⃣  클론 디자인

1. 위에서 제작한 개체들로 홈 화면을 제작한다.
2. 분석한 내용이 반영되었는지 확인하고 원티드 화면과 비교한다.

좌: 원티드/ 우: 클론

 

 

 

 

 

[회고]

구조 분석을 통해 서비스의 목적에 따른 기능과 구조를 파악하고 UI의 의미를 확인할 수 있었으며, 구조 분석 후에 클론 디자인을 진행하여 구조를 이해하며 클론을 할 수 있었다.

오토레이아웃을 활용하여 반복해서 개체를 만드는 과정에서 오토레이아웃에 익숙해지고 동시에 기능별, 역할별 UI에 대한 이해도가 높아지는 실습이었다.