관련 글: https://velog.io/@jaeiklee-dev/aladin-used-book-buy-opimizer-with-cursor
"AI는 내가 아는 것을 대신 시키는 도구여야 합니다. 시켰던 것은 이해하고 가야 합니다. 그래야 내가 성장하고 서비스도 지속적으로 유지보수가 가능합니다."
들어가며: AI와 함께 만든 중고책 최적 구매 도우미
최근 Cursor와 함께 알라딘 중고책 배송비 절약 서비스를 개발했습니다. React + Node.js로 프론트엔드와 백엔드를 구성하고, Vercel + Railway로 배포까지 완료한 프로젝트입니다.
Cursor는 팝업 UI, 크롤링 기능 등 뻔한 코드는 금방 짜줍니다. 서비스를 배포하는 데까지 필요한 작업을 A-Z까지 순서대로 알려준다든지, 코드를 리뷰해 주기도 합니다. 때로는 주니어 같고, 때로는 시니어 같습니다.
어느 쪽이든 간에, 공통으로 느낀 것이 있습니다. Cursor는 내가 아는 것을 대신 시키는 도구여야 한다는 것입니다. 정확히는, Cursor에게 시켰던 것은 적어도 70% 이상은 이해하고 가야 내가 성장하고, 서비스 자체도 지속적으로 유지보수가 가능할 것이란 생각이 들었습니다.
프로젝트 개요
중고 책을 여러 권 구매할 때 같은 셀러 묶음배송을 고려하여 가장 저렴한 조합을 찾아주는 웹 서비스
기술 스택:
- Frontend: React 19 + TypeScript + Vite + Tailwind CSS
- Backend: Node.js + Express + TypeScript
- 배포: Vercel (Frontend) + Railway (Backend)
- 크롤링: Axios + Cheerio (Puppeteer 제거)
핵심 기능:
- 알라딘 Open API를 통한 도서 검색
- 중고책 정보 크롤링 및 파싱
- 브루트 포스 알고리즘으로 최적 구매 조합 계산
- 같은 셀러 묶음 배송을 통한 배송비 절약
🧒 Cursor가 주니어가 될 때: 아는 분야를 개발할 때
1. "내가 아는 것을 대신 시키는 도구"로 활용하기
UI의 경우 Cursor가 실수해도 금방 원인을 찾고 수정이 가능했습니다. 문제는 복잡한 알고리즘을 짤 때였습니다. 저의 경우, 여러 권의 중고책을 구매할 때 최저가 조합을 찾아주는 알고리즘을 작성해야 했습니다. 알라딘 중고 매물 정보를 가져와서, 같은 셀러별로 묶음 배송시 절약되는 배송비를 고려해서 최저가 조합을 찾아주는 알고리즘입니다.
- 각 책의 모든 중고책들의 조합을 만든다. 예를 들어 4가지 책이 있고, 각 책의 중고책 수가 3권, 5권, 7권, 10권이라면 모든 조합의 수는 357*10가지가 된다.
- 각 조합마다 다음을 수행한다.
a. 조합을 구성하는 책들의 책값을 먼저 더해 책값의 총합을 구한다.
b. 조합을 구성하는 책들의 배송비를 하나씩 더한다. 이때, 먼저 배송비를 더한 책 중 책 중 같은 셀러가 판매하고 있는 책이 있다면 배송비를 더하지 않는다. 즉, 같은 셀러가 판매하는 책들 모두에 대하여 배송비는 한 번만 적용한다.
c. 배송비까지 모두 더하여 총 가격을 산출한다.- 2.번을 수행할 때마다 총 가격을 비교하여 최저가 조합을 갱신한다.
Cursor는 생각보다 세세한 조건을 고려해서 정확하게 짜지 못했습니다. 또한 오류가 있는 경우 디버깅도 어려웠습니다. 평소 '코딩테스트가 실무에서 큰 의미가 있나?' 생각했었는데, 기본적인 알고리즘 지식의 필요성을 실감하는 경험이었습니다.
2. 코드 리뷰는 필수
1번과 같은 맥락입니다. 코드 리뷰는 두 가지 측면에서 필요합니다.
- Cursor가 기획에 어긋나지 않게 구현했는지 점검하기
- 개발 진행 상황을 내 컨트롤 아래 두기
간단한 서비스, 유지보수하지 않을 서비스는 완성만 하면 되니 상관없습니다. 하지만 지속적으로 운영할 서비스라면 언젠가는 개발자가 개입해야 하는 순간이 올 것입니다. 또한 서비스가 커지다 보면 Cursor가 전체 맥락을 고려하지 못하기 시작하는 지점이 옵니다.
언제든 개발자가 스스로 개발에 투입할 수 있도록 Cursor가 하는 작업을 리뷰하고, 이해하고 넘어가야만 합니다.
3. 개발자가 컨트롤 가능한 단위로 작업하기
Cursor의 작업을 이해하고 넘어가기 위해 만들었던 원칙이 있습니다. 평소 개발을 할 때와 같이 이슈 단위로 커밋하는 것입니다. 커밋 단위 즉, 충분히 이해할 수 있는 단위로 작업을 쪼개서 Cursor에게 작업을 할당하는 것입니다.
Cursor는 요청사항을 얘기하면 묻지도 않고 A-Z까지 순식간에 진행해 버립니다. 가령, "React에서 책 제목을 입력받는 검색창과 검색 버튼 만들어줘"라고 요청하면 Cursor는:
- BookSearch 컴포넌트
- useBookSearch 훅
- ApiService.searchBooks 메서드
- Book, SearchResult 타입 정의
- 에러 처리 로직
- 로딩 상태 관리
- 검색 결과 페이지네이션
까지 한 번에 만들어버렸습니다. 한 번에 수십 개의 수정 사항이 생깁니다. 이대로 커밋을 해버리면 추후 변경사항을 추적하기 어렵습니다. 문제가 발생했을 때 어떤 수정에서 비롯된 것인지도 알기 어렵게 됩니다.
그래서 저는 평소 Git을 사용해 개발 진행 상황을 관리하던 것을 생각했습니다. 커밋을 하는 단위에 맞춰서 Cursor에게 요청하고, Cursor가 개발한 내용을 이해하여 커밋메세지를 작성하려고 노력했습니다.
4. 지속적인 리팩토링과 코드 품질 관리
Cursor가 개발한 코드를 그대로 두면 시간이 지날수록 코드 품질이 떨어지고 유지보수가 어려워집니다. 지속적인 리팩토링과 코드 품질 관리가 필수입니다. Cursor에게 주기적으로 다음의 작업을 시켰습니다.
- 코드 중복 제거
- 기능 완성 후: 전체 아키텍처 검토 및 알고리즘 오류 점검
- 배포 전: 성능 최적화
👴🏻 Cursor가 시니어가 될 때: 모르는 분야를 개발할 때
개발자가 지식이 많고, 그 지식 안에서 Cursor를 주니어처럼 사용할 수 있다면 최선일 것입니다. 하지만 주니어 개발자는 지식의 절대량이 부족하므로 애초 불가능한 일입니다.
이번에 Cursor와 작업을 진행하면서 시니어 한 분을 옆에 모시고 개발을 진행하는 것 같은 기분이 들었습니다. 저는 아직 React와 백엔드 개발 전체 사이클에 대한 지식이 많이 부족한데, Cursor는 제가 목표하는 서비스를 완성하는 데에 필요한 로드맵을 그려주고, 순서대로 진행할 수 있도록 알려주기 때문입니다.
하지만 스스로가 모르는 분야를 Cursor에게 모두 맡긴다면, 그 서비스는 유지보수가 불가능한 서비스가 될 것입니다. 저는 개발한 서비스를 제 것으로 만들기 위해 다음과 같은 방식으로 작업을 진행했습니다.
1. 무엇을 해야 하는지 알려줘. 작업은 내가 할게
제가 어느 정도 코드 리뷰가 가능한 부분은 Cursor에게 개발을 맡겼습니다. 하지만 전혀 모르는 분야에 대해서는 반대로 진행했습니다. Cursor에게 무엇을 해야 하는지 작은 단위로 쪼개서 알려달라고 했습니다. 작업은 내가 직접 할 것이니, 알려만 달라고 말입니다. Cursor가 해야 할 작업을 알려주면, 모르는 부분은 적절히 공부도 해가면서 직접 개발을 해나갔습니다. 물론, 모든 코드를 직접 작성하지는 않았지만, 모든 것을 Cursor가 진행해버리도록 두지 않았습니다.
구체적인 예시들:
1. CI/CD 파이프라인 구축
"서비스 배포하는 데에 필요한 작업 알려줘. CI/CD까지 적용해서 자동으로 배포할 수 있도록 하는 데에 필요한 작업 알려줘"
- GitHub Actions 워크플로우 설정
- 빌드 및 테스트 자동화
- Vercel과 Railway 연동 설정
- 환경변수 관리 방법
- 도메인 연결
- 배포 스크립트 작성
2. 배포 과정에서의 적용
"Vercel과 Railway로 배포하는 방법을 알려줘"
- Vercel CLI 설치 및 로그인
- vercel.json 설정 파일 생성
- 환경변수 설정 방법
- Railway CLI 설치 및 프로젝트 연결
- Railway 환경변수 설정
- 도메인 연결 방법
이 모든 과정을 직접 따라하면서 하나씩 이해해갔습니다. 특히 백엔드는 GCP의 Cloud Functions 등을 활용한 경험은 있지만 Node.js로 웹애플리케이션 서버를 구성해 본 경험은 없어서 추가로 공부가 필요했습니다. 이 경험을 통해서 Express.js의 미들웨어 개념, 라우팅 구조, 그리고 실제 웹 서버가 어떻게 동작하는지에 대한 이해를 얻을 수 있었습니다.
또한 Railway와 같은 클라우드 플랫폼에서 Node.js 애플리케이션을 배포하는 과정에서 환경변수 관리, 포트 설정, 헬스체크 등의 실제 운영 환경에서 필요한 지식들도 학습할 수 있었습니다. 이런 것조차 이제는 구글링할 필요없이 Cursor에게 물어보면 즉각 알 수 있으니 훨씬 빠르게 학습할 수 있었습니다.
물론 이렇게 하면 Cursor에게 다 맡기는 것보다는 개발에 소요되는 시간이 길어질 것입니다. 그럼에도 예전과 비교를 한다면, 주니어에게는 어떤 서비스를 구현하기 위해 무엇을 해야하는지를 알아내는 것부터가 허들이었습니다. 그 시간을 줄이는 것만 해도 엄청난 효율 증대입니다.
계속 운영할 서비스라면 서비스가 커져도 개발자가 직접 유지보수가 가능할 수 있는 상태를 유지해야 합니다. 문제가 발생했을 때 원인을 파악하고, 어떤 식으로 문제를 해결하라고 Cursor에게 지시할 수 있는 수준으로 서비스를 이해하고 있어야 합니다.
2. 문서화
Cursor가 작업한 부분을 기억하고 이해하고 있기 위해서 한 것이 하나 더 있다면 문서화입니다. 특히 저는 어떤 서비스를 오랜만에 개발하려고 할 때 서비스 전체 아키텍쳐, 재배포하는 방법 등을 파악하는 데 에너지를 많이 써야 했던 경험이 있습니다. 그래서 평소에도 개발하면서 문서화하는 것을 중요하게 생각하는 편입니다. Cursor와 협업을 하면서도, 빠르게 진행되는 작업 상황을 지속적으로 follow-up 할 수 있도록 주기적으로 Cursor에게 문서화, 문서 업데이트를 부탁했습니다.
1. 프로젝트 구조 문서화
#### 프로젝트 구조 ####
aladin-used-book-buy-optimizer/
├── frontend/ # Vercel 배포
│ ├── src/
│ │ ├── components/ # React 컴포넌트
│ │ ├── hooks/ # 커스텀 훅
│ │ ├── types/ # TypeScript 타입
│ │ └── utils/ # 유틸리티 함수
│ ├── vercel.json # Vercel 설정
│ └── package.json
├── backend/ # Railway 배포
│ ├── src/
│ │ ├── routes/ # Express 라우터
│ │ ├── services/ # 비즈니스 로직
│ │ ├── lib/ # 크롤링 라이브러리
│ │ └── utils/ # 유틸리티 함수
└── scripts/ # 배포 스크립트
2. 배포 가이드 문서화
#### 배포 과정 ####
### 1. 자동 테스트 (GitHub Actions)
git push origin develop # develop 브랜치에 push하면 자동 테스트
### 2. 배포 도구 설치 및 로그인
# Vercel CLI 설치 및 로그인
npm install -g vercel@latest
vercel login
# Railway CLI 설치 및 로그인
npm install -g @railway/cli@latest
railway login
3. 아키텍처 다이어그램 문서화
#### 전체 구조 ####
┌─────────────────┐ ┌─────────────────┐
│ Vercel CDN │ │ Railway API │
│ (Frontend) │◄──►│ (Backend) │
│ │ │ │
│ • React + Vite │ │ • Node.js + Exp │
│ • Edge CDN │ │ • Auto Scale │
└─────────────────┘ └─────────────────┘
4. API 엔드포인트 문서화
#### API 엔드포인트 ####
- GET /api/books/search - 도서 검색
- GET /api/books/:isbn/used - 특정 도서의 중고책 정보
- POST /api/optimization/calculate - 최적 구매 조합 계산
- GET /health - 서버 상태 확인
5. 개발 가이드 문서화
#### 개발 가이드 ####
### 로컬 개발
npm run dev # 전체 프로젝트 개발 서버 실행
npm run dev:frontend # 프론트엔드만
npm run dev:backend # 백엔드만
### 배포
npm run deploy:vercel # 프론트엔드 배포
npm run deploy:railway # 백엔드 배포
이렇게 문서화를 통해 프로젝트의 전체 구조, 배포 과정, API 사용법 등을 명확하게 정리할 수 있었습니다. 특히 Cursor와 협업하면서 빠르게 진행되는 작업 상황을 지속적으로 follow-up 할 수 있었고, 나중에 프로젝트를 다시 볼 때도 쉽게 이해할 수 있었습니다.
마치며
Cursor는 정말 강력한 도구입니다. Cursor를 사용해서 서비스 하나를 배포까지 해 본 것은 처음입니다. 7일 정도 걸렸습니다. 만약 Cursor가 모든 것을 하도록 했다면 훨씬 금방 했을지도 모릅니다. 아니, 오히려 중간에 막혔을지도 모르겠네요. 네, 저는 후자에 더 무게를 싣고 있습니다.
Cursor에게 개발을 시키면서도, 이해가 안 가는 부분은 실시간으로 물어봤습니다. 주니어가 학습할 수 있는 속도가 정말 빨라졌다고 느낍니다. 물론, 실패하면서 배우는 경험은 줄어들겠지만요. 목표한 것을 이루는 데에 필요한 지식을 효율적으로 얻는 데에는 정말 큰 도움이 된다고 느꼈습니다.
Cursor에게 모든 것을 시키는 주니어는 계속 주니어에 머물러 있을 것입니다. 더 빠르게 성장하는 주니어가 되기 위해 Cursor와 어떻게 협업해야 하는지를 고민해 보았습니다.
