Skip to content

Cursor

The AI Code Editor

Categories

MCP Settings

Sequential Thinking

LLM과 Cursor로 사이드 프로젝트 완성하기

  • 약 5년 전부터 Engineering Manager 역할을 맡게 되어, 주 업무에서 직접 코드를 작성할 일은 줄어듦
  • 업무 외에도 개인 프로젝트를 꾸준히 진행하며 프로그래밍 감각을 유지하고 기술력을 다짐
  • 과거에는 시간 제약으로 프로젝트 진행이 느리고 완성 전에 중단되는 경우가 많았음
  • 하지만, 2024년엔 비교적 빠른 속도로 필요한 도구를 만들고 배포해 처음 버전을 ‘완성’하는 습관을 갖추게 됨

최근 완성한 사이드 프로젝트 예시

  • jsonplayground.com : JSON 포매터이면서, 브라우저 내부에서 실행되는 JQ 기능(웹어셈블리 활용)을 제공해 데이터를 외부로 보내지 않음
  • webtomarkdown.com : 파일을 Markdown으로 변환하거나 웹사이트 일부를 Markdown 형태로 추출해 LLM에 맥락으로 전달할 수 있게 만듦
  • 항공 클럽 페이지 Evergreen Soaring의 디자인 개선 초안
  • Chrome 확장 프로그램을 제작해 항공 클럽으로 오는 메시지 대응을 자동화함
  • fitinterval.com : 운동 시 간격 타이머 기능을 제공함

LLM과 Cursor IDE 활용 배경

  • LLM이 사이드 프로젝트 생산성을 크게 높여줌
  • 특히 Cursor IDE를 통해 LLM을 코딩 작업에 활용하는 과정이 편리함
  • 이 글에서는 새로운 프로젝트를 만드는 전반적 흐름을 공유해, 독자들이 적용해볼 수 있도록 도움을 주고자 함
  • LLM이 모든 영역에서 유용한 것은 아니므로, 직접 사용해보며 어디에 적용할지 선택해야 함

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

  • 현재 사용하는 습관 추적 앱을 웹사이트 형태로 재현하고 싶어함
  • 모든 데이터는 로컬 기기에 저장되어, 사용자 프라이버시를 고려함

스펙 구상 시작

  • 먼저 ChatGPT에 간단한 설명을 한 뒤, 추가 질문을 받아 가며 애플리케이션 스펙을 구체화함
  • 어느 정도 구체화가 되면, ‘다른 사람이 이 스펙만 보고 전체 앱을 만들 수 있을 정도’로 정리해 달라고 요청함
  • TypeScript, React, Tailwind CSS 사용 의도를 명시해 해당 기술 기반 스펙을 생성함
  • 최종 스펙을 SPEC.md에 보관해 이후 개발 과정에서 참조함

프로젝트 부트스트랩

  • Vite를 사용해 프로젝트 골격을 빠르게 마련함
  • npm create vite@latest . 명령으로 초기 설정을 하고, SPEC.md를 프로젝트 폴더에 넣어둠
  • Cursor IDE의 Composer에서 에이전트 기능을 사용해 Tailwind 설정, 기본 파일 수정 등을 자동화함
  • 이렇게 하면 예상 UX 레이아웃, 로컬스토리지 사용, Markdown 내보내기 기능 등 1차 기능이 단시간에 구현됨

작은 단위로 반복 작업

  • 한 번에 너무 많은 기능을 요청하기보다는 필요한 개선 사항을 나눠서 LLM에게 순차적으로 업데이트를 요청함
  • 예를 들어, UX 변경, 버그 수정 등을 작게 분리해 Chat이나 Composer 모드로 지시함
  • 이미지를 Chat에 첨부해 원하는 디자인을 설명하고, 이를 코드로 구현하도록 LLM에 요청함

지속적 배포 설정

  • GitHub Actions를 참고해, main 브랜치에 커밋이 올라가면 자동 빌드 후 GitHub Pages에 배포하도록 설정함
  • Cursor에서 다른 레포의 예시 .yml 파일을 링크로 제공해 LLM이 이를 참조하도록 하여 배포 파이프라인을 구성함

종합 팁

  • LLM으로 프로젝트 개요 및 세부 사항을 먼저 정리해 두고, 추후 컨텍스트용으로 저장
  • 도구나 오픈 소스 템플릿을 사용해 프로젝트 부트스트랩 및 구조 설정
    • 필수적인 개발 도구와 디렉터리 구조를 한꺼번에 마련하고 관리 가능한 프로젝트 패턴을 따름
  • Cursor Composer(에이전트 모드) 등을 사용해 프로젝트를 빠르게 시작
  • Claude-3.5-Sonnet과 o1(모델)을 혼합해 사용
    • 광범위한 초안 작업(1차 드래프트)에 o1을 활용
    • 약 80% 정도는 Claude-3.5-Sonnet으로 구체적인 수정·보강 작업을 진행
  • 적절한 모드 선택 (Chat, Composer 일반, Composer 에이전트)
    • Chat: 구체적인 위치에 변경이 필요하고, 수정 결과를 매번 확인해야 할 때 사용
    • Composer(일반): 여러 파일에 걸친 기능 추가나 멀티파일 변화가 필요한 경우
    • Composer(에이전트): 아직 많이 쓰지 않지만 명령어 실행, lint, 반복 수정 등 자동화된 작업이 필요할 때 (단, 작은 단위로 구분해 관리하는 편)
  • 컨텍스트 제공 시, 구체적인 파일·문서·링크 등을 함께 전달
    • 필요한 경우 Chat 모드에서 전체 코드베이스를 조회하도록 설정해, LLM이 컨텍스트에 맞는 코드를 검색하고 제안하도록 함
  • 프로젝트 관련 문서를 Markdown 형식(SPEC.md 등)으로 저장해두고, 컨텍스트으로 포함 가능
  • 프로젝트 폴더에 .cursorrules 파일 활용
    • 특정 라이브러리를 쓰지 않도록 지시하거나, Tailwind, shadcn 컴포넌트 라이브러리 강제 사용 등
    • 이처럼 prompts에 반영하고 싶은 규칙을 미리 정의하면, 대부분의 요청에서 원하는 방향으로 결과를 유도 가능
  • 코드를 전체적으로 이해하면서 작업할 것
    • LLM이 디버깅을 못 하는 상황이 발생하지 않도록, 코드 품질과 구조 유지
    • 작업을 계속 작은 단위로 나누고, 필요 시 LLM을 활용해 리팩터링이나 모듈 분리를 진행

마무리

  • 이 같은 방식으로 프로젝트를 신속히 마무리해 배포 버전을 만들면, 잠시 쉬더라도 다시 시작하기 훨씬 수월해짐
  • 작게 완성하는 습관이 동력을 유지하게 해주고, 작은 성과를 빠르게 확인하며 동기부여를 얻을 수 있음

See also

Favorite site