BBCode → HTML 변환기
BBCode는 포럼 시대의 가벼운 마크업이었습니다. [b]bold[/b], [url], [quote], [code] 같은 형식입니다. phpBB, vBulletin, XenForo, SMF 게시판이 모두 이를 사용했고, 그 플랫폼들에는 아직도 수많은 게시물이 남아 있습니다. 이 변환기는 BBCode를 분석해, 최신 CMS나 정적 사이트 또는 포럼 태그를 이해하지 못하는 Markdown-to-HTML 파이프라인에 붙여 넣을 수 있는 깨끗하고 유효한 HTML을 출력합니다.
BBCode를 변환하는 방법
-
1
BBCode 붙여넣기
게시물 전체나 조각을 붙여 넣으세요. 중첩 태그도 처리됩니다.
-
2
파서가 여는 태그와 닫는 태그를 토큰화
일치하는 `[tag]...[/tag]` 쌍은 대응하는 HTML 요소를 만듭니다.
-
3
태그 속성 매핑
`[color=red]`, `[size=18]`, `[url=https://...]` 같은 항목은 인라인 스타일 또는 `href` 속성으로 바뀝니다.
-
4
HTML 복사
블로그 글, 문서 페이지, 포럼 마이그레이션에 바로 사용할 수 있습니다.
지원 태그
| BBCode | HTML 출력 |
|---|---|
[b]text[/b] |
<strong>text</strong> |
[i]text[/i] |
<em>text</em> |
[u]text[/u] |
<u>text</u> or <ins> |
[s]text[/s] |
<del>text</del> |
[url]link[/url] |
<a href="link">link</a> |
[url=link]text[/url] |
<a href="link">text</a> |
[img]link[/img] |
<img src="link"> |
[quote]q[/quote] |
<blockquote>q</blockquote> |
[code]c[/code] |
<pre><code>c</code></pre> |
[list][*]a[*]b[/list] |
<ul><li>a</li><li>b</li></ul> |
[list=1][*]a[/list] |
<ol><li>a</li></ol> |
[color=red]t[/color] |
<span style="color:red">t</span> |
[size=18]t[/size] |
<span style="font-size:18px">t</span> |
[table]...[/table] |
<table>...</table> |
보안 메모
BBCode는 설계상 안전한 편이지만 HTML은 그렇지 않습니다. 사용자가 제출한 BBCode를 HTML로 변환하는 순간은 2005년 무렵 포럼들이 XSS를 들여오던 전형적인 지점입니다. 변환 결과를 게시한다면:
- BBCode 태그 안의 원본 텍스트를 이스케이프하세요.
- 변환기가 내보내는 태그만 허용 목록에 두세요. 알 수 없는 태그를 원본 HTML로 그대로 전달하지 마세요.
[url]과[img]의 URL을 검증해javascript:및data:스킴을 차단하세요.
이 도구는 변환 중 스크립트처럼 동작할 수 있는 URL을 제거하거나 무력화합니다.
포럼 전체 마이그레이션
수천 개의 게시물을 옮길 때는 변환기를 파이프라인으로 실행하세요: 게시물을 BBCode로 내보내기 → 이 변환기를 통과 → HTML 가져오기. 비정상적인 중첩이나 표준 태그 세트에 없는 사용자 지정 이모지 코드가 들어간 게시물 수십 개를 무작위로 점검하세요.
BBCode가 깔끔하게 매핑되지 않는 것
- 사용자 지정 포럼 이모티콘 (
:D및:)) — 그대로 두고 CSS로 렌더링하거나, 별도로 전처리하세요. - 특정 플러그인 전용 태그 (
[spoiler],[youtube]등) — 사용자 지정 태그 패널에 있으면 처리하고, 아니면 그대로의 문자열로 내보냅니다. - 병합되거나 닫히지 않은 태그 — 파서는 스스로 닫으려 시도하지만, 입력이 극도로 잘못된 경우 서식이 손실될 수 있습니다.
자주 묻는 질문
네. Steam 커뮤니티 게시물, vBulletin 및 XenForo 게시판, 일부 wiki, 오래된 phpBB 설치 환경 다수에서 쓰입니다. 몇몇 게임 서버 관리 패널의 내부 마크업으로도 남아 있습니다.
이 도구는 아닙니다. HTML → BBCode 변환기를 사용하세요. 되돌리는 변환은 HTML이 BBCode보다 훨씬 표현력이 넓어서 더 많은 손실이 생깁니다.
기본적으로 알 수 없는 태그는 그대로의 문자열로 통과합니다. 완전히 깨끗한 출력을 원하면 엄격(strict) 모드에서 전부 제거할 수 있습니다.
네. [quote], [list], [code]는 임의 깊이로 중첩될 수 있습니다. 파서는 태그 스택을 추적해 올바르게 닫습니다.
관련 도구
JSON 포매터
JSON을 붙여넣어 2칸 또는 4칸 들여쓰기로 읽기 좋게 만들고, compact 출력으로 압축하거나 결과를 복사하기 전에 구문을 빠르게 확인하세요.
HEX 색상 선택기
색상을 눈으로 선택하고 HEX, RGB, HSL, HSV, CMYK 값과 흰색·검정 대비를 바로 확인하세요.
색상 팔레트 생성기
기준 HEX 색상에서 단색, 유사색, 보색, 삼색 또는 사색 팔레트를 만들고 바로 복사할 수 있는 CSS 변수를 내보냅니다.
랜덤 색상 생성기
1개부터 50개까지 랜덤 HEX 색상을 만들고, 색상 견본을 확인한 뒤 CSS, 테스트 또는 팔레트 탐색에 쓸 코드를 복사하세요.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.