🌙 Markdown Editor

macOS 네이티브 디자인의 실시간 마크다운 에디터

✨ 주요 기능

🎨 에디터 기능

• 실시간 미리보기: 입력과 동시에 마크다운 렌더링
• 스크롤 동기화: 좌우 창 스크롤 연동 (토글 가능)
• 고정폭 폰트: 나눔고딕코딩을 내장해 한글·영문 혼용 시에도 정렬이 흐트러지지 않음 (설치 불필요)
• Mermaid 다이어그램: ```mermaid 코드블록으로 플로우차트·시퀀스·클래스 다이어그램 등을 그림으로 렌더링 (mermaid.min.js 파일이 같은 폴더에 있을 때)
• 창 크기 조절: 마우스 드래그로 좌우 비율 조정
• 실시간 통계: 단어/문자/줄 수 카운트 및 커서 위치 표시

🎭 테마 & 디자인

• 다크/라이트 모드: 원클릭 테마 토글 (⌘+D)
• macOS 네이티브 디자인: Traffic Light 버튼, 네이티브 색상 팔레트
• 반응형 디자인: 모바일/태블릿 최적화
• 부드러운 애니메이션: 모든 상호작용에 자연스러운 전환 효과

📁 파일 관리

• 드래그 앤 드롭: 마크다운 파일을 창에 끌어다 놓기
• 파일 저장: 마크다운(.md) 형식으로 저장
• PDF 내보내기: 미리보기를 PDF로 저장 (⌘+P)
• 지원 형식: .md, .markdown, .txt
• 미저장 변경사항 확인: 저장하지 않은 내용이 있는 상태에서 새 파일 만들기·다른 파일 열기(드래그 앤 드롭 포함)·탭 닫기/새로고침 시 확인창 표시

⌨️ 키보드 단축키

기능	macOS	Windows/Linux
새 파일	⌘+N	Ctrl+N
파일 열기	⌘+O	Ctrl+O
파일 저장	⌘+S	Ctrl+S
PDF 저장	⌘+P	Ctrl+P
테마 토글	⌘+D	Ctrl+D
굵게	⌘+B	Ctrl+B
기울임	⌘+I	Ctrl+I

🚀 시작하기

📋 필요 조건

• 모던 웹브라우저 (Chrome 88+, Firefox 85+, Safari 14+, Edge 88+)
• JavaScript 활성화

💾 설치 방법

구성 파일: md-editor.html(에디터 본체)과 mermaid.min.js(다이어그램 렌더링, MIT 라이선스)를 같은 폴더에 두세요. mermaid.min.js가 없어도 에디터 자체는 정상 동작하며, ```mermaid 코드블록만 그림 대신 원본 텍스트로 표시됩니다.

1. 파일 다운로드

   # Git으로 클론
   git clone https://github.com/your-repo/markdown-editor.git
   cd markdown-editor
   
   # 또는 직접 다운로드
   wget https://your-domain.com/markdown-editor.html
   wget https://your-domain.com/mermaid.min.js

2. 브라우저에서 실행

   # 로컬 서버 실행 (권장)
   python -m http.server 8000
   # 또는
   npx serve .
   
   # 브라우저에서 http://localhost:8000 접속

3. 직접 실행

   • md-editor.html 파일을 더블클릭하여 브라우저에서 열기 (mermaid.min.js가 같은 폴더에 있어야 다이어그램이 렌더링됨)

📖 사용법

1️⃣ 기본 사용법

1. 좌측 에디터에 마크다운 텍스트 입력
2. 우측에서 실시간 미리보기 확인

2️⃣ 파일 작업

# 새 파일 생성
⌘+N 또는 "새 파일" 버튼 클릭

# 파일 열기
⌘+O 또는 "열기" 버튼 클릭
또는 파일을 창에 드래그 앤 드롭

# 파일 저장
⌘+S 또는 "저장" 버튼 클릭

# PDF 저장
⌘+P 또는 "PDF 저장" 버튼 클릭

