이 글은 현재 블로그 상세 페이지에서 지원하는 거의 모든 디자인 패턴을 한 번에 확인하기 위한 샘플이다. inline code, 코드 블록, 경고 박스, 인용문, 단계형 안내, 이미지 캡션, 표, 리스트, 제목 계층이 모두 들어간다.
Hero 아래 첫 문단
상단 이미지와 메타 정보 아래에서 바로 본문이 시작되는지, 첫 문단의 줄 길이와 간격이 안정적인지 확인한다. 링크 스타일도 같이 본다: Astro 공식 문서.
Callout Variants
여기서는 note, tip, warning, pro-tip 네 가지 형태를 확인한다.
Quote Example
읽는 경험은 더 많은 요소를 추가하는 것보다, 무엇을 남기고 무엇을 덜어낼지 결정하는 데서 좋아진다.
Highlighting Information
Pros
- 긴 글에서 핵심 요약을 빠르게 전달할 수 있다.
- 비교형 설명에서 정보 구조가 즉시 드러난다.
- 본문 중간에 리듬을 바꿔주는 카드 역할을 한다.
Cons
- 항목 수가 너무 많으면 오히려 집중이 흐려진다.
- 짧은 글에서는 과한 UI처럼 보일 수 있다.
Steps Example
Step 1. 기준을 먼저 정한다
레이아웃 ASCII 문서나 디자인 원칙 문서처럼 변하지 않는 기준을 먼저 세운다.
Step 2. 실제 화면을 그 기준에 맞춘다
토큰, spacing, 색상, 타이포, 레이아웃 패턴을 함께 조정한다.
Step 3. 검증과 문서화를 같이 한다
pnpm check, pnpm build 같은 검증과 문서 업데이트를 같은 흐름 안에서 끝낸다.
Figure Example
Embedded Media
External Reference
External Link
Serene Ink Showcase Components
Callout, quote, steps, pros and cons, link card, YouTube embed 패턴을 한 번에 확인할 수 있는 레퍼런스 페이지.
Code Examples
인라인 코드는 const theme = "dark" 같은 식으로 보일 수 있어야 한다.
const applyTheme = (nextTheme: "light" | "dark") => {
localStorage.setItem("theme", nextTheme);
document.documentElement.classList.toggle("dark", nextTheme === "dark");
};
applyTheme("dark");.reading-progress__bar {
width: 0%;
height: 100%;
background: var(--color-primary);
transition: width 120ms ease-out;
}Lists
순서 없는 리스트:
- 홈은 media list가 먼저 보여야 한다.
- 목록은 archive row 패턴을 유지한다.
- 글 상세는 TOC와 progress bar를 유지한다.
순서 있는 리스트:
- 문서를 먼저 읽는다.
- 레이아웃을 수정한다.
- 체크와 빌드를 돌린다.
Table Example
| Pattern | Purpose | Status |
|---|---|---|
| Progress bar | 읽기 진행 표시 | active |
| Desktop TOC | 긴 글 탐색 보조 | active |
| Mobile TOC | 작은 화면에서 목차 접근 | active |
| Callout | 보조 정보 강조 | active |
Nested Headings
이 구간은 h2, h3, h4가 연달아 나올 때 TOC 계층이 어떻게 보이는지 확인하기 위한 섹션이다.
Sub Heading Level 3
이 구간은 우측 TOC가 h2, h3, h4를 잘 따라가는지 보기 위한 샘플이다.
Sub Heading Level 4
여기까지 내려왔을 때도 active 상태가 자연스럽게 바뀌어야 한다.
Hierarchy Check
이 섹션은 h2 active 상태를 더 명확하게 확인하기 위한 별도 테스트다.
Hierarchy Check Level 3
h2와 h3가 가까이 붙어 있을 때도 TOC 계층과 active line이 안정적으로 유지되어야 한다.
Hierarchy Check Level 4
가장 안쪽 heading도 같은 세로 라인을 기준으로 텍스트만 더 안쪽으로 들어가야 한다.
Final Notes
이 포스트는 디자인 확인용이라 내용 자체보다 구성 요소가 더 중요하다. 지금 페이지에서 확인해야 할 것은 아래와 같다.
- 상단 progress bar가 스크롤에 따라 자연스럽게 차는가
- 우측 TOC가 sticky 상태를 유지하고 현재 읽는 섹션을 잘 따라가는가
- 모바일에서 TOC 버튼이 잘 열리고 닫히는가
- callout, quote, steps, figure, pros-cons, link card, youtube가 서로 다른 밀도로 안정적으로 보이는가
- 코드 블록과 인라인 코드의 대비가 충분한가