📄 레슨

컨텍스트 주기 — @파일·이미지·붙여넣기

같은 질문도 재료를 잘 주면 답이 달라져요. 잘 주는 기술 세 가지.

① 오늘의 미션

같은 질문, 다른 답

지난 레슨에서 CLAUDE.md로 가게의 '회사 설명서'를 만들어 줬어요. 그런데 막상 일을 시켜보면 — 같은 부탁인데도 어떤 날은 찰떡같이, 어떤 날은 엉뚱하게 답이 와요.

차이는 실력이 아니라 '재료'예요. 오늘은 AI 직원에게 일감을 줄 때 좋은 재료를 같이 건네는 법 — @파일 지목, 이미지 붙여넣기, 에러 전문 붙여넣기 — 세 가지를 배웁니다.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「컨텍스트 주기 — @파일·이미지·붙여넣기」 레슨 내용 전체 텍스트로 훑어보기

같은 질문, 다른 답

Claude에게 '메뉴판 페이지 좀 고쳐줘'라고만 했더니 영 다른 걸 고쳤어요. 가장 큰 원인은?

맞아요. AI는 받은 재료 안에서만 일해요. '메뉴판 페이지'가 어느 파일인지, 어떤 모습이어야 하는지 안 주면 추측으로 메꿔요. 같은 질문도 재료가 좋으면 답이 좋아진다 — 이게 오늘의 한 줄이에요.

디자인 시안을 그대로 만들고 싶을 때, 두 방식을 비교해봐요.

🗣️ 말로 설명하기: "위에 초록색 띠 있고, 가운데에 인기 반찬 세 개를 카드로… 아래엔 영업시간…" — 말로 풀면 길고, 빠지는 게 생겨요. AI는 빠진 부분을 상상으로 채워요.

🖼️ 실물 보여주기: 시안 이미지를 그대로 붙여넣기 + "이 화면처럼 만들어줘". 색·간격·배치가 한눈에 전해져요. 천 마디 말보다 한 장이 정확해요.

가게 폴더엔 파일이 여러 개예요. 그중 딱 한 파일을 일감으로 줄 땐 @파일이름으로 지목해요. Claude를 켜고, 메뉴 페이지를 콕 집어 봐요.

@menu/index.html 이 메뉴판 페이지에서 반찬 가격 글씨를 더 크고 굵게 바꿔줘 — 고칠 파일을 @로 정확히 지목해요

@menu/index.html 하나로 "어느 파일?"이라는 추측이 사라졌어요. AI가 그 파일을 직접 읽고 일해요. @를 치면 후보 파일 목록이 떠서 골라 넣기도 편해요.

@파일이름은 AI에게 "이 파일 보고 해"라고 손가락으로 가리키는 것이에요.

왜 좋은가

· "그 페이지"처럼 말로 더듬을 필요가 없어요 — 정확히 그 파일을 줘요
· AI가 엉뚱한 파일을 건드릴 위험이 줄어요
· 폴더(@menu/)나 여러 파일도 한 번에 가리킬 수 있어요

막연한 지시("어디 있는 메뉴 좀")와 재료 있는 지시(@menu/index.html)는 결과가 완전히 달라져요.

가게 첫 페이지가 깨져 보여서, 화면 스크린샷을 찍어 Claude 입력창에 붙여넣고 "이 화면 왜 이래?"라고 물으면 어떻게 될까요?

맞아요. Claude는 붙여넣은 이미지를 직접 봐요. 깨진 레이아웃, 잘린 글씨, 어긋난 색을 눈으로 확인하고 답해요. 말로 '좀 이상해요'라고 하는 것보다 실물 한 장이 훨씬 빠르고 정확해요.

디자인 시안 이미지를 입력창에 그대로 붙여넣고(클립보드에 복사한 뒤 Cmd+V) "이 시안처럼 만들어줘"라고 해봐요. 말로 묘사하지 말고, 실물을 보여주는 거예요.

[이미지 붙여넣음] 우리 반찬가게 첫 페이지를 이 시안처럼 만들어줘. 색이랑 카드 배치 그대로 따라줘

— 시안 이미지를 붙여넣고 그대로 만들어달라고 해요

색·간격·배치를 말로 다 풀지 않아도 시안 한 장이 전부 전했어요. 디자인은 '말로 설명' 대신 '실물 보여주기'가 거의 항상 이겨요.

세 번째 재료는 에러 메시지예요. 가게 페이지를 띄우다 빨간 에러가 났을 때, 흔한 실수는 이거예요 —

❌ "뭔가 에러 떴어"

AI는 어떤 에러인지 몰라서 또 추측해요. "에러 떴어"는 재료가 아니라 신음 소리에 가까워요.

✅ 에러 전문을 그대로 복사해 붙여넣기

빨간 글씨 처음부터 끝까지 통째로 — 파일명·줄 번호·메시지가 다 들어있어요. AI는 그 단서들로 정확한 원인을 짚어요.

Claude에게 특정 파일을 콕 집어 일감으로 줄 때 파일이름 앞에 붙이는 기호 한 글자는 뭘까요? 빈칸을 채워보세요.

정답! @예요. @menu/index.html처럼 파일을 손가락으로 가리키는 기호죠. @를 치면 가게 안 파일 후보가 떠서 골라 넣기도 좋아요.

가게 페이지를 띄우다 난 에러를 요약하지 말고 전문 그대로 붙여넣어 봐요. AI가 단서를 읽고 정확히 고치게요.

이 에러 좀 고쳐줘:
Uncaught SyntaxError: Unexpected token '<' (menu/index.html:42)

— 에러 메시지를 통째로 복사해 붙여넣어요

'줄 번호 42'·'index.html' 같은 단서가 전문 안에 다 들어있었기에 한 번에 잡혔어요. 에러는 줄이지 말고 통째로 — 오늘 꼭 가져갈 습관이에요.

같은 일감, 재료 유무로 결과가 갈려요.

😵 막연한 지시: "메뉴 페이지 좀 손봐줘. 에러도 났던데." → AI가 어느 파일·무슨 에러인지 추측. 엉뚱한 곳을 고치거나 되묻느라 시간이 가요.

🎯 재료 있는 지시: @menu/index.html + 시안 이미지 + 에러 전문. → AI가 실물을 보고 단서로 일. 한 번에 정확히 끝나요.

한 줄로

같은 질문도 재료가 좋으면 답이 좋아져요. 일감을 줄 땐 세 가지를 챙기세요 — @파일로 지목, 이미지로 실물 보여주기, 에러는 전문 통째로. 말로 더듬는 대신 실물을 건네는 거예요.

다음 레슨에서

그런데 매번 재료를 처음부터 다시 주긴 번거롭죠. AI가 어제 일을 기억하게 만드는 법 — '메모리·세션'을 다음 레슨에서 풉니다. 가게는 계속 자랍니다. 🌱