🌙 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 활성화

💾 설치 방법

1. 파일 다운로드

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

2. 브라우저에서 실행

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

3. 직접 실행

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

📖 사용법

1️⃣ 기본 사용법

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

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
확인사항: 파일 확장자 및 브라우저 호환성

🔍 디버깅 도구

1. 폰트 상태 확인

   // 콘솔에서 실행
   debugFontStatus()

2. 로그 확인

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

3. 네트워크 확인

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

🤝 기여하기

🔄 개발 워크플로우

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. 파일 저장/불러오기 → 내용 확인
5. PDF 저장 → 출력 확인

📚 참고 자료

🔗 관련 링크

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

📖 마크다운 문법

# 제목 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에서 스타를 눌러주세요!