Cursor AI로 게시판 풀스택 개발 실험 후기

이번 프로젝트는 Cursor AI의 코드 생성 능력을 검증해보고, 실제 실무 수준의 게시판 시스템을 얼마나 빠르게 구현할 수 있는지를 확인하기 위한 실험이었습니다.
백엔드는 제가 익숙한 Spring Boot 기반으로, 프론트는 유지보수만 경험해봤던 Vue 3 기반으로 구성했습니다.

프로젝트 개요

• 목적: Cursor AI를 통해 바이브 코딩 실험 - 얼마나 빠르게 정확한 기능을 구현할 수 있는가?
• 백엔드: Spring Boot + Spring Security + JPA + MySQL
• 프론트엔드: Vue 3 + TypeScript + Vite + Tailwind CSS + Pinia + Axios
• Repository: https://github.com/devHjlee/cursorboard

사용한 Cursor 프롬프트

백엔드 프롬프트

Spring Boot 기반의 백엔드 게시판 API를 JPA + MySQL 환경으로 구현해주세요...
Spring Boot 기반의 백엔드 게시판 API를 JPA + MySQL 환경으로 구현해주세요.

패키지 구조:
- 루트 도메인은 user, post, config, security이며,
- user, post 패키지에는 각각 다음과 같은 하위 계층이 존재합니다:
  - api: Controller
  - application: Service
  - domain: Entity
  - infrastructure: Repository

공통 개발 요구:
- 모든 컨트롤러는 @RestController로 작성해주세요.
- 요청/응답은 반드시 DTO로 구성해주세요.
- 공통 예외 처리를 위한 GlobalExceptionHandler를 구현해주세요.
- 모든 엔티티에는 createdAt, updatedAt 필드를 포함해주세요. (JPA Auditing 기반)

기능 요구 사항:

1. 사용자 인증/인가:
   - Spring Security 기반의 JWT 인증/인가 처리 적용
   - 로그인, 회원가입 API는 인증 없이 접근 가능해야 함
   - 회원가입 시 이메일 중복 체크 API 제공
   - 회원가입은 이메일, 비밀번호만 입력
   - 사용자 권한은 USER / ADMIN 두 가지

2. 게시글 관련 기능:
   - 게시글 작성, 수정, 삭제 기능
     - 로그인 사용자만 가능하며, 삭제는 작성자 또는 ADMIN 권한만 가능
   - 게시글 목록 조회: 인증 없이 접근 가능
   - 게시글 상세 조회:
     - 제목, 내용, 댓글 목록까지 포함된 단일 API 제공
     - 댓글에는 작성자 이메일, 댓글 내용 포함

3. 댓글 기능:
   - 게시글 상세 하단에 댓글 목록 출력
   - 로그인 사용자는 댓글 등록 가능
   - 삭제는 본인 또는 ADMIN만 가능

기술 스택:
- Spring Boot 3.x
- Spring Security + JWT
- JPA + MySQL
- DTO 분리 설계
- 단일 API 호출로 게시글 + 댓글 동시 반환 (상세 조회)

프론트엔드 프롬프트

Vue 3 + Vite 기반의 TypeScript SPA 프론트엔드 프로젝트를 생성해주세요...
기본 조건:
- 전체 SPA 구조이며, Vue Router를 사용해 각 화면을 라우팅 처리해주세요.
- 상태 관리는 Pinia를 사용하고, 로그인 상태 및 JWT 토큰을 Pinia로 관리해주세요.
- Axios를 통해 백엔드와 통신하며, JWT 토큰은 Authorization 헤더에 자동 포함되도록 설정해주세요.
- Axios 설정은 별도 파일로 분리해주세요.
- 프로젝트 구조는 views/, components/, store/, router/ 디렉토리로 구성해주세요.
- 기본적인 Tailwind CSS 또는 기타 UI 스타일을 적용해주세요. 화면이 너무 밋밋하지 않게 구성해주세요.

화면 구성:
1. 로그인 페이지 (/login)
   - Email, Password 입력 필드
   - 로그인 요청 후 JWT 토큰을 localStorage에 저장
   - 로그인 성공 시 게시글 목록 페이지(/posts)로 이동

2. 게시글 목록 페이지 (/posts)
   - 전체 게시글 조회
   - 게시글 클릭 시 상세 페이지(/posts/:id)로 이동
   - 각 게시글에는 수정(/posts/:id/edit) 및 삭제 버튼 표시
   - 상단에는 게시글 등록 버튼(/posts/write) 표시

3. 게시글 상세 페이지 (/posts/:id)
   - 게시글 제목, 내용, 작성자 출력
   - 하단에 댓글 목록 출력
   - 댓글 작성 기능 포함

4. 게시글 등록 페이지 (/posts/write)
   - 제목, 내용 입력 필드
   - 저장 시 목록 페이지로 이동

5. 게시글 수정 페이지 (/posts/:id/edit)
   - 기존 게시글 내용 로드 후 수정 가능
   - 수정 완료 시 상세 페이지로 이동

6. Not Found 페이지 (/404)
   - 존재하지 않는 경로로 접근 시 표시

공통 요구사항:
- 로그인하지 않은 사용자가 보호된 라우트에 접근하면 /login으로 리디렉션 처리
- 모든 인증이 필요한 버튼(글쓰기, 수정, 삭제 등)은 로그인 상태에서만 노출
- 댓글 작성 시 로그인 상태가 아니라면 로그인 페이지로 안내
- API 요청 실패 시 사용자에게 알림 메시지를 띄우는 기본 에러 핸들링 처리

기타:
- 작동이 가능한 실제 코드로 구성해주세요.
- 컴포넌트와 페이지는 명확하게 분리하고, 파일명과 폴더명은 일관성 있게 작성해주세요.

작업 및 검증 시간

• 백엔드: Cursor가 생성한 구조를 제가 직접 검토하고, 빠진 예외 처리, 실무에서 필요한 보완 작업 및 오류 해결에 약 2시간 소요
• 프론트엔드: Vue 구조나 문법은 깊게 검증하지 못했지만, 주요 기능 (로그인, 글 CRUD, 댓글 등) 테스트 기준 1시간 이내로 완료

프로젝트 구조 요약 (Backend + Frontend)

Backend 주요 구조

com.cursorboard
├── config              # CORS, Security 설정 등
├── security            # JWT 토큰 발급 및 필터 처리
├── user                # 회원가입, 로그인 API (api/application/domain/infrastructure)
├── post                # 게시글, 댓글 API (api/application/domain/infrastructure)

Frontend 주요 구조

src/
├── views/              # login, posts, postDetail, write 등 페이지
├── components/         # Header, PostItem 등 UI 컴포넌트
├── store/              # auth 상태 관리 (JWT 저장)
├── router/             # Vue Router 설정
├── api/axios.ts        # Axios + JWT 헤더 처리

결과 요약

Cursor AI는 실무적으로 사용하기에 충분한 기반 코드를 빠르게 생성해주며, 특히 백엔드에서는 제가 사전에 구성해왔던 도메인 기반 설계와 잘 맞았습니다.
Vue는 단순 유지보수만 진행해 왔었고 프로젝트 초기 구축을 진행해 본적이 없었기에 구조나 스타일에 대한 세부 제어는 어려웠지만, CRUD 단위 기능 동작은 빠르게 확인할 수 있어 충분히 프로토타이핑 도구로 활용 가능합니다.