KImageMapEditor 무료 다운로드·설치 방법, HTML 이미지의 특정 영역에 클릭 링크 넣기

한 장의 HTML 이미지에서 특정 부분마다 다른 페이지로 가는 링크를 만들고 싶다면 KDE의 KImageMapEditor를 무료로 설치할 수 있습니다. Linux용 Flathub 안정판 26.08.3을 고른 뒤 이미지를 열고 사각형 클릭 영역에 주소를 넣어 HTML 파일로 저장하는 순서를 안내합니다.

KImageMapEditor

KDE

무료가격

26.08.3버전

Linux운영체제

Flatpak배포

KImageMapEditor HTML 이미지 맵 무료 다운로드·설치 안내

이미지의 여러 부분을 각각 다른 링크로 연결합니다

KImageMapEditor는 HTML의 map 태그에 들어가는 이미지 맵을 만드는 편집기입니다. 예를 들어 안내도에서 방마다 다른 설명 페이지로 이동시키거나 한 장의 제품 그림에서 부품별 자세한 정보를 여는 식으로 쓸 수 있습니다. 이미지 자체를 자르거나 그림을 다시 그리는 편집기라기보다, 기존 그림 위에 클릭할 영역과 링크 정보를 얹는 도구입니다.

작업 화면 왼쪽에는 Areas, Maps, Images 목록이 나뉘어 있습니다. 어떤 이미지와 맵을 다루는지 구분하고, 만든 영역을 목록에서 다시 선택할 수 있습니다. 중앙에는 이미지가 크게 나오고, 그 위에 도형을 그리면 클릭 영역이 표시됩니다. 공식 화면에는 사각형이 선택돼 있고 모서리와 변에 크기를 조절하는 손잡이가 보입니다.

영역을 그린 뒤 열리는 Area Tag Editor의 General 탭에는 HREF, Alt. Text, Target, Title 입력칸이 있습니다. HREF에는 그 부분을 클릭했을 때 갈 주소를 넣고 Alt. Text에는 영역의 의미를 알 수 있는 짧은 설명을 적습니다. Title은 보조 설명으로 쓸 수 있습니다. 링크 목적지가 아직 정해지지 않았다면 임의의 주소를 넣어 완성된 링크처럼 저장하지 마세요.

도형은 Rectangle뿐 아니라 Circle, Polygon, Freehand Polygon을 고를 수 있습니다. 버튼이나 네모난 구역에는 사각형이 간단하고, 원형 표식이나 불규칙한 지역을 따라가려면 다른 모양이 필요합니다. 영역이 서로 겹치면 사용자가 어떤 부분을 눌렀는지 헷갈릴 수 있으니 이미지에서 실제로 구분되는 범위만 잡는 편이 좋습니다.

KDE 설명서는 그림을 열고 맵을 새로 만든 다음 영역과 링크를 지정하고, 생성된 HTML을 확인해 usemap 값을 연결한 뒤 저장하는 흐름을 제시합니다. 도형만 보인다고 웹페이지의 링크까지 완성된 것은 아닙니다. 마지막에는 저장한 HTML을 브라우저에서 열어 의도한 부분을 클릭했을 때 맞는 주소가 열리는지 확인해야 합니다.

이미지 위 영역과 링크 속성 창이 보이는 공식 화면

KImageMapEditor의 이미지 위 사각형 클릭 영역과 HREF 입력 창

공식 예시에는 왼쪽 Areas·Maps·Images 목록, 이미지 위 사각형 선택 영역, Area Tag Editor의 HREF·Alt. Text·Target·Title 입력칸이 보입니다. 예시 이미지와 링크는 설치 후 자동으로 생기는 자료가 아닙니다.

KImageMapEditor HTML 이미지 맵 무료 다운로드·설치 안내

프로그램	KImageMapEditor
개발	KDE
확인한 버전	26.08.3
설치 환경	Linux Flatpak · x86_64
가격	무료
주요 용도	HTML 이미지 맵과 클릭 영역 편집

KImageMapEditor 26.08.3을 공식 Flathub에서 설치합니다

KDE의 KImageMapEditor 페이지에서 Linux용 Flathub 항목을 여세요. Flathub에서 이름 KImageMapEditor, 개발자 KDE, 앱 ID org.kde.kimagemapeditor를 확인합니다. KDE 릴리스 목록과 Flathub 앱 데이터에 안정 버전 26.08.3이 표시됩니다. 무료 배포 항목인지도 확인한 다음 설치를 진행하세요.

이 안내는 Linux x86_64 데스크톱 Flatpak을 기준으로 합니다. Flathub에는 aarch64도 등록돼 있으므로 기기 구조에 맞는 패키지를 고르세요. 배포판에 Flatpak과 Flathub이 준비돼 있다면 소프트웨어 센터에서 설치할 수 있습니다. KDE 사이트의 Install on Linux 단추는 Discover 같은 AppStream 처리 앱이 연결돼 있어야 열립니다.

