소프트 줄바꿈과 저장된 줄바꿈을 구별하려면 텍스트 편집기에서 자동 줄 바꿈을 끄고 원본 텍스트를 살펴보세요. 이 Mac 가이드에서는 이 확인 방법, 브라우저 레이아웃이 혼동을 일으킬 수 있는 이유, 복사한 코드로 실제로 무엇을 알 수 있는지 설명합니다.

소프트 줄바꿈과 줄바꿈 문자의 차이는 무엇인가요?

소프트 줄바꿈은 브라우저나 편집기가 사용 가능한 너비에 맞추기 위해 텍스트를 다음 표시 행으로 옮길 때 발생합니다. 저장된 줄바꿈은 텍스트 자체의 일부입니다. W3C는 소프트 줄바꿈과 강제 줄바꿈을 구분하며, 강제 줄바꿈은 보존된 줄바꿈 문자나 블록 경계로 인해 생길 수 있습니다. CSS 공백 처리는 기본 문서 데이터를 바꾸지 않고 표시 방식만 바꿉니다. CSS Text Module Level 3

이 차이를 고려하면 코드가 여러 행에 표시될 때 세 가지 가능성이 있습니다. 하나의 논리적 줄이 줄바꿈된 경우, 텍스트에 별도의 논리적 줄이 있는 경우, 또는 페이지 구조가 시각적 줄바꿈을 강제하는 경우입니다. 스크린샷만으로는 어떤 경우인지 신뢰성 있게 판별할 수 없습니다.

여기서 “직접 입력한 줄바꿈”은 살펴보는 원본에 존재하는 줄바꿈을 뜻합니다. 줄바꿈이 있다고 해서 누가 추가했는지 알 수 있는 것은 아닙니다. 포매터, 내보내기 과정 또는 다른 변환 작업에서 만들어졌을 수도 있습니다. 실질적인 과제는 경계가 텍스트에 속하는지, 현재 표시 방식에만 있는지 판단하는 것입니다.

Mac 데스크톱 편집기에서 코드를 어떻게 확인하나요?

이 작업에는 Visual Studio Code를 사용하세요. 원본 코드 파일을 구할 수 있다면 그 파일부터 시작하세요. 공개 페이지만 있다면 관련 코드를 별도의 편집기 문서로 복사하되, 원본과 비교할 수 있을 때까지 그 문서는 복사된 텍스트에 대한 증거로만 취급하세요.

텍스트를 다시 포매팅하지 않고 자동 줄 바꿈 끄기

  1. VS Code에서 파일이나 복사한 샘플을 엽니다.
  2. 편집기에 포커스가 있을 때 Option+Z를 눌러 Toggle Word Wrap을 실행합니다.
  3. 자동 줄 바꿈을 끄면 앞선 표시 행에 이어져 가로로 길어지는지 확인합니다.
  4. 자동 줄 바꿈이 이미 꺼져 있었다면 한 번 더 전환해 두 상태를 비교합니다. 중요한 것은 두 보기 사이의 차이입니다.

Microsoft 문서에 따르면 Option+Z는 macOS에서 Toggle Word Wrap의 기본 단축키이며, 명령 ID는 editor.action.toggleWordWrap입니다. 단축키가 다르다면 Keyboard Shortcuts 편집기에서 해당 명령을 찾아보세요. 기본 키보드 단축키 참조

editor.wordWrap를 on로 설정하면 VS Code는 편집기 뷰포트 너비에 맞춰 텍스트를 줄바꿈합니다. 따라서 자동 줄 바꿈을 끄면 시각적으로 이어진 부분이 사라집니다. 변경되지 않은 동일한 텍스트에서 경계가 계속 남아 있다면, 이는 해당 편집기의 소프트 줄바꿈이 아니라 논리적 줄 경계입니다. 기본 편집

보기를 비교할 때 다음 판단표를 활용하세요.

관찰 결과 뒷받침하는 내용 다음 조치
자동 줄 바꿈을 끄면 이어진 부분이 앞선 행에 합쳐짐 편집기에서 소프트 줄바꿈이었음 텍스트를 그대로 유지합니다
자동 줄 바꿈을 꺼도 두 줄이 분리되어 있음 살펴본 텍스트에 줄 경계가 있음 복사본을 살펴봤다면 원본과 비교합니다
복사한 텍스트에서 페이지의 경계가 사라짐 페이지와 복사된 표현이 서로 다름 페이지의 텍스트와 구조를 살펴봅니다
복사된 경계가 남아 있지만 원본은 없음 복사된 텍스트에 해당 경계가 있음 그 경계의 출처는 미확인 상태로 둡니다

