실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 퍼블리싱 꿀팁

제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리

메인 카피나 제목이 두 줄로 넘어가면서 마지막 줄에 단어 하나만 덩그러니 남는 제목 줄바꿈 문제는 CSS text-wrap: balance 한 줄로 대부분 정리됩니다. 브라우저가 각 줄의 길이를 비슷하게 맞춰서 나눠 주기 때문입니다.
한국어 사이트에서 같이 써야 하는 word-break: keep-all, 본문용 pretty, 그리고 <br>로 억지로 끊을 때 생기는 문제까지 실무 기준으로 정리했습니다.

💡 <br>로 줄을 나눠 두면 되지 않나요?

디자인 시안 크기에서는 깔끔해 보이지만, 화면 폭이 바뀌면 이야기가 달라집니다. 태블릿이나 작은 노트북에서는 브라우저가 한 번 더 자르면서 세 줄이 되고, 짧은 줄과 긴 줄이 번갈아 나오는 계단 모양이 됩니다. 고객사 리뉴얼 검수 때 "폰에서 제목이 이상하게 끊긴다"는 요청의 상당수가 이 경우였습니다.

1. 제목에는 balance, 한국어는 keep-all과 함께

balance는 여러 줄에 걸친 글자 수를 최대한 고르게 나눕니다. 다만 한국어는 기본 설정에서 글자 단위로도 줄이 바뀌기 때문에, word-break: keep-all을 함께 줘야 띄어쓰기 단위로 끊기면서 단어가 반으로 쪼개지지 않습니다.

/* 한국어 제목: 단어 중간에서 끊기지 않게 + 줄 길이 맞추기 */
h1, h2, h3,
.main-copy {
  word-break: keep-all;
  text-wrap: balance;
}

계산 비용 때문에 줄 수 제한이 있습니다. 크롬 계열은 6줄 이하, 파이어폭스는 10줄 이하에서만 동작하고 그보다 길면 일반 줄바꿈으로 처리됩니다. 그래서 제목, 메인 카피, 카드 제목, 인용문처럼 짧은 글에만 쓰는 것이 맞습니다.

2. 긴 본문은 pretty로

본문 문단에는 pretty가 어울립니다. 줄 길이를 맞추기보다는 마지막 줄에 한두 글자만 남는 것을 피하는 쪽으로 동작합니다. 대신 조금 더 느린 계산을 쓰기 때문에 상품 목록처럼 텍스트가 아주 많은 화면에는 넣지 않는 편입니다.

/* 긴 본문: 마지막 줄에 한 단어만 남는 것 줄이기 */
.article p {
  word-break: keep-all;
  text-wrap: pretty;
}

지원하지 않는 브라우저에서는 이 속성을 그냥 무시하고 평소처럼 줄을 나눕니다. 깨질 걱정 없이 넣어 둘 수 있다는 점이 이 속성의 장점입니다.

3. 꼭 원하는 위치에서 끊어야 한다면

브랜드 슬로건처럼 끊는 위치가 정해져 있다면 <br>을 쓰되, 모바일에서는 숨겨서 자연스럽게 흐르게 합니다. 모바일에서는 balance가 줄 길이를 대신 맞춰 줍니다.

/* PC에서만 강제로 줄을 나누고 싶을 때 */
<h2>처음 만드는 홈페이지,<br class="pc-only">
어디서부터 시작할까요?</h2>

@media (max-width: 767px) {
  .pc-only { display: none; }
}
상황추천 설정
메인 카피, 섹션 제목keep-all + balance
블로그·게시판 본문keep-all + pretty
끊는 위치가 정해진 슬로건PC 전용 br + balance

"제목 한 줄이 어떻게 끊기느냐도 첫인상입니다."

나눔웹은 시안 크기뿐 아니라 실제 휴대폰과 태블릿 폭에서 제목이 어떻게 보이는지까지 확인하고 오픈합니다.


List of Articles
번호 분류 제목 글쓴이
71 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
70 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
69 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
68 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
67 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
66 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
65 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
64 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
63 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
62 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
61 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
60 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
59 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
58 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
57 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
56 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
55 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
54 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
53 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
52 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4