[10/13] 원티드 클론디자인 : Naming 과 design system 관점으로 더

10/03 - 10/12

황금연휴는 그 말 그대로 황금이었다

너무 빛났어서 그럴까, 앞으로 달려야 할 내 눈 앞이 너무 컴컴하다

연휴간에 너무 열심히, 열과 성을 다해 쉬었다.

그래서 그런지 모니터 앞에 몇시간 앉아있는 것만으로도 버겁다.

 

그렇다고 연휴기간에 생짜로 논것은 아니다.

그간 디자인 가이드 및 figma 관련 학습 한것을 바탕으로 클론디자인을 진행해보았다.

 

오늘의 TIL 진행했던 클로닝을 어떻게 했었는지 정리하며 복기하고

아쉬웠던점을 자체피드백 해보려고 한다.

 

원티드 홈화면 : Top-down 방식으로 해체하기!

 

원티드는 구인구직 서비스이다.

그리고 figma 내부에서 디자인가이드(시스템)을 오픈소스로 제공한다.

해당 정보정도를 가지고 홈화면 캡쳐본을 다음과 같이 일렬로 합치고 섹션별로 구분 지우며 분석해보았다.

 

그리고 다음 섹션들은 Top-down 방식으로 module -> item -> foundation 으로까지 잘게 분해했다.

module 단위

이러한 과정을 거치면 공통된 요소들을 빠뜨리지 않고 확인해 볼 수 있고, 원티드에서 효율을 위해 사용했을 디자인 시스템에 한발 더 가깝게 다가갈 수 있을 것이다.

 

위 스크린샷과 동일하게는 아니지만, 각 section, module, item을 어떻게 naming 해야할지 고민해봤다.

우선 나만의 원칙은 다음과 같았다

 

1. naming할때 띄어쓰기를 underbar로 대체하고 소문자로 작성 (Ex. card carousel -> card_carousel)

2. section은 화면에서의 역할을 기준으로, module/item은 형태를 기준으로 naming하기

3. {단위}/{name}/{size(card의경우)} 로 factoring 하기 (Ex. module/cardinfo/M)

4. module내의 영역구분은 field_{datatype}으로 하기 

4. component 내의 varient는 소문자로 시작하기 (Ex. isSelected, label)

 

Foundation 설정하기

 
color의 경우, 한정된 색만 사용하는 원티드 홈화면 특성상, 사용되는 것을 뽑아내는 것은 크게 어렵지 않았다.

색체 있는 color의 경우 primary color만 반복되는 색상이었고, 보라 계열의 색은 단 두번 사용되었기에 secondary라는 naming은 안맞는 것 같아 그냥 pin color로 네이밍햇다 (chip에서 사용해서 chip color로 하는 것이 내 의도였는데, 이걸 PiN으로 해버렸네)

neutral color의 경우 꽤 여러가지 색이 있었다. 그들을 채도의 순서대로 번호를 붙여 system을 짰다.

 

다시 돌아봤을때 아쉬운점은, 나처럼 naming한다면 어차피 Component 만들때 어떤 색을 사용할까 고민되고 또 헷갈린다는 것이다.

채도순으로 숫자로 naming 할것이 아닌, Normal, Strong, Alternative, Assistive, Disabled 같이, 각 색의 쓰임새를 정하고 그에 맞게 네이밍하는것이 훨씬 실용적이었겠다 싶다.

 

Naming 자체는 최악이었다고 생각하나, 그래도 Component만들때 참고 할수 있게, 각 색상들이 어떤 요소에서 사용 될지 다시 재정리 해둔 것은 스스로 괜찮은 시도였다고 생각한다.

 

text 분리

Typo System 구축 역시 아쉬운 점이 많이 남는다.

너무 똑같이 클로닝 하려는 목적때문에 System적이지 않게 분류/네이밍해버렸다.

왜 스스로 시스템적이지 않다고 생각하냐면, 분류된 쓰임새에서의 size가 너무 정립되지 않았다.

Label로 정리한 폰트를 예로 들면, 같은 size인데 Bold인것과 아닌것으로 존재하는 size도 있고

또 Size간에 규칙이 없다.

한 줄을 다 채우는 목적이 아닐때 쓰인 typography style들을 모두 label이라고 뭉뚱그렸는데

더 제대로된 분류를 했어야했다.

 아이콘/픽토그램의 경우, 원티드 오픈소스 디자인가이드에 있는 것들을 가져와서  각 필요한 color별로  Varient있는 component를 만들어 사용했다.

여기서 실수는 icon의 naming rule이 내가 정한 규칙에 들어가지 않았다는것이다..

아직 부족하구나 나란 녀석

 

게다가 각 요소의 Radius, Margin/Padding 규칙(큰 범위에서 padding을 줄지, 작은 범위에서 margin을 줄지), 각 Section/Item 간의 gap system 정립 등을 작업 후 정리하지 못했다.

 

너무 빠듯하게 과제한 탓...

 

위와 같은 것을 하는것이 System을 구현해보는 중요한 과정일텐데 이를 스킵해버린것이 후회된다.

 

 Cloning 시작 : Bottom-up 

 

screenshot을 바탕으로 클로닝한 item Component들

 

이제 작은 단위부터 다시 만들어나가면 된다.

이 과정은 워낙 실습을 해봐서 그런지,어려운 부분은 없었다.

네이밍룰에 맞게 잘했고, auto layout도 100% 잘 사용한 것 같다.

하나 아쉬웠던건, 어디까지를 item이라 하고 또 어디까지를 module이라고 할지, . 그구분선을 확실히 한 후 작업.      들어갔으면 더 좋지 않았을까.

 

Module/Section

계속 아쉬운점이 눈에 밟힌다.

카드를 활용한 carousel module들, 또 이에 section_title까지  결합된  position section들을 그냥 하나의 통합된 component로 제작하고 varient로 다루는 것이 더 좋았을 것 같다.

만들기 전, 만드는 와중에도 이를 생각 안한것은 아니나, 그때는 각각의 카드별로 만들어진 각가의 Component들로 만드는 것이, 다른 협업자가 이용하는 관점에서 더 직관적일 것이라고 생각했다.

carousel은 내 생각대로 하되, 적어도 section은 하나의 Component로 만드는것이 다른 협업자가 이용하기에도, 빠르게 디자인을 제작하는데에도 최적회된 system이었을 것 같다.

 

 

결국 그렇게 한 Page를 클로닝 했다.

유사도는 꽤 나쁘지 않으나, 

클로닝 시, 이미지 영역에 이미지를 넣어주는 것이 더 클로닝 연습에 좋다고 오늘 듣게되어서 앞으로는 이를 반영할 예정이다.

 

이렇게 지난 과제를 복기해보았다.

 

오늘 이 이외에도 디자인 관련 강의수강을 했으나,

복습하고 다음에 이를 토대로 된 실습과 함께 블로그를 작성해볼 예정이다.

오늘 하루 끗