Mac에서 브라우저의 양쪽 정렬 텍스트에 나타나는 불균일한 간격을 진단하려면 먼저 문단을 시작 정렬로 바꾸세요. 그런 다음 간격 규칙, 줄바꿈, 열 너비, 글꼴 로딩을 한 번에 하나씩 테스트하세요. 이 순서를 따르면 어떤 변경이 실제로 문단을 개선하는지 파악하는 데 도움이 됩니다.

이 가이드는 좁은 설명 열이 있는 초록 카탈로그처럼 일반적인 브라우저 페이지를 살펴보는 사람을 위한 것입니다. 목적은 유난히 넓은 단어 간격을 설명하고 실용적인 수정 방법을 선택하는 것입니다. 아래의 모든 예시 레이블과 치수는 가상의 값입니다.

불균일한 간격으로 알 수 있는 것

양쪽 정렬은 한 줄의 사용 가능한 공간을 분배해 줄 상자를 채웁니다. 줄마다 단어와 확장 가능한 여지가 다르므로 간격이 서로 같을 필요는 없습니다. W3C는 브라우저의 양쪽 정렬 알고리즘에 재량을 허용하므로 동일한 CSS가 모든 브라우저에서 동일한 간격을 지정하지는 않습니다. CSS Text Module Level 3

무엇이든 바꾸기 전에 두 가지 관찰을 구분하세요. 한 줄의 대부분의 간격이 다음 줄보다 넓다면 해당 줄에서 사용할 수 있는 너비와 줄바꿈 선택지를 살펴보세요. 특정 간격 하나만 유난히 넓어 보인다면 그 경계 주변의 텍스트와 스타일도 살펴보세요. 이는 진단을 시작하기 위한 단서이지, 특정 원인의 증거는 아닙니다.

간단한 계산으로 왜 단어가 적은 줄을 살펴봐야 하는지 알 수 있습니다. 한 줄의 사용 가능한 너비가 CSS 픽셀 480이고 양쪽 정렬 전 콘텐츠가 420픽셀을 차지한다고 가정해 보세요. 남은 60픽셀을 확장 가능한 공백 6개에 동일하게 분배하는 예시 모델에서는 각 공백이 10픽셀씩 늘어납니다. 확장 가능한 공백이 3개뿐이고 남은 너비가 같다면 각 공백은 20픽셀씩 늘어납니다. 이는 계산 예시일 뿐, 브라우저 측정값이나 보편적인 렌더링 공식이 아닙니다.

실제로는 간격 자체를 조정하기 전에 해당 줄에 배치된 단어를 살펴보는 것이 좋습니다. 확장할 여지가 적은 줄은 전반적인 간격 조정으로 해결되지 않는 줄바꿈 문제를 드러낼 수 있습니다.

Mac에서 하나의 통제된 비교부터 시작하기

문제가 있는 문단 하나를 선택하고 브라우저 버전, 페이지 확대율, 대략적인 열 너비, 정확한 텍스트를 기록하세요. 변경 사항을 비교하는 동안 이 조건을 일정하게 유지하세요. 중립적인 테스트 문단에는 다음을 사용하세요. “호박색 패널에는 둥근 타일이 있습니다. 은색 패널에는 정사각형 타일이 있습니다. 각 패널에는 짧은 레이블과 간단한 설명이 있습니다.”

Chrome에서 문단을 Control-클릭하고 Inspect를 선택하세요. 또는 Command–Option–I로 개발자 도구를 연 다음 해당 요소를 선택하세요. 브라우저 개발자 도구를 사용하면 현재 문서를 살펴보고 HTML 및 CSS 변경 사항을 로컬에서 미리 볼 수 있습니다. 브라우저 개발자 도구란 무엇인가요?

인라인 요소 안의 단어 하나가 아니라 문단의 컨테이너 블록을 선택하세요. Chrome의 Elements 패널에서 Styles와 Computed를 모두 확인하세요. 전자에는 덮어쓴 선언을 포함해 적용 가능한 선언이 표시되고, 후자는 실제 적용된 값을 파악하는 데 도움이 됩니다. 속성 필터를 사용해 각 설정을 찾으세요. CSS 기능 참고 자료

text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family, font-size를 기록하세요. 문단의 콘텐츠 너비도 적어 두세요. 이렇게 하면 원래 조건, 한 가지 변경, 관찰된 결과를 간단히 비교할 수 있습니다.

문단에 text-align: start와 text-align-last: start를 임시로 설정하세요. 넓은 간격이 사라지면 양쪽 정렬이 증상에 영향을 준 것입니다. 간격이 그대로라면 명시적인 간격 설정과 공백 문자를 계속 확인하세요. 다음 독립 테스트를 하기 전에 원래 정렬 상태로 복원하세요. DevTools에서는 선언을 켜고 끄거나 값을 편집해 실시간으로 미리 볼 수 있습니다. 브라우저 개발자 도구란 무엇인가요?

