[아빠표 0원 어플] STEP 2. 프론트엔드? 백엔드? 코딩 초보의 완벽한 무료 서버 구축

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

 

지난 시간에는 AI와 대화하며 코딩하는 '바이브코딩'의 개념과 기획서(PRD) 작성법을 알아보았습니다.

이제 본격적으로 앱의 뼈대를 세워볼 차례입니다.

그런데 시작하기 전에, 코딩의 세계에서 무조건 알아야 하는 두 가지 필수 개념이 있습니다.

바로 프론트엔드(Front-end)와 백엔드(Back-end)입니다. 이름만 들어도 머리가 아프신가요?

걱정 마세요. 1분 만에 이해시켜 드리겠습니다.

1. 🍽️ 식당으로 이해하는 프론트엔드 vs 백엔드

코딩을 '식당'을 차리는 것에 비유해 보겠습니다.

• 프론트엔드 (식당의 홀과 인테리어): 손님이 앉아서 메뉴판을 보고 밥을 먹는 공간입니다.
  우리가 스마트폰으로 보는 '앱 화면, 버튼, 디자인'이 바로 프론트엔드입니다.
  (이 부분은 앞으로 '바이브코딩'으로 AI에게 시켜서 아주 쉽게 뚝딱 만들 예정입니다.)
• 백엔드 (식당의 주방과 냉장고): 손님 눈에는 안 보이지만, 식재료(데이터)를 보관하고 요리를 하는 공간입니다.
  우리 앱에서는 '수많은 영단어가 저장되는 서버와 데이터베이스(DB)'가 바로 백엔드입니다.

2. 🤯 초보자들의 무덤, 백엔드 서버 구축

프론트엔드는 화면에 바로바로 결과가 보여서 재미있습니다. 하지만 문제는 '백엔드(서버)'입니다.

데이터를 저장하려면 클라우드 서버(AWS 등)를 빌려야 하고, 복잡한 데이터베이스 언어(SQL)를 배워야 하며, 매달 서버 유지 비용까지 내야 합니다.

코딩 초보자들은 보통 이 '서버 구축' 단계에서 높은 진입장벽과 비용 부담을 느끼고 2차 멘붕에 빠지며 포기하게 됩니다.

"우리는 아이를 위해 간단히 무료로 앱을 만들고 싶었는데, 서버 비용이라니요?"

3. 💡 기막힌 해결책! '구글 스프레드시트'를 서버로 쓰자!

그래서 제가 찾은, 코딩 초보자도 10분 만에 끝낼 수 있는 가장 완벽한 무료 서버 구축 비법!

바로 직장인이라면 누구나 익숙한 '구글 스프레드시트(엑셀)'를 우리 앱의 데이터베이스(DB)로 사용하는 것입니다.

이 방식의 장점은 실로 엄청납니다.

• 평생 무료: 구글 계정만 있으면 서버 비용이 무료입니다.
• 극강의 접근성: 복잡한 DB 프로그램 대신, 우리에게 너무나 익숙한 엑셀 화면에 단어와 뜻을 타자로 치기만 하면 됩니다.
• ★ 실시간 동기화 (최고의 장점): 스프레드시트에서 오타를 수정하거나 새 단어를 추가하면, 앱을 다시 설치할 필요 없이 우리 아이 스마트폰 앱에 1초 만에 실시간으로 반영됩니다!

4. ✅ 오늘의 준비 작업 (미션!)

자, 설명은 끝났습니다. 오늘은 우리의 훌륭한 무료 서버가 될 '빈 구글 스프레드시트'를 하나 만들어 보겠습니다.

[미션: 나만의 영단어 DB 만들기]

1. 구글 드라이브에 접속하여 '새 구글 스프레드시트'를 만듭니다.
2. 제목을 [영단어 앱 DB]라고 적어줍니다.
3. 첫 번째 줄(A1, B1)에 각각 '단어', '뜻' 이라는 열 제목을 적어줍니다.
4. 그 아래에 아이가 외웠으면 하는 단어 5개만 샘플로 적어보세요! (예: A2=Apple, B2=사과)

---

벌써 훌륭한 백엔드 서버 구축이 끝났습니다! 너무 쉽죠?

다음 [STEP 3. 앱과 엑셀 연결하기] 편에서는, 우리가 오늘 만든 이 엑셀 파일(서버)을 실제 앱(프론트엔드)과 연결하는 마법의 다리, '구글 앱스 스크립트(GAS)'에 대해 알아보겠습니다.