포맷 손실 없이 Plain Text를 HTML로

Source: Dev.to

번역을 진행하려면 실제 기사 본문(텍스트와 마크다운 형식)을 제공해 주시겠어요?
코드 블록과 URL은 그대로 유지하면서 내용만 한국어로 번역해 드리겠습니다.

개발자는 거의 모든 곳에서 일반 텍스트 형식으로 작업합니다. API 응답, 로그, 사용자 입력 필드 등이 그 예입니다.

일반 텍스트를 저장하고 처리하는 것은 간단하지만, 이 형식은 레이아웃이나 구조를 거의 담고 있지 않습니다. 따라서 일반 텍스트를 HTML 페이지에 표시해야 할 때 문제가 발생합니다.

• 사용자는 줄 바꿈이 그대로 유지되고 간격이 읽기 쉬울 것으로 기대하지만, 브라우저는 원시 텍스트를 매우 다르게 처리합니다.
• 예를 들어, 사용자가 Notepad와 같은 텍스트 편집기에서 몇 개의 단락과 로그 데이터를 복사해 브라우저 기반 편집기에 붙여넣는 경우, HTML은 줄 바꿈을 구조로 인식하지 않기 때문에 단락이 합쳐질 수 있고, 로그 데이터는 한 줄로 길게 이어질 수 있습니다.

이러한 문제는 여러분이 직접 경험했듯이 어디서든 발생합니다. 문서 도구나 프로젝트 관리 시스템과 같이 콘텐츠가 풍부한 플랫폼에서 특히 흔히 나타납니다. 따라서 사용자가 텍스트를 붙여넣은 후에도 일반 텍스트를 그대로 유지하도록 텍스트 편집기가 보장하는 것이 중요합니다.

이 문서에서는 변환 과정에서 서식이 깨지는 이유, HTML이 일반 텍스트를 어떻게 해석하는지, 그리고 구조를 보호하기 위해 사용할 수 있는 기술들을 살펴봅니다.

주요 내용

• 일반 텍스트 형식은 단순하고 보편적이지만 구조가 없어 HTML 변환이 어려울 수 있습니다.
• 브라우저는 기본적으로 공백을 축소하기 때문에 일반 텍스트의 간격과 정렬이 깨집니다.
• HTML에서는 <pre>, <br>, <code>와 같은 구조적 요소가 읽기 쉬운 서식을 유지하는 데 필요합니다.
• 수동 파싱을 하면 일반 텍스트가 HTML로 변환되는 방식을 완전히 제어할 수 있지만, 개발 노력이 더 많이 필요합니다.
• WYSIWYG 편집기는 붙여넣기 중 구조를 감지하여 대부분의 기본 변환 작업을 자동화함으로써 수작업을 줄여줍니다.

Source: …

평문 형식 이해

평문은 콘텐츠를 저장하는 간단하고 투명한 방법을 제공합니다. 문자만 포함하고 글꼴, 스타일링 또는 레이아웃에 대한 메타데이터를 포함하지 않습니다. 이러한 단순성은 개발자와 최종 사용자가 다양한 도구로 처리하기 쉽게 하지만, HTML 변환 과정에서 문제를 일으키기도 합니다.

평문 형식이 표현할 수 있는 것(과 할 수 없는 것)

평문 형식은 문자, 숫자, 기호, 공백, 탭 및 줄 바꿈을 저장합니다. 이러한 문자들은 평문이 스타일이나 레이아웃을 지원하지 않기 때문에 작성된 그대로 표시됩니다. 제목이나 정렬에 대한 규칙이 없기 때문에, 평문 파일에는 저자가 입력한 문자만 포함됩니다.

• 인코딩 – 평문은 ASCII 또는 Unicode 중 하나를 사용할 수 있습니다.

  • ASCII는 기본 영문자를 포함합니다.
  • Unicode는 다양한 문자 체계, 이모지 및 기호를 지원합니다. 브라우저가 각 코드 포인트를 올바르게 해석해야 하므로 변환 시 Unicode가 중요합니다.

