안녕하세요~! :)

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

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

 

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

 

 


 

01. 디자인할 화면 캡쳐

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

1. 홈 화면

2. 리스트 화면

3. 상세 화면

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

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

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

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

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

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

 

https://wcaxc5215.tistory.com/9

 

[UX/UI 디자인 입]피그마 기초 UI키트와 디자인 시스템의 차이

UX/UI 디자인 교육 과정이 4일 차입니다. 내일이면 벌써 일주일이 지나가네요. 역시 작심삼일은 과학인가봅니다... 오늘은 지난 3일 보다 약간 해이해진 상태로 공부를 했는데요 ㅎㅎ,,, 하 지 만~!

wcaxc5215.tistory.com

 

 


 

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

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

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

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

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

 

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

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

 

 

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

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

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

 

 

 

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

 

 

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

 

 

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

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

 

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

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

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

 

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

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

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

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

 

 

 

 

+ Recent posts