nomad coder // 2025.01.25
ux 구현툴 >>
v0 by Vercel
Chat with v0. Generate UI with simple text prompts. Copy, paste, ship.
v0.dev
https://zohaib.me/using-llms-and-cursor-for-finishing-projects-productivity/?
Using LLMs and Cursor to become a finisher
Struggling to finish side projects due to limited time? In my latest blog post, I share how I improved my productivity using AI tools like LLMs and Cursor IDE. Learn to refine specs, bootstrap code, and iterate effectively to rapidly build and deploy your
zohaib.me
AI 도구를 활용한 사이드 프로젝트 완성법: LLMs와 Cursor IDE로 생산성 향상하기
엔지니어링 매니저로 일한 지난 5년 동안 본업에서 코딩을 할 기회가 적었지만, 사이드 프로젝트를 통해 지속적으로 개발 능력을 유지하고자 했습니다. 과거에는 시간이 부족해 프로젝트가 중단되는 경우가 많았지만, 2024년에는 AI 도구를 활용하여 많은 프로젝트를 빠르게 완료할 수 있었습니다.
💻 최근 완료한 프로젝트 예시
- jsonplayground.com: 브라우저 내 JSON 포매팅 및 JQ 실행 (데이터 유출 없음)
- webtomarkdown.com: 웹 페이지 및 문서를 마크다운으로 변환
- Soaring 클럽 웹사이트 개선 (미배포)
- 크롬 익스텐션: Soaring 클럽의 공공 메시지 자동화
- fitinterval.com: 운동용 인터벌 타이머
이러한 프로젝트의 완성도를 높이기 위해 AI 기반 개발 환경인 Cursor IDE와 대형 언어 모델(LLM)을 활용하였습니다.
AI 기반 사이드 프로젝트 개발 흐름
1. 스펙 작성부터 시작하기
ChatGPT(o1)를 활용해 애플리케이션 사양을 구체화합니다.
예를 들어, 습관 추적 웹사이트를 개발할 때 다음과 같이 질문을 던집니다.
나는 습관 추적을 위한 웹사이트를 만들고 싶습니다. 월별 컬럼과 날짜별 행이 있고, 사용자가 습관을 지속한 날을 선택할 수 있어야 합니다. 데이터는 로컬에 저장됩니다.
이후 AI가 질문을 통해 세부사항을 보완해 주며, 최종적으로 프로젝트 사양을 SPEC.md 파일로 저장합니다.
2. 프로젝트 부트스트랩
Vite를 사용해 프로젝트를 빠르게 설정합니다.
npm create vite@latest .
이후 Cursor Composer(에이전트 모드)를 활용해 SPEC.md를 바탕으로 초기 코드를 생성하고, Tailwind 설정 및 기본 기능을 구현합니다.
3. 작은 단위로 반복(iteration)하기
AI에게 한 번에 복잡한 작업을 요청하는 대신, 작은 기능 단위로 나눠 진행합니다. 예를 들어, 버튼 클릭 시 상태 변경 오류를 해결하거나 UX 디자인을 업데이트하는 등 점진적으로 개선합니다.
- UX 개선 요청 예시:
@App.tsx, @MonthColumn.tsx, @MonthColumn.css, @App.css 파일을 업데이트하여 UX를 개선하고 클릭 시 상태가 변경되지 않는 버그를 수정해 주세요.
Cursor의 이미지 인식 기능을 활용해 시각적 디자인을 개선하는 데에도 AI를 활용할 수 있습니다.
배포 및 자동화
GitHub Actions를 설정하여 코드 푸시 시 자동으로 빌드 및 배포가 이루어지도록 구성합니다.
.github/workflows/deploy.yml 파일을 참조하여 GitHub Pages에 자동 배포하도록 설정해 주세요.
이 과정을 통해 프로젝트가 빠르게 실사용 단계에 도달할 수 있습니다.
효율적인 AI 활용을 위한 팁
- LLM을 활용해 프로젝트 기획 및 스펙 문서화
- 프로젝트 템플릿 및 부트스트랩 도구 사용 (Vite 등)
- Cursor Composer의 적절한 모드 선택 (Chat, Composer, Composer Agent)
- 코드의 이해도를 유지하면서 단계적으로 개선
- Markdown 파일을 활용하여 중요한 정보를 AI에 제공 (예: SPEC.md)
- .cursorrules 파일을 활용해 AI의 코드 스타일 조정