[영단어 어플 만들기] STEP 2. 프론트엔드? 백엔드? 코딩 초보의 완벽한 무료 서버 구축

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

 

지난 [STEP 1]에서는 AI(제미나이, 챗GPT 등)와 일상 언어로 대화하며 코드를 완성하는 '바이브코딩(Vibe Coding)'의 핵심 개념과, AI의 환각(오류)을 막아주는 제품 요구사항 명세서(PRD) 작성 노하우를 공유해 드렸습니다.

이제 본격적으로 우리 아이를 위한 맞춤형 단어장의 뼈대를 세워볼 차례입니다.

 

하지만 개발 작업을 시작하기에 앞서, 웹과 앱의 세계에서 반드시 이해하고 넘어가야 할 두 가지 거대한 축이 있습니다. 바로 프론트엔드(Front-end)와 백엔드(Back-end)입니다.

 

비전공자에게는 단어만 들어도 막막하게 느껴지겠지만, 우리가 매일 이용하는 '식당'에 빗대어 보면 단 1분 만에 그 본질을 명쾌하게 이해할 수 있습니다.

 

1. 🍽️ 맛있는 식당으로 비유하는 웹 서비스의 구조

스마트폰에서 작동하는 모든 웹 애플리케이션은 완벽히 분리된 두 공간의 상호작용으로 움직입니다.

• 프론트엔드 (식당의 '홀'과 '인테리어'):
  손님이 문을 열고 들어와 앉는 세련된 테이블, 벽면의 인테리어, 깔끔하게 정리된 메뉴판입니다. 사용자의 눈에 직접 보이는 '스마트폰 화면, 버튼 디자인, 플래시 카드 넘김 효과'가 프론트엔드에 해당합니다. 이 영역은 우리가 프롬프트만 잘 작성하면 AI가 눈 깜짝할 사이에 완성도 높은 코드로 뽑아냅니다.
• 백엔드 (식당의 '주방'과 '식재료 창고'):
  손님의 시선이 닿지 않는 뒤편에서 신선한 식재료를 보관하고, 레시피에 맞춰 조리하는 공간입니다. 단어장 앱에서는 '수백 개의 영어 단어와 뜻, 발음 기호 데이터가 안전하게 보관되는 서버 및 데이터베이스(DB)'가 백엔드의 핵심입니다.

 

2. 🚧 비전공자들의 최대 장벽: 복잡한 서버와 월 유지비

화면에 결과가 즉시 시각적으로 드러나는 프론트엔드와 달리, 초보 개발자가 프로젝트를 중도 포기하게 만드는 주원인은 바로 '백엔드 인프라 구축'입니다.

일반적으로 단어 데이터를 저장하고 불러오려면 다음과 같은 복잡한 엔지니어링 과정을 거쳐야 합니다.

1. AWS(아마존 웹 서비스)나 구글 클라우드에서 가상 서버 컴퓨터를 임대해야 합니다.
2. MySQL, PostgreSQL 같은 관계형 데이터베이스(RDBMS)를 설치하고 SQL 문법을 학습해야 합니다.
3. 가장 치명적인 문제는 '매달 청구되는 클라우드 서버 요금'입니다. 아이 교육용으로 소소하게 운영하려는 앱인데 매월 서버비를 지출하는 것은 큰 부담이 됩니다.

 

3. 📊 전통 데이터베이스 vs 구글 스프레드시트 비교

이러한 비용과 진입장벽을 한 번에 날려버릴 최고의 해법이 바로 전 세계 직장인들에게 가장 친숙한 '구글 스프레드시트(Google Sheets)'를 헤드리스 데이터베이스(Headless DB)로 활용하는 방법입니다.

구분	전통적 데이터베이스 (AWS RDS 등)	구글 스프레드시트 DB
운영 비용	매월 서버 가동료 및 용량별 요금 청구	구글 계정만 있다면 100% 영구 무료
데이터 수정 난이도	DB 관리 도구 접속 후 쿼리문(SQL) 실행 필요	엑셀 다루듯 셀에 직접 타이핑하면 완료
실시간 반영 속도	서버 재기동 또는 별도 캐시 삭제 작업 필요	시트 수정 즉시 앱 화면에 1초 만에 자동 반영
모바일 관리	PC 환경에서만 전용 콘솔 접근 가능	스마트폰 구글 시트 앱으로 이동 중 편집 가능

특히 '실시간 동기화'는 부모 입장에서 최고의 장점입니다. 아이가 새로운 단원을 배우거나 오타를 발견했을 때, 번거롭게 앱을 재배포하거나 코드를 수정할 필요가 전혀 없습니다. 스마트폰으로 구글 시트를 열어 새 단어를 추가하기만 하면, 아이의 학습 화면에 실시간으로 새로운 문제가 나타납니다.

구글 스프레드시트에 실제 구현한 DB 내역

4. 🛠️ 실전: 영단어 앱 전용 스프레드시트 DB 스키마 설계

이제 우리 앱의 든든한 주방이 되어줄 스프레드시트를 직접 만들어보겠습니다. 여기서 한 가지 중요한 개발 팁이 있습니다. 1행의 열 머리글(헤더)을 한글 대신 영문 소문자로 정의해 두면, 추후 자바스크립트가 데이터를 JSON 객체로 파싱할 때 에러가 발생하지 않아 매우 편리합니다.

[미션: 4개 컬럼으로 구성된 나만의 영단어 DB 만들기]

1. 구글 드라이브에 접속하여 '새 스프레드시트'를 생성합니다.
2. 시트 좌측 상단의 문서 제목을 [영단어 앱 DB]로 변경합니다.
3. 첫 번째 행(1행)에 앱과 완벽히 호환되는 4가지 기준 헤더를 입력합니다.
   - A1: id (단어 고유 번호: 1, 2, 3...)
   - B1: word (외울 영어 단어: apple, school...)
   - C1: meaning (한국어 뜻: 사과, 학교...)
   - D1: example (문맥 이해를 위한 짧은 예문)
4. 2행부터 6행까지 아이가 오늘 복습할 단어 5개를 샘플로 입력해 둡니다.

 

🔒 놓치기 쉬운 필수 설정: 시트 접근 권한

데이터를 모두 입력했다면 우측 상단의 [공유] 버튼을 눌러보세요.

기본 설정인 '제한됨' 상태 그대로 두면 추후 웹앱이 시트의 데이터를 읽어오지 못하고 차단(403 Forbidden 오류)당합니다. 일반 액세스 권한을 '링크가 있는 모든 사용자 - 뷰어'로 설정해 주어야 스마트폰 앱이 단어 목록을 정상적으로 서빙받을 수 있습니다. (편집자가 아닌 '뷰어' 권한이므로 외부 사용자가 내 시트 내용을 함부로 변경할 위험은 전혀 없습니다.)

 

---

 

축하합니다! 단 5분 만에 평생 유지비 0원으로 운영되는 완벽한 모바일 백엔드 데이터베이스 구축을 끝마쳤습니다.

하지만 시트에 단어를 적어두기만 했다고 해서 스마트폰이 알아서 이 글자들을 읽어올 수는 없습니다.

 

이어지는 [STEP 3. 구글 앱스 스크립트(GAS)로 무료 API 서버 만들기] 편에서는, 오늘 구축한 주방(구글 시트)과 손님의 홀(스마트폰 앱) 사이를 오가며 주문을 접수하고 서빙해 줄 '디지털 웨이터(GAS)'의 문을 여는 실전 과정을 다뤄보겠습니다.

 

다음 편도 기대해 주세요!