에피소드 08 (MAKE) 신대륙 지도의 첫 조각

11월 20, 2025
에피소드 08 (MAKE) 신대륙 지도의 첫 조각

에피소드 08 (MAKE) — 신대륙 지도의 첫 조각

“이제… 진짜로 시작인 것 같다.”
리온이 조용히 말했다. 폭풍을 지나 도착한 새로운 하늘은, 지금까지와는 색부터 달랐다. 어딘가 노란빛이 섞인 연한 하늘, 멀리에는 보랏빛으로 물든 구름 조각.

딕이 모니터를 가리켰다. “저기 봐! 저건… 땅이야? 섬이야? 아니면 그냥 배경이야?” 세이는 눈을 가늘게 뜨고 화면을 관찰했다. “지금은 그냥 색 덩어리야. 우리가 ‘여기가 어디인지’ 정해주기 전까지는요.”

리온이 의자에서 자세를 고쳤다. “그래. 드디어 이 MAKE 단계가 필요한 때야. 이제부터는 ‘세계의 지도’를 만들어야 해.”

딕의 눈이 반짝였다. “와, 지도! 그럼 이제 산도 만들고, 마을도 만들고, 숨겨진 동굴도 만들고…!” 세이가 웃으며 말했다. “우리가 그걸 코드로 그릴 수 있다면 말이지.”

1. MAKE — “이 세상은 무엇으로 만들어져 있을까?”

세이는 태블릿을 꺼내 화면 중앙에 커다란 사각형을 그렸다. 그 안을 다시 작은 칸들로 쪼개기 시작한다.

“일단, 세계를 이렇게 타일(tile)로 나누자.” 가로, 세로로 잘게 쪼개진 정사각형들이 화면을 가득 채웠다.

딕이 고개를 갸웃했다. “근데 왜 굳이 잘게 쪼개? 그냥 큰 그림처럼 그리면 안 돼?” 세이가 친절하게 설명했다. “잘게 쪼개야, 한 칸마다 다른 의미를 줄 수 있어. 여기는 바다, 여기는 숲, 여기는 마을 이런 식으로.”

리온이 한마디를 덧붙였다. “그리고 나중에 플레이어가 걷거나 날아갈 때, ‘어느 칸 위에 있는지’를 기준으로 이벤트를 만들 수 있어.”

딕은 완전히 이해한 듯 고개를 끄덕였다. “아, 한 칸 한 칸이 레고 블록 같은 거네.” 세이가 웃었다. “맞아. 우리는 이제 신대륙 레고 세트를 만드는 거야.”

2. MAKE — 타일맵 데이터 구조 짜기

리온은 코드 편집기를 열고 말했다. “이 세계를 숫자로 먼저 만들자. 나중에 그 숫자를 보고 색과 이미지를 칠하면 돼.”

세 가지 기본 지형을 먼저 정했다.

  • 0 : 바다 (sea)
  • 1 : 땅 (land)
  • 2 : 숲 (forest)

그리고 간단한 2D 배열부터 만들었다.


// 신대륙 타일맵의 기본 크기
const MAP_COLS = 16;  // 가로
const MAP_ROWS = 12;  // 세로

