DevTalk 이란?
- APPS 정기세미나에서, 매주 새로운 유익한 개발 관련 토픽을 선정하여 약 10분간 진행하는 기술 세미나
주제 선정 이유
-
디자인 시스템이라는 새로운 개념을 공유하고 싶어서(나조차 알게 된지 얼마 안되었고, 처음 들었던 디자인 시스템의 개념이 굉장히 흥미로웠기 때문)
-
디자인 시스템을 토대로 사용자에게 통일된 UI를 제공하여 UX를 개선한다는 흐름이 흥미로워서
-
디자이너, 개발자가 함께 만들어가는 시스템이기에
어떤 내용을 발표하였는가
- 디자인 시스템 개념
- 디자인 시스템이 필요한 이유
- 도입 사례 (구글, 라인 등)
- 도입 시점 3가지
- 디자인 시스템 작업 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명만 되어도 일관된 작업을 유지하기 쉽지 않은데, 그 이상의 인력이 투입되는 프로젝트라면 디자인 시스템이 더욱 유용할 것 같다. 언젠가 디자인 시스템의 장점을 직접 체감해볼 수 있는 기회가 찾아오면 좋겠다.