• 공백 – 평문에서 공백은 문자 그대로입니다. 예를 들어 파일에 네 개의 공백이 보이면 실제로 네 개의 공백 문자가 들어 있습니다. 개발자가 공백 규칙을 강제하지 않으면 HTML은 이러한 문자를 보존하지 않습니다.

Note: ASCII(미국 표준 코드 for 정보 교환)는 영어 알파벳, 숫자, 구두점 및 제어 코드(탭, 새줄 등)에 고유 번호(0–127)를 할당합니다. 예를 들어 ‘A’는 65, ‘a’는 97입니다.
Note: Unicode는 ASCII를 기반으로 하여 모든 문자(이모지와 전 세계 스크립트 포함)에 고유 번호를 부여합니다. 백만 개가 넘는 코드 포인트를 수용할 수 있으며 일반적으로 UTF‑8로 인코딩됩니다.

HTML 변환 시 서식이 깨지는 이유

평문 형식을 보존하는 것은 HTML의 책임이 아닙니다(나중에 보게 될 몇 가지 해결책이 있습니다). HTML의 렌더링 규칙은 시각적 충실도보다 의미론적 구조를 우선시한 초기 웹 표준에서 비롯되었습니다. 따라서 브라우저는 공백, 줄 바꿈 및 특수 문자를 HTML 레이아웃 모델에 따라 해석해야 합니다.

그 결과:

1. 공백 축소 – 브라우저는 연속된 공백을 하나의 가시 공백으로 축소하고, 탭은 몇 개의 공백으로 변환하거나 축소합니다. 이는 로그나 구조화된 텍스트의 정렬을 깨뜨립니다.
2. 줄 바꿈 처리 – \n 같은 문자는 새 단락을 만들지 않습니다. <br> 태그로 변환하거나 블록 요소로 감싸야 합니다.
3. 특수 문자 이스케이프 – <, >, &, | 같은 문자는 이스케이프하거나 적절한 태그 안에 넣어야 합니다.

HTML 렌더링 엔진이 설계상 공백을 축소하기 때문에, 이를 보존하려면 명시적인 규칙이 필요합니다:

• <pre> 태그 또는 CSS white-space: pre;를 사용해 문자 그대로의 공백을 유지합니다.
• 입력의 어느 부분을 정확히 정렬된 상태로 유지할지 결정합니다. 모든 것을 보존하면 원치 않는 공백, 숨겨진 문자 또는 일관성 없는 들여쓰기가 발생할 수 있습니다.

HTML이 평문을 해석하는 방식

HTML은 공백, 흐름 및 구조를 제어하는 렌더링 규칙을 따릅니다:

• 연속된 공백은 특수 요소(<pre>) 안에 있거나 white-space: pre 스타일이 적용되지 않으면 무시됩니다.
• 블록 레벨 요소(예: <p>, <div>)는 텍스트가 어떻게 표시되는지를 결정합니다. 이러한 요소가 없으면 브라우저는 평문 입력을 하나의 연속 블록으로 처리합니다.
• 줄 바꿈은 <br> 태그를 사용하거나 <pre>로 보존할 때만 나타납니다.
• 탭은 브라우저마다 동작이 일관되지 않으며, 일부는 하나의 공백으로, 일부는 여러 공백으로 처리합니다.

Techniques to Preserve Plain‑Text Structure

Manual Parsing (Full Control)

function plainTextToHtml(text) {
  // Escape HTML special characters
  const escaped = text
    .replace(/&/g, '&')
    .replace(/</g, '>');

  // Convert line breaks to <br>
  const withBreaks = escaped.replace(/\r?\n/g, '<br>');

  // Optionally wrap in <pre> for exact spacing
  return `${withBreaks}`;
}

• Pros: 각 문자를 어떻게 처리할지 완전한 제어가 가능합니다.
• Cons: 개발 노력이 더 많이 들고, (예: 코드 블록 vs. 일반 텍스트)와 같은 엣지 케이스를 직접 처리해야 합니다.

Using <pre> for Whole Blocks

<pre>
Your plain‑text content goes here.
    Indentation and spacing are preserved.
