studio.soluta

SOLV · W03

콘텐츠 시스템

01

좋은 지시의 구조

주황색 퍼핏이 원·삼각형·사각형 세 칸이 있는 입력판에 카드를 넣는 그림
맥락·기준·형태를 적으면 AI가 빈 조건을 짐작으로 채우는 일을 줄일 수 있습니다

좋은 지시는 맥락·기준·형태 세 가지를 담습니다.

  • 맥락: 이 요청이 무엇을 위한 것인지입니다. “이 표 정리해 줘”보다 “팀 회의 공유용으로 이 표를 정리해 줘”가 낫습니다.
  • 기준: 여러 방향 중 무엇을 우선할지입니다. “카피 다듬어 줘”보다 “이 카피를 존댓말로 통일하고 60자 안쪽 문장으로 다듬어 줘”가 낫습니다.
  • 형태: 결과를 어떤 모양으로 받고 싶은지입니다. “정리해 줘”보다 “표 형식으로, 열은 날짜·담당자·상태 3개만 남겨 줘”가 낫습니다.

위 화면에서 조건을 하나씩 켜 보면 같은 메모에서 돌아오는 결과가 줄글에서 표로 바뀌고, 순서가 잡히고, 메모에 없던 담당자 이름이 미정으로 바로잡히는 것을 볼 수 있습니다.

조건을 적으면 결과가 달라지는 데에는 이유가 있습니다. AI는 요청문을 명령으로 알아듣는 것이 아니라 이어 쓸 글의 앞부분으로 읽고 그 뒤에 올 말을 후보 중에서 골라 문장을 만들기 때문에, 앞부분에 정보가 적으면 후보가 넓게 퍼지고 받는 사람과 형식과 길이가 적혀 있으면 후보가 한쪽으로 좁아집니다. 요청을 고칠 때 표현을 정중하게 다듬기보다 이어질 말의 범위를 좁히는 조건을 하나씩 더하는 편이 나은 것도 이 때문입니다.

형태는 “표로”, “세 줄로”, “장단점으로”, “순서대로”, “확인 목록으로”처럼 짧게 적을 수 있습니다. 짧은 지시만으로도 답의 구조는 바뀌지만, 열 이름·순서·분량까지 같게 받으려면 그 조건을 함께 적습니다.

요청사용자가 정한 것Claude가 정하는 것
정리해 줘정리 작업결과 형태, 항목, 순서
표로 정리해 줘결과 형태열 이름, 순서
날짜·할 일·담당자 세 열로 정리해 줘결과 형태와 열문장 표현

이 짧은 말은 Claude가 뜻을 읽는 프롬프트AI에게 보내는 요청문입니다. Claude Code에서 슬래시(/)로 시작하는 입력은 등록된 명령이나 Skill특정 작업 절차를 담은 지침 묶음을 열 수 있습니다. /simplify처럼 이미 다른 기능으로 쓰이는 이름도 있습니다. 따라서 이 카드에서는 /table 대신 “표로 정리해 줘”처럼 문장으로 씁니다.

연습

세 결과를 나란히 놓고 표 여부, 열 이름, 정렬 순서, 메모에 없던 내용을 임의로 채웠는지 비교해 보세요.

같은 입력에서 결과 형태와 구체적인 조건을 차례로 바꾼 뒤 달라진 항목을 짚을 수 있으면 통과입니다.

알아두면 좋습니다

참고 자료에서는 `/table`·`/brief`를 짧은 지시문으로 소개하지만 Claude를 만든 Anthropic의 공식 명령 목록에는 없습니다. Claude Code에서는 슬래시로 실제 명령이나 Skill을 엽니다. `/simplify`는 최근 변경 파일을 검토하는 기능으로 이미 등록되어 있습니다. 이 카드의 예시는 ‘표로 정리해 줘’처럼 문장으로 씁니다. 결과와 관계없는 배경은 덜어 냅니다.

용어 풀이

전체 용어집 →
맥락
이 요청이 무엇을 위한 것인지를 말합니다. 예를 들어 "팀 회의 공유용"이라고 밝히면 AI가 그에 맞춰 답을 만듭니다.
기준
여러 방향 중 무엇을 우선할지 정한 조건입니다. 예를 들어 "존댓말로", "60자 이내로"가 기준입니다.

2026-08-18 기준 · 출처 · Anthropic — What are skills?, Anthropic — Claude Code cheatsheet, 에트 매거진 — 클로드 명령어 100개 + 보너스 33개

02

컨텍스트 — AI가 아는 것의 범위

