디자인 작업을 위한 Cursor 설정하기

Cursor를 설치하고 이 숍의 무료 디자인 도구 2개 — 반응형 미리보기 명령과 고스트 와이어프레임 스킬 — 를 추가하면, 약 10분 만에 디자인 작업에 맞춰진 AI 에디터가 준비됩니다.

디자이너에게 Cursor란.

Cursor는 AI 에이전트가 내장된 코드 에디터입니다. 채팅에 원하는 것을 설명하면 눈앞에서 파일을 작성하고 수정합니다. 디자이너에게는 정적 목업 대신 실제로 동작하는 프로토타입을 의미하죠 — 브라우저에서 열고, 크기를 조절하고, 그대로 전달할 수 있는 진짜 HTML과 CSS입니다. Hobby 등급은 무료이고, Pro는 월 $20입니다.

설치하고 프로젝트 열기.

  1. cursor.com에서 Cursor를 다운로드해 설치하세요 — macOS, Windows, Linux 빌드가 모두 있습니다.
  2. 로그인하거나 계정을 만드세요. 무료 Hobby 등급은 신용카드가 필요 없습니다.
  3. 폴더를 여세요 — 기존 프로젝트든, 프로토타입용 빈 폴더든 상관없습니다.
  4. 채팅 패널을 열고 작은 요청을 해서 에이전트가 응답하는지 확인하세요.

무료 디자인 도구 2개 추가하기.

둘 다 이 숍에서 무료로 받을 수 있고 추가하는 데 각각 1분이면 충분합니다.

  • Responsive Preview 명령 — 모바일, 태블릿, 데스크톱 너비로 페이지를 스크린샷하고 채팅에 통과/경고/실패 레이아웃 점검 결과를 돌려주는 /responsive-preview 슬래시 명령입니다.
  • Ghost Wireframe 스킬 — 일관된 고스트 역할을 가진 스켈레톤 UI 와이어프레임을 생성해, 스타일을 입히기 전에 레이아웃을 먼저 잡을 수 있게 해줍니다.

첫 디자인 점검 실행하기.

  1. 프로젝트의 페이지 하나를 열거나, 에이전트에게 간단한 페이지를 만들어 달라고 요청하세요.
  2. 그 페이지에 /responsive-preview 명령을 실행하세요.
  3. 점검 결과를 읽으세요. 오버플로우, 좁은 탭 타깃, 브레이크포인트 문제는 경고나 실패로 표시됩니다.
  4. 실패한 항목을 고쳐달라고 에이전트에게 요청한 뒤 명령을 다시 실행하세요.

비용은 얼마나 드나요.

Hobby 등급은 무료지만 에이전트 요청 횟수가 제한됩니다 — 에디터를 익히기엔 충분해요. 월 $20인 Pro는 에이전트 한도를 늘려주고 프런티어 모델 접근과 클라우드 에이전트를 추가로 제공하는데, 일상적인 프로토타이핑 작업은 보통 이 등급에서 이뤄집니다. Pro로 결정한다면 이 Cursor 추천 링크로 첫 달 50% 할인을 받을 수 있어요. 더 자세한 내용은 디자이너에게 Cursor는 돈값 할까?에 있습니다.

Cursor가 맞지 않는 경우.

무드보드, 시각적 탐색, 클라이언트 목업처럼 코드를 전혀 보고 싶지 않다면 에디터보다 디자인 툴이 더 적합합니다. 그리고 프로토타입이 아니라 바로 라이브 원페이지 사이트가 목표라면, Carrd 템플릿이 에디터를 열지 않고도 더 빠른 길입니다.