</pre>

• Pros: 간단하며, 공백을 자동으로 보존합니다.
• Cons: 고정폭 글꼴이 적용될 수 있고, 모든 공백을 보존하게 되는데, 이는 항상 원하는 것이 아닐 수 있습니다.

CSS white-space Property

<div class="preserve">
  Your plain‑text content with   multiple spaces.
</div>

<style>
.preserve {
  white-space: pre-wrap; /* preserves spaces & wraps long lines */
}
</style>

• Pros: 일반 흐름을 유지하면서 공백과 줄바꿈을 보존합니다.
• Cons: 여전히 HTML 특수 문자를 이스케이프해야 합니다.

Leveraging WYSIWYG Editors

Many modern editors (e.g., TinyMCE, CKEditor, Quill) automatically:

• 줄바꿈을 감지하고 <br> 또는 <pre> 태그를 삽입합니다.
• 붙여넣은 코드 블록을 <code> 구조로 변환합니다.
• 위험한 문자를 이스케이프합니다.

Implementation tip: 많은 편집기에서 제공하는 “plain text로 붙여넣기” 또는 “포맷 유지” 플러그인을 활성화하세요.

올바른 접근 방식 선택

Summary

• 일반 텍스트는 보편적이지만 HTML에 필요한 구조적 단서를 제공하지 못합니다.
• 브라우저는 공백을 축소하고 줄바꿈 문자를 무시합니다. 텍스트를 어떻게 렌더링할지 명시적으로 지정하지 않으면 그렇습니다.
• <pre>, CSS white-space, 수동 파싱, 혹은 WYSIWYG 편집기를 사용하여 서식을 유지하세요.
• 로그나 코드처럼 정확한 일치를 필요로 하든, 기사나 문서처럼 의미론적이고 읽기 쉬운 HTML이 필요하든, 제품에 맞는 방식을 선택하십시오.

플레인 텍스트의 한계와 HTML의 기대치를 모두 이해하면 사용자가 원래 의도한 서식을 신뢰성 있게 보존하고, 브라우저 전반에 걸쳐 일관되고 읽기 쉬운 경험을 제공할 수 있습니다.

일반 개발자용 평문 → HTML 변환 기법

평문 텍스트를 HTML로 변환하는 신뢰할 수 있는 방법은 많이 있습니다. 모든 상황에 맞는 단일 방법은 없으므로, 콘텐츠 유형과 프로젝트 요구에 따라 선택하세요. 필요에 따라 여러 기법을 결합해 보다 계층적인 접근을 할 수도 있습니다.

사용자 정의 로직을 이용한 수동 변환

사용자 정의 로직은 평문을 문자 스트림으로 취급하고, 블록이 아닌 개별 문자 단위로 처리합니다. 일반적인 흐름은 다음과 같습니다.

1. 텍스트를 한 줄씩 읽는다.
2. 각 줄을 HTML에 어떻게 매핑할지 결정한다 (예: 빈 줄 → 단락 구분, 하이픈(-)으로 시작하는 줄 → 리스트 항목).

이 규칙들은 구조화된 프로세스를 따릅니다.

• 패턴 감지 – 제목, 리스트, 코드 블록 등을 식별한다.
• 의미 부여 – 각 패턴이 어떤 HTML 요소에 해당하는지 결정한다.
• HTML 래핑 – 적절한 태그를 출력한다.

팁: HTML로 변환할 때는 먼저 특수 문자를 이스케이프하세요. 파서는 사용자 텍스트와 실제 마크업을 혼동하지 않도록 <, >, & 를 HTML 엔티티로 바꾼 뒤 구조적 규칙을 적용합니다.

장점

• 사용자가 입력한 텍스트가 HTML로 변환되는 방식을 완전히 제어할 수 있다.
• 프로젝트 요구사항에 정확히 맞는 예측 가능한 출력물을 얻을 수 있다.

단점

• 전체 구조와 변환 로직을 코드로 직접 정의해야 한다.

내장 혹은 언어 수준 유틸리티 사용