3️⃣ 고급 기능

• 스크롤 동기화: 🔗 버튼으로 활성화/비활성화
• 창 분할 조정: 중앙 구분선을 드래그하여 좌우 비율 조정 (모바일에서는 터치 드래그도 지원)

🎨 폰트

미리보기 폰트는 나눔고딕코딩(SIL Open Font License 1.1) 하나로 고정되어 있으며, WOFF2로 변환해 md-editor.html에 base64로 직접 내장했습니다. 과거에는 10종 중 원하는 폰트를 고를 수 있었지만, 대부분의 라틴 전용 monospace 폰트(JetBrains Mono 등)는 한글 글리프가 없어 한글이 섞인 줄에서 브라우저가 다른 폰트로 그 글자만 조용히 대체해 그리고, 두 폰트의 글자 폭 비율이 달라 정렬이 어긋나는 문제가 있었습니다. 선택지를 없애고 한글·영문을 자체 비율로 일관되게 그리는 폰트 하나로 고정해 이 문제를 근본적으로 없앴고, 시스템에 나눔고딕코딩이 설치되어 있지 않아도 항상 동일하게 렌더링됩니다.

📐 박스 드로잉 문자(─│┌┐└┘ 등) 정렬

나눔고딕코딩은 박스 드로잉 문자(U+2500~257F)를 반각이 아닌 전각으로 그리도록 설계되어 있어, 에디터(반각)와 프리뷰(전각)에서 폭이 달라 표(ASCII 다이어그램) 정렬이 깨지는 문제가 있었습니다. 이를 위해 같은 font-family: 'Nanum Gothic Coding' 이름으로 unicode-range: U+2500-257F만 지정한 @font-face를 하나 더 추가해, 이 범위의 문자만 Sarasa Mono K(SIL Open Font License 1.1)에서 반각으로 서브셋(약 2KB)해 오버라이드합니다. 두 폰트 모두 unitsPerEm=1000, 반각 문자 advance width가 500으로 동일해서 별도 크기 보정 없이 격자가 정확히 맞습니다. 브라우저가 문자 단위로 알맞은 @font-face를 자동 선택하므로, 한글·영문·박스문자가 한 줄(코드블록 포함)에 섞여도 항상 정렬이 유지됩니다.

📊 Mermaid 다이어그램

```mermaid 코드블록 안에 Mermaid 문법으로 다이어그램을 작성하면 그림으로 렌더링됩니다.

```mermaid
graph TD
  A[시작] --> B{조건}
  B -->|예| C[처리1]
  B -->|아니오| D[처리2]
```

• 동작 방식: md-editor.html과 같은 폴더의 mermaid.min.js(로컬 파일, MIT 라이선스, 약 3.4MB)를 <script src="mermaid.min.js">로 불러옵니다. CDN을 쓰지 않으므로 인터넷 연결 없이도 동작하지만, 단일 HTML 파일이 아니라 두 파일을 함께 배포해야 합니다.
• 선택적 기능: mermaid.min.js가 없거나 로드에 실패해도 에디터의 나머지 기능은 그대로 동작하며, ```mermaid 블록은 그림 대신 원본 텍스트만 표시됩니다(에러 없음).
• 실시간 렌더링: 타이핑을 멈춘 뒤 약 0.4초 후 다이어그램을 다시 그립니다(매 키 입력마다 다시 그리면 미완성 구문 때문에 계속 에러가 뜨고 성능도 낭비되기 때문).
• 테마 연동: 다크/라이트 모드 전환 시 다이어그램 배색도 함께 바뀝니다.
• 오류 처리: 다이어그램 문법이 잘못되면 Mermaid 자체 오류 표시만 나타나고, 나머지 미리보기 내용에는 영향이 없습니다.
• 보안: securityLevel: 'strict'로 초기화해 다이어그램 텍스트에 스크립트나 클릭 이벤트가 섞여 있어도 무시하도록 설정했습니다.

