1. 개요1.1 디자인 시스템은 누가 사용하는가?1.2 빠른 템포로 움직이는 에이전시에서의 디자인 시스템이란? 1.3 디자인 시스템에도 함정은 있다KPT 회고🙌 Keep(좋았던 점)🌱 Problem(개선할 사항)💡Try(개선 아이디어)✔ 액션 아이템
1. 개요
에이전시(개발사)에서는 디자인 시스템을 어떻게 관리하고 활용하고 있는지 생생한 경험기를 전달 드립니다.
1.1 디자인 시스템은 누가 사용하는가?
디자인 시스템을 구축하면 자사 혹은 해당 서비스만의 표준화된 UI를 제공하게 되고, 공통되는 UI와 패턴을 기반으로 컴포넌트를 제작하여 사용할 수 있기에 작업 속도 개선에도 큰 이점이 있다.
그렇다면 디자인 시스템은 디자이너만 사용할까? 결론부터 얘기하자면 ‘NO’다. 물론 시스템 제작의 기획은 디자이너가 진행한다. 하지만 핸드오프 후, 개발이 진행되면 디자이너가 전달한 디자인 시스템을 기반으로 컴포넌트를 제작하여 작업을 진행한다.
이 때, 디자이너만이 알아볼 수 있도록 혹은 뒤죽박죽 정리되지 않은 시스템을 개발자에게 전달하게 되면 개발자는 해당 디자인 시스템을 제대로 사용할 수가 없다.
하여 디자인 시스템을 제작하기 전에 디자이너와 개발자의 논의가 필히 필요하다.
이렇게 디자이너와 개발자의 논의를 거쳐 동일한 기준과 언어를 사용하게 된다면 협업이 더욱 원할해질 수 밖에 없다. 이는 프로젝트 진행 속도를 높여주기도 하고, 오류를 줄이는 데 기여하기도 한다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe742915b-53be-46ee-8523-c4248415afed%2F22a16371-a834-4406-bc6f-78bbfda456ac%2Frm215-nunny-04-banner.png?table=block&id=be45407d-21fd-4f8b-872a-11935546b9a0&cache=v2)
1.2 빠른 템포로 움직이는 에이전시에서의 디자인 시스템이란?
에이전시 혹은 IT 개발사에서는 자사 브랜드나 서비스가 아닌 수주 받은 프로젝트 단위로 작업을 진행한다. 보통은 작업자 별 한 가지의 프로젝트를 담당하지는 않고, 동시에 다수의 프로젝트를 빠르게 진행해야 하는 경우가 많다. 그럼 모든 프로젝트마다 별도로 디자인 시스템을 제작할까?
사실 정답은 없다. 나의 경우는 필드에서 직접 경험을 쌓으며 과도기를 겪고 있는 것 같다. 에이전시의 특성 상, 시간이 촉박하기도 하고 디자인 혹은 개발 공수 내에 디자인 시스템 과업이 포함인 경우도 있지만 아닌 경우도 있다. 하물며 디자인 시스템을 필요로 하지 않는 고객사도 있다. 더하여 구축 후 유지보수를 하거나 서비스를 키워나가는 과정이 없기에 초기에 디자인 시스템을 제작하여도 버전 관리를 직접 진행할 수도 없고, 구축 단계에서만 하여도 잦은 기획/디자인 수정을 거치게 되어 디자인 단계를 FIX하기도 어렵다.
그럼에도 나만의 대안은 존재한다. 에이전시에서의 디자인 시스템은 크게 2가지로 분류해보았다.
- 첫번째로는 우리 회사만의 어떤 프로젝트든 공통적으로 재사용할 수 있는 시스템과
- 두번째로는 해당 프로젝트만의 필수 요소만 갖춰진 간소화된 디자인 시스템이다.
1번의 경우 미리 제작을 하며 회사 내부에서 동료들과 꾸준히 관리를 진행한다.
2번의 경우 해당 프로젝트에 맞는 디자인 시스템을 제작한다. 이 때의 작업 방식은 아래와 같다.
- 기획안을 검토 후 먼저 Foundation이 되는 레이아웃/타이포그래피/컬러 시스템을 구축한다.
- 해당 시스템으로 Frame을 제작 후 디자인 작업을 진행한다.
- 디자인 작업 시, 공통되는 요소들을 수집 후 그 안에서 공통된 요소를 기준으로 분류한다.
- 분류된 토큰들을 수집 후 컴포넌트를 제작한다. ▶ ‘작업물에 반영’
이렇게 하는 이유는 아무리 일정이 촉박하더라도 각 프로젝트별마다의 고유 디자인 정체성을 살리고 작업물의 퀄리티를 높이기 위함이다. 또한 초기 구축 시에 시스템이 바르게 잡혀야 유지보수나 고도화 시, 수월하게 관리를 할 수 있다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe742915b-53be-46ee-8523-c4248415afed%2F8a510baa-ceb2-4cd5-92ef-3705fe4c7452%2FUntitled.png?table=block&id=d79af430-a4f9-479c-9056-f1f5c31959be&cache=v2)
1.3 디자인 시스템에도 함정은 있다
디자인 시스템을 먼저 접한 해외 디자이너들의 커뮤니티에서는 점차 디자인 시스템의 단점을 토로하는 글들이 올라오기 시작했다. 국내라고는 별반 다른게 아니다. 통일된 UXUI가 보장되고, 브랜드의 일관성이 유지되는 등의 큰 이점들이 존재하지만 반대로 디자이너의 창의성이 제한 되기도 하고, 초기에 높은 구축 비용과 시간이 들여진다는 단점들도 존재한다.
그렇다고 전체의 디자인 시스템을 거부할 수는 없다. 디자인 시스템을 처음 접한다면, 단계적으로 필요한 부분부터 도입을 시작하고 점차 버전 관리를 해나간다는 목표를 두고 시작해보자!
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe742915b-53be-46ee-8523-c4248415afed%2Ff54b5e21-4742-4351-8295-3fc3271c4900%2F10259188.jpg?table=block&id=1cd075bf-890b-4426-9db9-81ad20b0f852&cache=v2)
KPT 회고
🙌 Keep(좋았던 점)
- 디자이너와 개발자가 협업하여 디자인 시스템을 구축해나가는 과정을 겪고 있다.
- 프로젝트의 품질을 높일 수가 있다.
🌱 Problem(개선할 사항)
- 정답은 없다. 앞으로 더욱 많은 프로젝트에서 실전으로 활용해보며 끊임없이 개선이 필요하다.
💡Try(개선 아이디어)
- 컴포넌트 라벨링 항목을 최대한 간소화 시켜보자.
✔ 액션 아이템
KPT 회고를 통해, 실제 실행할 것들을 정리해봅니다.
내부 디자인 시스템의 버전 관리
컴포넌트 네이밍 규칙 정하기