UI/UX : 디자인 컴포넌트를 만들 때 주의할 점

 

디자인 시스템을 만들때 가장 중요한 것 중에 하나가 컴포넌트입니다.

시스템의 시각 요소를 실제 화면에서 어떻게 보여줄지 컴포넌트로 정의를 하기 때문입니다.

 

컴포넌트에서 중요한 것은 기능의 위계와 시각적 중요도를 표현하는 기능적인 부분과

디자인 요소를 통해 브랜드와 서비스의 이미지를 만드는 이미지적인 부분 이렇게 2가지가 있습니다.

 

---

1.컴포넌트 위계 부여시 고려할 점

컴포넌트란? 기능 수행을 위한 모듈의 단위입니다. 즉 사용자가 쉽게 화면을 이해하고 동작하기

위해서는 컴포넌트간의 위계가 명확하고 직관적이여야 합니다. 따라서 컴포넌트는 UI설계 과정에서 부터

고려해서 기능의 속성과 화면의 목적을 정확히 파악해 제작해야합니다.

 

• 어떤 기능의 요소인지 명확하게 표현해야 함
• 중요도를 쉽게 파악할 수 있는 명확한 시각적 위계 설계
• 컴포넌트의 기능과 목적이 명확해야 함
• 설정되 기능/목적을 바탕으로 그래픽적인 요소(컬러 / 밀도 / 크기 / 그림자 / 대비 등)를 부여하여 시각적 위계 설정

 

---

 

2.컴포넌트의 그래픽요소에 규칙 부여

• 컬러 적용 규칙을 만들고 적용하자 - 프라이머리, 세컨더리 컬러 등 정해진 컬러 체계 사용 - 컬러체계 예시
• 프라이머리 컬러는 중요한 기능에만 적용하기 - 예시 찾기
• 기능요소와 단순 콘텐츠의 컬러를 분리하자(기능수행 영역과 콘텐츠영역을 명확하게 구분할 수 있다) - 카카오택시
• 밀도, 크기, 그림자 등 다양한 강조 표현을 활용해 시각적 중요도를 구분하자 - 구글 머테리얼
• 텍스트 표현시에도 강/약을 부여하자 - 콘텐츠 강.약 예시