설치가 끝나면 앱 목록에서 KImageMapEditor를 찾아 여세요. 처음 연 빈 화면에 공식 예시의 지도나 사각형이 자동으로 나타나지는 않습니다. 작업할 PNG·JPG·GIF 이미지를 미리 준비하고, 링크를 걸 주소도 정해 두면 바로 첫 이미지 맵을 만들 수 있습니다.

KDE 공식 앱 페이지에서 Flathub 항목을 엽니다.
KImageMapEditor·KDE·org.kde.kimagemapeditor·26.08.3을 확인해 무료 Flatpak을 설치합니다.
앱 목록에서 편집기를 열고 사용할 이미지와 링크 주소를 준비합니다.

이미지를 열고 새 맵의 이름을 정합니다

File → Open으로 컴퓨터의 PNG, JPG 또는 GIF 이미지를 여세요. KDE 설명서는 HTML 파일을 열거나 이미지를 화면으로 끌어다 놓는 방법도 안내합니다. 이미지가 여러 개라면 왼쪽 Images 목록에서 이번에 작업할 그림을 선택하세요. 중앙에 정확한 그림이 보이는지 먼저 확인해야 잘못된 이미지에 영역을 그리지 않습니다.

그다음 Map → New Map을 선택하고 맵 이름을 입력하세요. 맵을 만들면 Tools 메뉴의 도형 그리기 기능을 사용할 수 있습니다. 이름은 나중에 이미지의 usemap 값과 연결되므로, 같은 HTML 안에서 어떤 그림에 쓰는 맵인지 알아보기 쉬운 값으로 정하세요. 복수 이미지를 다루는 경우에는 왼쪽 Maps 목록에서 현재 선택된 맵을 확인합니다.

예를 들어 건물 안내도 한 장에서 회의실 구역에 링크를 달려는 작업이라면, 먼저 그 안내도 파일을 열고 building-map처럼 구분되는 이름의 맵을 만듭니다. 실제로 저장할 HTML 파일 이름과 이미지 경로는 자신의 프로젝트에 맞게 관리하세요. 공식 스크린샷의 날씨 이미지와 unnamed 맵은 조작을 보여 주는 예시일 뿐입니다.

File → Open으로 이번에 사용할 PNG·JPG·GIF 이미지를 엽니다.
Images 목록에서 대상 그림이 선택됐는지 확인합니다.
Map → New Map에서 식별하기 쉬운 맵 이름을 만듭니다.

사각형 영역을 그리고 HREF와 대체 문구를 넣습니다

Tools에서 Rectangle을 고른 뒤 이미지에서 링크를 걸 부분을 드래그해 사각형을 만드세요. 공식 화면에서는 사각형 선택 영역과 크기 손잡이가 보입니다. 영역이 너무 넓으면 옆의 다른 물체까지 클릭될 수 있으니 테두리를 목적 부분에 맞게 조절합니다. 원형 표식에는 Circle, 복잡한 윤곽에는 Polygon이나 Freehand Polygon을 선택할 수 있습니다.

영역을 만들면 Area Tag Editor가 열립니다. General 탭의 HREF에 실제로 열릴 페이지 주소를 넣고 Alt. Text에는 그 부분을 설명하는 문구를 적으세요. 예를 들어 회의실 영역이라면 목적지 주소와 회의실 안내처럼 짧고 알아볼 수 있는 설명을 연결합니다. Title은 추가 설명이 필요할 때 사용하고, Target은 새 창 등 열리는 방식을 정할 때만 검토하세요.

입력을 마친 뒤 OK 또는 Apply로 반영합니다. 다른 구역도 같은 순서로 도형을 만들고 다른 주소를 넣으세요. 이미 만든 부분을 바꾸려면 Edit 메뉴나 해당 영역의 상황 메뉴에서 Properties를 열 수 있다고 KDE 설명서에 적혀 있습니다. Coordinates 탭의 수치를 바꾸면 위치와 크기가 화면에 바로 반영되므로, 마우스로 맞추기 어려운 부분에 쓰면 됩니다.

Tools → Rectangle으로 클릭할 부분을 그립니다.
Area Tag Editor의 HREF에 링크 주소, Alt. Text에 영역 설명을 입력합니다.
OK로 적용하고 다른 구역에도 필요한 링크를 각각 넣습니다.

생성된 HTML과 usemap 연결을 확인하고 저장합니다

