Iconography
아이콘은 간단한 동작, 기능을 나타내거나 사물의 상징을 기호로 만든 시각 언어로 한정된 공간에서 효율적으로 정보를 전달하는 역할을 합니다.
Size
표준 아이콘의 사이즈는 20px이며 12px, 20px, 24px, 36px, 48px 사이즈를 사용합니다.
12px
16px
20px
24px
36px
48px
디자인 가이드
새로운 아이콘을 제작할 땐 디자인 가이드라인을 참고하여 제작하도록 합니다.
Layout & Keyline
• 모든 아이콘은 아이콘이 그려지는 영역인 Live area과 빈 공간인 Padding으로 구분하여 사용합니다.
• 표준 아이콘 사이즈인 20px을 예시로 들며, 모든 아이콘이 일관된 비율을 유지할 수 있도록 Keyline을 참고하여 사이즈별 비율에 맞게 변형하여 사용합니다.
• 표준 아이콘 사이즈인 20px을 예시로 들며, 모든 아이콘이 일관된 비율을 유지할 수 있도록 Keyline을 참고하여 사이즈별 비율에 맞게 변형하여 사용합니다.
16px
Live area
2px
2px
Padding
2px
2px
Shape
Styles
아이콘 타입은 Line, Fill의 2가지 타입을 사용하며, 적용되는 화면에 따라 적절하게 사용합니다.
Line type
Fill type
사용 가이드
아이콘 제작 시에 주의해야할 사항입니다.
Simple
기본 크기(20px)에서 이미지가 명확하게 표현되는지 확인해야 하며, 작은 크기일수록 의미 전달에 불필요한 표현은 생략합니다.
Do
Don’t
Stroke width
너무 굵거나 가는 선은 가독성이 떨어지므로 사용하지 않습니다.
Do
Don’t
하나의 스타일 적용
같은 크기의 아이콘을 표현할 때 하나의 두께만 사용합니다.
Do
Don’t
디자인 가이드
디자인 가이드에서 서술한 layout &keyline을 준수하여 제작합니다.
Do
Don’t
평면 형태
평면의 형태로 제작하며, 투시를 사용하지 않습니다.
Do
Don’t
아이콘 목록
현재 사용 중인 아이콘 목록입니다. 지속적인 업데이트가 필요합니다. 추가할 아이콘에 대해서 지속적인 사용 가능성을 염두에 두며, 필요 시 담당자와 논의하여 추가하도록 합니다.
ic_complete
ic_small_close
ic_warning
ic_fail
ic_next
ic_previos
ic_clear
ic_notice
ic_info
ic_close
ic_down
ic_up
ic_plus
ic_minus
ic_send
ic_record
ic_call_off
ic_call
ic_edit
ic_link
ic_user
ic_filter
ic_sort
ic_bot
ic_setting
ic_download
ic_upload
ic_copy
ic_github
ic_figma
ic_customer
ic_agent
ic_more
ic_ing
ic_krw
ic_small_down
ic_small_up
ic_small_right
ic_small_left
ic_home
ic_eye
ic_eye_off
ic_bank
ic_building
ic_store
ic_search
ic_calendar
ic_image
ic_problem
ic_data_alert
ic_cloud_alert
ic_feedback
ic_file_alert
ic_folder_error
ic_list
ic_grid
ic_table
ic_circle_check
ic_file
ic_folder
ic_login
ic_logout
ic_heart
ic_share
ic_reply
ic_star
ic_chat
ic_align_top
ic_align_bottom
ic_location
ic_volume
ic_arrow_back
ic_arrow_forward
ic_arrow_downward
ic_arrow_upward
ic-align-top
ic-align-bottom
ic-location
ic-volume
ic-arrow-back