등대지기: 마지막 항로
짧고 긴 빛 신호로 배를 인도하는 등대 게임 제작기. 배가 겹치는 항로 배정과 찌그러진 코드 패널, 입력 전후의 행 정렬을 고친 과정을 담았습니다.
AI Tools Lab · 소개 글 작성 · 수정

버튼 하나에 읽기와 리듬을 넣었다
Keeper of the Last Light에서는 등대 불빛으로 배를 안전 항로에 인도합니다. 저는 화면 하단 램프의 짧은 탭과 긴 누름을 서로 다른 펄스로 처리했습니다. 260ms 미만은 단점, 그 이상은 장점입니다. 배의 요청 기호를 읽고 필요한 코드를 손끝의 리듬으로 바꾸는 게임입니다.
코드는 3~4개 펄스로 구성하고 마지막 펄스를 넣으면 판정합니다. 잘못 입력하면 배의 인내심이 줄고, 정확하면 안전 항로로 넘어갑니다. 처음에는 기다리는 배가 적고 뒤로 갈수록 여러 배의 요청이 함께 보입니다. 화면에 쓰인 기호, 현재 판정 대상과 내가 입력한 펄스를 연결하는 것이 조작의 중심입니다.
이 구조에서는 버튼을 잘 눌렀다는 반응만으로 부족합니다. 어느 배에 답하는지, 필요한 코드가 무엇인지, 지금까지 입력한 내용이 무엇인지를 한 화면에서 읽을 수 있어야 합니다. 제가 2026년 8월에 다듬은 문제도 이 세 정보를 놓는 방식에서 시작됐습니다.
순번으로 항로를 고르면 같은 자리가 다시 선택된다
처음 항로 배정은 등장 순번의 나머지를 사용했습니다. 이전 배가 아직 기다리고 있어도 다음 배가 같은 항로를 받을 수 있어 두 배가 한 자리에 겹쳤습니다. 항로의 개수만 정하는 것과 현재 비어 있는 항로를 찾는 것은 다른 문제였습니다.
저는 생성할 때 점유 여부를 확인하고 빈 항로를 배정하도록 바꿨습니다. 빈 자리가 없다면 새 배를 만들지 않습니다. 항로도 수평선 아래의 세 위치로 정리했습니다. 배경의 수평선보다 위에 배가 놓이면 바다를 이동하는 대상이 하늘에 떠 있는 것처럼 보입니다.
선박의 인내심 게이지는 그림 파일 전체의 위쪽에 붙이지 않았습니다. 배마다 투명 여백이 달라 같은 방식으로 놓으면 어떤 배의 게이지만 멀리 떠 있었습니다. 각 그림의 실제 선체 상단을 기준으로 게이지를 붙였습니다. 대상의 위치와 그 대상에 딸린 정보의 위치를 함께 맞춘 수정입니다.
코드 패널의 세 행을 두 행으로 정리했다
코드 패널에는 요청, 정답 코드와 입력 버퍼가 들어갑니다. 처음에는 세 행이 실제 안쪽 필드보다 넓게 배치돼 글자가 테두리에 걸리고 서로 겹쳤습니다. 저는 패널 전체 이미지 크기 대신 글자가 들어갈 수 있는 안쪽 영역을 기준으로 배치를 다시 정했습니다.
요청과 코드는 윗줄에 나란히 두고 입력 버퍼는 아랫줄 중앙에 뒀습니다. 읽는 순서는 무엇을 원하는지, 어떤 리듬인지, 내가 무엇을 입력했는지로 이어집니다. 패널을 무조건 키우는 대신 각 정보의 역할과 읽는 순서를 먼저 정리했습니다.
그다음 캡처에도 실제 입력 중인 상태를 넣었습니다. 임의의 펄스를 주입하면 오답 판정으로 버퍼가 지워져 ‘입력 중’ 화면에 아무것도 남지 않았습니다. 판정 대상의 정답 코드 앞부분을 입력하고, 스테이지의 동시 대기 상한을 지키는 배를 등장시켰습니다. 실제로 도달할 수 있는 혼잡한 상태에서 패널을 봐야 했습니다.
원본은 반듯했지만 표시 비율이 달랐다
패널 외곽이 이상해 보인다는 피드백 뒤에는 원본 이미지와 표시 크기를 따로 확인했습니다. 원본 비율은 1024×512로 2:1인데 화면에서는 1062×234로 표시돼 약 4.54:1이 됐습니다. 가로와 세로를 다르게 줄이면서 모서리와 테두리가 변형된 것입니다.
저는 패널을 NineSlice로 바꿨습니다. 모서리와 테두리 두께를 유지하고 안쪽 영역이 필요한 크기를 채우게 했습니다. 이미지의 안쪽 필드가 시작하는 위치를 사용해 조각 경계를 정하고, 표시되는 테두리 크기도 맞췄습니다. 새로운 그림을 만드는 것보다 화면이 기존 그림을 어떻게 늘리고 있는지 확인하는 일이 먼저였습니다.
텍스트가 위로 치우친 문제는 또 다른 원인이었습니다. 입력 전에는 버퍼가 비어 있는데도 그 행의 자리를 계속 남겨 뒀습니다. 저는 보이는 행 수에 따라 위치를 계산하도록 바꿨습니다. 입력이 없으면 코드행을 중앙에 두고, 입력이 시작되면 두 행을 중심 위아래에 놓습니다. 빈 상태와 입력 중 상태가 같은 배치일 필요는 없었습니다.
신호의 뜻이 화면에서도 같은 대상으로 이어지게
선박 게이지는 투명 여백을 뺀 선체 위치에, 패널 글자는 테두리를 뺀 안쪽 필드에 맞춰야 했습니다. 그림 파일 안에 들어간다는 확인만으로는 충분하지 않았습니다. 실제 내용이 어디에 놓이는지 봐야 했습니다.
항로도 같은 원칙으로 봤습니다. 슬롯 번호를 계산할 수 있어도 살아 있는 배가 그 자리를 쓰고 있다면 새 배를 넣지 않아야 합니다. 코드 입력 역시 빈 버퍼와 두 펄스가 있는 버퍼를 같은 상태로 다루지 않습니다. 현재 점유와 현재 내용이 배치를 결정하게 한 것입니다.
다음 신호 게임에서도 요청 대상, 코드와 입력한 내용을 먼저 연결하려고 합니다. 배가 세 척일 때 정보가 서로 넘어가지 않는지, 입력이 없을 때와 있을 때 패널이 읽히는지, 긴 누름을 끝낸 순간 누구에게 답이 적용되는지까지 봅니다. 버튼 하나로 구성한 게임일수록 그 버튼이 답하는 대상과 화면의 정보가 명확해야 했습니다.
개발 자료
게임 프로젝트
빛 신호를 읽고 입력하는 흐름과 선박 항로 점유, 코드 패널의 비율과 정렬을 다듬은 경험입니다.
GitHub 게임 저장소 · coreline-ai ↗ · 문의·정정 요청