Softonic

BBCode → HTML 변환기

단계 1 / 2
다음

BBCode는 포럼 시대의 가벼운 마크업이었습니다. [b]bold[/b], [url], [quote], [code] 같은 형식입니다. phpBB, vBulletin, XenForo, SMF 게시판이 모두 이를 사용했고, 그 플랫폼들에는 아직도 수많은 게시물이 남아 있습니다. 이 변환기는 BBCode를 분석해, 최신 CMS나 정적 사이트 또는 포럼 태그를 이해하지 못하는 Markdown-to-HTML 파이프라인에 붙여 넣을 수 있는 깨끗하고 유효한 HTML을 출력합니다.

BBCode를 변환하는 방법

  1. 1

    BBCode 붙여넣기

    게시물 전체나 조각을 붙여 넣으세요. 중첩 태그도 처리됩니다.

  2. 2

    파서가 여는 태그와 닫는 태그를 토큰화

    일치하는 `[tag]...[/tag]` 쌍은 대응하는 HTML 요소를 만듭니다.

  3. 3

    태그 속성 매핑

    `[color=red]`, `[size=18]`, `[url=https://...]` 같은 항목은 인라인 스타일 또는 `href` 속성으로 바뀝니다.

  4. 4

    HTML 복사

    블로그 글, 문서 페이지, 포럼 마이그레이션에 바로 사용할 수 있습니다.

지원 태그

BBCode HTML 출력
[b]text[/b] <strong>text</strong>
[i]text[/i] <em>text</em>
[u]text[/u] <u>text</u>
[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>
[color=red]t[/color] <span style="color:red">t</span>
[size=18]t[/size] <span style="font-size:18px">t</span>

보안 메모

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보다 훨씬 표현력이 넓어서 더 많은 손실이 생깁니다.

알 수 없는 태그는 그대로의 문자열로 통과합니다. 이 변환기가 인식하는 태그는 위 표에 나열된 태그뿐이기 때문입니다.

중첩은 태그가 서로 다를 때 작동합니다. 예를 들어 [quote] 안의 [b]처럼 말이죠. 같은 태그가 자신 안에 중첩된 경우(인용 안의 인용 등)는 첫 번째 닫는 태그에서 닫히고 나머지는 텍스트로 남으므로, 변환 전에 그런 게시물을 평평하게 만들어 주세요.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

이 도구는 다른 언어로도 제공됩니다