영상 정리 · 미드나잇 로그
Claude Code를 만든 팀이 마크다운 대신 HTML로 결과를 받기 시작한 이유와, 토큰 5배 함정
영상의 한국어 자동자막 전체가 근거입니다. 자막 조각 174개, 30초 묶음 12개, 3,110자, 끝 시각 6분 38초. 이 영상은 원어가 한국어라 자막이 온전히 나왔습니다. 다만 자동 받아쓰기라 사람 이름과 전문 용어가 여럿 깨져 있습니다 — 전부 부록 B에 적었습니다.
여기에 더해 영상이 소개하는 원 출처(Anthropic 블로그 글)를 직접 열어 대조했습니다. 그래서 이 정리에는 영상에 없는 내용이 조금 들어 있습니다. 그런 대목은 "영상에 없음"이라고 표시했습니다.
해설자 본인의 이름은 자막으로 확정할 수 없습니다. 채널명만 확인됩니다.
낱말 세 개만 풀고 갑니다.
#을 붙이면 제목, **별표 두 개**로 감싸면 굵은 글씨가 됩니다. 지금까지 AI가 답을 내놓는 사실상의 기본 형식이었습니다. 사람도 읽을 수 있고 기계도 읽을 수 있어서입니다.영상은 고백으로 시작합니다.
"솔직히 100줄 넘는 마크다운, 저도 다 안 읽어요. 클로드한테 계획 짜 달라고 하면 마크다운으로 길게 받았죠. 그런데 길어지면 앞부분만 보고 넘기게 되더라고요."
해설자 [00:01]
여기까지는 흔한 이야기입니다. 그런데 다음 문장이 이 영상의 출발점입니다.
Claude Code를 만든 팀도 똑같았다는 것입니다. 그래서 그들도 마크다운 대신 HTML로 받기 시작했고, Anthropic이 그 내용을 글로 직접 공개했습니다.
그 글에는 활용법이 다섯 가지 나옵니다. 영상은 그중 세 가지를 골라 소개합니다. 그리고 마지막에 함정 하나를 알려 준다고 예고합니다 — 이걸 모르고 다 HTML로 받으면 토큰 청구서가 다섯 배로 뜬다는 것입니다. [00:35]
이 글을 쓴 사람은 타리크 시히파르(Thariq Shihipar), Anthropic Claude Code 팀 멤버입니다. 그가 X(트위터)에 처음 올린 한 줄이 이거였습니다.
"HTML이 새로운 마크다운이다."
Thariq Shihipar [00:35]
이 글이 크게 퍼졌고, 블로그 본문에서 그는 이렇게 적었습니다. 영상 화자가 한 말과 거의 같습니다.
"솔직히 100줄 넘는 마크다운 파일은 나도 잘 안 읽는다. 그리고 우리 조직의 다른 누구에게 그걸 읽히는 것은 확실히 불가능하다."
원 글 본문 (원문 확인)
여기서 영상이 인용하는 정리가 이 장의 핵심입니다. LLM 분야에서 영향력 있는 블로그를 쓰는 사이먼 윌리슨(Simon Willison)이 남긴 코멘트입니다.
"마크다운은 표현력 때문이 아니라, 짧게 끼워 넣을 수 있어서 쓰였던 것이다."
사이먼 윌리슨의 코멘트를 영상이 옮긴 것 [01:08]
무슨 뜻인지 풀면 이렇습니다. 예전 모델은 한 번에 처리하는 글자 수가 훨씬 적었습니다. 책상이 작았다는 뜻입니다. 그 상황에서는 같은 내용을 가장 적은 토큰으로 담는 형식이 이깁니다. 마크다운이 딱 그것이었습니다.
그러니까 마크다운은 더 좋은 형식이라서 이긴 게 아니라, 자리를 덜 차지해서 이겼습니다.
그리고 지금은 모델이 한 번에 100만 토큰까지 처리합니다. 자리를 아낄 이유가 줄었습니다. 제약이 사라졌으니 형식을 다시 고를 때가 됐다는 것이 이 글의 주장입니다. [01:08]
영상은 여기서 결론을 먼저 꺼내 놓습니다. 마크다운을 다 버리라는 얘기가 아닙니다.
시각화할 거면 HTML, 글로 정리할 거면 마크다운.
이 기준이 왜 필요한지는 5장(토큰 함정)에서 드러납니다. 그때 다시 나옵니다. [01:08]
보통 우리는 이렇게 합니다. 디자인이나 기획 안을 받을 때 한 번에 하나씩 받습니다. "이거 어때?" 받고, "다른 것도 보여 줘" 받고, 또 받고.
문제는 세 번째 안을 볼 때쯤이면 첫 번째 안이 기억나지 않는다는 것입니다. 비교를 하고 있는데 비교할 수가 없습니다.
타리크가 실제로 쓴 프롬프트는 이렇습니다.
온보딩 화면 여섯 가지 다른 접근을 만들어 줘. 레이아웃, 톤, 밀도를 다르게 해서 한 HTML 파일에 그리드로 펼쳐 줘. 나란히 비교할 수 있게.
결과는 한 화면에 여섯 개가 같이 떠 있는 것입니다. 눈이 왔다 갔다 하면서 바로 고를 수 있습니다. [02:16]
마크다운으로는 이게 안 됩니다. 위에서 아래로 흐르는 글이라 나란히 놓을 수가 없습니다. 여섯 개를 받아도 결국 여섯 번 스크롤해서 봐야 합니다.
영상이 정리한 사용법은 한 줄입니다.
HTML 그리드로 펼쳐 줘.
기존 요청 끝에 이 한 줄만 붙이면 됩니다.
두 번째는 HTML 안에 슬라이더를 넣는 것입니다. 타리크가 든 예는 결제 버튼 애니메이션 조정입니다.
보통은 이렇게 합니다. "0.3초 동안, 끝에서 천천히 멈추게 해 줘" — 값을 하나 불러 주고, 결과를 보고, 마음에 안 들면 다시 부릅니다. 한 번 바꿔 보려면 한 번 말을 걸어야 합니다.
HTML로 받으면 슬라이더가 같이 옵니다. 슬라이더를 움직이면 결과가 그 자리에서 바뀝니다. 말을 걸 필요가 없습니다. [02:50]
여기에 작지만 중요한 장치가 하나 붙습니다. 마음에 드는 값이 나오면 옆의 복사 버튼을 누릅니다. 값이 클립보드에 담깁니다. 그걸 Claude에게 붙여 넣습니다.
왜 이 단계가 필요한지가 핵심입니다. 슬라이더를 아무리 움직여도 실제 코드는 바뀌지 않기 때문입니다. HTML 파일은 실험대일 뿐입니다. 값을 정한 뒤 Claude에게 돌려줘야 진짜 코드가 고쳐집니다. [02:50]
결과만 받는 게 아니라, 상호작용할 수 있는 형태로 받는 것입니다. 그리고 이건 디자인에만 쓰는 게 아닙니다. 영상이 든 다른 예 두 가지입니다. [03:24]
한 줄로 붙일 프롬프트는 이렇습니다.
값 조정 가능한 슬라이더 넣어 줘. 마음에 드는 값은 복사 버튼으로.
세 번째가 이 영상에서 가장 쓸모가 큰 대목입니다. 모르는 것을 배워야 할 때 쓰는 방법입니다.
타리크의 예시는 토큰 한도였습니다. AI에게 한 번에 보낼 수 있는 양의 한계를 관리하는 방식입니다. 보통은 글로 읽고 이해합니다.
그런데 그가 받은 것은 HTML 파일 하나였고, 그 안에 세 가지가 같이 들어 있었습니다. [03:57]
왜 이게 낫습니까. 글로 받으면 다이어그램이 없고, 코드 따로 설명 따로입니다. 머릿속에서 셋을 이어 붙이는 일을 읽는 사람이 해야 합니다. HTML로 받으면 한 페이지에 셋이 한 묶음으로 옵니다. [04:31]
영상이 든 예는 MCP입니다.
프롬프트 한 줄은 이렇습니다.
이거 학습하려고 하는데, 다이어그램이랑 주석 달린 코드, 주의할 점을 한 HTML로 정리해 줘.
해설자가 이 대목에 붙인 한마디가 영상 전체의 결론이기도 합니다.
"AI 시대의 중요한 능력이 AI로 만들면서 배우는 것이잖아요."
해설자 [04:31]
이제 예고했던 함정입니다. 이 글이 영어권에서 퍼졌을 때 가장 많이 나온 비판이 토큰 비용이었습니다.
파스콸레 필리테리(Pasquale Pillitteri)라는 사람이 직접 재서 올린 숫자를 영상이 인용합니다.
| 같은 코드 리뷰를 받았을 때 | 토큰 |
|---|---|
| 마크다운 | 1,140개 |
| HTML | 5,480개 |
거의 다섯 배입니다. [05:05] HTML은 태그가 붙고, 스타일이 들어가고, 슬라이더를 넣으면 그걸 움직이는 코드까지 들어갑니다. 눈에 보이는 것이 늘어난 만큼 글자 수도 늘어납니다.
해커 뉴스에서 가장 많은 추천을 받은 댓글이 이것이었습니다.
"토큰이 공짜인 사람한테나 좋은 얘기지."
해커 뉴스 댓글, 영상이 옮긴 것 [05:38]
해커 뉴스는 개발자들이 모여 글을 공유하고 토론하는 사이트입니다.
비용이 다섯 배라면 고르는 기준이 있어야 합니다. 파스콸레가 정리한 한 줄이 2장에서 예고했던 그것입니다.
시각화할 거면 HTML. 글로 정리할 거면 마크다운.
영상이 든 구체적인 예입니다. [05:38]
| HTML | 마크다운 |
|---|---|
| 색깔이나 다이어그램으로 한눈에 보기 좋게 만들 때 학습 문서 |
내가 다시 수정할 문서일 때 체크리스트 |
영상의 마지막 당부는 짧습니다. 다 HTML로 받지 마세요. 토큰 비용 다섯 배 나옵니다.
그리고 전체를 한 줄로 접습니다.
"읽지 말고, 만들면서 배우세요."
해설자 [06:10]
영상은 다섯 가지 중 셋을 골랐다고 했습니다. 나머지 둘이 무엇인지 원문에서 확인했습니다. 아래 표에서 회색 배경이 영상이 다루지 않은 것입니다.
| 원 글의 활용법 | 무엇 | 영상 |
|---|---|---|
| 기획·계획·탐색 | 여러 접근을 한 파일에 그리드로 펼쳐 비교 "6가지 다른 접근을 만들어 한 HTML 파일에 그리드로 나란히" |
활용법 1 |
| 코드 리뷰·코드 이해 | 변경 내역(diff)을 실제로 그려 주고, 여백에 주석을 달고, 흐름도와 모듈 구조도를 같이 붙임 "이 PR을 리뷰하게 HTML로 만들어 줘. 실제 diff를 렌더링하고 여백에 주석을 달아서" |
없음 |
| 디자인·프로토타입 | 슬라이더와 선택지를 넣어 애니메이션·컴포넌트를 만져 가며 조정 | 활용법 2 |
| 보고서·리서치·학습 | 여러 자료를 엮어 다이어그램·코드·주의점이 한 장에 있는 설명서로 "토큰 버킷 흐름 다이어그램, 핵심 코드 조각, 함정을 담은 HTML 설명 페이지 하나로" |
활용법 3 |
| 맞춤 편집 도구 | 그 일에만 쓰는 편집기를 파일 하나로 만들어 씀 "각 티켓을 Now / Next / Later / Cut 칸으로 끌어다 옮길 수 있는 카드로 만들어 줘" |
일부 (드래그 카드 예시가 활용법 2에 섞여 나옴) |
이건 영상을 보고 오해하기 쉬운 대목이라 따로 적습니다.
영상은 "시각화면 HTML, 글정리면 마크다운"을 결론처럼 놓습니다. 그런데 이 기준을 만든 사람은 글쓴이 본인이 아니라 제3자(파스콸레)입니다. 영상도 그렇게 밝히고 있으니 틀린 건 아닙니다. 다만 원 글의 저자는 훨씬 극단적입니다.
"나는 솔직히 거의 모든 것에서 마크다운 쓰는 걸 아예 그만뒀다."
"나는 아마 HTML 극단론자 쪽에 한참 치우쳐 있을 것이다."
Thariq Shihipar, 원 글 본문 (원문 확인 · 영상에 없음)
즉 "둘을 골라 쓰라"는 절충안은 원 글의 주장이 아니라, 영어권 반응까지 거친 뒤에 나온 정리입니다. 영상은 그 절충안을 결론으로 채택한 것이고, 저는 그게 합리적이라고 봅니다. 다만 원 글을 읽으러 갔을 때 톤이 다르다고 놀라지 않도록 적어 둡니다.
"시각화면 HTML, 글이면 마크다운"보다 실무에서 더 잘 갈라지는 기준은 "이 문서를 다시 고칠 것인가"라고 생각합니다. HTML은 태그가 섞여 있어서 사람이 직접 손보기 번거롭고, 고칠 때마다 AI에게 통째로 다시 시키게 됩니다. 그러면 토큰 5배가 고칠 때마다 반복됩니다.
반대로 한 번 만들고 계속 들여다볼 문서라면 만들 때 다섯 배를 내고 끝입니다. 학습 문서가 HTML에 맞는 진짜 이유가 이것입니다. 시각화라서가 아니라 다시 안 고치기 때문입니다. 영상과 원 글 어디에도 없는 정리자의 판단입니다.
| 낱말 | 뜻 | 나온 곳 |
|---|---|---|
| 마크다운 | #, ** 같은 단순 기호로 서식을 넣는 글 형식. AI 답변의 기존 기본값 | 0장, 2장 |
| 토큰 | AI가 글을 세는 단위. 요금과 처리 가능량이 여기 걸림 | 0장, 6장 |
| 컨텍스트 윈도우 | 한 번에 처리 가능한 토큰 양. AI의 책상 크기 | 0장, 2장 |
| 그리드 | 바둑판처럼 칸을 나눈 배치. 나란히 비교할 때 씀 | 3장 |
| 슬라이더 | 끌어서 값을 바꾸는 막대. 결과가 그 자리에서 바뀜 | 4장 |
| MCP | AI에게 바깥 도구를 붙여 주는 규격 | 5장 |
| diff | 코드가 어디서 어떻게 바뀌었는지 보여 주는 변경 내역 | 덧붙임 |
| 해커 뉴스 | 개발자들이 글을 공유하고 토론하는 사이트 | 6장 |
이 영상은 원어가 한국어이고 한국어 자동자막이 온전히 나왔습니다(174조각·3,110자·6분 38초 전체). 그래서 다른 언어 자막은 쓰지 않았습니다. 기계번역을 거치면 뜻이 바뀌기 때문입니다.
다만 사람이 단 자막은 없고 전부 자동 받아쓰기라, 사람 이름과 전문 용어가 상당히 깨져 있습니다.
| 자막에 찍힌 것 | 실제 | 확인 방법 |
|---|---|---|
| 타리크 시파 | Thariq Shihipar (타리크 시히파르) | Anthropic 원 글에서 확인 |
| 엔트로픽 · 엔트로피 | Anthropic (앤트로픽) | 확인 |
| 사이먼 윌리슨 | Simon Willison | 이름은 맞음. 다만 코멘트 원문은 확인하지 못했습니다 |
| 파스칼레 필리테리 · 파스컬레 | Pasquale Pillitteri (파스콸레 필리테리)로 추정 | 같은 주제로 글을 쓴 인물이 검색에서 확인되나, 본인 글에 직접 접속하지 못했습니다 |
| 클로드 코드 만 팀 | 클로드 코드 만든 팀 | 문맥 |
| 100주 넘는 마크다운 | 100줄 넘는 마크다운 | 원 글과 대조 |
| 토큰 청구소 | 토큰 청구서 | 문맥 |
| 함종도 하나 | 함정 하나 | 문맥 |
| 토큰 저략돼서 합류적 | 토큰 절약돼서 합리적 | 문맥 |
| 100만 토큰카를 | 100만 토큰까지 | 문맥 |
| lm 분야 | LLM 분야 | 문맥 |
| 화질에 모은 | 화제를 모은 | 문맥 |
| 골라스는 기준 | 고르는 기준 | 문맥 |
| 바크다운 | 마크다운 | 문맥 |
| 해야 할리 목록 · 우선순히 | 해야 할 일 목록 · 우선순위 | 문맥 |
| 외부도그 트는 방식 | 외부 도구 붙이는 방식 | 문맥 |
| 이 HTML 그리 영화권에서 | 이 HTML 글이 영어권에서 | 문맥 |
반대로, 이 영상이 정확했던 부분도 적어 둡니다. 원 글을 직접 열어 대조한 결과입니다.