주황색 퍼핏이 풀린 실타래와 새 실타래 사이를 지나가는 그림
대화가 무거워지면 필요한 결정만 요약해 새 대화로 옮깁니다

컨텍스트는 지금 이 대화창에 실제로 들어와 있는 정보의 범위라서, AI는 이 범위 밖의 내용을 알지 못합니다. 어제 다른 대화에서 말해 준 내용이 오늘 이어지지 않는 것도 그 내용이 지금 대화창 안에 없기 때문입니다.

대화가 길어지면 이 범위가 무거워졌다는 신호가 나타납니다.

  • 답이 늘어집니다.
  • 앞서 정한 기준을 놓친 것처럼 답합니다.

위 화면의 막대가 그 창입니다. 대화 한 번 더를 누를 때마다 지난 대화가 자리를 넓히고 답을 쓸 자리가 줄어들며, 한계를 넘으면 앞부분이 창 밖으로 밀려납니다.

담을 수 있는 양에도 정해진 최대치가 있고 이를 컨텍스트 창이라고 부릅니다. 크기는 토큰 수로 정해지는데, 토큰은 AI가 글을 잘라 세는 단위여서 한 낱말이 여러 조각으로 갈리기도 합니다. 이 범위는 지난 대화만 쓰는 것이 아니라 화면에 보이지 않는 안내문과 이번 질문, 앞으로 쓸 답까지 함께 나눠 쓰기 때문에, 앞부분이 길어지면 답에 쓸 자리가 줄어 답이 갑자기 짧아지기도 합니다.

이 신호가 오면 지금까지의 결정과 남은 일을 파일 하나로 정리한 뒤 새 대화를 시작합니다. 결정을 어디에도 적지 않고 대화창 하나로 며칠씩 이어가면 초반에 정한 기준이 흐려지거나 뒤집힙니다.

짧은 질문 하나로 끝나는 작업은 신경 쓰지 않아도 됩니다.

연습

방금 뽑은 목록을 실제로 새 대화에 붙여넣고, AI가 그 정보만으로 이어받아 답하는지 확인해 보세요.

지금 이 대화창에 없는 정보는 AI가 모른다는 것과, 같은 대화 안에서는 길어질수록 앞부분의 영향력만 약해진다는 것을 구분해 말할 수 있으면 통과입니다.

알아두면 좋습니다

대화창이 길어져도 앞선 내용이 통째로 지워지는 것이 아니라, 담을 수 있는 범위 안에서 오래된 내용의 영향력이 점점 옅어지는 것에 가깝습니다. 반대로 대화창을 새로 열면 그 범위가 완전히 처음으로 돌아갑니다. 이 둘을 혼동하면 언제 정보가 사라지는지 잘못 짚게 됩니다.

용어 풀이

전체 용어집 →
컨텍스트
지금 대화창에 실제로 들어와 있는 정보의 범위입니다. 이 범위 밖의 내용은 AI가 알지 못합니다.
세션
대화창 하나를 여는 순간부터 닫을 때까지를 말합니다. 새 대화창을 열면 새 세션이 시작되고, 이전 대화 내용은 이어지지 않습니다.
컨텍스트 창
한 대화에 담을 수 있는 최대 범위입니다. 토큰 수로 정해져 있고, 지난 대화와 이번 질문과 앞으로 쓸 답이 그 안에서 자리를 나눠 씁니다.
토큰
AI가 글을 잘라 세는 단위입니다. 한 낱말이 여러 조각으로 갈리기도 하고, 담을 수 있는 양을 이 수로 셉니다.

2026-08-15 기준 · 출처 · Anthropic — Context windows

03

메타 프롬프팅

신메뉴 홍보용 인스타그램 게시물을 AI에게 맡기는 예시를 네 칸으로 나눈 그림입니다. 이미 적은 내용, 확인할 내용, 빼먹기 쉬운 내용, 해 본 뒤 찾는 내용을 비교합니다
신메뉴 홍보 요청에서 빠진 말을 네 칸으로 나눠 봅니다

프롬프트(prompt)는 AI에게 주는 부탁문입니다. 메타(meta)는 “일을 어떻게 부탁할까?”를 먼저 생각한다는 말입니다. 메타 프롬프팅은 AI에게 바로 일을 시키기 전에 AI와 함께 부탁문을 만들고 고치는 방법입니다.

질문을 질문하기, 계획을 계획하기, 위임을 위임하기

