마우스 커서가 특정 이미지 위로 이동할 때 다른 이미지로 바뀌는 효과를 가진 이미지를 ‘롤오버 이미지’라고 부릅니다. 이는 제품을 효과적으로 보여주거나, 웹사이트 방문자에게 더욱 상호작용적인 경험을 제공하는 훌륭한 방법입니다. 롤오버 이미지는 마케팅 이메일뿐만 아니라 다양한 온라인 콘텐츠에서 널리 활용되고 있습니다. 이러한 이미지들은 일반적으로 CSS와 HTML을 사용하여 만들 수 있지만, 좀 더 직관적인 UI 기반의 생성 방법을 찾는다면 FreshInbox의 롤오버 이미지 생성 도구를 이용하는 것이 좋은 선택이 될 수 있습니다.
롤오버 이미지 제작을 시작하기 전에 먼저 두 개의 이미지를 준비해야 합니다. 하나는 마우스 커서가 이미지 위에 없을 때 표시되는 기본 이미지이고, 다른 하나는 커서가 이미지 위로 이동했을 때 나타나는 대체 이미지입니다. 이 이미지들은 PNG 또는 JPG 형식이어야 하며, Imgur와 같은 클라우드 드라이브 또는 이미지 공유 서비스에 업로드한 후 FreshInbox의 롤오버 도구 페이지로 이동하여 사용하면 됩니다.
먼저 ‘기본 이미지 URL’ 필드에 마우스 커서가 없을 때 표시될 이미지의 URL을 입력합니다. 이미지의 가로 및 세로 크기를 설정하고, ‘대체 이미지 URL’ 필드에는 커서가 이미지 위에 있을 때 나타낼 이미지의 URL을 입력합니다.
다음으로 ‘링크’ 입력 상자에 사용자가 롤오버 이미지를 클릭했을 때 이동할 URL 주소를 입력합니다. 그 후, 이미지에 대한 대체 텍스트(ALT 텍스트)를 입력하고 ‘생성’ 버튼을 누릅니다. 그러면 이미지 미리보기가 오른쪽에 나타나고, 웹사이트나 이메일에 이미지를 추가할 수 있는 코드가 생성됩니다.
만약 이미지를 반응형으로 만들고 싶다면 ‘컨테이너 너비에 맞게 이미지 크기 조정’ 옵션을 활성화할 수 있습니다. 하지만 이는 컨테이너의 작동 방식에 대한 이해가 필요하므로, 일반적인 롤오버 이미지의 경우 이 옵션을 선택하지 않고 그대로 두는 것이 좋습니다. 생성된 코드를 복사하여 이메일에서는 <head> 태그 내에, 웹페이지에서는 <body> 태그 내에 붙여넣으면 롤오버 이미지를 쉽게 삽입할 수 있습니다. 이 과정을 통해 롤오버 이미지 제작이 완료됩니다.
최종 업데이트: 2020년 12월 8일 오전 8:37