컴포넌트, 어떻게 공부해야 하나요?
디자인 시스템을 접하기 시작한 디자이너를 위해
이런 거 좋아하시는 분···?프롤로그
이 글을 읽고 계신 분이라면, 아무래도 디자인 전공자이실 확률이 높을 것 같습니다. 디자인 시스템 · 컴포넌트에 관심이 많거나, 배우고 있거나, 혹은 직접 만드는 분도 계시겠지요. 한 가지 질문을 드려보겠습니다.
디자인 시스템이 뭔지 한 문장으로 설명해 주실 수 있나요?
1️⃣ 완전 초보자
“음… 디자인 시스템이요? 디자인이 잘 된 무언가를 말하는 건가요?”
2️⃣용어는 들어본 사람
“그거 버튼이랑 컬러 같은 걸 정리해 놓은 거 아닌가요?”
3️⃣기초적인 개념을 이해하는 사람
“컴포넌트가 모여 있는 디자이너용 가이드 같은 거죠?”
4️⃣실무에서 써본 경험자
“디자인, 개발, 기획이 함께 참고하는 협업의 기준이자 재사용 가능한 자산이에요.”
5️⃣전문적으로 이해하고 활용하는 사람
“일관된 사용자 경험을 위해 브랜드 철학부터 컴포넌트, 코드, 가이드까지 통합된 디자인 운영방식입니다.”
음··· 디자인 시스템을 제대로 본 적이 있던가?
1️⃣번에서 3️⃣번 정도에 해당하는 분이라면 잘 찾아오셨습니다. 하지만 4️⃣번 이상의 분이어도 좋습니다. 잘 알고 있다고 생각했던 디자인 시스템과 컴포넌트가 잠깐이나마 낯설고 헷갈린 경험이 있으셨다면 환영합니다.
실제 가이드라인 중심의 설명'디자인 시스템: 컴포넌트 가이드'는 디자인 시스템에 대해 귀가 따갑도록 들어왔지만 정작 어떻게 공부해야 할지 막막한 디자이너들을 위한 시리즈입니다. 디자인 시스템 중 컴포넌트에 대해 설명합니다.
버튼, 텍스트 필드, 리스트 등 실무에서 자주 마주치지만 헷갈리기 쉬운 요소들을, 실제 디자인 가이드라인을 중심으로 명확하게 설명합니다. 단순히 종류만 나누는 것이 아니라, 각 컴포넌트의 목적과 맥락을 이해하고, 그에 맞는 사용법까지 쉽게 익힐 수 있도록 구성했습니다.
이 시리즈를 끝까지 읽고 나면, 적어도 앞으로 디자인 시스템을 스스로 공부해 나갈 수 있는 힘이 생기도록 말이죠.
목차
먼저 디자인 시스템은 무엇이 있는지, 디자인 시스템이 무엇인지에 대해 알아봅니다.
이후 종류별 컴포넌트의 유형과 특징, 사용방법, 좋은 사례를 알아봅니다.
(실제 글 내용 중 캡쳐)어렵다고 느껴지신다면
특히 관련 용어나 출처가 필요한 부분은 모두 링크처리를 해두었으니, 모르는 용어가 있어 어렵거나 안읽히지 않을까 걱정하지 않으셔도 됩니다.
Apple의 Human Interface Guideline과 Google의 Material3를 중심으로 연결해두었습니다. 하나씩 들어가보면서 디자인 시스템과 자연스럽게 친해질 수 있겠죠?
마치며
일단 잡숴보세요!고민하지말고 일단 '디자인 시스템: 컴포넌트 가이드' 브런치북을 바로 이어서 읽어보세요. 지금 필요한 건, 컴포넌트와 하나라도 더 친해지는 것일 테니까요!
