기술 글의 가독성은 예쁜 폰트 하나로 만들어지지 않습니다. 문장의 길이, 한 줄의 폭, 제목 사이의 간격, 코드와 본문의 대비처럼 작은 결정이 함께 작동한 결과입니다.
특히 한글은 같은 크기의 라틴 문자보다 글자 면적이 크고 획이 복잡합니다. 영문 블로그의 수치를 그대로 가져오기보다 실제 한글 문단을 기준으로 조정해야 합니다.
본문은 읽는 리듬을 만든다
본문 너비는 약 45rem 안팎으로 제한했습니다. 화면이 넓어져도 한 줄이 끝없이 길어지지 않게 하기 위해서입니다. 줄 높이는 1.9에 가깝게 두어 복잡한 한글 글자 사이에 충분한 여백을 확보했습니다.
문단 사이 간격은 줄 높이보다 조금 작게 두면 각 문단이 분리되면서도 하나의 흐름으로 읽힙니다. 반대로 제목 앞에는 더 큰 간격을 주어 생각이 전환된다는 신호를 만듭니다.
여백은 비어 있는 공간이 아니라, 정보의 관계를 설명하는 장치다.
제목은 크기보다 위계가 중요하다
모든 제목을 크게 만들면 어느 것도 중요해 보이지 않습니다. 제목 단계마다 크기, 위쪽 여백, 구분선 중 일부만 달리해도 위계가 선명해집니다.
한글 제목에는 text-wrap: balance와 word-break: keep-all이 유용합니다. 짧은 조사 하나가 다음 줄에 외롭게 남는 상황을 줄여 줍니다. 다만 긴 본문 전체에 keep-all을 적용하면 좁은 화면에서 넘칠 수 있으므로 제목처럼 범위가 작은 요소에만 사용합니다.
코드는 다른 목소리로 보여 준다
코드는 본문과 성격이 다른 정보입니다. 별도의 고정폭 폰트와 배경, 테두리를 사용해 문맥 전환을 명확하게 만듭니다.
.prose pre {
overflow-x: auto;
padding: 1.2rem 1.3rem;
border: 1px solid var(--line);
border-radius: 0.85rem;
font-family: var(--font-code);
font-size: 0.84rem;
line-height: 1.75;
}긴 코드를 억지로 줄바꿈하면 원래 구조와 복사한 결과가 달라질 수 있습니다. 따라서 기본은 가로 스크롤로 두되, 코드 컨테이너가 화면 밖으로 빠져나가지 않도록 max-width와 overflow를 함께 설정합니다.
색상은 역할로 정한다
색은 취향보다 역할을 먼저 정하면 유지하기 쉽습니다.
- 본문 색은 배경과 충분한 대비를 가집니다.
- 보조 텍스트는 덜 강조하되 읽을 수 있을 만큼 진하게 둡니다.
- 링크는 색상뿐 아니라 밑줄로도 구분합니다.
- 강조색은 링크와 작은 표식에 제한해 의미를 유지합니다.
밝은 테마와 어두운 테마 모두 같은 역할 이름을 공유하면 컴포넌트 스타일을 바꾸지 않고도 색상 체계를 전환할 수 있습니다.
마지막 기준은 실제 내용이다
레이아웃을 만들 때는 짧은 영문 예문 대신 긴 한글 제목, 여러 문단, 목록, 표, 인라인 코드와 코드 블록을 함께 넣어 봐야 합니다. 가독성은 빈 템플릿이 아니라 실제로 읽는 순간 검증되기 때문입니다.