로그나 코드가 한 줄로 길게 늘어질 때: pre 태그와 CSS white-space 속성

SmartInfoBank 운영자 · 작성 2026-10-25 · 수정 2026-10-25 · 7분

서버 로그, 설정 파일 내용, 오류 스택 추적과 같은 원본 텍스트를 웹 브라우저에 표시할 때 HTML의 <pre> 요소를 자주 사용합니다. <pre> 요소는 서식화된 텍스트를 작성된 그대로 보여주기 위해 연속된 띄어쓰기와 줄바꿈을 유지하며 기본적으로 고정폭 글꼴로 출력됩니다.

하지만 한 줄의 길이가 브라우저 창이나 부모 요소의 너비보다 길어지면 텍스트가 줄바꿈되지 않고 오른쪽으로 길게 뻗어 나가 가로 스크롤바를 만듭니다. 가로 스크롤은 화면 레이아웃을 깨뜨리고 모바일 환경이나 폭이 좁은 영역에서 문서를 읽기 어렵게 만듭니다. 이 문제는 <pre>의 기본 스타일 규칙과 CSS의 white-space 속성을 이해하면 안전하게 해결할 수 있습니다.

pre 요소에서 긴 텍스트가 잘리지 않는 원인

MDN pre 요소 명세에 따르면, <pre> 요소는 블록 레벨 요소이며 내부의 공백과 줄바꿈을 그대로 표시합니다. 과거 HTML 규격에는 wrap이나 width 같은 속성이 있었으나, 최신 브라우저에서는 시각적 효과가 무시되므로 줄바꿈 제어는 CSS를 통해 지정해야 합니다.

브라우저 기본 스타일시트(User Agent Stylesheet)에서 <pre> 요소는 white-space: pre; 속성을 가집니다. 이 값은 원본의 공백 문자와 줄바꿈 문자를 그대로 보존(preserve)하지만, 지정된 너비를 초과하더라도 브라우저가 임의로 줄을 꺾지 않는(no wrap) 규칙을 따릅니다. 따라서 소스 코드나 로그 데이터에 명시적인 줄바꿈 문자(개행)가 없으면 아무리 긴 문자열이라도 한 줄로 끝까지 이어집니다.

white-space 주요 값에 따른 동작 차이

MDN white-space 속성 문서에서 다루는 네 가지 대표적인 키워드 값은 공백 축소 여부와 자동 줄바꿈 여부에 따라 동작이 나뉩니다.

일반 문단에 쓰이는 normal은 연속된 공백이나 엔터를 공백 한 칸으로 합쳐버리므로 코드의 들여쓰기가 망가집니다. 반면 pre-wrap은 연속된 띄어쓰기, 탭, 줄바꿈 문자를 원본 형태 그대로 유지하면서도, 텍스트가 요소의 너비 한계에 도달하면 다음 줄로 자동 줄바꿈을 수행합니다.

기본 <pre> 요소는 공백과 개행을 유지하지만 기본 white-space가 'pre'로 설정되어 긴 문자열이 가로 스크롤을 유발합니다. 스타일에 'white-space: pre-wrap;'을 지정하면 연속 공백과 개행을 그대로 유지하면서 컨테이너 너비를 초과할 때 자동으로 줄바꿈됩니다.

pre-wrap 스타일을 안전하게 적용하는 순서

기존 서식을 보존하면서 가로 스크롤을 제거하려면 다음과 같은 단계로 스타일을 구성하고 점검합니다.

1. 스타일 선언: 로그나 코드를 담는 <pre> 요소 또는 특정 클래스에 white-space: pre-wrap;을 선언합니다.

   pre.log-viewer {
     white-space: pre-wrap;
   }

2. 부모 컨테이너 너비 점검: <pre> 요소가 줄을 바꾸려면 기준이 되는 너비가 정해져 있어야 합니다. 부모 요소가 max-width: 100%;나 고정 픽셀 너비를 가지고 있는지 확인합니다.
3. 공백 보존 확인: 들여쓰기가 필요한 코드 구문이나 스페이스 여러 칸이 포함된 텍스트가 축소되지 않고 시각적으로 동일한 간격을 유지하는지 대조합니다.
4. 창 크기 조절 테스트: 브라우저 창 너비를 좁혔을 때 가로 스크롤바가 생기지 않고 경계면에서 자연스럽게 줄바꿈이 일어나는지 검증합니다.

공백 없는 긴 단어가 넘칠 때의 보완

white-space: pre-wrap;은 단어와 공백을 기준으로 줄바꿈 위치를 계산합니다. 하지만 URL 주소나 Base64 인코딩 문자열, 경로 표기처럼 공백 문자 없이 수백 자 이상 이어지는 긴 텍스트는 단어 자체가 상자 너비보다 넓을 수 있습니다.

이 경우 pre-wrap만으로는 단어 중간이 끊어지지 않아 여전히 상자 밖으로 넘치거나 스크롤이 발생할 수 있습니다. 단어 내부에서도 강제로 줄을 넘겨야 한다면 MDN 명세에서 권장하는 보조 속성인 overflow-wrap: break-word; 또는 word-break: break-all;을 함께 검토해야 합니다.

pre 태그 사용 시 주의사항과 검증 한계

white-space: pre-wrap; 설정은 화면 표시 방식만 제어하며 원본 데이터를 가공하지 않습니다. 따라서 다음과 같은 제약과 주의점을 함께 고려해야 합니다.

• HTML 태그 해석 문제: <pre> 요소 내부의 문자열은 일반 HTML로 파싱됩니다. 로그 내용에 <, >, & 같은 문자가 포함되어 있다면 브라우저가 이를 태그나 엔티티로 인식하므로, 사전에 안전하게 변환해야 합니다. 자세한 내용은 HTML 이스케이프: 태그를 글자로 표시하는 방법 문서를 참고할 수 있습니다.
• 첫 줄 개행 생략 규칙: HTML 파서 규칙에 따라 여는 <pre> 태그 바로 뒤에 오는 첫 번째 줄바꿈 문자는 브라우저가 자동으로 제거합니다. 첫 줄에 빈 줄을 의도적으로 두어야 한다면 줄바꿈을 두 번 입력해야 합니다.
• 탭 너비 차이: 탭(Tab) 문자는 기본적으로 8개의 공백 너비로 렌더링됩니다. 너비가 지나치게 넓다면 CSS의 tab-size 속성을 통해 원하는 칸수로 조절해야 합니다.
• 복사 동작과의 분리: 화면에서 줄바꿈이 일어났더라도 사용자가 마우스로 드래그하여 클립보드에 복사할 때 자동 줄바꿈 위치에 실제 개행 문자가 삽입되는지 여부는 브라우저 구현과 텍스트 선택 방식에 따라 다를 수 있습니다.