BTSPACE WAGLE
    EN English

    텍스트·개발

    마크다운 실시간 뷰어

    입력하는 즉시 문서로 보여 주는 마크다운 미리보기

    왼쪽에 쓰면 오른쪽에 바로 문서로 보여 줘요. 폰에서도 탭으로 편하게 전환해요.

    도구 사용하기사용 방법 보기

    마크다운 입력

    미리보기

    입력한 내용은 이 브라우저 안에서만 처리되고 서버로 전송되거나 저장되지 않아요. 입력에 들어 있는 HTML은 실행되지 않고 글자로 표시돼요.

    마크다운 실시간 뷰어 사용법

    1. PC에서는 왼쪽 입력창에 마크다운을 적으면 오른쪽에 바로 문서가 나타나요. 폰에서는 위쪽 탭으로 "입력", "미리보기", "위아래로 보기"를 골라 보세요.
    2. 처음이라면 "샘플" 버튼을 눌러 제목, 목록, 표, 코드 블록 예시를 먼저 확인해 보세요. 문법을 따라 고쳐 가며 결과가 어떻게 바뀌는지 볼 수 있어요.
    3. 다 쓴 뒤에는 "HTML 복사"로 변환된 HTML을 가져가거나 "HTML 다운로드", "MD 다운로드"로 파일을 저장해요.
    4. 줄바꿈이 한 줄로 이어져 보이면 "줄바꿈 그대로 표시"를 켜 보세요. 글자 수와 단어 수는 오른쪽 아래에 표시돼요.

    변환이 이루어지는 방식

    입력창에 글자를 적을 때마다 입력 이벤트가 발생하고, 이 도구에 들어 있는 파서가 텍스트를 줄 단위로 읽어 HTML로 바꿔요. 먼저 코드 블록, 제목, 구분선, 표, 인용문, 목록 같은 블록을 찾고, 문단 안에서는 굵게, 기울임, 링크, 이미지, 인라인 코드 같은 인라인 문법을 처리해요. 결과는 미리보기 영역에 바로 표시되고 HTML 복사 버튼으로 같은 내용을 가져갈 수 있어요.

    외부 변환 라이브러리를 따로 불러오지 않고 이 페이지 안에서 직접 처리해요. 그래서 인터넷 연결이 느려도 빠르고 입력한 내용이 밖으로 나가지 않아요. 입력에 들어 있는 HTML 태그는 먼저 글자로 바꿔서 표시하기 때문에 스크립트가 실행되지 않고, 링크는 안전한 주소만 허용해요.

    자주 쓰는 마크다운 문법

    마크다운은 README 같은 개발 문서뿐 아니라 블로그 초안, 회의록, 할 일 목록, 스터디 노트처럼 가볍게 구조를 잡아야 하는 글에 잘 맞아요. 서식 버튼을 찾지 않고 키보드만으로 제목과 목록을 만들 수 있고, 파일이 일반 텍스트라서 어떤 기기에서 열어도 깨지지 않으며 버전 관리나 검색에도 유리해요. 그래서 초안은 마크다운으로 쓰고 필요한 곳에 HTML이나 문서로 옮기는 방식이 많이 쓰입니다.

    제목은 줄 앞에 #을 1~6개 붙이고, 굵은 글씨는 **글자**, 기울임은 *글자*, 취소선은 ~~글자~~로 감싸요. 목록은 줄 앞에 -나 *를 쓰면 점 목록, 1. 2. 3.을 쓰면 번호 목록이 돼요. 목록 항목 앞을 두 칸이나 네 칸 들여쓰면 중첩 목록이 되고, - [ ]와 - [x]는 체크리스트로 표시돼요.

    링크는 [표시 글자](주소), 이미지는 ![설명](주소) 형식이에요. 코드는 백틱 하나로 감싸면 문장 속 인라인 코드가 되고, 백틱 세 개로 위아래를 감싸면 코드 블록이 돼요. 코드 블록 첫 줄에 js, python, json, css, html 같은 언어 이름을 붙이면 키워드, 문자열, 숫자, 주석이 색으로 구분돼요. 표는 | 로 칸을 나누고 두 번째 줄에 ---를 넣으면 되고, :---, :---:, ---: 로 정렬을 바꿀 수 있어요.

    마크다운은 서비스마다 조금씩 규칙이 달라요. 널리 쓰이는 표준인 CommonMark에 표와 체크리스트 같은 확장을 더한 GitHub 방식이 많이 쓰이는데, 이 도구도 비슷한 모양으로 보여 줘요. 다만 줄바꿈 처리나 중첩 목록의 세부 동작은 다를 수 있으니 중요한 문서는 실제로 올릴 서비스의 미리보기로 한 번 더 확인하세요.

    잘 쓰는 요령

    • 제목 앞에는 반드시 # 뒤에 공백 한 칸을 넣어요. #제목처럼 붙여 쓰면 제목으로 인식되지 않아요.
    • 문단을 나누려면 빈 줄을 하나 넣어요. 한 줄만 바꾸면 같은 문단으로 이어져요.
    • 표의 두 번째 줄(---)이 없으면 표가 아닌 일반 글자로 보여요.
    • 긴 글은 중간중간 MD 다운로드로 저장해 두세요. 페이지를 닫으면 내용이 사라져요.
    • 블로그나 공지에 붙여 넣을 때는 HTML 복사 결과를 쓰기 전에 그 서비스에서 허용하는 태그인지 확인하세요.

    자주 묻는 질문

    마크다운이 뭔가요?

    마크다운은 #, **, - 같은 간단한 기호로 제목, 굵은 글씨, 목록을 표시하는 글쓰기 방식이에요. 일반 텍스트로 쓰지만 HTML 문서로 바꿀 수 있어서 개발 문서, 블로그, 메모 앱에서 널리 쓰여요.

    어떤 문법을 지원하나요?

    제목, 굵게, 기울임, 취소선, 인라인 코드, 코드 블록, 인용문, 순서 있는 목록과 없는 목록, 체크리스트, 표, 링크, 이미지, 구분선을 지원해요. 각주나 수식, 이모지 단축 코드 같은 확장 문법은 지원하지 않아요.

    입력한 HTML 태그나 스크립트는 어떻게 되나요?

    입력에 들어 있는 HTML 태그는 실행되지 않고 글자 그대로 보여 줘요. 링크에서는 http, https, mailto, tel 주소만 허용하고 javascript: 같은 위험한 주소는 막아요.

    GitHub 같은 다른 서비스와 결과가 다를 수 있나요?

    네. 마크다운은 서비스마다 세부 규칙이 조금씩 달라서 줄바꿈 처리, 중첩 목록, 특수한 확장 문법이 다르게 보일 수 있어요. 이 도구는 자주 쓰는 문법만 보여 주는 가벼운 변환기라고 생각해 주세요.

    작성한 글이 저장되나요?

    아니요. 서버에도 브라우저에도 저장하지 않아요. 페이지를 닫으면 사라지니 필요한 글은 MD 다운로드로 파일을 따로 받아 두세요.

    주의사항

    이 도구는 자주 쓰는 마크다운 문법을 보여 주는 가벼운 변환기이며 모든 서비스의 렌더링과 완전히 같지는 않아요. 입력한 내용은 서버로 전송되거나 저장되지 않고 브라우저 안에서만 처리돼요. BTSPACE WAGLE은 비공식 정보 사이트이고, 변환된 HTML을 다른 곳에 사용할 때는 해당 서비스의 규칙을 확인해 주세요. 관련 도구로 마크다운 카드뉴스 이미지 변환기도 있어요.