옵시디언 노트가 딸깍 한번에 HTML 블로그로! 카파시 추천한 Codex CLI 활용 플러그인 공개
Andrej Karpathy의 “AI 출력은 HTML이 디폴트가 된다” 트윗을 배경으로, 옵시디언 마크다운 노트를 클릭 한 번에 GitHub Pages로 호스팅되는 HTML 페이지로 변환하는 커뮤니티 플러그인(Mark HTML Exporter) 시연. Codex CLI 또는 Claude Code CLI를 백엔드로 사용해 별도 API 비용 없이 정액 구독료만으로 운영한다.
개요
Andrej Karpathy가 최근 X(트위터)에서 “AI에게 무엇을 물을 때 끝에 ‘HTML로 만들어 줘’를 붙여보라”고 추천했다. 이 트윗은 Anthropic의 개발자 Tariq이 작성한 아티클 — HTML의 놀라운 효율성 — 을 기반으로 한 것이며, 핵심 주장은 “AI 답변의 다음 기본값은 HTML이 될 것”이다.
영상 후반부는 채널 운영자가 직접 개발한 Mark-HTML-Exporter 옵시디언 커뮤니티 플러그인을 시연한다. 이 플러그인은:
- 옵시디언 노트에서 리본 클릭 → 템플릿/모드 선택
- Codex CLI 또는 Claude Code CLI로 HTML 생성
- GitHub Pages에 자동 배포 → 공유 가능한 URL 발급
- Giscus를 통한 댓글 시스템 자동 연동
비용 구조의 핵심은 호스팅·댓글이 모두 무료라는 점이다. 들어가는 비용은 Codex/Claude Code 구독료뿐이다.
IDEAS
- AI 답변의 다음 기본 출력 형식은 마크다운에서 HTML로 전환될 것이다.
- HTML은 그림·레이아웃·상호작용을 모두 표현하는 “10차선 고속도로” 같은 출력 채널이다.
- 마크다운은 단순 텍스트만 담는 “1차원 도로”이므로 정보 밀도가 낮다.
- 인간은 말로 묻는 게 편하지만 AI 응답은 시각적 표현이 더 효율적이다.
- AI 출력 진화 4단계: 손글씨 → 마크다운 → HTML → 뉴럴링크 인터페이스.
- LLM 프롬프트 끝에 “HTML로 만들어줘”를 붙이는 것만으로 결과 품질이 달라진다.
- Tariq(Anthropic) 아티클이 HTML의 효율성을 정리하고 Karpathy가 이를 트윗으로 확산했다.
- 옵시디언 마크다운 노트를 단일 클릭으로 HTML 페이지로 변환하는 워크플로우가 가능하다.
- Codex CLI / Claude Code CLI를 백엔드로 사용해 별도 API 요금 없이 변환을 처리할 수 있다.
- 생성된 HTML은 GitHub Pages로 자동 배포되어 호스팅 비용이 0원이 된다.
- Giscus를 연동하면 GitHub Issues 기반 댓글 시스템을 무료로 붙일 수 있다.
- BRAT(Beta Reviewers Auto-update Tool)을 사용해 정식 등록 전 커뮤니티 플러그인을 배포할 수 있다.
- 변환 모드는 블로그·리뷰·비교·프리젠테이션·인터랙티브 리포트 등 다목적 템플릿으로 분기된다.
- Context Pack 옵션으로 노트 내부의 wikilink를 따라가 관련 노트까지 함께 변환에 포함할 수 있다.
- Codex와 Claude Code는 같은 마크다운 입력에서 서로 다른 디자인 스타일의 HTML을 생성한다.
- CLI 타임아웃을 15분 가까이 넉넉히 설정해야 복잡한 HTML 아티팩트가 끊기지 않는다.
- CLI 경로(path)는 각 도구에게 직접 물어보면 알려준다 (Codex/Claude Code 모두).
- 옵시디언 노트의 활용도는 “마크다운 그대로 두지 않는 것”에서 시작된다.
- 인터랙티브 콘텐츠 생산이 차세대 텍스트 활용도의 핵심 차별점이다.
- 텍스트 원천(source) 자료의 다중 변환(multi-format reuse)이 지식 노트의 ROI를 올린다.
INSIGHTS
- 출력 형식의 패러다임 전환 — LLM 응답 형식은 단순한 표시 문제가 아니라 정보 채널 대역폭의 문제다. 마크다운→HTML 전환은 “어떻게 보여줄지”가 아니라 “AI가 무엇을 표현할 수 있는지” 자체를 확장한다. → HTML-as-LLM-출력형식
- CLI를 백엔드로 쓰는 새로운 도구 패턴 — 정액제 Claude/Codex 구독을 가진 사용자에게는 API 호출 대신 CLI 호출이 비용·관리 양면에서 합리적이다. 플러그인이 API key 보관 책임도 우회한다.
- GitHub Pages + Giscus = Zero-cost publishing stack — 호스팅(Pages) + 댓글(Issues) + 토큰 한 개로 풀스택 블로그 인프라를 무료로 구성할 수 있다.
- 옵시디언 vault의 출판 가능성 — vault 자체가 사실상 마크다운 콘텐츠 저장소이므로, 변환기 한 개만 갖추면 vault 전체가 잠재적 출판 자산이 된다. → 옵시디언-HTML-변환-워크플로우
- AI 도구 간 미적 분기(aesthetic divergence) — 같은 입력을 받아도 Codex와 Claude Code는 시각 디자인 결과물이 다르다. 코드 생성 능력만큼 디자인 감각도 모델 차별화 축이다.
- HTML 출력 자체가 prompt-engineering 기법 — 출력 형식을 지정하는 것만으로 LLM의 계획·구조화 능력을 다른 방식으로 끌어낼 수 있다.
QUOTES
- “AI 답변에 다음 기본값은 HTML이 될 것이다.”
- “사람은 말로 묻는 게 편하지만 AI가 답할 때는 그림이 편하다.”
- “마크다운은 단순한 텍스트 1차원적인 도로… HTML은 그림, 레이아웃, 상호작용 모든 것이 가능한 10차선 고속도로처럼 넓은 도로이기 때문에 훨씬 이해하기도 편하고 AI가 답하기도 편리하다.”
- “이전에는 손글씨에서 지금의 마크다운이, 3단계에서는 HTML로 변하겠지만 앞으로는 뉴럴링크처럼 뇌와 인공지능이 서로 인터랙티브 하는 그런 것으로 발전될 것이다.”
- “별도로 서버 비용이나 비용 부담 없이 무료로 만들 수 있다. 들어가는 비용은 Codex 우리가 지불한 그 구독료밖에 없습니다.”
- “옵시디언 마크다운 하나로 두지 않고 이걸 이용해서 HTML이나 다른 방식으로 다양한 방식으로 활용하게 된다면 훨씬 더 텍스트 활용도에서도 좋고 특히 인터랙티브한 컨텐츠를 생산하는 데에도 크게 도움이 될 것 같습니다.”
- “코덱스로 만들었기 때문에 디자인이 클로드랑 조금 다를 수 있어요.”
- “내 클로드 코드 CLI 경로 패스가 어떻게 되니라고 물어보면 주소 알려 주거든요. 그 주소를 그대로 붙여 써 주시면 됩니다.”
- “Context Pack은 그 노트 안에 링크로 들어 있는 다른 노트들까지 팩할 거냐라고 하는 거예요.”
- “백문이 불여 일견이죠.”
REFERENCES
- 사람
- Andrej Karpathy — HTML over Markdown 트윗 발화자
- Tariq (Anthropic 개발자) — HTML의 놀라운 효율성 아티클 원작자
- 조직
- Anthropic
- Neuralink (AI 출력 진화 4단계에서 BCI 사례로 언급)
- 도구·플랫폼
- Obsidian
- Mark-HTML-Exporter (영상에서 시연된 옵시디언 커뮤니티 플러그인)
- Codex CLI
- Claude Code CLI
- GitHub Pages
- Giscus
- BRAT (Beta Reviewers Auto-update Tool)
- 개념
- HTML-as-LLM-출력형식
- 옵시디언-HTML-변환-워크플로우
- Markdown
FACTS
- 변환에 사용되는 옵시디언 플러그인 이름은 영상 내 표기상 “Mark” / “Mark HTML Exporter” 이다.
- 플러그인은 BRAT을 통해 베타 형태로 설치한다(커뮤니티 플러그인 정식 등록 전).
- GitHub Pages 배포 후 약 30초가 지나야 디플로이가 완료된다.
- CLI 타임아웃 권장값은 약 15분.
- 변환 시 추가 비용은 발생하지 않으며 호스팅도 무료(GitHub Pages).
- GitHub Personal Access Token 발급이 필수 (Pages 자동 배포용).
- Giscus 사용 시 별도 GitHub Repository 1개를 추가로 생성해야 한다.
- 플러그인 제공 템플릿 종류: Shareable Article, Public Article, Research Report, Memo, Interactive Report 등 약 6개.
- 변환 모드 옵션: Blog Article / Preview / Interactive Preview 등.
- AI 출력 진화 4단계 도식: 손글씨 → 마크다운 → HTML → BCI(뉴럴링크).
- Codex와 Claude Code는 같은 입력에 대해 시각 디자인이 다른 HTML을 생성한다.
HABITS
- LLM에 질문할 때 마지막에 “HTML로 만들어줘”를 붙이는 습관을 가져라.
- 옵시디언 노트를 단일 포맷에 가두지 말고 변환 파이프라인을 통해 재활용하라.
- CLI 경로를 모를 때는 해당 도구(Codex/Claude Code)에게 직접 물어 답변을 그대로 복사하라.
RECOMMENDATIONS
- Karpathy 트윗과 Tariq의 HTML의 놀라운 효율성 아티클을 1차 소스로 읽어두라.
- 옵시디언 사용자라면 BRAT을 먼저 설치해 베타 플러그인 생태계에 접근하라.
- Codex 또는 Claude Code 정액제 구독이 이미 있다면 별도 API 발급 없이 백엔드로 활용하라.
- 호스팅을 무료로 가져가려면 GitHub Pages + Giscus 조합을 표준으로 채택하라.
- 같은 노트를 Codex와 Claude Code 양쪽으로 한 번씩 변환해 시각 디자인 차이를 비교하라.
- CLI 타임아웃은 15분 이상으로 넉넉히 설정하라.