소개
이번 주차에는 기획안을 바탕으로 프론트 작업을 실제 화면으로 옮기는 과정에 집중했습니다.
AI Studio를 활용해 웹사이트 코드를 생성하고, GitHub에 저장한 뒤 Vercel로 배포까지 연결해보았습니다. 단순히 아이디어를 정리하는 데서 끝나는 것이 아니라, 기획 → 구현 → 저장 → 배포 흐름을 직접 경험해본 점이 이번 작업의 핵심이었습니다.
이번 작업에서 중점적으로 진행한 내용은 아래 3가지입니다.
I-P-O 템플릿을 바탕으로 웹사이트 프론트 코드 생성
생성한 코드를 GitHub에 저장 및 업데이트
Vercel로 배포해 실제 접속 가능한 형태로 공개
작업해보면서, AI가 첨부파일의 요구사항을 한 번에 완벽히 반영하지는 않는다는 점도 경험했습니다. 그래서 중요한 조건은 다시 구조화해서 요청해야 한다는 점을 함께 배울 수 있었습니다. 😊
진행 방법
1. 기획안을 프론트 구현이 가능하도록 구체화하기
AI Studio로 바로 코드 생성을 시도하기 전에, 먼저 기획안을 프론트 구현이 가능한 수준으로 더 구체화했습니다. 특히 화면을 만들 때 바로 필요한 요소 위주로 정리했습니다.
사용자에게 가장 먼저 보여줄 핵심 메시지
메인 화면의 섹션 순서
CTA 버튼 문구와 위치
로그인 여부 / 구독 여부에 따른 기능 제한
정보 구조(IA)와 페이지 흐름
이 과정을 통해 느낀 점은, 기획 문 서가 구체적일수록 AI가 더 안정적으로 결과물을 만들어낸다는 것이었습니다.
2. AI Studio에서 프론트 코드 생성하기
기획안을 정리한 뒤에는, 이를 바탕으로 AI Studio에서 실제 웹사이트 프론트 코드를 생성했습니다. 이번에는 단순히 페이지 하나를 만들어달라고 요청한 것이 아니라, 첨부한 기획 파일과 디자인 시스템 파일을 기준으로 전체 화면 구조를 잡아달라고 요청했습니다.
첫 번째 프롬프트
첨부한 내용으로 임산부 먹거리 안심스캔 웹앱 사이트를 만들어주세요.
콘텐츠 내용 및 전체 요구 사항 정의: 웹사이트 기획.txt 참조
디자인 시스템: momsafe-designsystem-v0.5.txt 참조처음에는 첨부파일만으로도 전체 요 구사항이 잘 반영될 거라고 기대했습니다. 하지만 실제 결과를 보니, 문서 안의 내용을 모두 한 번에 설계에 녹여내지는 못했습니다. 특히 로그인 여부 / 구독 여부에 따른 기능 제한 구조는 첫 결과물에 충분히 반영되지 않았습니다.
그래서 중요한 요구사항을 다시 한 번 명시해서 보완 요청을 넣었습니다.
보완 프롬프트
웹사이트 기획.txt에 보면, 로그인 여부, 구독 여부에 따라 기능 제한을 뒀어. 이 부분도 구현해줘.이 경험을 통해, AI에게 파일을 첨부했다고 해서 문서 전체의 우선순위와 조건 분기까지 자동으로 완벽히 해석되는 것은 아니라는 점을 알게 되었습니다. 오히려 아래 같은 항목은 따로 다시 짚어주는 것이 더 효과적이었습니다.
사용자 상태값(비로그인 / 로그인+비구독 / 로그인+구독)
상태별 기능 제한
잠금이 필요한 화면
전환 유도 문구와 CTA 위치
실제 구현이 필요한 조건 분기
결국 이번 작업은 1차 생성 → 누락된 요구사항 재입력 → 결과 보정의 흐름으로 진행되었습니다. 이 과정에서, AI를 잘 활용하려면 추상적인 요청보다 핵심 기능과 조건 분기를 분리해서 지시하는 능력이 중요하다는 점을 더 분명하게 느꼈습니다.
3. GitHub에 저장하고 업데이트하기
생성된 코드는 GitHub에 저장했습니다. 이 단계는 단순히 파일을 올려두는 것을 넘어서, 결과물을 계속 수정하고 관리할 수 있는 프로젝트 상태로 바꾸는 과정이었습니다.
특히 좋았던 점은 Google AI에서 GitHub 연동이 가능했다는 점이었습니다. 덕분에 repository를 비교적 편하게 생성할 수 있었고, 이후 코드 업데이트 흐름도 자연스럽게 이어졌습니다.
정리해보면 GitHub 저장은 아래 의미가 있었습니다.
생성된 결과물을 버전 단위로 관리할 수 있음
이후 수정 사항을 누적하며 기록할 수 있음
배포 도구와 연결하기 좋은 구조를 만들 수 있음
4. Vercel로 배포하기
GitHub에 저장한 뒤에는 Vercel로 바로 배포를 진행했습니다. Vercel 역시 GitHub 연동이 가능했기 때문에, 저장소를 연결한 뒤 비교적 빠르게 공개까지 이어갈 수 있었습니다.
이 단계에서 가장 좋았던 점은, 결과물을 더 이상 로컬 환경에서만 보는 것이 아니라 실제로 접속 가능한 웹페이지 형태 로 확인할 수 있었다는 점입니다.
배포 과정을 거치며 특히 좋았던 점은 아래와 같았습니다.
GitHub에 올린 결과물을 바로 배포 흐름으로 연결할 수 있었음
수정 후 다시 배포하는 과정도 비교적 단순했음
“아이디어”가 아니라 “공개된 결과물” 기준으로 점검할 수 있었음
화면, 카피, 구조를 실제 사용자 시선으로 다시 보게 되었음
이번 작업은 단순히 AI로 코드를 생성한 경험이 아니라, 기획 → 구현 → GitHub 저장 → Vercel 배포까지 이어지는 프론트 작업의 흐름을 짧고 빠르게 경험한 과정이었습니다. 🚀
결과와 배운 점
좋았던 점
기획안을 바탕으로 프론트 작업의 기준을 명확히 잡을 수 있었다
AI Studio를 활용하니 초안 제작 속도가 빨라졌다
GitHub 연동으로 저장과 업데이트가 편리했다
Vercel 연동 덕분에 배포까지 빠르게 이어갈 수 있었다
결과물을 실제 접속 가능한 화면으로 확인할 수 있어 점검이 쉬웠다
시행착오
첨부파일을 넣었다고 해서 AI가 기획 문서를 한 번에 완벽하게 반영하지는 않았다
로그인 여부, 구독 여부에 따른 기능 제한처럼 조건 분기형 요구사항은 누락되기 쉬웠다
처음부터 완성형 결과가 나오기보다는, 빠진 요구사항을 다시 짚어주는 과정이 필요했다
결국 코드 생성 자체보다도, 어떤 구조와 기준으로 요청할지가 더 중요했다
이번 작업을 하면서 가장 크게 느낀 것은, 좋은 결과물은 좋은 프롬프트만으로 만들어지는 것이 아니라, 좋은 기획 정리와 명확한 추가 지시에서 나온다는 점이었습니다.
처음에는 기획 파일과 디자인 시스템 파일을 첨부하면 전체 요구사항이 자연스럽게 반영될 것이라고 생각했습니다. 하지만 실제로는 중요한 조건 분기나 기능 제한 구조는 따로 다시 강조해야 했고, 그 과정을 통해 어떤 정보가 AI에게 특히 중요하게 전달되어야 하는지도 더 선명하게 보였습니다.
반면 구현 이후의 흐름은 꽤 매끄러웠습니다. Google AI의 GitHub 연동으로 repository 생성과 업데이트가 편리했고, Vercel 역시 GitHub 연동 덕분에 바로 배포할 수 있었습니다.
즉, 이번 경험을 통해 기획은 더 구체적으로, 요청은 더 명확하게, 배포는 더 가볍게 연결하는 흐름이 실제 작업 속도를 크게 높여준다는 점을 배웠습니다.
다음 계획
다음 단계에서는 아래 부분을 더 보완해보고 싶습니다.
생성된 화면을 실제 사용자 흐름 기준으로 다시 점검하기
섹션별 카피와 CTA를 더 정교하게 다듬기
모바일 화면과 반응형 구성을 더 세밀하게 확인하기
이후 백엔드 연결 또는 실제 기능 확장 가능성도 검토하기
