왼쪽 화살표/이전/뒤로 무료 아이콘 | 무료 소재

‘과거’나 ‘이전’으로 유도하는, 왼쪽 화살표 무료 소재

원형 안에 왼쪽 삼각형(◀)이 배치된, 심플하고 시인성 높은 왼쪽 화살표 아이콘입니다. 웹 브라우저의 ‘뒤로 가기 버튼’으로 친숙한 이 형상은, 사용자가 바로 전 화면으로 돌아가거나, 슬라이드 쇼에서 이전 이미지를 다시 볼 때의 내비게이션으로 기능합니다. 시간의 흐름에 있어 ‘과거(왼쪽)’를 가리키는 심볼이기도 하며, 조작을 취소하거나, 이력을 거슬러 올라가는 UI 디자인에 불가결한 상업적 이용 가능한 무료 소재입니다.

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

‘돌아가기’라는 액션이 필요한 모든 디지털 콘텐츠에서 활용됩니다.

• 이미지 슬라이더/캐러셀 조작
  쇼핑몰의 상품 이미지나, 메인 페이지의 메인 비주얼이 전환되는 슬라이드 쇼(캐러셀)에서, 왼쪽 끝에 배치하는 ‘이전 이미지로’ 버튼으로 사용. 배경에 반투명한 둥근 틀이 있어, 사진 위에 겹쳐져도 시인성을 확보할 수 있습니다.
• 페이지네이션(페이지 넘김)
  검색 결과 목록이나 블로그 기사 목록의 하단 부분에서, ‘이전 페이지로 돌아가기’ 링크의 아이콘으로 사용. 숫자만 있는 링크보다, 직관적으로 리스트를 거슬러 올라가는 조작을 돕습니다.
• 동영상/음악 플레이어의 UI
  유튜브나 음악 앱의 조작 화면에서, ’10초 되감기’, ‘이전 곡으로 스킵(처음으로)’을 나타내는 컨트롤러의 일부로 사용. 삼각형의 꼭짓점이 왼쪽을 향하고 있는 것은, 재생 바를 왼쪽(과거)으로 되돌리는 것과 시각적으로 연결됩니다.
• 전자책/웹툰 앱
  웹 브라우저로 읽는 전자 만화나 전자책 뷰어에서, ‘이전 페이지로 돌아가기’, ‘이전 권으로’라는 내비게이션 아이콘으로 사용. 특히 가로 읽기 매체에서는, 페이지를 넘기는 방향을 나타내는 중요한 가이드가 됩니다.

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

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

이 아이콘을 버튼으로 구현할 경우, CSS로 마우스 오버 시(호버 시) 애니메이션을 더하면 효과적입니다. ‘아이콘 전체가 조금 왼쪽으로 움직이는’ 움직임을 주면, 돌아가는 액션을 보다 직관적으로 시사할 수 있습니다. 또한 첫 번째 페이지에 있을 때는 ‘불투명도를 낮춰 비활성화(그레이 아웃)’ 시켜, 더 이상 돌아갈 수 없음을 시각적으로 전달하는 UI 디자인도 일반적입니다.

관련 키워드

왼쪽 화살표, 돌아가기, 이전, 백, 리턴, 삼각형, 버튼, 슬라이더, 캐러셀, 되감기, UI, Arrow Left、Back、Previous、Button