갱신/새로고침/리로드/회전 화살표/로딩 중 무료 아이콘 | 무료 소재

최신 상태로 다시 쓰는, ‘갱신/새로고침’ 무료 소재

두 개의 화살표가 원주 위를 매끄럽게 회전하고 있는 모습을 그린, UI 디자인에 필수적인 일러스트 아이콘입니다. 지난번의 ‘리사이클’이 자원의 순환이나 물리적인 교환을 의미하는 반면, 이 회전하는 화살표는 디지털 공간에서의 ‘시간의 경과’나 ‘새로운 정보의 취득’을 상징합니다. 웹 브라우저의 ‘다시 읽기(새로고침)’ 버튼이나, 애플리케이션의 ‘업데이트 확인’, 혹은 처리 대기 중인 ‘로딩(스피너)’으로서, 사용자에게 시스템의 가동 상황을 전달하기 위한 상업적 이용 가능한 무료 소재입니다.

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

이 아이콘은, 시스템의 상태 변화나, 사용자에 의한 능동적인 ‘다시 하기’ 액션을 나타내는 장면에서 검색/이용되고 있습니다.

• 브라우저/앱의 ‘다시 읽기’ 버튼으로
  뉴스 사이트나 타임라인에서, 최신 기사나 게시물을 표시하기 위해 화면을 갱신하는 ‘리프레시 버튼’으로 사용. 사용자가 가장 빈번하게 클릭하는 기능 중 하나입니다.
• 처리 중/로딩 중의 ‘스피너’로
  데이터 다운로드 중이나, 페이지 이동 중에, 화면 중앙에서 뱅글뱅글 계속 도는 ‘로딩 애니메이션’의 베이스 소재로 사용. 사용자에게 ‘현재 처리 중이므로 잠시만 기다려 주십시오’라는 메시지를 시각적으로 전달합니다.
• 게임/조작의 ‘재시도(리트라이)’로
  게임 오버가 되었을 때의 ‘다시 플레이하기’ 버튼이나, 통신 에러가 발생했을 때의 ‘재접속하기’ 버튼으로 사용. 실패한 직전의 상태로 돌아가는 것이 아니라, 새롭게 다시 한다는 긍정적인 뉘앙스를 포함합니다.
• 소프트웨어의 ‘업데이트’ 알림으로
  OS나 앱의 ‘업데이트 프로그램이 있습니다’라는 알림 아이콘이나, 재부팅을 촉구하는 마크로 사용. 시스템을 최신이고 안전한 상태로 유지하기 위한 중요한 사인입니다.
• 360도 뷰/회전 조작 안내에
  부동산 사이트의 내부 견학 파노라마 사진이나, EC 사이트의 상품 이미지에서, ‘드래그하여 이미지를 회전시킬 수 있습니다’라는 조작 방법을 설명하는 아이콘으로 사용.

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

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

이 회전 화살표 아이콘은, CSS 애니메이션과의 궁합이 발군입니다. SVG 코드를 웹사이트에 삽입하고, 간단한 CSS 코드를 더하는 것만으로, 실제로 아이콘을 뱅글뱅글 회전시킬 수 있습니다. 정지 화상으로 사용할 경우에도, 색상을 ‘회색’으로 하면 대기 상태, ‘파란색’으로 하면 진행 중, ‘빨간색’으로 하면 통신 에러에 의한 재시도 대기와 같이, 시스템의 상태(스테이터스)에 맞춰 색을 구분하여 사용하는 것이 UI 디자인의 정석입니다.

관련 키워드

갱신, 새로고침, 리로드, 리프레시, 회전, 화살표, 로딩 중, 처리 중, 스피너, 재시도, 리트라이, 업데이트, 360도, 시간 경과, Reload、Refresh、Update、Loading、Retry