가상의 예시 사용해 보기

아래의 한 줄짜리 샘플을 별도의 문서에 붙여 넣으세요. 설명을 위한 JavaScript 텍스트이며, 실행할 필요는 없습니다.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

텍스트가 줄바꿈되도록 편집기 너비를 좁히세요. 자동 줄 바꿈이 켜져 있으면 문장이 여러 표시 행에 걸칠 수 있습니다. 자동 줄 바꿈을 끄면 끝까지 읽기 위해 가로로 스크롤해야 하더라도 문장은 하나의 논리적 줄로 돌아가야 합니다.

이제 의도적으로 여러 줄로 작성한 다음 예시와 비교해 보세요.

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

자동 줄 바꿈을 꺼도 이 네 개의 논리적 줄은 각각 분리되어 있습니다. 너비가 좁으면 각 줄 자체도 줄바꿈될 수 있습니다. 여기서 중요한 차이는 하나의 코드 샘플에 저장된 줄바꿈과 소프트 줄바꿈이 함께 있을 수 있다는 점입니다.

비교하는 동안 문서의 포매팅을 바꾸지 마세요. 확인하는 텍스트는 그대로 두고 보기만 바꾸는 것이 목적입니다. 그렇지 않으면 줄 경계의 변화가 표시 설정이 아니라 편집으로 인한 것일 수 있습니다.

브라우저 크기 조절은 왜 예비 확인에 불과한가요?

탐색 열과 코드 패널이 있는 추상적인 공개 페이지를 생각해 보세요. 브라우저 너비를 넓히면 패널에 더 많은 공간이 생길 수 있습니다. 경계가 다른 단어로 이동한다면 줄바꿈 때문일 가능성을 뒷받침합니다. 하지만 패널 너비가 고정되어 있으면 바깥 창의 크기를 조절해도 패널은 그대로일 수 있습니다.

따라서 제자리에 그대로 있는 경계만으로는 결론을 내릴 수 없습니다. 브라우저가 줄바꿈 문자를 보존하는 중일 수도 있고, 구조적 경계를 만났을 수도 있으며, 사용 가능한 너비가 변하지 않은 패널 안에서 줄바꿈이 일어날 수도 있습니다. 창 크기 조절을 증거로 간주하지 말고 텍스트 표현을 기준으로 결과를 확인하세요.

CSS는 저장된 줄바꿈이 표시되는지도 결정합니다. MDN은 다음과 같은 일반적인 값을 설명합니다. white-space CSS 속성

CSS 값 원본 줄바꿈 처리 자동 줄바꿈
normal 다른 공백과 함께 축약됨 허용
pre 보존됨 사용 안 함
pre-wrap 보존됨 허용
pre-line 보존됨. 공백과 탭은 축약됨 허용

따라서 pre-wrap은 두 종류의 경계를 함께 표시할 수 있지만, normal는 원본 줄바꿈을 감출 수 있습니다. nowrap를 사용해 자동 줄 바꿈을 끄는 것만으로는 원본 보존 여부를 확인하기에 부족합니다. 공백도 함께 축약하기 때문입니다. 직접 관리하는 단순한 텍스트 블록에서 자동 줄 바꿈 없이 공백을 보존해야 한다면 pre이 적절한 비교 대상입니다. white-space CSS 속성

복사한 텍스트로 원본 줄바꿈을 알 수 있나요?

복사한 텍스트는 유용하지만 별도의 표현입니다. MDN에 따르면 innerText는 요소를 선택해 복사했을 때 얻을 결과를 근사하는 렌더링된 텍스트입니다. 명시적인 줄바꿈을 만드는 br 요소와 같은 경우를 포함해 렌더링된 모양에 반응합니다. 따라서 붙여 넣은 샘플에 줄바꿈이 있다고 해서 원본 코드 문자열에 줄바꿈이 있었다고 단정할 수는 없습니다. HTMLElement: innerText 속성

간단한 정적 코드 컨테이너에서 textContent은 다른 질문에 답합니다. 이 속성은 노드와 그 하위 요소의 텍스트를 반환하며, 렌더링된 모양을 사용하지 않고 하위 텍스트를 이어 붙입니다. 따라서 해당 컨테이너에 원하는 코드가 실제로 들어 있다면 DOM 텍스트를 살펴보는 데 유용합니다. Node: textContent 속성

