목록 불릿 변환 공식과 마크다운 HTML 리스트 포맷 교차 가이드

직접 해보기 →

회의록을 작성하거나 마크다운 기반의 개발 문서를 다듬을 때, 혹은 HTML 메일 템플릿을 코딩할 때 목록(List)의 글머리 기호(Bullet) 양식을 변환해야 하는 상황이 자주 발생합니다.

일반 줄글로 나열된 텍스트 목록을 마크다운의 -, *로 치환하거나, HTML의 <ul>, <li> 구조로 감싸고, 특정 기호 모양으로 변환하는 등의 텍스트 처리는 수작업으로 하기에는 번거롭고 실수하기 쉽습니다. 본 글에서는 목록 불릿 변환 알고리즘의 동작 기전과 다양한 포맷별 마크업 특징을 해설합니다.

---

1. 목록 파싱 및 변환 알고리즘의 정규식 기전

줄 단위 텍스트 목록을 다른 불릿 포맷으로 안전하게 포맷팅하기 위한 텍스트 파싱의 기본 공식은 다음과 같습니다:

1. 줄 단위 개행 분할: 전체 문자열 데이터를 개행 문자(\n) 기준으로 쪼개어 배열로 정규화합니다.
2. 기존 글머리 기호 추출 및 트리밍: 각 줄의 선두에 매칭되는 마크다운 불릿 패턴(^- , ^* , ^+ ), 숫자 목록 패턴(^\d+\.\s), 또는 특수문자형 불릿(^• , ^- )을 정규표현식으로 찾아내 제거한 뒤 순수 텍스트 영역만 트리밍합니다: [ T_{\text{pure}} = \text{trim}(\text{line.replace}(/^{\s*([-*+•]|\d+.)\s+/, "")) ]
3. 새로운 불릿 마커 바인딩: 대상 포맷(마크다운, HTML, 일반 줄글, 커스텀 기호)의 명세에 따라 접두사와 접미사를 조합합니다:
   • 마크다운: - + $T_{\text{pure}}$
   • HTML: <li> + $T_{\text{pure}}$ + </li> (전체 배열은 맨 앞뒤를 <ul>과 </ul>로 감쌈)
   • 커스텀 불릿: 👉 등 사용자가 지정한 불릿 기호 + $T_{\text{pure}}$

---

2. 마크업 언어별 목록 구조 분석

각 포맷은 브라우저 렌더링과 문서 호환성 면에서 뚜렷한 특징을 가지고 있습니다.

• Markdown (마크다운): 가장 높은 가독성을 지닙니다. -, *, + 기호 뒤에 한 칸의 공백을 두고 시작하는 것만으로 리스트 계층을 인식하여 렌더러가 자동으로 불릿을 입힙니다.
• HTML (HyperText Markup Language): 정적 구조를 명시합니다. 글머리 기호가 없는 순서 없는 목록은 <ul>로 감싸고 개별 항목을 <li>로 작성합니다. 숫자로 정렬되는 순서 있는 목록은 <ol>을 사용하여 정수 순서를 부여합니다.
• CSS를 통한 불릿 스타일링: HTML의 기본 불릿은 다소 밋밋하여 CSS의 list-style-type 속성을 통해 사각형(square), 원형(circle), 또는 그림 이미지(list-style-image) 등으로 꾸며서 화면 디자인의 퀄리티를 대폭 향상시킵니다.

[!NOTE] 텍스트 정리에 드는 시간을 아끼기 위해 목록 불릿 변환기를 활용하면, 이메일 본문, 노션 문서, 블로그 마크업용 텍스트 리스트를 단 1초 만에 필요한 포맷으로 완벽히 마이그레이션할 수 있어 전반적인 문서 생산성 극대화에 기여합니다.

---

3. 구조화된 리스트 작성을 위한 팁

1. 계층 구조(Indentation) 유지: 하위 리스트를 추가할 때는 표준 2칸 또는 4칸의 공백 들여쓰기를 확실히 적용하여 목록 파서가 깨지지 않도록 형태를 유지해 줍니다.
2. 동일 목록 내 불릿 통일: 하나의 리스트 블록 안에서는 마크다운 기호 -와 *를 마구 섞어 쓰지 말고 일관성 있게 하나로 통일하여 협업 시 가독성을 높입니다.