🚀 ProUtil Markdown Previewer
GitHub Flavored Markdown을 지원하는 실시간 프리뷰어입니다.
특징 (Features)
- 실시간 변환 ⚡️
- 표 (Tables) 지원
- 자동 링크 생성
코드 예시
const greeting = "Hello, ProUtil!";
console.log(greeting);
체크리스트
- GFM 적용
- 구문 강조 (Syntax Highlighting) - 나중에 추가 예정
- 내보내기 기능
Markdown 프리뷰어
Markdown 문서를 작성하고 실시간으로 HTML 렌더링 결과를 확인하세요.
작성 (Markdown)
미리보기 (Preview)
마크다운(Markdown)이란 무엇이며 왜 프리뷰어가 필수인가요?
마크다운은 2004년 존 그루버와 애런 스워츠가 만든 경량 마크업 언어로, 읽기 쉽고 쓰기 쉬운 일반 텍스트 형식을 사용하여 구조적으로 유효한 HTML로 변환하는 것을 목적으로 합니다. 마크다운은 등장 이후 GitHub의 README 파일, 기술 문서 작성, 그리고 Medium이나 Ghost 같은 현대적인 블로깅 플랫폼의 표준으로 자리 잡았습니다.
마크다운 프리뷰어가 중요한 이유는 문법 자체는 직관적이지만 표(Table), 중첩 리스트, 그리고 여러 줄의 코드 블록과 같은 복잡한 요소들은 텍스트 형태만으로 최종 결과물을 가늠하기 어렵기 때문입니다. ProUtil의 마크다운 프리뷰어는 실시간으로 텍스트를 구조화된 HTML로 렌더링하는 좌우 분할 편집 환경을 제공합니다. 이를 통해 "수정-저장-새로고침"의 번거로운 과정 없이 콘텐츠 작성에만 집중할 수 있습니다. 기술 블로그 포스팅 초안을 작성하든, 프로젝트용 README.md를 만들든, 우리 도구는 최종 결과물이 모든 GitHub 호환 플랫폼에서 의도한 대로 완벽하게 보이도록 보장합니다.
마크다운을 활용한 콘텐츠 작성 및 서식 지정 방법
1
문서 작성 시작: "작성" 패널에 내용을 입력합니다. 가장 중요한 제목은 해시 기호 하나(#)를 사용하여 생성합니다.
2
계층 구조 유지: 여러 개의 해시 기호(##, ###)를 사용하여 부제목을 만들고 문서의 섹션을 논리적으로 구성하세요.
3
텍스트 강조 적용: 별표 하나(*)로 *기울임*을, 별표 두 개(**)로 **굵게** 표시하여 핵심 키워드를 강조합니다.
4
다이내믹 리스트 생성: 대시(-) 또는 숫자(1.)를 사용하여 순서가 있거나 없는 리스트를 간편하게 만듭니다.
5
코드 블록 삽입: 인라인 코드는 백틱(`)을 사용하고, 여러 줄의 코드는 백틱 세 개(```)를 사용하여 가독성을 높입니다.
6
링크 및 이미지 삽입: [링크명](URL) 형식을 사용하여 외부 리소스를 연결하거나 이미지를 포함시키세요.
7
데이터 표 구성: 파이프(|)와 대시(-) 문자를 사용하여 복잡한 정보를 깔끔하게 정리된 표 형식으로 표현합니다.
8
GFM 고급 기능 활용: 체크박스 리스트(- [x])나 취소선(~~텍스트~~)과 같은 GitHub 확장 문법을 적용해 보세요.
9
실시간 결과 검증: "미리보기" 패널을 동시에 확인하며 서식 지정이 의도한 대로 렌더링되는지 즉시 확인합니다.
10
내보내기 및 공유: 작성된 원본 마크다운 텍스트를 복사하여 프로젝트 문서나 개발 블로그에 바로 적용하세요.
전문가 수준의 마크다운 편집 기능
진정한 실시간 렌더링: 새로고침 없이 타이핑과 동시에 마크다운 문법을 HTML로 즉시 변환합니다.
GitHub Flavored Markdown (GFM) 완벽 지원: 작업 목록, 취소선, 고급 표 형식을 모두 인식합니다.
분할 화면 워크스페이스: 에디터와 프리뷰가 나란히 배치되어 최적화된 집필 환경을 제공합니다.
로컬 스토리지 자동 저장: 브라우저에 작업 내용이 임시 저장되어 탭을 닫아도 데이터 손실을 방지합니다.
경량 및 고성능 렌더링 코어: 매우 긴 문서도 지연 시간(Latency) 없이 매끄럽게 처리하는 최적화 엔진을 탑재했습니다.
Violet 테마의 미려한 가독성: 프리미엄 디자인 시스템을 통해 미리보기 결과물이 실제 웹사이트처럼 보입니다.
원클릭 에디터 초기화: "지우기" 버튼으로 작업 공간을 즉시 비우고 새로운 문서 작성을 시작할 수 있습니다.
반응형 모바일 편집 지원: 태블릿이나 모바일 기기에서도 문서 확인 및 수정이 가능한 유연한 레이아웃입니다.
정교한 HTML 위생 처리: 생성된 HTML 결과값이 표준을 준수하며 복사-붙여넣기에 최적화되어 있습니다.
브라우저 단독 실행: 별도의 플러그인이나 프로그램 설치 없이 모든 현대적 브라우저에서 바로 사용 가능합니다.
개인정보 보호 아키텍처: 입력한 모든 텍스트는 서버로 전송되지 않고 로컬 브라우저 내에서만 처리됩니다.
구문 강조(Syntax Highlighting) 기초 설계: 향후 업데이트를 통해 코드 블록의 언어별 색상 표시 기능을 지원할 예정입니다.
마크다운 서식 예시
Markdown Input
# 제목 - 항목 1 - 항목 2 **굵은 텍스트**
HTML Preview
<h1>제목</h1><ul><li>항목 1</li><li>항목 2</li></ul><p><strong>굵은 텍스트</strong></p>
마크다운 작성 시 권장 사항 및 자주 하는 실수
빈 줄 누락 주의
헤더와 리스트, 혹은 문단 사이에는 빈 줄을 한 줄 넣어주는 것이 표준 렌더링을 위해 권장됩니다.
일관되지 않은 목록 번호
순서 있는 목록에서 번호를 자유롭게 써도 되지만, 가독성을 위해 순차적인 숫자를 쓰는 것이 좋습니다.
코드 펜싱 마감 오류
백틱 세 개(```)를 사용할 때는 반드시 시작과 끝을 맞춰야 하며, 각각 별도의 줄에 배치해야 합니다.
특수 문자 URL 인코딩
링크 주소 내에 특수 문자나 공백이 포함될 경우 링크가 깨질 수 있으므로 확인이 필요합니다.
헤더 기호 뒤 공백
"#제목"처럼 공백이 없으면 일부 엔진은 이를 제목으로 인식하지 않습니다. 반드시 "# 제목"처럼 한 칸 띄우세요.
복잡한 표 구조 정렬
표를 만들 때 구분선 하이픈(-)과 파이프(|) 기호가 어긋나면 표 형식이 깨질 수 있으니 주의해야 합니다.
마스터 가이드: 마크다운 문서화 기술 FAQ
Q.GitHub Flavored Markdown (GFM)이 무엇인가요?
GitHub에서 사용하는 마크다운의 확장 버전으로, 표와 체크박스, 자동 링크 연결 등 개발자에게 필요한 강력한 기능을 추가한 것입니다.
Q.마크다운 안에 HTML 태그를 직접 써도 되나요?
네. 표준 마크다운 문법으로 표현하기 힘든 복잡한 레이아웃은 직접 HTML 태그를 섞어 써도 대부분 잘 작동합니다.
Q.강제로 줄을 바꾸려면 어떻게 하나요?
문장 끝에 공백을 두 칸 이상 넣거나, <br> 태그를 사용하면 문단을 나누지 않고 줄만 바꿀 수 있습니다.
Q.수학 공식 입력도 지원하나요?
현재는 표준 GFM 기능에 집중하고 있습니다. LaTeX나 MathJax 기반의 공식 입력 기능은 추후 업데이트 검토 대상입니다.
Q.문서 길이에 제한이 있나요?
이 도구는 매우 큰 파일도 처리할 수 있지만, 약 5만 단어를 초과하면 브라우저 사양에 따라 속도가 느려질 수 있습니다.
Q.목차(TOC)를 자동으로 만들 수 있나요?
마크다운 자체에는 자동 TOC 태그가 없습니다. 보통 수동으로 앵커 링크([제목](#내부-ID))를 만들어 구성합니다.
Q.결과물을 PDF로 저장할 수 있나요?
미리보기 화면에서 브라우저의 "인쇄" 기능을 활용해 "PDF로 저장"을 선택하면 깔끔하게 문서화할 수 있습니다.
Q.미리보기에서 이미지가 나오지 않아요.
이미지 주소가 유효한지 확인하세요. 로컬 PC에 있는 파일은 보안 정책상 브라우저가 미리보기에서 차단할 수 있습니다.
Q.CommonMark 표준이란 무엇인가요?
마크다운의 모호한 문법 규정을 명확히 하여 모든 플랫폼에서 동일하게 렌더링되도록 만든 표준 규격입니다.
Q.이모지를 사용할 수 있나요?
네! 표준 이모지 문법을 사용하거나 에디터에 직접 이모지를 붙여넣어 풍부한 문서를 만들 수 있습니다.
Q.원격으로 공동 편집이 가능한가요?
이 도구는 로컬 전용입니다. 협업이 필요하다면 작성한 마크다운을 복사하여 GitHub 같은 관리 시스템에 공유하세요.
Q.작성한 데이터는 안전한가요?
네. ProUtil은 100% 클라이언트 측 연산 방식을 따릅니다. 사용자의 문서는 절대 서버로 전송되거나 저장되지 않습니다.
Q.하드 브레이크와 소프트 브레이크의 차이는?
하드 브레이크는 눈에 보이는 줄바꿈을 만들고, 소프트 브레이크는 마크다운 코드상에선 줄을 바꿨지만 실제 결과물에선 이어지는 것을 말합니다.
Q.마크다운을 이메일에 쓸 수 있나요?
일부 메일 앱은 지원하지 않지만, 이 도구에서 렌더링된 결과물(HTML)을 복사해서 메일 본문에 붙여넣는 방식으로 활용 가능합니다.
Q.각주(Footnote) 기능도 있나요?
각주 문법([^1])은 GFM의 일부 구현체에 따라 지원 여부가 달라질 수 있으며, 우리 도구에서도 점진적으로 지원을 확대하고 있습니다.
Q.왜 워드(Word) 대신 마크다운을 쓰나요?
플랫폼에 무관하게 동일한 결과물을 내며, 버전 관리가 쉽고 키보드만으로 빠르게 모든 서식을 지정할 수 있기 때문입니다.