🛠️ 기술 스택

🏗️ 아키텍처

📦 Markdown Editor
├── 🎨 Frontend (HTML5/CSS3/JavaScript)
├── 📚 마크다운 파싱은 외부 라이브러리 없음 (자체 파서, 완전 오프라인 동작)
├── 🔤 나눔고딕코딩 내장 + Sarasa Mono K 박스문자 오버라이드 (한글·영문·박스문자 정렬 보장)
├── 📊 mermaid.min.js (선택적 로컬 파일, 같은 폴더에 있으면 다이어그램 렌더링)
├── 💾 저장소 (localStorage 우선, 접근 불가 시 메모리 기반 자동 폴백)
└── 🎯 API (File, Print)

💡 핵심 기술

• 바닐라 JavaScript: 프레임워크 없는 순수 JS, 외부 네트워크 의존성 없음
• 자체 마크다운 파서: 입력을 우선 HTML 이스케이프한 뒤 인식된 문법만 안전한 태그로 변환(XSS 방지), CDN 없이 오프라인에서도 항상 동일하게 동작
• 내장 웹폰트: 한글·영문 혼용 시에도 정렬이 깨지지 않는 나눔고딕코딩을 WOFF2(base64)로 내장해, 시스템 폰트 설치 여부와 무관하게 어디서나 동일하게 렌더링
• Mermaid 다이어그램: 로컬 mermaid.min.js를 불러와 디바운스된 렌더링, 테마 연동, 오류 격리(다이어그램 오류가 나머지 미리보기에 영향 없음)까지 처리
• CSS 변수: 테마 시스템 구현
• CSS Grid/Flexbox: 반응형 레이아웃
• File API: 파일 읽기/저장
• Print API: PDF 저장
• localStorage 대체: 접근 불가 시(샌드박스, 프라이빗 브라우징 등) 메모리 기반 설정 저장소로 자동 전환

🔧 최적화 기법

• 순환 스크롤 방지: requestAnimationFrame 기반 플래그로 좌우 스크롤 동기화 시 무한 루프 없이 매끄럽게 동작
• 메모리 관리: 이벤트 리스너 정리
• CSS 최적화: 하드웨어 가속 활용

🔧 커스터마이징

🎨 테마 수정

:root {
  /* 다크 모드 색상 */
  --bg-primary: #1e1e1e;
  --text-primary: #ffffff;
  --accent-blue: #0a84ff;
  
  /* 미리보기 폰트 (나눔고딕코딩 내장, 고정값) */
  --preview-font: 'Nanum Gothic Coding', 'D2Coding', 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
}

.light-mode {
  /* 라이트 모드 색상 */
  --bg-primary: #ffffff;
  --text-primary: #1d1d1f;
  --accent-blue: #007aff;
}

⚙️ 기능 설정

// 기본 설정 변경
let memoryStorage = {
  theme: 'dark',        // 기본 테마
  scrollSync: 'true'    // 스크롤 동기화 기본값
};

🐛 문제 해결

❗ 자주 발생하는 문제

Q: localStorage 오류가 발생해요

원인: 샌드박스 환경 또는 프라이빗 브라우징
해결: 메모리 기반 저장소 자동 사용 (설정 유지 안됨)

Q: PDF 저장이 안 돼요

원인: 팝업 차단 또는 브라우저 호환성
해결: 팝업 허용 설정 및 모던 브라우저 사용

Q: 파일 드래그 앤 드롭이 안 돼요

지원 형식: .md, .markdown, .txt
확인사항: 파일 확장자 및 브라우저 호환성

Q: mermaid 코드블록이 그림이 아니라 텍스트 그대로 보여요

원인: mermaid.min.js가 md-editor.html과 같은 폴더에 없거나 파일명이 다름
해결: mermaid.min.js를 같은 폴더에 두고 새로고침 (없어도 에디터 자체는 정상 동작함)

Q: 탭을 닫을 때 뜨는 확인창 문구가 마음에 안 들어요

