디자인 시스템 알아보기

• 저번 포스팅에서는 UI / UX에 대한 개념과 차이점에 대해 알아보았습니다. 그런데 문득 이런 생각이 들 수 있습니다. 개발자는 디자인까지 일일이 코딩해야 하는건가?? 이런 물음은 세상이 좋아져서 아니라고 말할 수 있습니다. 왜냐하면 오늘 알아볼 디자인 시스템이 디자인을 도와주기 때문입니다!

---

📗 디자인 시스템이란?

• 디자인 시스템이란 웹이나 앱 같은 서비스 디자인에 적용되는 디자인 원칙이나 규격을 의미합니다. 즉 일관적인 디자인을 위해 UI 가이드라인, UX 가이드 라인, 그리고 컴포넌트들을 모아놓은 것이죠.

• 디자인 시스템은 기업이나 조직이 제품, 서비스, 웹 사이트 등을 개발할 경우 디자인을 일관되고 효율적으로 유지할 수 있도록 도구와 체계입니다.

---

📗 디자인 시스템을 어디서 접하지?

• 디자인 시스템은 우리가 사용하는 대부분의 서비스에서 접할 수 있습니다. 예시로 카카오를 보면 노란색으로 대표되는 색상이나 디자인이 있습니다. 그리고 카카오 맵 등 카카오 내에서 이용하는 세부 어플들에 일관성을 느낄 수 있죠. 각각의 서비스가 아닌 디자인 시스템을 이용해서 제작되었기 때문입니다.

---

📗 디자인 시스템의 장점들

📌 일관성

• 디자인 시스템은 일관된 디자인 원칙과 가이드라인을 제공하여 브랜드 또는 제품의 일관성을 유지합니다.

📌 효율성

• 디자인 시스템은 디자이너와 개발자 간의 협업 및 개발 속도를 향상시킵니다.

📌 유지 보수 용이성

• 변경이나 업데이트가 필요한 경우 역시 디자인 시스템을 통해 전체적으로 동일한 방식으로 업데이트를 수행할 수 있어 유지 보수 역시 용이합니다.

📌 품질 향상

• 사람들의 경험을 향상시키기 위한 최적의 디자인 패턴, 구성 요소들을 포함하여 제품의 품질을 향상시킵니다.

📌 확장성

• 디자인 시스템은 기업이나 조직이 새로운 제품이나 서비스를 만들 경우에도 확장 가능한 구조를 제공합니다.

---

📗 디자인 시스템을 더 알아보기

📌 구성요소

• 디자인 시스템은 색상, 타이포그래피, 스타일, 일관된 UI/UX 요소 등등 여러 가지를 포함하고 있습니다. 우리가 예전에 레고를 조립할 때 레고 세트라고 생각하면 이해가 편하죠.

• 앞서 말한 카카오의 예시와 같이 대표 색상과 디자인 방식을 볼 수 있고, 이러한 방식들이 기업에서 추구하는 디자인 시스템입니다.
  (초록색은 네이버, 노란색은 카카오, G는 구글로 생각이 나듯이 디자인 시스템으로 강력한 인식을 남길 수 있습니다.)

📌 만드는 방법

• 먼저 디자인을 검토하는 것부터 시작합니다. 제품의 모든 요소들을 살펴본뒤 각각의 UI요소들을 분리하죠. 이 과정에서 수정해야 할 UI가 무엇인지도 판별할 수 있습니다.

📌 디자인 시스템을 만드는 도구

• 개발자가 팀 프로젝트를 진행하다보면, Figma를 사용하여 디자인 초안을 잡습니다. 우리가 잘 알고 있는 피그마역시 디자인 시스템을 만드는 도구이죠. 그 외에도 이러한 것들이 현재 존재합니다.

🔈인비전 DSM(Invision DSM)
🔈피그마(Figma)
🔈액슈어(Axure)
🔈스케치(Sketch)
🔈어도비 XD(Abode XD)
🔈제로헤이트(ZeroHeight)