Icons
Icons은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능이나 행동을 쉽게 이해할 수 있도록 돕는 중요한 요소예요. 그래서 아이콘은 복잡하지 않고 단순하며, 일관된 규칙에 따라 제작되어 누구나 쉽게 인식할 수 있도록 합니다.
Icons
Icons은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능이나 행동을 쉽게 이해할 수 있도록 돕는 중요한 요소예요. 그래서 아이콘은 복잡하지 않고 단순하며, 일관된 규칙에 따라 제작되어 누구나 쉽게 인식할 수 있도록 합니다.
Icons
Icons은 작은 공간 안에서 정보를 빠르고 직관적으로 전달하는 시각적 언어입니다. 사용자가 기능이나 행동을 쉽게 이해할 수 있도록 돕는 중요한 요소예요. 그래서 아이콘은 복잡하지 않고 단순하며, 일관된 규칙에 따라 제작되어 누구나 쉽게 인식할 수 있도록 합니다.
Icon Name
명확한 기능이 아닌 경우 기본적으로 형태를 기준으로 이름을 붙이도록 합니다.
명확한 기능일 경우, 이름에 적용합니다.(ex. search, share)
2개이상 단어가 중복되거나 방향 같이 속성이 포함되면 Camel Case로 작성하도록 합니다.
Icon Name
명확한 기능이 아닌 경우 기본적으로 형태를 기준으로 이름을 붙이도록 합니다.
명확한 기능일 경우, 이름에 적용합니다.(ex. search, share)
2개이상 단어가 중복되거나 방향 같이 속성이 포함되면 Camel Case로 작성하도록 합니다.
Icon Name
명확한 기능이 아닌 경우 기본적으로 형태를 기준으로 이름을 붙이도록 합니다.
명확한 기능일 경우, 이름에 적용합니다.(ex. search, share)
2개이상 단어가 중복되거나 방향 같이 속성이 포함되면 Camel Case로 작성하도록 합니다.
Icon Design Guidelines
Grid & Size
24*24 사이즈에서 그리드에 맞춰 작업하도록 합니다.
사방 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 Space를 고려해 모바일/태블릿에서는 2배 사이즈의 여백을 가지도록 작업합니다.
Hover Space를 고려해 PC에서는 사방에 8px의 여백을 가지도록 작업합니다.
Stoke
bold : 기본 스트로크는 1.8px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
normal : 기본 스트로크는 1.3px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
공통 : stroke의 끝모양과 꺾임은 둥글게 설정해서 사용하는 것을 권장합니다.
Corner Radius
라운드는 0~2px 사이에서 자유롭게 사용하되, 통일성을 해치지 않도록 작은 요소에는 작은 라운드를 큰 요소로 갈수록 2px에 가까운 라운드를 사용하도록 합니다.
라운드에 corner-smothing을 적용해 부드러운 느낌을 주도록 합니다.
Theme
디폴트는 선스타일로 제작하기 때문에 특정 케이스에만 붙이도록 합니다. (예: fill)
기본적으로 Line으로만 이뤄진 default 타입을 사용하고 주목도나 인터렉션이 필요한 경우 fill 타입을 사용합니다.
Icon Design Guidelines
Grid & Size
24*24 사이즈에서 그리드에 맞춰 작업하도록 합니다.
사방 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 Space를 고려해 모바일/태블릿에서는 2배 사이즈의 여백을 가지도록 작업합니다.
Hover Space를 고려해 PC에서는 사방에 8px의 여백을 가지도록 작업합니다.
Stoke
bold : 기본 스트로크는 1.8px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
normal : 기본 스트로크는 1.3px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
공통 : stroke의 끝모양과 꺾임은 둥글게 설정해서 사용하는 것을 권장합니다.
Corner Radius
라운드는 0~2px 사이에서 자유롭게 사용하되, 통일성을 해치지 않도록 작은 요소에는 작은 라운드를 큰 요소로 갈수록 2px에 가까운 라운드를 사용하도록 합니다.
라운드에 corner-smothing을 적용해 부드러운 느낌을 주도록 합니다.
Theme
디폴트는 선스타일로 제작하기 때문에 특정 케이스에만 붙이도록 합니다. (예: fill)
기본적으로 Line으로만 이뤄진 default 타입을 사용하고 주목도나 인터렉션이 필요한 경우 fill 타입을 사용합니다.
Icon Design Guidelines
Grid & Size
24*24 사이즈에서 그리드에 맞춰 작업하도록 합니다.
사방 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 Space를 고려해 모바일/태블릿에서는 2배 사이즈의 여백을 가지도록 작업합니다.
Hover Space를 고려해 PC에서는 사방에 8px의 여백을 가지도록 작업합니다.
Stoke
bold : 기본 스트로크는 1.8px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
normal : 기본 스트로크는 1.3px입니다. 시각 보정이 필요한 경우 더 얇은 굵기의 선을 사용합니다.
공통 : stroke의 끝모양과 꺾임은 둥글게 설정해서 사용하는 것을 권장합니다.
Corner Radius
라운드는 0~2px 사이에서 자유롭게 사용하되, 통일성을 해치지 않도록 작은 요소에는 작은 라운드를 큰 요소로 갈수록 2px에 가까운 라운드를 사용하도록 합니다.
라운드에 corner-smothing을 적용해 부드러운 느낌을 주도록 합니다.
Theme
디폴트는 선스타일로 제작하기 때문에 특정 케이스에만 붙이도록 합니다. (예: fill)
기본적으로 Line으로만 이뤄진 default 타입을 사용하고 주목도나 인터렉션이 필요한 경우 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
같은 사이즈라도 크기가 달라 보일 수 있습니다. 이때는 시각 보정을 진행합니다.