AI 코딩 워크플로우: ChatGPT, Cursor, V0 활용 사례

이 문서는 ChatGPT, Cursor, Vercel의 V0를 사용해 AI 코딩 워크플로우를 진행한 사례를 설명합니다. 전체적으로 PRD 작성부터 기능 개발, UI 개선까지의 과정을 자세히 다루며, 각각의 도구를 활용하여 개발 시간을 절반으로 줄일 수 있었던 방법을 설명합니다. 이러한 워크플로우를 통해 AI 도구가 어떻게 협업과 개발 효율성을 높이는지 상세히 알아봅니다.

1. PRD 작성 및 초기 설정

먼저 프로젝트를 시작하기 위해 ChatGPT의 o1-preview 모델을 사용하여 제품 요구사항 명세서(PRD)를 작성했습니다. PRD는 프로젝트의 루트 디렉토리 내의 docs 디렉토리에 마크다운 형식으로 저장했습니다. 이를 통해 프로젝트 요구사항을 명확하게 정의하고, 개발의 방향성을 설정할 수 있었습니다. 명확하게 정의된 PRD는 팀원들 간의 협업 시에도 매우 유용하게 활용되어, 의사소통의 오류를 줄이고 프로젝트 목표에 대한 공감대를 형성하는 데 기여했습니다.

추가로 Cursor에 베이스 컨텍스트를 제공하기 위해 .cursorrules 파일을 생성했습니다. 이 파일에는 자주 사용하는 패키지 매니저, UI 컴포넌트 생성 규칙 등을 정의하여 개발 효율성을 높였습니다. 이러한 규칙들을 통해 프로젝트 초기에 필요한 기본 설정들을 자동화하고, 일관성을 유지하며 오류를 줄이는 데 큰 도움이 되었습니다. PRD와 베이스 컨텍스트를 통해 프로젝트의 기본 구조 세팅을 마무리한 후, 개발을 시작할 수 있는 튼튼한 기반을 마련했습니다.

2. 기능 개발 과정

Cursor를 사용하여 PRD를 기반으로 기능을 개발했습니다. PRD와 현재 디렉토리 구조를 컨텍스트로 넣어 개발을 진행했고, 기능은 작은 단위로 나누어 단계적으로 요청했습니다. 예를 들어, 일기 작성 및 관리 기능을 개발할 때는 일기 작성 페이지, 리스트 페이지, 상세 페이지, 공통 컴포넌트를 각각 나누어 개발했습니다. 이러한 작은 단위의 작업 분할은 작업의 복잡성을 줄이고, 개발 중 발생할 수 있는 오류를 신속하게 해결할 수 있게 합니다.

이 과정에서 중요한 점은 모든 기능을 한 번에 개발하지 않고, 작은 단위로 나누어 개발하고 이를 반복하는 것입니다. 이렇게 하면 작업의 진행 상황을 주기적으로 검토하고 피드백을 반영할 수 있어 전체 프로젝트의 품질이 높아집니다. 이를 통해 개발 중 오류 가능성을 줄이고, 기능별로 완성도를 높일 수 있었습니다. Cursor는 요청한 기능을 신속하게 개발하며, 코드 작성 시간을 크게 단축할 수 있었습니다. 이렇게 단축된 시간은 코드 품질을 높이기 위한 추가적인 작업에 활용되었습니다.

개발을 진행하면서 발생한 오류는 AI에게 직접 원인 분석을 요청하고 해결하도록 했습니다. 이러한 방식으로 개발자가 직접 오류를 파악하고 해결하는 과정에서 배울 수 있었으며, 프로젝트가 커지더라도 AI를 활용한 문제 해결 능력을 키울 수 있었습니다. AI를 통한 문제 해결 과정은 개발자의 성장에도 긍정적인 영향을 주었으며, 반복적인 문제를 효율적으로 해결할 수 있는 방법을 제시해 주었습니다.

3. 기능 구현 및 UI 개선

3.1 일기 작성 기능 개발

첫 번째로 일기 작성 및 관리 기능을 구현했습니다. 기본적인 일기 작성 페이지 생성 후, Cursor를 통해 PRD와 현재 폴더 구조를 참고하여 각 페이지 및 공통 컴포넌트를 개발했습니다. 여기에는 일기 작성 페이지, 리스트 페이지, 상세 페이지가 포함되며, 모든 기능이 제대로 동작하는지 확인했습니다. 이러한 구조적 개발을 통해 각 기능 모듈을 독립적으로 테스트하고 검증할 수 있었으며, 각 페이지가 의도한 대로 동작하는지 확인할 수 있었습니다.

