들어가며: AI 도구로 코딩 실력을 키우는 법
안녕하세요! AI바이브코딩 학습 시리즈를 함께하고 있는 여러분, 혹시 알고 계셨나요? 코드를 짜는 것만큼 중요한 게 바로 남의 코드를 읽는 능력이라는 걸요!
실제로 개발 현장에서는 어떨까요? 내가 처음부터 끝까지 새로 짜는 코드보다, 다른 사람이 이미 만들어놓은 코드를 읽고 이해하고 고치는 일이 훨씬 많아요. 근데 초보자 입장에서 남이 짠 코드를 읽는 건... 진짜 외국어로 된 암호문을 해독하는 것처럼 막막하잖아요? 😅
오늘은 GPT, Cursor, GitHub Copilot 같은 AI 도구들을 써서 코드 읽기 실력을 확 올리는 방법을 알려드릴게요!
1️⃣ ChatGPT로 코드 읽기 연습하기
🎯 ChatGPT의 강점
- 대화형 학습: 모르는 부분을 계속 물어볼 수 있어요
- 단계별 설명: 큰 그림부터 세세한 부분까지 차근차근
- 다양한 관점: "초보자용으로 설명해줘"라고 하면 쉽게 바꿔줘요
📝 실전 예제 1: Python 함수 분석하기
분석할 코드:
def calculate_discounted_price(items, discount_rules):
total = 0
for item in items:
price = item['price']
quantity = item['quantity']
if item['category'] in discount_rules:
discount = discount_rules[item['category']]
price = price * (1 - discount)
total += price * quantity
return round(total, 2)
이 코드 보면 뭔가 복잡해 보이죠? 걱정 마세요! ChatGPT랑 함께 5단계로 분석하면 누구나 이해할 수 있어요.
ChatGPT 활용 5단계 분석법:
1단계: 전체 개요 파악하기
ChatGPT한테 이렇게 물어보세요:
"이 Python 함수가 뭐 하는 함수인지 한 줄로 요약해줘"
그럼 이런 식으로 답해줘요:
"상품 목록이랑 할인 규칙을 받아서 할인 적용된 최종 금액을 계산해주는 함수예요."
딱 이 한 줄만 봐도 "아~ 쇼핑몰 결제할 때 쓰는 함수구나!" 하고 감이 오죠?
2단계: 입력이랑 출력 분석하기
이제 더 구체적으로 물어봐요:
"이 함수의 입력 파라미터랑 반환값을 자세히 설명해줘"
GPT가 알려주는 내용:
- items: 상품 목록이에요 (가격, 수량, 카테고리 정보가 들어있어요)
- discount_rules: 카테고리별 할인율이에요 (예: 전자제품 20% 할인)
- 반환값: 소수점 둘째자리까지 반올림한 총 금액
3단계: 로직 흐름 이해하기
핵심을 파고들어봐요:
"이 함수가 어떤 순서로 실행되는지 단계별로 설명해줘.
각 단계에서 변수가 어떻게 바뀌는지도 예시로 보여줘"
GPT 답변:
1. total을 0원으로 시작해요
2. items 목록에서 상품을 하나씩 꺼내요
3. 각 상품의 가격이랑 수량을 확인해요
4. 만약 이 상품 카테고리에 할인이 있으면:
- 할인 적용해요 (예: 20% 할인이면 가격에 0.8을 곱해요)
5. 할인된 가격 × 수량을 total에 더해요
6. 마지막에 total을 소수점 둘째자리로 반올림해서 돌려줘요
4단계: 어려운 부분 집중 공략
이해 안 되는 부분만 콕 집어서 물어봐요:
"'price = price * (1 - discount)' 이 부분이
어떻게 할인을 적용하는 건지 예시로 설명해줘"
GPT 설명:
원가가 10,000원이고 할인율이 0.2 (20%)라면:
- 1에서 0.2를 빼면 → 0.8
- 10,000원 × 0.8 = 8,000원 (20% 할인된 가격!)
이렇게 구체적인 숫자로 보면 훨씬 이해하기 쉽죠?
5단계: 개선 아이디어 얻기
마지막으로 이렇게 물어봐요:
"이 함수에 버그나 개선할 점이 있을까?"
GPT가 찾아주는 문제점들:
1. KeyError 위험: item에 'category' 키가 없으면 에러나요
2. 음수 처리: 가격이나 수량이 음수면 이상한 결과가 나올 수 있어요
3. 할인율 검증: discount가 0~1 범위를 벗어나면 문제가 생겨요
2️⃣ Cursor로 코드 읽기 연습하기
🎯 Cursor의 강점
- 컨텍스트 인식: 프로젝트 전체를 한눈에 파악해요
- 즉각적인 설명: 코드에 마우스만 올려도 설명이 뙇!
- 관련 코드 탐색: "이 함수 어디서 쓰이지?" 자동으로 찾아줘요
📝 실전 예제 2: React 컴포넌트 분석하기
분석할 코드:
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUser = async () => {
try {
setLoading(true);
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) throw new Error('Failed to fetch');
const data = await response.json();
setUser(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchUser();
}, [userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return null;
return (
<div className="profile">
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
}
이거 처음 보면 완전 복잡해 보이는데요, Cursor 쓰면 진짜 쉬워져요!
Cursor 활용 3단계 학습법:
1단계: Cmd/Ctrl + K로 전체 설명 요청하기
Cursor에 이렇게 입력해보세요:
"이 컴포넌트가 뭐 하는 애인지 설명해줘"
Cursor가 답해줘요:
"UserProfile은 userId를 받아서 API로 사용자 정보를 가져오고요,
로딩 중이거나 에러가 나거나 성공했을 때 각각 다른 화면을 보여주는 컴포넌트예요."
2단계: 궁금한 코드만 선택해서 물어보기
useState 부분을 드래그한 다음:
Cursor한테 질문:
"이 세 개의 useState는 각각 뭐 하는 거야?"
Cursor 답변:
- user: API에서 받아온 사용자 데이터를 저장해요
- loading: 지금 데이터 불러오는 중인지 아닌지 체크해요
- error: 에러 났을 때 에러 메시지를 저장해요
useEffect 부분을 드래그한 다음:
Cursor한테 질문:
"이 useEffect 끝에 [userId]는 왜 필요해?"
Cursor 답변:
"userId가 바뀔 때마다 새로운 사용자 정보를 다시 가져오려고요.
만약 이게 없으면 컴포넌트가 처음 뜰 때만 한 번 실행되고 끝이에요."
아~ 그래서 다른 사용자로 바뀌면 자동으로 새로 불러오는구나! 😮
3단계: 이 코드가 어디서 쓰이는지 추적하기
Cursor한테:
"이 컴포넌트 어디서 쓰이는지 찾아줘"
→ Cursor가 자동으로 관련 파일 목록을 쫙 보여줘요
→ 실제로 어떻게 쓰이는지 보면서 더 잘 이해할 수 있어요
3️⃣ GitHub Copilot으로 코드 읽기 연습하기
🎯 Copilot의 강점
- IDE 통합: VS Code에서 바로바로 쓸 수 있어요
- 인라인 설명: 코드 옆에 주석을 바로 달아줘요
- 패턴 학습: 비슷한 코드 패턴을 찾아줘요
📝 실전 예제 3: 복잡한 알고리즘 분석하기
분석할 코드:
def binary_search(arr, target):
left, right = 0, len(arr) - 1
while left <= right:
mid = left + (right - left) // 2
if arr[mid] == target:
return mid
elif arr[mid] < target:
left = mid + 1
else:
right = mid - 1
return -1
이진 탐색... 이름만 들어도 어렵게 느껴지죠? 걱정 마세요!
Copilot 활용 4단계 학습법:
1단계: 함수 위에 주석으로 물어보기
# 이 함수는 뭐 하는 거야? [Copilot한테 질문]
# Copilot이 자동으로 완성해줘요:
# 이 함수는 정렬된 배열에서 이진 탐색을 해요.
# 시간 복잡도: O(log n) - 엄청 빨라요!
# 공간 복잡도: O(1) - 메모리 거의 안 써요
2단계: 변수가 뭘 의미하는지 알아보기
# left, right, mid는 각각 뭐야?
# Copilot 답변:
# left: 찾아볼 범위의 왼쪽 끝 위치
# right: 찾아볼 범위의 오른쪽 끝 위치
# mid: 지금 보고 있는 중간 위치
3단계: 한 바퀴 돌 때마다 뭐가 일어나는지 파악하기
# while 루프에서 매번 뭘 하는 거야?
# Copilot 설명:
# 1. 중간값(mid)을 찾아요
# 2. 중간값이 내가 찾는 거면 → 여기다! 하고 위치 알려줘요
# 3. 중간값이 더 작으면 → 오른쪽 절반만 봐요
# 4. 중간값이 더 크면 → 왼쪽 절반만 봐요
4단계: 실제로 돌려보면서 이해하기
# 실제로 어떻게 동작하는지 예시 보여줘
# Copilot이 만들어준 예시:
arr = [1, 3, 5, 7, 9, 11]
result = binary_search(arr, 7) # 결과: 3 (7은 3번째 위치에 있어요)
result = binary_search(arr, 4) # 결과: -1 (4는 없어요)
# 7을 찾을 때 어떻게 동작하는지 보면:
# 1회: 범위 [1,3,5,7,9,11], 중간=5, 5<7이니까 오른쪽으로
# 2회: 범위 [7,9,11], 중간=9, 9>7이니까 왼쪽으로
# 3회: 범위 [7], 중간=7, 찾았다! → 위치는 3
🎓 통합 실전 학습법: 5단계 코드 읽기 훈련
자, 이제 세 가지 도구를 다 배웠으니까요, 이걸 조합해서 어떤 코드든 마스터하는 방법을 알려드릴게요!
📋 단계별 실전 가이드
Step 1: 첫 접근 (Copilot 사용) - 3분
→ VS Code에서 코드 파일 열기
→ Copilot한테 "이 파일 전체가 뭐 하는 거야?" 물어보기
→ 주요 함수 위에 마우스 올려서 설명 확인하기
여기서 전체 그림을 빠르게 파악해요!
Step 2: 구조 파악 (Cursor 사용) - 5분
→ Cursor로 프로젝트 열기
→ "이 파일이 프로젝트에서 어떤 역할을 해?" 질문하기
→ 관련된 다른 파일들도 둘러보기
→ 전체 구조 이해하기
숲을 보는 단계예요!
Step 3: 상세 분석 (ChatGPT 사용) - 10분
→ 제일 복잡해 보이는 함수나 로직을 복사
→ ChatGPT에 붙여넣고 5단계 분석법 적용
→ 예제 코드랑 그림으로 된 설명 요청하기
나무 하나하나를 자세히 보는 단계!
Step 4: 실행 추적 (모든 도구 활용) - 7분
→ 테스트 케이스 만들어달라고 하기
→ 디버거로 한 줄씩 실행해보기
→ 각 단계에서 변수 값 확인하기
→ 예상과 다른 부분은 AI한테 다시 물어보기
직접 돌려보면서 확인하는 단계!
Step 5: 정리 및 기록 (ChatGPT 사용) - 5분
→ "이 코드를 내가 이해한 대로 정리해줘" 요청
→ 핵심 개념이랑 배운 점 정리하기
→ 비슷한 패턴의 다른 예제도 달라고 하기
배운 걸 내 것으로 만드는 단계!
💡 실전 예제: 실무 코드 읽기 미션
이제 진짜 실전이에요! 아래는 실제 쇼핑몰 프로젝트에서 쓸 법한 코드예요.
🎯 미션: 장바구니 시스템 분석하기
class ShoppingCart {
constructor() {
this.items = [];
this.discountCode = null;
}
addItem(product, quantity = 1) {
const existingItem = this.items.find(item => item.id === product.id);
if (existingItem) {
existingItem.quantity += quantity;
} else {
this.items.push({
id: product.id,
name: product.name,
price: product.price,
quantity: quantity
});
}
}
removeItem(productId) {
this.items = this.items.filter(item => item.id !== productId);
}
applyDiscount(code) {
const validCodes = {
'SUMMER20': 0.2,
'WELCOME10': 0.1,
'VIP30': 0.3
};
this.discountCode = validCodes[code] || null;
}
getTotal() {
const subtotal = this.items.reduce((sum, item) => {
return sum + (item.price * item.quantity);
}, 0);
if (this.discountCode) {
return subtotal * (1 - this.discountCode);
}
return subtotal;
}
}
🔍 AI 도구로 분석해볼까요?
1. Copilot으로 빠른 이해
// Q: 이 클래스 뭐 하는 거야?
// A: 온라인 쇼핑 장바구니예요!
// 상품 넣고 빼고, 할인 코드 쓰고, 총 금액 계산하는 기능이 있어요.
2. Cursor로 메서드별로 뜯어보기
Q: "addItem 메서드는 같은 상품을 또 담으면 어떻게 해?"
A: existingItem을 find로 찾아서요:
- 이미 장바구니에 있으면: 기존 수량에 추가해요
- 없으면: 새로운 항목으로 추가해요
그래서 같은 상품이 두 번 들어가는 일이 없어요!
3. ChatGPT로 문제점 찾아보기
Q: "이 코드에 문제점이나 개선할 부분이 있을까?"
A:
1. 문제: 할인 코드가 코드에 직접 박혀있어요
개선: 별도 파일이나 데이터베이스에서 가져오는 게 좋아요
2. 문제: 수량을 음수로 넣어도 막을 수가 없어요
개선: if (quantity < 1) throw new Error('수량은 1개 이상이어야 해요');
3. 문제: 가격 계산할 때 소수점 오류 날 수 있어요
개선: Math.round(total * 100) / 100 이렇게 반올림하기
4. 문제: 재고가 있는지 확인을 안 해요
개선: 상품에 stock 속성 추가해서 확인하기
🎁 보너스: 상황별 도구 선택 꿀팁
📱 이럴 땐 이 도구!
상황 쓸 도구 왜 좋은가?
| 처음 보는 GitHub 프로젝트 | Cursor | 프로젝트 전체 구조를 한방에 파악 |
| 알고리즘 문제 풀이 이해하기 | ChatGPT | 단계별로 쪼개서 설명해줘요 |
| 코딩하다가 급하게 궁금한 거 | Copilot | IDE에서 바로바로 확인 가능 |
| 옛날 코드 고쳐야 할 때 | Cursor + GPT | 구조 파악하고 개선 아이디어까지 |
| 에러 해결할 때 | Copilot | 실시간으로 해결책 제시 |
💎 프로 팁: 좋은 질문하는 법
별로인 질문 ❌
"이 코드 뭐해?"
→ 너무 뭉뚱그려서 물어보면 대충 대답해요
좋은 질문 ✅
"이 코드의 시간 복잡도는 어떻게 되고,
데이터가 100만 개 정도 되면 느려질까요?
만약 느려진다면 어떤 방법으로 개선할 수 있을까요?"
→ 구체적으로 물어보면 딱 원하는 답을 줘요!
별로인 질문 ❌
"왜 안 돼?"
→ 이러면 AI도 뭐가 문젠지 몰라요
좋은 질문 ✅
"이 React 컴포넌트에서 useEffect가 계속 반복 실행되는데
왜 그런가요? 의존성 배열을 어떻게 고쳐야 할까요?"
→ 문제 상황을 명확하게 설명하면 정확한 해답을 얻어요!
⚠️ 주의사항: AI로 코드 읽을 때 조심할 것들
🚨 꼭 피해야 할 3가지
1. AI 설명만 읽고 끝내기
❌ 이러면 안 돼요:
AI 설명 읽고 → "아~ 그렇구나" → 바로 다음으로
✅ 이렇게 해야 해요:
AI 설명 읽고 → 코드 직접 따라가보고 → 실행해보고 → 변수 값 체크하고
설명만 봐서는 절대 내 것이 안 돼요!
2. AI 말을 100% 믿기
⚠️ AI도 틀릴 수 있어요!
특히 이럴 땐 의심해봐야 해요:
- 엄청 특수한 라이브러리나 프레임워크일 때
- 최신 문법일 때 (AI가 아직 못 배운 거)
- 회사나 프로젝트만의 특별한 로직일 때
3. 기초를 건너뛰고 AI만 쓰기
📚 AI는 어디까지나 보조 도구예요!
꼭 알아야 할 기본:
- 변수, 함수, if문, for문 같은 기본 문법
- 배열, 객체 같은 기본 자료구조
- 프로그래밍 기본 개념
AI는 이미 아는 걸 더 깊이 이해하는 데 도와줘요.
처음부터 끝까지 AI만 믿으면 진짜 실력은 안 늘어요! 😢
🏆 실전 연습 과제
자, 이제 배운 걸 직접 써먹어볼 시간이에요! 아래 과제를 차근차근 해보세요.
📝 과제 1: Python 기초 (초급)
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
여러분이 할 일:
- Copilot한테 "이거 어떻게 동작하는 거야?" 물어보기
- ChatGPT한테 "숫자 넣으면 어떻게 계산되는지 그림으로 보여줘" 요청하기
- 시간 복잡도가 O(2^n)인 이유 이해하기
- 더 빠른 버전(메모이제이션) 코드 받아서 비교해보기
📝 과제 2: JavaScript 중급
const users = [
{ name: 'Alice', age: 25, city: 'Seoul' },
{ name: 'Bob', age: 30, city: 'Busan' },
{ name: 'Charlie', age: 25, city: 'Seoul' }
];
const result = users
.filter(user => user.city === 'Seoul')
.map(user => ({ ...user, adult: user.age >= 20 }))
.sort((a, b) => b.age - a.age);
여러분이 할 일:
- Cursor로 filter, map, sort 각각이 뭐 하는지 분석하기
- 각 단계 거칠 때마다 데이터가 어떻게 바뀌는지 추적하기
- ChatGPT한테 "같은 결과 나오는 다른 방법 있어?" 물어보기
- for문 쓰는 거랑 메서드 체이닝이랑 속도 비교해보기
🎯 다음 편 예고
다음 시간에는 **"AI와 함께하는 디버깅: 에러 메시지 완벽 해석"**을 다룰 거예요!
배울 내용:
- 빨간 에러 메시지 읽는 법
- AI로 에러 원인 빠르게 찾기
- 자주 나오는 에러 패턴 정리
- 디버거랑 AI 도구 같이 쓰는 법
코드 읽기를 마스터했으니까, 이제 에러도 무섭지 않게 AI랑 같이 해결해봐요!
🎬 마무리하며
오늘은 GPT, Cursor, Copilot 세 가지 AI 도구로 코드 읽기 실력을 확 올리는 방법을 배웠어요!
오늘의 핵심 정리:
- ChatGPT: 대화하면서 깊이 있게 배우기 + 예제 만들어달라고 하기
- Cursor: 프로젝트 전체 맥락 파악하기 + 관련 코드 찾아다니기
- Copilot: 코딩하면서 바로바로 설명 듣기 + 빠르게 참고하기
- 5단계 통합 학습법: 체계적으로 코드 분석하는 프로세스
- 균형 잡힌 학습: AI는 도구일 뿐, 기초랑 실습도 정말 중요해요
기억하세요! AI 도구는 자전거 보조 바퀴 같은 거예요. 처음엔 도움이 되지만, 진짜 실력은 여러분이 직접 페달 밟으면서 생기는 거랍니다! 💪
여러분의 코딩 실력이 매일매일 쑥쑥 자라길 응원할게요! 화이팅! 🚀
궁금한 점이나 어려운 부분 있으면 언제든 댓글로 물어봐주세요! 😊
이 글이 여러분의 코딩 공부에 진짜 도움이 되길 바라요! 질문이나 피드백 있으면 편하게 댓글 남겨주세요! 💬
'AI Vibe Coding' 카테고리의 다른 글
| AI로 개발 흐름 '3분 안에' 파악하는 5가지 패턴 (0) | 2025.12.05 |
|---|---|
| 이 코드는 왜 돌아가는가? AI와 함께 해석하는 법 (0) | 2025.12.04 |
| 초보자가 AI를 맡기면 안 되는 것 vs 맡기면 좋은 것 (0) | 2025.12.04 |
