First impression
서체 선택이 곧 첫인상입니다
고딕과 명조의 느낌이 다르듯 굵기와 자간이 태도를 정합니다. 색보다 서체를 먼저 고정하세요. 서체가 정해지면 버튼, 배너, 공지가 같은 목소리로 읽힙니다.
Xalverio 웹디자인 스튜디오 — 광주에서 흐름을 먼저 봅니다
국문 자간과 행간이 화면을 살린다
한국어 웹에서 타이포그래피는 분위기와 가독성을 동시에 정합니다. 굵은 글자체와 강한 대비가 2026년 문맥에서 언급되지만, 기본은 자간과 행간, 줄바꿈입니다. 그리드 시스템과 함께 쓸 때 효과가 배가됩니다. 이 페이지에서 조합법을 정리합니다.
Reading density
왜 국문 타이포가 까다로운가
한글은 자소 조합이라 영문보다 밀도가 높습니다. 자간이 좁으면 숨이 막히고 넓으면 산만합니다. 행간이 타이트하면 긴 글이 벽처럼 보입니다. 숫자 몇 픽셀 조정이 체감을 바꿉니다. 광주 사무실에서 매일 보는 기업 소개, 공지, 제품 설명이 모두 이 밀도 위에 있습니다.
모바일 화면에서는 한 줄이 짧아 밀도가 더 도드라집니다. 같은 본문이라도 데스크톱에서 괜찮던 설정이 휴대폰에서는 답답하게 느껴집니다. 그래서 출발점은 하나가 아니라 두 화면입니다.
Starting values
자간과 행간의 출발점
본문은 살짝 넓은 자간에서 시작해 보세요. 행간은 글자 크기의 1.6배 안팎이 무난합니다. 제목은 반대로 자간을 조금 조여 밀도를 줍니다. 화면에서 직접 읽으며 조정하는 것이 정답입니다.
- 본문 자간은 기본값보다 한 단계 넓게 열고 긴 문장으로 눈의 피로를 확인합니다.
- 제목 자간은 살짝 조여 한 덩어리로 읽히게 하고 크기로 위계를 만듭니다.
- 행간 1.6을 기준으로 FAQ나 공지처럼 긴 글에서 줄 간격을 넓혀 봅니다.
Line breaks
줄바꿈이 곧 의미다
어색한 곳에서 끊기면 뜻이 흐려집니다. 조사 앞에서 끊기지 않게 문장을 다듬습니다. 모바일에서는 더 자주 끊기니 짧게 씁니다. 자동 줄바꿈에 맡기지 말고 문장을 고치세요. 특히 버튼과 배너 한 줄 문구는 끊기는 자리를 먼저 정하고 씁니다.
Weight
굵은 서체는 필요할 때만
2026년 흐름의 두꺼운 타이포는 한 줄 메시지에 어울립니다. 본문까지 굵게 하면 강약이 사라집니다. 굵기는 두 단계 이내로 씁니다. 대비는 색이 아니라 역할로 줍니다. 제목이 굵으면 본문은 가볍게, 버튼은 중간 굵기로 역할을 나눕니다.
Grid supports type
그리드가 타이포를 받친다
본문 폭이 넓으면 눈이 길을 잃습니다. 한 줄이 너무 길어지지 않게 폭을 제한합니다. 카드 간격과 제목 여백을 같은 단위로 맞춥니다. 반응형에서 무너지는 지점을 미리 정해 두세요. 가독성과 반응형 웹 완성도가 함께 올라갑니다.
본문 폭 제한하기
여백 단위 통일하기
이미지와 글의 정렬 맞추기
실무에서는 본문 칼럼을 620픽셀 안팎으로 묶고 카드와 이미지를 같은 8픽셀 단위 여백에 얹습니다. 비주얼디자인 시안과 UI디자인 구현이 어긋나지 않는 지점입니다.
모바일에서는 한 칼럼으로 접히게 하고 제목과 본문 사이 여백만 남깁니다. 무너지는 지점을 미리 정하면 검수가 짧아집니다.
모바일 UX 글 보기
From type to brand
브랜딩으로 이어지는 법
Reference
정체성이 분명한 사례에서 배웁니다
케이디자인어워드 출품작처럼 정체성이 분명한 사례를 보면 서체가 처음부터 끝까지 일관됩니다. 제목, 본문, 캡션의 역할이 흔들리지 않습니다. 우리 사이트에도 같은 약속을 옮겨 보세요.
국내 웹 어워드 출품 준비에도 같은 기준이 통합니다. 더 자세한 기준은 어워드 안내에서 이어집니다.
국내 웹 어워드 가이드 보기검수할 때 보는 것들
- 저해상도 기기에서 얇은 글자가 날아가지 않는지 봅니다.
- 버튼 안의 글자가 잘리는지 확인합니다.
- 폼 라벨과 오류 문구가 같은 크기로 읽히는지 봅니다.
- 광주 사무실 모니터와 휴대폰 두 곳에서 대조합니다.
Small promises
자주 놓치는 두 가지
첫째, 숫자와 영문이 섞일 때 줄 높이가 어긋나는 문제. 둘째, 링크와 본문의 구분이 약한 문제입니다. 밑줄이나 색 약속을 정해두면 해결됩니다. 작은 약속이 전체를 정돈합니다.
바로 적용하기
숫자 서체는 본문과 줄 높이를 맞추고 링크는 밑줄과 색을 함께 씁니다. 가격, 전화번호, 주소처럼 자주 바뀌는 정보부터 점검하면 효과가 큽니다.
Xalverio 웹디자인 스튜디오, 광주 서구 상무중앙로 56. 월–금 09:00–18:00, +82-62-374-2219.
Studio note
서체는 고르고 끝이 아니라 다듬고 이어가는 일입니다. 2026년 트렌드 글과 모바일 UX 글을 함께 보면 흐름이 이어집니다.
Questions
자주 묻는 질문
한국어 사이트에서 타이포그래피가 왜 중요한가요?
자간과 행간, 줄바꿈이 가독성과 분위기를 함께 정하기 때문입니다. 같은 문장도 설정에 따라 읽기 피로가 달라집니다. 그리드 시스템과 맞물리면 화면 전체의 안정감이 생깁니다.
사이트 문장이 휴대폰에서 답답하게 느껴진다면 자간과 행간부터 보세요. 문의하기에서 화면 주소를 함께 보내주시면 광주 스튜디오에서 읽고 답합니다.
타이포 점검 문의하기[email protected] · +82-62-374-2219