7단계 입력 폼 + AI Vision 분석으로 만성질환 환자 교육용 인포그래픽을 자동 생성합니다. 공유형(갤러리)과 병원용(병원명·로고 자동 삽입)으로 분리 운영하며, 이전 교육자료를 첨부하면 AI가 텍스트로 변환해 드립니다.
가장 빠른 경로 — 의사가 환자에게 설명한 내용을 그대로 붙여넣고 1분 만에 인포그래픽을 받는 흐름입니다.
⚙️ 버튼 클릭 → sk-... 형태의 OpenAI 본인 키 입력 → [저장][만성질환관리교육-당뇨병] 자가혈당측정(SMBG)의 중요성
[교육실시내역] 자가혈당측정은 본인의 혈당 패턴을 이해하고...
4) 핵심 키워드 : #자가혈당측정 #SMBG #혈당기록
같은 교육 내용이라도 어디에 쓸지에 따라 2가지 모드 중 선택하세요.
| 🌐 공유형 | 🏥 병원용 | |
|---|---|---|
| 용도 | 갤러리·SNS·블로그 공유 | 우리 병원 환자 안내문 |
| 병원명·의사명 | ❌ 자동 제외 | ✅ 회원정보 자동 채움 (수정 가능) |
| 로고 삽입 | ❌ | ✅ 첨부 시 하단 우측 자동 배치 |
| OpenAI API | /v1/images/generations | 로고 있을 시 /v1/images/edits, 없을 시 generations |
| 갤러리 기부 | ✅ 가능 | ❌ 차단 (개인 식별 정보 보호) |
session.hospitalName → 병원명 입력란에 자동session.name + 역할(원장/의사) → 의사명 입력란에 자동이미지 안 모든 텍스트를 13가지 언어 중 하나로 출력합니다. 모드 토글 아래 노란색 row의 [🌐 출력 언어] 셀렉트에서 변경.
| 구분 | 언어 (10 + 3) | 주요 활용 |
|---|---|---|
| 단일 언어 | 🇰🇷 한국어 / 🇬🇧 English / 🇨🇳 简体中文 / 🇹🇼 繁體中文 / 🇯🇵 日本語 / 🇻🇳 Tiếng Việt / 🇹🇭 ภาษาไทย / 🇪🇸 Español / 🇷🇺 Русский / 🇲🇳 Монгол | 이미지 안 텍스트 1종 단독 |
| 다국어 병기 | 🌏 한국어 + English / 한국어 + Tiếng Việt / 한국어 + 简体中文 | 한국어 큰 헤더 + 외국어 작은 부제 동시 표기 |
영어 프롬프트에 4개 항목(이름·script·우선/금지)이 정확히 전달됩니다:
ALL on-image text must be in {언어 이름} — 예: Vietnamese (Tiếng Việt)Use proper {script} — 예: Vietnamese with diacritical marksKorean as primary text + Vietnamese as smaller secondary subtitle의사가 환자에게 설명한 내용을 그대로 textarea에 붙여넣습니다. 형식이 자유로워도 자동 파서가 다음을 인식합니다:
[카테고리-질환] 패턴 → 자료 카테고리, 질환 분야 자동 매핑#해시태그 → 강조 키워드 자동 체크이전에 만든 PDF 캡처, 안내문 사진 등을 첨부하면 gpt-4o-mini Vision이 한국어로 텍스트화해 줍니다.
위 자동화 없이 7단계 폼(A주제·B대상·C메시지·D시각·E디자인·F출력·G안전)을 직접 채워가며 만들 수 있습니다. 모든 옵션이 통제 가능한 콤보박스/체크박스/라디오로 제공됩니다.
이전에 만든 환자 교육자료 이미지를 첨부하면 OpenAI gpt-4o-mini Vision API가 다음을 추출합니다:
| 추출 항목 | 내용 | 이후 사용 |
|---|---|---|
[카테고리-질환] | 자료 카테고리 + 질환 분야 | A 자료 카테고리·질환 자동 채움 |
| 자료명/주제 | 자료의 핵심 주제 | A 자료명·세부 주제 자동 채움 |
[교육실시내역] | 본문 200~400자 한국어 요약 | textarea에 채움 + 프롬프트 앵커로 사용 |
| 핵심 키워드 | #키워드 5개 이내 | C 강조 키워드 자동 체크 (적용 시) |
각 섹션은 collapsible(접기/펼치기) <details>로 구성되어 화면을 압축할 수 있습니다.
일반 의료 인포그래픽 표준 default가 미리 채워져 있어 그대로 사용해도 무방합니다. 필요 시 색상 테마, 텍스트 밀도, 출력 포맷, 제외 요소 등을 조정.
소스 이미지가 첨부되어 있으면 우측 토글이 자동으로 표시됩니다.
| 옵션 | API | 입력 이미지 | 사용 시나리오 |
|---|---|---|---|
| ✏️ 텍스트 기반 새 생성 (default) | /v1/images/generations | 없음 | Vision으로 추출한 텍스트만으로 깔끔한 새 인포그래픽 |
| 🔄 첨부 이미지 변형 | /v1/images/edits | 소스 이미지 | 기존 자료의 구도·메시지를 살리며 새 디자인으로 재구성 |
| 형식 | 이미지 사이즈 | 주요 용도 |
|---|---|---|
| A4 세로형 교육자료 | 1024×1536 | 병원 출력물, EMR 첨부 |
| A4 가로형 교육자료 | 1536×1024 | 2단·3단 접지물 |
| 1:1 카드뉴스 | 1024×1024 | 인스타그램, 카페 게시글 |
| 4:5 카드뉴스 | 1024×1536 | 인스타·블로그 본문 |
| 16:9 썸네일 | 1536×1024 | 유튜브·블로그 표지, 대기실 모니터 |
| 9:16 모바일 포스터 | 1024×1536 | 카카오톡, 모바일 공유 |
| 병실 TV/대기실 모니터용 | 1536×1024 | 병원 디스플레이 슬라이드 |
| EMR 첨부용 설명 카드 | 1024×1024 | EMR 진료기록 첨부 |
2026-04 기준 한국어 가독성이 검증된 단일 모델입니다. 이전에 있던 gpt-image-1.5는 한국어 텍스트 깨짐 이슈로 제외되었습니다.
| 품질 | 출력 토큰 | 비용 (1장) | 예상 시간 | 권장 용도 |
|---|---|---|---|---|
| Low (저렴) | ~167 | ~7원 | ~6초 | 빠른 시안 확인 · 변형 다수 비교 |
| Medium (default) | ~1,367 | ~57원 | ~12초 | 일반 환자 교육자료 (권장) |
| High (고품질) | ~5,500 | ~228원 | ~22초 | 대형 출력·인쇄용 최종본 |
변형 모드(/v1/images/edits)는 입력 이미지 토큰이 추가되어 시간이 약 1.4× 더 소요됩니다.
| 브라우저 | 지원 | 동작 |
|---|---|---|
| Chrome / Edge / Opera | ✅ | 지정 폴더 자동 저장 |
| Firefox / Safari | ❌ | 일반 다운로드(브라우저 기본) 자동 fallback |
다양한 정보를 토큰으로 조합한 파일명 패턴을 지정할 수 있습니다.
{date}_{topic}_{subtopic}_{mode} — 날짜_질환_주제_모드 (default){topic}_{subtopic}_{date}{date}_{title} (간단)[{topic}][{subtopic}]_{date}_{mode}{datetime}_{topic}_{subtopic}_{quality}{hospital}_{doctor}_{date}_{subtopic} (병원용)DrPortal_{date}_{topic}_{subtopic}_{mode}| 토큰 | 예시 |
|---|---|
{date} | 2026-04-28 |
{datetime} | 20260428_1430 |
{time} | 1430 |
{topic} | 당뇨병 |
{subtopic} | 자가혈당측정SMBG의중요성 |
{title} | 자료명 |
{category} | 환자 교육자료 |
{mode} / {mode_short} | 공유형 / share |
{quality} | medium |
{format} | A4 세로형 교육자료 |
{hospital} / {doctor} / {age} | 병원용 모드 정보 |
빈 토큰은 자동 생략, 연속 underscore 압축, 파일시스템 금지 문자 자동 치환, 100자 길이 제한.
도구 헤더 우측 [🎨 테마] 버튼 → 드롭다운 popover에서 배경 테마 + 글자 크기를 변경할 수 있습니다.
| 구분 | 4종 | 특징·권장 |
|---|---|---|
| 밝은 계열 | 파스텔 / 사쿠라 / 민트 / 바닐라 | 밝은 배경 + 따뜻한 톤. 일상·친근한 작업 환경 (default) |
| 어두운 계열 | 미드나잇 / 오션 / 포레스트 / 오버진 | 어두운 배경 + 발광 액센트. 야간 작업·눈 피로 감소 |
선택값은 portal-theme · portal-fs localStorage 키로 저장되어 다음 DrPortal 페이지와 자동 공유됩니다:
한 곳에서 고르면 모든 페이지에 자동 적용됩니다. FOUC(첫 페인트 깜빡임) 없이 즉시 적용 — 페이지 head 사전 적용 스크립트가 처리.
이미지 생성 후 [🎁 갤러리 기부] 버튼이 결과 영역에 나타납니다.
| 모드 | 버튼 상태 | 클릭 시 |
|---|---|---|
| 🌐 공유형 | 활성 (gold) | 기부 모달 → 토큰 적립 |
| 🏥 병원용 | 비활성 (회색) | 차단 안내 alert |
/easy_contributions 노드 업로드type="password"로 화면에서도 가려짐sk- 접두사 검증 (다른 형식이면 confirm)| 데이터 | 저장 위치 | 지속성 |
|---|---|---|
| OpenAI API 키 | sessionStorage | 탭 닫으면 삭제 |
| 병원 로고 | localStorage (hospitalId 스코프) | 2MB 이하 영구 |
| 저장 폴더 핸들 | IndexedDB | 영구 (권한은 1회 재요청) |
| 파일명 템플릿 | localStorage | 영구 |
| 생성된 이미지 | 지정 폴더 또는 Downloads (사용자 선택) | 파일 |
| 갤러리 기부 자료 | Firebase RTDB | 영구 (관리자 정책 적용) |
OpenAI 공식 사이트에서 본인 계정으로 발급받아야 합니다. DrPortal에서 직접 발급해 드리지 않습니다 (보안 정책).
키는 결제 정보 등록 후에 사용 가능하며, gpt-image-2는 paid 모델이라 무료 크레딧 외 결제 한도 설정이 필요합니다.
방법 1 — 가장 간단: 모드 토글만 변경 후 [🎨 이미지 생성] 다시 클릭. 다른 모든 옵션은 유지됩니다.
방법 2 — 미세 조정: 텍스트 자료명·키워드 등을 직접 편집한 뒤 재생성.
다음을 확인해 주세요:
File System Access API는 Chromium 기반 브라우저(Chrome·Edge·Opera)에서만 지원됩니다. Firefox/Safari는 자동으로 일반 다운로드(브라우저 기본 폴더)로 fallback 됩니다.
해당 브라우저는 [📂 폴더 선택] 버튼이 비활성 상태로 표시되며, ⚠️ 안내 박스가 함께 표시됩니다.
✏️ 텍스트 기반 새 생성: 텍스트 프롬프트만으로 처음부터 새 디자인. 결과의 자유도가 크지만 원본 의도와 다를 수 있음.
🔄 첨부 이미지 변형: 첨부 이미지를 input으로 받아 재디자인. 원본 구도·핵심 메시지는 유지되며 디자인만 향상. 안정적이지만 자유도가 낮음.
같은 옵션으로 두 모드 결과를 비교 후 선택을 권장합니다.
OpenAI 약관에 따라 사용자가 생성한 이미지의 권리는 사용자에게 있습니다. 단:
OpenAI 콘텐츠 정책상 다음은 분석 거부될 수 있습니다:
해결책: 해당 부분을 가리거나 도식화된 이미지로 다시 시도. 또는 Vision 없이 텍스트 직접 입력 방법으로 우회.
가능합니다. 단 공유형 모드로 만들었을 때만 기부됩니다 (병원용 모드는 차단).
다국어 자료도 한국 의료 환경에 도움이 되므로 권장합니다. 기부 시 자료명·태그는 가능하면 한국어로 입력해 다른 회원이 검색하기 쉽도록 해 주세요.
의도적으로 흰색을 유지하는 영역이 일부 있습니다:
그 외 영역에서 가독성 문제가 있으면 알려 주세요 — 추가 보완하겠습니다.
현재 폰트 크기 토글은 본문 기반(body inheritance) 텍스트에만 적용됩니다. 다음 요소는 px 하드코딩이라 영향받지 않습니다:
주요 본문(폼 라벨·입력값·결과 패널 텍스트)은 정상 스케일됩니다. 추후 라운드에서 전체 px → em/rem 변환 예정.
갤러리 기부(공유형 모드만) 시점에 즉시 적립됩니다. 추가로 다른 회원이 좋아요를 누르면 누적 적립 (좋아요 단위로 추가 토큰).
적립 내역은 사이드바 ⚡ 이지토큰 메뉴에서 확인 가능합니다.