2D 타일맵 디자인 에디터는 복잡한 설치 과정 없이 웹 브라우저 안에서 인게임 맵 레벨과 물리 통과 불가능 영역(Collision)을 드로잉 방식으로 설계하고, 다양한 포맷으로 리소스를 추출할 수 있는 전문적인 2D 레벨 디자인 솔루션입니다.

로컬 웹 기술을 활용해 이미지 파일이 외부 서버로 업로드되지 않으므로 안심하고 안전하게 개발 작업을 진행하실 수 있습니다.

🌟 핵심 주요 기능

層 고성능 다중 레이어 시스템:
- 배경(Background), 지면/장애물(Ground), 상단 장식(Decoration) 등 다수의 레이어를 분리하여 작업할 수 있습니다.
- 레이어 순서 정렬, 개별 잠금(Lock), 숨김(Visibility), 불투명도 설정을 지원하여 겹침 표현이 있는 세련된 2D 환경을 구현할 수 있습니다.
🎨 3가지 고품질 테마 타일셋 기본 탑재:
- 도구를 실행하자마자 바로 그리기를 시작할 수 있도록 엄선된 3가지 그래픽 테마를 내장하고 있습니다:
  1. 판타지 던전 테마: 돌 벽, 벽돌 바닥, 물/용암, 보물상자(열림/닫힘), 계단, 횃불, 포션, 열쇠 등.
  2. 레트로 초원 테마: 푸른 하늘, 구름, 잔상 없는 잔디 언덕, 흙 타일, 상자, 하트, 코인, 사다리, 가시, 얼음 블록 등.
  3. 사이버 시티 테마: 금속 강판, 네온 라인 플로어, 경고선(허저드), 회로망 벽면, 터미널 모니터, 순간이동 패드, 독극물 드럼통 등.
🛠️ 정교하고 전문적인 드로잉 툴킷:
- 스마트 브러시 (Paint): 타일을 마우스 드래그로 그리며, 타일셋에서 드래그하여 다중 타일을 선택하면 그 배열 그대로 캔버스에 도장을 찍듯이(Stamp Painting) 한 번에 그려집니다.
- 지우개 (Erase): 그려진 타일을 개별적으로 제거합니다.
- 버킷 채우기 (Flood Fill): 동일한 타일이나 빈 영역을 똑똑하게 탐색해 광역 채우기를 수행합니다.
- 스포이트 (Picker): 캔버스를 클릭하여 배치된 타일 ID를 즉시 그리기 붓으로 선택합니다.
- 영역 복사 도구 (Stamp Select): 캔버스 지도의 일부분을 사각형으로 드래그하여 복사한 뒤, 이를 복합 브러시 삼아 지도상의 다른 부분에 그대로 붙여넣을 수 있습니다.
🛡️ 통합 물리 충돌(Collision) 및 태그 에디터:
- 타일셋의 특정 타일을 클릭하고 ‘물리적 충돌 레이어 (통과 불가)’를 켜두면, 맵 설계 시 자동으로 충돌 속성이 동기화됩니다.
- 충돌 오버레이 (C) 단축키를 눌러 맵 상의 통과 불가능 격자를 붉은색 표시로 시각화해 맵 동선을 즉시 검증할 수 있습니다.
- 타일마다 spawn, portal, chest-01 등 커스텀 속성 태그를 부여하여 데이터를 함께 수집할 수 있습니다.
📱 모바일 & 태블릿 제스처 완벽 지원:
- 모바일 터치 장치에서도 두 손가락 핀치 줌(Pinch-to-zoom)을 통한 캔버스 확대/축소 및 화면이동(Panning)이 하드웨어 가속 수준으로 매끄럽게 동작합니다.
- 화면이 좁은 모바일에서는 하단 탭 내비게이션을 지원해 캔버스 화면과 우측 팔레트 설정 창을 효율적으로 전환할 수 있습니다.
💾 외부 입출력 포맷:
- 투명 PNG 병합 저장: 배경을 투명하게 유지한 채 모든 활성화된 레이어를 하나로 합성해 고화질의 완성형 PNG 레벨 맵 이미지로 다운로드합니다.
- JSON 데이터 내보내기/가져오기: 맵의 타일 인덱스 1D 배열, 레이어 정보, 타일 속성 딕셔너리, 커스텀 타일셋 이미지(Base64)가 포함된 JSON 메타데이터를 받아 Unity, Phaser, Cocos2d-x, Godot 등 외부 게임 엔진 리소스로 바로 매핑하여 사용하거나 작업 파일을 안전하게 보관할 수 있습니다.
- 커스텀 타일셋 업로드: 내장 프리셋 외에도 자신이 소장한 PNG 형태의 스프라이트 타일 이미지를 올리고 그리드 크기를 골라 자신만의 타일맵을 즉시 구성할 수 있습니다.

🛠️ 사용 방법 (How to Use)

테마 타일셋 고르기: 우측의 타일셋 탭에서 던전, 초원, 사이버 시티 중 하나를 고릅니다. 혹은 본인의 이미지 파일을 아래 드롭존에 업로드해도 됩니다.
타일 선택: 팔레트에서 그릴 타일을 클릭하거나 드래그하여 여러 장을 묶음 선택합니다.
그리기: 왼쪽 도구바에서 브러시(B)나 채우기(F)를 선택하고 캔버스에 그립니다. 캔버스 화면을 옮기려면 스페이스바를 누른 채 드래그하거나 팬(Pan) 도구를 이용하세요. 마우스 휠 스크롤로 가볍게 배율을 조정할 수 있습니다.
레이어 구분: 우측 두 번째 탭인 ‘레이어 및 맵 설정’에서 새 레이어를 추가하거나 특정 레이어를 끄고 키며 디테일을 채웁니다.
충돌 설정: 장애물(벽, 가시 등)로 지정할 타일을 선택한 뒤 우측 하단에서 ‘물리적 충돌 레이어’를 켜줍니다. 좌측 도구 바 하단의 방패 아이콘(C)을 켜면 맵에 적용된 충돌박스 현황이 붉은색으로 오버레이됩니다.
레벨 리소스 내보내기: 작업이 완료되면 상단 우측의 ‘JSON 내보내기’로 맵 원본 데이터를 저장하고, ‘이미지 저장’으로 게임 맵 배경 텍스처를 다운로드합니다.

💬 자주 묻는 질문 (FAQ)

Q1. JSON 코드를 다른 게임 엔진에서 어떻게 활용하나요?
- A. 내보내진 JSON 파일은 각 레이어 이름별로 cols * rows 크기만큼 1차원 정수 배열(data)을 담고 있습니다. -1은 빈 공간이며, 0 이상의 정수는 타일셋 이미지 상의 1차원 인덱스를 지칭합니다. 게임 코드에서 JSON 파일을 파싱한 뒤 해당 인덱스대로 타일 이미지를 쪼개 루프를 돌려 출력하면 그대로 게임 맵이 재현됩니다.
Q2. 가로세로 맵 칸 크기를 40x40 이상으로 확장하고 싶습니다.
- A. 우측의 ‘설정 & 레이어’ 탭 하단에서 가로 칸수(Cols)와 세로 칸수(Rows) 입력란에 원하는 크기를 입력한 뒤 ‘크기 변경 적용’을 클릭해 언제든지 동적으로 크기를 늘릴 수 있습니다. 기존에 배치된 타일맵 데이터는 왼쪽 상단 기준으로 온전히 보존됩니다.
Q3. 복사 도장(스탬프) 기능은 어떻게 쓰나요?
- A. 좌측 툴바에서 점선 사각형 모양의 ‘스탬프 복사(S)’ 도구를 선택한 뒤, 캔버스 맵 위에 복사하고 싶은 영역을 사각형으로 쭉 드래그합니다. 마우스를 떼는 순간 선택한 영역의 다중 레이어 구조가 복사되며 그리기 툴로 자동 전환됩니다. 이후 그리고 싶은 위치에 갖다 대면 미리보기가 보이고 클릭하면 한 번에 붙여넣기가 완성됩니다.