첫 실습, CURSOR과 함께한 랜딩페이지 개발 도전기

소개

1인 서비스를 준비하며, 외주 없이 직접 랜딩페이지를 만들어보고 싶었습니다. 개발 경험이 많지 않지만, 요즘은 AI 도구들이 개발까지 도와준다는 이야기를 듣고 "진짜 될까?" 하는 마음으로 Cursor라는 AI 코드 에디터를 열어봤습니다.

진행 방법

사용한 도구

  • Cursor: GPT가 내장된 코드 에디터로, 명령어 기반 코드 생성 가능

  • GPT: 서비스 요구사항 문서화 및 코드 생성 보조

  • Node.js: 개발 환경 구축용

  • 시스템 환경설정: PATH 수동 입력, 시스템 재부팅 등

진행 과정

  1. Cursor 설치 (처음엔 약간 어색했지만 간단했습니다)

  2. GPT에게 말 걸기: 1) PRD 제작 GPT를 이용해 제품 요구사항 문서 만들기.

    2) gpt가 만들어준 제품 요구사항 문서를 pdr.md로 저장하기

  3. 생성된 요구사항을 바탕으로, Cursor에서 초기 코드 생성 시도

    프롬프트 예시: @pdr.md 를 참고해 todo.md를 만들어 주세요.
                  @todo.md 순차적으로 개발을 진행해주세요.
    
  4. Node.js가 필요하다는 메시지 → 설치 → 확인 → 실패 → 반복 확인

    한국어 단어가있는 검은 색 화면
    컴퓨터 화면에서 한국어의 스크린 샷
  5. 결국 환경 변수(PATH)를 수동으로 설정하고, 시스템 재부팅 후 재시도

  6. 이후 부가적인 프로그램을 설치하면서 여러 단계를 이행했으나, 특정 단계에서 진행되지 않음

    파일 목록을 보여주는 화면의 스크린 샷

결과와 배운 점

  • 아직 랜딩페이지는 완성하지 못했지만, 짧은 실습을 하다보니 개발을 시키고 있는 느낌이 들었습니다. Cursor가 직접 하지 못하는 일은 도와주면서요. 결과물이 나오면 정말 신기할 것 같네요.

  • 특히 요구사항 문서 자동화는 생각보다 훨씬 유용했고, GPT의 프롬프트 작성 능력도 계속 다듬어야겠다는 생각이 들었습니다.

  • 반면, 개발 환경 셋업은 여전히 인간의 몫이라는 점도 실감했어요 😂

  • 다음 시간에는 직접 UI가 뜨는 것을 보는 것을 목표로 하고 있습니다!

"개발자들, 진짜 짐 싸겠는데요. 전 미리 싸고 나와 다행인건지..." 😎

도움 받은 글

  • Cursor AI chat의 가이드

  • 성장피터님의 세세한 안내

1
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요