명시적인 간격 설정과 보존된 공백 확인하기

시작 정렬이 적용된 상태에서 word-spacing: normal을 테스트하세요. MDN에 따르면 이 값은 글꼴이나 브라우저가 정하는 일반적인 간격을 뜻하며, 길이 값을 지정하면 글꼴의 고유한 단어 간격에 추가됩니다. 따라서 양의 상속값은 양쪽 정렬이 적용되기 전부터 관련이 있을 수 있습니다. word-spacing CSS 속성

문단의 일부만 바뀐다면 부모 요소와 스타일이 지정된 인라인 자식 요소도 살펴보세요. 기존 letter-spacing는 모든 타이포그래피 속성을 한꺼번에 초기화하지 말고 별도로 테스트하세요. 두 설정을 동시에 바꾸면 결과가 개선되어도 어느 설정이 영향을 줬는지 알 수 없습니다.

다음으로 white-space을 확인하세요. normal에서는 일반적인 연속 공백이 하나로 합쳐지고 필요에 따라 텍스트가 줄바꿈됩니다. pre-wrap에서는 줄바꿈이 계속 허용되는 가운데 공백 연속과 원본의 줄바꿈이 보존됩니다. pre-line에서는 공백은 합쳐지지만 원본의 줄바꿈은 계속 줄바꿈으로 처리됩니다. 이런 차이로 인해 간격 결함처럼 보이는 현상이 달라질 수 있습니다. white-space CSS 속성

일반적인 흐름형 설명에서는 white-space: normal을 임시로 테스트하세요. 결과가 개선된다면 영구적으로 수정하기 전에 원본 텍스트와 공백 규칙을 살펴보세요. 의미 있는 서식은 그대로 유지하세요. 미리 서식이 지정된 예시와 일반적인 설명에는 서로 다른 요구 사항이 있습니다. 이 테스트는 레이아웃 입력 요소를 찾아낼 뿐, 보존된 모든 공백을 제거해야 한다는 뜻은 아닙니다.

짧은 줄, 강제 줄바꿈, 열 너비 조사하기

마지막 줄이 늘어나고 있나요?

짧은 마지막 줄의 간격이 유난히 넓다면 text-align-last을 확인하세요. 이 속성은 블록의 마지막 줄과 강제 줄바꿈 바로 앞의 줄 모두를 제어합니다. text-align: justify에서 기본 auto 동작은 이 줄들을 시작 위치에 정렬하고, 명시적인 justify 값은 줄을 늘립니다. 이 조건을 분리하려면 text-align-last: start를 테스트하세요. text-align-last CSS 속성

문제가 있는 줄바꿈 위치에 br 요소가 있는지 살펴보세요. WHATWG는 이를 콘텐츠 줄바꿈으로 정의하며, 줄바꿈이 콘텐츠의 일부인 경우 사용해야 한다고 설명합니다. 일반적인 흐름형 설명이라면 데스크톱의 특정 배치를 재현하려고만 삽입한 줄바꿈을 검토하세요. 의도한 동작이 자연스러운 줄바꿈이라면 줄의 끝을 줄바꿈 처리에 맡기세요. HTML 표준: br 요소

좁은 열에서 문제가 발생하나요?

양쪽 정렬을 복원하고 문단에 사용할 수 있는 너비만 바꾸세요. 텍스트와 글꼴은 그대로 두고 열을 조금 넓힌 다음 조금 좁혀 보세요. 어떤 단어가 줄 사이에서 이동하는지, 눈에 띄는 간격도 함께 이동하는지 기록하세요.

이를 결정 테스트로 활용하세요. 열을 넓혔을 때 줄 끝이 더 자연스러워진다면 공간이 허용되는 범위에서 레이아웃을 조정하세요. 설명을 좁은 폭으로 유지해야 하고 여러 줄이 여전히 단어가 적어 보인다면 시작 정렬이 실용적인 대안입니다. 예시 문단 하나가 깔끔하게 들어맞는다는 이유만으로 너비를 선택하지 마세요.

하이픈 넣기로 유용한 줄바꿈 기회를 만들 수 있나요?

영어 산문에서는 문단 자체나 상위 요소에 lang가 en처럼 올바르게 설정되어 있는지 확인한 다음 hyphens: auto를 테스트하세요. 자동 하이픈 넣기는 언어 태그와 적절한 사전의 사용 가능 여부에 따라 달라집니다. 눈에 보이는 하이픈이 없다는 사실만으로 CSS 선언이 실패했다고 볼 수는 없습니다. hyphens CSS 속성

이 테스트에는 임의로 만든 붙임표 없는 식별자가 아니라 일반 단어를 사용하세요. 이후 문단 전체를 확인하세요. 원하는 결과는 하이픈의 등장 자체가 아니라 더 나은 줄 끝입니다. 자동 하이픈 넣기로 대상 브라우저의 결과가 개선되지 않는다면 효과가 있었던 너비 또는 정렬 해결 방법을 유지하세요.

글꼴 변경과 브라우저의 양쪽 정렬을 구분하기

페이지가 처음 표시된 뒤 줄 끝이 바뀐다면 스크린샷을 비교하기 전에 글꼴 로딩을 조사하세요. CSS Font Loading API는 글꼴 로딩과 관련 레이아웃이 완료된 후 해결되는 프로미스인 document.fonts.ready을 제공합니다. 이는 측정을 위한 유용한 동기화 지점이지만, 페이지가 나중에 바뀌면 다시 비교해야 할 수 있습니다. CSS Font Loading API

시각적 테스트에서는 너비와 글꼴 크기를 일정하게 유지하면서 원래 문단과 임시 font-family: system-ui 설정을 비교하세요. 개선되더라도 이는 글꼴 선택이 이 레이아웃에 영향을 준다는 근거일 뿐, 원래 글꼴에 결함이 있다는 증거는 아닙니다. Firefox나 Safari에서는 검사기의 Fonts 보기로 선택한 요소에 적용된 글꼴을 확인할 수 있습니다. 브라우저 개발자 도구란 무엇인가요?

텍스트 셰이핑의 범위를 명확히 하세요. HarfBuzz는 속성이 같은 텍스트 구간을 위치가 지정된 글리프로 셰이핑합니다. 문서에는 단락의 줄바꿈, 하이픈 넣기, 양쪽 정렬은 포함되지 않는다고 명시되어 있습니다. 따라서 HarfBuzz 설정을 바꾸는 것은 늘어난 단어 간격을 해결하는 일반적인 브라우저 CSS 방법이 아닙니다. HarfBuzz가 하지 않는 일

같은 이유로 글자를 하나씩 측정하고 배치해 대체 레이아웃을 만들지 마세요. 그런 방식은 셰이핑과 단락 레이아웃 작업의 영역에 해당합니다. 일반적인 DOM 텍스트라면 브라우저 레이아웃의 입력 요소를 계속 진단하고 브라우저의 텍스트 렌더링 파이프라인을 유지하세요.

테스트 결과에 근거해 수정 방법 선택하기

관찰 결과를 구체적인 다음 조치로 연결하려면 이 표를 사용하세요. 각 행은 진단에 따른 추론입니다. 원래 조건으로 복원한 다음 효과가 있었던 변경을 반복해 확인하세요.

관찰 결과 다음에 조사할 항목 수정 후보
시작 정렬에서도 간격이 남음 명시적인 간격 설정과 보존된 공백 관련 선언을 수정하거나 의도하지 않은 텍스트 서식을 바로잡기
마지막 줄만 늘어남 마지막 줄 정렬과 강제 줄바꿈 해당 줄에 시작 정렬을 사용하고 표현 목적으로만 넣은 줄바꿈 검토
단어가 다시 배치될 때 간격도 이동함 열 너비와 사용 가능한 줄바꿈 기회 너비 조정, 하이픈 넣기 테스트 또는 시작 정렬 사용
로딩 중 레이아웃이 바뀜 글꼴 로딩과 적용된 글꼴 글꼴 로딩이 안정된 후 비교하고 글꼴 관련 차이 해결
양쪽 정렬 방식 변경이 효과가 없음 브라우저 지원과 적용된 선언 지원되는 정렬 및 레이아웃 제어 사용

text-justify: inter-word를 보편적인 해결책으로 의존하지 마세요. MDN은 현재 text-justify의 지원이 제한적이라고 표시합니다. 지원되는 경우 inter-word은 단어 경계에서 확장을 선택하고, auto은 브라우저가 방법을 선택하도록 합니다. 단어 경계를 선택해도 단어가 적은 줄의 간격이 작아진다고 보장되지는 않습니다. text-justify CSS 속성

해당 속성이 지원되지 않으면 비교로 확인된 지원 경로를 사용하세요. 정렬을 바꾸거나, 사용 가능한 줄 너비를 늘리거나, 의도하지 않은 공백을 바로잡거나, 언어를 고려한 하이픈 넣기를 테스트하면 됩니다. 대상 브라우저마다 비슷한 콘텐츠 너비에서 최종 선택을 다시 확인하세요. CSS는 하나의 완전한 양쪽 정렬 알고리즘을 지정하지 않으므로 브라우저 간 차이만으로 결함이라고 볼 수는 없습니다. CSS Text Module Level 3

반복 가능한 비교로 증상을 설명할 수 있으면 진단을 마치세요. 원래 문단에서 간격이 나타나고, 확인된 한 가지 변경으로 개선되며, 필요한 너비 범위에서도 결과가 유용하게 유지되어야 합니다. 페이지를 관리한다면 효과가 있는 최소한의 수정을 페이지 소스에 반영하세요. 공개 페이지를 살펴보기만 한다면 관찰한 값과 재현 절차를 결과물로 정리하세요.

출처