다른 프로젝트 더보기 : https://dev-canvas-pi.vercel.app/
📝 실시간 마크다운 편집 및 미리보기: WYSIWYG과 유사한 경험을 제공하며, 입력과 동시에 결과 확인 가능.
📱 반응형 디자인:
데스크톱: 편집기와 미리보기를 나란히 배치.
모바일: 편집기 상단, 미리보기 하단 배치로 가독성 향상.
🎨 다양한 미리보기 테마: 'GitHub Light', '학술 논문 스타일' 등 문서 목적에 맞는 테마 선택 가능.
💅 깔끔한 UI 및 스타일: 콘텐츠에 집중할 수 있는 미니멀하고 현대적인 인터페이스.
💾 파일 작업:
새 파일, 마크다운 파일(.md) 불러오기.
마크다운(.md), HTML(.html), PDF(.pdf) 형식으로 내보내기.
마크다운 콘텐츠 클립보드 복사.
✍️ 서식 도구 모음: 굵게, 기울임꼴, 취소선, 링크, 인라인 코드, 코드 블록, 목록, 인용문, 제목(H1-H4) 등 빠른 서식 적용.
📑 목차(ToC) 자동 생성: 문서 내 제목을 기반으로 목차를 손쉽게 삽입.
📊 통계 표시: 실시간 단어 수 및 글자 수 표시.
🔄 자동 저장: 작업 내용이 브라우저 로컬 스토리지에 주기적으로 자동 저장되어 유실 방지.
⚙️ API 키 관리: 사용자가 직접 Gemini API 키를 입력하고 로컬 스토리지에 저장 및 상태 확인.
💬 사용자 피드백: 토스트 메시지를 통해 작업 결과 및 오류 알림.
✅ 확인 모달: 중요한 작업 수행 전 사용자 확인을 통한 안전성 확보.
↔️ 스크롤 동기화: 분할 보기 모드에서 편집기와 미리보기 창 간 스크롤 위치 동기화.
🤖 Gemini AI 기반 기능:
AI 포맷팅: 전체 마크다운 문서의 구조와 가독성을 AI가 자동으로 개선.
AI 텍스트 지원 (선택 영역 대상):
요약하기: 선택한 텍스트를 간결하게 요약.
자세히 쓰기: 선택한 텍스트에 살을 붙여 풍부하게 확장.
톤 변경: 전문적으로, 친근하게, 간결하게 등 다양한 어조로 변환.
AI 기반의 다양한 편의 기능을 사용하려면 Google Gemini API 키가 필요합니다. 애플리케이션 내에서 API 키를 설정하고 관리할 수 있습니다.
애플리케이션 UI를 통한 설정 (권장):
편집기 상단에 위치한 "Gemini API 키" 입력 필드에 자신의 API 키를 붙여넣습니다.
"키 저장 및 활성화" 버튼을 클릭합니다.
입력된 키는 브라우저의 로컬 스토리지에 안전하게 저장되며, 이후 방문 시 자동으로 로드됩니다.
키의 유효성 검사 후 상태 메시지 (예: "Gemini API 활성 상태", "API 키가 유효하지 않습니다.")가 표시됩니다.
환경 변수 (초기 로드 시 대체):
만약 로컬 스토리지에 저장된 API 키가 없고, 애플리케이션이 process.env.API_KEY 환경 변수를 읽을 수 있는 환경(예: 특정 호스팅 환경 또는 개발 프레임워크 내)에서 실행된다면, 이 환경 변수 값이 초기 API 키로 사용될 수 있습니다. 하지만, 사용자 UI를 통한 설정이 우선됩니다.
API 키가 성공적으로 활성화되면, "AI 포맷" 및 "AI 도우미" 버튼이 활성화되어 Gemini AI 기능을 사용할 수 있습니다.
텍스트 편집: 왼쪽(또는 상단)의 편집기 창에 마크다운 문법으로 내용을 입력합니다.
실시간 미리보기: 오른쪽(또는 하단)의 미리보기 창에서 렌더링된 HTML 결과를 즉시 확인할 수 있습니다.
서식 도구 모음: 상단 도구 모음의 아이콘을 클릭하여 텍스트 서식(굵게, 링크, 목록 등)을 쉽게 적용할 수 있습니다. 제목 수준(H1-H4)은 드롭다운 메뉴에서 선택합니다.
파일 작업:
새 파일: 현재 내용을 지우고 초기 상태로 돌아갑니다.
불러오기: 로컬 시스템에서 .md 또는 .txt 파일을 불러와 편집합니다.
MD 저장: 현재 내용을 마크다운 파일(.md)로 다운로드합니다.
HTML 저장: 현재 내용을 스타일이 적용된 HTML 파일로 다운로드합니다.
PDF 저장: 현재 내용을 PDF 파일로 다운로드합니다.
복사: 현재 마크다운 내용을 클립보드에 복사합니다.
보기 모드 변경: 분할 보기, 편집기, 미리보기 버튼을 사용하여 화면 레이아웃을 전환합니다.
미리보기 테마 변경: '미리보기 테마' 드롭다운에서 원하는 테마를 선택하여 미리보기 스타일을 변경합니다.
목차 삽입: 목차 버튼을 클릭하면 문서의 제목(H1-H4)을 기반으로 현재 커서 위치에 목차가 자동 생성되어 삽입됩니다.
AI 기능 활용: (API 키 설정 필요)
AI 포맷: 전체 문서의 마크다운 포맷을 AI가 개선합니다.
AI 도우미: 텍스트를 선택한 후, 드롭다운 메뉴에서 요약하기, 자세히 쓰기, 톤 변경 등의 기능을 실행하여 선택된 내용을 AI가 수정하거나 확장합니다.
문서의 분위기와 목적에 맞게 미리보기 스타일을 변경할 수 있습니다.
GitHub Light: GitHub 스타일의 깔끔하고 익숙한 라이트 테마입니다.
학술 논문 스타일: 논문이나 보고서 작성에 적합한 클래식하고 가독성 높은 테마입니다.
선택한 테마는 로컬 스토리지에 저장되어 다음 방문 시에도 유지됩니다.
Gemini API 키를 설정하면 다음과 같은 강력한 AI 기능을 사용할 수 있습니다:
AI 마크다운 포맷팅: 작성된 전체 마크다운 내용의 문법 오류 수정, 구조 개선, 가독성 향상 등을 자동으로 수행합니다.
AI 텍스트 지원:
요약하기: 긴 텍스트 블록을 선택하고 실행하면 핵심 내용을 간추려줍니다.
자세히 쓰기: 짧은 아이디어나 문장을 선택하고 실행하면 AI가 내용을 더 풍부하고 상세하게 확장해줍니다.
톤 변경 (전문적으로, 친근하게, 간결하게): 선택한 텍스트의 어조를 원하는 스타일에 맞게 변환해줍니다.
AI 기능은 작업 전 사용자 확인을 거치며, 작업 중에는 해당 버튼이 비활성화되고 상태가 표시됩니다.
자동 저장: 작성 중인 내용은 몇 초 간격으로 로컬 스토리지에 자동 저장됩니다. 브라우저를 닫았다가 다시 열어도 이전 작업 내용을 불러올 수 있습니다 (확인 후).
스크롤 동기화: 분할 보기 모드에서는 편집기와 미리보기 창의 스크롤이 자동으로 동기화되어 긴 문서 작업 시 편리합니다.
코드 복사: 미리보기 창의 코드 블록 우측 상단에는 복사 버튼이 제공되어 코드를 쉽게 복사할 수 있습니다.
외부 링크: 미리보기 창의 모든 외부 링크는 새 탭에서 열리도록 처리되며, 아이콘으로 구분됩니다.
첫 번째 댓글을 작성해보세요!