- 약 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을 활용해 리팩터링이나 모듈 분리를 진행
마무리
- 이 같은 방식으로 프로젝트를 신속히 마무리해 배포 버전을 만들면, 잠시 쉬더라도 다시 시작하기 훨씬 수월해짐
- 작게 완성하는 습관이 동력을 유지하게 해주고, 작은 성과를 빠르게 확인하며 동기부여를 얻을 수 있음