메타 프롬프팅은 일을 시작하기 전에 그 일을 시키는 방법부터 한 단계 위에서 살펴봅니다.

  • 질문을 질문하기: 답을 얻기 전에 어떤 질문이 필요한지 AI에게 묻습니다.
  • 계획을 계획하기: 계획을 세우기 전에 무엇을 정하고 어떤 순서로 확인할지 묻습니다.
  • 위임을 위임하기: 일을 맡기기 전에 어떤 AI에게 무엇을 어디까지 맡길지 정합니다.

바로 붙여 넣어 쓰는 예시

질문을 질문하기

신메뉴 홍보용 인스타그램 게시물을 만들려고 합니다.

바로 문안을 작성하지 말고, 결과를 만들기 전에 확인해야 할 질문을 먼저 해 주세요. 꼭 필요한 질문만 다섯 개까지 정리하고, 중요한 질문부터 하나씩 물어봐 주세요.

계획을 계획하기

우리 매장의 한 달 소셜미디어 콘텐츠 계획을 만들려고 합니다.

바로 콘텐츠 일정을 작성하지 말고, 좋은 계획을 세우려면 무엇을 먼저 정해야 하는지 알려 주세요. 확인할 내용, 작업 순서, 각 단계에서 나와야 할 결과를 먼저 제안해 주세요. 정보가 부족한 부분은 추측하지 말고 질문해 주세요.

위임을 위임하기

매주 반복하는 매장 홍보 콘텐츠 제작을 AI에게 맡기고 싶습니다.

바로 콘텐츠를 만들지 말고, 어떤 업무를 어디까지 맡길 수 있는지 먼저 나눠 주세요. AI가 처리할 일, 내가 직접 결정할 일, 중간에 확인할 시점, 작업이 끝났다고 판단할 기준을 정리해 주세요.

한 요청에 넣어 보면

신메뉴 홍보용 인스타그램 게시물을 AI에게 맡긴다고 가정합니다. 먼저 신메뉴 사진을 넣은 인스타 카드 5장이라고 적습니다. 가격과 판매 시작일은 아직 모르므로 AI가 먼저 확인하게 합니다. 실제 메뉴의 모양과 색을 바꾸지 말라는 조건은 내가 알고 있지만 빼먹기 쉬워서 함께 적습니다. 첫 장 문구와 게시 날짜는 초안을 본 뒤에야 정할 수 있으니, 첫 결과를 보고 다시 보탭니다.

그림의 네 칸은 이 한 요청에서 필요한 말을 찾는 방법입니다. 바로 적을 말부터 확인하고 빼먹기 쉬운 말과 첫 결과 뒤에 더할 말을 이어서 찾습니다. 영어 이름은 원래 분류를 함께 표시한 것이고 이 페이지에서는 실제로 부탁문을 고치는 흐름으로 읽습니다.

이 과정을 여섯 단계로 진행합니다.

  1. 무엇을 만들지 정하기: 만들 것과 쓸 곳을 적습니다.
  2. 쓸 것 모으기: 사진, 글, 파일처럼 AI가 봐야 할 것을 모읍니다.
  3. 질문받기: AI에게 빠진 말을 한 번에 하나씩 물어봐 달라고 합니다.
  4. 부탁문 만들기: 내가 말한 것과 답한 것을 한 문서에 모읍니다.
  5. 한 번 해 보기: 부탁문을 AI에게 주고 결과를 만듭니다.
  6. 다시 고치기: 결과를 보고 빠진 말을 부탁문에 넣습니다.

어디에 쓸지와 잘 됐는지 확인할 방법을 함께 적으면 AI가 무엇을 만들어야 하는지 더 정확히 알 수 있습니다.

연습

같은 일을 짧은 한 문장으로 부탁하고 질문에 답해 만든 부탁문으로도 부탁합니다. 두 결과를 보고 빠진 말을 찾은 뒤 부탁문에 다시 넣습니다.

AI에게 질문받아 답한 뒤 무엇을 만들지, 어떤 자료를 쓸지, 무엇을 지켜야 할지, 잘 됐는지 어떻게 확인할지를 담은 부탁문으로 한 번 실행했습니다. 첫 결과에서 빠진 말을 하나 이상 찾아 다시 넣었습니다.

알아두면 좋습니다

AI의 질문에 모두 "네가 알아서 해 줘"라고 답하면 내가 정해야 할 것까지 AI가 고릅니다. 결과를 바꾸는 중요한 것은 직접 답하고 나중에 바꿔도 되는 작은 것은 추천받습니다. 첫 결과를 보고 빠진 말을 찾아 부탁문에 다시 넣었는지를 확인합니다.

용어 풀이

