이미지 맵 만들기

이미지 맵 만들기 — 어떤 그림에든 클릭할 수 있는 핫스팟 올리기

그림 한 장을 넣으면 클릭할 수 있는 이미지 맵이 완성돼요. 건물마다 알맞게 자리 잡은 번호 핀, 장소를 알려주는 범례, 그리고 바로 공개하거나 퍼갈 수 있는 페이지까지 한 번에 만들어집니다.

East Blue, 핀 펼쳐 보기 — 등대 바위 위의 핀을 누르면 지도를 벗어나지 않고도 장소 이름과 한 줄 설명이 바로 열려요. — East Blue, 핀 펼쳐 보기

캠퍼스, 가까이 보기 — 본관과 운동장, 정문 위에 올라간 번호 핀들. 아래 범례에서 번호별 설명을 한눈에 볼 수 있어요. — 캠퍼스, 가까이 보기

Ribcage, 가까이 보기 — 핫스팟이 그림 옆에 따로 떨어져 있지 않고 일러스트 위에 자연스럽게 얹혀 있어요. — Ribcage, 가까이 보기

Inazuma, 가까이 보기 — 섬마다 제자리에 핀이 꽂혀 있고, 그림 크기가 달라져도 핀 위치가 함께 맞춰져요. — Inazuma, 가까이 보기

One Piece · East Blue — 여섯 개의 섬과 폭풍우 지대. 핀이 꽂힌 곳마다 새로운 이야기가 시작돼요. — **One Piece · East Blue** — 여섯 개의 섬과 폭풍우 지대. 핀이 꽂힌 곳마다 새로운 이야기가 시작돼요.

One Piece · Water 7 — 둥근 운하를 따라 이어지는 여섯 곳 — 분수대, 시계탑, 조선소 부두, 바다열차 역, 시장, 수문. — **One Piece · Water 7** — 둥근 운하를 따라 이어지는 여섯 곳 — 분수대, 시계탑, 조선소 부두, 바다열차 역, 시장, 수문.

One Piece · Wano — 가파른 절벽으로 둘러싸인 섬, 한가운데 도읍을 중심으로 나뉜 다섯 지역. — **One Piece · Wano** — 가파른 절벽으로 둘러싸인 섬, 한가운데 도읍을 중심으로 나뉜 다섯 지역.

Genshin Impact · Liyue — 해안선을 따라 이어진 항구, 높은 누각, 객잔, 들판, 바위 숲과 관문. — **Genshin Impact · Liyue** — 해안선을 따라 이어진 항구, 높은 누각, 객잔, 들판, 바위 숲과 관문.

Genshin Impact · Inazuma — 폭풍의 결계 너머 자리한 여섯 개의 섬, 그리고 섬마다 기다리고 있는 사연들. — **Genshin Impact · Inazuma** — 폭풍의 결계 너머 자리한 여섯 개의 섬, 그리고 섬마다 기다리고 있는 사연들.

Jujutsu Kaisen · Tokyo Jujutsu High — 본관, 기숙사, 연무장, 정문, 사당, 무기고, 진입로까지 일곱 개의 핀으로 살펴보는 캠퍼스 지도. — **Jujutsu Kaisen · Tokyo Jujutsu High** — 본관, 기숙사, 연무장, 정문, 사당, 무기고, 진입로까지 일곱 개의 핀으로 살펴보는 캠퍼스 지도.

Jujutsu Kaisen · Shibuya — 역사와 스크램블 교차로, 타워, 육교와 뒷골목 — 그리고 가장자리를 덮은 장막. — **Jujutsu Kaisen · Shibuya** — 역사와 스크램블 교차로, 타워, 육교와 뒷골목 — 그리고 가장자리를 덮은 장막.

Ribcage · 구역 안내 — 거대한 흉곽 속에 세워진 도시. 각 장기의 이름을 딴 구역마다 핀이 꽂혀 있어요. — **Ribcage · 구역 안내** — 거대한 흉곽 속에 세워진 도시. 각 장기의 이름을 딴 구역마다 핀이 꽂혀 있어요.

Ash Harbor · 안개 경계선 — 바닷길이 열리는 도로에서 등대까지, 굽이치는 해안을 따라 찍힌 일곱 개의 핀. — **Ash Harbor · 안개 경계선** — 바닷길이 열리는 도로에서 등대까지, 굽이치는 해안을 따라 찍힌 일곱 개의 핀.

그림 한 장으로 시작해 보세요. 그 안의 장소들이 모여 하나의 세계가 됩니다.