원인: 브라우저 정책상 beforeunload 확인창 문구는 웹페이지가 임의로 지정할 수 없고
      항상 브라우저가 정한 고정 문구만 표시됨(악용 방지를 위해 수년 전부터 막혀 있음)
참고: "새 파일"/"열기"/드래그 앤 드롭으로 다른 파일을 열 때 뜨는 확인창은
      이 앱이 직접 만든 것이라 문구를 자유롭게 바꿀 수 있음

Q: 모바일에서는 탭을 닫아도 확인창이 안 떠요

원인: iOS Safari 등 일부 모바일 브라우저는 beforeunload 확인창 자체를 지원하지 않음
참고: "새 파일"/"열기"/드래그 앤 드롭 시 뜨는 확인창은 모바일에서도 정상 동작함

🔍 디버깅 도구

1. 로그 확인

   // 개발자 도구 콘솔에서 "[Markdown Editor]" 태그 확인

2. 네트워크 확인

   개발자 도구 → Network 탭에서 외부 요청이 없는지 확인 (완전 오프라인 동작 검증)
   

🤝 기여하기

🔄 개발 워크플로우

1. 이슈 생성 또는 확인
2. 브랜치 생성: git checkout -b feature/new-feature
3. 변경사항 커밋: git commit -m "Add new feature"
4. 브랜치 푸시: git push origin feature/new-feature
5. Pull Request 생성

📝 코딩 스타일

• 들여쓰기: 4 스페이스
• 네이밍: camelCase (JavaScript), kebab-case (CSS)
• 주석: JSDoc 스타일
• 함수: 단일 책임 원칙

🧪 테스트

// 기본 기능 테스트
1. 마크다운 입력 → 미리보기 확인
2. 테마 토글 → 색상 변경 확인
3. 파일 저장/불러오기 → 내용 확인
4. PDF 저장 → 출력 확인

📚 참고 자료

🔗 관련 링크

• Markdown 가이드
• macOS 디자인 가이드라인
• 웹 폰트 최적화

📖 마크다운 문법

# 제목 1
## 제목 2
제목도 가능 (다음 줄을 ===로)
=====================

**굵은 텍스트**
*기울임 텍스트*
~~취소선~~
`인라인 코드`
\*이스케이프해서 별표 그대로\*

​```코드 블록​```

> 인용문

- 목록 항목 1
  - 중첩된 하위 항목
- [ ] 할 일
- [x] 완료한 일

1. 순서 목록
   1. 중첩도 지원

