이 웹사이트는 IE 9 이하 버전을 지원하지 않습니다. 최신 브라우저로 업데이트하시길 바랍니다.

그래픽 리소스

Illustrations

Illustration Colors

일러스트의 색은 Illustration Color에 지정되어있는 색상만 사용합니다. 그 외의 브랜드 색상이나 인쇄용 색상은 사용하지 않습니다. UI에 들어가는 일러스트에 유채색을 사용할 때는 연한 파란색을 중심으로 쓰다가 아주 가끔 보조색으로 진한 파란색을 쓰도록 합니다.

블로그 등 마케팅을 위해 지정된 파란색 이외의 색상군을 사용해야할 때는 Open Color의 색상을 사용해도 괜찮습니다. Open Color의 2, 3 색상을 illustration blue 0, illustration blue 1 색상을 사용하는 방식과 동일하게 사용합니다. 연한 유채색인 2를 중심으로 쓰되, 가끔 보조색인 3번 색상으로 진하게 강조합니다.

통일성을 위해 한 개의 일러스트에는 한 개의 색상군을 사용합니다. 두 개 이상의 색상군은 한 개의 일러스트에 사용하지 않습니다.

UI에 쓰는 일러스트는 파란색을 중심으로 사용합니다.
한 개의 일러스트에 두 색상군 이상 사용하지 않습니다.

일러스트의 선은 회색조가 아닌 Illustration Line 색상을 사용합니다.

Illustration Line

선 두께는 일러스트의 크기에 상관없이 모두 2px로 통일합니다. 선 모서리의 곡률은 비교적 자유롭게 쓸 수 있습니다. Stroke align이 중앙 정렬일 때 1~3px 사이로 메타포의 성격과 크기에 맞춰서 조정합니다.

Stroke width
2px
Stroke align
Center
Corner radius
1~3px
Line caps
Round
Line corner
Round
Line caps
Line corner
Corner radius
Illustration Style

그 외 세세한 일러스트 스타일 가이드입니다. 어떤 일러스트를 그리더라도 같은 느낌을 줄 수 있도록 합니다.

Multiplied Color
말풍선 같이 포인트가 되는 부분이나, 그림자 같은 부분에 선 없이 면으로만 컬러를 중첩해 사용하도록 합니다. 이 방식을 사용하면 깨끗하고 투명한 느낌을 줍니다.
Simplicity
단순 명료함을 유지합니다. 최소한의 요소로 주제를 전달하며 투시, 그라데이션, 패턴 및 과도한 묘사를 사용하지 않습니다.
Unity
일러스트 간에 통일성을 위해 사람이나 종이 등 같은 여러 일러스트에 반복적으로 등장하는 요소는 복사해서 사용합니다.
Crispy
선명함을 위해서 모든 직선 요소는 pixel에 정확히 맞추도록 합니다.

Icons

Icon Sizes

사용처에 따라 가로세로 20px, 24px, 36px, 48px 의 아이콘을 사용합니다.

Icon Line

아이콘의 선은 코너(Corner)와 선끝(Caps)을 Round로 지정합니다. 기본적으로 선 두께는 2px, 가로세로가 48px인 경우에만 3px로 지정합니다.

20px 24px 36px 48px
Stroke width 2px 2px 2px 3px
Corner radius 0.5px 1px 1px 1px
Stroke align Center
Line caps Round
Line Corner Round
Line caps
Line corner
Corner radius
Icon Style

그 외 아이콘의 스타일입니다.

Color
아이콘은 단색을 사용합니다. 단 아이콘의 status에 따라 색이 변할 수는 있습니다.
Simplicity
단순함을 유지하며, 최소한의 요소로 아이콘이 표상하는 의미를 전달합니다. 그림자나 투시는 사용하지 않습니다.
Unity
아이콘 간에 통일성을 위해 사람이나 원형 등 여러 아이콘에 반복적으로 등장하는 요소는 복사해서 사용합니다.
Crispy
선명함을 위해서 모든 직선 요소는 pixel에 정확히 맞추도록 합니다.