Gencow와 Codex로 하루 만에 AI 웹앱 3개 만들어본 후기

오늘은 Gencow와 OpenAI Codex를 활용해서 AI 기능이 들어간 웹앱 3개를 만들어보았다. 처음에는 “간단한 AI 웹앱을 만들고 쇼츠까지 올려보자”는 목표로 시작했는데, 막상 만들다 보니 단순히 결과물만 만든 게 아니라 기획, 개발, 배포, 오류 해결, 콘텐츠 제작까지 한 번에 경험하게 되었다.

이번에 만든 웹앱은 총 3개다. 첫 번째는 공부 자료에 질문할 수 있는 NoteAsk, 두 번째는 PDF나 필기 사진을 플래시카드와 문제로 바꿔주는 StudySnap, 세 번째는 시험 날짜와 공부 범위를 입력하면 AI가 공부 달력을 만들어주는 StudySprint다.

세 앱 모두 Vite + React로 프론트엔드를 만들고, Gencow를 백엔드로 사용했다. AI 기능은 Gencow AI Engine을 통해 연결했고, 최종적으로 Gencow Cloud에 배포해서 실제 사이트처럼 접속할 수 있게 만들었다.

1. NoteAsk: PDF와 필기 사진에 바로 질문하는 AI 공부 앱

가장 먼저 만든 앱은 NoteAsk다. 처음 아이디어는 수업 자료를 보다가 나왔다. 시험 기간이나 과제를 할 때 PDF, 강의자료, 필기 사진을 계속 뒤적이면서 원하는 내용을 찾는 일이 꽤 번거롭다. 그래서 “자료를 넣고 질문하면 AI가 바로 답해주는 앱이 있으면 좋겠다”고 생각했다.

NoteAsk의 핵심 기능은 단순하다. 사용자가 PDF나 필기 사진을 업로드하고, 궁금한 질문을 입력하면 AI가 자료 내용을 바탕으로 답변한다. 중요한 점은 AI가 아무 말이나 지어내는 것이 아니라, 사용자가 제공한 자료 안에서만 답하도록 만든 것이다. 자료에 없는 내용이면 “충분한 정보가 없다”고 말하도록 설계했다.

처음 버전에서는 단순히 긴 텍스트를 붙여넣고 질문하는 구조였지만, 실제로 내가 원했던 건 PDF나 사진을 넣고 질문하는 기능이었다. 그래서 중간에 방향을 바꾸어 PDF 업로드, 이미지 업로드, OCR 기능을 추가했다. PDF는 텍스트를 추출하고, 사진은 AI OCR을 통해 내용을 읽어오도록 했다.

만들면서 가장 헷갈렸던 부분은 AI 연결이었다. 로컬에서 실행하면 OpenAI API Key가 필요했는데, 나는 내 크레딧을 쓰고 싶지 않았다. 그래서 로컬 테스트보다는 Gencow Cloud에 배포한 뒤 Gencow 쪽 AI 설정을 사용하는 방향으로 바꿨다. 이 과정에서 Failed to fetch, Authentication required 같은 오류도 만났고, 프론트엔드가 어느 백엔드 주소를 보고 있는지 확인해야 했다.

결과적으로 NoteAsk는 “자료 기반 Q&A 앱”으로 정리되었다. PDF나 필기 사진을 넣고 바로 질문할 수 있다는 점에서 공부할 때 꽤 직관적인 도구가 되었다.

 

2. StudySnap: 공부 자료를 플래시카드와 문제로 바꿔주는 앱

두 번째로 만든 앱은 StudySnap이다. NoteAsk가 “질문하고 답을 받는 앱”이라면, StudySnap은 “공부 자료를 복습 자료로 바꿔주는 앱”이다. 처음에는 NoteAsk와 조금 비슷해 보일 수 있다는 고민이 있었다. 둘 다 PDF나 필기 사진을 사용하기 때문이다. 그래서 StudySnap은 질문 답변이 아니라 플래시카드와 객관식 문제 생성에 집중하도록 방향을 바꿨다.

사용자가 PDF나 필기 사진을 업로드하면 AI가 내용을 읽고, 핵심 요약을 만든다. 그다음 사용자는 플래시카드로 공부할지, 객관식 문제로 공부할지 선택할 수 있다. 플래시카드는 한 번 클릭하면 답이 보이도록 만들었고, 객관식 문제는 선택지를 누르면 정답과 해설이 나오도록 구성했다.

 

