Cursor로 랜딩 페이지 프로토타입 만들기

빈 폴더에서 시작해 약 1시간 만에 동작하는 반응형 랜딩 페이지 프로토타입까지 완성하세요 — 원하는 것을 설명하고 보이는 결과에 맞춰 반복하며 만드는 HTML 파일 하나입니다.

필요한 것.

설정 가이드의 무료 디자인 도구를 설치한 Cursor, 빈 폴더, 그리고 이 페이지가 누구를 위한 것인지에 대한 명확한 그림. 첫 프로토타입에는 무료 Hobby 등급이면 충분합니다.

프롬프트보다 브리프를 먼저 쓰세요.

한 번 제대로 쓴 한 문단이 나중에 스무 번 고치는 것보다 낫습니다. 대상 독자, 단 하나의 CTA, 순서대로 필요한 섹션을 명시하세요 — 예를 들어 헤드라인과 CTA가 있는 히어로, 기능 블록 3개, 후기 1개, 푸터. 결과물도 제한하세요: HTML 파일 하나, 인라인 스타일, 프레임워크 없이, 시스템 폰트로.

6단계로 만들기.

  1. Cursor에서 빈 폴더를 열고 채팅에 브리프를 붙여넣으세요.
  2. 인라인 CSS가 포함된 index.html 파일 하나를 요청하세요 — 파일 하나여야 반복 작업이 빨라집니다.
  3. 브라우저에서 파일을 열고, 만든 사람이 아니라 방문자의 시선으로 읽으세요.
  4. 간격, 위계, 대비 같은 디자인 용어로 바꿀 점을 에이전트에게 알려주세요 — 메시지당 한두 가지 변경만.
  5. /responsive-preview 명령을 실행해 모바일, 태블릿, 데스크톱 너비를 점검하세요.
  6. 점검에서 지적된 부분을 고친 뒤 멈추세요 — 프로토타입의 역할은 다듬어지는 것이 아니라 판단받는 것입니다.

디자이너처럼 점검하세요.

무료 브라우저 도구 Responsive Preview는 세 가지 너비를 동기화된 스크롤로 나란히 보여줍니다 — 창 크기를 일일이 조절하는 것보다 빠릅니다. 모바일에서의 가로 오버플로우, 약 80자를 넘는 줄 길이, 44픽셀 미만의 탭 타깃을 눈여겨보세요.

프로토타입에서 라이브 페이지로.

프로토타입이 검증되면, HTML을 어느 무료 정적 호스팅에 발행하거나 코드 유지보수 없이 연 $19짜리 커스텀 도메인이 있는 Carrd 템플릿으로 다시 만드세요. 어느 쪽을 택하든 그 전에 Launch Checklist Prompt 점검을 실행하세요.

비용은 얼마나 드나요.

프로토타입 제작 자체는 무료입니다, Cursor의 Hobby 등급에서요. 정기적으로 프로토타입을 만든다면 월 $20인 Pro가 에이전트 한도를 없애줍니다 — 이 Cursor 추천 링크로 첫 달 50% 할인을 받을 수 있어요.