이 단원의 카드 2개
- 좋은 요청
- AI가 읽는 파일 형식
실습 파일
AI가 읽는 파일 형식
확장자는 파일의 역할을 알려 줍니다
-
AI는 파일 내용을 읽을 수 있지만, 모든 파일을 같은 방식으로 다루지는 않습니다
-
.md— 제목·목록·링크를 간단한 기호로 적는 문서 원문입니다. -
.html— 브라우저가 웹페이지로 그리는 구조입니다. -
.pdf— 글자와 이미지의 페이지 배치를 고정해 전달하는 문서입니다. -
.json— 이름이 붙은 필드와 값을 프로그램끼리 주고받는 형식입니다. -
.csv— 같은 열을 가진 여러 행을 표처럼 저장합니다. -
.svg— 도형과 글자를 코드로 저장한 벡터 이미지입니다. -
.png·.jpg— 픽셀 이미지라서 글자 원문 대신 화면을 보고 해석합니다.
Markdown은 원문과 미리보기를 오가며 봅니다
-
.md파일을 메모장처럼 열면#,-, 백틱 같은 기호가 보입니다 -
이 원문은 AI가 읽고 수정하기 쉽고, Git에서 바뀐 내용을 확인하기도 쉽습니다
-
미리보기를 열면 제목·목록·표가 정리된 문서로 보입니다
-
VS Code에서
.md파일을 열고 macOS는Shift+Command+V, Windows·Linux는Ctrl+Shift+V를 누르면 미리보기가 열립니다. -
원문과 미리보기를 나란히 보려면 macOS는
Command+K V, Windows·Linux는Ctrl+K V를 사용합니다. -
전용 앱: 사진에 나온 MarkText·MacDown으로 열어도 됩니다
-
기본: 별도 설치가 필요 없는 VS Code 미리보기
HTML은 브라우저에서 한 번 더 확인합니다
-
.html원문에 적힌 것: 제목, 문단, 버튼, 스타일 규칙 -
AI가 만든 코드가 맞아 보여도 화면이 잘리거나 글자 크기가 어긋날 수 있습니다
-
원문은 VS Code에서 읽습니다.
-
결과는 파일을 Chrome·Safari·Edge 같은 브라우저로 열어 확인합니다.
-
화면 폭을 바꿔 모바일과 데스크톱에서 모두 읽히는지 봅니다.
구조화 파일은 필드와 행을 지킵니다
- JSON:
name,price처럼 필드 이름이 중요한 작업 - CSV: 제품 목록·고객 목록처럼 같은 열을 가진 표
- AI에게 수정시킬 때 함께 적을 조건: 필드 이름, 행 수, 저장 인코딩
- SVG: 그림이면서 코드. AI가 색·도형·텍스트를 바꿀 수 있습니다
- SVG 수정 뒤에는 브라우저에서 실제 그림을 열어 확인합니다
실행 순서
따라하기 덱으로 열기 →-
파일명 끝의 확장자를 확인합니다.
이 폴더의 파일을 확장자별로 묶고, 각 파일을 한 줄로 설명해 줘. 파일은 수정하지 마.
확인.md·.html·.json처럼 확장자별 목록과 역할이 나오고 파일은 바뀌지 않습니다.
-
.md 파일의 원문과 미리보기를 나란히 엽니다.
project-brief.md를 읽고 제목과 항목만 요약해 줘. 파일은 수정하지 마.
확인Markdown 기호가 아니라 문서의 제목과 항목 구조를 읽은 요약이 나옵니다.
-
.html 파일을 브라우저에서 열어 결과 화면을 확인합니다.
product-card.html의 문구와 화면 구조를 확인해 줘. 브라우저에서 열었을 때 보이는 순서대로 설명하고 파일은 수정하지 마.
확인HTML 코드가 아니라 브라우저에 보이는 제목·설명·버튼 순서가 설명됩니다.
-
.pdf 파일은 저장된 페이지와 글자를 함께 확인합니다.
proposal.pdf의 첫 페이지를 열어 제목과 본문이 잘 보이는지 확인해 줘. 페이지 수와 선택할 수 있는 글자가 있는지도 알려 줘. 파일은 수정하지 마.
확인첫 페이지의 제목과 본문, 전체 페이지 수, 글자 선택 여부가 설명됩니다.
-
.json·.csv는 필드와 행이 유지되는지 확인합니다.
products.json과 products.csv의 필드 이름과 행 수를 비교해 줘. 값이 다른 곳이 있으면 파일명과 항목을 적어 줘.
확인두 파일의 필드와 행 수가 비교되고 불일치가 있으면 위치가 표시됩니다.
-
.svg는 코드와 그림을 모두 확인합니다.
badge.svg를 읽고 화면에 보이는 도형과 텍스트를 설명해 줘. viewBox와 사용한 색도 함께 적어 줘.
확인SVG 코드의 구조와 실제 그림에 보이는 요소가 함께 설명됩니다.
직접 해보기
이 폴더의 .md, .html, .pdf, .json, .csv, .svg 파일을 찾아 표로 정리해 줘. 열: 파일 경로 / 사람이 확인하는 방법 / AI에게 맡기기 좋은 일 / 수정 전 확인할 점. 파일은 수정하지 마.
대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.
[내 프로젝트 폴더]에서 AI가 읽어야 할 파일과 사람이 결과 화면으로 확인해야 할 파일을 나눠 줘. 각 파일을 왜 그렇게 나눴는지 한 줄씩 적고 수정은 하지 마.
방금 분류한 파일 가운데 원문만 보고 완료를 판단하면 안 되는 파일을 골라 줘. 각 파일에 필요한 실제 확인 방법을 명령이나 메뉴 이름으로 적어 줘.
sample 폴더의 project-brief.md와 product-card.html을 각각 원문과 결과 화면으로 열고, proposal.pdf의 첫 페이지도 확인해 보세요.
헷갈리기 쉬운 것
확장자만 바꾼다고 파일 형식이 바뀌지는 않습니다. .txt 파일 이름을 .html로 바꿔도 HTML 구조가 없으면 웹페이지가 되지 않습니다. HTML·PDF·SVG는 원문 검사만으로 끝내지 말고 실제 화면도 열어 확인합니다.
용어 풀이
전체 용어집 →2026-07-29 기준 · 출처 · Visual Studio Code — Markdown and Visual Studio Code, MarkText — Markdown editor, MacDown — Markdown editor for macOS
