[DevTalk] 사례로 알아보는 디자인 시스템의 개념과 중요성

DevTalk 이란?

• APPS 정기세미나에서, 매주 새로운 유익한 개발 관련 토픽을 선정하여 약 10분간 진행하는 테크 토크

주제 선정 이유

• 디자인 시스템이라는 새로운 개념을 공유하고 싶어서

  (나조차 알게 된지 얼마 안되었고, 처음 들었던 디자인 시스템의 개념이 굉장히 흥미로웠기 때문)

• 디자인 시스템을 토대로 사용자에게 통일된 UI를 제공하여 UX를 개선한다는 흐름이 흥미로워서

• 디자이너, 개발자가 함께 만들어가는 시스템이기에

어떤 내용을 발표하였는가

1. 디자인 시스템 개념

2. 디자인 시스템이 필요한 이유

3. 도입 사례 (구글, 라인 등)

4. 도입 시점 3가지

5. 디자인 시스템 작업 tool - story book

1) 디자인 시스템 개념

• 서비스의 디자인과 개발을 일관되고 효율적으로 관리 및 개발하기 위해 만들어진 일종의 가이드라인

• 디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템

• 즉, 서비스를 디자인, 설계 및 개발을 할 수 있도록 하는 모든 요소를 그룹화 한 정보 시스템

  

2-1) 디자인 시스템이 필요한 이유

• 서비스가 커짐에 따라 각 기능별로 팀 단위의 작업을 하게 된다.

• 만약 그 팀의 디자이너가 한 명이라면 디자인을 통일해서 작업하는 것은 어렵지 않을 것이다.

• 하지만, 팀원이 5~10명, 혹은 그 이상이라면? 팀의 성향별로 작업물이 다르게 만들어 질 것이다.

• 그래서! 이러한 문제 해결을 위해 공통 가이드라인인 디자인 시스템이 필요하다!

2-2) 왜 회사들은 디자인 시스템을 만들까?

• 디자인 일관성 향상

  • 공통된 디자인 시스템으로 여러 명이 작업하더라도 모든 화면에서 일관된 브랜드 이미지를 유지 가능.

  • 동일한 패턴과 컴포넌트의 반복 사용으로 UX를 개선하고, 사용자가 서비스를 더 쉽게 이해를 도움.

• 작업 효율성 증가

  • UI 요소를 미리 정의해, 개발자와 디자이너가 컴포넌트를 새로 만들지 않고 쉽게 재사용 가능.

  • 작업 시간을 절약하고, 팀원들이 동일한 가이드라인을 따르므로 직군 간 커뮤니케이션도 원활.

• 유지보수 용이성

  • 모든 UI 요소를 중앙에서 관리하면, 업데이트 시 전체 시스템에 일괄 적용할 수 있어 유지보수가 용이.

  • 추가 및 개선 사항이 생길 때 기존 가이드라인을 따르기만 하면 되어, 프로덕트의 확장성 증가

⇒ 이러한 이유로, 많은 기업들이 디자인 시스템 구축에 자원을 투자한다!

⇒ 따라서, 디자인 시스템 가이드를 활용하면 혼란을 방지하고 효율적인 작업이 가능하다.

3) 도입 사례 (구글, 라인, 대한민국 정부)

• Google Material Design (링크)

  • 많은 디자인 시스템의 기준이 되고 있으며, 대부분의 현업 디자이너들이 기본적으로 참고하는 UI 디자인의 바이블과 같은 문서라고 한다.

  • 14년도를 시작으로 지금의 버전3까지 배포하였습니다.

  • 머터리얼 디자인이라는 말은 물리적으로 실제와 비슷한 디자인을 구현하고자 하는 구글의 지향점이 드러납니다.

• LINE Design System (링크)

• 디지털 정부서비스 UI/UX 가이드라인(KRDS) (링크)

  • 이 시스템을 구축하는데 약 2년이 걸렸고 그 과정에서 영국, 호주, 미국 정부 디자인 가이드라인을 참고하였다고 한다.

4) 어느 시점에 만드는가? 크게 3가지

• 제품 군/기능 확장

  • 제품의 기능이 확장되고, 제품과 서비스 군이 늘어날 때 기준이 없으면 점차 일관성이 깨지게 된다. 단적인 예로 런치 아이콘과 스플래쉬 스크린이 있다. 안에 글씨를 넣을 것인지, 어떤 스타일로 아이콘을 통일할 것인지, 앱 이름은 어떻게 지을 것인지에 대한 일관된 기준이 필요하다.

• 새로운 시장 진출

  • 방금의 라인처럼 다양한 국가의 상황에 유연하게 대응하면서도 일관적으로 보이도록 하는 방법을 고민한다. 시간, 날짜를 표기하는 방식이 국가별로 다를 수도 있고, 언어를 읽는 방향이 다를 수도 있는데 이에 대한 기준을 제시한다.

• 서비스 채널이 확장될 때

  • 오프라인 채널이 온라인으로 확장할 수도 있고 같은 앱을 웨어러블, PC에서도 제공하게 될 수 있기 때문

5) 이 많은 양의 컴포넌트들 테스트와 공유는 어떻게?

결론

• 디자인도 결국 큰 틀에서 움직이고, 세부적으로 폰트, 컬러, 모션 등 다양한 형식으로 디자인 시스템 정의가 가능하다.

• 팀원이 4명만 되어도 일관된 작업을 하기 쉽지 않은데, 그 이상의 인력이 투입되는 작업이라면 디자인시스템이 유용할 것 같다.