프로젝트 소개
🧩 프로젝트 툴을 직접 만들게 된 이유
회사에서 여러 팀이 프로젝트, 업무(Task), 주간보고를 각각 다른 방식으로 관리하고 있었어요.
현재 시장에 나와있는 프로젝트 툴은 많지만 딱 필요한 것만 있는 가벼운 프로젝트 툴이 필요했다
그래서 우리만의 프로젝트 툴을 만들기로 했습니다.
업무(Task) → 주간 계획 → 주간 보고서가 자연스럽게 이어지는! + AI 다 써보자 ( Figma make, GPT, Cursor, copilot)
⏱️ 프로젝트 개요
개발 기간: 약 6주 (2025.10 ~ 2025.11)
순수 개발 기간은 약 10일 이후 2-3주 주니어 개발자 1인이 수정 배포를 수행함.
3주는 주니어 개발자 1인이 수정·배포를 수행.
AI 도입 효과: 개발 소요시간 약 40% 단축
개발 단계: 분석 → 설계 → 디자인 → 개발 → 테스트 → 배포
현재 버전: v1.0 배포 완료
⚙️ 기술 스택
- Frontend: React (Vite, TypeScript, Tailwind)
- Backend: Spring Boot + eGovFrame + MyBatis
- DB: MariaDB 10.11
- AI Toolchain: GPT, Copilot, Cursor
- Design: FigmaMake
개발 단계
1️⃣ 분석·설계 – GPT와 함께 구조부터 잡기
처음에는 제가 하고 싶은 시스템을 자연어로 GPT에게 설명했어요.
그러면 GPT가 도메인 모델이나 데이터 흐름을 초안으로 만들어 줍니다.
저는 그 초안을 실제 회사 업무 흐름에 맞게 다듬었고요.
핵심적인 도메인
- 프로젝트
- 업무(Task)
- 주간 계획
- 주간 보고서
- 첨부파일
- 댓글
- 팀 멤버와 권한
전체 개발 프로세스는
Figma → GPT 명세 자동화 → Cursor 코드 생성 → React → Spring Boot → Tomcat
기존 방식보다 훨씬 빠르게 구조를 잡을 수 있었습니다.
2️⃣ 디자인 – Figma Make로 화면 자동 생성
UI는 Figma Make + Clobe Plugin 조합으로 만들었어요.
GPT에게 “이런 시스템을 만들 거야”라고만 설명하면, 정말 필요한 화면을 거의 다 뽑아줍니다.
- 사용한 프롬프트 (figma Make는 영어를 더 잘 인식한다고 들었음..)
“Create a modern responsive web dashboard UI for an internal Project Management and Weekly Report System. The system includes: Login and member management (admin can create, edit, delete members; fields: name, email, phone, password, role, join date, status). Layout: sidebar navigation (Members / Projects / Weekly Reports / Settings)... Style: clean, modern, blue (#2563eb) and white color palette, rounded corners....
이 프롬프트 하나로 전체 UI의 90%가 자동으로 만들어졌습니다.
디자인 단계에서는 완성도를 높이기보다 빠르게 초안을 확보하는 것이 목표였는데, AI 덕분에 이 단계가 정말 빨랐어요.
이후 색깔, 여백, 컴포넌트 조정은 Cursor에서 미세 조정을 해서 마무리했습니다.
3️⃣ DB·API 설계
데이터베이스와 API 설계는 반복 작업에 가까웠어요.
- FigmaMake → 구조 자동 추출
- GPT가 이를 표 형태·스키마 형태로 정리
- 개발자가 실제 업무 규칙에 맞게 컬럼과 제약 조건을 보완
AI가 초안을 만들어주는 속도가 빨라서 저는 디테일한 부분만 수정했습니다.
이 단계에서 시간 절약 효과가 매우 컸습니다.
4️⃣ 개발 – GPT → Copilot → Cursor로 이어지는 개발 체인
기능 하나를 개발할 때마다 이렇게 진행했어요.
- GPT에게 기능 요구사항 설명
- GPT가 Copilot에 넘길 프롬프트 생성
- Copilot이 Controller–Service–Mapper 코드 생성
- 생성된 코드를 기반으로 GPT가 Cursor용 프롬프트 작성
- Cursor가 React UI와 API 연결까지 자동 구현
제가 직접 타이핑을 하는 코드는 거의 없었고 코드를 검토하고 판단하는 시간이 더 많았어요.
5️⃣ 테스트·보완 – AI는 빠른 분석 보조 역할
테스트 단계에서도 GPT는 유용했어요.
- 에러 로그 원인 분석
- 매핑 오류 위치 찾기
- 의심되는 부분 추려주기
- Cursor는 리팩토링과 정리 작업을 빠르게 해줬습니다.
마무리
😵 AI를 쓰면서 느꼈던 어려움
AI는 빠르지만 의사결정은 사람이 해야 한다.
질문을 조금만 바꿔도 다른 답이 나오고
장단점만 나열하고 결론을 안 내리고
조직의 상황이나 맥락을 이해하지 못하죠
결국 “어떤 방식이 맞는가?”는 개발자가 판단해야 했습니다.
=> 그래서 개발자에게는 최종 판단을 내릴 수 있는 지식과 기준이 반드시 필요합니다.
AI가 제안은 해줄 수 있지만 의사결정을 하는 책임은 결국 사람에게 있기 때문입니다.
새로운 기능을 만들 때보다, 기존 코드를 수정할 때 AI는 훨씬 약하다.
- 관련 파일을 제대로 찾지 못함 ( 파일 이름이 비슷할때 )
- 엉뚱한 부분을 수정하려고 함 (아주 디테일하게 설명해야함, cursor 의 'add to chat"기능 활용하면 좋음)
- 기존 구조와 맞지 않는 코드 제안
- 존재하는 함수를 활용하지 못하고 중복되는 기능을 다시 만듬 (코드가 너무 길어져서 수정속도가 느려짐.
그래서 기존 코드를 손볼 때는 두 가지 선택지가 생겼습니다.
아예 처음부터 아주 디테일하게 범위를 잡고 AI에게 다시 요청하거나
잘못된 방향으로 가기 시작하면 과감히 undo하고 처음부터 다시 시작하는 게 더 빠를 때도 있습니다.
기존 코드 수정은 AI보다 사람이 직접 구조를 파악하고 판단하는 쪽이 더 효율적인 순간이 많았습니다.
🔎 사용해본 AI 특징과 실제 활용 모습
GPT → 설계·명세 정리 및 정확한 프롬프트 작성
요구사항을 빠르게 구조화하고 명세로 정리해 주었으며,
Cursor와 Copilot에서 바로 활용할 수 있는 정확한 프롬프트를 만드는 데 큰 역할을 했습니다.
Figma Make → 디자인 자동 생성 + 초기 프론트 코드 초안 생성
디자인을 정말 순식간에 만들어줄 뿐 아니라,
프론트엔드에서 바로 활용 가능한 UI 코드 초안까지 자동 생성해 주었습니다.
초기 화면을 ‘바로 써도 될 정도’로 만들어 주는 점이 특히 놀라웠고,
백엔드 개발자 입장에서는 더 흥미로운 경험이었습니다.
Cursor(프론트엔드) → UI·상태 관리·API 연동 구현 가속화
Figma Make로 만들어진 화면을 기반으로 빠르게 UI와 로직을 붙일 수 있었고,
특히 Plan 모드와 Add to Chat 기능을 활용하면
필요한 변경 지점을 지정해 해당 부분 위주로 정확하게 수정해 주어
프론트 개발 속도가 크게 향상되었습니다.
Copilot(백엔드) → 백엔드 기본 구조 및 구현 자동 생성
2025.10.27 - [work] - 프론트 페이지 리팩토링
2025.10.27 - [work] - 프론트 페이지 리팩토링
Controller–Service–Mapper 구조와 기본 로직을 빠르게 생성해 주었고,
Eclipse 환경에서도 매끄럽게 작동하여 백엔드 개발 시간을 크게 줄였습니다.
다만 코드 생성 속도 자체는 Cursor가 훨씬 더 빠르게 느껴졌습니다.
=> 이 조합 덕분에 6주 예상 일정이 2주로 60%이상 단축될 만큼 효과가 컸습니다.
💬 바이브 코딩 개발 회고
AI를 잘 쓰려면 오히려 더 탄탄한 설계가 필요하다
요구가 조금만 모호해도 결과가 흐려지고 세부 조건을 정확하게 잡아주지 않으면 AI가 엉뚱한 방향으로 가더라고요.
그래서 자세한 프롬프트의 중요성을 느꼈습니다.
방향을 결정하는 건 개발자의 역할
AI가 여러 옵션을 던져줘도, 그중에서 어떤 방식이 맞는지 고르고
전체 구조를 보완하는 일과 책임을 지는 건 개발자라는 걸 다시 느꼈습니다.
AI는 개발자를 대체제보다는 개발자의 판단력과 기준을 기반으로 개발 속도를 빠르게 만들어주는 도구
잘 쓰면 엄청난 가속 장치가 되고 잘못 쓰면 오히려 돌아가는 시간이 더 늘어나는 그런 도구라고 생각합니다.
이후에도 앞으로 AI가 얼마나 발전되었는지 앞으로 얼마나 빠르고 똑똑하게 발전할지 기대되는 경험이었습니다.
* 참고 *
프로젝트 진행중 과정을 남기 포스팅
2025.10.13 - [work] - 업무관리 프로젝트 (Figma make)
2025.10.14 - [work] - 주간보고 페이지 수정
2025.10.16 - [work] - 전자정부 프레임워크 4.3.0과 copilot 같이 쓰기
2025.10.20 - [work] - 백엔드(copilot) 을 사용한 후 프론트엔드 (cusor) 로 연결
2025.10.20 - [work] - Copilot으로 만드는 댓글 관리 API
2025.10.27 - [work] - 프론트 페이지 리팩토링
2025.10.27 - [work] - 팀 멤버 추가 api 구현 (gpt, copilot)
2025.10.29 - [work] - 기능 추가 - 날짜 필터링
'work' 카테고리의 다른 글
| 기능 추가 - 날짜 필터링 (0) | 2025.10.29 |
|---|---|
| 팀 멤버 추가 api 구현 (gpt, copilot) (0) | 2025.10.27 |
| 프론트 페이지 리팩토링 (0) | 2025.10.27 |
| Copilot으로 만드는 댓글 관리 API (0) | 2025.10.20 |
| 백엔드(copilot) 을 사용한 후 프론트엔드 (cusor) 로 연결 (0) | 2025.10.20 |
