읽기 편한 화면을 위한 기준 · 서울 스튜디오 기록
한국어 웹사이트의 타이포그래피와 접근성 기준
한국어 본문은 라틴 문자와 다릅니다. 글자 폭, 줄 간격, 받침 유무가 다르기 때문에 영어 기준을 그대로 옮기면 읽기 어려워집니다. 이 페이지는 실무에서 반복적으로 쓰는 기준을 정리합니다.
PRETENDARD · INTER · LINE LENGTH · CONTRAST — PRINTED 2026-10-30
이 문서에서 다루는 메뉴
한국어와 라틴 문자의 차이
같은 행간이라도 한국어가 더 답답하게 보이는 데에는 이유가 있습니다. 글자 하나가 차지하는 네모가 넓고, 받침이 있는 글자는 아래쪽 무게가 더해집니다.
웹 디자인 서비스에서 적용 범위 보기넓은 글자 폭
한글 음절은 정사각형에 가깝게 자리를 차지합니다. 영문 소문자처럼 높낮이로 리듬을 만들지 못하니, 자간을 조이는 방식으로 밀도를 맞추면 받침이 서로 붙어 보입니다. 여백으로 숨을 주어야 합니다.
행간이 좁으면 더 답답합니다
영어용 행간 값을 그대로 쓰면 윗줄 받침과 아랫줄 첫 획이 시각적으로 맞닿습니다. 본문은 1.6에서 1.75 사이에서 문장 길이에 맞춰 고르고, 제목은 1.25 안쪽으로 다잡습니다.
너무 넓혀도 흩어집니다
반대로 행간을 과하게 넓히면 문단보다 줄 사이가 먼저 눈에 들어옵니다. 문장이 하나의 생각으로 읽히지 않습니다. 한국어 기준으로 다시 잡는 과정이 필요한 이유입니다.
Pretendard를 기준으로 쓰는 이유
Pretendard는 한국어 환경을 염두에 두고 만들어진 서체입니다. 여러 굵기를 제공하고, 숫자와 영문도 함께 다룰 수 있어 본문과 제목을 한 가족으로 묶기 쉽습니다.
공공 디자인 기준을 따르는 버전은 읽기 편함과 접근성을 목표로 합니다. 상업 사이트에서도 이 기준을 참고할 만합니다. 본문은 보통 굵기로, 제목은 중간 이상 굵기로 나눠 쓰면 위계가 분명해집니다.
본문용과 제목용 굵기를 나누면 한 화면에서도 역할이 갈립니다.
영문 구간 정리
Inter가 영문 구간에서 유용한 이유
Inter는 화면용으로 만들어진 인터페이스 서체입니다. 작은 크기에서도 읽히고, 굵기 종류가 많아 버튼이나 레이블에 쓰기 좋습니다. 숫자와 대문자의 높이가 안정적이라 가격이나 짧은 안내 문구에도 잘 맞습니다.
한국어와 영어를 나란히 두는 사이트에서는 영문 구간에 Inter, 한국어 구간에 Pretendard를 두는 조합이 무난합니다. 두 서체의 무게가 비슷해 한 화면에서 어색하지 않습니다.
현장에서 쓰는 조합
한국어 본문에는 Pretendard 보통 굵기
긴 설명문과 도움말은 보통 굵기로 두고 행간을 넉넉히 둡니다. 볼드 남용보다 줄 길이를 먼저 손봅니다.
제목에는 한 단계 무거운 굵기
제목과 본문이 같은 굵기면 위계가 무너집니다. 제목만 무겁게 가져가고 크기는 과하지 않게 잡습니다.
영문 버튼과 레이블에는 Inter
짧은 영어 레이블, 날짜와 숫자, 작은 버튼 텍스트에서 작은 크기 가독성이 살아납니다.
행간, 자간, 줄 길이
본문 행간은 한국어 기준으로 여유를 두는 편이 읽기 편합니다. 자간과 줄 길이를 함께 잡아야 효과가 납니다.
본문 행간에 여유를 둡니다
16픽셀 본문이라면 1.6에서 1.75 사이가 출발점입니다. 문단이 길수록 위쪽 값으로, 카드 안 짧은 설명이라면 아래쪽 값으로 조정합니다.
자간은 건드리지 않는 쪽이 안전합니다
너무 좁히면 받침이 붙어 보이고, 너무 넓히면 단어가 흩어집니다. 본문은 기본값 그대로 두고, 제목에서만 아주 살짝 조입니다.
한 줄 길이를 짧게 끊습니다
모바일에서는 한 줄에 들어가는 글자 수가 적기 때문에 문장을 짧게 끊는 편이 낫습니다. 긴 문장은 데스크톱에서도 읽기 부담이 큽니다. 쉼표보다 마침표로 나눕니다.
접근성 기본 점검
색 대비, 키보드 이동, 대체 텍스트, 폼 레이블을 확인합니다. 이 네 가지는 별도 작업이 아니라 기본 점검 항목으로 두는 편이 비용이 적습니다.
색 대비를 먼저 봅니다
본문과 배경, 버튼과 레이블 사이에서 자주 문제가 됩니다. 연한 회색 본문이나 흐린 버튼 글자는 작은 화면에서 먼저 사라집니다. 대비가 부족하면 색을 진하게 바꾸는 쪽이 빠릅니다.
키보드만으로 끝까지 갑니다
탭 키로 메뉴부터 폼 전송까지 이동할 수 있는지 확인합니다. 키보드만으로 폼을 채울 수 있는지도 함께 봅니다. 포커스가 어디 있는지 항상 보여야 합니다.
이미지에 할 일을 적습니다
장식 이미지는 비워 두고, 정보를 가진 이미지는 짧은 대체 텍스트를 답니다. 버튼 안 아이콘은 글자로 된 이름과 함께 읽혀야 합니다.
폼 레이블을 빠뜨리지 않습니다
모든 입력란에 눈에 보이는 이름을 둡니다. 아래에서 다룰 placeholder 문제와 오류 메시지 문구가 이 항목에 딸려 있습니다.
폼과 레이블
폼 레이블은 입력란 옆이나 위에 두고, placeholder로 대체하지 않습니다. 입력을 시작하면 사라지기 때문입니다. 무엇을 적어야 하는지, 형식이 어떤지 항상 보이게 둡니다.
좋은 예시 문구
이메일 주소
예: 이름@회사.kr — 입력 예시는 안에만 두고 이름은 밖에 둡니다.
오류가 나면 구체적으로 알립니다
“잘못된 입력”보다 “이메일 형식을 확인해 주세요”가 낫습니다. 어디가 틀렸는지 바로 고칠 수 있습니다.
모바일에서의 가독성
작은 화면에서는 글자 크기와 줄 간격이 더 중요합니다. 화면이 작다고 글자를 줄이면 읽지 않습니다. 본문은 16픽셀을 바닥으로 삼고 필요하면 키웁니다.
버튼과 링크는 손가락으로 누를 수 있는 크기를 유지합니다. 높이는 여유 있게 잡습니다.
서로 너무 가까이 두면 잘못 누르기 쉽습니다. 누르는 대상 사이를 벌려 둡니다.
긴 문장은 두 줄 이상 내려가지 않게 미리 나눕니다. 한 화면에 생각을 하나씩만 둡니다.
자주 하는 실수
영어용 행간을 그대로 쓰는 것, placeholder로 레이블을 대신하는 것, 대비를 낮춰 세련되게 보이려는 것. 이 세 가지는 실제로 자주 나오는 문제입니다. 반대로 기준을 한 번 정해두면 이후 페이지 작업이 훨씬 빨라집니다.