[영단어 어플 만들기] STEP 4. 드디어 실전! AI와 바이브코딩으로 1분 만에 서버 완성하기

안녕하세요! 全자동입니다.

 

지난 STEP 3에서 구글 앱스 스크립트(GAS)라는 텅 빈 하얀 도화지를 열어두고 마무리했었죠?

"이 빈칸을 대체 무슨 외계어로 채워야 하나..." 막막하셨을 겁니다.

걱정 마세요! 오늘 우리는 단 한 줄의 코드도 직접 치지 않습니다.

1편에서 배웠던 '바이브코딩'의 마법을 부릴 시간이거든요.

챗GPT나 제미나이(Gemini)에게 우리의 기획(PRD)을 똑똑하게 전달해서 코드를 통째로 받아오겠습니다.

데이터 서버를 구축하고 앞으로 사용 될 웹앱 URL 주소를 얻어보세요!

1. 🗣️ 복붙해서 쓰세요! AI에게 던질 '실전 프롬프트'

바이브코딩의 핵심은 'AI에게 역할을 부여하고, 상황을 아주 구체적으로 설명하는 것'입니다.

아래 박스에 있는 글을 그대로 복사해서 AI 채팅창에 입력해 보세요.

[초보자용 백엔드 바이브코딩 프롬프트]

너는 지금부터 20년 차 최고 수준의 '구글 앱스 스크립트(GAS) 개발자'야.

나는 코딩을 전혀 모르는 초보 아빠이고, 아이를 위해 구글 스프레드시트를 데이터베이스(DB)로 쓰는 '영단어 퀴즈 앱'을 만들고 있어.

[나의 상황]
- 구글 스프레드시트의 시트 이름은 '시트1'이야.
- 1행에는 '단어', '뜻'이라는 제목이 있고, 2행부터 실제 데이터가 들어가 있어.

[요청 사항]
앱(프론트엔드)에서 이 스프레드시트의 단어 데이터를 웹에서 쉽게 가져갈 수 있도록, GAS를 이용해 JSON 형태로 데이터를 뿌려주는 API 코드(doGet 함수)를 완벽하게 작성해 줘. 코딩을 모르는 내가 바로 복사해서 붙여넣을 수 있게 코드만 깔끔하게 주고, 적용 방법도 친절하게 한글로 설명해 줘.

어떤가요? 이렇게 질문하면 AI는 "아! 이 사람은 구글 엑셀을 DB로 쓰고 있고, 화면에 데이터를 뿌려줄 API 코드가 필요하구나!"라고 찰떡같이 알아듣고 수십 줄의 완벽한 영어 코드를 10초 만에 토해냅니다.

2. ✂️ 붙여넣기 후 마법의 주문, '배포(Deploy)'

AI가 코드를 만들어 주었나요? 그럼 아래 순서대로 적용해 봅시다.

1. AI가 짜준 코드를 복사(Copy) 합니다.
2. 지난번 열어두었던 GAS 하얀 도화지에 원래 있던 글씨를 다 지우고 붙여넣기(Paste) 합니다. (디스켓 모양 아이콘을 눌러 저장!)
3. 화면 우측 상단에 있는 파란색 [배포(Deploy)] -> [새 배포]를 클릭합니다.
4. 유형 선택(톱니바퀴)에서 '웹 앱(Web App)'을 선택합니다.
5. 액세스 권한이 있는 사람을 '모든 사용자(Anyone)'로 변경하고 [배포]를 누릅니다.

3. 🚨 삐용삐용! 초보자 최대 고비 "안전하지 않은 페이지"

배포 버튼을 누르면 갑자기 구글이 무서운 경고창을 띄웁니다.

"권한 검토", "안전하지 않은 페이지로 돌아가기" 같은 붉은색 글씨들이 나오죠. 여기서 놀라서 창을 끄는 분들이 90%입니다.

💡 당황하지 마세요! 내가 만든 코드라서 구글이 한 번 더 확인하는 아주 정상적인 절차입니다.
해결법: [고급] 글씨를 클릭 ➡ 맨 아래 [~로 이동(안전하지 않음)] 클릭 ➡ [허용]을 누르면 무사 통과입니다!

4. ✅ 오늘의 미션: '웹 앱 URL' 획득하기!

위의 무서운 경고창을 무사히 넘기면, 화면에 복잡하고 긴 영어 주소인 '웹 앱 URL (API 주소)'가 나타납니다.

"축하합니다! 방금 나만의 무료 서버(백엔드)가 세상에 태어났습니다!"

이 URL 주소가 바로 엑셀 주방과 앱 홀을 이어주는 '디지털 웨이터의 직통 전화번호'입니다.

이 주소를 메모장이나 카톡 내게쓰기에 소중하게 복사해서 꼭 보관해 주세요!

---

이제 진짜 눈에 보이는 화려한 앱 화면을 만들 준비가 끝났습니다.

다음 [STEP 5. 안티그래비티로 프론트엔드 뚝딱 만들기] 편에서는,

우리가 오늘 만든 이 마법의 URL을 넣고 스마트폰 화면을 디자인하는 바이브코딩 실전 2탄이 이어집니다!