# NoteRich에서 대화형 ECharts를 삽입하는 방법 데이터의 가치는 그 데이터를 이해할 수 있는 능력에 따라 결정됩니다. 개인 지식 관리(PKM) 분야에서 원시적인 숫자와 구조화된 데이터를 시각적 인사이트로 변환하는 것은 매우 중요합니다. **NoteRich**는 **Apache ECharts**를 natively 지원함으로써 텍스트와 데이터 사이의 간극을 메워주며, 노트 내에 완전히 대화형적인 차트를 삽입할 수 있도록 해줍니다. 외부 서버로 데이터를 전송하여 렌더링하는 클라우드 기반 도구와는 달리, NoteRich는 ECharts를 모두 로컬 장치에서 처리하고 렌더링합니다. 이를 통해 귀하의 고유 데이터가 100% 비공개로 유지되며, 원활하고 대화형적인 시각화 경험을 제공할 수 있습니다. --- ## 왜 NoteRich에서 ECharts를 사용하는가? Apache ECharts는 유연성, 깊이, 플랫폼 간 호환성을 자랑하는 오픈소스 시각화 라이브러리입니다. ECharts를 natively 통합함으로써 NoteRich는 여러 가지 장점을 제공합니다: - **제로 코드 렌더링**: Markdown 코드 블록에 표준 JSON 설정을 작성하면, NoteRich가 즉시 대화형 차트로 렌더링합니다. - **100% 로컬 및 비공개**: 렌더링 엔진은 브라우저 내에서 실행됩니다. 데이터는 장치에서 결코 벗어나지 않습니다. - **풍부한 대화형성**: 조절, 이동, 툴팁, 레전더리 전환 기능을 내장하여, 단 한 줄의 JavaScript도 작성하지 않고도 즐길 수 있습니다. - **AI 기반 생성**: NoteRich의 로컬 AI가 테이블이나 자연어 요청을 분석하여 자동으로 ECharts JSON을 생성합니다. --- ## 기본 사항: 첫 번째 차트 삽입 NoteRich에 차트를 삽입하는 것은 Markdown 코드 블록을 작성하는 것만큼 간단합니다. `echarts`를 언어 식별자로 지정하고 유효한 ECharts `option` JSON 객체를 제공하기만 하면 됩니다. ```echarts { "title": { "text": "로컬 우선 노트 성장", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` 미리보기 모드로 전환하거나 노트를 읽을 때, NoteRich의 렌더링 엔진이 `echarts` 블록을 감지하고 ECharts 인스턴스를 초기화하며, 자동 크기 조정 기능을 갖춰 DOM에 바인딩합니다. --- ## 심층 분석: 고급 차트 설정 기본 사항을 익히면 ECharts의 전체 기능을 활용하여 복잡한 다차원 시각화를 만들 수 있습니다. ### 1. 다중 시리즈 및 혼합 차트 `series` 배열에 여러 객체를 정의하고 듀얼 Y축을 사용하여 선 차트와 바 차트를 쉽게 결합할 수 있습니다. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["창조된 노트", "총계"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "일일", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "총계", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "창조된 노트", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "총계", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. 파이 및 도넛 차트로 구성 ECharts의 `pie` 시리즈를 사용하면 비율을 시각화하는 것이 매우 간단합니다. 도넛 차트를 만들기 위해 반지름을 사용자 정의할 수 있으며, 이는 NoteRich의 미니멀리즘 감각과 잘 어울립니다. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "저장 용량 사용량", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "텍스트 노트", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "첨부 파일", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "데이터베이스", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI 기반 시각화: 텍스트에서 차트까지 JSON을 수동으로 작성하는 것은 강력한 기능이지만, NoteRich는 **로컬 AI 시각화 엔진**을 통해 이를 한 단계 더 발전시킵니다. 항상 직접 설정을 작성할 필요는 없습니다. ### 자연어에서 차트로 원하는 차트를 간단한 영어로 설명하기만 하면 됩니다. NoteRich의 로컬 LLM이 자동으로 ECharts JSON을 생성해줍니다. *예시 질문: "NoteRich, Notion, Obsidian의 개인정보 보호, 속도, 오프라인 지원, 확장성 측면에서의 기능을 비교하는 레이더 차트를 만들어 주세요."* ### 테이블에서 자동 감지 노트에 Markdown 테이블이 있다면, NoteRich의 AI가 구조화된 데이터를 분석하여 자동으로 해당 ECharts 설정을 제안하거나 생성합니다. 이는 원시 데이터에서 시각적 인사이트로의 전환을 장치 내에서 완전히 이루어지며, 분석 데이터가 완전히 비공개로 유지됩니다. --- ## 성능 및 지연 로딩 단일 문서에 여러 대화형 차트를 삽입할 때 성능이 중요한 문제가 됩니다. NoteRich는 **지연 로딩 아키텍처**를 통해 이 문제를 해결합니다. 1. **교차점 관찰자**: 차트는 화면에 표시되기 전까지는 렌더링되지 않습니다. 이는 긴 문서의 초기 로딩 시간을 크게 줄여줍니다. 2. **스케일러 본체**: 차트가 로딩되거나 초기화되는 동안, 간단한 본체 UI가 표시되어 레이아웃 변경을 방지하고 원활한 읽기 경험을 제공합니다. 3. **반응형 크기 조정**: NoteRich는 모든 ECharts 인스턴스에 자동으로 `ResizeObserver`를 연결하여, 창 크기 조정이나 사이드바 전환에도 차트가 원활하게 적응하도록 합니다. --- ## NoteRich ECharts의 모범 사례 NoteRich에서 ECharts를 최대한 활용하기 위해 다음 팁을 참고하세요. - **유효한 JSON 유지**: 설정이 유효한 JSON이어야 합니다. NoteRich는 구문이 잘못된 경우 편집기에서 오류 메시지를 표시하여 앱 충돌을 방지합니다. - **테마 일치**: NoteRich의 UI는 미니멀리즘과 단색 디자인입니다. 차트 설정에서 `#000` (주색), `#666` (보조 텍스트), `#eaeaea` (테두리/배경색)과 같은 색상을 사용하여 시각적 조화를 유지하세요. - **`grid` 사용**: 차트의 축과 레이블이 충분한 공간을 가지도록 하고 컨테이너의 가장자리에 의해 잘리지 않도록 `grid` 속성을 항상 정의하세요. - **로컬 AI 활용**: 복잡한 차트의 경우, AI가 대부분의 작업을 수행하도록 하세요. 필요에 따라 생성된 JSON을 수동으로 조정할 수 있습니다. --- ## 결론 대화형 데이터 시각화를 노트 작성 작업 흐름에 직접 통합하면, Excel이나 Tableau와 같은 외부 도구를 전환할 필요가 없습니다. **native ECharts** 지원을 통해 **NoteRich**는 로컬 지식 기반을 동적으로, 시각적으로, 심층적으로 인사이트가 있는 대시보드로 변환할 수 있도록 해줍니다. 이는 귀하가 기대하는 비공개성과 로컬 우선 철학을 유지하면서도 가능합니다. 오늘부터 데이터를 삽입하여 노트가 살아나는 것을 직접 확인해보세요. --- <div class="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]">ECharts</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]">AI 기반</span> </div>