// 0: 바다, 1: 땅, 2: 숲
let worldMap = [
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,1,1,2,1,0,0,0,0,0,0],
  [0,0,0,0,0,1,1,2,2,1,1,0,0,0,0,0],
  [0,0,0,0,1,1,2,2,2,2,1,1,0,0,0,0],
  [0,0,0,0,0,1,1,2,2,1,1,0,0,0,0,0],
  [0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

딕이 수많은 숫자를 한참 보고 있다가 말했다. “와… 이건 그냥 숫자 벽인데?” 세이가 웃으며 대답했다. “지금은 숫자 벽인데, 조금만 지나면 섬 하나로 보일 거야.”

리온이 설명을 이어갔다. “각 줄이 ‘위에서 아래로 내려오는 줄’이고, 안쪽 숫자들이 왼쪽에서 오른쪽으로 펼쳐진 지형이야. 이걸 그대로 타일로 그려보면…”

3. MAKE — 숫자를 색과 땅으로 그리기

이제 세계를 실제로 그릴 차례였다. 리온은 타일 하나의 크기를 정했다. 


const TILE_SIZE = 32; // 한 타일의 픽셀 크기

function drawWorldMap() {
  for (let row = 0; row < MAP_ROWS; row++) {
    for (let col = 0; col < MAP_COLS; col++) {
      const tile = worldMap[row][col];
      let color;

      if (tile === 0) color = "#3b82f6";      // 바다
      else if (tile === 1) color = "#facc15"; // 땅
      else if (tile === 2) color = "#16a34a"; // 숲
      else color = "#000000"; // 예외

      const x = col * TILE_SIZE;
      const y = row * TILE_SIZE;

      ctx.fillStyle = color;
      ctx.fillRect(x, y, TILE_SIZE, TILE_SIZE);
    }
  }
}

딕이 목을 쭉 빼고 화면을 들여다봤다. 파란색 네모들 사이로 노란색과 초록색 타일들이 섬처럼 모여 있었다.

“오… 진짜 섬 같다!” 세이는 덧붙였다. “숫자만 보고는 몰랐는데, 색으로 칠하니까 ‘여기가 어디인지’ 갑자기 느껴지네.”

리온이 살짝 웃으며 말했다. “이게 바로 MAKE 단계야. 머릿속에만 있던 섬을, 숫자와 색으로 꺼내는 단계.”

4. MAKE — 영역 이름 붙이기

“이제 이름을 붙이자.” 세이가 말했다. “그냥 ‘숲’, ‘땅’ 말고, 진짜 세계처럼.”

딕이 바로 손을 들었다. “저기 가운데 조금 높은 땅은 ‘바람등대 언덕’ 어때?” “오, 좋다.” 리온이 웃었다. “그러면 숲이 모여 있는 저기는… ‘첫 번째 그림자 숲’ 정도?”

세이는 태블릿에 간단한 데이터 구조를 만들었다. 


// 영역 정보
const regions = [
  {
    name: "바람등대 언덕",
    type: "land",
    area: { x: 6, y: 2, w: 4, h: 3 }
  },
  {
    name: "첫 번째 그림자 숲",
    type: "forest",
    area: { x: 7, y: 3, w: 3, h: 2 }
  }
];

“이렇게 해두면,” 세이가 설명했다. “나중에 플레이어가 이 영역 안에 들어왔을 때 ‘신대륙 A-01, 바람등대 언덕에 도착했습니다’ 같은 메시지를 보여줄 수 있어.”

딕이 들썩이며 말했다. “그럼 나중에는 ‘마을’, ‘항구’, ‘던전’ 같은 것도 다 데이터로 만들 수 있겠다?” 세이가 고개를 끄덕였다. “맞아. 영역 데이터는 곧 이야기의 지도야.”


5. MAKE — 지형의 ‘높낮이’를 넣어보자

딕이 갑자기 화면을 가리켰다. “근데… 우리 섬 좀 평평한데? 너무 네모네모한 느낌?” 세이가 고개를 끄덕였다. “맞아. 지금은 2D 데이터라서 단순해. 그런데 지형도 ‘높낮이’를 주면 훨씬 더 자연스러워져.”

리온이 빠르게 코드를 열었다. “우선 가장 기본적인 고도(높이) 값을 넣자.” 


// 고도(height) 데이터 배열
let heightMap = [
  [0,0,0,1,1,1,2,2,2,1,1,0,0,0,0,0],
  [0,0,1,2,3,3,3,3,2,2,1,1,0,0,0,0],
  [0,1,2,3,4,4,4,3,3,2,1,1,0,0,0,0],
  [1,2,3,4,5,5,4,3,2,2,1,1,0,0,0,0],
  [1,2,3,4,5,5,4,3,2,2,1,1,0,0,0,0],
  [0,1,2,3,4,4,3,2,2,1,1,0,0,0,0,0],
  [0,0,1,2,3,3,2,2,1,1,0,0,0,0,0,0],
  [0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

세이가 부연했다. “숫자가 높을수록 더 높은 지형이라는 뜻이야. 나중에는 밝기나 색을 바꿔서 산처럼 보이게 만들 수 있어.”

딕은 이미 신났다는 듯 말했다. “그럼 최고 높이는 뭐야? 10? 100? 999?” 리온이 웃었다. “게임이니까… 뭐든 가능하지!”

이어서 리온은 높이에 따라 색을 조금 더 진하게 칠하는 기능을 넣었다. 


function drawHeight() {
  for (let row = 0; row < MAP_ROWS; row++) {
    for (let col = 0; col < MAP_COLS; col++) {
      const h = heightMap[row][col];
      if (h > 0) {
        ctx.fillStyle = `rgba(0,0,0,${h * 0.05})`;
        ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
      }
    }
  }
}

세이는 감탄하며 말했다. “와… 그 작은 숫자들이 이렇게 지형의 느낌을 바꾸다니… 진짜 우리가 ‘세계’를 만들고 있는 기분이 든다.”

6. MAKE — 지도에 ‘바다의 흐름’도 넣어보자

딕이 말했다. “근데 바다는 너무 조용하지 않아? 바다니까… 조금 흔들리고, 움직이는 느낌 있어야지!”

리온이 바로 아이디어를 잡았다. “좋아. 간단하게 ‘물결 애니메이션’ 넣어보자.” 


// 물결 움직임 값
let waveOffset = 0;

function updateWave() {
  waveOffset += 0.03;
}

function drawSeaWave() {
  for (let row = 0; row < MAP_ROWS; row++) {
    for (let col = 0; col < MAP_COLS; col++) {
      if (worldMap[row][col] === 0) {
        const brightness = (Math.sin(waveOffset + col * 0.3) + 1) * 0.1;
        ctx.fillStyle = `rgba(255,255,255,${brightness})`;
        ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
      }
    }
  }
}

세이가 말했다. “이제 바다가 살아 움직이네. 폭풍을 지나온 만큼, 세계가 ‘생명’을 가져야 하니까.”

7. DREAM — 신대륙의 ‘첫 이름’을 적는 순간

타일맵도 색도, 최소한의 지형도 완성되자 세이는 태블릿에 새로운 화면을 열었다.

“이제 이 세계에 이름을 붙이자.”

딕이 손을 들었다. “몰라! 멋있는 거 많아서 못 고르겠어!” 리온은 잠시 생각하더니 조용히 말했다.

“신대륙… A-01.”

딕은 눈을 동그랗게 뜨며 말했다. “오! 숫자 들어가니까 완전 탐험대 느낌 난다!” 세이는 고개를 끄덕였다. “좋아. 앞으로 우리가 발견하는 모든 세계는 A-02, A-03, … 이런 식으로 확장하는 걸로 하자.”

리온은 화면 속 신대륙을 바라보며 말했다. “우리가 만든 첫 세계… 이게 바로 시작이야.”

8. Q&A / F&A

QA
Q. 타일맵은 꼭 숫자로 만들어야 하나요? A. 네. 숫자로 해야 데이터 관리가 쉽고, 나중에 이미지로 바꾸거나 이벤트를 추가할 때 훨씬 수월해요.
Q. 타일 크기는 얼마가 적당해요? A. 16px, 24px, 32px이 가장 많이 쓰여요. 우리는 눈에 잘 보이게 32px 사용.
Q. 고도(height) 값은 꼭 필요한가요? A. 필수는 아니지만, 넣으면 지형이 훨씬 자연스럽고 개성이 생겨요.
Q. 배경 애니메이션은 왜 넣나요? A. 세계를 ‘살아있는 곳’처럼 보이게 하기 위해서예요. 어른 플레이어도 이런 디테일을 좋아해요.
F&A. 숫자 말고 직접 드로잉으로 하면 안 되나요? A. 가능해요. 하지만 ‘세계 전체’를 만들 때는 숫자로 다루는 방식이 훨씬 효율적이에요.

9. 오늘의 정리

오늘 에피소드 08에서는, 폭풍을 넘어서 도착한 첫 번째 신대륙의 지도를 실제 코드로 그려냈다.

- 세계를 타일로 나누고
- 숫자로 지형을 구성하고
- 색을 칠해 땅과 숲을 만들고
- 고도로 높낮이를 주고
- 바다에 생명을 넣고
- 영역 이름까지 붙였다

이렇게 세계의 ‘틀’을 만들어 두면 다음 에피소드부터는 이 안에서 코러호가 착륙하고, 탐험하고, 마을을 만나고, 진짜 플레이어가 걸을 수 있는 지형을 만들 수 있다.

그리고 세 아이는 깨달았다. “세계는 그냥 그려지는 것이 아니라, 규칙과 숫자로 만들어진다.”

다음 편은 에피소드 09 (MAKE) — 착륙 지점 만들기 로 이어진다.

10. English Summary (500 chars)

In Episode 08 (MAKE), the kids design their first new continent after passing the storm. They build a tile-based world map, define terrain types, height values, animated sea waves, and even region names. Through numbers and rules, the world begins to gain shape and life. This marks the true start of the new land A-01, where future exploration and stories will unfold.

11. TAG

#에피소드08 #MAKE단계 #신대륙지도 #타일맵 #DIY게임 #코러호 #리온세이딕 #세계만들기 #Canvas게임 #엔딕프로젝트

Leave a Comment

Powered by Blogger.