이 속성들은 서로 대체할 수 있는 복구 도구가 아닙니다. 구조적 줄바꿈이 반드시 textContent의 줄바꿈 문자인 것은 아닙니다. 반대로 원본 공백이 있어도 렌더링된 줄바꿈으로 나타나지 않을 수 있습니다. 페이지의 텍스트와 레이아웃이 서로 다르면 결과를 정확하게 표현하세요. “DOM 텍스트에 줄바꿈 문자가 있습니다”, “레이아웃이 줄바꿈을 강제합니다”, “복사한 버전에 줄바꿈이 있습니다”처럼 말할 수 있습니다. 살펴본 표현으로 확인되는 범위를 넘어 주장하지 마세요.

브라우저 기반 코드 편집기에서는 무엇이 달라지나요?

브라우저 편집기는 문서를 표시 요소와 별도로 관리할 수 있습니다. 예를 들어 CodeMirror의 공식 소스 문서는 Text 모델을 통해 문서의 줄을 설명합니다. lines은 논리적 줄 수를 세고, line(n)은 번호로 지정한 줄을 가져옵니다. 줄의 to 위치는 뒤따르는 줄바꿈 문자 앞이거나 문서 끝입니다. CodeMirror 문서 텍스트 API 문서

또한 CodeMirror는 주변 여백과 함께 현재 보이는 코드만 DOM에 그린다고 설명합니다. lineWrapping 속성은 뷰에서의 줄바꿈을 나타냅니다. 이런 구조에서는 렌더링된 행을 세거나 보이는 편집기 DOM을 추출하는 것만으로 전체 문서의 줄을 확인할 수 없습니다. CodeMirror 편집기 뷰 API 문서

일반적인 데스크톱 확인에서는 가능하다면 호스트 애플리케이션에서 문서화된 파일 다운로드, 내보내기 또는 복사 명령을 사용한 다음, 자동 줄 바꿈을 끈 상태에서 결과를 살펴보세요. CodeMirror 통합을 직접 관리한다면 해당 문서 모델을 사용해 논리적 줄을 확인하세요. 라이브러리 API가 있다고 해서 모든 애플리케이션에 이에 상응하는 사용자용 제어 기능이 제공된다는 뜻은 아닙니다.

양식이 입력하지 않은 줄바꿈을 추가할 수 있나요?

그렇습니다. WHATWG HTML 표준은 텍스트 영역의 현재 API 값과 제출 표현을 구분합니다. wrap="soft"을 사용하면 제출 과정에서 줄바꿈이 추가되지 않은 채 텍스트가 시각적으로 줄바꿈될 수 있습니다. wrap="hard"을 사용하면 제출 표현에 줄바꿈이 추가될 수 있습니다. 이 설정에는 cols을 지정해야 합니다. API 값은 줄 끝을 LF로 정규화합니다. HTML 표준: textarea 요소

이는 양식 기반 작업 흐름 전후의 텍스트를 비교할 때 중요합니다. 제출된 결과나 내보낸 결과에만 경계가 나타난다면 해당 처리 단계에서 생겼을 수 있습니다. 작업에 맞는 표현을 살펴보세요. 입력한 경계를 확인하려면 현재 편집기 텍스트를, 실제로 내보낸 내용을 확인하려면 결과 파일을 살펴보면 됩니다.

브라우저와 텍스트 모양 처리의 경계를 어떻게 보존하나요?

시각적 줄바꿈은 브라우저나 편집기에 맡기세요. W3C 사양에 따르면 overflow-wrap: anywhere는 자소 클러스터를 한데 유지하고 새로 삽입된 줄바꿈에서도 텍스트 모양 처리를 보존합니다. 고정된 문자 수마다 줄바꿈 문자를 삽입해 줄을 다시 만드는 방식은 이런 레이아웃 규칙을 재현하지 못합니다. CSS Text Module Level 3

재사용할 코드 샘플이 있다면 가능한 한 원본에 가까운 자료를 먼저 구한 뒤, 자동 줄 바꿈을 켠 보기와 끈 보기를 비교하고 편집할 의도가 없다면 저장된 줄 경계를 유지하세요. 렌더링된 페이지만 구할 수 있다면 해당 표현에 대해 확인할 수 있는 내용을 기록하고 불확실한 경계는 미확인 상태로 두세요. 이렇게 하면 표시 설정을 바꾸다가 실수로 텍스트까지 바꾸는 일 없이 반복 가능한 확인이 가능합니다.

출처