Cursor + LLM 을 이용한 개발 방식 참고

Engineering Manager와 사이드 프로젝트 경험 공유

약 5년 전부터 Engineering Manager 역할을 맡으며, 주 업무에서 직접 코드를 작성할 일이 줄어들었습니다. 하지만 업무 외에도 개인 프로젝트를 꾸준히 진행하며 프로그래밍 감각을 유지하고 기술력을 다져왔습니다.

과거에는 시간 제약으로 프로젝트 진행이 느리고 완성 전에 중단되는 경우가 많았지만, 2024년에는 필요한 도구를 빠르게 개발하고 배포하여 첫 번째 버전을 완성하는 습관을 가지게 되었습니다.

LLM과 Cursor IDE 활용

LLM은 사이드 프로젝트의 생산성을 크게 향상시켰으며, 특히 Cursor IDE는 LLM을 코딩 작업에 활용하는 과정을 더욱 편리하게 만들어 주었습니다.
하지만, LLM이 모든 작업에 적합한 것은 아니기 때문에 직접 사용해보며 적용할 영역을 신중히 선택해야 합니다.

예시 프로젝트: 습관 추적 웹사이트

전체 프롬프트

현재 사용하는 습관 추적 앱을 웹사이트로 구현하고자 합니다. 이 프로젝트는 사용자 프라이버시를 고려하여 모든 데이터를 로컬 기기에 저장하도록 설계되었습니다.

1. 스펙 구상

ChatGPT와의 협력
간단한 설명을 제공하고 추가 질문을 받아가며 애플리케이션 스펙을 구체화함.
구체적 스펙 정리
"다른 사람이 이 스펙만 보고 전체 앱을 만들 수 있을 정도"로 정리 요청.
기술 스택은 TypeScript, React, Tailwind CSS를 명시하여 해당 기술 기반으로 작성.
SPEC.md 저장
최종 스펙은 SPEC.md로 저장해 개발 과정에서 참조.

예시

ChatGPT o1을 사용해서 애플리케이션 스펙을 더 구체화합니다. 그렇게 하는 이유는 문제의 범위를 정의하는 데 도움이 되고, 최종적으로 얻는 스펙을 코드 부트스트랩의 다음 단계에서 사용할 수 있기 때문입니다. 직접 스펙을 작성할 수도 있지만, 몇 문장으로 시작해서 ChatGPT o1을 통해 더 자세한 스펙으로 발전시키는 과정이 시간을 절약하는 데 매우 유용했습니다. 저는 또한 ChatGPT가 추가 질문을 통해 아이디어를 더 구체화할 수 있도록 요청합니다.

시작 프롬프트 예시 예를 들어, 아래와 같은 아이디어로 시작할 수 있습니다:

"습관 추적을 위한 웹사이트를 만들고 싶습니다. 사용자는 월별 열(column)과 날짜별 행(row)으로 이루어진 표를 보게 됩니다. 사용자는 특정 날짜에 습관을 계속했는지 간단히 선택할 수 있으며, 모든 데이터는 로컬 저장소에 저장됩니다. 아이디어를 더 구체화하기 위해 질문을 해주세요."

질문을 여러 번 받고 각각 답변을 하지만, 질문이 계속 이어지고 있습니다. 어느 정도 충분한 세부 정보가 수집되었다고 판단되면, 다른 사람이나 AI가 해당 애플리케이션을 만들 수 있도록 상세한 명세(spec)를 작성해달라고 명확히 요청해야 합니다. 또한, 제가 가장 익숙한 기술을 선호한다고 명시하고 있습니다.

"그 질문들에 대해 적절하게 답변하고, 그 정보를 바탕으로 프로젝트 명세(spec)를 작성해 주세요. 해당 명세는 다른 사람이나 AI가 웹사이트를 개발할 수 있도록 충분한 세부 사항을 포함해야 합니다. 프로젝트의 전반적인 설명, 사용자 경험(UX), 기술적인 세부 사항이 포함되어야 합니다. 기술 스택은 TypeScript, React, Tailwind CSS를 사용하고 싶습니다."

ChatGPT가 완성한 스펙은 프로젝트 폴더 내 SPEC.md 파일에 저장합니다. 우리는 프로젝트를 진행하는 동안 계속해서 이 스펙을 참조할 것입니다.

2. 프로젝트 부트스트랩

Vite 사용
npm create vite@latest . 명령어로 프로젝트 골격을 빠르게 설정.
SPEC.md를 프로젝트 폴더에 포함.
Cursor IDE 활용
Cursor의 Composer 에이전트 기능으로 Tailwind 설정 및 기본 파일 수정을 자동화.
예상 UX 레이아웃, 로컬스토리지 사용, Markdown 내보내기 등 1차 기능을 빠르게 구현.

3. 작은 단위로 반복 작업

기능 요청의 분리
한 번에 많은 기능을 요청하지 않고, UX 변경, 버그 수정 등을 작은 단위로 나누어 LLM에 요청.
이미지 활용
Chat에 이미지를 첨부해 원하는 디자인을 설명하고, 이를 코드로 구현하도록 요청.

4. 지속적 배포 설정

GitHub Actions
main 브랜치에 커밋이 올라가면 자동으로 빌드 후 GitHub Pages에 배포하도록 설정.
Cursor에서 제공한 .yml 파일 예시를 활용해 배포 파이프라인 구성.

종합 팁

프로젝트 개요 정리
LLM으로 프로젝트 개요 및 세부 사항을 정리해 컨텍스트로 활용.
오픈소스 템플릿과 도구 활용
부트스트랩 및 구조 설정을 빠르게 완료.
작업 도구 활용
- Cursor Composer: 프로젝트 시작을 가속화.
- Claude-3.5-Sonnet과 o1 모델 혼합 사용: 초안 작업은 o1, 구체적인 수정은 Claude-3.5-Sonnet으로 진행.
적절한 모드 선택
- Chat 모드: 구체적 위치 변경.
- Composer 일반 모드: 여러 파일 작업.
- Composer 에이전트 모드: 자동화된 작업.
컨텍스트 제공
- 관련 문서를 Markdown 형식으로 저장하고 컨텍스트에 포함.
- .cursorrules 파일로 특정 규칙 적용.
작업 단위 분리
- 작은 단위로 작업해 효율성 극대화.
- 리팩터링과 모듈 분리를 통해 코드 품질 유지.

마무리

이와 같은 방식으로 프로젝트를 신속히 배포 가능한 버전으로 완성하면, 잠시 쉬더라도 다시 시작하기 수월합니다.
작게 완성하는 습관은 프로젝트 동력을 유지시켜주고, 작은 성과를 통해 꾸준히 동기부여를 얻을 수 있습니다.