많은 프로그래밍 언어가 가장 기본적인 변환 작업을 수행하는 헬퍼 함수를 제공합니다.

예시 – XSS 방지

$raw = "alert('XSS')";
$safe = htmlspecialchars($raw, ENT_QUOTES, 'UTF-8');
// $safe => "<script>alert('XSS')</script>"

제한점

• 유틸리티만으로는 고급 포맷팅(예: 연속된 공백, 탭, 사용자 정의 들여쓰기) 처리가 어렵다.
• 다중 공백 들여쓰기나 탭 정규화와 같은 경우 여전히 사용자 정의 로직이 필요할 수 있다.

<pre>와 CSS 기반 보존 사용

정확한 정렬이 중요한 경우—예: 로그, 스택 트레이스, 설정 파일—내용을 <pre> 태그로 감쌀 수 있습니다.

<pre>
    line 1
        line 2 (indented)
</pre>

• 브라우저가 모든 공백, 탭, 개행을 그대로 표시한다.
• CSS에 white-space: pre-wrap; 를 추가하면 좁은 레이아웃에서도 줄이 자동으로 감싸지면서 공백을 유지한다.

단점: <pre>는 시각적 포맷은 보존하지만 문서 구조(단락, 리스트, 제목 등)를 전달하지 않는다. 고정된 간격이 가독성에 중요한 경우에만 사용하세요.

평문 → 마크다운 → HTML 변환

평문은 종종 마크다운 형태와 비슷합니다(예: 리스트 항목에 대시 사용). 다음과 같이 진행할 수 있습니다.

1. 일반적인 패턴을 마크다운 토큰으로 매핑한다.
2. 그 결과를 마크다운 파서에 전달해 깔끔한 HTML을 생성한다.

장점

• 검증된 파서를 그대로 활용할 수 있다.
• 혼합된 입력도 잘 처리한다—파서는 해석할 수 없는 부분을 무시한다.

단점

• 마크다운과 전혀 닮지 않은 입력(예: 원시 로그 파일)에는 이점이 없다.
• 우연히 마크다운과 비슷한 기호가 포함되면 예상치 못한 포맷팅이 발생할 수 있다.

외부 라이브러리 사용

대부분의 생태계에는 평문을 구조화된 HTML로 변환해 주는 라이브러리가 존재합니다. 주요 기능은 다음과 같습니다.

• 단락, 들여쓰기, 리스트, 블록 감지를 위한 설정 가능한 규칙.
• 핵심 라이브러리를 수정하지 않고도 특수 패턴을 처리할 수 있는 훅이나 전처리기.
• 불규칙한 공백, 혼합 인코딩 등 엣지 케이스 처리.

예시

• JavaScript: turndown, marked (전처리와 함께)
• Python: mistune, markdown2
• Ruby: kramdown, redcarpet

WYSIWYG 에디터 활용

WYSIWYG HTML 에디터는 사용자가 콘텐츠를 붙여넣을 때 자동으로 평문 → HTML 변환을 수행할 수 있습니다. 최신 에디터는 다음을 지원합니다.

• 개행 및 구조 보존
• … (이후 내용은 원문을 그대로 이어갑니다)

자연스러운 단서.

• 목록 표시자, 들여쓰기 또는 반복되는 공백을 감지합니다.
• 일반 텍스트를 단락, <br> 태그, 비공백 문자 등으로 변환하는 붙여넣기 핸들러를 제공합니다.

참고: 여기를 클릭하면 일반 텍스트를 HTML로 변환하는 WYSIWYG 편집기 구현을 시작하는 방법을 확인할 수 있습니다.

결론

일반 텍스트를 HTML로 변환하려면 다음을 신중하게 처리해야 합니다:

• 공백 – 필요에 따라 공백, 탭 및 줄 바꿈을 보존합니다.
• 인코딩 – XSS를 방지하기 위해 문자가 올바르게 이스케이프되는지 확인합니다.
• 구조 – 일반 텍스트 패턴을 적절한 HTML 요소에 매핑합니다.

각 기술은 서로 다른 목표를 지원합니다: