자간과 줄바꿈 옵션을 고르면 CSS를 바로 만들고, 좁은 폭에서 어떻게 보이는지 미리 볼 수 있습니다.
👀 미리보기 (가로폭을 좁힌 상태)
에브리캘크는 생활·업무용 계산기와 퍼블리싱에 쓰는 작은 도구를 모은 사이트입니다. 글자가 어색하게 잘리면 읽기 불편해집니다. Every-Calc typography preview — long English words and URLs often need different break rules.
💡 생성된 CSS 코드
📊 적용 안내
* [실무 팁] 복사한 클래스를 공통 CSS(예: reset이나 body/p 기본 스타일)에 두고, 본문·카드 텍스트에 text-typo-smooth를 붙이면 사이트 전체 자간·줄바꿈을 비슷하게 맞출 수 있습니다.
💡 word-break와 자간으로 한글 가독성 다듬기
피그마에서 잘 보이던 문장도, 브라우저에서는 자간이 넓어 글자가 퍼지거나 모바일에서 단어가 가운데가 잘려 보이기 쉽습니다. CSS letter-spacing으로 글자 간격을 살짝 조이고, word-break로 줄이 어디서 나뉠지 정하면 읽기 훨씬 편해집니다. 이 도구는 두 값을 골라 CSS를 만들고, 좁은 폭 미리보기로 바로 확인할 수 있게 해 줍니다.
자간은 em 단위로 넣습니다. 글자 크기가 바뀌어도 비율이 유지됩니다. 줄바꿈은 본문용 keep-all, 긴 URL·영문용 break-all, 넘칠 때만 끊는 overflow-wrap: break-word 중에서 고르면 됩니다.
📊 주요 CSS 속성과 추천 설정
글자 간격과 줄바꿈을 다루는 대표 속성입니다. 화면 폭과 콘텐츠 종류에 맞게 조합해 보세요.
| 속성 | 추천 값 | 동작 | 실무 팁 |
|---|---|---|---|
| letter-spacing | -0.02em ~ -0.05em | 글자 간격을 살짝 좁혀 밀도를 높임 | 한글은 기본 자간이 넓은 편이라 em 음수 보정이 잘 맞음 |
| word-break: keep-all | keep-all | 줄바꿈 시 단어 단위를 유지 | 본문에 좋지만, 좁은 버튼·뱃지에는 비추천 |
| word-break: break-all | break-all | 단어 경계를 무시하고 바로 줄바꿈 | 긴 URL, 영문 댓글, 코드성 텍스트에 적합 |
| overflow-wrap | break-word | 긴 단어가 박스를 넘기기 직전에만 줄바꿈 | 카드·반응형 레이아웃에서 넘침을 막는 용도 |
📌 한글 자간을 em으로 맞추는 이유
자간을 px로 고정하면 글자 크기가 바뀔 때 비율이 어긋납니다. 아예 안 건드리면 한글 서체가 원래 넓게 잡혀 있어 본문이 성기게 보이기 쉽습니다. em으로 -0.02em~-0.05em 정도를 주면 크기에 맞춰 간격이 따라갑니다. 제목은 조금 더 조이고, 본문은 -0.02em 근처부터 미리보기로 조절해 보세요.
이 생성기는 ‘최적값’을 자동으로 고르는 도구가 아니라, 입력한 자간과 줄바꿈 규칙을 CSS로 묶어 주는 도구입니다. 미리보기에서 한글·영문이 어떻게 나뉘는지 보면서 값을 미세 조정하면 됩니다.
⚙️ 모바일에서 단어가 잘릴 때
좁은 화면에서는 ‘플랫폼입니다’가 ‘플랫’ / ‘폼입니다’처럼 어색하게 나뉠 수 있습니다. 본문에는 word-break: keep-all;을 쓰면 단어 단위로 줄을 유지하기 쉽습니다. 다만 긴 영문 주소·해시태그는 박스를 뚫고 나갈 수 있으니, 그런 영역에는 break-all이나 overflow-wrap: break-word를 따로 두는 편이 안전합니다.
🚨 이용 시 주의사항
keep-all을 좁은 버튼·뱃지에 쓰면 긴 단어가 밖으로 삐져나올 수 있습니다. 본문용 클래스와 UI용 클래스를 나누고, 적용 후 개발자 도구로 작은 폭을 한 번 확인해 주세요. 자간을 너무 세게 조이면(-0.08em 이하 등) 글자가 붙어서 읽기 어려워질 수 있습니다.
