Building in Public: Day 34 - 주말 동안 방치된 프로젝트를 게임으로 되살리기

오랜만입니다

마지막 글이 33일차였습니다. 그 사이 다섯 달 가까이 아무것도 올리지 못했습니다. 33일차 글에서 “다시 집중해보겠다”고 썼는데, 정작 그 다짐도 오래가지 못했습니다. 방문자 수가 늘지 않으니 손이 잘 가지 않았고, 그렇게 프로젝트는 조용히 서랍 속으로 들어갔습니다.

그러다 이번 주말, 다시 노트북을 열게 된 계기가 있었습니다.

다들 이번 주말엔 Fable을 썼다던데

Anthropic이 Fable 5를 다시 오픈하면서, 이번 주말 동안 Fable을 사용량 과금 없이 풀어줬습니다. 아마 전 세계 클로드 사용자 상당수가 이 기회를 노리고 뭔가를 만들고 있었을 겁니다. 저도 예외는 아니었는데, 다만 새 프로젝트를 시작하는 대신 이미 있는 걸 살리는 쪽을 택했습니다.

목표는 단순했습니다. 방치된 지 오래된 이 사이트를, 하루 만에 Reigns 같은 게임 느낌으로 통째로 갈아엎어 보자는 것이었습니다.

목표: 웹사이트가 아니라 게임처럼

원래 What If Classics는 고전 소설을 3~5분짜리 선택형 이야기로 바꾸고, 끝에 MBTI 결과 카드를 보여주는 사이트입니다. 이번 주말 Fable과 가장 먼저 만든 것도 바로 이 지점이었습니다. 버튼을 누르던 기존 선택 방식을, 카드를 좌우로 미는 스와이프 방식으로 통째로 바꾸는 일이었습니다. 여섯 개 스토리 전체를 좌/우 이지선다 구조로 다시 정리하고, 드래그하는 동안 카드가 실제로 기울어지는 물리 효과를 넣고, 엔딩에서는 카드가 뒤집히며 성격 카드가 드러나는 3D 연출까지 그날 안에 붙였습니다.

문제는 그 다음이었습니다. 스와이프 하나만 게임 같았을 뿐, 그 주위는 여전히 평범한 블로그 템플릿 기반의 정적(Static) 웹사이트였습니다.

사이트의 전반적인 Look & Feel을 바꾸기 위해, Fable과 함께 Reigns의 게임 디자인 자료들을 참고삼아 살펴봤습니다. 전체 화면을 덮는 어두운 무대, 카드 한 장, 그 뒤로 살짝 겹쳐 보이는 카드 더미, 상단의 자원 게이지. Reigns가 게임처럼 느껴지는 이유의 80%는 스와이프 조작이 아니라 이 ’틀’에 있다는 결론이 나왔습니다. 물론 Reigns는 실제로 유니티 기반의 모바일 게임이고 이 웹사이트는 Astro 프레임워크 기반이라는 결정적인 차이점이 있지만요.

그래서 계획을 두 단계로 나눴습니다. 먼저 이야기를 플레이하는 화면 자체를 완전한 게임 셸로 바꾸고, 그 다음엔 홈페이지와 서재, 블로그까지 사이트 전체를 그 게임의 ’메뉴 화면’으로 다시 그리기로 했습니다. 처음 계획은 “스토리 플레이는 플레이, 사이트는 사이트”로 선을 긋는 쪽이었는데, 첫 단계를 끝내고 실제로 넘겨보니 위화감이 컸습니다. Play를 누르면 어두운 게임으로 들어갔다가, 나가기 버튼을 누르면 갑자기 밝은 블로그로 튕겨 나오는 느낌이었습니다. 그래서 결정을 뒤집었습니다. 사이트 전체를 하나의 어두운 무대로 만들고, 밝은 크림색 카드만 유일한 ‘손에 든 카드’ 취급을 받도록 했습니다.

예전 홈페이지(위)는 배경만 어둡게 바꿨을 뿐, 내비게이션 바에 문구 위주 히어로, 스마트폰 목업 이미지가 붙은 그냥 랜딩 페이지 구조 그대로였습니다. 지금은 실제 스토리팩 표지 여섯 장이 카드처럼 부채꼴로 겹쳐 펼쳐지는 타이틀 화면이 됐습니다.