[링크](https://example.com "제목")
[참조 링크][1]
<https://example.com> (자동 링크)

![이미지](image.jpg "제목")

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:------|:-----:|------:|
| 셀 1   | 셀 2   | 셀 3   |

[1]: https://example.com "참조 링크 정의"

​```mermaid
graph TD
  A[시작] --> B[끝]
​```

지원하지 않는 문법: 코드블록 구문 강조(색상 없이 단색으로만 표시), 각주, 정의목록, 이모지 코드(:smile:), 꺾쇠 없이 쓴 URL의 자동 링크화.

📄 라이선스

MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.

👨‍💻 개발자

JohnnyB Hyeon - Not Johnnyb Goode~

• 🌐 웹사이트: 프로젝트 홈페이지
• 📧 이메일: johnhsb@outlook.kr
• 💬 이슈 리포트: GitHub Issues

---

🎉 버전 히스토리

v3.3.0 (최신)

• 🐛 title 속성이 있는 링크·이미지([text](url "title"))가 렌더링되지 않던 버그 수정(escapeHtml이 큰따옴표를 먼저 "로 바꿔 정규식이 매치 실패하던 문제)
• 🐛 괄호가 포함된 URL(위키백과 스타일 등)이 중간에 잘리던 문제 수정
• 🐛 문장 | 문장 다음에 ---가 오면 의도치 않은 표로 오인식되던 문제 수정(헤더·구분선 열 개수가 일치할 때만 표로 인정)
• 🐛 my_variable_name처럼 단어 중간의 언더스코어가 의도치 않게 기울임 처리되던 문제 수정(CommonMark/GFM 규칙 적용)
• ✨ 중첩 목록 지원(들여쓰기 기반, 순서/순서 없음 혼용 가능)
• ✨ 작업 목록(체크박스) - [ ] / - [x] 지원
• ✨ Setext 스타일 헤더(제목\n===, 제목\n---) 지원
• ✨ 목록 항목의 여러 줄(느슨한 연속 텍스트) 지원
• ✨ 참조 스타일 링크 [text][ref] 지원
• ✨ 자동 링크 <https://...>, <메일주소> 지원
• ✨ 표 정렬 마커(:---, :---:, ---:) 지원
• ✨ 백슬래시 이스케이프(\*, \_ 등) 지원

v3.2.0

• 💾 미저장 변경사항 확인 기능 추가: 편집기 내용이 마지막 저장/로드 이후 바뀐 상태(isDirty)를 추적해, 탭 닫기/새로고침(beforeunload), 새 파일 만들기, 다른 파일 열기(드래그 앤 드롭 포함) 시 확인창을 띄움
• 🐛 "새 파일" 확인 조건을 "내용이 있는지"에서 "실제로 수정됐는지"로 수정, "열기"·드래그 앤 드롭에는 원래 없던 미저장 확인창을 새로 추가

v3.1.0

• 📊 Mermaid 다이어그램 지원 추가: mermaid.min.js(로컬 파일, MIT)를 같은 폴더에서 불러와 ```mermaid 코드블록을 그림으로 렌더링. CDN 대신 로컬 파일 로드 방식을 택해 오프라인 원칙은 유지하되, 단일 HTML 파일 구성은 두 파일로 바뀜(파일이 없으면 텍스트로 자동 폴백)
• 타이핑 디바운스(0.4초) 렌더링, 다크/라이트 테마 연동, 다이어그램 오류가 나머지 미리보기에 번지지 않도록 격리 처리

v3.0.0

• 🔒 자체 마크다운 파서로 전환: HTML 이스케이프 기반 렌더링으로 XSS 방지, CDN(marked.js) 의존성 제거로 완전 오프라인 동작 보장
• 🔤 폰트 선택 기능 제거: 10종 중 고르던 방식은 대부분 시스템 미설치로 실효성이 없어, 한글·영문 혼용 정렬이 보장되는 나눔고딕코딩 하나를 WOFF2로 내장해 고정
• 📐 박스 드로잉 문자(─│┌┐└┘) 정렬 수정: 나눔고딕코딩이 전각으로 그리던 U+2500-257F 범위를 Sarasa Mono K에서 반각으로 서브셋해 unicode-range로 오버라이드
• 📱 리사이저에 터치 이벤트 추가 및 모바일 세로 레이아웃 축 계산 수정
• 💾 localStorage 접근 불가 시 메모리 기반 저장소로 실제로 자동 폴백하도록 구현
• 🖨️ PDF 인쇄 창을 noopener로 열어 opener 참조 위험 차단
• 🐛 라이트 모드에서 미리보기 폰트가 적용되지 않던 CSS 우선순위 버그 수정

v2.0.0

• ✨ 스마트 폰트 감지 시스템 추가
• 🔧 메모리 기반 저장소로 localStorage 문제 해결
• 🎨 폰트 선택 UI 개선 (실제 적용 폰트 표시)
• 🐛 다수의 버그 수정

v1.5.0

• 📝 10가지 고정폭 폰트 지원
• 🔄 스크롤 동기화 기능
• 📱 모바일 반응형 디자인

v1.0.0

• 🎯 기본 마크다운 에디터 기능
• 🌙 다크/라이트 모드
• 💾 파일 저장/불러오기
• 📄 PDF 내보내기

---

⭐ 이 프로젝트가 도움이 되었다면 GitHub에서 스타를 눌러주세요!