위쪽 화살표/페이지 탑/버튼 무료 아이콘 | 무료 소재

웹사이트의 필수품! ‘맨 위로 가기’ 버튼 무료 소재

원형 안에 위쪽 삼각형(▲)이 배치된, 심플하고 시인성 높은 위쪽 화살표 아이콘입니다. 웹사이트나 블로그의 푸터(하단) 부근에 설치되는 ‘Page Top(맨 위로 가기)’ 버튼으로서, 가장 널리 보급된 디자인입니다. 세로로 긴 랜딩 페이지(LP)나 스마트폰 사이트에서, 사용자가 순식간에 맨 위로 돌아갈 수 있도록 하는 내비게이션이며, 사용 편의성(유저빌리티)을 확보하는 데 있어 빼놓을 수 없는 상업적 이용 가능한 무료 소재입니다.

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

UI 파츠로서의 기능성은 물론, ‘상승’을 나타내는 심볼로도 활용할 수 있습니다.

• 웹사이트/블로그의 UI 파츠
  화면 오른쪽 하단에 고정 표시(추적)하는 ‘맨 위로’ 버튼으로 사용. 특히 스마트폰의 좁은 화면에서는, 손가락으로 탭 하기 쉬운 둥근 형상이 선호됩니다. 스크롤 양이 많은 기사나 콘텐츠에서의 이탈을 방지하고, 회유성을 높이는 효과가 있습니다.
• 앱/SNS의 타임라인 조작
  X(구 Twitter)나 채팅 앱처럼, 시계열로 흐르는 타임라인에서, ‘최신 게시물로 돌아가기’, ‘안 읽은 메시지로 점프하기’와 같은 단축키 기능의 아이콘으로 사용.
• 비즈니스/랭킹 표현
  원형 차트나 순위표 옆에 곁들여, ‘순위 상승’, ‘매출 증가’, ‘전년 대비 플러스’를 나타내는 긍정적인 인디케이터로 사용. 빨간색이나 주황색 등 난색 계열로 함으로써, 성장이나 활력을 강조할 수 있습니다.
• 시설/엘리베이터 안내
  백화점이나 오피스 빌딩의 층별 안내도에서, ‘위층으로’, ‘옥상은 이쪽’을 나타내는 유도 사인으로 사용. 심플해서 누구에게나 의미가 통하는 유니버설 디자인입니다.

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

본 사이트에서 배포하고 있는 무료 소재는 사용하기 쉬운 PNG 형식에 더해, 편집 자유도가 높은 벡터 형식(SVG 파일)도 무료로 다운로드 가능합니다.

이 아이콘은 웹사이트의 톤 앤 매너에 맞춰 색상을 커스터마이즈하는 것이 일반적입니다. SVG 파일을 CSS로 제어하면, 마우스 오버 시에 ‘색상이 반전된다’, ‘조금 위로 떠오른다’, ‘회전한다’와 같은 마이크로 인터랙션(움직임)을 간단하게 구현할 수 있어, 사용자에게 ‘누를 수 있는 버튼임’을 더욱 명확하게 전달할 수 있습니다.

관련 키워드

위쪽 화살표, 페이지 탑, 맨 위로, Page Top, 되돌아가기, 삼각형, 버튼, UI, 스크롤, 상승, 업, Arrow Up、Button