마크다운 편집기는 실시간 미리보기 기능을 제공하는 마크다운을 편집할 수 있는 텍스트 유틸리티 입니다. 마크다운 코드를 작성하면서 실시간으로 결과를 확인할 수 있습니다.
공백 미포함 글자 수: 0, 공백 포함 글자 수: 0, 단어 수: 0
이미지를 드래그하거나 클릭하여 선택하세요
마크다운 문법의 주요 요소 🔗
| 마크다운 문법 | 설명 |
|---|---|
| # 제목 | 제목, 블로그에서 제목 |
| ## 중제목 | 중제목, 블로그에서 본문 섹션 제목 |
| ### 소제목 | 소제목, 블로그에서 본문 하위 섹션 제목 |
| - 순서 없는 목록 아이템 1 | 순서 없는 목록 |
| 1. 순서 있는 목록 아이템 1 | 순서 있는 목록 |
| [링크텍스트](https://www.freeonlineutility.com/) | 링크 |
| **굵은 글씨** | 굵은 글씨 |
| *기울임 글씨* | 기울임 글씨 |
| `프로그램 코드` | 프로그램 코드 |
|  | 이미지 |
마크다운 편집기 사용 방법
마크다운 편집기 도구의 사용법은 매우 간단합니다:
1. 위의 텍스트 영역에 마크다운 코드를 작성합니다.
2. 마크다운 코드를 직접 작성하지 않고 마크다운 파일 혹은 다운로드 받은 마크다운 압축 파일을 드래그 드랍해도 됩니다. 마크다운 압축 파일을 드래그 드랍할 경우 마크다운 뿐아니라 이미지도 자동으로 입력 됩니다.
3. 이미지 혹은 이미지 포함 압축 파일을 드래그하거나 클릭하여 선택합니다.
4. 마크다운 미리보기 버튼을 누르면 미리보기 결과가 아래 미리보기 창에 보여 집니다.
5. 초기화 버튼을 클릭하면 기본 코드로 리셋됩니다.
📦 다운로드 파일 구성 안내
아래 다운로드 버튼을 클릭하면 하나의 ZIP 파일이 생성되며, 내부에는 다음과 같은 파일들이 포함됩니다.
1. markdown.md
현재 작성한 마크다운 에디터의 모든 텍스트가 저장됩니다.
2. 1.png, 2.png, 3.png ...
업로드한 원본 이미지들이 순서대로 1.png, 2.png 형태로 저장됩니다.
3. share.html
공유주소 링크가 들어 있습니다. 링크를 클릭하면 공유 URL로 이동 합니다.
4. images.zip (원본 이미지 ZIP)
업로드된 원본 이미지를 그대로 포함한 ZIP 파일입니다.
내부 폴더 구조:
images/
├── 1.png
├── 2.png
└── ...
5. cropped-images.zip (랜덤 크롭 + 밝기 적용 + JPEG 압축)
업로드한 각 이미지에 대해 다음 과정을 수행한 뒤 ZIP 파일로 저장됩니다:
- 이미지를 90%~100% 범위 내에서 랜덤 비율로 크롭
- 밝기를 0.8 ~ 1.2 범위 내에서 랜덤 적용
- 크롭된 이미지에 대해 JPEG 70% 품질로 압축
- 압축된 Blob을
기존 파일명.png으로 저장
최종 ZIP 파일 이름은 마크다운 내용의 첫 번째 # 제목을 기반으로 다음 형식으로 저장됩니다:
YYYYMMDDHHMMSS-제목.zip
만약 # 제목이 없는 경우에는 기본 형식으로 저장됩니다:
YYYYMMDDHHMMSS.zip
활용 사례
체험단, 기자단 원고쓰기: HTML 편집기 도구는 생성형 AI 애니웨어 (메타 생성형 AI, 챗지피티 포함) 로 자동으로 쓴 리뷰에 이미지를 쉽게 삽입 및 하나의 압축 파일로 묶어 다운로드 할수 있어 공동작업시 다른 팀원이나 배포자(블로거)에게 전달하기 쉽게 해줍니다.
유용한 팁
- SEO 측면에서 블로그 글쓰기에서 공백 미포함 최소 글자 수 1,500자 사용이 추천됩니다.