영역을 모두 지정했다면 Map → Show HTML에서 생성된 이미지 맵 코드를 확인하세요. 맵 이름과 각 영역의 주소가 계획한 대로 들어갔는지 읽어 봅니다. 주소 한 글자가 틀렸거나 같은 링크를 두 구역에 넣었다면 저장 전에 해당 영역의 Properties로 돌아가 수정합니다.

KDE 설명서는 이어서 Image → Edit Usemap에서 앞서 만든 맵 이름을 usemap 값으로 넣도록 안내합니다. 이 연결이 빠지면 이미지 위에 영역을 그려도 HTML에서 그 맵을 쓰지 못할 수 있습니다. Maps 목록의 이름과 usemap 값이 서로 맞는지 확인한 뒤 File → Save로 HTML 파일을 저장하세요.

저장 결과는 편집기 안의 색상 표시만 보고 끝내지 마세요. 실제 HTML 파일을 브라우저에서 열어 그림의 지정한 부분을 클릭하고, 각 구역이 원래 정한 주소로 가는지 확인합니다. KDE 문서는 Konqueror에서 열어 검사하는 예를 들지만, HTML을 표시하는 브라우저에서 같은 방식으로 확인할 수 있습니다. 다른 곳으로 이동한다면 HREF와 영역 위치를 다시 살펴보세요.

Map → Show HTML에서 맵 이름과 각 HREF를 확인합니다.
Image → Edit Usemap에서 맵 이름을 연결하고 File → Save를 누릅니다.
저장한 HTML을 브라우저에서 열어 각 클릭 영역의 목적지를 시험합니다.

영역이 눌리지 않거나 이미지가 비어 있을 때 확인합니다

편집기에서 도형은 보이는데 웹페이지에서 눌리지 않으면 먼저 저장한 HTML이 최신 파일인지 확인하세요. 그다음 Map → Show HTML의 영역 주소와 Image → Edit Usemap의 맵 이름을 비교합니다. 이름이 서로 다르거나 HTML에 이미지와 맵 연결이 빠져 있으면 클릭 영역이 적용되지 않습니다. 수정 뒤 다시 저장하고 브라우저에서 파일을 새로 여세요.

왼쪽 Images 목록에는 파일이 있는데 중앙에 기대한 그림이 안 보이면 목록에서 다른 이미지를 고른 상태인지 확인합니다. HTML을 연 경우 이미지 경로가 원본 파일을 가리키는지도 살펴보세요. 이미지 자체가 로드되지 않으면 그 위의 영역만 수정해도 결과를 판단하기 어렵습니다. 먼저 올바른 그림을 화면에 띄운 뒤 클릭 범위를 조절하세요.

클릭은 되지만 옆 부분까지 반응한다면 사각형의 손잡이를 움직이거나 Coordinates 탭의 수치로 영역을 좁히세요. 긴 타원이나 복잡한 윤곽에 무리하게 큰 Rectangle을 씌우기보다 Circle 또는 Polygon을 고르는 편이 정확할 수 있습니다. 이미지 크기를 웹페이지에서 바꾸는 경우에도 실제로 클릭되는 위치가 맞는지 저장한 HTML에서 다시 확인해야 합니다.

저장한 HTML과 현재 편집 중인 파일이 같은지 확인합니다.
맵 이름·usemap·HREF와 이미지 파일 경로를 대조합니다.
범위가 어긋나면 도형 크기와 Coordinates를 조절한 뒤 다시 저장해 시험합니다.

자주 묻는 질문

KImageMapEditor는 무료인가요?

네. KDE가 소개한 Flathub의 Linux용 안정판 26.08.3은 무료로 배포됩니다.

어떤 이미지 파일을 열 수 있나요?

KDE 설명서는 PNG·JPG·GIF 이미지와 HTML 파일을 여는 작업을 안내합니다.

한 이미지에서 영역마다 다른 주소를 넣을 수 있나요?

네. 도형을 각각 만들고 Area Tag Editor의 HREF에 각 목적지 주소를 입력하세요.

사각형 외의 모양도 지원하나요?

네. 설명서에는 Circle, Rectangle, Polygon, Freehand Polygon이 안내돼 있습니다.

영역을 만들었는데 웹에서 클릭되지 않는 이유는 무엇인가요?

맵 이름과 이미지의 usemap 연결, 각 HREF, 저장한 HTML의 이미지 경로를 확인하세요.

한 이미지의 한 구역부터 연결해 보세요

KImageMapEditor 26.08.3을 공식 Flathub에서 설치했다면 PNG·JPG·GIF 그림을 열고 맵을 하나 만드세요. 사각형 영역에 HREF와 Alt. Text를 채운 뒤 생성된 HTML, usemap 연결, 저장 파일을 차례로 확인하면 첫 클릭 구역을 완성할 수 있습니다. 브라우저에서 그 부분이 정확한 페이지로 열리는지 마지막으로 시험해 보세요.