이 앱을 만들면서 중요하게 생각한 건 페이지 흐름이었다. 처음에는 모든 기능이 한 화면에 모여 있었는데, 사용자가 보기에는 조금 복잡할 수 있었다. 그래서 업로드 화면, 요약 화면, 플래시카드 화면, 객관식 문제 화면을 나누었다. 이렇게 하니 기능이 훨씬 명확하게 보였고, 영상으로 촬영할 때도 “업로드 → 요약 → 학습 방식 선택 → 결과 확인” 흐름이 자연스러워졌다.

StudySnap을 만들면서 겪은 대표적인 문제는 배포였다. 한 번은 배포된 사이트에 들어갔을 때 Static file not found: /라는 오류가 떴다. 알고 보니 정적 사이트 배포에 필요한 dist/index.html이 제대로 생성되지 않은 상태였다. Gencow 백엔드 파일만 빌드된 상태였고, Vite 프론트엔드 빌드가 제대로 되지 않았던 것이다. 이후에는 반드시 npm run build로 Vite 빌드를 먼저 하고, npx gencow deploy --static dist/로 배포하는 흐름을 확인했다.

결과적으로 StudySnap은 NoteAsk와 다르게 “AI가 공부 자료를 만들어주는 앱”이 되었다. 긴 자료를 직접 정리하지 않아도 플래시카드와 예상 문제를 만들 수 있다는 점에서 시험 기간에 활용하기 좋은 앱이었다.

3. StudySprint: 시험 공부 계획을 달력으로 만들어주는 앱

세 번째 앱은 StudySprint다. 처음에는 이것도 공부 앱이라 앞의 두 프로젝트와 겹치는 게 아닐까 고민했다. 실제로 NoteAsk와 StudySnap은 모두 공부 자료를 기반으로 작동한다. 그래서 StudySprint는 자료를 읽는 앱이 아니라, 시험 일정 플래너 앱으로 방향을 확실히 잡았다.

StudySprint는 사용자가 시험 과목, 시험 날짜, 공부 범위, 공부 가능한 날짜 수, 하루 공부 가능 시간, 현재 준비 상태, 공부 스타일, 계획 강도를 입력하면 AI가 공부 계획을 만들어주는 앱이다. 결과는 단순한 긴 글이 아니라 달력형 플래너처럼 보여주도록 만들었다.

예를 들어 사용자가 “시험까지 5일 남았고, 교재 45쪽부터 120쪽까지 공부해야 하며, 하루에 2시간 정도 가능하다”고 입력하면 AI가 Day 1부터 Day 5까지 공부할 내용을 나누어준다. 또 오늘 할 일 체크리스트, 우선순위가 높은 주제, 마지막 복습 팁도 함께 보여준다.

 

 

StudySprint에서 가장 신경 쓴 부분은 디자인이었다. 처음 만든 디자인은 StudySnap과 비슷하게 각진 카드, 오렌지 계열 포인트가 들어가 있었다. 그런데 세 번째 앱까지 비슷한 분위기면 포트폴리오처럼 보이지 않을 것 같았다. 그래서 전체 디자인을 라벤더, 민트, 부드러운 플래너 느낌으로 바꾸었다. 제목도 처음에는 “Turn exam stress into a simple study plan”이었지만, 조금 길고 무거운 느낌이 있어서 “Plan your exam week.”로 짧게 수정했다.

또 하나 큰 이슈가 있었다. StudySprint를 만들 때 StudySnap 프로젝트를 복사해서 시작했는데, 그 안에 있던 Gencow 앱 ID까지 같이 복사되어 있었다. 그래서 StudySprint를 배포했더니 StudySnap 링크 위에 StudySprint 사이트가 덮어써지는 문제가 생겼다. 이때 Gencow 프로젝트의 gencow.json 안에 있는 appId가 중요하다는 것을 알게 되었다. 이후 StudySnap을 다시 배포해서 원래대로 복구했고, StudySprint는 새 앱 ID를 따로 만들어 배포했다.

이 문제는 꽤 당황스러웠지만, 동시에 배포 과정에서 앱 ID를 분리하는 것이 얼마나 중요한지 알게 된 계기였다.

어떻게 만들었는가

세 프로젝트 모두 기본 구조는 비슷했다. 프론트엔드는 Vite + React로 만들고, 백엔드는 Gencow를 사용했다. Gencow에서는 필요한 procedure를 만들고, 프론트엔드에서 해당 procedure를 호출하는 방식으로 AI 기능을 연결했다.

