INTRO

쓰겠다고 예고하고는 글 작성이 늦네요 천천히 가더라도 꾸준히 가보겠습니다.

Apply Design System

https://www.youtube.com/watch?v=LmLchZ4tCXc&ab_channel=FEConfKorea (6분 50초 부터)

위 토스의 FE Conference 내용을 보면서,

디자인 시스템의 도입은 아래와 같은 장점을 가질 수 있다 정리하였습니다.

디자인 시스템을 통해, 디자인의 일관성을 유지할 수 있다.
디자인 시스템을 통해, 개발자와 디자이너의 커뮤니케이션 비용을 줄일 수 있다.
디자인 시스템을 통해, 디자인의 재사용성을 높일 수 있다.

위를 통해, 저희 회사에서도 디자인 시스템을 만들어야 한다는 필요를 제시하였고, 이를 ADS(Apply Design System)이라고 통칭하기로 하였습니다.

Introduction

개발자는 말보다 만든것으로 보여줘야한다는 생각이 있기 때문에 아래 github에서 프로젝트를 보실 수 있습니다. https://github.com/navskh/apply-design-system 개발은 Next.js (v14) 로 하였으며, 디자인은 기존 저희 회사의 ‘반응형 원서’에서 사용되는 css를 sample로 가져왔습니다.

현재까지는, 아직 구체화 시키지는 못하였으나

디자인 시스템의 구성요소

만들면서 공부한 내용을 정리해봅니다.

1. 토큰

디자인 구성요소로서의 가장 작은 단위를 토큰이라 부르는 것을 보게 되었습니다.

컬러토큰 https://testdesign.jinhakapply.com/AdmissionApplyV4/_guide_font.html
타이포그래피 토큰
여백 토큰
트랜지션 토큰

등등이 있으며 대부분의 디자인 시스템의 경우 Foundation 이라고 하는 영역에 지정하는 것을 보게 되었습니다.

이 경우, Sample 엘리먼트가 따로 있는 것이 아니라 어떤 디자인의 철학, 근간 등을 정리해둔 문서의 느낌이 강한 것을 볼 수 있었습니다.

2. 컴포넌트

토큰들의 조합으로 생김새 등을 지정

button 하나 안에도, color, fill, weak, normal, pressed 등

몇가지 옵션으로 제약함을 지정하였고 이를 묶어서 컴포넌트라 부르는 것을 보았습니다.

3. 패턴 (Rule 에 가까우므로 가이드문서에 저장) ⇒ 기획자 사용

사용처를 지정

primary fill : CTA .로

danger fill : 부정적 개념

추가적으로 동작하는 것 등을 지정함을 알게 되었습니다.

그 외 1) 필드

저희 회사는 내부적으로 사용하고 있는 생성툴이 있는데

이 생성툴에서 이야기하는 필드의 개념은 컴포넌트의 조합입니다.

그래서, 어떤 라벨과 input 의 조합을 필드라고 부르는 것을 보았습니다.

적정선에서의 제한을 두어 만들어야 할 것으로 예상되어집니다.

그 외 2) 템플릿

또한 추가적으로 앞으로의 프로젝트의 성격을 생각해볼 때 템플릿이라는 요소가 추가되어야 함을 알게 되었습니다.

템플릿은 곧 필드의 조합 자주쓰는 필드의 조합을 묶어서 템플릿으로 사용할 수 있도록 지정할 예정입니다.

디자인 핸드오프

최종 목표는, Figma ⇒ vscode 로의 변환이 가능해져야 함을 생각하게 되었습니다.

그러려면 디자인의 구조화가 필요하고. (json)

또한 Figma API의 사용등을 통해 디자인 산출물을 html로 변환해주는 모듈을 만들어보려 합니다.

다음 포스트로 작성해보겠습니다.

다음을 기약하며

지금까지의 글을 읽어주셔서 감사합니다.

디자인 시스템에 관하여