이 페이지는 검증 랩의 최대 실험실이다.
Markdown, 숏코드, 이미지, 방향성, CTA, raw HTML, 표, 코드, 목록을 한 번에 본다.

design probe 중앙 소스는 `theme-vars.css`이며, 이 페이지는 구조 확인용 안내문이다.
중앙 제어 파일
`themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/`
이 파일만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다.
해석 기준
• 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다.
• 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다.
• 레거시 디자인 경로는 사용하지 않는다.

검증 항목 한눈에 보기

축 무엇을 보는가 확인 방식
Markdown 기본 문법과 렌더링 안정성 제목, 표, 목록, 코드, 각주
Typography 언어별 글꼴과 줄바꿈 한국어/영어/일본어/중국어/RTL
Components CTA, figure, collapse 실제 숏코드 출력
Layout 폭, 간격, 카드 리듬 본문과 카드의 일관성
Architecture 번들, 내부 링크, 리소스 상대 경로와 페이지 번들

실제 렌더링 이미지

실험용 히어로 이미지

실험용 figure 이미지
figure shortcode

캡션, 링크, alt가 실제로 어떻게 보이는지 확인한다.

CTA와 블록 컴포넌트

자세히 보기
지금 체험 시작

실제 프런트엔드에서 기본형과 다른 크기/위계가 어떻게 보이는지 확인

상담 요청
이 블록 CTA는 설명문이 본문 위에 얹힐 때 어떤 간격과 위계를 가지는지 확인한다.

언어별 예시

English flow sample. The quick brown fox jumps over the lazy dog. This line checks Latin word wrapping, punctuation, and reading rhythm.
مثال عربي لاختبار الاتجاه من اليمين إلى اليسار، مع فحص التباعد، والالتفاف، والقراءة الطبيعية داخل الصفحة.

raw HTML 블록

rawhtml shortcode를 통해 들어온 블록이다. 이 영역은 Markdown 변환이 아니라 HTML 그대로 확인한다.

인라인 이미지와 텍스트 흐름

아래 이미지는 문장 사이에 삽입되는 형태를 점검한다.

inline test 이 뒤의 문장은 이미지와 같은 줄 흐름에서 밀리지 않아야 한다.

Markdown 기본 문법 전체 점검

H1

이 줄은 본문과 제목 사이의 위계가 자연스러운지 확인한다.

H4

H5
H6

이탤릭, 굵게, 둘 다, 취소선, 인라인 코드, 내부 링크, 외부 링크를 한 문단 안에서 같이 본다.

인용문은 길어질수록 줄 간격과 인용 여백이 더 중요해진다.
한국어, English, 日本語, 中文이 섞여도 레이아웃이 흔들리지 않아야 한다.

  1. 순서 목록 첫 번째
  2. 두 번째
    • 하위 목록
    • 또 다른 항목
  3. 세 번째
  • 체크리스트
  • 완료
  • 미완료
항목 확인 포인트 예시
헤딩 앵커와 여백 H2 / H3
목록 들여쓰기 중첩 리스트
표 가로 스크롤 긴 텍스트
코드 복사 버튼 fenced code block 
package main

import "fmt"

func main() {
    fmt.Println("Hugo markdown coverage")
}

[params]
ShowReadingTime = true

각주도 함께 본다.1

추가 문법 보기
  • HTML 블록
  • 수직 리듬
  • 긴 링크
  • 빈 줄 처리
  • 중첩 숏코드와의 공존

최종 체크리스트

  • 헤딩 계층이 의미대로 읽히는가
  • 코드 블록에 복사 버튼이 붙는가
  • 표가 좁은 화면에서 안전하게 감기는가
  • CTA가 문서 중간에서도 시선을 잡는가
  • 언어가 섞여도 줄 간격이 일정한가

  1. 각주는 문단과 간격이 자연스러워야 하고, 긴 설명도 무너지지 않아야 한다. ↩︎