📝 마크다운 ↔ HTML 실시간 에디터

💡 개발자의 글쓰기 표준: Markdown(마크다운) 완벽 가이드

웹 문서를 작성하기 위해 HTML의 복잡한 태그(<h1>, <strong>, <ul>)를 일일이 타이핑하는 것은 매우 비효율적입니다. 마크다운(Markdown)은 읽고 쓰기 쉬운 평문(Plain Text) 형식을 사용하여, 아주 간단한 특수기호 몇 개만으로 서식을 지정하면 이를 구조화된 유효한 HTML로 렌더링해 주는 경량 마크업 언어입니다.

1. 마크다운이 IT 생태계를 지배한 이유

오늘날 거의 모든 IT 플랫폼은 글쓰기 표준으로 마크다운을 지원합니다. 그 이유는 압도적인 생산성과 호환성 때문입니다.

• Github & Gitlab: 오픈소스 프로젝트의 첫인상인 README.md 파일은 모두 마크다운으로 작성됩니다. GFM(Github Flavored Markdown)이라는 확장 문법을 통해 표(Table)와 체크박스 등도 쉽게 구현할 수 있습니다.
• SSG (정적 사이트 생성기): Jekyll, Hugo, Gatsby, Next.js 기반의 기술 블로그들은 개발자가 마크다운 파일(.md)만 디렉토리에 던져 넣으면 빌드 과정에서 이를 파싱하여 수백 개의 HTML 페이지로 자동 생성(Generate)해 줍니다.
• 협업 툴: Notion, Slack, Discord, Jira 등 대부분의 생산성 도구에서 텍스트 서식을 지정할 때 마크다운 단축키를 지원합니다.

2. 반드시 알아야 할 마크다운 핵심 문법 5가지

본 실시간 에디터에서 아래의 문법을 좌측에 입력하고, 우측에서 렌더링 결과를 바로 확인해 보세요.

• 제목 (Headings): # 기호의 개수(1~6개)로 <h1>부터 <h6>까지의 제목 크기를 결정합니다. (예: ## 제목 2)
• 강조 (Emphasis): 글자를 굵게 만들려면 별표 두 개 **굵게** 로 감싸고, 기울이려면 별표 하나 *기울이기* 로 감쌉니다.
• 목록 (Lists): 순서가 없는 목록은 - 또는 * 를 줄 맨 앞에 적고 띄어쓰기를 합니다. 순서가 있는 목록은 1., 2. 형식으로 숫자를 적습니다.
• 링크와 이미지: 링크는 [표시할 텍스트](https://url.com) 형식으로, 이미지는 맨 앞에 느낌표를 붙여 ![대체 텍스트](이미지주소.jpg) 형식으로 작성합니다.
• 코드 블록 (Code Block): 백틱 기호 3개(```)로 위아래를 감싸면 개발 코드를 예쁘게 삽입할 수 있습니다. 시작 백틱 뒤에 javascript나 python 등 언어 이름을 적으면 구문 강조(Syntax Highlighting)가 적용되기도 합니다.

본 도구는 강력한 파싱 엔진인 marked.js를 사용하여 100% 클라이언트 사이드(브라우저)에서 작동합니다. 작성 중인 글은 절대 외부 서버로 유출되지 않으므로 사내 보안 문서나 민감한 기술 블로그 초안을 작성할 때 가장 빠르고 안전한 웹 에디터로 활용하시기 바랍니다.