#0007

문장은 흐르는 강물 같다. 시작은 가볍게, 본론은 분명하게, 끝은 여운을 남긴다. 이 문장은 굵게 되어 있고, 이건 기울임, 이건 둘 다, 그리고 취소선까지. 인라인 코드는 const x = 42 처럼 표시되며, 외부 링크도 포함된다.

길게 이어지는 한국어 문장에서도 줄간격이 충분한지 확인할 필요가 있다. 한 단락은 보통 두세 문장으로 구성되며, 가독성은 line-height와 measure(가로폭)에 의해 좌우된다. 영문(English mixed in Korean text)이 섞여 있을 때도 baseline이 흔들리지 않아야 한다.

인용과 강조

단순함은 궁극의 정교함이다. — 레오나르도 다 빈치

중첩 인용도 가능하다.

안쪽 인용은 한 단계 더 들어간다. 두 줄 이상이면 이렇게.

헤딩 위계

세 번째 단계

이 단락은 H3 아래에 위치한다. 헤딩과 본문 사이의 간격, 그리고 헤딩 자체의 크기 비율을 확인한다.

네 번째 단계

H4까지 사용한다면 어떻게 보일지 점검.

리스트

순서 없는 리스트:

• 첫 번째 항목
• 두 번째 항목
  • 중첩된 항목
  • 또 다른 중첩
    • 세 번째 깊이
• 세 번째 항목 — 길게 이어지는 설명이 들어갈 수도 있다. 줄바꿈이 자연스럽게 처리되는지 본다.

순서 있는 리스트:

1. 준비
2. 실행
3. 회고
   1. 잘된 점
   2. 개선할 점

체크리스트(GFM):

• 헤딩 스케일 확인
• 인용 스타일 확인
• 코드블록 라인 정렬
• 표 셀 패딩

코드

인라인은 npm run dev 처럼 단어 단위로.

블록은 언어별 syntax highlighting:

type Entry = {
  serial: number;
  title: string;
  tags: string[];
};
 
const sort = (xs: Entry[]) =>
  xs.sort((a, b) => b.serial - a.serial);

.card {
  background: var(--surface);
  padding: var(--space-4);
  transition: background 0.2s ease;
}

git log --oneline -5
git diff HEAD~1

긴 라인이 있는 경우 가로 스크롤이 동작하는지:

const veryLongVariableName = someFunctionWithLongName({ option: "value", another: "value", yet: "another" });

표

정렬 테스트:

이미지

본문 중간에 단일 이미지가 들어갈 때의 간격과 비례.

이미지 아래 캡션처럼 보일 수 있는 단락. 위 이미지와 본문 간격을 확인.

연속 이미지 사이의 호흡도 본다.

콜아웃

타이포 폴리시

스마트 따옴표는 직선이 아니라 곡선이다 — “이렇게” 그리고 ‘single’ 까지 자동 변환된다. em-dash는 두 개의 하이픈—처럼 입력해도 깔끔하게 처리되고, 생략부호는 점 셋… 으로도 OK.

수평선

위 단락과 아래 단락 사이.

수평선 아래 단락. 간격이 자연스러운지.

각주와 약어

본문 중간에 각주가 끼어든다¹. 그리고 또 하나².

마무리

이 문서는 디자인 검수용이다. 어디가 어색한지, 어디가 비례에서 벗어나는지 빠르게 식별하기 위한 도구. 발견되는 이슈는 별도 메모.