(DAY20) 아토믹 디자인, 디자인 토큰 + 심화반 2주차

 

안녕하세요 :)

오늘은 아토믹 디자인과 디자인 토큰에 대해 공부했습니다.

컬러와 타이포 설정을 저장하는 방법을 배우고, 그걸 바탕으로 디자인 시스템을 그려보는 시간을 가져봤습니다.

 

 

---

 

 

✏️오늘의 학습

디자인 토큰 이해하기

실습 1) 아토믹 디자인 공부하기
실습 2) 에어비앤비 디자인 시스템 클론하기

 

 

 

 

 

📖오늘의 핵심

나는 진행 중인 작품이 될 수 있다. (아직 완벽한 존재가 아니란 뜻)

 

 

 

 

 

📝수업 내용 메모장

 

아토믹 디자인 Atomic Design (by Brad Frost)
(아토믹디자인 책은 ebook으로만 존재)
디자인 시스템 방법론임
디자인요소들을 작은단위부터 큰 단위로 쪼개도록 도와주는 개념 → 이것을 화학에 접목해서 이야기한 것.
화학에서의 원자, 분자 등의 개념을 디자인에 적용시킨 것
원칙과 UI 컴포넌트를 분류하는 구조로 구성됨
일종의 멘탈 모델이라고 보면 됨
디자인도 개발처럼 모듈화되어야 한다.
컴포넌트 기반 디자인의 기본 철학

→ 디자인 토큰이라는 개념을 만들었다.

 

디자인 토큰
디자인토큰은 색상, 글자, 여백 같은 디자인의 "기본 재료"를 저장해두는 통일된 방법
UI의 세계에서 디자인토큰은 이보다 더 작은 아원자 입자라고 볼 수 있다.
디자인 토큰은 타이포그래피, 색상, 여백과 같은 변수를 기술에 종속되지 않는 방식으로 저장하는 방법
- 색상
- 여백
- 타이포

 

1) Atoms 원자
UI에서도 Atoms는 라벨, 입력필드, 버튼처럼 더이상 나눌 수 없고, 나누면 기능을 잃는 가장 작은 UI 구성 요소
기초적인 빌딩 블록 역할을 한다.
- 텍스트
- 입력창
- 버튼 ex ) 버튼을 '글자'와 '배경'으로 쪼개면 이제 그건 더이상 버튼 기능을 하지 못한다.

그래서 Atoms는 디자인 시스템에서 기본적인 구성 요소.
이걸 모아서 더 복잡한 UI(분자, 유기체 등)를 만들어가는 것.

 

2) Molecules 분자
화학에서도 여러 개의 원자가 모여서 분자를 이루듯, 디자인시스템에서도 여러 개의 원자가 모여 분자를 구성한다.
- 여러 개의 입력 필드
- 처크박스 리스트
- 버튼

3) Organisms 유기체
인터페이스 디자인에서 뚜렷한 섹션(구역)을 형성한다.
헤더, 검색창, 로고, 메뉴 등 여러 분자들로 구성되어 있고, 사용하는 플랫폼에 따라 그 구성도 달라질 수 있습니다,


4 Templates 템플릿
이제 화학 비유에서 벗어나 



디자인 토큰 관련 피그마 영상 시청

https://www.youtube.com/watch?v=JyCmacSyDY4&t=40s

(영상 내 핵심 내용 화면 캡쳐)

줄임말X, 직관적인 전체 용어를 사용O

 

 

디자인 토큰
디자인 시스템의 시각적 스타일을 구성하는 작고 재사용 가능한 디자인 결정 요소. 

토큰은 고정된 값을 자기 설명적인 이름으로 대체합니다.

 

 

피그마 플러그인 ( 컬러, 타이포 관련 디자인시스템 만들 때 유용함)
Foundation Color Generator

 

 

Typography Style Guide

내가 Text style 설정해논 것들을 Page 추가해서 텍스트 디자인시스템으로 자동으로 만들어주는 기능

에어비앤비 예시

(과제로 Airbnb 텍스트 스타일 설정해놨더니, 컴포넌트 안에 있는 텍스트 스타일도 전부 만들어줌)

 

 

 

디자인 시스템 모음집 사이트

 

https://www.designsystemsforfigma.com/

Design Systems For Figma

 

 

 

 

 

 

 

실습 1) 아토믹 디자인 공부하기

 

https://brad-frost.myshopify.com/?shpxid=58d185b0-dc87-4ae9-86a1-cb46aa31562c

Atomic Design by Brad Frost - Make and Maintain Great Design Systems

 

 

 

 

아토믹 디자인 Atomic Design

• 디자인 요소들을 작은 단위부터 큰 단위로 쪼개도록 도와주는 개념
• 디자인도 개발처럼 모듈화되어야 한다 는 컴포넌트 기반 디자인의 기본 철학

 

디자인 토큰

디자인 토큰은 색상, 글자, 여백 같은 디자인의 "기본 재료"를 저장해두는 통일된 방법

 

Atoms 원자

UI에서 Atoms는 라벨, 입력 필드, 버튼처럼 더 이상 나눌 수 없고, 나누면 기능을 잃는 가장 작은 UI 구성 요소

 

 

Molecules 분자

화학에서도 여러 개의 원자가 모여서 분자를 이루듯, 디자인 시스템에서도 여러 개의 원자가 모여 분자를 구성한다.

