Cursor와 AI를 활용한 애플리케이션 개발 경험
1. 소개
현재 많은 기업들이 AI를 적극적으로 도입하여 애플리케이션을 개발하고 있다. 내가 다니고 있는 회사 또한 AI를 적극적으로 도입하여 모두가 개발하고 있다. 단순 개발뿐만 아니라 새롭게 개발된 AI 기술, AI를 활용한 개발 역량 향상 방법 등 다양한 지식들이 공유되면서 자연스럽게 AI에 대한 관심이 높아졌다.
개발 과정에서 Claude-3.7과 같은 생성형 AI를 활용해 보니, AI와 효과적으로 협업하기 위해서는 명확한 문서화가 매우 중요하다는 점을 깨달았다. 생성형 AI에게 불명확한 질문을 하면 부정확한 정보로 응답하거나, 정답이라도 유용하지 않은 답변을 제공했기 때문이다.
따라서 "잘 질문하는 능력"이 AI 활용의 핵심이라고 생각하며, 특히 복잡한 질문이나 코드 기반 질문을 할 때는 체계적인 문서화가 필수적이다. 문서화된 파일을 제공하여 AI에게 질문하는 것과 단순 텍스트 형태로 질문하는 것 사이의 응답 품질 차이는 상당히 크다고 느꼈다.
이번에는 기존에 만들어진 애플리케이션을 수정하는 것이 아닌, 백지 상태에서 AI만을 활용하여 원하는 애플리케이션을 개발해 보는 경험을 공유하고자 한다.
2. 요구사항 문서화
먼저 개발하고자 하는 애플리케이션의 요구사항을 명확하게 문서화했다.
원하는 애플리케이션의 형태는 다음과 같다:
AWS 자격증을 취득하기 위해 미리 준비되어 있는 미리 준비되어 있는 객관식 형태의 덤프 문제를 제공하려고 해. 사용자는 마우스 클릭을 통해 객관식 문항 중에서 정답을 선택할 수 있어. 정답이라면 문제와 선택한 문항을 종합하여 간단하게 정리하여 해석본을 제공하고, 오답이라면 각 문항에 대해서 오답인 이유를 설명해야해.
프론트엔드와 백엔드 둘 다 구성해야 해야해.
- 프론트엔드: HTML + Thymeleaf
- 백엔드: Java + SpringBoot(Gradle)
- DB: MySQL(운영), H2(로컬)
덤프 문제의 경우 내가 덤프 파일을 모아둔 파일을 제공하면 DB 테이블을 생성하여 저장하면돼.
사용자에게 보이는 문제는 기본적으로 검은색 글씨로 보여주면 되고, 선택한 문항이 정답이라면 초록색으로 변경하고, 오답이라면 빨간색으로 변경해. 이때, 선택한 오답 문항을 빨간색으로 표시하고, 정답인 문할을 초록색으로 보여줘. 즉, 내가 선택한 문항이 오답일 때 해당 문항을 빨간색으로 표현하고 정답 문항을 초록색으로 보여주면 돼.
메인 페이지는 @https://aws.amazon.com/ko/certification/exams/ 에 있는 자격증 리스트를 보여주고, 사용자가 해당 자격증을 선택하면 덤프 문제를 보여주는 형태로 만들어야 해. 그리고 마이 페이지를 만들어서 각 자격증에 대해서 몇 문제를 풀었는지 (A/B) 형태와 게이지 형태 두 개를 모두 보여줘야 해. 또한, 각 자격증에 대해서 오답으로 체크한 문항을들 모아둬야해.
코드를 작성하지 않고, 내 요구사항에 대해 step1, step2 형태로 구분하여 너에게 요청해야할 프롬프트를 작성해.
2-1. 단계별 개발 접근법
생성형 AI에게 모든 요구사항을 한 번에 전달하는 것보다, 개발 과정을 여러 단계로 나누어 작업하는 것이 더 정확한 결과를 얻을 수 있다고 판단했다.
따라서 GPT에게 요청하여 다음과 같이 개발 단계를 세분화하였다:
Step 1: 프로젝트 설정 및 도메인 모델 설계
"AWS 자격증 덤프 문제 애플리케이션의 기본 프로젝트를 설정하고 필요한 엔티티를 설계해주세요. Java + SpringBoot(Gradle) 백엔드, HTML + Thymeleaf 프론트엔드, MySQL/H2 데이터베이스 환경으로 구성하고, 자격증, 문제, 보기, 사용자 진행 상황을 관리할 수 있는 엔티티 및 리포지토리를 구현해주세요. aws.amazon.com/ko/certification/exams/에서 자격증 정보를 가져와 초기 데이터로 활용하는 방안도 포함해주세요."Step 2: 메인 페이지 및 자격증 목록 기능 구현
"AWS 자격증 목록을 보여주는 메인 페이지를 구현해주세요. 자격증 정보(이름, 설명, 시험 비용, 지원 언어 등)를 표시하고, 사용자가 특정 자격증을 선택했을 때 해당 자격증의 덤프 문제로 이동할 수 있도록 구현해주세요. 또한 덤프 파일을 파싱하여 데이터베이스에 문제와 보기를 저장하는 기능도 함께 구현해주세요."Step 3: 문제 풀이 및 채점 기능 구현
"사용자가 객관식 형태의 덤프 문제를 풀고 결과를 확인할 수 있는 기능을 구현해주세요. 문제와 보기를 표시하고, 마우스 클릭으로 정답을 선택할 수 있어야 합니다. 정답일 경우 초록색으로 표시하고 간단한 해석을 제공하며, 오답일 경우 선택한 보기는 빨간색으로, 정답인 보기는 초록색으로 표시하고 오답 이유를 설명해야 합니다. 사용자의 진행 상황을 저장하는 기능도 함께 구현해주세요."Step 4: 마이 페이지 및 오답 노트 기능 구현
"사용자의 학습 진행 상황을 확인할 수 있는 마이 페이지를 구현해주세요. 각 자격증에 대해 풀이한 문제 수를 'A/B' 형태와 게이지 형태로 동시에 표시하고, 오답으로 체크한 문항들을 자격증별로 모아서 볼 수 있는 오답 노트 기능을 구현해주세요. 사용자가 오답을 다시 풀어볼 수 있도록 기능을 제공해야 합니다."Step 5: UI/UX 개선 및 배포 준비
"애플리케이션의 전반적인 디자인과 사용자 경험을 개선해주세요. 문제 풀이 화면에서의 색상 변경, 마이 페이지의 진행률 시각화 등을 구현하고, 로컬 개발 환경(H2)과 운영 환경(MySQL) 간의 원활한 전환이 가능하도록 설정해주세요. 필요한 테스트를 수행하고 배포할 준비를 완료해주세요."
3. 개발 과정 및 AI 활용
Cursor를 사용하여 위 문서를 파일로 저장한 후, 각 단계별로 AI에게 작업을 수행하도록 요청했다:
Cursor가 요청을 수행하기 위해 코드 및 파일을 직접 작성하여 추가한다. 사용자는 "Accept" 버튼만 클릭하여 AI가 생성한 코드를 적용할 수 있다:
개발 과정에서 발생하는 문제들도 프롬프트를 통해 AI에게 해결 방법을 요청할 수 있다. 현재 개발에서는 간단한 오류였으므로 단순 텍스트로 해결을 부탁했지만, 복잡한 오류가 발생하는 경우에는 문제 상황을 상세히 문서화하여 제공하는 것이 효과적이다:
특히 AI는 코드 분석과 문서화 작업에서 뛰어난 능력을 보여준다. 개발이 완료된 후 프로젝트에 대한 README 작성을 요청했더니, AI가 프로젝트 구조를 자동으로 분석하여 체계적인 문서를 생성했다:
이러한 능력은 특히 익숙하지 않은 코드베이스를 분석해야 할 때 매우 유용하다. 인간이 일일이 분석하는 것보다 빠르고 효율적으로 코드 구조를 파악할 수 있다.
4. 결과 및 소감
위 과정을 통해 AWS 자격증 대비를 위한 웹 개발이 완료되었다. 사용자가 문제를 풀고 정답/오답을 확인할 수 있으며, 오답 노트를 통해 취약한 부분을 집중적으로 학습할 수 있는 기능을 모두 구현했다.
가장 놀라운 점은 개발 시간의 효율성으로, 전체 애플리케이션을 1시간 내외로 구축할 수 있었다. 이는 AI를 활용한 개발 방식의 잠재력을 보여주는 사례라고 생각한다.
앞으로 AI의 발전은 더욱 가속화될 것으로 예상되며, 단순히 AI에게 일자리를 빼앗긴다는 걱정보다는 "AI를 효과적으로 활용하는 능력"이 중요한 경쟁력이 될 것이다. 따라서 나 또한 프로그래밍 능력뿐만 아니라 AI를 효과적으로 활용하는 방법도 지속적으로 배우고자 한다.
개발된 프로젝트의 소스 코드와 문서는 다음 GitHub 저장소에서 확인할 수 있다.