studiosoluta
← 요청하는 법 단원 · 카드 2/2
이 단원의 카드 2개
  1. 좋은 요청
  2. AI가 읽는 파일 형식

실습 파일

AI가 읽는 파일 형식

project-brief.md, product-card.html, proposal.pdf의 실제 화면을 나란히 보여 주는 개요
Markdown·HTML·PDF 실제 문서 예제

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

  • 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 수정 뒤에는 브라우저에서 실제 그림을 열어 확인합니다
  1. 파일명 끝의 확장자를 확인합니다.

    이 폴더의 파일을 확장자별로 묶고, 각 파일을 한 줄로 설명해 줘. 파일은 수정하지 마.

    확인.md·.html·.json처럼 확장자별 목록과 역할이 나오고 파일은 바뀌지 않습니다.

  2. .md 파일의 원문과 미리보기를 나란히 엽니다.

    project-brief.md를 읽고 제목과 항목만 요약해 줘. 파일은 수정하지 마.

    확인Markdown 기호가 아니라 문서의 제목과 항목 구조를 읽은 요약이 나옵니다.

  3. .html 파일을 브라우저에서 열어 결과 화면을 확인합니다.

    product-card.html의 문구와 화면 구조를 확인해 줘. 브라우저에서 열었을 때 보이는 순서대로 설명하고 파일은 수정하지 마.

    확인HTML 코드가 아니라 브라우저에 보이는 제목·설명·버튼 순서가 설명됩니다.

  4. .pdf 파일은 저장된 페이지와 글자를 함께 확인합니다.

    proposal.pdf의 첫 페이지를 열어 제목과 본문이 잘 보이는지 확인해 줘. 페이지 수와 선택할 수 있는 글자가 있는지도 알려 줘. 파일은 수정하지 마.

    확인첫 페이지의 제목과 본문, 전체 페이지 수, 글자 선택 여부가 설명됩니다.

  5. .json·.csv는 필드와 행이 유지되는지 확인합니다.

    products.json과 products.csv의 필드 이름과 행 수를 비교해 줘. 값이 다른 곳이 있으면 파일명과 항목을 적어 줘.

    확인두 파일의 필드와 행 수가 비교되고 불일치가 있으면 위치가 표시됩니다.

  6. .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는 원문 검사만으로 끝내지 말고 실제 화면도 열어 확인합니다.

용어 풀이

전체 용어집 →
파일 확장자
파일명 끝의 .md·.html·.json 같은 표기입니다. 어떤 구조로 저장됐고 어떤 프로그램으로 열지 알려 줍니다.
렌더링
파일 안의 글자와 규칙을 사람이 읽거나 볼 수 있는 화면으로 바꾸는 과정입니다.

2026-07-29 기준 · 출처 · Visual Studio Code — Markdown and Visual Studio Code, MarkText — Markdown editor, MacDown — Markdown editor for macOS