제품 웹 페이지를 구축합니다.

1. Cursor에서 제품 페이지 프로젝트를 생성합니다.

Chat 패널에 다음과 같이 웹 앱 프로젝트를 생성해 달라고 요청합니다. Cursor의 응답을 읽어가면서 하나 하나 합니다.

2. V0에서 사용자 인터페이스를 설계합니다.

https://v0.dev 페이지에 접속, 로그인(sign in)하고, 다음과 같이 요청합니다.

오른쪽 위에 “Add to Codebase” 버튼을 클릭해서 Cursor에서 생성된 사용자 인터페이스를 가져올 명령을 받아 복사합니다.

Cursor 터미널에서 복사한 명령을 붙여넣고 실행합니다. 그러면 Cursor가 V0에서 생성한 user interface(저의 경우 landing-page.tsx로 작성되었습니다.)를 가져옵니다. product-app 웹앱을 실행해서 가져온 user interface가 반영되도록 요청합니다.

변경된 파일들을 저장하고, npm run dev를 실행하고, 안내에 따라 http://localhost:3000/에 접속합니다. 저는 다음과 같이 화면이 디스플레이 됩니다.

3. 사용자 인터페이스 파일 구조화

사용자 인터페이스가 하나의 파일로 작성되었으니, 구조화를 좀 하겠습니다.

Command + Shift + I  단축키를 눌러 Cursor Composer를 실행합니다. ‘+’ 버튼을 클릭하고 “landing-page.tsx”를 선택합니다.

다음과 같이 작성하고 엔터합니다.

Cursor는 구조화하기 시작합니다.

Composer

Cursor는 자연어 프로그래밍을 Chat으로 지원하고 있는데, 여기에 더해 아직 베타이긴 하지만 Composer를 지원합니다. 저는 Composer가 베타 딱지를 떼면 Chat을 대체하지 않을까라고 생각하고 있습니다.

아직은 Chat에서만 지원하는 것과 Composer에서 지원하는 것이 다르니 이 둘을 구분해서 잘 사용해야 합니다.

1. Chat은 여러 파일을 동시에 수정할 수 있다는 장점이 있습니다. 하지만, 변경 사항을 적용하려면 각 파일마다 “적용” 버튼을 클릭하고 저장해야 하는 번거로움이 있습니다.

2. Composer는 여러 파일을 수정한 후, 단 한 번의 클릭으로 모든 변경 사항을 적용할 수 있습니다. 훨씬 빠르고 효율적이죠!

3. 변경 사항을 바로 적용하지 않고 미리 확인하고 싶다면? “모두 저장” 버튼을 클릭하세요! 변경 사항을 확인한 후 마음에 들지 않으면 “거부”를 눌러 이전 상태로 되돌릴 수 있습니다. “거부” 후에는 새로운 프롬프트를 입력하여 코드를 수정할 수 있습니다. 이렇게 반복적인 작업을 통해 원하는 결과물을 빠르게 얻을 수 있습니다.

Cursor, 이 단축키만 알면 당신도 단축키 마스터!

Cursor 쓰는데 자꾸 마우스에 손이 가는 당신? 이제 그럴 필요 없어요! 딱 필요한 단축키만 알려드릴게요.

• Composer 띄우기: Command + I 누르면 짠! 하고 나타납니다. 전체 화면으로 보고 싶다면 Command + Shift + I 를 꾹 눌러주세요.
• 파일 참조하기: Composer 창에서 @ 기호를 쓰고 파일 이름을 입력하면 됩니다. 참 쉽죠?
• 파일 편집하기: Command + P 를 누르고 원하는 파일 이름을 입력하면 바로 편집 가능!
• AI 채팅 창 켜고 끄기: Command + Shift + L 키만 누르면 옆에서 AI 채팅 창이 짠! 나타났다 사라졌다! 여기서도 @ 기호로 파일을 참조할 수 있어요.
• 코드 일부분만 편집하고 싶을 땐?: 원하는 부분을 선택하고 Command + Shift + I 로 AI 채팅 창에 붙여넣고 궁금한 점을 물어보세요.
• Cursor 설정 변경하기: Command + Shift + J 를 누르면 Cursor 설정 창이 나타납니다. 여기서 단축키도 변경할 수 있어요!

윈도우 사용자라면 Command 대신 Ctrl로~