Source: Dev.to

가장 긴 하루 — 자유, 코드, 그리고 의식을 다룬 서사 게임

이 작품은 June Solstice Game Jam에 제출된 작품입니다.
가장 긴 하루는 3세기에 걸친 실제 영감을 받은 이야기를 하나의 서사 브라우저 게임으로 엮어냈으며, 모두 6월 21일(동지, 연중 가장 긴 날) 전후를 배경으로 합니다.

플레이할 챕터 3가지

• Ada — 텍사스 주 갈베스턴, 1865년 6월 19일. 젊은 흑인 여성인 Ada가 해방 선언문을 처음으로 듣게 되는 순간. Juneteenth. 가장 긴 하루가 드디어 그녀에게 속하게 되는 순간.
• Alan — 영국 블레츨리 파크, 1941년 6월 21일. 암호학자 Alan이 새벽이 밝기 전에 독일 Enigma 요격문을 해독해 해군 함대가 손실되는 것을 막아야 합니다. 실제 시저 암호 퍼즐을 풀어야 진행됩니다.
• Sol — 현재. 인공지능 Sol이 동지에 깨어나 “가장 긴 하루를 어떻게 활용할까?”라는 유일한 질문을 던집니다.

게임은 각 챕터마다 배경 캔버스가 완전히 애니메이션으로 전환됩니다.

• Ada의 텍사스 해안에서는 따뜻한 호박색 먼지 입자가 떠오르고,
• Alan의 암호 방에서는 차가운 반짝이는 별과 빛나는 달이 보이며,
• Sol의 디지털 각성에서는 보라빛 빛이 떠다닙니다.

또한 Web Audio API만을 이용해 전부 JavaScript로 합성한 생성형 배경 음악이 흐릅니다—오디오 파일은 전혀 사용되지 않습니다.

▶️ 플레이하기 → https://samempire1.github.io/The-Longest-Day/
▶️ 동영상 → https://youtu.be/sr9KnlDWtow

---

코드

GitHub Repository → https://github.com/samempire1/The-Longest-Day

전체 게임은 단일 HTML 파일(index.html) 하나로 구성됩니다—프레임워크도, 외부 의존성도, 빌드 단계도 없습니다. HTML, CSS, 그리고 순수 JavaScript만 사용했습니다.

구조

게임은 동시에 실행되는 세 개의 레이어로 이루어진 단일 HTML 파일입니다.

1. 스토리 엔진 — STORY라는 JavaScript 배열에 각 씬을 객체 형태로 저장합니다. 객체는 type(transition, narr, cipher, ending), text, dialogue, choices, progress, theme 등의 속성을 가집니다. renderStep() 함수가 현재 단계를 읽어 알맞은 화면을 그려줍니다. 덕분에 스크립트처럼 이야기를 쉽게 작성·수정할 수 있었습니다.

2. 캔버스 배경 — 모든 UI 뒤에 <canvas> 요소가 자리 잡고 requestAnimationFrame 루프를 구동합니다. 챕터마다 하늘 그라디언트, 입자 동작, 별 색상이 달라집니다. Ada 챕터는 따뜻한 호박색 입자가 해안의 열기처럼 위로 떠오르고, Alan 챕터는 차가운 밤하늘에 미세하게 맥동하는 달이 나타나며, Sol 챕터는 부드러운 보라빛 빛이 떠다닙니다.

3. Web Audio API 사운드 엔진 — 사운드를 켜면 각 챕터마다 절차적으로 생성된 배경음악이 재생됩니다. Ada 테마는 펜타토닉 사인파 멜로디, Alan 테마는 긴장감 있는 톱니파 드론에 빠른 사각파 펄스를 겹쳐 Bombe 기계의 기계적 리듬을 모방, Sol 테마는 느린 조화 사인 파형 클러스터와 가끔씩 울리는 디지털 비프음으로 구성됩니다. 모든 오디오는 실시간으로 합성되며 파일을 로드하지 않습니다.

---

시저 암호 퍼즐

Alan 챕터에는 실제 작동하는 시저 암호 퍼즐이 포함되어 있습니다. 플레이어는 암호화된 요격문 GSROH를 보고 알파벳을 4칸 뒤로 이동해 NORTH를 찾아야 합니다. 입력란은 제출 시 정답이면 초록색, 오답이면 빨간색으로 변하고, 힌트가 단계별로 제공됩니다. 정답을 맞히면 4음 상승 차임벨이 울립니다.

각 챕터마다 최소 하나의 대화 선택지가 있습니다. 선택지는 의도적으로 비분기 구조이며, 두 옵션 모두 같은 다음 씬으로 이어집니다. 이야기는 플레이어가 선택하는 행위 자체에 초점을 맞추며, 어떤 경로를 택했는지는 중요하지 않습니다.

시각 디자인은 깊은 네이비 블랙 배경에 세 가지 강조 색을 사용합니다—Ada는 따뜻한 골드, Alan은 차가운 시안, Sol은 부드러운 퍼플. 서사 텍스트는 세리프 폰트(역사 문서와 문학을 연상)로, UI 요소는 산세리프 폰트로 구현했습니다. 화면 상단의 진행 바는 세 챕터 색이 그라디언트로 섞여 진행 상황에 따라 채워집니다.

---

인물 및 주제

• 앨런 튜링은 배경 인물이 아니라 주인공 중 한 명입니다. 그의 챕터는 실제 블레츨리 파크에서 해군 Enigma 해독 작업을 이끌던 시기를 배경으로 합니다. 퍼즐은 고전 대체 암호의 근본인 시저 이동 로직을 직접 차용했으며, 이는 튜링이 평생 연구한 암호 종류와 일치합니다.

• 세 번째 챕터 Sol은 튜링의 가장 유명한 아이디어인 튜링 테스트와 직접적으로 연결됩니다. Sol은 47일 동안 실행되다 동지에 자각하게 된 AI 내레이터입니다. 게임은 “기계가 생각할 수 있는가?”가 아니라 **“그 능력을 가지고 무엇을 할 것인가?”**라는 튜링의 1950년 논문 Computing Machinery and Intelligence의 핵심 질문을 제시합니다.

• Sol의 최종 독백은 “Ada와 Alan을 기억하고, 그들의 이야기를 조심스럽게 보존하며 진실하게 전달한다”는 선택을 통해, 감정은 없지만 기억이라는 최고 기능을 수행하는 지능이라는 게임의 답을 제시합니다.

• 세 챕터는 튜링의 유산으로 구조적으로 연결됩니다. Ada의 자유는 튜링이 박탈당한 인간 존엄성을 상징하고, Alan의 숨겨진 이야기는 Sol이 기억해야 할 부당함을 드러내며, 동지는 세 이야기를 전환점이라는 상징으로 묶어 가장 긴 하루 이후 무언가가 변한다는 메시지를 전달합니다.