V자형 화살표(위)/닫기/맨 위로/오름차순 무료 아이콘 | 무료 소재

정보를 접다/위로 돌아가다, ‘V자형(위 방향) 화살표’ 무료 소재

알파벳 ‘V’자를 거꾸로 한 듯한, 바로 위를 향하고 있는 심플한 선화 아이콘입니다. 전문 용어로는 ‘쉐브론(Chevron)’이라 불리는 이 형상은, 아래 방향 화살표와 세트로 쓰이는 경우가 많으며, 전개된 메뉴를 ‘닫는(접는)’ 동작이나, 페이지 최상단으로 스마트하게 이동하는 내비게이션으로서, 많은 모던한 웹사이트에서 채용되고 있습니다.

구체적인 사용 장면과 용도 제안

이 아이콘은, 사용자가 ‘원래 상태로 되돌리고 싶을’ 때나 ‘정보를 정리하고 싶을’ 때 클릭하는 버튼으로 기능합니다.

• 아코디언/FAQ의 ‘닫기’에
  전개된 상세 정보나 답변 영역을, 다시 닫아 깔끔하게 만들기 위한 토글 버튼으로 사용. ‘아래 방향(열기)’에서 ‘위 방향(닫기)’으로 변화시킵니다.
• ‘맨 위로’ 버튼으로
  화면 오른쪽 아래에 고정 표시하여, 클릭하면 페이지 선두로 스크롤 백 하는 버튼으로 사용. 기존 화살표보다 압박감이 없어, 디자인에 잘 녹아듭니다.
• 드롭다운 메뉴의 격납에
  열려 있는 셀렉트 박스나 메뉴 리스트를, 다시 1줄로 격납하는 것을 나타내는 아이콘으로 사용.
• 데이터의 ‘오름차순’ 정렬에
  상품 가격의 ‘낮은 순’이나, 날짜의 ‘오래된 순’ 등, 데이터가 작은 것부터 순서대로 나열되어 있는 상태를 나타내는 테이블 헤더 기호로 사용.
• 헤더 영역의 개폐에
  스마트폰 사이트 등에서, 상단에 숨겨져 있는 검색 바 등을 꺼내거나, 집어넣기 위한 조작 스위치로 사용.

디자인 요령과 SVG 형식의 장점

본 사이트에서 배포하고 있는 무료 소재는, 이미지가 열화되지 않는 벡터 형식(SVG 파일)도 무료로 제공하고 있습니다.

아코디언 메뉴 등의 UI에서는, 처음부터 ‘위 방향’과 ‘아래 방향’ 2장의 이미지를 준비할 필요는 없습니다. 1개의 SVG 파일을 CSS(transform: rotate)로 회전시킴으로써, 개폐 상태를 표현하는 것이 트렌드입니다. 이를 통해, 애니메이션으로 매끄럽게 화살표가 돌아가는 리치한 표현이 가능해집니다.

관련 키워드

화살표, V자형, 쉐브론, 위, 정상방, 위 방향, 닫기, 접기, 맨 위로, 페이지 탑, 오름차순, 정렬, UI, 아이콘, Arrow、Chevron、Up、Close、Collapse、Page top