[클론 디자인]02. 원티드 앱 화면 분석하기

 

 

 

안녕하세요. 한 주의 시작인 월요일입니다!

지난주 금요일부터 시작한 원티드 앱 클론 디자인 하기!

준비의 준비의 준비 단계를 해보았습니다~

오늘도 이어서 앱 분석 진행을 하겠습니다!

 

01. 반복되는 UI 요소 파악하기

지난 시간 조합 요소와 조합 요소가 합쳐진 section UI를 분석해 보았습니다,

이제는 조금 더 작은 단위 UI를 쪼개면서 Module과 Item까지 분석을 해볼게요!

 

사진 밑에 있는 바는 고정 바 또는 버튼입니다.

앱 슬라이드시 고정되어 있는 바는 밑에 따로 표시해 두었습니다.

 

 

저는 module 프레임을 만들고 스크린샷 이미지를 일일이 잘라가며 분석을 해보았습니다.

이렇게 자르다 보니 시간을 너무 많이 뺏기게 되었어요...

다음부터 더 빠르게 작업할 수 있는 방법이 있는지 찾아봐야 할 것 같습니다

Home 화면만 일단 작업이 끝났으니 리스트와 상세 화면까지 작업을 해주어야겠죠?

 

 

깔끔히~ 정리된 모습.

리스트와 상세 화면까지 정리를 해보았습니다.

그리고 그 안에 이미지가 들어가는 카드와 텍스트, 아이콘 바로 이렇게 3씩으로 나누어 작업을 해주었습니다.

 

 

이제 아이템입니다.

이 것도 일일이 스샷 뜨고 이미지 사이즈 맞춰보고... 일일이 수작업으로 진행했어요...

버튼 만들고 UI 만드는 건 재밌는데 분석하는 건 왜 이렇게 힘들까요... ㅎㅎ...

아이템이 왜 생각보다 별로 없냐구요?

 

카드 이미지는 따로 작업해 주었거든요~

이미지 카드들은 대부분 반복적인 UI이기 때문에 사이즈도 잴 겸 먼저 만들어 주었어요~

 

 

제가 생각하는 반복적인 UI요소들을 밑에 이렇게 또 분류를 해주었습니다.

이제 이렇게 캡쳐한 요소들을 가지고 피그마로 비슷하게~! 만들어 보는 작업을 해볼 겁니다.

이제 반복되는 UI요소 파악이 끝났습니다.

아무래도 아직 아마추어이다 보니 빼먹은 게 있을지도 모르지만 그건 나중 가서 생각해 보자고요.

이 정도 분석하는데도 진이 빠져서...

 

---

 

02. 스타일 분석

이제는 스타일 분석입니다.

원티드 앱의 컬러와 폰트(사이즈와 행간), 마진 값을 분석해 볼 예정입니다.

 

1) 컬러 분석

 지난 포스팅에서 컬러에 대해서 포스팅을 다루어 보았습니다!

UI 컬러에는 primary color, secondary color, background color 등이 있다고 말씀드렸습니다!

 

디자인 기초 컬러에 대하여 : https://wcaxc5215.tistory.com/18

[UX/UI 디자인 입문]디자인 기초 컬러에 대하여

 

원티드 앱의 프라이머리 컬러는 블루 컬러입니다.

블루 컬러를 활용해 앱에서 중요한 요소를 강조해주고 있습니다.

Nomal은 기본적인 색상을, Strong은 의사상태일 때, Heavy는 터치 또는 클릭한 후의 의사상태일 때의 색상입니다.

그리고 백그라운드 컬러와 세컨더리 컬러라고 생각되는 라벨 컬러와 라인 컬러를 나누어보았습니다.

 

 

2) 폰트 분석

원티드 앱에서 폰트는 보통 프리스텐다드 폰트를 사용합니다.

각각의 상황에 맞게 사용할 폰트들을 정리해 주었습니다.

 

 

 

3) 아이콘 분석

아이콘 분석은 제가 만들지 않고 오픈 라이브러리 소스를 끌어다 사용해 주었어요.

하나하나 만들어줄 수는 있지만 ,.... 앞에서 스샷 찍느라고 시간을 뺏긴 아마추어 1인이기에...

아이콘은 그냥 끌어다 사용해 주었습니다 ㅎㅎ

어짜피 나중에 아이콘 다 다운 받아와서 쓸꺼자나욧~!

 

사용할 아이콘들을 모아 와서 멀티플 컴포넌트로 만들어 주었습니다!

이렇게 하면 Assets에서 편하게 끌어다 사용할 수 있으니까요~

 

 

 

4) 마진, 갭 분석

 

스샷 한 이미지는 픽셀값이 딱 알맞게 떨어지지 않아서 마진 값이 19, 15 이렇게 수치가 나오는데요...

UI를 디자인할 때 짝수로 떨어지거나 4 or 8의 배수로 떨어지는 게 좋다고 했는데

모든 화면마다 19가 나와서 난감했습니다 ;;

아무래도 나중에 UI 만들 때 조금씩 수정해 주면서 해야겠어요

개발자 모드 앱에서 확인해 볼 수 있겠지만 마진, 갭 수치가 어디서 확인할 수 있는지는 잘 모르겠네요 ㅠㅠ

 

 

 

이렇게 만들 모든 화면을 분석해 주었습니다!

 

 

 

03. Foundation

자! 이제 클론 디자인하기, 준비의 준비의 준비 단계가 얼추? 끝났습니다!

이제 다음 작업부터는 조금 더~ 스무스~ 하게 진행이 될 것 같은데요.

 

파운데이션으로 UI의 작인 단위인 컬러와 아이콘, 타이포그래피까지 스타일러로 만들어 

편하게 끌어다 쓸 수 있는 작업을 해보려고 합니다.

이렇게 프라이머리 컬러와, 백그라운드, 세컨더리 컬러까지 컬러 파레트를 만들어 주었습니다.

 

 

전에 피그마에서 스크립트해둔 플러그인인 스타일러로 저장해 주었습니다.

 

 

여기에 폰트까지 저장해 주면 오늘 작업은 끝~

사실 시간이 남아서 app bar와 button까지 작업을 해주었는데요.

다음 시간 TIL로 다룰 예정입니다요~~

 

---

 

개인회고

오늘 하루가 너무 짧은 하루였습니다 ㅜㅜ 눈 깜짝할 사이 저녁 9시가 되었는데요.

개인 과제를 진행하면서 애매했던 부분들(생각나지 않았던 용어들)이 많아서 지난 시간 복습을 해주면서

진행해 주었습니다. 

세컨더리 컬러 같이 간단한 용어도 생각나지 않아 강의 자료를 훑어보러 간 나... 반성합니다...

 

분명 강의는 열심히 들었건만 피그마의 하얀 도화지 같은 화면만 보면 지난 시간 배운 강의가 백지와 함께 사라지는 마법...!

역시 피그마는 마법인가 봅니다 ㅎㅎ

계획해 둔 일정에 스타일 분석까지는 오전에 끝낼 예정이였지만 디자인 카타와 스크린샷의 무한 노가다로 생각보다 늦게 

끝나 오후 시간 대부분의 일정을 빼앗겼는데요.

시간 계획은 꼼꼼하게 세운 다고 해도 항상 틀어지네요 ㅠㅠ 

하지만 계획보다는 배운 학습 내용 위주로 오늘 작업을 해주었다고 생각했습니다.

부족했고 애매했던 부분을 조금씩 채워줄 수 있었던 하루가 되었지 않았나 생각되네요.