사진 한 장에 링크를 여러 개 넣으려면 어떻게 하나요?
이미지를 불러온 뒤 클릭할 영역을 그리고 영역마다 주소를 넣으면 HTML 이미지 맵 코드가 만들어집니다. 그 코드를 HTML 입력이 가능한 페이지에 붙여 넣으시면 됩니다. 더블루캔버스 이미지 맵 생성기는 설치와 회원가입 없이 브라우저에서 쓰는 무료 도구입니다.
핵심 요약
- 이미지 맵 생성기는 더블루캔버스가 제공하는 무료 웹 도구이며, 이미지 위에 클릭할 영역을 그리고 영역마다 다른 링크를 연결해 줍니다.
- 영상에서는 이미지를 불러오고, 영역을 그려 주소를 연결하고, 자동으로 만들어진 HTML을 복사해 붙여 넣는 세 단계를 보여 줍니다. 설치와 회원가입은 필요 없습니다.
- 이 글은 2026년 10월 4일에 소개 페이지를 읽고 정리했습니다.
영상에서 보여 준 세 단계
소개 영상은 사진 한 장에 링크를 여러 개 넣고 싶을 때 이미지 맵 생성기를 쓰라는 말로 시작합니다. 이어서 아래 순서를 차례로 보여 줍니다.
| 단계 | 하는 일 |
|---|
| 1. 이미지 불러오기 | 파일을 올리거나 이미지 주소를 입력합니다 |
|---|
| 2. 영역 그리고 연결하기 | 원하는 영역을 그리고 링크를 넣습니다. 영상에서는 의자와 조명에 서로 다른 주소를 연결했습니다 |
|---|
| 3. 코드 복사하기 | 자동으로 만들어진 HTML을 복사해 HTML 입력이 가능한 페이지에 붙여 넣습니다 |
|---|
영역을 추가할 때마다 HTML 이미지 맵 코드가 자동으로 업데이트되므로, 코드를 직접 짤 필요가 없습니다.
어떤 상황에 쓰는지
영상은 룩북, 이벤트 배너, 공간 안내도 세 가지를 예로 듭니다. 소개 페이지의 설명과 함께 정리하면 아래와 같습니다.
- 룩북: 사진 속 상품마다 각각의 상세 페이지를 연결합니다.
- 이벤트 배너: 하나의 배너 안에서 혜택마다 알맞은 이벤트 링크를 붙입니다.
- 공간 안내도: 설명이 필요한 곳에서 더 자세한 설명 페이지로 이동하게 합니다.
시작하는 방법
- 메뉴 찾기 — 더블루캔버스 홈에서 PROGRAM 메뉴의 IMAGE-MAP GENERATOR로 들어갑니다. 바로 가시려면 이미지 맵 생성기 소개 페이지를 여십시오.
- 편집기 열기 — 소개 페이지의 버튼으로 편집기를 엽니다. 설치와 회원가입은 필요 없습니다.
- 이미지와 영역 정하기 — 이미지를 불러온 뒤 영역을 그리고 영역마다 주소를 넣습니다.
- 코드 붙여 넣기 — 만들어진 코드를 복사해 HTML을 붙여 넣을 수 있는 곳에 넣습니다.
사용 방법과 환경
코드에 들어가는 이미지는 방문자가 볼 수 있는 주소여야 합니다. 코드를 올릴 서비스가 HTML 태그와 스크립트를 허용하는지도 먼저 확인하십시오.
모바일 화면에 맞추려면 편집기에서 퍼센트 기반 반응형 모드를 고를 수 있습니다. 코드를 적용한 페이지에서 이미지 크기와 링크 위치를 확인하시기 바랍니다.
작업 내용은 사용 중인 브라우저에 임시로 저장됩니다. 브라우저 데이터를 지우거나 다른 기기로 옮기면 복원되지 않을 수 있으니, 완성한 코드는 따로 보관하십시오.
정밀하게 영역을 편집하려면 마우스를 쓰는 PC 환경을 권장합니다.
영상 자막 전문 (6개 장면)
사진 한 장에 링크 여러 개
사진 한 장에 링크를 여러 개 넣고 싶다면 이미지 맵 생성기를 써 보라는 말로 영상이 시작됩니다.
이미지 불러오기
파일을 올리거나 이미지 주소를 입력합니다. 설치나 회원가입은 필요 없습니다.
영역 그리고 연결하기
원하는 영역을 그리고 링크를 넣습니다. 의자와 조명에 서로 다른 주소를 연결할 수 있습니다.
코드 복사
자동으로 만들어진 HTML을 복사해 HTML 입력이 가능한 페이지에 붙여 넣습니다.
활용 예시
룩북, 이벤트 배너, 공간 안내도처럼 보는 이미지에 클릭할 곳을 더할 수 있습니다.
시작하는 곳
코딩 없이 무료로 시작할 수 있는 더블루캔버스 이미지 맵 생성기입니다.
자주 묻는 질문
이미지 맵으로 무엇을 할 수 있나요?
한 장의 이미지에 여러 클릭 영역을 만들고 영역마다 다른 링크를 연결할 수 있습니다. 상품이 모인 사진, 이벤트 배너, 안내 이미지 등에 쓸 수 있습니다.
정말 무료인가요? 설치나 가입이 필요한가요?
소개 페이지에는 회원가입이나 설치 없이 브라우저에서 무료로 쓸 수 있다고 안내되어 있습니다. 이미지를 불러오고 영역을 지정한 뒤 생성된 코드를 복사하면 됩니다.
만든 코드는 어디에 넣나요?
웹사이트의 HTML 파일이나 HTML 입력을 지원하는 에디터에 붙여 넣습니다. 방문자가 볼 수 있는 이미지 주소를 쓰고, 게시할 서비스에서 HTML 태그와 스크립트를 허용하는지 확인하십시오.
작업한 내용을 나중에 이어서 할 수 있나요?
작업 내용은 사용 중인 브라우저에 임시로 저장됩니다. 브라우저 데이터를 지우거나 다른 기기로 옮기면 복원되지 않을 수 있으므로 완성한 코드는 따로 보관하시기 바랍니다.
사진 한 장에 클릭할 곳을 더해 보십시오
더블루캔버스 이미지 맵 생성기에서 이미지를 불러오고 영역마다 링크를 연결하실 수 있습니다. 설치와 회원가입은 필요 없습니다.
이미지 맵 생성기 살펴보기 →
