1. 서론 (개요와 완성품)

지난번 기사(개발 계기가 된 기사 URL)를 계기로, PDF 데이터를 AI로 추출하여 CSV로 변환하는 풀스택(Full-stack) 앱을 개발 및 공개했습니다!

제작한 앱 소개

PDF 파일(견적서 등)을 업로드하면, AI가 내용을 구조화하여 읽고 데이터베이스에 저장한 후 CSV로 다운로드할 수 있는 도구입니다.

실행 전

실행 후

견적서.pdf (샘플)

※ 아직 시범 단계이므로 URL은 공개하지 않습니다.

2. 채택한 기술 스택

모던하고 실용적인 기술을 조합하여 구축했습니다.

프론트엔드: Next.js, Tailwind CSS -
백엔드 (AI): Gemini 2.5 Flash -
데이터베이스: Supabase (PostgreSQL) -
인프라: Vercel

3. 개발 흐름 (제작 순서)

이번에는 다음과 같은 순서로 단번에 개발과 배포를 진행했습니다.

프로토타입 제작: Cursor를 활용하여 Next.js의 템플릿과 UI (PDF 업로드 화면)를 자동 생성 -
AI 처리 구현: Gemini API를 호출하여 PDF에서 JSON 형식으로 데이터를 추출하는 로직 추가 -
DB 연동: Supabase 프로젝트를 생성하고, 추출한 데이터를 PostgreSQL에 저장하는 API를 작성 -
배포: GitHub에 소스 코드를 Push하고, Vercel과 연동하여 인터넷에 공개

4. 개발 중 마주친 3가지 벽과 해결책

순조롭게 끝날 줄 알았으나, 수많은 함정에 빠졌습니다. 같은 상황에 처한 분들에게 참고가 된다면 좋겠습니다.

벽 1: Cursor의 과금 한도 에러 발생과 Gemini로의 피보팅 (Pivot)

Cursor를 사용하여 초고속으로 제작을 진행하던 중, 무자비한 과금 한도에 부딪히고 말았습니다...

여기까지는 예상대로! 이전에 이용하던 Gemini API 모델로 전환하여 계속 진행하려고... 했으나, 놀랍게도 Free plan에서는 Cursor 내에서 다른 모델로 전환할 수 없는 모양입니다.

자금이 부족한 직장인에게는 조금 가혹하기 때문에, 여기서 Cursor의 AI 기능은 일단 종료하고, 브라우저의 Gemini를 대화 상대(Wall-hitting)로 삼아 개발을 계속하기로 했습니다.

다만, Cursor를 이용한 소감으로는 "그저 놀라웠다"는 한마디로 요약할 수 있습니다. 간단한 프로토타입 폴더와 파일을 로컬에 자동으로 생성해 준 경험은 훌륭했으며, 개인 개발을 하는 데 있어 반드시 이용하고 싶은 도구였습니다. 다음에는 예산을 충분히 확보하여 더욱 본격적으로 이용해 보고 싶습니다.

벽 2: Supabase의 RLS에 의한 저장 차단

로컬 테스트 중, Supabase에 데이터를 저장할 때 42501 에러가 발생했습니다.

Supabase 저장 에러: {
code: '42501',
details: null,
...

해결책:

Supabase의 기본 보안 기능인 「RLS (Row-Level Security: 행 단위 보안)」의 문지기가 너무 강력했던 것이 원인이었습니다.

이번에는 테스트 목적이었고 즉시 구동하는 것을 우선시했기 때문에, Supabase의 SQL Editor에서 다음 명령을 실행하여 RLS를 비활성화함으로써 돌파했습니다.

⚠️ 【주의】 RLS 해제의 리스크에 대하여

RLS를 비활성화하면 API 키만 있다면 누구나 데이터베이스를 읽고 쓸 수 있는 상태가 됩니다. 이번에는 개인적인 프로토타입이며 기밀 정보를 포함하지 않기 때문에 해제했지만, 실제 운영이나 사용자 정보를 다루는 앱에서는 절대 금물입니다.

실제 운영 시에는 Supabase Auth (인증)와 조합하여 "로그인한 본인의 데이터만 조작할 수 있도록" 올바른 RLS 정책을 설정해야 합니다.

벽 3: GitHub의 비밀번호 인증 폐지 함정

드디어 Vercel에 공개하기 위해 터미널에서 GitHub로 Push하려고 하자, 비밀번호 인증에서 거부되었습니다.

해결책:

2021년의 GitHub 비밀번호 폐지 사양에 제대로 걸려들었습니다.

GitHub의 Developer settings에서 Personal Access Token (PAT)을 발행하고, 다음 명령을 사용하여 URL에 직접 토큰을 삽입(덮어쓰기)하는 비책으로 무사히 돌파할 수 있었습니다!

git remote set-url origin https://<사용자명>:<발행한 토큰>@github.com/<사용자명>/<리포지토리명>.git

⚠️ 【주의】

URL 내에 액세스 토큰(Access Token)을 직접 삽입하는 방법은 이력(History)이나 로그에 토큰이 남을 위험이 있으므로, SSH 연결 사용이나 Git Credential Manager 활용을 권장합니다.

5. 요약 및 향후 전망

수많은 장벽이 있었지만, 무사히 Vercel에서 꽃가루(배포 성공)를 볼 수 있었습니다!

트러블을 극복하고 공개하며 느낀 소감

이번 개발을 통해 역시 AI의 문제 해결 능력은 상당히 높다는 것을 실감했습니다. 현대의 개발에 있어 AI를 파트너로 삼는 것은, 완곡하게 표현해도 극적으로 효율적입니다. 평소 검증 업무에서도 이용하고 있지만, 처음부터 만드는 개인 개발에서 그 위력을 재확인할 수 있었습니다.

한편으로, 업무 이용 등을 고려하면 정보 유출 등의 보안 문제는 아직 완전히 해소되지 않았기 때문에, 엔터프라이즈(Enterprise) 영역에서 본격적으로 확산되기까지는 시간이 조금 더 걸리지 않을까 개인적으로 생각하고 있습니다. 다만, 로컬 모델(Local Model)의 성장 속도도 엄청나기 때문에, 가까운 미래에 개인용 PC 상에서 고정밀도로 동작하는 완전히 보안이 확보된 AI가 나오기를 강력히 기대하고 있습니다!

향후 추가하고 싶은 기능

• 여러 개의 PDF 일괄 불러오기 기능
• 기타 기능에 대해 요구 사항이 있다면 적극적으로 반영하고 싶습니다!

끝까지 읽어주셔서 감사합니다!

Discussion