<aside> 📍 How to use Icon

• 아이콘 사이즈는 18X18, 24X24, 36X36, 48X48로 구성되며, 정의되지 않은 사이즈를 추가할 경우 재사용성이 높을 경우에만 담당자와 논의하여 가이드에 추가하고 관리합니다.
• 사이트의 전반적인 일관성을 유지하기 위해 모든 아이콘은 해당 가이드라인을 준수하여 제작되었으며, 추후 추가되는 아이콘 역시 해당 가이드에 맞추어 제작하고 관리합니다.
• 서비스 내 적용하는 아이콘의 확장자는 SVG파일 사용을 기본으로 합니다. </aside>

Grid&Keyline

모든 아이콘은 시각적으로 일관된 비율 유지와 유연한 위치 지정을 위해 해당 가이드라인을 참고하여 제작합니다.

누구나 이해하기 쉬운 단순한 스타일의 형태로 제작하는 것을 우선으로 합니다.

Icon Size

아이콘은 사이즈를 지정하는 아이콘 영역과 실제 아이콘이 들어가는 라이브 영역, 아이콘 주위의 여유 공간을 위한 패딩으로 구성됩니다. 아이콘 터치 영역 사이즈는 패딩을 포함하여 최소 48px로 명시합니다.

*48X48 사이즈의 아이콘은 터치 영역 최소 사이즈를 충족시키기에 별도의 패딩을 필수로 가지지 않습니다.

Icon Set

서비스 내에 사용되고 있는 모든 아이콘을 사이즈별로 정리하여 관리합니다.

• Icon line weight
  • 18X18 : 1.5px
  • 24X24 : 2px
  • 36X36 : 2.5px
  • 48X48 : 3px

Naming

아이콘의 기능과 형태를 기준으로 이름을 정의하며, 보다 직관적인 사용과 명확한 커뮤니케이션을 위해 정의된 규칙에 맞는 이름을 붙입니다.

<aside> 📍 How to name icons

• 네이밍 규칙은 snake_case를 기본으로 사용합니다. (아이콘명에서 예외로 kebab-case를 사용하기도 합니다.)
• icon의 약자인 ic로 선언한 후 Icon name, Style, Size 순으로 나열합니다.
  • Icon name : 기능과 형태를 기준으로 범용적으로 사용이 가능한 이름으로 지정 표기
  • Style : line과 fill로 구성되며, line을 기본으로 하기 때문에 line은 표기하지 않음
  • Size : [Icon Size]에서 정의되었던 사이즈를 기준으로 표기 </aside>

• 추후 도입 제안

목차