디자인 시스템에 대하여. (스타일, 컴포넌트, 제작 및 관리 등...)

* 계속 설명하듯이, 디자인 시스템에는 정답이 없다.

'스타일'의 종류

• 폰트 (Font, Typography)
• 컬러 (Color)
• 앨리베이션 (Elevation)
• 레이아웃 (Layout)

- 앨리베이션이란?

: 쉽게 말해, 그림자.

* 해당 대상이 지면으로부터 얼마나 떠 있는지 그 거리.

 

- UI Kit 에서 디자인 시스템을 잘 정리해둔 이유?

: 다른 팀원들도 디자인 시스템을 사용하기 때문.

 

* 스타일을 만드는 방법은 이전에 기재한 적이 있으므로, 생략.

 

---

 

'컴포넌트'의 종류

: UI Kit 제작사에 따라 종류, 명칭이 다르다. 하나의 정답이 있는 것은 아니다.

 

- 서로의 아이콘 위치가 다르다?

: 그림자까지 포함된 아이콘으로 내보냈기 때문.

(기존 아이콘 위치는 그림자를 포함하지 않은 아이콘을 기반으로 한다.)

 

- 해결 방법

1.  그림자까지 포함된 영역보다 더 큰 프레임으로 아이콘을 묶어준다.
2.  컴포넌트를 만들 때 두개의 레이어를 사용한다.

- 1번 방법은 그림자가 이미지화 되는 문제가 있다.

: 2번 방법을 사용하여 아이콘만 받아 사용하고, 그림자는 코드화하는 것이 좋다.

* Stroke (선) 도 마찬가지로, 이미지화해주는 것이 좋다.

 

- 컴포넌트에 Variant 도 만드는 것이 좋다.

 

* Variant 만드는 방법, 프로토타이핑 적용 방법은 이전에 기재한 적이 있으므로, 생략.

 

---

 

'모션'의 종류

 

- 모션이란?

: 화면에 어떤 요소가 동적으로 변화하는 것

: 특정 오브젝트를 탭해서 상세 페이지로 넘어가는, 상대적으로 큰 변화의 모션은 보통 트랜지션이라고 한다.

 

- 트랜지션?

: 모바일에서 더 중요한 역할을 한다.

: 사용자가 앱을 사용할 때 워크플로우를 간접적으로 알려주는 역할.

 

'트랜지션'의 종류

• Container transform 형태 변형 : 사용자가 탭한 부분의 형태가 변하는 모션
• Forward and backward 앞/뒤로 이동 : 페이지가 슬라이드 되듯 좌우로 이동 (Depth 이동의 개념)
• Lateral 가로로 : 부분적 슬라이드 개념
• Top level 최상위 뎁스 : 주로 내비게이션 바에서 메뉴 이동 시 사용되는 모션
• Enter and exit 들어가기/나가기 : 부분적으로 오브젝트를 띄울 때 사용하는 모션
• Skeleton loaders 해골 로딩 : 새로고침할 때 잠깐 보이는 로딩 화면

 

- 개발자와 원활하게 소통하는 법

: 사용할 모션의 종류를 미리 Variant 컴포넌트로 만든다.

그리고 Description 영역에 사용된 모션 종류를 타이핑한다.

 

---

 

디자인 시스템 제작 과정 중 문제가 생기면?

 

- 이슈 리스트

: 발견한 문제들을 정리한 파일.

각 팀원들이 문제의 중요도를 설정하고, 일정을 조율한다.

 

- 디자인 시스템에 누락된 부분이 있다?

: 체크리스트를 만든다.

1. 사용자 행동 체크리스트 : 사용자 행동에 따라 우리 제품은 어떻게 대응할 것인가?
2. 정보 제공 형태 체크리스트 : 제품이 어떤 화면을 제공할 때 어떤 UI를 보여줄 것인가?

 

---

 

디자인 시스템 버전 관리

 

- 버전 관리를 해야하는 이유

1. 개발자들의 혼동 방지
2. 예전 버전 파일에서 특정 내용을 확인해보기 위함
3. 예전 버전 파일에서 특정 내용을 사용까지 하기 위함

 

- 히스토리 기능

: 히스토리 패널의 버전을 저장

-> 무료 사용자는 최대 30일까지만 가능

 

- 무료 사용자들을 위한 방법

: 히스토리를 사용하지 않고 파일 자체를 따로 저장

 

* 버전을 나눌 때는 복사, 붙여넣기가 아니고 잘라내기를 사용한다.

 

---

 

릴리즈 전 QA 기간에 디자인 이슈가 한꺼번에 많이 몰리게 된다.

 

- 모든 페이지 개발이 끝나고, 디자인 이슈가 많아진다.

: 디자인 토큰을 사용한다.

 

- 디자인 토큰?

: 스타일보다 좀 더 큰 개념.

스타일로 저장할 수 없는 속성들까지 포함.

 

- 디자인 토큰 플러그인 사용

: 여러명의 사람이 다른 페이지를 맡아서 작업해도 똑같은 토큰을 사용한다.

 

* 토큰을 사용하려면, 처음 디자인 작업을 할 때부터 토큰을 사용해야 한다.