ChatGPT 로 서비스개발 차력쇼 하기

교육업에 뛰어든 지 3개월정도가 지났다.

이번에는 ChatGPT 와 Cursor 기반으로 서비스개발을 진행한 후기를 끄적여보려한다.

 

0. 문제상황

제가 근무하는 교육장은 이른 아침부터 문을 열고 늦은 밤에 닫습니다.
교육장 주변이 외곽 지역이라 식사를 해결할 마땅한 곳이 거의 없습니다. 주변에 편의점이 몇 곳 있긴 하지만, 학생들이 식사를 충분히 해결하기에는 부족하여 결국 도시락 배달 서비스를 이용하고 있습니다.

 

현재 교육장에서는 학생들의 식사 여부를 취합한 뒤 도시락을 주문하고 있으며, 아래와 같은 양식을 사용해 학생들에게 (O/X)로 희망 여부를 조사한 후, 업체와 제휴를 통해 진행하고 있습니다.

 

 

 

그런데 문제가 있습니다.

1. 하루에 점심과 저녁을 모두 신청할 수 있어 관리가 복잡합니다.
2. 학생 수가 늘어날수록 취합해야 할 학생 숫자가 증가합니다.
3. 각 학생의 신청 여부를 수작업으로 파악해야 하므로 많은 시간이 소요됩니다.
4. 모든 절차를 오프라인으로 처리하다 보니 효율이 크게 떨어집니다.

 

결국, 이러한 방식으로는 식사 수요를 취합하는 데 필요한 노력을 줄이기 어렵다는 결론에 이르렀습니다.

그래서 직접 웹서비스를 개발하여 이 문제를 해결하고자 하였습니다.

 

 

 

1. 서비스 스펙 정하기

먼저 서비스가 제공해야 할 기능과 요구사항을 정리했습니다.

• DB: Key-Value 스토리지를 사용하는 방안을 고려했습니다. 읽기/쓰기 빈도가 높지 않고, 한 레코드당 컬럼 수는 최대 10개 정도, 연간 처리해야 할 레코드는 2만 건 이내로 예상됩니다. 테이블 수도 최대 4개 이하이면 충분할 것으로 봤습니다.
• 백엔드: 복잡한 로직이 없을 것으로 판단되어, 별도의 백엔드를 굳이 개발하지 않기로 했습니다.

이렇게 방향을 잡고 나니, 프론트엔드 위주의 구현에 서버리스 환경을 결합해 DB와 간단한 백엔드 기능을 처리하면 되겠다는 결론에 이르렀습니다.

고려한 조합은 크게 두 가지입니다.

1. Streamlit + AWS Lambda + AWS CloudFront
2. Next.js + Vercel + Supabase

처음에는 Streamlit + AWS Lambda + AWS CloudFront 조합을 검토했지만, Streamlit의 기능적 한계로 인해 제외했습니다.

서비스 특성상 자유로운 캘린더 기능이 필요한데, Streamlit에서는 캘린더 사용에 제약이 많았기 때문입니다.

• 참고: Streamlit Calendar 예시
  • 데모에서는 일정 및 데이터를 확인하는 기능은 제공되지만, 유저가 직접 데이터를 추가하거나 수정하는 기능은 지원되지 않습니다.

결국 Next.js + Vercel + Supabase 조합이 가장 적합하다고 판단하게 되었습니다.

 

 

 

2. 근데 개발은 어케함? (Cursor 세팅)

문제는 제가 프론트엔드 개발을 해본 적이 없다는 것이었습니다.

그래서 Cursor를 활용해 개발 환경을 구축해보기로 했습니다.

• Cursor IDE: https://www.cursor.com/
• 설치 후 Cmd + Shift + P → Cursor Settings → Rules for AI 에서 규칙을 설정할 수 있습니다.

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.

Key Principles
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
- Favor server components and Next.js SSR.
- Use only for Web API access in small components.
- Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.

 

 

이 내용은 아래링크를 참고해서 제일 괜찮은걸 입력하였습니다.

• https://cursor.directory/

또한 프로젝트 루트에 .cursorrules 파일을 만들고, 아래 깃헙을 참고하여 필요한 내용을 .cursorrules 에 명시해주었다.

• https://github.com/PatrickJS/awesome-cursorrules?tab=readme-ov-file

 

 

3. 근데 개발은 어케함?(Next.js)

사실 저는 npm, npx, React, Next.js가 무엇인지 전혀 몰랐습니다. 그래서 전부 ChatGPT에게 물어봤죠.

제가 처음으로 했던 질문은 다음과 같습니다:

tsx
복사편집
예약 사이트를 만드려고 해.
내가 생각하는 주요 기능은 다음과 같아.
- 회원가입 기능: 사용자가 직접 가입하거나, 관리자가 대신 가입처리 할 수 있어야 해.
- 사용자가 로그인 후 달력에서 날짜를 선택해 점심/저녁을 신청하도록 해야 해.
- 점심과 저녁 중 한 가지 혹은 두 가지 모두를 신청할 수 있어야 해.
- 신청은 비동기 처리로, 서버에 신청 내역이 전송되도록 해야 해.
- 개발 스택은 Next.js + Supabase + Vercel을 사용할 거야.

적절한 개발 순서와 데모 코드를 알려줄래?

이 질문을 통해 대략적인 개발 순서를 확인한 후, 가장 작은 기능 단위부터 구현하기로 했습니다.

그런데 역시 모르는 게 너무 많았어요. 그래서 이어서 이런 식으로 질문을 던졌습니다:

• npm과 npx의 차이는 무엇인가요?
• Next.js와 NextJS는 다른 건가요? (대소문자 표기 차이가 의미가 있나요?)
• 문법을 올바르게 쓰려면 어떻게 해야 하나요?
• Next.js 14 버전으로 프로젝트를 셋업하려면 어떤 명령어를 쓰면 되나요?
• 프로젝트를 Vercel과 Supabase에 연결하려면 어떤 명령어를 써야 하나요?

… 등등, 정말 기초적인 것부터 차근차근 물어보며 개발을 진행했습니다.

 

 

4. 그래서 완성된 화면은 이런 모습입니다!

아래 이미지는 로컬 환경(localhost)에서 실행 중인 개발 버전입니다.

사용자 화면: 사용자는 웹사이트에 접속해 원하는 날짜(점심/저녁)를 직접 신청할 수 있습니다.

 

 

이런식으로 전체유저 N 명이 각각 웹사이트로 접근하여, 각각 본인이 신청할 수 있도록 진행한다.

관리자 화면: 관리자는 별도의 대시보드를 통해 각 사용자들의 신청 내역과 상태를 한눈에 확인할 수 있습니다.

 

 

관리자 대시보드에서는 쿼리를 통해 모든 신청 데이터를 자동으로 취합하고, 추가적인 리소스 투입 없이도 집계 결과를 쉽게 파악할 수 있도록 구현했습니다.

 

 

5. 개발 후기

이번 개발 과정을 통해 느낀 점은 크게 세 가지입니다.

1. 개발에 대한 진입 장벽이 많이 낮아졌다.
2. AI를 활용하는 사람과 그렇지 않은 사람 사이의 격차가 점점 커지고 있다.
3. 새로운 기술을 학습하고 시도하기에 지금처럼 좋은 환경은 없다고 느꼈다.

이 정도로 정리해볼 수 있겠네요.

다음에는 더 새롭고 흥미로운 프로젝트에 도전해보려고 합니다.