전체 용어집 →
메타
이 수업에서는 일을 시작하기 전에 어떻게 부탁할지 먼저 생각한다는 뜻으로 씁니다.
메타 프롬프팅
AI에게 바로 일을 시키기 전에 AI와 함께 부탁할 말을 만들고 고치는 방법입니다.
맥락 풀어놓기
머릿속에 있는 말을 모두 적어 AI에게 보여 주는 것입니다.
원본 영상

2026-08-25 기준 · 출처 · A field guide to Claude Fable 5: Finding your unknowns (Thariq Shihipar, Anthropic)

04

받은 답 되짚어 묻기

AI가 내놓은 답은 요청에 맞춰 정리된 상태로 나오기 때문에 읽는 동안에는 빈틈이 잘 보이지 않습니다. 계획이든 초안이든 문장이 고르게 이어져 있어서 그대로 실행에 넣기 쉬운데, 정작 어느 부분이 부족한지는 답 안에 적혀 있지 않습니다. 되짚어 묻는 질문은 그 빠진 부분을 답 밖으로 꺼내는 요청입니다.

네 가지를 묻습니다. 가장 부족한 부분이 무엇인지, 진행할 때 가장 먼저 생길 문제가 무엇인지, 시간이나 예산이 절반이면 무엇을 빼는지, 오늘 안에 할 수 있는 일 세 가지가 무엇인지입니다. 앞의 세 가지는 답을 다른 기준으로 검토하게 만들고 마지막 하나는 긴 답을 오늘 손댈 수 있는 크기로 줄입니다.

메타 프롬프팅이 요청을 보내기 전에 빠진 조건을 채우는 일이라면, 되짚어 묻기는 답을 받은 뒤에 하는 일입니다. 앞뒤로 한 번씩 거치면 요청과 결과 양쪽에서 짐작으로 채워진 자리가 줄어듭니다.

되묻기는 한 바퀴만 돕니다. 같은 대화에서 계속 고치게 하면 답이 매번 조금씩 달라져서 어느 안이 나았는지 비교할 기준이 사라집니다. 한 번 되묻고 고친 다음에는 멈추고, 무엇을 남길지는 사람이 정합니다.

연습

같은 초안을 두고 1번만 물었을 때와 네 가지를 모두 물었을 때를 나란히 놓아 보세요. 두 결과에서 실제로 달라진 문장에 표시해 보면 어느 질문이 답을 바꿨는지 보입니다.

되물은 뒤 초안에서 실제로 달라진 문장 두 개를 짚어 낼 수 있으면 통과입니다.

알아두면 좋습니다

"더 좋게 해 줘"는 되묻기가 아닙니다. 기준 없이 다시 쓰게 하면 분량만 늘고 무엇을 판단할지는 그대로 남습니다. AI가 문제로 짚은 부분도 근거를 확인해야 합니다. 그럴듯한 지적이 내 조건에서는 맞지 않을 수 있어서, 지적을 받은 자리에서 바로 고치기 전에 근거를 한 번 묻습니다.

용어 풀이

전체 용어집 →
되짚어 묻기
AI가 낸 답을 받은 뒤 같은 대화에서 그 답을 검토하게 하는 질문입니다.
초안
먼저 만들어 보는 첫 버전입니다. 뒤에 고치는 것을 전제로 씁니다.

2026-08-22 기준 · 출처 · Anthropic — Prompting best practices

05

좋은 요청

흰 고양이가 목표 표식을 건네고 주황색 퍼핏이 점선 경로를 따라가는 그림
원하는 결과와 그 이유·제약을 함께 적으면 Claude가 빈 조건을 짐작하지 않아도 됩니다

어떤 기준으로 정렬할지, 어떤 열을 남길지, 결과를 어디에 쓸지는 요청한 사람만 압니다. 이 조건들을 요청 문장 안에 함께 적으면 짐작의 여지가 줄어듭니다.

“카피 다듬어 줘”처럼 기준 없이 던지는 요청은 피합니다. 무엇을 기준으로 다듬을지 정하지 않으면 Claude는 임의의 기준으로 결과를 채웁니다. “이 카피를 존댓말로 통일하고, 이모지는 빼고, 60자 안쪽 문장으로 다듬어 줘”처럼 기준을 문장 안에 넣으면 뒤이은 재작업이 줄어듭니다.

직군마다 붙일 맥락은 다릅니다.

  • 기획자 — 회의록에서 결정 사항만 정리해 달라고 할 때 “결정된 것만, 담당자 이름과 함께”를 덧붙입니다.
  • 마케터 — 캠페인 결과 보고서를 요청할 때 “임원 보고용, 숫자 위주로”라는 용도를 붙입니다.
  • 디자이너 — 시안 설명 문구를 요청할 때 “클라이언트 메일에 넣을 용도”라는 맥락을 더합니다.

