[영단어 어플 만들기] (프롤로그)바이브코딩으로 영단어 앱 만들기 1편

"아빠, 영단어 외우는 거 너무 지루해!"

 

책상 앞에 멍하니 앉아 억지로 두꺼운 영어 단어장을 넘기는 아이의 한숨 소리를 들으며 깊은 고민이 시작되었습니다.

학습 효과를 높이기 위해 시중의 유명 단어장도 사주고 모바일 유료 학습 앱도 설치해 줘 보았지만, 아이가 단어 공부에 집중하지 못하는 데에는 분명한 이유가 있었습니다. 아이의 공부 과정을 며칠간 가만히 지켜보니, 전통적인 종이 단어장 학습 방식에는 세 가지 치명적인 비효율이 존재했습니다.

• 첫째, 장소의 제약: 무거운 단어장이 책상 위에 펼쳐져 있을 때만 공부할 수 있었습니다. 이동 중이나 잠깐 남는 자투리 시간에는 학습의 연속성이 완전히 끊어졌습니다.
• 둘째, 발음 확인의 번거로움: 정확한 원어민 발음과 억양을 들으며 소리로 외워야 장기 기억으로 전환되는데, 모르는 단어가 나올 때마다 스마트폰 사전 앱을 켜고, 철자를 타이핑해 검색하고, 스피커 아이콘을 누르는 일련의 과정이 아이의 학습 집중력을 계속해서 방해했습니다.
• 셋째, 수동적인 암기와 흥미 저하: 텍스트를 눈으로만 읽는 주입식 방식은 뇌에 자극을 주지 못해 금방 망각으로 이어졌고, 성취감을 느낄 수 있는 장치가 전혀 없었습니다.

 

💡 "왜 기존 상용 영단어 앱 대신 직접 제작을 선택했는가?"

물론 앱스토어에는 이미 수많은 영단어 학습 앱이 존재합니다. 하지만 대부분의 상용 서비스는 월 구독료 결제를 유도하거나 무분별한 광고가 노출되어 아이의 집중력을 흐립니다. 무엇보다 가장 큰 문제는 '지금 우리 아이의 학교나 학원 시험 범위에 딱 맞춘 단어장'을 유연하게 등록하고 관리하기 어렵다는 점이었습니다.

 

"스마트폰만 있으면 언제 어디서든 열어볼 수 있고, 터치 한 번에 원어민 발음이 흘러나오며, 퀴즈 게임을 풀듯 맞춤형 단어를 외울 수 있는 웹 앱을 아빠가 직접 만들어 줄 수는 없을까?"

 

이 작은 물음에서 출발해, 개발 전공자가 아닌 평범한 직장인 아빠의 '노코드·AI 기반 영단어 앱 만들기 프로젝트'가 시작되었습니다.

 

🗺️ 전체 제작 로드맵 (초보자를 위한 4단계 아키텍처)

과거에는 간단한 웹 서비스를 하나 배포하려 해도 프로그래밍 언어 문법(HTML/CSS/JS)을 수개월간 익히고, 클라우드 서버(AWS 등)와 데이터베이스를 구축해야 했습니다. 이는 비전공자에게 너무 높은 장벽이자 매월 고정 비용을 발생시키는 요인이었습니다.

 

하지만 이번 프로젝트에서는 복잡한 문법 공부와 유료 인프라 구축을 과감히 건너뜁니다. 개발 지식이 없어도 기획 의도와 요구사항을 자연어로 전달해 코드를 생성하는 '바이브코딩(Vibe Coding)' 방법론을 적용하여 다음 4단계 로드맵에 맞춰 서버 비용 0원으로 완성해 나갈 예정입니다.

단계	핵심 기술 및 도구	구현 목표 및 특징
STEP 1	안티그래비티(Antigravity) & PRD	자연어 프롬프트 기반 요구사항 명세서(PRD) 작성 및 AI 개발 환경 세팅
STEP 2	구글 스프레드시트 API	유료 서버 구축 없이 엑셀처럼 단어를 입력하면 즉시 반영되는 유지비 0원 DB 구축
STEP 3	Web Speech API (TTS) & PWA	네이티브 원어민 음성 재생, 사지선다 플래시 퀴즈 모드, 모바일 친화적 반응형 UI 구현
STEP 4	GitHub Pages & 버전 관리	평생 무료 정적 웹 호스팅 배포 및 신규 기능 업데이트 자동화 파이프라인 완성

 

• STEP 1. 바이브코딩 개념과 최적의 프롬프트 작성법:
  AI 개발 보조 도구인 '안티그래비티(Antigravity)'를 활용해 비전공자도 오류 없이 결과물을 얻을 수 있는 작업 환경을 구축합니다. 특히 AI가 엉뚱한 코드를 짜지 않도록 설계 기준을 잡아주는 제품 요구사항 명세서(PRD, Product Requirements Document) 작성 노하우를 실제 템플릿과 함께 상세히 공유합니다.
  
  
• STEP 2. 구글 스프레드시트를 활용한 무료서버 DB:
  복잡한 SQL이나 유료 클라우드 데이터베이스를 쓰지 않고, 부모가 구글 드라이브 엑셀 시트에 단어와 뜻을 입력하기만 하면 앱에 실시간으로 자동 동기화되는 무료 데이터 파이프라인을 연결합니다.
  
  
• STEP 3. 인터페이스(UI/UX) 및 핵심 인터랙션 구현:
  웹 표준 기술인 Web Speech API(TTS)를 통해 별도의 유료 음성 API 없이도 고품질 영어 발음을 즉각 청취할 수 있도록 구현합니다. 여기에 아이가 게임하듯 즐길 수 있는 4지선다 플래시 퀴즈 모드와, 앱스토어를 거치지 않고도 스마트폰 홈 화면에 아이콘을 추가해 실제 앱처럼 쓸 수 있는 PWA(Progressive Web App) 환경을 세팅합니다.
  
  
• STEP 4. GitHub Pages 무료 배포 및 지속적인 업데이트 파이프라인:
  완성된 정적 웹 앱을 GitHub Pages에 올려 평생 서버 비용 0원으로 접속 가능한 나만의 전용 웹 주소를 만듭니다. 이후 학교나 학원 진도에 맞춰 단어를 교체하거나 기능을 업그레이드할 때도 간편하게 반영할 수 있는 유지보수 환경을 완성합니다.
  
  

 

---

 

✨ "코딩을 몰라도, 아이를 위한 최고의 도구를 직접 만들 수 있습니다"

 

비전공자 직장인 아빠가 아이를 위한 맞춤형 웹 앱을 단기간에 배포까지 마칠 수 있었던 비결은 대단한 프로그래밍 지식이 아니었습니다. '우리 아이에게 지금 무엇이 가장 필요한가'에 대한 명확한 문제의식과, 이를 AI에게 정확하게 지시할 수 있는 기획력뿐이었습니다.

 

시중에 나와 있는 정형화된 교육 앱에 우리 아이를 억지로 맞추는 대신, 아이의 학습 속도와 성향에 딱 맞춘 학습 환경을 부모의 손으로 직접 선물해 줄 수 있다는 것은 바이브코딩 시대가 가져다준 가장 큰 선물이 아닐까 생각합니다.

 

이어지는 다음 글에서는 첫 번째 실전 단계로, [영단어 어플 만들기] STEP 1. 바이브코딩 & 안티그래비티 세팅 (feat. 특급 기획법)을 실제 사용한 프롬프트 템플릿과 함께 낱낱이 공개하겠습니다. 아이의 단어 암기 스트레스로 고민하던 부모님들께 작은 실마리가 되기를 바랍니다.