주요 마일스톤마다 커밋을 하나씩 남기면서 진행했고, 매 단계마다 승인을 받지 않아도 된다고 미리 말해뒀습니다. 대신 중요한 갈림길에서는 계속 보고를 받으며 방향을 잡아갔습니다.

실제로 플레이해보면서 고친 것들

계획대로 다 만든다고 끝이 아니었습니다. 진짜 문제는 실제로 플레이해보면서 드러났습니다.

엔딩 화면을 확인하다가 꽤 심각한 문제를 하나 발견했습니다. 휴대폰 화면에서는 해당 페이지가 PC 화면보다 훨씬 길었는데, 그 안에 스크롤이 아예 걸려 있지 않았습니다. 결과 공유 버튼도, 다운로드 버튼도, 전부 물리적으로 손이 닿지 않는 곳에 있었던 겁니다.

한 차례를 배포하고 나서는 실제 휴대폰으로 플레이해보고 Fable에게 피드백을 했습니다. 그 중 하나는 “카드 글이 너무 길어서 한 번 더 눌러야 다음 내용이 보인다”는 것이었습니다. Fable은 여섯 개의 스토리 팩에 포함된 노드 640개를 전부 열어 글자 수를 세고, 절반 가까이가 카드의 공간에 비해 너무 길다는 걸 확인한 뒤 그 자리에서 다듬었습니다. 데스크톱에서는 카드를 옆으로 밀다가 마우스를 화면 밖에서 놓으면 카드가 중간에 낀 채로 멈춰버리는 문제도 있었는데, 이것도 실제로 만져봐야만 걸리는 종류의 버그였습니다.

예전 선택 화면(위)은 사이트 헤더와 “← Back to Frankenstein” 링크, 경로 배지까지 그대로 남은, 그냥 흰 바탕의 게시글이었습니다. 지금은 카드 한 장과 그 아래 전체 문장이 그대로 적힌 선택지 두 개, “카드를 밀거나 탭하거나, 방향키를 누르세요”라는 안내 한 줄만 남았습니다.

Fable, 좋긴 한데 계속 쓰게 될까?

이번 ‘Fable 재오픈 기념 행사’ 덕분에 저도 개인적으로 꽤 의미있는 결과를 얻을 수 있었습니다. Fable은 위에 적은 UI/UX 리뉴얼 외에도 기존에 구 버전(v5)을 쓰던 Astro 프레임워크를 v6, v7의 2단계 마이그레이션 과정을 통해 깔끔하게 최신 버전으로 업데이트해 주었습니다. 주말인데 노트북만 붙들고 뭐하냐는 아내님의 구박(?)이 좀 있었지만요.

실제로는 주말 내내 붙들고 있지도 못했습니다. 제가 쓰는 요금제가 Claude Pro이기 때문에 5시간 사용량 제한이 Fable을 돌리니 30~40분 정도면 소진되어 버립니다. 5시간 사이클을 최대한 활용해서 꽤나 많은 진도를 나가긴 했지만, 이벤트가 끝나면 원래 주력 모델이었던 Sonnet으로 돌아갈 수 밖에 없을 듯 합니다. 아직 수익 모델도 없는 취미 프로젝트를 위해 사용량 비례 요금을 지불할 수는 없으니까요.

마치며

주말 동안 새로 생성한 스토리 팩은 하나도 없습니다. 기존 여섯 개 스토리팩(지킬 박사와 하이드, 프랑켄슈타인, 오만과 편견, 위대한 개츠비, 아이, 로봇, 오즈의 마법사)의 내용은 그대로 두고, 그걸 보여주는 방식만 통째로 바꿨습니다. 그런데도 체감은 완전히 달랐습니다. 스토리와 삽화가 있는 평범한 웹 페이지들을 클릭해서 넘기는 느낌에서, 좀 더 제대로 만들어진 웹 게임을 플레이하는 느낌으로 바뀐 겁니다.

스토리 목록 페이지에는 뒷면만 보이는 카드 두 장을 슬쩍 끼워뒀습니다. “다음 덱 준비 중”이라는 문구와 함께입니다. 다음 순서로 그 자리를 신규 스토리 팩으로 채울지, 아직도 많이 부족한 전반적인 게임 플레이 경험을 개선할지는 한 숨 돌리고 생각해 보겠습니다.