🌙 Markdown Editor

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

✨ 주요 기능

🎨 에디터 기능

실시간 미리보기: 입력과 동시에 마크다운 렌더링
스크롤 동기화: 좌우 창 스크롤 연동 (토글 가능)
폰트 선택: 10가지 고정폭 폰트 지원 (한글/영문 최적화)
창 크기 조절: 마우스 드래그로 좌우 비율 조정
실시간 통계: 단어/문자/줄 수 카운트 및 커서 위치 표시

🎭 테마 & 디자인

다크/라이트 모드: 원클릭 테마 토글 (⌘+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 활성화

💾 설치 방법

파일 다운로드

# Git으로 클론
git clone https://github.com/your-repo/markdown-editor.git
cd markdown-editor

# 또는 직접 다운로드
wget https://your-domain.com/markdown-editor.html

브라우저에서 실행

# 로컬 서버 실행 (권장)
python -m http.server 8000
# 또는
npx serve .

# 브라우저에서 http://localhost:8000 접속

직접 실행
- markdown-editor.html 파일을 더블클릭하여 브라우저에서 열기

📖 사용법

1️⃣ 기본 사용법

좌측 에디터에 마크다운 텍스트 입력
우측에서 실시간 미리보기 확인
폰트 드롭다운에서 원하는 폰트 선택

2️⃣ 파일 작업

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

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

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

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

3️⃣ 고급 기능

스크롤 동기화: 🔗 버튼으로 활성화/비활성화
폰트 상태 확인: "폰트상태" 버튼으로 현재 폰트 정보 확인
창 분할 조정: 중앙 구분선을 드래그하여 좌우 비율 조정
디버깅: 개발자 도구 콘솔에서 debugFontStatus() 실행

🎨 폰트 시스템

📝 지원 폰트 목록

폰트명	설명	한글 지원
SF Mono	macOS 기본 폰트	✅
Monaco	macOS 전통 폰트	✅
Consolas	Windows 기본 폰트	✅
JetBrains Mono	개발자 인기 폰트	✅
Cascadia Code	마이크로소프트 모던 폰트	✅
Fira Code	Mozilla 리가처 폰트	✅
Source Code Pro	Adobe 오픈소스 폰트	✅
D2Coding	한글 최적화 폰트	✅
나눔고딕코딩	네이버 한글 코딩 폰트	✅
Roboto Mono	구글 고정폭 폰트	✅

🔍 스마트 폰트 감지

자동 감지: 시스템에 설치된 폰트를 Canvas API로 감지
스마트 표시: "요청폰트 → 실제폰트" 형태로 실제 적용될 폰트 표시
Fallback 체인: 각 폰트마다 최적의 대체 폰트 순서 설정

🛠️ 기술 스택

🏗️ 아키텍처

📦 Markdown Editor
├── 🎨 Frontend (HTML5/CSS3/JavaScript)
├── 📚 라이브러리 (marked.js - 선택적)
├── 💾 저장소 (메모리 기반)
└── 🎯 API (Canvas, File, Print)

💡 핵심 기술

바닐라 JavaScript: 프레임워크 없는 순수 JS
CSS 변수: 테마 시스템 구현
CSS Grid/Flexbox: 반응형 레이아웃
Canvas API: 폰트 감지
File API: 파일 읽기/저장
Print API: PDF 저장
localStorage 대체: 메모리 기반 설정 저장

🔧 최적화 기법

지연 로딩: marked.js 라이브러리 선택적 로드
이벤트 디바운싱: 스크롤 동기화 성능 최적화
메모리 관리: 이벤트 리스너 정리
CSS 최적화: 하드웨어 가속 활용

🔧 커스터마이징

🎨 테마 수정

:root {
  /* 다크 모드 색상 */
  --bg-primary: #1e1e1e;
  --text-primary: #ffffff;
  --accent-blue: #0a84ff;
  
  /* 폰트 설정 */
  --preview-font: 'SF Mono', Monaco, monospace;
}

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

📝 폰트 추가

// fontOptions 배열에 새 폰트 추가
const fontOptions = [
  {
    name: "새 폰트명",
    fonts: ["Primary Font", "Fallback Font", "Generic"],
    value: "'Primary Font', 'Fallback Font', monospace"
  }
];

⚙️ 기능 설정

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

🐛 문제 해결

❗ 자주 발생하는 문제

Q: 폰트가 변경되지 않아요

// 해결 방법
1. "폰트상태" 버튼으로 현재 상태 확인
2. 개발자 도구 콘솔에서 debugFontStatus() 실행
3. 시스템에 해당 폰트가 설치되어 있는지 확인

Q: localStorage 오류가 발생해요

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

Q: PDF 저장이 안 돼요

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

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

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

🔍 디버깅 도구

폰트 상태 확인

// 콘솔에서 실행
debugFontStatus()

로그 확인

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

네트워크 확인

개발자 도구 → Network → Fonts 탭에서 폰트 로딩 상태 확인

🤝 기여하기

🔄 개발 워크플로우

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

📝 코딩 스타일

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

🧪 테스트

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

📚 참고 자료

🔗 관련 링크

📖 마크다운 문법

# 제목 1
## 제목 2
### 제목 3

**굵은 텍스트**
*기울임 텍스트*
`인라인 코드`

```코드 블록```

> 인용문

- 목록 항목 1
- 목록 항목 2

[링크](https://example.com)
![이미지](image.jpg)

| 테이블 | 헤더 |
|--------|------|
| 셀 1   | 셀 2 |

📄 라이선스

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

👨‍💻 개발자

JohnnyB Hyeon - Not Johnnyb Goode~

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

🎉 버전 히스토리

v2.0.0 (최신)

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

v1.5.0

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

v1.0.0

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

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

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.gitignore		.gitignore
md-editor.html		md-editor.html
readme.md		readme.md

johnhsb/md-editor

Folders and files

Latest commit

History

Repository files navigation