ex) 여러 개의 입력 필드, 체크박스 리스트, 버튼

 

 

Organisms 유기체

인터페이스 디자인에서 뚜렷한 섹션(구역)을 형성한다.

헤더, 검색 창, 로고, 메뉴 등 여러 분자들로 구성되어 있고, 사용하는 플랫폼에 따라 그 구성도 달라질 수 있다.

 

 

Templates 템플릿

page를 만들 수 있도록 여러 개의 유기체, 분자로 구성된다.

실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임이다.

즉, 실제 콘텐츠가 없는 page 수준의 스켈레톤이라고 보면 됨

 

 

 

 

 

 

실습 2) 에어비앤비 디자인 시스템 공부하기

https://www.figma.com/community/file/1233410639171582044

 

 

오늘 배운 컬러, 타이포 설정 저장하는 기능을 위주로 작업해보는 시간을 가졌습니다.

 

 

 

 

 

💡디자인 시스템을 직접 만들어 보는데 생각보다 감이 잘 안왔다.

디자인 시스템 사이트 들어가서 구경할 땐 몰랐는데 직접 만들어보니까 내 머릿속에 정리가 잘 안돼서 그런건지 작업물에 다 드러났다.ㅋㅋㅋㅋㅋㅋ 다른 분들은 DAY19때 배운 회원가입 Form에 사용되는 입력필드 관련된 UI의 유스케이스 위주로 다양하게 뽑아보신 분들이 꽤 있었다. 나도 해볼껄...

 

 

 

 

 

 

심화반 2주차 수업 리뷰

 

 

선정한 도메인 : 채용 플랫폼

선정 앱 : 잡플래닛

 

1) 잡플래닛을 선정한 이유

- 다른 구직앱은 채용 공고 중심이라면, 잡플래닛은 기업리뷰+채용이라는 강점을 가지고 있음.
- 하지만 이 강점이 UX적으로 잘 드러나지 않고 있다고 생각했음.

 

2) 경쟁사 앱 선정 : 사람인, 원티드

사람인 - 국내 채용앱 중 가장 역사가 긴 전통적 채용 서비스.
원티드 - 최신 트렌디 채용앱으로, AI추천 기반+직무 특화를 강점으로 가짐.

사람인 - ‘정보구조/검색’ 부분을 참고하기 위함
원티드 - ‘개인화/비주얼’ 부분을 참고하기 위함

 

 

잡플래닛 지원 플로우 : ‘프로덕트 디자이너’를 지원하는 상황으로 설정하고 진행함.

두 가지 플로우가 있었음.

1) 홈 > 검색 돋보기 클릭 > 채용공고 선택 > 버튼 [홈페이지 지원하기] > 회사 웹으로 연결됨 > 지원하기

2) 홈 > 검색 돋보기 클릭 > 채용공고 선택 > 버튼 [지원하기] > 기본 정보 입력(이름, 연락처, 이메일, 이력서/첨부파일) > 지원완료

 

 

잡플래닛 지원 플로우 내 불편한 점 탐색

• 중간중간 로딩이 잘 안된다.
• ‘프로덕트 디자이너’ 를 검색했는데, 관심직종이 PM/PO로 설정되어 있어서 그런지 ‘프로덕트 매니저’ 공고가 떴다.
• 공고 탐색 > 근무지역 단어가 (ex)‘경기’ 단어로만 적혀 있어서 회사 위치 파악이 어렵다.
• 채용 공고 내용 화면의 여백이 적다. ( 글씨가 빽빽해서 가독성이 떨어진다. )
• 기업 리뷰가 특징인 것에 비해 채용공고 검색 플로우 안에서 기업리뷰를 바로 볼 수 없었다.
• 리뷰를 보려면 멤버쉽 구매를 해야한다.
•  [지원하기] > 기본 정보 입력에서, 필수 항목 중 미입력된 사항이 있으면 모달창이 뜨는데, 모달창을 닫은 후 입력되지 않은 곳을 찾는데 조금 불편했다.
• 간편지원 > 이력서 미리보기 클릭하면 갑자기 PC버전 비율로 송출된다.

 

(위 내용을 발표하는 시간을 가짐)

---

 

💡1주차 킥오프때 받은 과제를 조별로 발표하는 시간을 가졌다.

나는 4조이고, 4조 발표를 맡았다. 1조부터 차례대로 발표하는데 아직 한거라고는 앱서비스 주제 정하기, 불편한 점 적어오기 정도밖에 없어서 발표가 간단하게 끝날 줄 알았다...ㅎㅎㅎ 그런데 다들 발표 시간을 생각 못하고 해서 생각보다 오래 걸려서 당황스러웠다. 사고확장스터디 케이스 스터디가 빛을 발하는 순간이었다🤗 이게 매주 발표연습도 되고 있어서 좋은 것 같다.

다른 조들의 작업량을 보고 너무 놀랐다. 그런데 작업량에 비해 "그래서 문제점이 뭔데?"로 물어보면 또렷하게 말하는 사람이 많이 없어서 아쉬웠다. 따로 하고 있는 케이스 스터디처럼 6조니까 6개의 케이스를 얻을 수 있을거라고 생각했는데 아직은 아닌가보다. 3주차때는 사용자인터뷰도 하고 페르소나 설정해서 핵심문제를 재정의해올거니까 더 정리된 6개의 케이스를 볼 수 있을 것 같아서 기대된다!