한글 본문이 답답하면 자간부터 넓히고 싶어집니다. 그러나 한 줄이 길어서 눈이 돌아오기 어렵거나 줄 사이가 좁아서 아래 줄을 잘못 짚는 경우도 비슷하게 느껴집니다. 자간과 행간은 따로 움직이지만 읽는 경험에서는 함께 작동합니다. 아래 순서는 한 값을 고칠 때 다른 값이 만든 문제를 가리지 않도록 실제 문단으로 확인하는 방법입니다.
먼저 시험 문단을 만듭니다
두세 문장짜리 짧은 소개만으로는 행간을 판단하기 어렵습니다. 같은 글꼴과 굵기로 다섯 줄 이상 이어지는 문단을 마련하고, 받침이 많은 단어와 숫자·라틴이 섞인 문장을 넣습니다. 이 사이트의 한글 더미 텍스트로 분량을 채울 수 있지만 최종 판단에는 실제 원고를 씁니다. ‘오늘 결제 12,800원, 다음 일정은 10월 21일’처럼 숫자가 끼어든 줄도 넣어 보세요. 글꼴마다 숫자 너비와 문장부호의 공간이 달라 같은 CSS에서도 줄 끝이 달라집니다.
먼저 본문에 쓸 글꼴, 굵기, 크기를 정하고 가로 폭을 고정합니다. 화면 폭이 바뀌는 중에 자간을 조정하면 줄바꿈이 함께 움직여 어떤 변화가 좋은지 판단하기 어렵습니다. 한 번에 하나의 값만 바꾸고 변경 전후를 같은 폭에서 나란히 봅니다.
행간은 줄을 다시 찾는 거리입니다
CSS의 line-height는 글자 그림의 높이가 아니라 한 줄 상자의 높이를 정합니다. 하다 타입의 가족들은 대문자 위와 기준선 아래의 여백을 맞춘 메트릭을 사용하지만, 실제 본문에는 받침과 문장부호가 함께 들어옵니다. 그래서 숫자 하나로 모든 문단이 편해지지는 않습니다. 본문에서 1.5~1.8 정도를 시작점으로 놓고, 줄의 맨 끝에서 다음 줄의 시작으로 눈이 돌아올 때 엉뚱한 줄을 짚지 않는지 확인합니다. 이 범위는 정답이 아니라 시험을 시작할 자리입니다.
행간이 너무 좁으면 위줄의 받침과 아랫줄의 윗부분이 붙어 보입니다. 너무 넓으면 한 문장 안의 줄보다 다음 문단이 더 가까운 것처럼 느껴질 수 있습니다. 문단 사이 간격도 함께 보되, 행간을 바꾼 다음에 조정합니다. 긴 글의 본문은 한 줄짜리 카드 설명보다 조금 넉넉한 행간이 필요할 수 있습니다. 화면에서 보일 실제 폭으로 문단을 읽고, 휴대폰에서는 세로로 여러 번 스크롤하면서 줄의 연결을 확인하세요.
자간은 작은 폭으로 움직입니다
letter-spacing은 글자 사이에 더하거나 빼는 공간입니다. 한글은 음절 하나가 네모에 가까운 큰 단위로 읽히므로 작은 변화도 문단의 밀도를 바꿉니다. 우선 글꼴 기본값인 normal에서 읽고, 답답한 곳이 보일 때만 0.01em처럼 작은 단위로 움직여 봅니다. 좁혀야 한다면 -0.01em처럼 시작해 받침이 많은 글자가 서로 닿아 보이지 않는지 확인합니다. 한 줄 제목에서 잘 맞는 음수 자간을 본문 전체에 그대로 옮기지 마세요.
자간을 바꾸면 한 줄에 들어가는 글자 수도 바뀝니다. 그래서 이전에는 한 줄이던 버튼 문구가 두 줄로 넘어가거나 표의 숫자가 잘릴 수 있습니다. 본문에만 적용할 규칙이라면 제목과 메뉴까지 한꺼번에 잡는 선택자를 피합니다. 영문 약어와 숫자 주변의 간격도 눈으로 확인하세요. 한글끼리 편안해 보여도 라틴 단어가 끊겨 보일 수 있습니다.
문단 폭과 줄바꿈을 함께 고릅니다
한글 본문에서 글자 사이가 답답하게 느껴질 때 문단의 가로 폭이 지나치게 넓은 것은 아닌지 먼저 살펴보세요. 같은 글꼴과 크기에서 좁은 단은 눈이 다음 줄을 쉽게 찾게 하지만 줄바꿈이 잦아 문장이 끊길 수 있습니다. 넓은 단은 한 번에 더 많은 정보를 담지만 줄 끝에서 다음 줄 첫머리까지 이동하는 거리가 길어집니다. 자간을 크게 바꿔 이 문제를 덮기보다 본문 칸의 너비를 조정하고, 실제 문장에서 어디가 끊기는지 비교하는 편이 정확합니다.
목록과 인용문도 본문과 같은 가로 폭을 쓰지 않을 수 있습니다. 목록 기호가 차지하는 공간 때문에 문장이 더 자주 접히고, 들여쓴 인용문에서는 한 줄의 길이가 짧아집니다. 기본 문단에서 고른 행간을 이런 요소에 그대로 적용해 읽어 본 뒤 필요하면 별도 규칙을 둡니다. 한글과 숫자가 섞인 표의 셀에서는 글자 사이보다 셀 안쪽 여백이 부족한 경우도 많습니다. 셀 패딩을 먼저 조정하면 글자를 억지로 압축하지 않고도 읽을 수 있습니다.
CSS에서 한 단계씩 시험하기
.article-body { font-family: "Hada Sans", sans-serif; font-size: 1rem; line-height: 1.65; letter-spacing: normal; }위 값으로 시작했다면 먼저 line-height만 1.55와 1.75에 놓아 봅니다. 세 버전에서 문단의 첫 줄과 마지막 줄, 인용문, 목록 항목을 같은 크기로 읽습니다. 그 다음에 자간을 손봅니다. Hada Sans의 숫자는 고정폭이므로 가격과 날짜가 들어간 표의 열을 비교하기 좋습니다. 하다 바탕을 쓴다면 같은 문단을 400 굵기로 놓고 긴 글의 호흡을 확인하세요. 두 글꼴의 글자 폭이 달라 줄바꿈도 달라질 수 있습니다.
인쇄용 문단도 같은 방식으로 살펴볼 수 있습니다. 화면에서 보기 좋게 맞춘 행간이 종이에서는 넓게 느껴질 수 있으므로 실제 용지에 한 쪽을 출력해 보세요. 본문이 여러 단으로 나뉜다면 각 단의 폭에서 다시 줄바꿈을 확인합니다. 문단의 첫 줄만 예쁘게 보이는 값보다 마지막 줄까지 같은 속도로 읽히는 값을 고르는 편이 좋습니다. 목차나 각주처럼 크기가 다른 글은 본문 값을 무조건 복사하지 말고 따로 읽어 보세요.
마지막 점검
- 모바일과 데스크톱에서 같은 문단의 줄바꿈을 각각 봅니다.
- 받침이 많은 글자, 영문, 금액, 문장부호가 한 줄에 섞일 때 간격을 봅니다.
- 본문, 목록, 링크, 인용문이 같은 리듬으로 이어지는지 확인합니다.
- 자간이나 행간 변경으로 버튼과 표의 높이가 달라지지 않았는지 확인합니다.
읽기 편하다는 느낌은 원고의 길이와 화면의 폭을 떠나서는 판단하기 어렵습니다. 원하는 값이 생기면 견본 문장이 아니라 실제 원고 한 단락에 적용해 끝까지 읽어 보세요. 폰트 목록형 보기에서 가족별로 같은 문장을 비교한 뒤, 최종 문서에서 다시 확인하면 선택의 이유가 더 분명해집니다.