규칙이 반복되면 매번 적을 필요는 없습니다. 자주 쓰는 제약은 CLAUDE.md에 한 번 적어 두면 다음 요청부터 생략해도 적용됩니다.

순서의 각 단계 아래 붙여넣기 예제가 있습니다. 위에서부터 하나씩 실행해 보세요.

  1. 원하는 결과물을 한 문장으로 정리합니다.

    내가 만들려는 결과물은 이거야: [결과물 한 문장]. 이 문장이 요청의 목표로 충분히 구체적인지 봐 주고, 모호한 부분이 있으면 어떻게 좁힐지 되물어 줘.

    확인결과물 문장의 모호한 지점이 지적되고, 좁히는 질문이 돌아옵니다.

  2. 그 결과물을 어디에 쓸지, 왜 필요한지 덧붙입니다.

    이 결과물은 [어디에 쓸지, 왜 필요한지]에 쓸 거야. 이 용도를 반영해서 앞의 요청 문장을 다시 정리해 줘.

    확인용도가 반영된 요청 문장으로 다시 정리됩니다.

  3. 형식·톤·분량 같은 제약을 나열합니다.

    형식·톤·분량 제약을 추가할게: [제약을 나열]. 이 제약까지 반영해서 요청 문장을 다시 정리해 줘.

    확인제약이 반영된 요청 문장으로 업데이트됩니다.

  4. 참고할 예시가 있으면 함께 첨부합니다.

    참고할 예시가 있어: [예시 설명 또는 텍스트]. 이 예시의 스타일을 반영해서 요청 문장을 완성해 줘.

    확인예시 스타일이 반영된 최종 요청 문장이 완성됩니다.

  5. 반복되는 제약은 요청 대신 CLAUDE.md에 옮겨 적습니다.

연습

다시 쓴 요청에 목적이나 제약이 실제로 들어갔는지 확인해 보세요.

결과물에 이유나 제약을 반영한 요청 한 건을 스스로 써낼 수 있으면 통과입니다.

알아두면 좋습니다

한 요청에 여러 작업을 욱여넣으면 일부만 반영되고 나머지는 빠지기 쉬우므로, 작업을 나눠 순서대로 요청합니다. 결과를 어디에 쓸지 생략하면 Claude가 맥락을 짐작으로 채우므로, 용도를 한 줄이라도 적어 두는 편이 안전합니다.

용어 풀이

전체 용어집 →
CLAUDE.md
Claude에게 반복해서 알려주고 싶은 규칙을 미리 적어 두는 텍스트 파일입니다. 한 번 적어 두면 다음 요청부터 자동으로 적용됩니다.
프롬프트
Claude에게 원하는 작업을 설명해 전달하는 요청 문장입니다.

2026-07-13 기준 · 출처 · Claude Code — Quickstart

06

AI가 읽는 파일 형식

Markdown·HTML·JSON·CSV·SVG 파일의 원문과 미리보기를 카드로 나란히 정리한 화면
글은 Markdown, 화면은 HTML, 구조화된 값은 JSON·CSV, 벡터 그림은 SVG처럼 목적에 맞춰 파일을 고릅니다

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

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가 색·도형·텍스트를 바꿀 수 있지만, 수정 뒤에는 브라우저에서 실제 그림도 열어 확인합니다.

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

  1. 파일명 끝의 확장자를 확인합니다.

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

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

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

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

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

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

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

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

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

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

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

  5. .svg는 코드와 그림을 모두 확인합니다.

    badge.svg를 읽고 화면에 보이는 도형과 텍스트를 설명해 줘. viewBox와 사용한 색도 함께 적어 줘.

    확인SVG 코드의 구조와 실제 그림에 보이는 요소가 함께 설명됩니다.

연습

sample 폴더의 project-brief.md와 product-card.html을 각각 원문과 결과 화면으로 열어 보세요.

파일 하나를 골라 AI가 읽는 구조와 사람이 확인할 화면을 각각 말할 수 있으면 통과입니다.

알아두면 좋습니다

확장자만 바꾼다고 파일 형식이 바뀌지는 않습니다. .txt 파일 이름을 .html로 바꿔도 HTML 구조가 없으면 웹페이지가 되지 않습니다. HTML·SVG는 코드 검사만으로 끝내지 말고 실제 화면도 열어 확인합니다.

용어 풀이

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

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