# 리치 텍스트와 마크다운: 어떻게 전환하고 사용하는가 현대적인 노트 작성 앱 환경에서 사용자들은 두 가지 서로 다른 방식 중 하나를 선택해야 합니다. 바로 **리치 텍스트** 편집기의 시각적 직관성과 **마크다운**의 휴대성 및 간편성입니다. 대부분의 앱은 사용자로 하여금 하나를 선택하도록 강요합니다. **NoteRich**는 이러한 이분법을 깨뜨립니다. 정교한 듀얼 모드 아키텍처를 도입함으로써 NoteRich는 동일한 콘텐츠를 리치 텍스트와 마크다운 형식으로 원활하게 전환할 수 있게 해줍니다. 이를 통해 두 가지 장점을 모두 누릴 수 있습니다. --- ## 두 가지 모드 이해하기 모드 간 전환 방법을 알아보기 전에, 각 모드가 제공하는 기능과 언제 사용해야 하는지 이해하는 것이 중요합니다. ### 리치 텍스트 모드: 최고의 시각적 편집 리치 텍스트 모드는 **WYSIWYG (What You See Is What You Get)** 편집 경험을 제공합니다. 리치 텍스트 모드에서: - **시각적 포맷팅**: 굵은 글씨, 이탤릭체, 제목, 목록이 실제로 표시될 때와 동일하게 나타납니다. - **툴바 접근**: 포괄적인 포맷 툴바가 모든 스타일링 옵션에 대한 한 번의 클릭으로 접근할 수 있습니다. - **미디어 임베드**: 이미지, 표, 방정식, 인터랙티브 요소가 인라인으로 표시됩니다. - **드래그 앤 드롭**: 블록을 드래그하여 콘텐츠를 쉽게 재배열할 수 있습니다. - **컨텍스트 메뉴**: 오른쪽 클릭 동작과 플로팅 포맷 툴바가 생산성을 높여줍니다. 리치 텍스트 모드는 다음과 같은 경우에 적합합니다: - 타이핑할 때 시각적 피드백을 선호하는 사용자 - 복잡한 레이아웃을 가진 문서(표, 다중 열 레이아웃) - 시각적 명확성이 중요한 협업 편집 세션 - 구문을 외우지 않고 빠르게 포맷하는 경우 ### 마크다운 모드: 휴대성 있는 간편성 마크다운 모드는 내용을 간단한 포맷 구문으로 표현합니다. 마크다운 모드에서 작업할 때: - **순수 텍스트의 휴대성**: 노트는 보편적으로 읽을 수 있는 형식으로 저장됩니다. - **키보드 우선 워크플로우**: 간단한 키보드 단축키(`**굵은 글씨**`, `*이탤릭체*, `# 제목`)를 사용하여 텍스트를 포맷합니다. - **버전 관리 친화적**: Git 및 다른 버전 관리 시스템에서 깔끔한 차이를 표시합니다. - **빠른 타이핑**: 마우스가 필요하지 않으며, 손을 키보드 위에 두면 됩니다. - **보편적인 호환성**: `.md` 파일을 내보내고 공유할 수 있어 어디서나 사용할 수 있습니다. 마크다운 모드는 다음과 같은 경우에 적합합니다: - 기술 문서와 코드가 많은 노트 - 방해받지 않는 순수 텍스트 편집을 선호하는 작가 - 최소한의 포맷 오버헤드로 긴 형식 콘텐츠를 만드는 경우 - 최대한의 휴대성과 미래 지향적인 사용자를 위한 경우 --- ## 듀얼 모드 아키텍처 NoteRich는 단순히 두 가지 별개의 편집 경험을 제공하는 것이 아니라, 내부 문서 구조와 마크다운 구문을 실시간으로 변환할 수 있는 **통합 콘텐츠 모델**을 만들어냅니다. 이는 정교한 변환 엔진을 통해 가능합니다. ```mermaid graph TD A[사용자 입력] --> B{내부 문서 모델} B --> C[리치 텍스트 표현] B --> D[마크다운 표현] C --> E[시각적 툴바 동작] C --> F[드래그 앤 드롭 작업] C --> G[컨텍스트 메뉴 포맷] D --> H[마크다운 단축키 감지] D --> I[구문 패턴 인식] D --> J[순수 텍스트 내보내기/가져오기] B --> K[통합 저장층] K --> L[IndexedDB 지속성] K --> M[P2P 동기화 페이로드] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style D fill:#fafafa,stroke:#eaeaea,color:#333 style K fill:#000,stroke:#000,color:#fff ``` 이 아키텍처는 **콘텐츠가 한 형식에만 고정되지 않음**을 의미합니다. 마크다운으로 타이핑을 시작하든 리치 텍스트 툴바를 사용하여 포맷을 적용하든, 기본 문서 모델은 일관성을 유지하여 데이터 손실이나 포맷 손상 없이 즉시 전환할 수 있습니다. --- ## 모드 간 전환 방법 ### 방법 1: 설정 기반 모드 선택 NoteRich는 모든 노트의 기본 편집 모드를 결정하는 전역 설정을 제공합니다: 1. **설정 열기**: 편집기 우측 상단 모서리의 기어 아이콘(⚙️)을 클릭합니다. 2. **"리치 텍스트" 스위치 찾기**: 설정 패널에서 "리치 텍스트"라고 표시된 스위치를 찾습니다. 3. **모드 전환**: - **활성화됨(✓)**: 편집기가 리치 텍스트 모드에서 툴바가 포함된 상태로 열립니다. - **비활성화됨(○)**: 편집기가 순수 텍스트/마크다운 모드에서 열립니다. ```mermaid sequenceDiagram participant User participant SettingsPanel participant Editor participant DocumentModel User->>SettingsPanel: 설정 아이콘 클릭 User->>SettingsPanel: "리치 텍스트" 스위치 전환 SettingsPanel->>Editor: isRichText 플래그 업데이트 Editor->>DocumentModel: 새로운 모드로 다시 렌더링 Editor-->>User: 업데이트된 인터페이스 표시 ``` **중요**: 이 설정을 변경하려면 페이지 재로드가 필요합니다. 이를 통해 모든 플러그인과 툴바 구성 요소가 선택된 모드에 맞게 적절히 초기화됩니다. ### 방법 2: 노트별 마크다운 가져오기/내보내기 주로 리치 텍스트 모드에서 작업하더라도, 개별 노트를 마크다운 형식으로 가져오고 내보낼 수 있습니다: #### 마크다운으로 노트 내보내기 1. 내보내고 싶은 노트를 열어보세요. 2. **동작 메뉴**를 클릭합니다(보통 세 점 `⋮` 또는 다운로드 아이콘으로 표시됩니다). 3. **"마크다운으로 내보내기"**를 선택합니다. 4. 노트가 마크다운 구문으로 변환되어 `.md` 파일로 다운로드됩니다. 내보내기 프로세스는 다음을 지능적으로 처리합니다: - **제목**: `#`, `##`, `###` 구문으로 변환됩니다. - **목록**: 목록과 번호가 매겨진 목록이 올바른 들여쓰기와 함께 보존됩니다. - **코드 블록**: 언어 주석이 유지됩니다(예: ```javascript). - **표**: 정렬 마커가 있는 마크다운 표로 포맷됩니다. - **링크와 이미지**: alt 텍스트와 함께 URL이 보존됩니다. #### 마크다운 콘텐츠 가져오기 1. 새로운 노트를 만들거나 기존 초안을 열어보세요. 2. 동작 메뉴에서 **가져오기** 기능을 사용합니다. 3. `.md` 파일을 선택하거나 마크다운 텍스트를 직접 붙여넣습니다. 4. NoteRich는 자동으로 마크다운 구문을 감지하고 내부 문서 모델로 변환합니다. 가져오기 엔진은 패턴 인식으로 마크다운 요소를 식별합니다: ```markdown Pattern → 리치 텍스트 요소 -------------------------------------------------- # 제목 1 → H1 제목 노드 ## 제목 2 → H2 제목 노드 **굵은 글씨** → 굵은 글씨 노드 *이탤릭 글씨* → 이탤릭 글씨 노드 - 목록 항목 → 목록 항목 1. 번호가 매겨진 항목 → 번호가 매겨진 목록 항목 > 인용문 → 인용문 노드 ```code``` → 코드 블록 노드 [링크](url) → 링크 노드 ![이미지](url) → 이미지 노드 ``` ### 방법 3: 리치 텍스트 모드의 마크다운 단축키 NoteRich의 가장 강력한 기능 중 하나는 리치 텍스트 모드에서도 **마크다운 단축키**를 사용할 수 있다는 것입니다. 이 하이브리드 방식으로 마크다운의 속도를 활용하면서 자연스럽게 타이핑할 수 있습니다. 리치 텍스트 모드가 활성화된 경우, 마크다운 구문을 입력하면 자동으로 변환됩니다: | 이렇게 입력 | 이렇게 변환 | 트리거 조건 | |-----------------|-----------------|-----------------| | `# ` | H1 제목 | 해시 뒤에 공백 | | `## ` | H2 제목 | 더블 해시 뒤에 공백 | | `### ` | H3 제목 | 트리플 해시 뒤에 공백 | | `- ` 또는 `* ` | 목록 | 해시/별표 뒤에 공백| | `1. ` | 번호가 매겨진 목록 | 숫자 뒤에 점 | | `[] ` | 체크박스 목록 | 대괴 뒤에 공백 | | `> ` | 인용문 | 더하기 기호 뒤에 공백 | | ```` ``` ```` | 코드 블록 | 세 개의 백틱 + 엔터 | | `**글씨**` | **굵은 글씨** | 마지막 해당 기호들 | | `*글씨*` | *이탤릭 글씨* | 마지막 해당 기호들 | | `~~글씨~~` | ~~제목 통과~~ | 마지막 틸드 기호들 | | `` `글씨`` | `인라인 코드` | 마지막 백틱 | | `[글씨](url)` | [하이퍼링크](url) | 완전한 링크 구문 | | `---` 또는 `***` | 가로줄 | 세 개의 해시/별표 | ```mermaid graph LR A[사용자 마크다운 입력] --> B[단축키 감지기] B -->|패턴 일치| C[노드로 변환] B -->|일치하지 않음| D[순수 텍스트로 유지] C --> E[편집기 상태 업데이트] E --> F[리치 텍스트로 렌더링] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style F fill:#fafafa,stroke:#eaeaea,color:#333 ``` 이를 통해 마크다운의 **타이핑 속도**와 리치 텍스트의 **시각적 이점**을 모두 누릴 수 있습니다. 모드를 수동으로 전환할 필요 없이 말입니다. --- ## 고급 기능: 다중 줄 요소 NoteRich의 마크다운 엔진은 다중 줄 요소, 특히 코드 블록과 블록쿼트를 처리하는 데 뛰어납니다. ### 코드 블록 감지 편집기는 단일 줄 코드 블록과 다중 줄 코드 블록을 지능적으로 구분합니다: ```markdown 단일 줄: ```python print("Hello")``` → 인라인 코드 프레임 다중 줄: ```python def hello(): print("Hello") ``` → 전체 코드 블록 노드 코드 블록을 가져오거나 입력할 때, NoteRich는 다음을 수행합니다: 1. 시작 프레임을 감지합니다(``` + 선택적 언어 식별자) 2. 종료 프레임까지의 모든 내용을 캡처합니다. 3. 입력된 방식대로 들여쓰기와 공백을 유지합니다. 4. 언어 태그에 따라 구문 강조 표시를 적용합니다. ### 중첩 목록 처리 여러 레벨의 들여쓰기가 있는 목록은 올바르게 재구성됩니다: ```markdown - 레벨 1 항목 - 레벨 2 항목 (4개의 공백 들여쓰기) - 레벨 3 항목 (8개의 공백 들여쓰기) - 레벨 1으로 돌아가기 ``` 변환 엔진은 들여쓰기 레벨을 계산하고 문서 모델에 적절한 중첩 목록 구조를 만듭니다. --- ## 성능 고려사항 리치 텍스트와 마크다운 간의 양방향 변환은 대규모 문서에서도 성능을 최적화합니다. ### 변환 벤치마크 ```echarts { "xAxis": { "type": "category", "data": ["1k chars", "5k chars", "10k chars", "25k chars", "50k chars"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "name": "시간 (ms)", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "name": "마크다운 → 리치 텍스트", "data": [8, 15, 22, 35, 48], "type": "line", "smooth": true, "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" }, "symbol": "circle", "symbolSize": 8 }, { "name": "리치 텍스트 → 마크다운", "data": [5, 10, 16, 28, 38], "type": "line", "smooth": true, "lineStyle": { "color": "#666", "width": 2, "type": "dashed" }, "itemStyle": { "color": "#666" }, "symbol": "circle", "symbolSize": 8 } ], "grid": { "left": "10%", "right": "5%", "bottom": "10%" }, "legend": { "data": ["마크다운 → 리치 텍스트", "리치 텍스트 → 마크다운"], "bottom": 0, "textStyle": { "color": "#666" } } } ``` 50,000자 이상의 문서가 있더라도, 변환은 50밀리초 이내에 완료됩니다. 이는 일반적인 작업 중에는 사용자에게 인지되지 않습니다. ### 증분 업데이트 매번 키 입력 시 전체 문서를 다시 파싱하는 대신, NoteRich는 **증분 변환**을 사용합니다: - **마크다운 단축키**: 현재 줄만 패턴 일치 여부를 평가합니다. - **툴바 동작**: 전체 재사용 없이 직접 노드 조작합니다. - **배치 가져오기**: 대규모 마크다운 파일을 여러 부분으로 처리하여 UI가 차단되는 것을 방지합니다. --- ## 모드 선택에 대한 모범 사례 ### 리치 텍스트 모드 사용 시 다음과 같은 경우 리치 텍스트 모드를 기본 모드로 선택하세요: 1. **시각적 레이아웃이 중요한 경우**: 표, 이미지, 복잡한 포맷이 포함된 문서를 만드는 경우 2. **협업 작업**: 시각적 편집기를 선호하는 팀원들과 노트를 공유하는 경우 3. **자주 포맷 변경이 필요한 경우**: 툴바를 사용하여 빠르게 스타일을 조정하는 경우 4. **기술적이지 않은 독자들을 위한 경우**: 마크다운 구문에 익숙하지 않은 독자들을 위해 콘텐츠를 준비하는 경우 5. **접근성 요구사항**: 구조화된 리치 텍스트를 더 잘 지원하는 스크린 리더를 사용하는 경우 ### 마크다운 모드 사용 시 다음과 같은 경우 마크다운 모드(또는 순수 텍스트 모드)를 선택하세요: 1. **코드가 많은 문서**: 많은 코드 예시가 포함된 기술 가이드를 작성하는 경우 2. **버전 관리 통합**: Git 저장소의 변경 사항을 추적하는 경우 3. **방해받지 않는 글쓰기**: 툴바가 없는 최소한의 인터페이스를 선호하는 경우 4. **크로스 플랫폼 휴대성**: 다른 마크다운 호환 도구로 자주 내보내는 경우 5. **키보드 중심의 워크플로우**: 항상 손을 키보드 위에 두고 싶은 경우 ### 하이브리드 방식: 전문 사용자 전략 많은 경험이 풍부한 NoteRich 사용자들은 **하이브리드 워크플로우**를 채택합니다: 1. **기본으로 리치 텍스트 설정**: 전체 툴바와 시각적 피드백을 즐기세요. 2. **마크다운 단축키 사용**: `#`, `-`, `**글씨**`를 사용하여 빠르게 포맷합니다. 3. **마크다운으로 내보내기**: 필요할 때 휴대성 있는 버전을 공유합니다. 4. **마크다운 파일 가져오기**: 외부 콘텐츠를 원활하게 가져옵니다. 이 방식은 **타이핑 속도**와 **시각적 명확성**을 모두 최대화하며, 두 모드의 장점을 활용합니다. --- ## 일반적인 문제 해결 ### 문제: 마크다운 단축키가 트리거되지 않음 **증상**: `#` 또는 `-`를 입력해도 제목이나 목록으로 변환되지 않습니다. **해결책**: 1. 리치 텍스트 모드가 활성화되어 있는지 확인합니다(설정 패널 확인). 2. 마크다운 단축키 플러그인이 활성화되어 있는지 확인합니다. 3. 브라우저 플러그인 충돌이 있는지 확인합니다. 4. 마크다운 기호 뒤에 공백을 추가해 보세요. ### 문제: 내보내기 중 포맷 손실 **증상**: 내보낸 마크다운 파일에서 일부 포맷이 손실됩니다. **해결책**: 1. 일부 고급 기능(사용자 정의 색상, 내장 위젯)에는 마크다운에 해당하는 기능이 없을 수 있습니다. 2. 내보낸 파일에서 지원되지 않는 요소가 있는지 확인합니다. 3. 복잡한 콘텐츠의 경우 HTML 형식으로 내보내기하여 사용합니다. ### 문제: 가져오기 시 예기치 않은 구조 생성 **증상**: 가져온 마크다운이 예상한 레이아웃과 일치하지 않습니다. **해결책**: 1. 마크다운 구문이 CommonMark 규격을 따르는지 확인합니다. 2. 목록의 들여쓰기가 일관성 있게 되어 있는지 확인합니다. 3. 코드 블록 프레임이 올바르게 닫히는지 확인합니다. 4. 문제가 있는 구문을 테스트하기 위해 더 작은 섹션으로 테스트합니다. ### 문제: 대규모 문서 작업 시 성능 저하 **증상**: 매우 긴 노트를 입력하거나 모드를 전환할 때 지연이 발생합니다. **해결책**: 1. 설정에서 증분 렌더링을 활성화합니다. 2. 매우 긴 문서를 연결된 하위 노트로 나눕니다. 3. 순수 텍스트 모드에 불필요한 플러그인을 비활성화합니다. 4. 초기 작성 시 마크다운 모드를 사용하고, 최종 포맷 시 리치 텍스트 모드를 사용합니다. --- ## 듀얼 모드 편집의 미래 NoteRich의 듀얼 모드 아키텍처는 문서 편집 방식에 대한 근본적인 변화를 의미합니다. 리치 텍스트와 마크다운을 경쟁적인 형식으로 보는 대신, NoteRich는 이를 **단일하고 유연한 콘텐츠 모델**으로 통합하여 사용자의 작업 흐름에 맞춰 조정합니다. 향후 개선 사항에는 다음이 포함됩니다: - **노트별 모드 설정**: 개별 노트에 대한 전역 기본 설정을 우회합니다. - **실시간 협업**: 협업자들의 마크다운 단축키가 즉시 렌더링되는 것을 확인합니다. - **AI 지원 변환**: 형식 선택을 최적화하는 스마트 제안을 제공합니다. - **사용자 정의 변환기**: 마크다운에서 리치 텍스트로의 매핑을 정의합니다. --- ## 결론 리치 텍스트와 마크다운 중 어떤 것을 선택할지는 절대적인 선택이 아닙니다. NoteRich의 혁신적인 듀얼 모드 아키텍처를 활용하면 다음을 얻을 수 있습니다: ✅ 필요할 때 시각적 풍부함 ✅ 원하는 경우 순수 텍스트의 간편함 ✅ 두 모드 간 원활한 전환 ✅ 리치 텍스트 모드에서의 마크다운 단축키 ✅ 외부 마크다운 도구와의 완전한 호환성 개발자가 코드를 문서화하든, 작가가 긴 형식의 콘텐츠를 만드든, 지식 노동자가 복잡한 프로젝트를 관리하든, NoteRich는 사용자의 선호하는 작업 흐름에 맞춰 조정됩니다. 가장 자연스러운 모드를 시작으로, 마크다운 단축키를 실험해보고, 자신의 고유한 요구에 맞는 완벽한 균형을 찾아보세요. 여러분의 노트, 여러분의 방식으로. --- ## flex flex-wrap gap-2 mt-8 mb-12 <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">리치 텍스트</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">마크다운</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">듀얼 모드</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">WYSIWYG</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">단축키</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">생산성</span> </div>