[디자인] 디자인시스템이 뭔가요?
국내외 디자인시스템 추천
패스트파이브는 중소규모 기업을 운영하시는 대표님들과
향후 창업을 계획하고 계신 예비창업자분들을 위해,
비즈니스 운영에 필요한 다양한 지식과 서비스를 제공하고 있습니다.
패스트파이브에 입주하시면,
다양한 비즈니스 솔루션을 합리적인 가격으로 편리하게 이용하실 수 있습니다.
[패파솔루션]
The business solutions you need
이런 분들이 읽으면 좋아요.
디자인 시스템을 처음 접하는 UIUX 디자이너, 개발자
디자인 시스템 없이 디자인 및 구축 중인 기업 및 스타트업 팀
이런 내용을 알 수 있어요.
디자인 시스템에 대한 정의와 장점
다양한 디자인 시스템의 소개와 활용성
*아래 콘텐츠는 [똑똑한개발자]에서 제공해 주셨습니다.
안녕하세요! 똑똑한개발자의 디자이너 지은입니다. 이미 많은 기업과 스타트업에서 사용중인 디자인 시스템에 대해 한번 쯤은 들어보셨을거라 생각됩니다. 그래서 그걸 왜 사용하는데? 라고 말씀하신다면 아래의 내용을 살펴보시고 답을 얻으시길 바랍니다!
Why? 디자인 시스템
디자인 시스템(Design System)에 대해 정의한다면 ‘반복되는 작업을 줄이고 일관성 있는 작업을 위한 표준으로, 웹이나 서비스에 적용된 디자인 스타일의 규칙과 가이드라인’을 의미합니다. 혼자의 작업물이라면 가이드를 세워 작업하는데 큰 무리가 있진 않겠지만, 서비스 확장이나 인원 투입 등으로 프로젝트가 확장되면 각자의 성향에 맞춰지거나 규칙이 잘 이행되지 않을 때가 있습니다. 이는 프로젝트 작업에 있어 불협화음과 딜레이를 유발할 수 있으며, 사용자 입장에서는 통일성 없이 각 다른 환경의 디자인으로 보여 혼란을 야기합니다. 디자인 시스템은 이러한 문제들을 방지하는 대책으로 팀 사이의 원활하고 효율적인 작업 진행을 도우며, 일관된 서비스 제공으로 사용자 경험을 극대화합니다.
각 기업들의 디자인 시스템
갈 수록 디자인 시스템을 설계하고 오픈하는 기업들이 많아지면서, 각 기업의 브랜드성과 시스템 적용 범위에 따라 다양성이 보여지고 있습니다. 지금부터 몇가지 기업의 디자인 시스템을 소개해 드리겠습니다.
1. Line Design System
라인은 다양한 국가에 서비스를 제공하는 만큼 사용자들에게 동일한 서비스 환경을 전달하기 위해 굉장히 세분화 되어 있습니다. 일관성을 유지하기 위해 라이브러리를 확장하고 서비스나 기능에 대한 가이드도 명시 되어 있기 때문에 다양한 문화권을 아우를 수 있어 보입니다.
2. Microsoft Fluent Design System
개발자가 시스템을 사용하여 매력적이고 생산적인 앱을 쉽게 빌드할 수 있다는 Microsoft의 자신감처럼 web, iOS, Android 등 카테고리를 나누어 필요한 정보를 빠르게 확인이 가능합니다. 직접 클릭해보고 Export to CodePen을 통해 구성을 바로 확인할 수 있어 디자이너와 개발자 사이의 간격을 좁히고자 합니다.
3. Adobe Design System
어도비 디자인 시스템은 디자인 토큰에 대한 설명부터 구성 방법까지 상세한 설명과 예시 이미지를 제공하여 원활하고 직관적인 디자인 시스템을 제공합니다.
그래서..지금 똑똑한개발자는
물론 똑똑한개발자도 이미 디자인 시스템이 구축되어 다양하게 활용하고 있습니다.
똑똑한개발자에서는 이미 ‘디자이너와 개발자 서로에게 더 시너지를 낼 수 있는 디자인 시스템을 만들자!’란 명확한 목표가 있었기에 구축을 진행하기 전 아래와 같은 원칙을 먼저 정의하였습니다.
디자이너-개발자 간 효율적인 커뮤니케이션과 공유, 반응형 환경에 동기화 시켜 대응할 수 있는 템플릿 형태의 시스템을 구축하기 위해
일관성 : 제품 전반에서 컴포넌트가 통일성 있게 조합되며, 제품에서 느껴지는 일관성을 유지할 것
확장성 : 다양한 조합과 반응형 환경에 대응 가능한 확장성을 가지고 있을 것.
효율성 : 디자이너와 개발자가 효율적으로 소통하며 컴포넌트를 관리 및 수정할 수 있을 것.
라이브러리 형태로 공유가능한 '오픈디자인(Open Design)' 시스템 구축을 위해
재사용성 : 제품의 특성에 맞게 대응해 시스템 가이드를 제공하며, 다양하게 적용해 활용할 수 있을 것.
운용성 : 디자인 및 코드 상에서, 간단한 조작 및 변경으로 컴포넌트 조합과 시스템 가이드 재 적용이 가능하게 구성할 것.
이러한 원칙을 최대한 살리면서 구축된 똑개의 디자인 시스템은 Figma Library Assets로 이루어진 공통의 Parent Design System 산하에, 제품마다 별도의 디자인시스템을 구축해 관리하고 있습니다. 각 제품 별 브랜드 가이드에 따라 컬러, 로고 등의 일부 요소를 간단하게 변경 적용하면 Parent System과 손쉽게 동기화 되는 형태로 구축, 관리합니다.
디자인과 개발자들의 니즈를 먼저 파악하고 명확한 목표를 세워뒀기에 그점이 많이 녹아들었고, 직접 사용해본 결과 여러가지 장점들이 많았습니다.
장점
일관성 있는 UIUX로 일관된 사용자 경험 제공
확장성으로 인한 커뮤니케이션 비용 절감
리소스 활용으로 작업 시간 단축
사용자 경험에 좀 더 집중할 수 있음
이런 다방면에서 활용성을 가진 디자인시스템이지만 자칫 잘못하면 Creative한 부분에 제한을 줄 수 있어 너무 의존적인 태도는 조심해야 합니다. 디자인, 개발, 사용자 경험들은 계속해서 발전하고 있고, 때문에 디자인시스템도 그를 반영한 발전이 필요합니다. 조금 더 효율적인 업무 시스템이자 사용성을 위해서 지속적인 소통과 다양한 측면에 항상 열린 마음이라면 지금보다 더 좋은 시스템으로 발전할 수 있을 것입니다.
무료 비즈니스 뉴스레터 "FIVE minutes"
> 회사 대표를 위한 각종 비즈니스 지식
> 실무자를 위한 직무 꿀팁
> 예비 창업자를 위한 산업 트렌드
단 5분, 비즈니스 인사이트를 얻는 데 필요한 시간
매주 목요일, 가장 의미 있는 5분을 경험해 보세요!
