디자인 시스템

아이콘

아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다. 다른 요소보다 개성을 부여하기 쉽고 시각 원리에 대한 실험을 할 수 있어 많은 디자이너의 사랑을 받고 있습니다.

다들 아는 아이콘

다양한 환경에서 반복적으로 노출되어 누구나 이해할 수 있는 아이콘입니다. 스크린의 어떤 맥락에 있어도 사용자는 습관대로 사용합니다. 사용자는 플랫폼을 이용하다 서비스를 사용하기 때문에 되도록 플랫폼에서 제공하는 아이콘을 사용하는 것이 좋습니다. 만약 커스텀 아이콘을 제작한다해도 플랫폼 아이콘의 규칙을 따르는 편이 좋습니다.

처음 보는 아이콘

되도록 다들 아는 아이콘을 사용하는 것이 좋지만 새로운 기능을 표현해야할 때가 있습니다. 처음 보더라도 이해할 수 있게 보통 실제 모양을 본따 제작하며 실체가 없는 개념일 경우 추상적인 의미를 담아 제작하기도 합니다.

파일 종류

아이콘은 다양한 스크린에 알맞게 크기를 조절할 수 있게 벡터 Vector로 제작합니다. 보통 기기의 시스템 부하를 줄이기 위해 각 스크린에 알맞는 png 이미지를 사용합니다. 현재는 기기의 스펙이 높아지면서 코드로 이미지를 구현하는 svg를 사용하기도 합니다.

스타일

아이콘을 표현하는 방식은 선(Line)과 면(Solid)이 있습니다. 아이콘을 구성하는 요소로 굵기, 끝모양, 꺾임, 음영, 겹칩 등이 있으며 보는 사람이 아이콘을 식별할 때 필요한 최소한의 변화만 주기 위해 표현 규칙을 통일합니다.

굵기: 저해상도에서 픽셀에 정확하게 표시되기 위해 2pt를 최소한으로 잡는 것이 안전합니다.
(저해상도에서 1px가 강제로 2px로 표시될 수 있습니다.)
끝모양: 각, 라운드가 있으며 부드러운 표현을 위해 라운드가 많이 쓰입니다.
꺾임: 끝모양과 마찬가지로 라운드가 자주 쓰이며 시선이 자연스럽게 흐르도록 도와줍니다.
겹침: 깊이, 공간감을 표현하며 선을 엇갈리게 하거나 면으로 분리합니다. 색을 사용할 수 있을 때는 명암을 이용해 공간감을 표현합니다.

그리드

눈은 시각적 그리드와 윤곽선으로 아이콘을 구분합니다. 시각적 그리드란 같은 크기의 영역 안의 다양한 형태의 아이콘이 같은 무게감과 무게 중심을 갖게 하기 위한 그리드를 말합니다. 기하학으로 해체한 대상을 원, 정사각형, 직사각형, 정삼각형으로 구성된 그리드에 맞춰 제작합니다.

Asset을 내보낼 때 가장자리가 어색하게 잘릴 수 있기 때문에 항상 2pt의 안전 여백을 줍니다. 모바일,데스크탑 용도로 보통 짝수배율로 24 36 48 72 6 144 192 크기를 사용하며 일반적으로 24pt를 기준으로 제작합니다.

디테일

같은 규칙이 적용된 아이콘은 먼저 윤곽선으로 구분합니다. 서로 다른 아이콘에 동일한 시각적 무게감을 주기 위해서 디테일이나 간격의 양이 동일해야합니다. 디테일의 양은 수치로 동일한 양을 배분하기 어렵기 때문에 그리드 내부에 동일한 양의 잉크를 사용한다고 생각하는 것이 도움이 될 것입니다. 잉크가 너무 가까이 있으면 하나로 합쳐지듯이 간격이 과하게 가까울 경우 간격이 흐려질 수 있습니다. 최소 2pt 이상의 간격을 주는 것이 안전합니다.

서체