Icon
아이콘은 복잡한 기능을 단순하고 직관적으로 전달하는 핵심 시각 언어입니다. 본 가이드는 하이웍스 내에서 사용되는 아이콘 및 에셋의 분류 체계, 네이밍 규칙,
그리고 올바른 활용 기준을 정의하여 일관되고 효율적인 UI 환경을 구축합니다
아이콘 구조 (Structure)
하이웍스의 서비스 특성과 UI 환경을 고려하여 시각 에셋을 크게 Icon과 Asset 두 가지 상위 그룹으로 나누고, 사용 목적에 따라 총 8가지 타입으로 세분화하여 관리합니다.
아이콘 네이밍 규칙 (Naming Convention)
피그마에서 아이콘을 라이브러리화할 때 상위 컴포넌트 폴더명은 에셋의 성격에 따라 icon 또는 asset으로 1차 구분합니다.
모든 명칭은 띄어쓰기 없이 영문으로 작성하며, 두 개 이상의 단어가 결합될 경우 첫 단어는 소문자, 이어지는 단어의 첫 글자는 대문자로 적는 카멜 케이스(camelCase) 표기법을 엄격히 준수합니다.
상위분류
(Icon 혹은 Asset) 종류
하위 분류 8가지
Service/Navigation/Edit/Inline/Alert/Filetype/Work administration/EmptyView
아이콘 사이즈
해당 아이콘 사이즈를 표기합니다
아이콘 SET 주요 명칭
앞단의 네이밍 규칙 속, 해당 아이콘 set의 식별할 수
있는 명칭을 작성합니다
icon/service/32px/mainSet
Component Set Name
Category
Size(px)
Style
icon/service/32px/mainSet
service
32
line
icon/service/24px/homeMenuSet
service
24
line
icon/service/16px/basicSet
service
16
mixed
icon/alert/24px/mainSet
alert
24
line
icon/navigation/24px/mainSet
navigation
24
mixed
icon/fileType/60,36,18px/MmainSet
filetype
60/36/18
solid
icon/edit/16px/mainSet
edit
16
line
icon/inline/20px/mainSet(line)
inline
20
line
icon/inline/20px/mainSet(solid)
inline
20
solid
asset/emptyView/80px/mainSet
emptyView
80
solid
asset/workAdministration/52,20,16px/mainSet
workAdministration
52/20/16
graphic
아이콘 Export 규칙 (Export)
동일한 형태의 아이콘이라도 적용되는 화면에 따라 크기나 색상 속성이 수시로 달라질 수 있습니다.
개별 화면에서 매번 따로 추출할 경우 파편화된 중복 파일이 무한정 늘어나므로, 원본 파일은 딱 하나만 추출하여 개발자 라이브러리에서 중앙 통제하는 것이 훨씬 효율적입니다.
Don’t
실제 UI 디자인 화면(페이지)에 배치된 아이콘을 개별적으로 선택하여 추출하지 않습니다.
icon/service/32px/drive
Drive 아이콘이 필요한 케이스
icon/service/32px/drive
