http://html.nhndesign.com/?guidelines/naming
아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.
아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.
| 분류 | 예약어 | 설명 | 권장표현 | ||
|---|---|---|---|---|---|
| 형태 | 형태+의미+상태 | ||||
| 제목 | h*_* | h_* | 불특정 레벨의 제목 | 제목 태그로 마크업되는 이미지 요소. | 전경 |
| h1_* | 제목 1 | ||||
| h2_* | 제목 2 | ||||
| h3_* | 제목 3 | ||||
| h4_* | 제목 4 | ||||
| h5_* | 제목 5 | ||||
| h6_* | 제목 6 | ||||
| 문장 | p_* | p_* | 문장 | 통상 p 요소로 마크업되는 이미지 형태의 텍스트. | 전경 |
| 네비게이션 | gnb_* | gnb_* | 글로벌 | 네비게이션 목적의 버튼 또는 탭. | 전경 |
| lnb_* | lnb_* | 로컬 | |||
| snb_* | snb_* | 사이드 | |||
| 탭 | tab_* | tab_* | 탭 | gnb, lnb, snb에 포함되지 않으며 탭으로 분류되는 버튼 또는 버튼의 배경. | 전경/배경 |
| 버튼 | btn_* | btn_list_* | 목록 | 모든 종류의 버튼. | 전경 |
| btn_read_* | 읽기 | ||||
| btn_write_* | 쓰기 | ||||
| btn_modify_* | 수정 | ||||
| btn_delete_* | 삭제 | ||||
| btn_reply_* | 답변 | ||||
| btn_cancel_* | 취소 | ||||
| btn_search_* | 검색 | ||||
| btn_find_* | 찾기 | ||||
| btn_registeration_* | 등록 | ||||
| btn_confirm_* | 확인 | ||||
| btn_submit_* | 전송 | ||||
| btn_upload_* | 업로드 | ||||
| btn_download_* | 다운로드 | ||||
| btn_install_* | 설치 | ||||
| btn_file_* | 파일 | ||||
| btn_stop_* | 정지 | ||||
| btn_play_* | 실행 | ||||
| btn_prev_* | 이전 | ||||
| btn_next_* | 다음 | ||||
| btn_up_* | 위로 | ||||
| btn_down_* | 아래로 | ||||
| btn_zip_* | 우편코드찾기 | ||||
| btn_go_* | 페이지 이동 | ||||
| btn_refresh_* | 새로고침 | ||||
| btn_open_* | 열기 | ||||
| btn_close_* | 닫기 | ||||
| btn_zoom_* | 확대 | ||||
| btn_reduction_* | 축소 | ||||
| btn_spread_* | 펼치기 | ||||
| btn_unfold_* | 접기 | ||||
| btn_lock_* | 잠금 | ||||
| btn_unlock_* | 해제 | ||||
| 박스 | bx_* | bx_*_top | 상단 | 상자의 선과 모서리 표현. | 배경 |
| bx_*_mid | 중앙 | ||||
| bx_*_btm | 하단 | ||||
| bx_*_lt | 좌상단 | ||||
| bx_*_rt | 우상단 | ||||
| bx_*_lb | 좌하단 | ||||
| bx_*_rb | 우하단 | ||||
| 블릿 | bu_* | bu_square | 사각 | 의미를 포함하지 않는 장식적 bullet/icon 표현. | 배경 |
| bu_circle | 원형 | ||||
| bu_arrow | 화살 | ||||
| bu_star | 별 | ||||
| 아이콘 | ico_* | ico_num* | 숫자 | 의미를 포함하는 장식적 icon 표현. | 전경 |
| ico_english_* | 영문 | ||||
| ico_korean_* | 한글 | ||||
| ico_japanese_* | 일어 | ||||
| ico_chinese_* | 중어 | ||||
| ico_attention | 주의 | ||||
| ico_up | 상향 | ||||
| ico_down | 하향 | ||||
| ico_point_star | 별점 | ||||
| ico_star | 별 | ||||
| ico_new | 신규 | ||||
| ico_update | 업데이트 | ||||
| ico_reply | 댓글 | ||||
| ico_target_blank | 새창 | ||||
| 선 | line_* | line_h | 수평 | 보통 콘텐트를 구분하기 위한 목적의 실선 또는 점선. | 배경 |
| line_v | 수직 | ||||
| line_s | 슬래시 | ||||
| line_bs | 역슬래시 | ||||
| line_h_dot | 수평 점선 | ||||
| line_v_dot | 수직 점선 | ||||
| 배경 | bg_* | bg_body | 전체 | 블릿, 버튼, 선 종류 이외의 배경처리 이미지. 보통 일러스트. | 배경 |
| bg_head | 상단 | ||||
| bg_container | 콘테이너 | ||||
| bg_spot | 스팟 | ||||
| bg_footer | 풋터 | ||||
| bg_lnb | 로컬 네비게이션 | ||||
| 상태변화 | *_off *_over *_on |
tab_*_off | 비활성 | 비활성/오버/활성 상태에 대한 표현. | 전경/배경 |
| tab_*_over | 오버, 포커스 | ||||
| tab_*_on | 활성 | ||||
| 광고 | ad_* | ad_* | 광고 | 모든 종류의 배너 광고. | 전경 |
| 임시 | @* | @thumb | 썸네일 | 통상 DB에서 불러오게되는 임시 이미지 요소. | 전경 |
| @photo | 사진 | ||||
| @ad | 광고 | ||||
5. Image 네이밍 가이드
▲Top
-
- 명명 순서 :
- 큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 3단계를 초과하지 않도록 합니다. '대분류_중분류_소분류' 또는 '형태-의미-상태' 순으로 명명합니다.
on_recommend_tab1.gif (X)
tab1_recommend_on.gif (O) 탐색기에서 탭메뉴끼리 정렬되므로 빠르게 찾을 수 있습니다
-
- 단어 선택 :
- 최대한 직관적이어야 하고 짧을수록 좋습니다. 가능하다면 이미지의 대체텍스트 역할을 수행할 수 있는 네이밍을 우선적으로 고려합니다.
btn.gif (X) 어떤 의미의 버튼인지 직관성이 떨어집니다
btn_search_naver_mail.gif (X) 직관적이지만 지나치게 깁니다
bnms.gif (X) 너무 짧아서 의미를 유추하기 어렵습니다
btn_search_mail.gif (O) 적당히 짧으면서도 직관적입니다
-
- 허용 문자 :
- 영문 소문자(abc)와 숫자(123) 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
Btn_Search.gif (X) 대문자가 사용되었습니다
btn-search.gif (X) 언더바 이외의 특수문자가 사용되었습니다
btn_search.gif (O)
-
- 조합 규칙 :
- '단어+단어', 또는 '숫자+숫자'는 언더바(_)로 조합합니다. 단어와 숫자를 조합하는 경우 언더바(_)는 생략합니다.
tab1recommendon.gif (X) 단어 사이를 언더바로 조합하지 않아서 판독성이 떨어집니다
tab_1_recommend_on.gif (X) 단어와 숫자 사이의 언더바가 생략되지 않았습니다
tab1_recommend_on.gif (O) 단어 사이는 언더바로 조합하고 단어와 숫자 사이의 언더바는 생략 하였습니다
-
- 숫자 규칙 :
- 숫자로는 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다. 단, "01" 형식으로 시작되는 예외상황도 있을 수 있습니다.