Neta Studio는 AI 세계관 제작 도구예요. 지도 한 장은 물론 그곳에 사는 인물들과 핀 사이에서 벌어지는 장면들까지 모두 한 세계관 안에 차곡차곡 담기죠. 완성된 페이지를 바로 공개하거나, 복사해서 새로운 버전을 만들고, 같은 지도 위에 새로운 장소를 계속 덧붙여 나갈 수도 있어요.

화면이 바뀌어도 제자리를 지키는 핀 — 핫스팟 위치가 이미지의 비율(%)로 저장되기 때문에, 책상 위 900px 큰 화면에서 보든 손안의 390px 모바일 화면에서 보든 핀이 어긋나지 않고 원래 자리에 그대로 붙어 있어요.
복잡한 좌표 표 대신 깔끔한 범례 — 번호마다 장소 이름과 한 줄 설명이 따라붙어요. 픽셀 자를 대고 위치를 잴 필요도, 코드의 area 태그에 숫자를 일일이 적어 넣을 필요도 없습니다.
바로 공유할 수 있는 한 페이지 — 만든 지도는 링크로 바로 보내거나 다른 사이트에 임베드할 수 있는 웹페이지로 발행돼요. 물론 같은 세계관 안에서 내용을 계속 넓혀 갈 수도 있고요.

만들기 전에 궁금할 수 있는 점들

이미지 맵이 정확히 뭔가요?

그림 속 특정 위치를 클릭할 수 있게 만든 이미지예요. 원래 HTML에서는 이미지에 복잡한 도형 좌표를 입혀야 하지만, 여기서는 그림과 핫스팟 레이어가 처음부터 하나로 만들어져서 차가운 좌표 숫자 대신 장소 이름과 한 줄 이야기가 적힌 핀이 바로 열립니다.

좌표를 제가 직접 찍어야 하나요?

아니요, 장소 이름만 알려주시면 이미지 비율에 맞춰 알맞은 자리에 핀이 놓여요. 만약 핀 하나가 골목 하나쯤 비껴갔다면, 몇 번 핀을 어디로 옮길지만 말씀해 주세요. 바로 제자리로 이동합니다.

제가 가진 그림이나 사진을 써도 되나요?

그럼요. 직접 찍은 사진이나 평면도, 게임 스크린샷, 포스터 등을 첨부하고 그 안의 장소들을 알려주세요. 대부분 빈 화면에서 지도를 시작하기 때문에 이미지 생성이 기본으로 되어 있을 뿐이에요.

HTML 맵 코드도 만들어 주나요?

기본적으로는 이미지 크기에 맞춰 반응하는 실제 핫스팟 레이어(번호, 이름표, 링크 포함)가 얹힌 완성된 페이지를 발행해 드려요. 만약 개인 웹사이트에 직접 코드를 넣어야 한다면, 페이지와 함께 핫스팟 JSON 데이터와 area 마크업 코드를 달라고 요청하시면 됩니다.

핫스팟에 다른 곳으로 이동하는 링크를 걸 수 있나요?

네, 가능해요. 핀을 눌렀을 때 설명 패널을 열 수도 있고, 같은 지도 안의 다른 장소로 건너뛰거나, 직접 입력한 외부 URL로 연결할 수도 있어요.

스마트폰에서도 잘 보이나요?

네, 모든 위치가 비율(%)로 계산되어 있어서 지도가 작아져도 핀은 원래 건물 위에 딱 붙어 있어요. 설명창도 화면 옆을 가리는 사이드바 대신 핀 근처에 아담한 카드로 열립니다.

어떤 것들을 지도로 만들 수 있나요?

판타지 세계 지도, 게임 스테이지, 학교 캠퍼스나 건물 평면도, 공연장 좌석표, 제품 구조도, 평소 걷는 동네 거리 사진까지 무엇이든 좋아요. 가리킬 만한 장소가 있는 그림이라면 전부 핀을 꽂을 수 있습니다.

지도 하나에 핫스팟은 몇 개 정도가 적당한가요?

다섯 개에서 여덟 개 사이가 가장 보기 좋아요. 정보도 충분하고 그림 자체를 감상하기에도 복잡하지 않거든요. 복작거리는 대도시 지도라면 구역별로 묶어서 열두 개 정도까지 올려도 괜찮습니다.

다음 지도에는 사람들이 직접 눌러볼 수 있는 레이어를 올려보세요.

장소 이름만 한 번 적어주세요. 그림과 핀, 범례, 그리고 바로 공유할 수 있는 페이지까지 한꺼번에 완성됩니다.

이미지 맵 만들기