AI와 대화하며 코딩하기

Cursor의 가장 강력한 기능은 AI와 대화하며 코드를 작성하는 것입니다. 마치 옆에 전문가가 있는 것처럼!

AI 채팅 열기

방법 1: 단축키

Ctrl + L (Mac: Cmd + L)
가장 빠른 방법

방법 2: 아이콘 클릭

좌측 활동 표시줄에서 💬 아이콘 클릭

방법 3: 명령 팔레트

Ctrl + Shift + P (Mac: Cmd + Shift + P)
“Cursor: Chat” 입력
Enter

AI 채팅 화면

채팅 창은 3가지 영역으로 구성됩니다:

┌─────────────────────────────────┐
│  대화 내역                       │
│  - 내가 물어본 것                │
│  - AI의 답변                     │
│                                  │
│                                  │
├─────────────────────────────────┤
│  입력창                          │
│  Type your question...           │
└─────────────────────────────────┘

기본 대화 예제

예제 1: 코드 설명 듣기

질문:

이 코드가 뭘 하는 건지 설명해줘

function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

AI 답변:

이 함수는 상품 목록의 총 가격을 계산합니다.

- items: 상품 배열을 받습니다
- reduce: 배열의 모든 요소를 순회하며 합산
- sum: 누적된 합계
- item.price: 각 상품의 가격
- 0: 초기값

예를 들어:
items = [{price: 100}, {price: 200}]
결과: 300

예제 2: 코드 생성 요청

질문:

버튼을 클릭하면 배경색이 랜덤으로 바뀌는 HTML 코드 만들어줘

AI 답변:

<!DOCTYPE html>
<html>
<head>
    <title>랜덤 배경색</title>
</head>
<body>
    <button id="changeColor">색상 변경</button>

    <script>
        document.getElementById('changeColor').addEventListener('click', function() {
            const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
            document.body.style.backgroundColor = randomColor;
        });
    </script>
</body>
</html>

예제 3: 오류 해결

질문:

이 코드에서 에러가 나는데 왜 그런거야?

let total = '100';
let discount = 10;
let result = total - discount;
console.log(result); // NaN이 나와요

AI 답변:

문제는 'total'이 문자열('100')이기 때문입니다.

수정 방법:
let total = 100;  // 따옴표 제거
let discount = 10;
let result = total - discount;
console.log(result); // 90

또는 문자열을 숫자로 변환:
let total = '100';
let discount = 10;
let result = Number(total) - discount;
console.log(result); // 90

AI에게 특정 파일 보여주기

현재 열린 파일을 AI가 볼 수 있도록 하려면:

파일을 에디터에서 열기
코드 선택 (드래그)
AI 채팅에서 @file 입력
파일 선택
질문 입력

컨텍스트 활용하기

AI에게 더 나은 답변을 받으려면 컨텍스트를 제공하세요.

나쁜 질문

함수 만들어줘

좋은 질문

사용자의 이름과 나이를 받아서
"안녕하세요, [이름]님! [나이]살이시군요."
라고 인사하는 JavaScript 함수 만들어줘

코드 수정 요청 (Ctrl + K)

채팅 대신 코드를 직접 수정하려면:

수정할 코드 선택
Ctrl + K (Mac: Cmd + K)
수정 지시 입력
Enter

예제

기존 코드:

<h1>안녕하세요</h1>

선택 후 Ctrl + K, 입력:

이 제목을 파란색으로 만들고 중앙 정렬해줘

수정된 코드:

<h1 style="color: blue; text-align: center;">안녕하세요</h1>

유용한 AI 명령어

코드 작성

“로그인 폼 HTML 만들어줘”
“랜덤 숫자 생성하는 함수 작성해줘”
“CSS로 카드 디자인 만들어줘”

코드 개선

“이 코드를 더 간결하게 만들어줘”
“주석 추가해줘”
“변수 이름을 더 명확하게 바꿔줘”

버그 수정

“이 코드의 문제점 찾아줘”
“왜 이게 작동하지 않는지 설명해줘”
“이 에러 메시지 해석해줘”

설명

“이 코드가 뭘 하는지 한줄씩 설명해줘”
“이 함수의 시간 복잡도는?”
“더 나은 방법이 있을까?”

AI 채팅 팁

1. 구체적으로 질문하기

❌ “웹사이트 만들어줘” ✅ “맑은소프트 회사 소개 페이지 만들어줘. 로고, 회사명, 소개 문구, 연락처가 있어야 해”

2. 한국어로 편하게

AI는 한국어를 잘 이해합니다
반말도 괜찮아요
자연스럽게 대화하세요

3. 단계별로 진행

한 번에 모든 걸 요청하지 말고:

먼저 HTML 구조 만들기
CSS 스타일 추가
JavaScript 기능 추가

4. 예제 제공

“이런 식으로 만들어줘”라며 예제를 보여주면 더 정확

5. 피드백 제공

“아니야, 이렇게 해줘”
“좋아, 이제 여기에 ○○ 추가해줘”
“더 간단하게 만들어줘”

대화 기록 관리

새로운 대화 시작

좌측 상단 “+” 버튼
주제별로 대화 분리

이전 대화 찾기

사이드바에서 대화 목록 확인
클릭으로 다시 열기

대화 삭제

대화 위에 마우스 올리기
휴지통 아이콘 클릭

주의사항

AI가 항상 옳은 것은 아닙니다

생성된 코드를 항상 확인하세요
이해되지 않으면 설명을 요청하세요
테스트해보세요

개인정보 주의

비밀번호, API 키 등을 채팅에 입력하지 마세요
회사 기밀 정보 주의

무료 플랜 제한

월 50회 요청 가능
신중하게 사용하세요
복잡한 질문으로 한 번에 해결

실습: AI와 함께 간단한 페이지 만들기

Ctrl + L로 AI 채팅 열기
다음 입력:

간단한 자기소개 페이지 HTML 만들어줘.
이름, 사진, 간단한 소개, 이메일이 있어야 해.

생성된 코드를 새 파일에 붙여넣기
저장하고 브라우저에서 열어보기

AI와 대화하는 것이 얼마나 쉬운지 느껴지시나요?