디자인 시스템

혹시 디자인 시스템 구축 해보셨나요?

면접에서 듣는 흔한 질문

UI 디자이너 사이에서 디자인 시스템이 화두가 된지 벌써 몇 년이 됐다. 이제 채용 공고 사이트 JD를 보면 디자인 시스템 구축 경험을 우대 사항으로 적혀있는 경우가 흔하다.
하지만, 제대로 적용한 기업을 많이 보지 못했다.
지난 10개월간 개발팀과 구축을 해보며 느낀 점을 바탕으로 왜 그럴까 생각해 보면 다양한 이유가 있었다.
모두가 필요하다고 공감해서 구축하는데 들어가는 인적 리소스가 확보되어야 하는데, 바쁘게 돌아가는 기업 입장에서는 쉽지 않다. 누군가는 나서서 투자 대비 효율이 좋다는 설득의 과정을 거쳐야 하는데 이해관계자가 많을수록 힘들다.

주변 사례를 들어보면 디자인시스템 구축을 시도는 해봤지만, 애초에 만들 때 효율적으로 ‘잘’ 만들어지지 않아서 쓰다 말자는 사람도 있고.. 해당 시스템을 활용할 실무 조직의 규모가 클수록 가이드라인 배포 및 교육이 제대로 이뤄지지 않으면 규칙을 제대로 지켜서 운영을 하기 어렵다.

현실적으로 디자인 시스템을 반영 가능한 조건

  1. 자사 서비스를 운영 중인 인하우스
  2. 디자인 실무자가 사용되는 툴 통일(예, 스케치 혹은 피그마)
  3. 협업 가능한 프론트앤드 개발자
  4. 디자인 시스템 활용을 위한 가이드라인 제작 및 교육

*여기서 말한 조건이란 or 조건이 아니라 and 조건이다. 하나라도 포함되지 않으면 만들기 어렵고, 만들어도 운영되기 힘들다.

그럼에도 왜 만들어야 할까?

기업에서 운영하는 디지털 프로덕트의 규모가 작을 때는 없어도 괜찮지만, 지속적으로 확장되고 협업 해야하는 실무자들이 많아지면 필요성을 절실히 느끼게 된다. 디자인 시스템을 구축하는 가장 큰 이유이자 목표는 크게 2가지로 생각한다.

  1. 해당 브랜드의 서비스를 사용하는 사람의 사용자 경험을 동일하게 제공하는 것
  2. 해당 서비스를 운영하는 실무자들이 유지 보수할 때 불필요한 손실을 줄이고 빠르게 대응할 수 있는 환경을 구축하는 것

회사에서 제품을 다각화하는 시점에 구축해 놓은 디자인 시스템이 큰 힘을 발휘했다. 처음부터 잡으려면 많은 고민과 작업 시간이 소요될 텐데, 빠르게 MVP 모델을 구축할 수 있었다. 여기서 단순히 업무 속도만 빠른 것이 아니라, 정확도도 높아진다. 디자인 시스템 구축 시 일관성과 표준을 잡고 그 규칙에 따라 엘리먼트와 컴포넌트를 사용했기 때문에 상향 평준화된, 그리고 예측 가능한 결과물이 나왔다. (개발도 마찬가지)

여기서 가장 중요하게 생각하는 부분

개인적으로 가장 중요하게 생각하는 부분은 ‘개발까지 적용’되는 것이다.
디자인만 되고 개발 쪽과 싱크가 맞지 않으면 반쪽짜리 디자인 시스템이다. 앞서 언급한 것처럼 디자이너와 개발자가 매번 버튼을 만들거나 색상을 다르게 하고 자잘한 고민할 시간을 아낄 수 있다.
디자이너 입장에서 개발자분들과 협업해서 디자인 시스템 구축을 제대로 하려면 리액트, 앵귤러, 뷰와 같은 프론트앤드 개발 프레임워크가 어떤 식으로 작업되는지 이해하는 게 중요하다. 어디부터 어디까지는 변수로 처리하고, 엘리먼트와 컴포넌트화를 하고 이런 걸 정하기 쉽다.

디자인 시스템 구축 시 염두 해 둘 부분

  1. 컬러 시스템이나 타이포그래피적인 부분은 변수 등록이 필요하다.
  2. 레이아웃에 대한 가이드라인 작업시 고정과 가변 영역을 이해하고, 유저의 접속 디바이스의 해상도 최적화를 신경써야 한다.
  3. 경우의 수를 염두에 둬야 한다. 단순 버튼, 인풋이라도 default, hover, pressed, disabled 등 다양한 상태가 있다. 한번 만들어서 개발까지 진행되면 다시 가이드라인을 줄 필요 없다.
  4. 불필요한 것은 애초에 만들지 않는다. 디자인 시스템을 구축해도 자주 활용되는 엘리먼트와 컴포넌트가 있고 안 쓰이는 것들이 있다. 하지만, 특정 페이지만 적용되는 경우는 디자인 시스템으로 적용하지 않아야 한다.
  5. 엘리먼트와 컴포넌트의 연계성이 중요하다.
  6. 개발자와 효율적인 소통을 위해 작명 관리도 중요하다.
BDS Elements 예시 이미지
BDS Components 예시 이미지

또한, 프론트앤드 개발팀에서 징검다리 역할을 위해 스토리북으로 제작된 사이트가 있어서 옵션에 따른 형태나 상황에 따른 인터렉션이 제대로 적용 됐는지 확인 할 수 있다.

BDS 스토리북

디자인 시스템 구축 이후 가장 중요한 것은 지속적으로 관리하고 운영하는 것이다. 신규 입사자가 있을 경우에 제대로 가이드라인을 인지시키고 사용법을 전달하는 것까지도 업무의 범위가 아닐까 생각이 든다.

Ps. 최근에 Line DevDay에 올라온 라인 디자인 시스템 LDS가 정리가 잘되어있어 공유합니다. https://designsystem.line.me/

#design system#UI#디자인시스템