이후 사용자가 일기를 작성할 때 날짜를 선택하고 제목을 제거하는 기능을 추가 요청했습니다. 이를 위해 ShadCN 컴포넌트 중 캘린더 컴포넌트를 추가하여 날짜 선택 기능을 구현했고, 제목 없이 일기를 작성할 수 있도록 페이지를 수정했습니다. 이러한 수정 사항들은 사용자 경험을 개선하기 위한 노력의 일환이었으며, 간편하고 직관적인 인터페이스 제공을 목표로 했습니다.

3.2 일기 수정 및 삭제 기능 개발

다음으로, 일기 수정 및 삭제 기능을 구현했습니다. 일기 삭제 기능은 로컬 스토리지에서도 일기가 제거되는 것을 확인했고, 수정 기능 역시 제대로 동작하는 것을 확인했습니다. 각 기능은 Cursor의 도움으로 손쉽게 개발되었습니다. 일기 수정 기능을 통해 사용자가 작성한 내용을 쉽게 수정할 수 있게 했으며, 삭제 기능은 불필요한 데이터를 간단하게 제거할 수 있도록 하여 전체적인 사용자 경험을 향상시켰습니다.

3.3 감정 분석 기능 추가

일기 작성 시 사용자의 감정을 분석하는 기능도 추가했습니다. OpenAI의 API 키를 관리하기 위해 .env.local 파일을 생성하고, OpenAI API를 호출하여 일기 내용을 분석한 감정을 저장하는 기능을 구현했습니다. 감정 분석 결과는 색상 및 아이콘으로 시각화되어 사용자가 쉽게 파악할 수 있도록 했습니다. 이러한 감정 분석 기능을 통해 사용자는 자신의 감정 상태를 시각적으로 확인하고, 일기 작성 경험을 보다 의미 있게 만들 수 있었습니다.

또한, 감정 분석 결과를 바탕으로 일기 리스트에 각 일기의 감정 상태를 한눈에 확인할 수 있는 인터페이스를 추가했습니다. 이 기능은 사용자가 자신의 감정을 되돌아보고 패턴을 이해하는 데 도움을 주며, 사용자에게 자기 성찰의 기회를 제공합니다.

4. UI 개선

기능 구현이 완료된 후, Vercel의 V0를 사용해 UI 개선 작업을 진행했습니다. UI 컴포넌트 디자인을 개선하고 일관성을 유지하기 위해 V0에 PRD와 기본 디자인 이미지를 제공했습니다. 이를 통해 React 컴포넌트의 디자인을 업데이트하고, 사용자 경험을 향상시켰습니다. 사용자 인터페이스는 프로젝트의 성공에 중요한 요소이기 때문에, 디자인의 일관성을 유지하며 모든 페이지에서 직관적이고 사용하기 쉬운 UI를 제공하는 것을 목표로 했습니다.

또한, 프레이머 모션 라이브러리를 활용하여 일기 목록 페이지에 모션 이펙트를 추가함으로써 사용자 인터페이스가 더욱 생동감 있게 개선되었습니다. 이러한 모션 효과는 사용자와의 상호작용을 더 재미있고 유연하게 만들어줍니다. 이를 통해 사용자들이 애플리케이션을 사용하는 동안 시각적으로 흥미로운 경험을 할 수 있었습니다.

반응형 디자인을 적용하여 다양한 기기에서도 일관된 사용자 경험을 제공하도록 했습니다. 모바일, 태블릿, 데스크톱 환경에서의 사용성을 고려한 반응형 디자인은 현대 웹 애플리케이션에서 필수적인 요소입니다. 이로 인해 모든 사용자가 어떤 기기에서든 원활하게 서비스를 이용할 수 있었습니다.

5. 최종 결과 및 결론

이러한 AI 코딩 워크플로우를 통해 개발 생산성을 크게 향상시킬 수 있었습니다. ChatGPT로 작성된 PRD를 바탕으로 Cursor를 사용해 기능을 개발하고, V0를 통해 UI를 개선하면서 기존의 개발 방식보다 효율적이고 오류가 적은 프로젝트를 빠르게 완성할 수 있었습니다. 또한, AI 도구를 활용하여 반복 작업을 줄이고, 창의적인 문제 해결에 집중할 수 있었습니다. 이러한 워크플로우는 개발자들에게 실질적인 도움을 줄 수 있는 도구로 자리 잡았으며, 개발 시간 절약뿐만 아니라 코드의 품질을 높이는 데도 큰 기여를 했습니다.

AI 코딩 워크플로우의 가장 큰 장점 중 하나는 AI가 자동으로 반복적인 작업을 처리해 줌으로써 개발자가 더 중요한 문제에 집중할 수 있게 한다는 것입니다. 예를 들어, UI 개선