[Day17] 디자인 시스템과 아토믹 디자인

에어비앤비의 몇 페이지에서 컴포넌트를 찾고 만들어보는 과제..! 생각보다 험난했다.

처음에는 나름 색상이나 간격, 타이포를 정의하고 스타일 등록하면서 꼼꼼히 하려고 했는데

정의해도 정의해도 끝이나질않아.......

결국 클론하듯이 크기 대 보고, 색상피커 사용하면서 간신히 마쳤다.

주말 동안 끝냈어야 했는데 오늘 아침까지 함ㅋㅋ

 

---

 

구체적 UX개선 사례를 많이 보는 게 중요하다는 걸 또 느꼈다.

아직까지는 프로젝트 때 어떤 분야를 하고 싶은지도 잘 모르겠고 좋은 아이디어도 못 낼 거 같다..

인풋을 아주많이넣자

---

 

디자인토큰과 아토믹 디자인 방법론에 대해 배웠다.

 

아토믹 디자인 방법론은 디자인시스템 작성과 UI구조 이해에 도움을 주는 모델이다.

 

원자에 대해 생각해보자. 

원자는 모든 물질의 기본 구성요소이며 가장 작은 단위이다.

(더 작은 단위가 있지만 가장 작은 '기능'단위라고 한다)

두 개 이상의 원자가 모이면 분자를 형성하고, 분자들이 모여 유기체를 형성한다.

우주의 모든 물질을 118개의 원자 종류로 정의할 수 있다는 말이다.

 

이를 UI화면에 적용하면, 복잡해 보이는 페이지를 몇 가지의 최소 구성요소로 정의할 수 있게 된다.

 

0) 디자인 토큰

왜 0번이냐면.. 이건 원자보다 작은 단위인 전자, 양성자 등에 해당하는 요소다.

타이포, 색상, 여백값 등 디자인시스템의 파운데이션에 들어가는 내용!

이런 요소들은 혼자서는 UI 요소로서 기능하지 못한다.

 

1) 원자

UI를 구성하는 가장 기초적 구성요소. 버튼, 입력창, label 등 더 이상 쪼갤 수 없는 요소이다.

버튼을 쪼개면 글자와 네모박스밖에 남지 않는데..이걸로는 뭘 할 수가 없다.

 

2) 분자

원자들이 모여 만들어진 비교적 간단한 요소.

label+입력창+버튼으로 이루어진 입력 폼을 예시로 들 수 있다.

 

3) 유기체 

분자/원자/유기체 등으로 만들어진 비교적 복잡한 요소.

로고+검색폼+메뉴로 이루어진 헤더,

사진+label+버튼으로 이루어진 제품 카드가 반복 나열된 쇼핑몰 제품 목록 등이 있다.

 

4) 템플릿

구조에 맞게 구성요소를 배치해둔 것이다. 페이지가 어떤 구조를 갖고 있는지 정의하는 것이고,

최종본이 아니기 때문에 더미 콘텐츠를 넣는다.

 

5) 페이지

실제 콘텐츠를 배치해 UI가 최종적으로 어떤 모습일지 보여주는 것이다.

 

이 방법론을 사용하면 UI를 잘게 분해해서 세밀하게 보는 것과 전체적 그림을 보는 것을 동시에 할 수 있다.

원자부터 다 만들고 분자로 넘어가고..이런 선형적 개념이 아니라 여러 시각을 빠르게 전환하는 게 좋다고 한다..

그리고 템플릿-페이지 단계 덕에 실제 들어올 콘텐츠의 특성도 디자인에 반영할 수 있다.

 

이런 모듈형 설계는 예전부터 있었는데 왜 원자, 분자 같은 이름을 붙였을까?

위계질서를 유추하기 쉽게 하기 위해서다.

모듈, 컴포넌트, 섹션 같은 단어를 써도 되지만 원자보다 분자가, 분자보다 유기체가 큰 개념이라는 것이 더 이해하기 쉽긴 하다.

그렇다고 여기서 제시한 이름이 절대적인 것은 아니기 때문에

이 개념을 바탕으로 팀이 잘 소통할 수 있는 이름을 붙이면 될 것 같다!

 

---

 

그리고 과제로 피그마 디자인시스템 중 일부를 따라 만들어봤다.

이런 방식으로 디자인 토큰과 배리어블을 지정하는구나.. 

많이 배운 거 같다.

에어비앤비 따라 만들 때 정할 거 너무 많다고 징징댈 게 아니었다.

진.짜.겁.나.많.습.니.다.

 

그래도 오토레이아웃이랑 프로퍼티를 배우니까 속도가 훨씬 빨라졌다.

프로퍼티도 따라 지정해보구..아우 재밌어ㅋㅋㅋ

다른 컴포넌트도 만들면서 구경해보고 싶고 디자인 토큰도 어떻게 분류했나 다시 찬찬히 봐야겠다.