내 삶의 첫 바이브코딩을 프로포즈에 바치다니...;;
1. 서프라이즈 퀘스트로 그의 마음을 조준!
프로포즈날 아주 확실한 감동을 줄 수 있는 것은 무엇일까? 아마도 손편지가 아닐까? 한땀 한땀 본인의 진심을 눌러 담아 놓고, 우리만의 스토리를 담을 수 있고... 특히 요즘 같이 AI 생성이 판치는 시대엔 이런 노력이 더 큰 감동으로 다가오기도 한다. 그러나... 내가 프로포즈할 상대는 인생의 1/4을 아제로스에서 보낸 와우저. 그에게 아날로그 감성보다 더 확실한 타격감을 주고 싶었고... 그의 심장을 움직일 다른 방식으로 생각을 해봤다.
퀘스트 = 프로포즈 수락.
이 퀘스트가 있는 던전 = 호텔
퀘스트를 위한 레이드 모집 = 이 페이지
(참고로 레이드는 공격대라는 뜻인데, 와우에서 나온 말이다)
종이 편지 대신, 그를 위한 레이드 모집 전용 웹사이트를 개발하기로 했다. 이 사이트의 목적은 그를 프러포즈 장소인 '반얀트리'로 이끄는 선행 퀘스트 역할이라고 볼 수 있다. 이 링크를 열고 퀘스트를 수락해야만, 비로소 찐 이벤트가 있는 던전(호텔)으로 올 수 있는 구조다.
2. Team Setup: 기획은 내가, 코딩은 AI가
코딩을 업으로 하진 않지만, IT 회사에서 일하며 어깨너머로 배운 진짜. 진짜. 진짜. 최소한의 지식은 있었다. 하지만 처음부터 끝까지 웹페이지를 구현하는 건 다른 문제였다. 그래서 내 든든한 사수, Claude와 ChatGPT를 개발팀으로 영입했다.
[개발 로그]
Project: Raid Invite (인생 레이드 초대)
Role: PM (나), Dev (Claude/GPT)
시작은 막막했다. 메인이 되는 index.html을 만드는 것부터가 난관이었다. 프롬프트를 입력하고 코드를 복사해서 붙여넣기를 수십 번. 검은 화면에 내가 의도한 와우 때깔이 묻은 창이 처음 렌더링 되어 떴을 때, 그 짜릿함이란...
화려한 기능은 없지만 코드가 배포되고 내가 상상했던 UI가 모니터에 구현된 순간 묘한 감동이 밀려왔다. 개발자들이 보면 우습다고 하겠지만, 나에겐 기적이었다.
(지나고보니 이게 내 첫 바이브코딩이었다;;; )
3. 디테일을 위한 노력: AI와 함께 '워딩' 깎기
뼈대(코드)를 세웠으니, 이제 살(콘텐츠)을 붙일 차례. 여기서부터는 지난번 '와우 1시간 플레이'의 경험이 빛을 발했다. 와우 특유의 비장하면서도 웅장한 톤을 쓰고 싶었다. GPT는 이미 와우의 퀘스트 지문 스타일을 잘 알고 있었기에, 하고 싶은 말을 전해주어 본문을 만들었다.
메인 카피: "용사여, 새로운 레이드에 참여하겠는가?"
파티원 모집 공고: 성기사(남편), 바바리안(나) 모집 중.
퀘스트 보상: 평생의 동반자 획득.
그리고 가장 그럴싸한 이미지가 나올 때까지 달리를 돌리고 또 돌렸다. 이때는 나노바나나가 죽을 못 쓸 때라 달리랑 같이 열심히 싸웠었다. 그렇게 완성된 첫 페이지 ㅋㅋ
저기에 '여정을 시작합니다'를 누르면 준비물/위치/히스토리/퀘스트방법이 뜨는 인터랙티브 페이지로 이동한다.
한 줄 한 줄 문구를 다듬는데, 이상하게 쓰면서 내가 울컥했다. 가상의 게임 용어지만 그 안에 담긴 의미는 우리의 진실한 약속이었으니까. AI와 함께 밤새 갈고닦은 그 텍스트들이 내 진심을 대변해 주고 있었고... 혼자 또 난리부르스~
결과물 구경하기: https://richkingsyd.github.io/raid-invite/ (실제 프로포즈에 사용된 페이지!)
4. 영상 기획: 왜 하필 '리치왕'이었나?
웹사이트 퀘스트를 받고 호텔에 도착하면, 여느 프로포즈처럼 스크린에서 영상이 재생되도록 세팅하려고 했다. 거기에 내가 나오는 영상편지를 틀어둘 수도 있는데... 고민 고민을 하다 <월드 오브 워크래프트: 리치왕의 분노> 시네마틱 트레일러로 결정... 왜냐고..? 사실 나는 와우를 찍먹했을 뿐.. 스토리를 깊게까지는 모른다. 그래서 GPT에게 물어봤다.
Q. "와우 플레이어들에게 보여주면 가장 감동받고 눈물 흘리는 장면이 뭐야?"
A. "단연코 '리치왕의 분노'입니다. 아버지인 국왕의 내레이션이 압권이죠."
그치그치. 게임에서 또 그런 인트로, 시네마틱 트레일러를 공을 들여서 만들면 거기에서 오는 감동이 있지! 저 말을 듣고 유튜브에서 '리치왕의 분노'를 찾아보니 조회수가 2억 6천만 뷰ㅋㅋㅋㅋ 어이쿠 와우저분들..
나는 그 어마어마한 조회수를 보고 이건 먹히겠다! 싶었다... 그렇게 교차 검증을 끝내고... 그 영상을 베이스로 파이널 컷을 사용하여 패러디 영상을 만들었다. "아들아, 네가 태어나던 날..." 로 시작하는 그 장엄한 내레이션을 그의 태어난(?) 이야기로 바꾸니, 내가 봐도 가슴이 웅장해졌다.
(혹시 몰라 눈물 쏙 빼는 감성적인 영상도 하나 더 서브로 준비했다.;;)
5. 오프라인 세팅: 미니 배너와 친구 찬스
온라인(웹/영상) 준비는 끝났고, 이제 오프라인(호텔 룸)을 꾸밀 차례. 소재가 필요하다!! 역시 좋은 건 와우 캐릭터... 와우 캐릭터하면 뭔가 바로 떠오르는 오크...
GPT로 레퍼런스 이미지를 가져와 생성하고, 포토샵으로 리터칭을 하고... X배너 용으로 한 4개 만들고..
저 녀석에 포토샵으로 쓱싹쓱싹 리터칭하면 아래의 이미지처럼 된다는 말씀. 폰트도 정확히 와우 폰트를 찾고 찾아서 적용함. 2002.ttf랍니다!
비즈하우스에서 미니 X배너 4개와 현수막을 주문했다. 그런 현수막과, 배너, 어마어마한 택배가 왔다.
호텔로 택배를 보내기에는 뭔가 불안해서 회사 동료에게 SOS를 쳤다. 너무나 착한 그의 도움 덕분에 무사히 반입 성공! 그리고 마지막 친구의 역할은 호텔 1층에서 출정 준비를 완료한(?) 그를 만나 키를 주는 것ㅋㅋㅋ
호드=와우 내의 세계관 같은 거고 그가 심슨 탈을 갖고 있어서ㅋㅋㅋ 호드 심슨이라는 괴랄한 이름을 붙였다..
(하...정말 고맙다 나도 그의 프로포즈 때 도우리라.)
페이지를 겨우 완성하고 리치왕 영상과 배너도 다 만들었다! 바이브 코딩, 영상 편집, 실물 디자인 발주까지. 혼자 북 치고 장구 치며 준비한 이 프로젝트의 끝이 보인다.ㅠㅠ
이제 남은 건, 이 퀘스트를 수행하러 올 플레이어(남편)뿐. 과연 그는 내가 설계한 이 던전에서 어떤 반응을 보였을까?