podium_nam0422

https://wcaxc5215.tistory.com/22

원티드 클론 디자인하기 대망의 3일 차입니다.

지난 시간에 이어 오늘은 앱 화면에 있는

요소들을 직접 만들고 컴포넌트로 묶어주는 작업을 해주었습니다!

바로 시작해 볼게요~!

01. 파운데이션 스타일화

먼저 앱에 나오는 색상과 텍스트들을 추출하여 쉽게 사용할 수 있도록 스타일화 시켜주었습니다.

스타일 조사에서 실수했던 부분이 모든 컬러와 폰트를 조사하지 못했습니다.

그러면서 제작을 하는 중에 또 다른 자간과 행간을 가진 요소들이 나와서 매우 당황했는데요.

폰트 같은 경우 결국 작업을 하는 중에 이리저리 왔다 갔다 하면서 파운데이션 정리를 해주었습니다.

결국 작업 소요 시간은 또 늘어나는 바보 같은 사태가 일어났죠...

(앞으로 조사는 꼼꼼하게)

02. app bar

이제 본격적인 UI를 만들어 보기 시작했습니다.

먼저는 화면 상단에 고정되어 있는 앱 바를 만들어 주었습니다!

03. Button, Chip

원티드 앱에 들어갈 버튼과 칩 요소들을 컴포넌트로 만들어서 다음에 사용 시 편리하게 꺼내 쓸 수 있도록 하였습니다~

04. Card

이미지가 들어갈 card는 지난 시간 미리 만들어 두었던 요소들을 가지고 조합하며 만들어 주었는데요.

여기에서 폰트들이 잘 맞아떨어지지 않아 당황하며 폰트 조사를 다시 했습니다...

힘은 힘대로 들고 작업 시간은 더 늘어났네요 ㅜㅜ

05. Carousel

저는 캐러셀이라는 단어가 떠오르지 않아 (강의 때 배웠던 건가...?) 인터넷에서 검색 후에 작업을 해주었답니다. ㅎㅎ

프레임 사이즈는 내가 만들 앱인 가로 사이즈 375에 맞추어 만들어 보았습니다.

이 캐러셀 요소들은 화면 밖에까지도 넘어가는 요소이기 때문에 적어도 5개 이상씩은 만들어서 컴포넌트로 만들어 주었습니다.

06. Icon

기존에 아이콘들도 수정해야 하는 부분들이 있었습니다.

비슷한 아이콘들끼리 묶어 조금 더 보기 편안하게 정리해 보았습니다.

(정리는 제 스타일이 아닌가 봅니다...ㅎ;;;)

07. Navigation Bar

앱 화면 하단에 고정으로 들어갈 네비게이션 바입니다.

서로 갭이 잘 맞지 않아 굉장히 고심하고 고생해서 만들어야 했습니다.

그냥 오토레이아웃을 전체 적용해 주면 MY 원티드의 크기가 너무 커서 갭 차이가 이쁘게 떨어지지가 않습니다. ㅜㅜ

08. Section Title, Text Box

 사실 이 페이지에는 뭘 추가해 주어야 할지 갈피를 못 잡아서 남는 요소들을 만들어 주었습니다.. ㅎㅎ

09. Tab

이제 마지막으로 만들어 준 텝 컴포넌트입니다.

이렇게 제가 클론 디자인 할 화면에 들어갈 요소들을 얼추 전부 만들어주었습니다!

개인 회고

이제 디자인 시스템이라고 하기 뭐 하지만 원티드 클론 디자인 하기 위한 준비는 끝났습니다.

오늘 목표는 도전 과제 시작해 보는 것이 목표였지만 오늘도 실수와 무지함이라는 지옥 구렁텅이에 빠져버려

원하는 목표까지 달성하지 못했습니다.

또한 다른 분들이 작업한 것을 보았는데요.

스타일 분석에서 제가 너무 디테일하지 못했던 부분이 너무 많더라구요..

as is와 to be를 나누어 작성해야 했었는데 그렇게 하지를 못헀어요...

앞으로 스타일 조사를 어떻게 해볼지 고민을 좀 해야겠다를 느낀 하루였습니다.

초반에 작업을 힘들게 해야 이렇게 후반부에 고생을 덜 하겠구나를 생각했습니다.

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

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

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

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

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

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

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

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

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

2) 폰트 분석

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

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

3) 아이콘 분석

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

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

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

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

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

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

4) 마진, 갭 분석

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

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

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

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

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

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

03. Foundation

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

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

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

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

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

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

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

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

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

개인회고

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

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

진행해 주었습니다. 

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

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

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

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

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

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

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

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

안녕하세요~! :)

드디어 길었던 평일을 보내고 금요일 저녁입니다 ㅎㅎ

오늘부터 이제 피그마에서 본격적으로 클론 디자인을 공부하게 되었습니다.

처음으로 시작해 보는 앱은 '원티드' 앱입니다!

01. 디자인할 화면 캡쳐

총 세 가지의 화면을 디자인해볼 생각입니다.

1. 홈 화면

2. 리스트 화면

3. 상세 화면

이렇게 세 화면을 어플에서 캡쳐해준 후 피그마로 가져와 

클론 디자인을 해볼 생각이에요!

클론 디자인을 하기 전에 디자인 시스템을 만들어 볼 생각입니다. 

그 디자인 시스템을 하기 전의 전 단계라고 생각하면 되겠네요 ㅎㅎ 

디자인 시스템이 무엇인지 아래 링크에 정리해두었습니다.

이미지 사이즈는 링크를 걸고 가로값 375 사이즈로 통일해 주었습니다.

https://wcaxc5215.tistory.com/9

02. 반복되는 UI, 그리드 파악

캡쳐 후 피그마에 깔끔하게 정리를 했다면 반복되는 UI를 정리해볼 겸

그리드를 나누어 보았습니다.

화면 안에 구성이 어떻게 되어 있는지, 반복되는 UI요소와 엘리먼트 같은 작은 단위의 요소들을 

분석해 보기 위해 그리드를 그려주었습니다.

반복되는 UI는 한눈에 보기 어렵기 때문에 다른 페이지로 복사 후

반복되는 UI들만 다시 찾아보겠습니다!

그리드로 나누면서 이미지가 들어갈 item 요소들을 따로 빼서 컴포넌트로 묶어 놓았는데요.

아직은 해야 할 작업이 남아 있기 때문에 따로 저장해둘게요! :)

(사실 분석하기 지쳐서 딴짓했음)

홈 화면에서 반복되는 UI 요소들을 파악해 주었습니다.

이어서 리스트 화면(커리어 화면)과 상세 페이지 화면까지 반복되는 UI 요소를 파악해 주었습니다.

이렇게 파악한 UI들을 또다시 따로 캡쳐 후 

section, module, item으로 나누는 작업을 해 볼 겁니다!

item : 가장 작은 요소의 컴포넌트

module : 기본 요소와 기본 요소, 조합 요소와 기본 요소가 조합된 요소

section : 조합 요소 + 조합 요소 + 여백(마진, 패딩)이 조합된 요소

오늘 작업을 생각보다 늦게 시작해서 오늘은 일단 이 정도까지만 해주었는데요!

이제 본격적으로 들어갈 UI 만들기 작업 기대도 되고 앞으로 잘할 수 있을지 걱정도 됩니다.

강의를 들으면서 작업을 할 때 뭔가 만들어 가는 뿌듯함이 있었는데요. 

앞으로 만들 디자인 시스템과 클론 디자인을 만들어 가면서 설렘 가득 안고 작업에 임해보겠습니다 :)