환자 교육자료 · 갤러리 사용 안내

🚀 빠른 시작 (3분 체험)

1. 우상단 [⚙ AI 설정] 에서 Gemini API 키 입력 (무료, aistudio.google.com/apikey)
2. (권장) 헤더 [📁 저장 폴더] 로 저장 경로 지정 — 한 번만 설정하면 영구 유지
3. STEP 1에서 당뇨병 클릭 → STEP 2에서 영양 · 식단 클릭
4. STEP 3 옵션은 기본값 유지 → [✨ 교육자료 생성하기] 클릭
5. 약 20~40초 후 5~7개 섹션의 교육자료가 완성
6. 각 섹션의 [🎨 이미지 생성] 버튼으로 일러스트 추가
7. [🖨 PDF·인쇄] 또는 [💾 HTML 저장] 으로 환자 전달용 파일 저장
8. 외국인 환자면 [🌐 번역] 으로 10개 언어 중 선택해 바로 번역

📌 STEP 1 · 질환 선택

3개 대분류 중 하나를 선택합니다.

• 고혈압 — 본태성/2차성, 수축기·이완기 혈압관리 중심
• 당뇨병 — 1형/2형, HbA1c, 혈당조절 중심
• 복합 — 대사증후군, ASCVD 고위험 환자의 통합 관리

📂 STEP 2 · 세부 교육 분야

선택한 질환에 맞춰 6개 세부 분야 중 하나를 고릅니다.

🎛 STEP 3 · 대상·옵션 설정

✨ 교육자료 생성

[✨ 교육자료 생성하기] 클릭 시 진행률 바가 0 → 100% 로 표시됩니다.

• 약 20~40초 소요 (모델에 따라 상이)
• 한 번에 5~7개 섹션 + 경고 증상 + FAQ + 면책 문구 자동 구성
• JSON 파싱 실패 시 다른 모델로 재시도하세요 (드문 현상)

🎨 이미지 생성 · 프롬프트 편집

각 섹션의 [🎨 이미지 생성 / 편집] 버튼 → 모달 창에서 세부 설정 후 생성합니다.

프롬프트 구성 요소

• 이미지 종류: 해부 다이어그램 · 환자 일러스트 · 인포그래픽 · 식판 · 운동 동작 · 기기 사용 · 응급 대응
• 스타일: 플랫 인포그래픽 (권장) · 수채화 교과서풍 · 포토리얼 3D · 친근한 카툰
• 인물 (사람 묘사 시): 성별 · 연령대 · 인종 (한국인 권장)
• 비율: 정사각 · 가로 · 세로 · 와이드
• 네거티브 프롬프트: 제외할 요소 (기본: text, letters, words, watermark 등)

이미지 모델 비교

모델을 찾을 수 없다는 오류가 나면

모달 하단 [📋 내 키로 사용 가능한 이미지 모델 확인] 버튼을 누르면 본인 API 키로 접근 가능한 모델 목록이 출력됩니다. 목록에 원하는 모델이 없다면 Google AI Studio 에서 해당 모델 권한을 활성화하세요.

✏️ 내용 편집 (WYSIWYG)

생성 결과 하단의 [✏️ 내용 편집] 버튼을 누르면 문서가 편집 가능 상태로 전환됩니다.

• 편집 가능: 제목 · 부제 · 섹션 제목/본문 · 이미지 캡션 · 영상 설명 · 푸터
• 편집 불가(보호): 생성된 이미지 · QR 코드 · 액션 버튼
• [➕ 섹션] 경고/FAQ 앞에 새 섹션 삽입 · [🗑 섹션] 커서 위치 섹션 통째로 삭제
• 삭제 후엔 자동으로 번호 재부여 (경고·FAQ 제외)

🌐 다국어 번역 (외국인 환자 대응)

완성된 교육자료를 헤더의 [🌐 번역] 버튼으로 즉시 다른 언어로 번역해 전달할 수 있습니다.

지원 언어 10개 · Gemini 무료 모델

동작

• 자료 생성 완료 전까지 버튼 비활성화 (생성 후 자동으로 활성화)
• 클릭 → 언어 선택 → 번역 진행률 → 결과 모달
• 번역 결과 클립보드 복사 가능 (환자에게 메신저·이메일 전달)
• 번역에 사용되는 텍스트: 제목 + 부제 + 대상 + 모든 섹션 본문 + 경고 증상 + FAQ + 면책 문구 (HTML 태그 자동 제거된 평문)
• 번역 컨텍스트로 "환자 교육자료 (의료 교육 콘텐츠)" 전달 → 의학 용어 자연스러운 현지어 변환

🎬 관련 영상 QR 코드

각 섹션에 "관련 영상: [주제명]" 박스가 삽입되며, 우측에 YouTube 검색 QR 코드 가 자동 생성됩니다.

