AI가 읽는 파일 형식

확장자는 파일의 역할을 알려 줍니다

AI는 파일 내용을 읽을 수 있지만, 모든 파일을 같은 방식으로 다루지는 않습니다.

• .md — 제목·목록·링크를 간단한 기호로 적는 문서 원문입니다.
• .html — 브라우저가 웹페이지로 그리는 구조입니다.
• .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 같은 전용 Markdown 앱으로 열어도 됩니다. 수업에서는 별도 설치가 필요 없는 VS Code 미리보기를 기본으로 사용합니다.

HTML은 브라우저에서 한 번 더 확인합니다

.html 원문에는 제목, 문단, 버튼과 스타일 규칙이 적혀 있습니다. AI는 이 코드를 만들고 고칠 수 있지만, 코드가 맞아 보여도 화면이 잘리거나 글자 크기가 어긋날 수 있습니다.

• 원문은 VS Code에서 읽습니다.
• 결과는 파일을 Chrome·Safari·Edge 같은 브라우저로 열어 확인합니다.
• 화면 폭을 바꿔 모바일과 데스크톱에서 모두 읽히는지 봅니다.

구조화 파일은 필드와 행을 지킵니다

JSON은 name, price처럼 필드 이름이 중요한 작업에 적합합니다. CSV는 제품 목록·고객 목록처럼 같은 열을 가진 표에 적합합니다. AI에게 수정시킬 때는 필드 이름, 행 수, 저장 인코딩처럼 유지해야 할 조건을 함께 적습니다.

SVG는 그림이면서 코드입니다. AI가 색·도형·텍스트를 바꿀 수 있지만, 수정 뒤에는 브라우저에서 실제 그림도 열어 확인합니다.

아래 순서대로 실제 샘플 파일을 열고 원문과 결과 화면을 비교해 보세요.

이 폴더의 .md, .html, .json, .csv, .svg 파일을 찾아 표로 정리해 줘.
열: 파일 경로 / 사람이 확인하는 방법 / AI에게 맡기기 좋은 일 / 수정 전 확인할 점.
파일은 수정하지 마.

[내 프로젝트 폴더]에서 AI가 읽어야 할 파일과 사람이 결과 화면으로 확인해야 할 파일을 나눠 줘. 각 파일을 왜 그렇게 나눴는지 한 줄씩 적고 수정은 하지 마.

방금 분류한 파일 가운데 원문만 보고 완료를 판단하면 안 되는 파일을 골라 줘. 각 파일에 필요한 실제 확인 방법을 명령이나 메뉴 이름으로 적어 줘.