Iconography
Iconography은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능과 행동을 쉽게 인식할 수 있도록 복잡하지 않고 단순한 형태와 일관된 규칙에 따라 제작합니다.
Iconography
Iconography은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능과 행동을 쉽게 인식할 수 있도록 복잡하지 않고 단순한 형태와 일관된 규칙에 따라 제작합니다.
Iconography
Iconography은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능과 행동을 쉽게 인식할 수 있도록 복잡하지 않고 단순한 형태와 일관된 규칙에 따라 제작합니다.
Icon Name
명확한 기능이 없는 경우 기본적으로 형태를 기준으로 이름을 지정합니다.
명확한 기능이 있는 경우 기능명을 아이콘 이름에 사용합니다. (예: search, share)
두 개 이상의 단어가 결합되거나 방향 등 속성이 포함된 경우 카멜케이스(CamelCase)로 작성합니다.
Icon Name
명확한 기능이 없는 경우 기본적으로 형태를 기준으로 이름을 지정합니다.
명확한 기능이 있는 경우 기능명을 아이콘 이름에 사용합니다. (예: search, share)
두 개 이상의 단어가 결합되거나 방향 등 속성이 포함된 경우 카멜케이스(CamelCase)로 작성합니다.
Icon Name
명확한 기능이 없는 경우 기본적으로 형태를 기준으로 이름을 지정합니다.
명확한 기능이 있는 경우 기능명을 아이콘 이름에 사용합니다. (예: search, share)
두 개 이상의 단어가 결합되거나 방향 등 속성이 포함된 경우 카멜케이스(CamelCase)로 작성합니다.
Icon Design Guidelines
Grid & Size
24×24px 그리드 기준으로 작업합니다.
사방에 2px의 여백을 두되, 시각 보정을 고려해 조정할 수 있습니다.
기본 아이콘 사이즈는 24×24(L)이며, XS·S·M·L·XL 범위 내에서 사용합니다.
XS | 12×12 |
S | 16×16 |
M | 20×20 |
L | 24×24 |
XL | 28×28 |
Padding
터치 영역(Touch Area)을 고려해 Mobile·Tablet에서는 아이콘 기준 2배 크기의 여백을 확보합니다.
PC에서는 호버 영역(Hover Space)을 고려해 사방에 8px의 여백을 둡니다.
Stroke
Bold 스트로크의 기본 두께는 1.8px입니다.
Normal 스트로크의 기본 두께는 1.3px입니다.
시각 보정이 필요한 경우 더 얇은 두께를 사용할 수 있습니다.
스트로크의 끝과 꺾임은 둥글게 설정하는 것을 권장합니다.
Corner Radius
Radius는 0–2px 범위 내에서 사용하며, 작은 요소에는 작은 반경을, 큰 요소에는 상대적으로 큰 반경을 적용합니다.
Corner smoothing을 적용해 부드러운 인상을 유지합니다.
Theme
아이콘은 기본적으로 라인 스타일로 제작합니다.
주목도나 인터랙션이 필요한 경우에만 Fill 스타일을 사용합니다.
Icon Design Guidelines
Grid & Size
24×24px 그리드 기준으로 작업합니다.
사방에 2px의 여백을 두되, 시각 보정을 고려해 조정할 수 있습니다.
기본 아이콘 사이즈는 24×24(L)이며, XS·S·M·L·XL 범위 내에서 사용합니다.
XS | 12×12 |
S | 16×16 |
M | 20×20 |
L | 24×24 |
XL | 28×28 |
Padding
터치 영역(Touch Area)을 고려해 Mobile·Tablet에서는 아이콘 기준 2배 크기의 여백을 확보합니다.
PC에서는 호버 영역(Hover Space)을 고려해 사방에 8px의 여백을 둡니다.
Stroke
Bold 스트로크의 기본 두께는 1.8px입니다.
Normal 스트로크의 기본 두께는 1.3px입니다.
시각 보정이 필요한 경우 더 얇은 두께를 사용할 수 있습니다.
스트로크의 끝과 꺾임은 둥글게 설정하는 것을 권장합니다.
Corner Radius
Radius는 0–2px 범위 내에서 사용하며, 작은 요소에는 작은 반경을, 큰 요소에는 상대적으로 큰 반경을 적용합니다.
Corner smoothing을 적용해 부드러운 인상을 유지합니다.
Theme
아이콘은 기본적으로 라인 스타일로 제작합니다.
주목도나 인터랙션이 필요한 경우에만 Fill 스타일을 사용합니다.
Icon Design Guidelines
Grid & Size
24×24px 그리드 기준으로 작업합니다.
사방에 2px의 여백을 두되, 시각 보정을 고려해 조정할 수 있습니다.
기본 아이콘 사이즈는 24×24(L)이며, XS·S·M·L·XL 범위 내에서 사용합니다.
XS | 12×12 |
S | 16×16 |
M | 20×20 |
L | 24×24 |
XL | 28×28 |
Padding
터치 영역(Touch Area)을 고려해 Mobile·Tablet에서는 아이콘 기준 2배 크기의 여백을 확보합니다.
PC에서는 호버 영역(Hover Space)을 고려해 사방에 8px의 여백을 둡니다.
Stroke
Bold 스트로크의 기본 두께는 1.8px입니다.
Normal 스트로크의 기본 두께는 1.3px입니다.
시각 보정이 필요한 경우 더 얇은 두께를 사용할 수 있습니다.
스트로크의 끝과 꺾임은 둥글게 설정하는 것을 권장합니다.
Corner Radius
Radius는 0–2px 범위 내에서 사용하며, 작은 요소에는 작은 반경을, 큰 요소에는 상대적으로 큰 반경을 적용합니다.
Corner smoothing을 적용해 부드러운 인상을 유지합니다.
Theme
아이콘은 기본적으로 라인 스타일로 제작합니다.
주목도나 인터랙션이 필요한 경우에만 Fill 스타일을 사용합니다.
Usage
Do
아이콘에 액션, 링크 이동을 포함하는 경우 Icon Button을 사용하도록 합니다.
Do
New 아이콘 사용 시 pink-60 컬러 사용을 권장합니다.
Don't
같은 사이즈라도 실제 크기가 달라 보일 수 있으므로 시각 보정을 생략하지 않습니다.
Usage
Do
아이콘에 액션, 링크 이동을 포함하는 경우 Icon Button을 사용하도록 합니다.
Do
New 아이콘 사용 시 pink-60 컬러 사용을 권장합니다.
Don't
같은 사이즈라도 실제 크기가 달라 보일 수 있으므로 시각 보정을 생략하지 않습니다.
Usage
Do
아이콘에 액션, 링크 이동을 포함하는 경우 Icon Button을 사용하도록 합니다.
Do
New 아이콘 사용 시 pink-60 컬러 사용을 권장합니다.
Don't
같은 사이즈라도 실제 크기가 달라 보일 수 있으므로 시각 보정을 생략하지 않습니다.
Iconography
Iconography