디자인 시스템의 두 번째 요소, Component

디자인 시스템을 막 시작한 당신에게 Part.3

이전 글에서 다루었던 Foundation 요소들을 가지고 Component들을 만들어 볼 수 있어요. 집으로 따지면 중요한 기둥들, 창문, 문, 지붕 등을 만드는 단계라고나 할까요?  프로덕트 디자인의 Foudnation에서 살펴보았던 타이포그래피, 컬러, 사이즈 등은 그 자체로는 아무 의미를 유저에게 전달해주지 못하지만 Component부터는 이야기가 달라집니다. 이제부터 한 가지 정도의 의미를 가지거나 기능을 하기 시작합니다. 

이번에는 예를 두 가지 들어보겠습니다.

Input Field 컴포넌트

첫 번째는 유저가 일상에서 쉽게 만나는 Input Field 컴포넌트가 있습니다. 유저는 이 컴포넌트에 글자를 입력해야 한다는 것을 자연스럽게 이해하게 됩니다. 그리고 이 컴포넌트에는 글자, 숫자, 이모티콘, 날짜 등 다양한 것들을 입력할 수 있습니다. 그럼 디자이너로서, 이 다양한 Input들을 어떻게 정의하면 일관성 + 확장성 + 좋은 사용성을 가지게 만들 수 있을까요? 제가 정의했던 경험을 예로 설명해 볼게요.

Foundation에서 만들어놓은 값들 골라 사용해 보기

우선 앞 단계에서 만들었던 Foundation 요소들 중 텍스트 사이즈, 컬러, 테두리의 둥글기, 컬러 등을 골라서 적용할 수 있습니다.

Input fields 사이즈 정립하기

그리고 Input 사이즈 즉 높이의 크기는 한 가지만 있으면 괜찮을까요? 한 가지만 있어도 당장은 큰 문제가 없는 경우도 있겠지만 만약 제품이 다소 복잡하다면 minimum & maximum의 높이 사이즈를 부여하거나 세 가지 정도의 사이즈 규칙을 만들어도 좋을 것 같아요. 여기서의 사이즈 값들은 앞서 Foundation size에서 만들어 놓은 값들 중에서 가져와서 세 가지 정도의 높이 사이즈를 가진 기본 Input 컴포넌트들을 만들 수 있습니다.

이렇게 만들어 놓은 기본 Input 컴포넌트를 가지고 다른 Input에도 적용할 수 있습니다. 숫자, 날짜, 검색 등 다양한 Input 들에도 적용해 보는 거죠. 

Button 컴포넌트

그럼 두 번째는 Input Field 컴포넌트와 함께 자주 사용될 버튼 Button입니다. 우리가 마주하는 제품에서 버튼이 없는 페이지들은 보기 힘들 정도로 버튼은 필수 컴포넌트입니다. Button 컴포넌트는 보통 Input Field와 자주 사용되기에, Input의 사용된 높이들을 버튼에도 일관되게 적용해 볼 수 있습니다. 통일성 있는 인풋+버튼 그룹이 만들어질 수 있겠네요.

그리고 스타일의 경우에도 인풋 필드 컴포넌트를 정립할 때 했던 것과 비슷하게 foundation에서 만들어놓은 값들을 바탕으로 적용해서 디자인할 수 있습니다. 이쯤에서 새삼 느끼게 되는 게 foundation이 얼마나 중요한지 다시 깨닫게 됩니다. 

그런데 만약, 우리가 원하는 디자인의 결과물이 앞서 정의한 foundation에서 찾을 수 없는 게 있다면 어떻게 할까요?
: 이런 경우는 종종 생길 수 있습니다. 융통성 없는 디자인 시스템이 고객의 사용성에 부정적인 영향을 끼치면 안 되기 때문에 이런 경우에는 'semantic' 값과 토큰을 만들어서 적용할 수 있습니다.

이렇게 기본적인 컴포넌트에 대하여 간단히 다루어보았으니 다음 글에서는 진짜 제품다운 단계를 살펴보면 좋을 것 같아요. 

그럼 다음 글에서는 이 컴포넌트들의 집합체인 Pattern을 다루어보겠습니다. 기대해 주세요!