컴포넌트, 이제 익숙해지셨나요?

디자인 시스템: 컴포넌트 가이드를 마무리하며

Apr 20. 2025

본 시리즈에서 다룬 컴포넌트 중 일부

에필로그

'디자인 시스템: 컴포넌트 가이드' 시리즈는 실무에서 자주 마주치지만 헷갈리기 쉬운 요소들을, 실제 디자인 가이드라인을 중심으로 명확하게 설명하였습니다. (혹시 이 글을 통해 본 시리즈를 처음 접하셨다면, 프롤로그를 통해 전체 흐름을 확인하실 수 있습니다.)

[브런치북] 디자인 시스템 : 컴포넌트 가이드

"팝업이랑 모달은 뭐가 달라?" "이건 버튼이야, 칩이야?" 디자인 시스템에 대해 귀가 따갑도록 들어왔지만 정작 어떻게 공부해야 할지 막막한 디자이너들을 위한 컴포넌트 가이드입니다. 버튼,

https://brunch.co.kr/brunchbook/component

단순히 종류만 나누는 것이 아니라, 각 컴포넌트의 목적과 맥락을 이해하고, 그에 맞는 사용법까지 쉽게 익힐 수 있도록 구성했습니다. 디자인 시스템에 관한 2개의 글, 컴포넌트에 관한 18개의 글을 통해 얕지만 넓게 컴포넌트를 다루고자 하였습니다.

모든 컴포넌트를 다루지는 않았으나, 글로 발행할만한 주요 컴포넌트는 많이 다루었다고 생각하여 에필로그를 작성하게 되었습니다. 본 글에서는 시리즈를 통해 하게 된 생각들을 편하게 풀어보겠습니다.

본 시리즈를 시작하게 된 계기

본 시리즈는 현업에서 디자인 시스템을 다루며 든 생각으로부터 시작되었습니다.

누구는 메뉴, 누구는 드롭다운 ···

1️⃣ 각자 다르게 생각하는 디자인 시스템 · 컴포넌트

UI·UX 직군의 프로젝트를 꽤 진행해 본 학부생, 취업준비생, 주니어 디자이너에게 컴포넌트가 대단히 어려운 개념은 아닙니다. 다만 현업에서 직접 디자인 시스템을 경험하고 있거나 따로 공부하지 않은 이상, 생각보다 심도 깊게 공부하기 어려울 수 있다는 생각이 들었습니다.

그렇기에 디자인 시스템의 레벨을 다르게 생각하거나, 유사한 컴포넌트를 다르게 부르거나, 이에 대한 고민조차 해보지 못한 상황이 생기고 있었어요.

훌륭한 가이드는 많습니다. 다만 ···

2️⃣ 디자인 시스템에 대한 접근성

저조차도 그랬습니다만 Human Interface Design, Material Design과 같은 기존의 훌륭한 디자인 시스템에 대한 접근성이 생각보다 낮다고 생각했습니다. 직독직해가 되지 않는 이상 번역을 하더라도 전문 용어를 100% 의도에 맞게 이해하는 데는 피로감이 있었고, 디자인 시스템마다 구조가 달라 어디서부터 어떻게 봐야 할지 몰랐던 분들도 분명히 많을 거라 생각합니다. (본 시리즈의 타깃이 초심자인 것을 감안한다면)

그렇기에 기존 디자인 시스템 · 컴포넌트를 주니어 이하의 눈높이에 맞게 한 번에 정리된 문서가 있으면 좋겠다고 생각했습니다. 국내에도 디자인 시스템과 가이드 문서가 많지만, 백과사전처럼 답답하지 않고 궁금한 내용을 중심으로 흥미를 가질 수 있도록 말이죠.

본 시리즈를 마치며 드는 생각

우선 본 시리즈는 HIG 및 Material 3 두 가지 디자인 시스템에 상당히 의존하여 컴포넌트를 설명하고 있습니다. 이점으로는 기존의 훌륭한 가이드를 기반으로 정확한 정보를 전달할 수 있지만, 반대로 가이드에 국한되어 개념을 설명하거나 실무보다 편협된 시야로 설명했다는 생각도 듭니다. 실무에서는 사실 용어가 다르게 썼다고 당장은 문제가 되지 않을 수도 있고, 기업마다 다르게 정의할 수 있기 때문입니다.