◀ 이전 회차: [게임 기획] 프로토타입 발표에 BGM이 없으면 분위기가 안 사는데, AI로 30초 만에 배경음악 만들기
1. 사건의 발단 (Case Study)
🎙️ 미니 인터뷰: 콘텐츠는 다 있는데, VC한테 보여줄 게임 소개 페이지가 없다고요?
Q. VC 미팅이라면, 어떤 걸 보여줘야 하나요?
대표님이 VC 미팅을 잡으셨는데, 미팅 전에 미리 링크로 보내려고 '우리 게임이 이런 게임입니다'를 한눈에 보여주는 소개 페이지가 필요하대요. 링크 하나 클릭하면 세계관, 스크린샷, 핵심 특징이 쫙 보이는 거요. 스팀 상점 페이지 같은 느낌인데, 아직 출시 전이니까 투자 유치용 소개 페이지인 거죠.
Q. PPT로 만들면 안 되나요?
대표님이 '링크로 바로 보여줄 수 있는 형태'를 원하세요. PPT는 파일을 보내야 하잖아요. 링크 하나로 공유할 수 있는 웹 페이지면 VC가 내부에서 돌려볼 수도 있고, 미팅 전에 미리 확인도 할 수 있으니까요. 근데 저는 게임 기획만 했지 웹 페이지 레이아웃은 한 번도 잡아본 적이 없어요.
Q. Figma 같은 걸로 직접 만들어보려고는 안 했어요?
유튜브에서 Figma 입문 강의를 켰는데 10시간짜리더라고요. 나중에야 배워두면 좋겠지만, 미팅이 다음 주인데 지금부터 도구 학습을 시작할 수는 없잖아요. 컴포넌트니 오토레이아웃이니 용어부터 막히고요. 히어로 섹션이 뭔지, CTA 버튼을 어디에 놓는 건지부터 감이 안 잡혀요.
Q. 지금 상황을 정리하면?
콘텐츠는 다 있어요. 컨셉아트도 있고, 스크린샷도 찍을 수 있고, 세계관 설명도 기획서에 다 써놨고요. 근데 이걸 '웹 페이지 한 장'으로 예쁘게 정리할 수가 없어요. 러프한 목업이라도 빠르게 만들어서 디자이너한테 '이런 구성으로 해주세요'라고 전달하고 싶은데, 웹 레이아웃 자체를 어떻게 잡아야 하는지 모르겠거든요.
2. 문제 해결을 위한 레시피 (Solution)
🩺 마스터의 진단
사례자의 경우, 프로토타입 콘텐츠(컨셉아트, 스크린샷, 세계관 설명)는 모두 있었지만 이걸 '한 페이지'로 보여주는 웹 레이아웃을 잡는 게 병목이었습니다. 게임 기획은 할 수 있어도 웹 페이지 구성은 해본 적이 없으니까요.
이번 솔루션은 텍스트로 섹션 구성을 설명하면 AI가 웹 페이지 레이아웃을 생성해주는 것에 초점을 맞췄습니다.
[Step 1] 소개 페이지 구성 요소 정리하기
게임 소개 페이지에 들어갈 내용을 섹션별로 정리합니다. 히어로(메인 비주얼+타이틀), 세계관 소개, 핵심 특징 3~4개, 스크린샷 갤러리, 개발팀 소개 등을 순서대로 나열합니다. 스팀 상점 페이지나 인디 게임 소개 사이트를 참고하면 구성이 잡힙니다. 어떤 섹션이 필요한지 감이 안 잡히면 ChatGPT에 '게임 소개 랜딩 페이지에 들어갈 섹션을 추천해줘'라고 요청해도 좋습니다.
[Step 2] Google Stitch에서 랜딩 페이지 생성하기
Google Stitch(stitch.withgoogle.com)에 구글 계정으로 로그인합니다. 입력창에 아래 프롬프트를 붙여넣고 Generate designs 버튼을 누릅니다. Stitch가 텍스트를 해석해서 웹 페이지 레이아웃을 자동으로 생성합니다.
Design a game landing page for a dark fantasy RPG called 'The Fallen Cathedral'. The page should have:
- Hero section: full-width background image area with game title and tagline 'Explore the ruins. Uncover the truth.'
- 'About the Game' section: world setting description with a concept art image placeholder
- 'Key Features' section: 3 feature cards (Quest System, NPC Dialogue, Original Soundtrack) with icons
- 'Screenshots' section: horizontal scrollable gallery with 4 image placeholders
- Footer with studio name and contact
Dark color scheme with blue-purple accents. Modern, clean web design.[Step 3] 후속 프롬프트로 섹션별 디테일 조정하기
첫 결과에서 수정하고 싶은 부분이 있으면, 후속 프롬프트로 바로 조정할 수 있습니다. 예를 들어:
히어로 변경 → '히어로 섹션에 전체 화면 배경 이미지를 넣어줘'
섹션 추가 → '스크린샷 갤러리 섹션을 특징 아래에 추가해줘'
색상 변경 → '전체 톤을 어두운 판타지 느낌으로 바꿔줘'
레이아웃 변경 → '특징 섹션을 3열 카드 배치로 바꿔줘'
2~3번 조정하면 디자이너에게 전달할 수 있는 수준의 목업이 됩니다.
[Step 4] Figma에 붙여넣어서 디자이너에게 전달하기
완성된 Stitch 디자인을 복사해서 Figma에 붙여넣습니다. 레이어 이름, 컴포넌트 그룹, Auto Layout이 보존되기 때문에 디자이너가 플랫 이미지가 아니라 편집 가능한 상태로 받을 수 있습니다. 디자이너는 여기서 실제 컨셉아트와 스크린샷을 교체하고 디테일을 다듬으면 됩니다.
3. 결과 (Result)
핵심 수치: 프롬프트 입력 1회로 약 1분 만에 랜딩 페이지 레이아웃 생성, 후속 수정 포함 30분 이내
주요 특징:
1. 기획서에 적은 내용을 섹션별로 프롬프트에 넣으면 웹 페이지 레이아웃이 자동으로 나옴 — 웹 디자인 경험 불필요
2. 후속 프롬프트로 섹션 추가, 레이아웃 변경, 색상 조정을 말로 수정 가능
3. 완성된 목업을 Figma에 복사 붙여넣기 — 레이어 보 존 상태로 디자이너가 바로 이어받아 디테일 작업
시사점: VC에게 게임의 첫인상은 '미팅 전에 받은 링크 한 장'으로 결정되며, AI 목업으로 콘텐츠 정리 → 디자이너 핸드오프까지의 시간을 대폭 줄일 수 있다
4. 리뷰 (Review)
📊 AI 활용 비포 & 애프터 비교
단순히 요청했을 때와, 우리의 [마스터 프롬프트]를 사용했을 때의 결과물 차이를 확인해 보세요.
💡 Master's Secret: 결정적 차이를 만드는 프롬프트의 원리
💡 Master's TIP!
💡 Stitch는 섹션별로 어떤 내용이 들어가는지 구체적으로 나열하면 정확도가 올라갑니다. '게임 소개 페이지 만들어줘'보다 '히어로, 세계관, 특징 3열 카드, 스크린샷 갤러리, 푸터'처럼 섹션 구성을 짚어주면 기획자가 의도한 흐름에 가깝게 나옵니다. 이미지는 플레이스홀더로 나오고, 나중에 실제 컨셉아트나 스크린샷으로 교체하면 됩니다.
💡 Stitch의 강점은 후속 프롬프트로 바로 수정이 가능하다는 점입니다. '히어로 배경을 전체 화면으로', '특징 카드를 4개로 늘려줘' 같은 요청을 말로 하면 되니까, 웹 디자인을 몰라도 레이아웃을 조정할 수 있습니다. Figma를 배우지 않아도 말로 수정하면 되는 거예요.
💡 Stitch에서 디자인을 복사해서 Figma에 붙여넣으면 레이어 이름, 컴포넌트 그룹, Auto Layout이 그대로 보존됩니다. 디자이너가 스크린샷을 보고 처음부터 다시 만드는 게 아니라, 편집 가능한 상태에서 바로 이어 작업할 수 있어요. 기획자의 러프 목업 → 디자이너의 정밀 디자인으로 이어지는 핸드오프가 매끄러워집니다.
💡 Stitch의 또 다른 강점은 분위기에 맞는 이미지도 함께 생성해준다는 점입니다. 히어로 배경, 섹션 비주얼 등을 세계관에 맞게 만들어주기 때문에, 플레이스홀더 이미지를 따로 찾을 필요 없이 목 업 자체가 분위기를 전달합니다.
💬 한도윤 기획자의 한마디
전에는 콘텐츠가 다 있는데도 '이걸 한 페이지에 어떻게 정리하지?' 하면서 막막했거든요. 웹 레이아웃을 잡아본 적이 없으니까요. 근데 Stitch에 섹션 구성을 넣었더니 1분 만에 그럴듯한 랜딩 페이지가 나왔어요. 디자이너한테 보여줬더니 '아 이 구성으로 가면 되겠다, 여기에 실제 이미지만 넣으면 되네요' 하고 바로 작업 들어가더라고요.
▶ SERIES FINALE
🎙️ 마무리 인터뷰: 한도윤씨와의 시리즈를 돌아보며
Q. 이 시리즈를 통해 가장 크게 달라진 점이 있다면?
제일 크게 달라진 건, 이제 뭔가 필요하면 '어디서 구하지?' 대신 'AI로 만들어볼까?'가 먼저 떠오른다는 거예요. 퀘스트 구조부터 대사, 컨셉아트, BGM, 소개 페이지까지 — 예전엔 각각 다른 팀한테 부탁하거나 외주를 맡겼을 일들을 제가 직접 초안을 만들어낼 수 있게 됐거든요. 물론 최종 퀄리티는 전문가 손을 거쳐야 하지만, '이런 느낌이에요'를 보여줄 수 있는 것과 없는 것의 차이가 엄청나요.
Q. AI를 활용하면서 가장 좋았던 순간은 언제였나요?
BGM 만들 때가 제일 인상 깊었어요. '음악을 AI로?' 싶었는데, 키워드 몇 개 넣었더니 진짜 우리 성당 폐허 느낌이 나오는 거예요. 무료 사이트에서 한 시간 넘게 스크롤하면서 타협하던 게 10분 만에 해결됐을 때 '아, 이게 AI를 제대로 쓰는 거구나' 싶었어요.
Q. 아직 AI를 안 써본 동료에게 한마디 해주신다면?
처음엔 저도 '프롬프트 잘 써야 한다는데 어렵겠다' 생각했거든요. 근데 써보니까 완벽한 프롬프트가 아니어도 일단 결과가 나와요. 거기서 키워드 하나 바꾸고, 한 줄 더 넣고 하면 금방 원하는 방향으로 가더라고요. 일단 한 번 써보세요. 처음 결과가 '이게 뭐야' 싶어도 두세 번 고치면 '오!' 하는 순간이 옵니다. 중요한 건 AI로 만든 결과가 만족스럽지 않아도 자신감을 갖고 계속해서 시도해보는 과정 같아요.
💬 한도윤의 마지막 한마디
"기획서만 쓰던 기획자가, 이제는 보여줄 수 있는 기획자가 되었다."
이 시리즈가 도움이 되셨다면, 같은 고민을 하고 있는 동료에게 공유해주세요.
📂 부록: 함께 읽으면 좋은 레시피 & 용어
◀ 이전 회차 바로가기: [게임 기획] 프로토타입 발표에 BGM이 없으면 분위기가 안 사는데, AI로 30초 만에 배경음악 만들기
▶ 클로드 코드(Claude Code) CLI 설치부터 첫 사용까지 — 5분 세팅 가이드
▶ Unity와 AI로만 게임 만들기! 바이브 코딩의 핵심 가이드 (1)
▶ [게임 QA] "기획서 5건, TC 마감 일주일... 엑셀 앞에서 멘붕 온 QA 테스터의 비장의 무기"
게임이나 프로젝트를 소개할 페이지가 필요했던 경험이 있으신가요? 어떤 내용을 담고 싶은지 댓글로 남겨주시면, 맞춤 프롬프트를 짜드릴게요!