디자인 시스템

염수연(@SooyeonYeom) 님께서 작성해주신 세미나 필기본입니다.

강의 자료

디자인 시스템.pdf

소개

서울대학교 컴퓨터공학 19학번 23세
웹에 들어가는 TDS 운영 설계 및 프레이머 툴 관리
와플에서 식샤 웹 개발
최근 눈썹 문신
4일 후 (2022년 10월 23일 기준) 남자친구 휴가

디자인 시스템이란?

구글 디자인 시스템 Material UI

컴포넌트 : 재사용이 가능하고 특정한 기능을 하는 요소

🗣 디자인 시스템은 컴포넌트의 모음이다.

라인 디자인 시스템 Line Design System

ux guideline
foundation

🗣 디자인 시스템은 토큰과 컴포넌트의 명세이다

*토큰 : 컬러, 타이포그래피 등 값

*명세 : 유즈케이스, 제약 등

토스 디자인 시스템 Toss Design System

토큰
컴포넌트
템플릿, 퍼널
UX 라이팅
디자인 에디터 (Framer)
코드 제너레이터
기타 (스크린 센터 Mobbin 리소스 센터 Flaticon)

🗣 디자인하고 구현하기 까지 사용하는 모든 시스템 제품을 구성하는 하나의 언어이다.

디자인 시스템의 존재 이유 및 목적

1) 생산성 개선

미니멈 퀄리티 향상을 통해 생산성이 파괴적으로 증가한다

디자이너는 쉽게 디자인, 개발자는 쉽게 구현!

프레이머 역시 이에 큰 영향

2) 통일성 있는 사용자 경험

전부 다른 사일로가 개발하지만 같은 사용자 경험을 줄 수 있다

폰트 컬러 룰 적용
UX 라이팅 툴 적용 (에디터 단에서 강제할 수 있음)
접근성 대응 (컴포넌트 단에서 레이아웃, 보이스오버 대응 / 컬러 토큰 자체에 다크모드대응)
퍼널 재사용 (인증과정에 대한 퍼널화)

디자인 시스템의 구현 방법

컴포넌트의 조건

재사용이 가능한가?
유즈케이스가 확실한가?

(예)

Tab

정보의 종류가 동일하지 않을때

Segmented Control

정보의 종류가 동일할때

컴포넌트 디자인

변할 수 있는 것과 없는 것을 정해라
- 들어갈 수 있는 모든 옵션을 추가했다고 생각하고 구멍을 뚫어 놓아야 한다 (→ 개발의 용이성 증대)
- 변하는 것 : Text / 나타나는 시점 / 색상
- 변하지 않는 것 : 글자 크기
- 제한
모든 플랫폼의 개발자가 확인할 수 있는 가이드를 만든다
컴포넌트를 개발한다
- 커스텀을 유의해 너무 strict하게 type를 제한하지 않는다
- 웹 / 앱 / 디자인 모두 property 통일
문서화
- 디자인, 개발할때 볼 수 있는 컴포넌트 명세 - 프레이머로 확인가능
- 디자인 명세 : 어떤 옵션을 변경할 수 있는지 개발자가 쉽게 확인할 수 있게
- 개발 명세 : 어떤 옵션이 어떤 값에 의해 변경되는 지 쉽게 확인할 수 있게 (ex. storybook)

더 고도화된 디자인 시스템은?

인터랙션 디자인 시스템

애니메이션 (햅틱 등)
easing, delay 등 motion 설정

QA

수행해야 할 테스트를 자동으로 생성한다
디자인 에디터 속 화면과 일치하는지 자동으로 검사한다

로깅

컴포넌트에 로깅 로직을 붙인다

첨언

기존 컴포넌트 제약에 반하는 변경 시, 미적 주관이 아닌, CTR과 개발 생산성을 저울질 해야한다.