부엉이 게임 파일럿 ( 2 ) - 초대장 제작

부엉이 게임 파일럿 기록 처음부터 보기 : https://helloworld.ai.kr/22 

부엉이 게임 파일럿 ( 1 ) - 회고

 

초대장 페이지 제작의 소요 시간 : 4시간

Next.js 기반 초대장 페이지 제작 및 Vercel에 배포
Framer Motion으로 기본 애니메이션 구현
Veo3 및 nanobanana 활용해 아트워크 / 인트로 영상 제작
참가자들에게 초대장 전송 완료

게임 전에 플레이어들에게 보낼 초대장 페이지부터 만들었었다.
이 때 처음으로 이미지/비디오 생성 AI도 활용해봤다.

---

아키텍처

Next.js 기반 단일 페이지 웹
Vercel 배포
Framer Motion으로 간단한 애니메이션 구현

Next.js란 무엇인가

• 백엔드 + 프론트엔드 + 빌드 시스템을 하나로 묶은 React 기반 풀스택 프레임워크
• 요청 시 잠깐 실행되는 서버리스 Node.js 환경
• 그래서 Vercel에 배포 가능
• 무거운 작업 혹은 장시간 Socket 연결에는 적합하지 않다
• SSR로도, CSR로도 활용할 수 있다

초대장 페이지는 구조가 단순하니까 Next.js + Vercel 조합이 딱 맞았다.

---

구현 포인트

1) “단일 페이지 + 애니메이션”으로 끝내기

초대장 페이지는 기능이 많을 필요가 없다.

• 정보 전달이 명확해야 하고
• 분위기만 조금 잡아주면 된다

그래서 단일 페이지로 구성하고,
Framer Motion으로 기본적인 등장/전환 애니메이션만 얹었다.

---

2) 생성형 AI 활용

• Veo3, nanobanana로 아트워크/인트로 영상 제작
• 결과물을 페이지에 자연스럽게 얹기

 

인트로 이미지 영상의 한 장면

 

초대장 문구

---

미적 감각에 통탄

당연한 이야기지만, 이런 작업은 최종 결과물 이미지가 머릿속에 선명하게 있어야 빠르게 만들 수 있다. 그 부분이 어렵다보니 기획, 개발, 디자인 단계가 분리되지 않고 섞여서 진행이 잘 되지 않았다.

 직접 아트워크나 디자인을 만들어낼 자신은 없지만 AI 도구를 충분히 활용해서 머릿속 이미지를 구현해내는 감각은 길러보고 싶은 마음이다.

---

 성공적으로 초대장 페이지를 만들어서 보낼 수 있었다.
 다음 글 보러가기 : https://helloworld.ai.kr/24

부엉이 게임 파일럿 ( 3 ) - Next.js, 폴링 방식