brunch

You can make anything
by writing

C.S.Lewis

by 플랫슈즈 Feb 24. 2024

디자인시스템의 모든 것

각각의 회사에서 운영하는 디자인시스템 리스트를 모아보았습니다.

디자인시스템 필요할까?




디자인시스템이란 무엇일까?

IT에서 일하고 있다면 한번쯤 들어보았을 '디자인 시스템'

1-2년 전에 디자인트랜드로 자리잡은 '디자인시스템'이 이제는 익숙하고 없으면 안되는..

회사마다 다들 갖고있는 그런 시스템이 된 것 같은데요..

저는 기획자이기때문에 기획자 입장에서 바라본 디자인시스템에 대해 이야기해보려고 합니다.


디자인시스템을 만들기전에는, 디자인가이드가 전부였다고 생각해요

그런데 디자인시스템을 알고 난 이후에는, 디자인을 토큰화해서 개발레벨의 소스까지 맞춰서 디자이너와 개발자 모두 재활용할 수 있도록 시스템으로 구축해서 활용하고 있습니다.

그래서 디자인시스템을 알게된 이후에는 단점보다는 장점이 많다고 생각되어서, 

기획자들도 이 시스템을 같이 활용할 수 있는 형태의 좀 더 확장된 시스템이 되었으면 하는 바램에 포함할 요소를 계속적으로 고민했고..

그래서 생각한 것이 디자인시스템에 UX 가이드와 UX Writing 가이드를 포함하는 의견을 내서 팀에서 진행했던 프로젝트의 산출물 관리를 디자인시스템화 할때 그런 요소를 포함시켰고.

Figma 툴을 활용하여 모든 작업을 진행했고 이 작업물들을 ZeroHeight로 관리하도록 만들었습니다. 

ZeroHeight는 디자인 시스템을 관리할 수 있는 웹 기반 솔루션으로 문서화가 가능하고 오픈링크이지만 비밀번호 등록하면 비공개 설정이 가능해서 사내에서 담당자들하고만 비밀번호를 공유해서 협업을 진행하고 있습니다.


제가 생각하는 디자인시스템은, 협업의 기준으로 활용할 수 있다고 생각해서 한번 구축하고나면.. 새로운 기능이나 운영이슈 발생할 경우 디자인/개발자가 빠른 대응을 할 수 있다는 장점이 있다고 생각합니다.

또 디자인시스템을 구축하고 배포하고 끝나는 것이 아니라, 이 시스템을 만든 순간부터 실무자들 의견을 적극 수용하여, 실무자들이 잘 활용할 수 있는 시스템으로 만들어야된다고 생각합니다. 안그러면 이쁜 쓰레기가 될 수 있으니까요 ㅠㅠ

그리고 회사에서 운영하는 서비스 종류가 많고 각각의 서비스의 성격이 다르다면 Look&Feel을 맞추는 것으로 시작해보는 것도 좋다고 생각합니다. 


그럼 디자인시스템을 구축할때 무엇부터 해야할까요?

디자인 원칙과 컨셉을 정의하고, Component는 반복적이고 공통적으로 사용되는 요소 중심으로 제작해서 1차 구축해서 공유하고, 실무자들과 계속적으로 소통하면서 하나씩 수정하고 발전해나가야 한다고 생각합니다. 또 만드는 것만큼 중요한 것이 합의한 내용을 잘 인지하고 규칙에 맞게 사용하도록 관리하는 것도 중요하다고 생각하고 무엇보다 가장 중요한 것은 실무자들의 공감대 형성이라고 생각해요.

일을 위한 일을 만들기보다.. 그럴싸하고 이뻐보이는 디자인시스템화보다는 구축이후에 재활용되고 필요에 의해 추가요소를 업데이트해나가는 그런 시스템이 되는 것이 Goal이라고 생각합니다.



디자인시스템이란


그럼 각각의 회사에서 만든 후 외부공개한 디자인시스템을 살펴보겠습니다.


※ 라인 디자인시스템

https://designsystem.line.me/



※ 쏘카 디자인시스템

https://design.socar.kr/



※ 지마켓 디자인시스템

https://gds.gmarket.co.kr/



※ 우버 디자인시스템

https://base.uber.com/6d2425e9f/p/294ab4-base-design-system



그 외에는 회사에서 구축한 디자인시스템을 공개하기보다 블로그 글을 통해 공개하는 형태들도 있습니다.



※ 에어비앤비 디자인시스템

https://airbnb.design/building-a-visual-language/



※ 카카오 디자인가이드

https://developers.kakao.com/docs/latest/ko/kakaosync/design-guide



※ 네이버페이디자인시스템

https://medium.com/naverfinancial/defign-네이버파이낸셜의-디자인-시스템을-정의하다-7b7449832f26


※ 토스 디자인시스템

https://toss.im/slash-21/sessions/3-4


※ 리디북스 디자인시스템

https://stonebc.com/archives/14735


※ 마이리얼트립 디자인시스템

https://publy.co/content/2686


작가의 이전글 테크블로그의 모든 것
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari