디자인 시스템의 핵심 구성 요소

안녕하세요, 게으른 사부작이입니다!

 

지난번에 디자인 시스템이 왜 필요한지 알아봤으니, 이번엔 그 시스템을 이루는 기본 뼈대가 뭔지 파헤쳐 볼게요. 저는 처음 디자인 시스템을 공부하면서 "이게 대체 뭐로 만들어진 걸까?" 궁금했는데, 하나씩 뜯어보니 생각보다 이해하기 쉬웠어요. 그럼 저와 함께 디자인 시스템의 핵심 구성 요소를 알아볼까요?

 

ChatGPT 생성 이미지

집을 지을 때 벽돌과 창문이 필요하듯, 디자인 시스템에도 기본 블록이 있어요

집을 지을 때를 떠올려 보세요. 벽돌, 창문, 문 같은 기본 재료가 없으면 집을 제대로 못 짓잖아요. 디자인 시스템도 똑같아요. 디지털 제품(앱, 웹사이트)을 만들 때 필요한 기본 블록들이 있어야 일관되고 멋진 결과물을 뽑아낼 수 있죠. 이 블록들이 바로 디자인 시스템의 핵심 구성 요소예요. 비유하자면, 요리할 때 간장, 설탕, 소금 같은 기본 재료가 있는 것처럼, 디자인 시스템에도 필수 재료가 있답니다. 그럼 어떤 재료들이 있는지 하나씩 살펴볼게요!

핵심 구성 요소 1: 컬러

첫 번째로 중요한 요소는 **컬러(색상)**이에요. 컬러는 디자인에서 가장 눈에 띄는 부분이자, 브랜드의 느낌을 전달하는 핵심 도구예요. 디자인 시스템에서는 보통 5~10개의 기본 색상을 정해놓고 쓰는데, 이걸 "컬러 팔레트"라고 불러요. 예를 들어, "파란색은 주요 버튼, 빨간색은 경고 버튼, 회색은 배경" 이런 식으로 규칙을 정하는 거죠. 제가 좋아하는 예시는 넷플릭스예요. 넷플릭스는 검정과 빨강을 주로 써서 강렬한 느낌을 주고, 흰색으로 깔끔함을 더하죠. 이런 컬러 규칙이 있으면 팀원들이 "이 버튼 무슨 색으로 하지?" 고민할 필요가 없어요.

컬러를 정할 때는 사용자 경험도 고려해야 해요. 예를 들어, 빨간 버튼은 "경고"나 "삭제" 같은 중요한 액션을 나타내는 데 자주 쓰여요. 반면 파란 버튼은 "확인"이나 "다음" 같은 긍정적인 행동에 적합하죠. 이런 직관적인 선택이 사용자에게 혼란을 줄이고, 브랜드의 일관성을 유지해 줘요.

핵심 구성 요소 2: 타이포그래피

다음은 **타이포그래피(글씨체)**예요. 글씨체는 디자인에서 정보를 전달하는 데 큰 역할을 해요. 디자인 시스템에서는 글씨체 종류, 크기, 굵기 같은 규칙을 정해놓아요. 예를 들어, "제목은 24px로, 본문은 16px로, 글씨체는 Noto Sans로!" 이런 식으로요. 이렇게 하면 모든 화면에서 글씨가 통일돼서 깔끔해 보이죠.

저는 처음 타이포그래피를 배울 때, 무료 폰트인 "Noto Sans"를 써봤어요. 가독성도 좋고 깔끔해서 초보자도 쉽게 사용할 수 있더라고요. 디자인 시스템에서는 보통 1~2개의 글씨체만 쓰는 걸 추천해요. 너무 많은 글씨체를 쓰면 오히려 어지럽게 보일 수 있거든요. 예를 들어, 인스타그램은 글씨체를 단순하게 유지해서 콘텐츠가 돋보이게 하죠. 타이포그래피 규칙이 있으면 "이 글씨 크기가 맞나?" 고민할 필요 없이 바로 작업할 수 있어요.

핵심 구성 요소 3: 버튼

세 번째는 버튼이에요. 버튼은 사용자와 직접 상호작용하는 요소라 정말 중요해요. 디자인 시스템에서는 버튼의 크기, 모양, 색상, 상태(예: 클릭 전/후)를 미리 정해놓아요. 예를 들어, "주요 버튼은 파란색 둥근 모양, 크기는 48px x 48px, 클릭하면 약간 어두워짐" 같은 규칙이죠.

직관적인 예시를 들어보면, "확인" 버튼은 파란색으로, "삭제" 버튼은 빨간색으로 정하는 거예요. 이렇게 하면 사용자가 "이 버튼 누르면 뭐가 될까?" 고민하지 않아도 돼요. 제가 처음 디자인했을 때는 버튼 크기가 제각각이라 UI가 어수선했는데, 규칙을 정하고 나니 훨씬 깔끔해지더라고요. 예를 들어, 구글의 Material Design은 버튼 스타일을 아주 세세하게 정의해서, 어떤 앱이든 비슷한 느낌을 주죠.

핵심 구성 요소 4: 아이콘

마지막으로 아이콘이에요. 아이콘은 작은 그림으로 정보를 빠르게 전달하는 데 유용해요. 디자인 시스템에서는 아이콘의 스타일(선 아이콘인지, 채움 아이콘인지), 크기, 색상을 통일해요. 예를 들어, "모든 아이콘은 24px 크기로, 검정 선 스타일로!" 이렇게 정하면 모든 화면에서 아이콘이 조화를 이루죠.

저는 무료 아이콘 사이트인 Flaticon에서 아이콘을 다운로드하여 써봤는데, 스타일을 맞추는 게 정말 중요하더라고요. 예를 들어, 어떤 앱에서 "좋아요" 아이콘은 하트로, "설정" 아이콘은 톱니바퀴로 통일돼 있으면 사용자가 직관적으로 이해할 수 있어요. 아이콘 규칙이 없으면 한 화면에서 선 스타일, 채움 스타일이 섞여서 어지럽게 보일 수 있으니, 꼭 통일성을 유지해야 해요.

 

 

이제 디자인 시스템의 핵심 구성 요소인 컬러, 타이포그래피, 버튼, 아이콘을 알아봤어요. 이 기본 블록들이 잘 정리돼 있어야 디자인 시스템이 제대로 작동하죠. 비유하자면, 이 요소들은 요리 재료 같은 거예요. 재료가 신선하고 잘 준비돼 있으면 맛있는 요리를 쉽게 만들 수 있잖아요. 다음 포스트에서는 구글의 Material Design이나 애플의 Human Interface Guidelines 같은 유명 디자인 시스템 사례를 통해 더 깊이 배워볼게요. 여러분은 이 요소들 중 어떤 게 가장 흥미로웠나요? 저는 컬러 정하는 게 제일 재밌었어요. 댓글로 이야기 나눠요!