728x90
안녕하세요, 꾸우._. 입니다. 이번에는 UX, UI를 비롯한 디자인 스타일의 가이드라인을 잡아주는 디자인 시스템에 대해 알아보고 정리해보겠습니다.
📌 시작 전, 디자인 가이드 종류
| UI 가이드라인 (스타일 가이드) | UX 가이드라인 | 디자인 시스템 |
|
|
|
📌 디자인 시스템 (Design System)
앞에서 언급했듯이, 디자인 시스템이란 디자인 원칙과 규격, 재사용 가능한 UI, 컴포넌트, 코드 등을 포괄하는 시스템을 의미합니다. 즉, 웹이나 서비스 디자인에 적용된 디자인 스타일의 규칙이나 가이드라인이라고 볼 수 있습니다.
디지털 제품 개발 환경에서는 디자인 시스템이 더욱 중요해지고 있는데요. 디자인 시스템을 정확하게 정의하고 사용하는 것은 디자인 작업에 대한 효율성을 높이고, 디자인의 일관성을 유지할 수 있기 때문입니다.
디자인 시스템을 철저하게 만들수록 커뮤니케이션 오류나 변수들에 대한 부분 수정이 현저히 줄어듭니다. 즉, 시스템의 목적에 맞는 디자인을 만드는 것과 작업의 효율성을 높이는 데 있어 꼭 필요한 부분이라고 볼 수 있습니다.
📌 디자인 시스템이 필요한 이유
| 내부 | 외부 |
|
|
📌 디자인 시스템의 장점
다음은 디자인 시스템을 구축했을 때 나타나는 장점들입니다.
- 효율성 확보 (Efficiency)
- 디자인 시스템을 사용하면 반복되는 요소들을 매번 새로 만들 필요 없음
- 재사용 가능한 컴포넌트, 패턴 등을 이용해 작업의 효율성 향상 가능
- 전체 제품 개발에 필요한 시간을 단축하여 더욱 빠르게 시장에 제품을 출시 가능
- 일관성 있는 사용자 경험 (UX Consistency)
- 디자인 시스템의 표준 규칙과 원칙에 따라 서로 다른 페이지나 플랫폼을 걸쳐 일관된 사용자 경험을 구축 가능
- 반복되는 컴포넌트 제작에 소비되는 시간을 아껴서 사용자에게 더 집중할 기회를 만들 수 있음
- 다양한 제품에 대응 (Design at Scale)
- 디자인 시스템을 통해 효율성과 일관성을 확보함으로써 다양한 규모의 제품들을 빠르고 쉽게 만들 수 있음
- 협업에 기여 (Collaboration)
- 프로젝트팀 구성원 사이의 지식 격차를 줄이고 공통의 원칙을 숙지하여 협업에 기여 가능
- 이를 통해 프로젝트 구성원이 함께 학습하고 성장할 수 있으며, 결국 프로젝트의 생산성 향상으로 이어짐
📌 성공적인 디자인 시스템은?
- 집중 : 디자이너가 다른 프로젝트를 방해하지 않고 맡은 프로젝트에 집중할 수 있음
- 명확성 : 플랫폼 전반에 걸친 정책, 제약 뿐만 아니라 디자인의 방향성까지 명확하게 생각할 수 있도록 함
- 자신감 : 디자이너는 자신이 디자인한 내용에 대해 확신하고 팀 구성원들과 커뮤니케이션 할 수 있음
- 일관성 : 제품 전반에 일관성을 유지해 안전하고 친숙한 플랫폼 환경 조성
- 발전과 진화
- 디자인 시스템은 완성되는 것이 아니라 성장하고 발전하고 진화함
- 제품의 사용자와 주변 환경은 끊임없이 변화하기 때문에 이에 따라 새로운 요소들이 필요하고, 어떤 것들은 수정·보완되어야 함
- 공통의 목적과 가치 보유
- 디자인 시스템은 구성원과 팀에게 그 목적과 가치가 공유되는 게 가장 우선시 됨
- 이를 통해 프로젝트가 원팀으로 협업할 수 있으며, 제품의 A부터 Z까지 일관된 사용자 경험 구축 가능
📌 정리
이번에는 디자인 시스템에 대해 알아봤는데요, 대략적으로 이해한 건 프로덕트의 일관된 UI 디자인과 작업의 효율성 향상을 위해 피그마 등의 툴을 활용해 프로덕트의 화면 내에서 공통적으로 사용되는 UI 요소를 규정하여 구축된 시스템이라는 정도입니다.
추가적인 아티클을 더 찾아보고, 이해하는 시간을 가져야겠습니다.
적극적인 피드백은 언제나 환영입니다:)