이 핸즈온랩은 교육 내용을 보여 드리기 위한 예시입니다. 실제 교육과정에서는 고객사의 산업과 직무를 반영한 실습 시나리오로 구성한 비공개 학습 사이트를 따로 제공합니다.
M2-1. 설명하고, 미리 보고, 고치기 — 캔버스·코드 보기·되돌리기
한 줄 요약 — 만들고 싶은 결과를 말로 설명하면 Copilot Code가 확인 질문을 하고, 캔버스에서 바로 보여 줍니다. 고칠 때는 한 번에 한 가지씩 요청합니다.
(🧪 Frontier 미리 보기 · Copilot Credits 사용 · 기능·화면·명칭은 2026년 10월 31일 기준 · 변경될 수 있음)
1. 캔버스 — 대화 옆의 작업 공간
대화 옆에 캔버스가 열려 결과물을 보여 줍니다.
| 보기 | 내용 |
|---|---|
| Preview (미리 보기) | 만든 정적 사이트나 웹 앱이 실제로 동작하는 모습 |
| Code view (코드 보기) | 생성된 코드. 직접 편집은 로컬 세션에서만 가능 |
| 요소 선택 | 캔버스에서 화면 요소를 골라 가리킨 뒤, 바꾸고 싶은 내용을 설명 |
미리 보기 지원 범위는 결과물 종류와 기기에 따라 다릅니다. 코드를 읽을 필요는 없습니다. 코드 보기는 “무엇이 만들어졌는지 확인하는 창” 정도로 보면 됩니다.
2. 질문에 답하기
만들기 전에 Copilot Code가 어떤 종류의 앱인지, 화면은 어떤 모양이면 좋은지 확인 질문을 합니다. 답이 구체적일수록 첫 결과가 원하는 모양에 가깝습니다. 처음에는 핵심 기능만 요청하고, 기능은 만들면서 하나씩 더합니다.
⚡ 시연 프롬프트 예
채널별 주간 가입자 수를 보여 주는 대시보드를 만들어 줘.
마케팅 팀원이 월요일 회의에서 화면으로 볼 거야.
3. 한 번에 한 가지씩 고치기
세션 안에서는 앞선 대화가 이어지므로 “방금 만든 것”을 기준으로 말하면 됩니다. 한 번에 여러 가지를 바꾸라고 하면 어디서 틀어졌는지 찾기 어렵습니다.
| 막연한 수정 요청 | 좋은 수정 요청 |
|---|---|
| 좀 더 예쁘게 해 줘 | 제목 글씨를 크게 하고, 표 머리글 배경을 진한 파란색으로 바꿔 줘 |
| 이상해, 다시 해 줘 | 막대그래프의 채널 이름이 겹쳐 보여. 가로 막대로 바꿔 줘 |
| 기능 더 넣어 줘 | 표 위에 월별로 거르는 선택 상자를 하나 넣어 줘 |
화면에서 바꿀 곳이 분명하면 요소를 선택해 가리킨 뒤 “이 버튼을 오른쪽으로 옮기고 이름을 ‘저장’으로 바꿔 줘”처럼 말합니다.
4. 되돌리기
마음에 들지 않으면 “이전 버전으로 되돌려 줘”라고 요청합니다. 수정을 시도하다 더 나빠져도 부담 없이 돌아갈 수 있어서, 과감하게 시도해도 됩니다.
5. 오류가 나면
문제가 생기면 Copilot Code가 먼저 스스로 고치려고 시도합니다. 해결하지 못하면 무엇이 문제인지 쉬운 말로 설명하고 다시 시도할지 묻습니다. 오류 문구를 읽지 못해도 괜찮고, 그대로 두고 “다시 시도해 줘”라고 답하면 됩니다.
핵심 정리
- 결과를 설명하면 확인 질문 → 캔버스 미리 보기 순서로 진행된다
- Code view는 확인용이며, 직접 편집은 로컬 세션에서만 된다
- 수정은 구체적으로, 한 번에 한 가지씩 요청하고 막히면 되돌린다
M2 허브로 → 이전: M1-4 로컬과 클라우드 · 모델 · 작업 모드 · 다음: M2-2 데이터와 업무 컨텍스트
출처: Copilot Code 사용하기 (MS Learn) · Copilot Code 시작하기 (MS Learn)