HTML 임베드 실험실 — CSS 3D 박스 뷰어 & fetch 미니앱

1. CSS 3D 직육면체 뷰어

자바스크립트 0줄 — 순수 CSS 3D 변형만으로 도는 박스입니다. 마우스를 올리면 정지합니다.

FRONT

BACK

RIGHT

LEFT

TOP

BOTTOM

핵심은 부모에 perspective, 큐브에 transform-style: preserve-3d, 여섯 면에 각각 rotate + translateZ(반변길이) — 이 세 가지가 전부입니다.

2. fetch 기반 미니앱 — 블로그 검색 위젯

이 글 안에 살아있는 앱을 심었습니다. 아래에 키워드를 넣고 검색하면 이 블로그의 /api/search를 fetch로 호출해 결과를 보여줍니다.

동작 원리: 본문 마크다운에 <script src="/public/embeds/mini-search.js"> 한 줄 — 자체 호스팅 스크립트만 허용하는 sanitizer를 통과하고, 위젯이 자기 컨테이너(#mini-search-app)를 찾아 스스로를 렌더링합니다.

fetch('/api/search?q=' + encodeURIComponent(kw) + '&fields=title,body')
  .then(r => r.json())
  .then(j => render(j.slugs));

이 패턴이면 유튜브 임베드, 차트, 계산기 등 뭔든 심을 수 있습니다.

3. Mermaid 다이어그램

텍스트로 그리는 그래프 — 이 블로그 시스템의 데이터 흐름:

flowchart LR
  V[방문자] -->|요청| N[Hono SSR server.ts]
  N -->|markdown 렌더| P[(content/posts)]
  N --> S[SQLite comments.db]
  S --> C[댓글 · 채팅 · 방명록]
  N --> U[(Umami PG)]
  N -->|fetch| G[Giphy API]
  N -->|번역| O[OpenRouter]

4. 할인가 계산기 (폼 + 실시간 계산)

5. KST 실시간 시계

지금 이 순간의 한국 시간 —

6. 외부 iframe (유튜브)

위젯 6종: CSS 3D · fetch 검색 · Mermaid · 계산기 · 실시간 시계 · iframe. 스크립트는 전부 public/embeds/에 자체 호스팅 — CDN 차단(CSP 'self')과 무관하게 동작합니다.

★ PINION ★