초보 디자이너라면 알아야 할 디자인 시스템 A to Z

Published in

twolinecode

7 min readMay 28, 2024

디자인 시스템이란?

디자인 시스템은 인터페이스 디자인에서 반복적으로 사용되는 요소를 모아 구성한 일종의 가이드라인이에요. 텍스트 스타일, 컬러, 레이아웃 등 UI에 활용되는 요소를 정의하고 표준화해서 디자인에 통일성을 유지할 수 있도록 도와줍니다. 예를 들어 레고를 떠올려 볼게요. 로봇을 하나 만들려고 하면 어떤 색을 쓸지, 어떻게 만들어야 할지, 부품도 필요하고 설명서도 필요할 텐데요. 디자인 시스템이 부품과 설명서의 역할을 해 줍니다. 제품을 만들 때 말끔하게 정리된 요소과 가이드라인이 얼마나 중요한지, 그 필요성을 자세히 알아보겠습니다.

디자인 시스템, 왜 필요한가요?

사용자 경험을 일관되게 유지한다.

디자인이 늘 같은 컨셉을 유지하도록 운영하는 것은 어렵습니다. 디자이너가 많거나 초기 컨셉이 정해진 후 오랜 시간이 지난 경우에는 처음에 설정했던 제품의 컨셉이 흐트러지기 쉬워요. 디자인이 일관되지 못하면 사용자 경험에도 좋지 않고 신뢰도에도 영향을 주게 되죠. 이때 제품 전반에 걸쳐 사용되는 표준 규칙이 있다면 작업자의 주관이 개입하는 일이 줄어들고, 디자인의 통일성을 유지할 수 있어요.

2. 효율적인 작업 환경을 제공한다.

디자인 시스템을 사용하면 반복되는 작업을 줄일 수 있습니다. 재사용 가능한 컴포넌트, 패턴을 정리해두면 같은 디자인의 버튼을 여러번 만들 필요도 없고, 디자인을 수정하고 싶을 때 쉽게 적용할 수 있어요. 제품 제작 기간도 단축되기 때문에 매우 효율적입니다.

3. 원활하고 정확한 협업이 가능하다.

디자인 시스템은 디자이너, 개발자, 프로젝트 매니저 등 모든 팀원이 함께 볼 수 있는 제품의 지침이자 주제에 대한 근거입니다. 모든 작업자가 제품에 대해 같은 이해를 하고 있으니 원활한 소통이 가능해져요. 디자인시스템을 코드화해두면 설명의 수고로움도 덜 수 있으니 더 편리한 작업 환경을 만들 수 있어요.

디자인 시스템을 전략적으로 활용하려면?

디자인 시스템의 이로운 점은 잘 알지만, 막상 도입하려면 막막하고 어려울텐데요. 디자이너 혼자 사용하는 도구가 아닌 만큼, 팀 단위에서 전략적으로 선택하는 것이 중요합니다. 이때 적용하려는 제품에 디자인시스템이 왜 필요한지 근거를 확보하고 나면 방향성이 명확해질 거예요. Figma의 Chad Bergman은 몇 가지 디자인 시스템 필요 여부 판단 기준을 제안했는데요. 그 내용은 아래와 같습니다.

스타일 가이드란?

디자인 시스템을 구축하다보면 스타일 가이드라는 단어를 접하게 될 텐데요. 디자인 시스템과 혼용되기 쉬운 스타일 가이드에 대해 알아보겠습니다. 스타일가이드는 제품에서 일관적으로 보여 줘야 할 시각적인 요소에 대한 가이드라인입니다. 컬러, 폰트, 버튼 모양, 아이콘 스타일 등 요소들이 스타일가이드에 해당돼요. 디자인 시스템은 이런 스타일가이드를 포함한 상위의 시스템이라고 생각하면 이해가 쉬운데요. UX 원칙, 데이터 시각화 가이드, 프레임 워크 등 경험의 영역까지 포괄적으로 지칭하고 있습니다.

1. Typography

타이포그래피는 제품 내에서 전반적으로 사용되는 글을 디자인화합니다. 단순히 글자 크기와 색상만 지정하는 게 아니라, 이 스타일을 어느 구조에서 사용해야 하는지, 어떤 형식으로 사용할 것인지를 명확히 하는 것이 중요해요. 투라인코드에서는 사용한 텍스타일과 크기, line-height를 Local Style로 지정하여 사용하고 있습니다.

2. Color Palette

색상은 브랜드 아이덴티티에 직결되는 주요한 요소입니다. 음영과 색상은 사용되는 목적과 상황에 따라 다양한 역할로 활용될 수 있기 때문에 미리 지정해 둘 필요가 있는데요. 이때 컬러 팔레트가 많은 도움을 줍니다.

색상 팔레트를 만들어 두면 디자인 작업에도 유용하게 사용되기 때문에, 투라인코드에서는 단순히 주요 색상만 나열하는데 그치지 않고 역할과 음영의 범위까지 지정해 두었습니다.

3. Icon Style

일관적인 디자인을 위해서는 아이콘 형태도 통일할 필요가 있습니다. 아래, 왼쪽의 이미지와 같이 다양한 스타일의 아이콘이 하나의 제품에서 사용되고 있다면 시선이 분산되어 불편함을 줄 수 있어요. 반면 오른쪽의 이미지에서는 정돈되어 보임을 확인할 수 있습니다.

4. Components

컴포넌트는 재사용 가능한 구성 요소를 모아둔 집합체입니다. 버튼, 입력창 등 자주 사용하는 요소의 디자인을 지정해두어 효율적으로 사용할 수 있어요. 어느 상황에 어떤 컴포넌트를 쓰는지까지 정의해두면 협업하는 데에도 큰 도움이 됩니다.

컴포넌트 구성이 익숙하지 않고 어렵다면 아토믹 디자인(Atomic design)을 이해하는 것도 도움이 될 수 있습니다. 아토믹 디자인은 반복되는 UI를 더 이상 쪼갤 수 없는 요소 단위로 나누어서, 재조합할 수 있도록 가변성을 부여하는 디자인 방법론 중 하나인데요. 다음 포스팅에서 자세히 다루어보겠습니다.

참고할 만한 예시

디자인 시스템이 무엇인지, 어떻게 사용해야 하는지 알아보았습니다. 하지만 아직 디자인 시스템을 경험해보지 않았다면 무엇부터 시작할지 막막하게 느껴질 거예요. 이때 좋은 레퍼런스를 살펴보면 방향을 잡기 쉬울 것 같아요. 아래 사례들은 각 회사마다 가진 제품에 맞게 제작된 디자인 시스템입니다. 정답으로 보기 보다는 참고자료로 활용하면 더 좋은 디자인 시스템을 구축할 수 있을 거예요.