개발 순서는 대략 이랬다.

먼저 Gencow 프로젝트를 만들고, Vite + React 화면을 구성했다. 그다음 사용자가 입력할 폼이나 업로드 기능을 만들고, Gencow 백엔드에 AI procedure를 추가했다. 이후 gencow codegen으로 프론트엔드에서 사용할 API 타입을 생성하고, npm run build로 빌드를 확인했다. 마지막으로 npx gencow deploy --static dist/를 실행해서 Gencow Cloud에 배포했다.

처음에는 명령어 하나하나가 헷갈렸지만, 세 번째 프로젝트쯤 되니 흐름이 조금 익숙해졌다. 특히 프론트엔드 빌드와 Gencow 배포의 차이를 이해하는 것이 중요했다. 단순히 Gencow backend deploy만 하면 정적 웹사이트가 보이지 않을 수 있고, 반드시 Vite가 만든 dist 폴더를 함께 배포해야 했다.

만들면서 겪은 이슈들

가장 처음 만난 문제는 개발 환경이었다. npx gencow init을 실행했을 때 env: bun: No such file or directory 오류가 났다. Bun이 설치되어 있지 않아서 생긴 문제였다. Bun을 설치했지만 PATH 설정이 바로 적용되지 않아 bun --version이 되지 않는 문제도 있었다. 이런 환경 설정 문제는 초반에 시간을 꽤 잡아먹었다.

두 번째는 AI 연결 문제였다. 로컬에서 AI를 사용하려면 OpenAI API Key가 필요했지만, 나는 Gencow Cloud의 AI 기능을 사용하고 싶었다. 그래서 로컬에서 모든 걸 해결하려 하기보다, 배포 후 Gencow URL에서 테스트하는 방식으로 정리했다.

세 번째는 정적 파일 배포 문제였다. 사이트에 들어갔을 때 Static file not found: /가 뜨면 대부분 프론트엔드 빌드 결과물인 dist/index.html이 없거나, 정적 배포가 제대로 되지 않은 경우였다. 이 문제를 겪은 뒤에는 배포 전 항상 npm run build를 먼저 확인하게 되었다.

마지막은 앱 ID가 겹친 문제였다. StudySprint가 StudySnap 앱 위에 배포되면서 두 번째 프로젝트 링크가 바뀌어버렸다. 원인은 복사한 프로젝트 안에 기존 gencow.json이 그대로 남아 있었기 때문이었다. 이 문제를 해결하면서 새 프로젝트를 만들 때는 반드시 새로운 Gencow appId를 사용해야 한다는 걸 배웠다.

결과와 느낀 점

하루 동안 세 개의 AI 웹앱을 만들면서 느낀 건, 요즘은 아이디어를 실제 서비스처럼 보이게 만드는 속도가 정말 빨라졌다는 것이다. 물론 중간중간 오류도 많았고, 배포나 API 연결처럼 헷갈리는 부분도 있었다. 하지만 Gencow와 Codex를 함께 사용하니 프론트엔드, 백엔드, AI 기능, 배포까지 한 흐름으로 이어갈 수 있었다.

이번에 만든 세 앱은 각각 역할이 다르다. NoteAsk는 공부 자료에 질문하는 앱이고, StudySnap은 공부 자료를 복습 콘텐츠로 바꿔주는 앱이다. StudySprint는 시험까지 남은 시간을 공부 계획으로 바꿔주는 앱이다. 처음에는 모두 공부 앱이라 비슷해 보일까 걱정했지만, 기능을 나누고 화면 흐름을 다르게 만들면서 각 앱의 목적이 조금씩 분명해졌다.

이번 작업은 단순히 웹앱을 만든 것보다, 아이디어를 기획하고, 실제 화면으로 만들고, 배포하고, 쇼츠 콘텐츠로 소개하는 과정까지 이어졌다는 점에서 의미가 있었다. 앞으로도 이런 식으로 작은 AI 웹앱을 빠르게 만들고 기록해두면, 포트폴리오로도 꽤 괜찮은 자료가 될 것 같다.

링크 정리:

NoteAsk: https://rich-swan-4342.gencow.app/
StudySnap: https://root-foam-6573.gencow.app/
StudySprint: https://hard-hill-1018.gencow.app/