첫 걸음¶

이제 AI 도구들이 설치되었으니, 실제로 사용해보면서 기본기를 익혀보겠습니다.

🎯 5분 퀵스타트¶

1단계: Cursor에서 첫 번째 프로젝트 생성¶

# 새 프로젝트 디렉터리 생성
mkdir my-first-ai-project
cd my-first-ai-project

# Cursor로 프로젝트 열기
cursor .

2단계: AI와 첫 대화하기¶

Ctrl+K (또는 Cmd+K)를 눌러 AI Chat 열기
다음 프롬프트 입력:

간단한 Todo 애플리케이션을 만들어주세요. 
요구사항:
- HTML, CSS, JavaScript 사용
- 할일 추가, 삭제, 완료 표시 기능
- 로컬스토리지에 데이터 저장

3단계: 결과 검토 및 수정¶

AI가 생성한 코드를 확인하고, 다음과 같이 추가 요청해보세요:

코드에 주석을 더 자세히 추가해주세요.
그리고 반응형 디자인을 적용해주세요.

💡 기본 사용법¶

Cursor 핵심 기능¶

1. AI Chat (`Ctrl+K`)¶

// 예시 프롬프트들
"이 함수를 TypeScript로 변환해주세요"
"성능을 개선할 수 있는 방법을 제안해주세요"
"이 코드에 에러 처리를 추가해주세요"

2. 인라인 편집 (`Ctrl+L`)¶

코드 블록을 선택하고 Ctrl+L을 누른 후:

"이 함수를 async/await 패턴으로 변경"
"더 읽기 쉽게 리팩토링"
"ESLint 규칙에 맞게 수정"

3. 자동완성¶

타이핑을 시작하면 자동으로 제안이 나타납니다:

Tab: 제안 수락
Esc: 제안 거부
Alt+]: 다음 제안 보기

GitHub Copilot 활용¶

1. 주석으로 의도 표현¶

// 사용자 데이터를 로컬스토리지에서 가져오는 함수
function getUserData() {
    // Copilot이 구현을 제안할 것입니다
}

2. 함수 시그니처 작성¶

def calculate_fibonacci(n: int) -> list:
    # 타입 힌트를 제공하면 더 정확한 제안

3. 테스트 코드 생성¶

// 이 주석 후에 테스트 코드가 자동 제안됩니다
// Test for getUserData function

🛠️ 실습 프로젝트¶

프로젝트 1: 계산기 앱¶

목표: AI를 활용해 완전한 계산기 애플리케이션 만들기

초기 프롬프트:

현대적인 디자인의 계산기 웹 앱을 만들어주세요.
- 기본 사칙연산 지원
- 깔끔한 UI 디자인
- 키보드 입력 지원
- 계산 히스토리 기능

추가 개선 요청:

다크모드를 추가해주세요
과학계산기 기능을 추가할 수 있나요?
모바일에서도 잘 보이도록 최적화해주세요

프로젝트 2: API 연동 날씨 앱¶

목표: 외부 API를 사용하는 실무형 프로젝트

기본 구조 요청:

OpenWeatherMap API를 사용해서 날씨 정보를 보여주는 앱을 만들어주세요.
- 현재 위치 기반 날씨 정보
- 5일 예보
- 깔끔한 카드 UI

기능 확장:

에러 처리를 추가해주세요
로딩 상태를 표시해주세요
즐겨찾기 도시 기능을 추가할 수 있나요?

📝 효과적인 프롬프트 작성법¶

DO: 좋은 프롬프트 예시¶

✅ 구체적이고 명확한 요구사항
"React와 TypeScript를 사용해서 사용자 목록을 보여주는 컴포넌트를 만들어주세요. 
각 사용자는 이름, 이메일, 프로필 이미지를 가지고 있고, 
클릭하면 상세 페이지로 이동해야 합니다."

✅ 컨텍스트 제공
"이 프로젝트는 Next.js 13 앱 라우터를 사용하고 있고, 
TailwindCSS로 스타일링하고 있습니다."

✅ 제약사항 명시
"성능 최적화를 위해 React.memo를 사용하고, 
접근성을 고려해 ARIA 속성을 추가해주세요."

DON'T: 피해야 할 프롬프트¶

❌ 너무 모호함
"좋은 웹사이트 만들어줘"

❌ 컨텍스트 부족
"버그 고쳐줘" (어떤 버그인지 불명확)

❌ 너무 복잡함
"전자상거래 플랫폼 전체를 만들어줘"

🚨 일반적인 실수와 해결법¶

1. AI가 제안한 코드를 무조건 신뢰¶

// ❌ AI 코드를 검토 없이 사용
// ✅ 항상 코드를 이해하고 테스트한 후 사용

2. 너무 큰 단위로 요청¶

❌ "완전한 웹사이트를 만들어주세요"
✅ "먼저 헤더 컴포넌트를 만들어주세요"

3. 컨텍스트 무시¶

❌ 기존 코드 스타일을 무시한 요청
✅ "기존 프로젝트의 코딩 컨벤션에 맞춰주세요"

🎓 다음 학습 단계¶

기본기를 익혔다면:

효과적인 프롬프팅: 더 정교한 AI 활용법
코드 생성 팁: 실무에서 바로 쓸 수 있는 기법들
프롬프트 라이브러리: 검증된 프롬프트 모음

📊 진행 상황 체크리스트¶

Cursor에서 기본적인 대화 가능
코드 자동완성 기능 활용 가능
간단한 프로젝트를 AI와 함께 완성
효과적인 프롬프트 작성법 이해
AI 제안 코드를 비판적으로 검토하는 습관 형성

축하합니다!

기본기를 모두 익히셨다면 이제 본격적인 AI 활용 여정을 시작할 준비가 되었습니다!