브라우저와 체크 표시(완료/성공 화면) 무료 아이콘 | 무료 소재

웹상의 골(Goal)을 축하하는, ‘완료 화면’ 무료 소재

심플한 브라우저 틀 안에, 긍정이나 성공을 의미하는 커다란 체크 표시(V표)가 그려진 아이콘입니다. ‘웹사이트상에서 어떠한 액션이 정상적으로 완료된’ 상태를 추상적으로 나타내고 있습니다. 결제 종료, 회원 등록 완료, 데이터 저장 성공 등, 사용자에게 ‘절차는 무사히 끝났습니다’라는 안심감과 달성감을 주는, 긍정적인 피드백의 상징입니다.

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

이 아이콘은, EC 사이트의 결제 화면부터, 시스템의 에러 메시지(대비로서)까지, 웹상의 상태를 전달하는 중요한 장면에서 활약합니다.

• EC 사이트/신청 폼의 ‘감사 페이지(Thanks Page)’에
  상품 구매나 자료 청구 입력 폼을 전송한 직후에 표시되는, ‘감사합니다(Thank you)’ 페이지의 메인 비주얼로 최적입니다. 글자로만 ‘완료되었습니다’라고 표시하는 것보다, 이 아이콘을 크게 배치함으로써, 사용자는 시각적으로 ‘아, 제대로 보내졌구나’라고 순간적으로 이해할 수 있어, 절차 후의 불안(정말 주문이 되었나? 하는 의구심)을 해소합니다.
• 웹 앱/관리 화면의 ‘저장 성공’ 토스트 알림에
  SaaS나 사내 시스템에서, 설정을 변경하거나 데이터를 저장했을 때, 화면 구석에 일시적으로 표시되는 ‘토스트 알림(팝업)’ 아이콘으로 사용. ‘변경 내용은 정상적으로 저장되었습니다’라는 메시지와 함께 이 아이콘을 표시함으로써, 사용자에게 명확한 피드백을 제공하고, 조작의 확실성을 전달합니다.
• 보안 소프트웨어/SSL 인증서의 ‘안전’ 표시에
  ‘이 사이트는 보호되고 있습니다’나 ‘바이러스 검사 완료: 위협 없음’과 같은, 보안 검사 결과를 표시하는 화면에서 사용. 체크 표시는 ‘안전(Safe)’의 심볼이기도 하므로, 브라우저 틀과 조합함으로써, 웹 열람 환경의 안전성을 보증하는 마크로 기능합니다.
• 권장 환경/동작 확인의 ‘지원 브라우저’ 목록에
  웹 서비스를 이용하기 위한 권장 환경을 설명하는 표에서, ‘지원됨(OK)’을 나타내는 아이콘으로 사용. 예를 들어, Chrome이나 Safari는 ‘체크 표시(지원)’, 구형 브라우저는 ‘X 표시(미지원)’로 구분해 씀으로써, 사용자의 환경이 적합한지를 한눈에 판단하게 할 수 있습니다.
• 랜딩 페이지(LP)의 ‘웹 완결’ 장점 소구에
  금융 서비스나 보험 신청 페이지에서, ‘내방 불필요, 웹에서 모든 절차 완결’이라는 장점을 어필하는 아이콘으로 사용. 브라우저 안에서 절차가 끝나는(체크가 찍히는) 도안이, 간편함이나 속도감을 강조합니다.

편집 요령과 EPS 형식의 장점

배포 파일에는, 웹 제작에 편리한 PNG, SVG 형식 외에, DTP 디자인이나 고도 편집에 적합한 벡터 데이터인 EPS 형식도 동봉하고 있습니다.

EPS 형식(벡터 데이터)을 활용하면, 메시지의 뉘앙스에 맞춰 배색을 자유롭게 변경할 수 있습니다. 예를 들어, Adobe Illustrator 등의 소프트웨어를 사용하여, 안의 체크 표시만 ‘선명한 녹색’으로 변경하면, UI 디자인에서의 글로벌 표준인 ‘Success(성공)’ 컬러가 되어, 보다 직관적으로 긍정적인 메시지를 전달할 수 있습니다.
반대로, 체크 표시를 삭제하고 ‘×(X표)’를 그리면 ‘접속 에러’나 ‘404 Not Found’ 아이콘으로, ‘!’를 그리면 ‘경고’ 아이콘으로 만드는 등, 하나의 브라우저 틀을 베이스로 하여 다양한 상태 아이콘을 양산할 수 있습니다. 또한, 브라우저 헤더 부분에 색을 입혀, Chrome풍(빨강/노랑/초록)이나 Safari풍(회색)으로 어레인지하는 것도 추천합니다.

관련 키워드

브라우저, 윈도우, 화면, 체크 표시, V표, 완료, 성공, OK, 구매 완료, 전송 완료, 등록 완료, 감사 페이지, 웹 완결, 보안, 안전, 아이콘, Browser、Window、Check mark、Completed、Success、Safe