• QR 은 api.qrserver.com 을 통해 실시간 생성 (별도 라이브러리 불필요)
• 환자가 스마트폰으로 스캔 → YouTube 검색 결과 페이지로 이동 → 영상 선택
• 검색어는 AI가 섹션 주제에 맞춰 한국어로 자동 생성
• 필요 없는 경우 STEP 3 에서 "영상 QR 포함 안함" 선택 가능

🖨 PDF 저장 · 💾 HTML 저장 · 📁 폴더 설정

1. PDF 저장 (환자 전달용)

• 하단 [🖨 PDF·인쇄] 클릭 → 브라우저 인쇄 대화상자
• 대상 을 PDF로 저장 으로 선택 → 환자에게 전달 가능한 PDF 파일
• 이미지 · QR 코드 · 레이아웃 모두 인쇄 최적화 (페이지 분할 자동)
• 편집 모드 활성화 상태면 자동으로 해제 후 인쇄 (contenteditable 잔상 방지)

2. 📄 PDF 파일 저장 (폴더 지정 · 자동 파일명)

• 하단 [📄 PDF 파일 저장] 클릭 → html2canvas + jsPDF 로 실제 PDF 파일 생성
• 파일명 자동: {질환}_{세부분야}_{대상환자}_{생성일}.pdf
  • 예) 당뇨병_영양식단_남성-성인-일반_20260423.pdf
  • 대상환자 = 성별-연령대-이해수준 (STEP 3 옵션 기준)
• [📁 저장 폴더] 설정됐으면 다이얼로그 없이 해당 폴더로 직접 저장
• A4 세로 · 10mm 여백 · 긴 문서는 자동으로 여러 페이지로 분할
• 이미지·QR 모두 포함 · 인쇄 품질(scale=2x)
• 브라우저 인쇄 대화상자를 열지 않으므로 진료 중 빠르게 저장 가능

3. HTML 저장 (self-contained · 오프라인 열림)

• 하단 [💾 HTML 저장] 클릭 → 단일 HTML 파일 생성
• CSS · 이미지 base64 모두 내장 → 인터넷 없이도 이중클릭으로 열림
• 파일명 자동: {제목}_{YYYYMMDD_HHMM}.html
• 환자에게 USB · 이메일 · 메신저로 전달하기 편함
• 다운로드한 HTML 도 인쇄 다이얼로그에서 PDF 로 변환 가능

3. 📁 저장 폴더 설정 (자동 저장 경로 지정 · Chrome/Edge)

매번 저장할 때 다이얼로그가 뜨는 번거로움을 제거합니다. 지정된 폴더에 바로 저장됩니다.

폴더 설정 방법

1. 헤더의 [📁 저장 폴더 미설정] 버튼 클릭
2. 브라우저 폴더 선택 대화상자 → 원하는 폴더 선택
3. 접근 권한 허용 (Chrome/Edge 가 요청)
4. 버튼이 녹색으로 변하고 폴더명 표시 → 설정 완료

폴더 해제

• 헤더 폴더 버튼 옆의 [✕] 빨간 버튼 클릭 → 해제 → 기본 다운로드로 복귀

권장 워크플로

1. 진료실 PC 에서 "환자교육자료" 같은 전용 폴더를 미리 만들어둠
2. 한 번만 [📁 저장 폴더] 로 지정 → 이후 영구 유지
3. 자료 생성·편집 후 [💾 HTML 저장] → 자동으로 해당 폴더에 저장
4. 주기적으로 백업 (USB · 클라우드 동기화 등)

💝 기부 · 이지토큰 적립

완성된 자료를 갤러리에 기부 하면 이지토큰이 적립됩니다. [💝 기부 · 이지토큰 받기] 클릭 시:

• 적립 예상 내역(텍스트/이미지/편집 보너스) 미리보기
• 서버 용량 상태 · 자동 정리 대상 미리 안내
• 게시 계정: 기본 계정 ID, 선택 시 실명 공개
• 업로드 완료 시 잔액 즉시 반영

자세한 요율·tier 배수는 이지토큰 안내 페이지 참고.

⚙ AI 설정 (API 키)

우상단 [⚙ AI 설정] 모달에서 Gemini · Claude · OpenAI 키를 저장합니다. 키는 브라우저 localStorage 에만 저장되며 서버로 전송되지 않습니다.

Gemini (무료 · 권장)

보안 정책상 외부 API 공급자 대시보드 링크는 제공하지 않습니다. Google AI Studio 공식 홈페이지를 직접 검색하여 가입·키 발급을 진행하세요.

💡 Gemini 무료 모델은 DrPortal 공용 키로 자동 호출되어 개인 키 없이도 사용 가능합니다.

Claude · OpenAI (유료 · 선택)

• Claude: console.anthropic.com/settings/keys
• OpenAI: platform.openai.com/api-keys

❓ 자주 묻는 문제 · FAQ