[UX/UI 디자인 입문]피그마 기초 UI키트와 디자인 시스템의 차이
UX/UI 디자인 교육 과정이 4일 차입니다. 내일이면 벌써 일주일이 지나가네요.
역시 작심삼일은 과학인가봅니다...
오늘은 지난 3일 보다 약간 해이해진 상태로 공부를 했는데요 ㅎㅎ,,,
하 지 만~! 작심삼일도 삼일에 한 번씩 해주면 된다고 하잖아요? ㅋㅋ
저는 다시 내일부터 또 힘내서 열심히 공부해볼까 합니다!
해이하면서 공부했다고는 해도 그래도 오늘도 여러 가지를 배울 수 있었습니다.
오늘은 UI키트와 디자인 시스템이 무엇인지에 대해서 다뤄 볼 건데요.
먼저 디자인 시스템이 무엇인지 살펴보겠습니다!
1. 디자인 시스템
- 디자인 시스템의 개념
디자이너들은 웹과 앱을 디자인합니다. 이때 웹과 앱을 제품(프로덕트)라고 부르는데요.
프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선하는 일을 합니다.
이 때 디자이너들은 UI를 매번 새로 만들게 된다면 작업의 량도 늘어나는 수고스러움을 겪게 될 것이고
UX(사용자의 경험)의 문제가 무엇인지에 대해 파악할 시간도 부족해지게 됩니다.
이럴 때 UI를 만들어 놓고 필요할 때 가져와서 사용한다면 어떨까요?
작업량은 줄어들고 사용자의 니즈를 파악할 시간이 더욱 늘어나겠죠?
그런데, 디자이너는 혼자 일하는 사람들이 아니에요. 다른 디자이너들도 있고, 또 개발자들과도 일해야 합니다.
내가 머릿속으로만 생각한 UI 디자인이 다른 디자이너나 개발자도 같은 생각을 가지고 만들어 갈 순 없어요.
이때 필요해지는 것이 디자인 시스템입니다.
디자인 시스템은 UI구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서라고 생각하시면 됩니다.
- 디자인 시스템의 목적
디자인 시스템의 목적은 반복적인 UI를 효율적으로 관리할 수 있게 만들어 줍니다.
한번 만들어 두고 다음에 또 쓰게 될 때 복사해서 붙여 넣으면 작업 시간도 그만큼 줄겠죠?
그다음 팀 전체가 같은 정도로 이해할 수 있게 됩니다.
피그마는 개발자와 디자이너가 공통 작업이 가능하기 때문에 어떤 디자이너가 UI를 사용하더라도 일관된 사용법을
지킬 수 있게 됩니다.
코멘트도 섞어가면서 디자인을 하게 된다면 여러 번 할 미팅도 단 몇 번으로 줄일 수도 있을 것입니다.
2. UI키트
UI키트는 쉽게 생각하면 디자인 키트의 하위 개념이라고 생각하면 쉬워요!
디자인 시스템과는 다르게 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않을 뿐입니다.
만약 개발자와 디자이너 단 둘이서 프로덕트를 만들어보자라고 했을 때
디자인 시스템은 오히려 작업의 수량만을 늘리게 될 수도 있습니다.
서로 합이 잘 맞고, 팀 인원이 적다면 오히려 완벽한 문서를 갖추는 게 비효율적일 수 있습니다.
이럴 때는 UI 키트 수준만 유지한 채로 빠르게 만드는 게 더 효율적일 수 있겠죠?
디자인 시스템과 UI키트의 차이점이 무엇인지 예시를 들어 볼게요!
김치, 돼지고기, 대파, 마늘, 고춧가루 등등
이런 요리 재료들이 있습니다.
이 요리 재료들을 가지고 어떤 음식을 만들어 볼까요?
김치찌개?
김치제육?
김치찜?
어찌 보면 삼겹살 구워 먹기도 가능하겠네요
이렇게 요리재료들만 나열이 되어 있다면 우리는 이 요리재료를 가지고 무엇을 만들지 예상하기 힘들어요.
이런 요리 재료들을 UI키트라고 할게요.
그럼 이 요리 재료에 디자인 시스템이 들어간다면
배추김치 1 포기, 돼지고기 목살 300g, 대파 1컵(200ml), 다진 마늘 1큰술, 고춧가루 2큰술 등등
김치는 5cm 크기로 썬다, 목살은 3cm 크기로 썬다, 대파는 어슷썰기 해서 준비한다, 마늘은 다져둔다 등등
김치찌개 레시피 : 냄비에 목살을 넣고 적당히...
이렇게 디자인 시스템은 재료 목록과 다듬는 방법, 조리법까지 상세하게 나와 있는 요리책이 되는 셈인 거죠!
디자인 시스템은 UI 자체뿐만 아니라 규격과 스펙, 사용 사례, 주의 사항 등이 모든 게 들어간 종합적인 제품 가이드라인이 됩니다!