콘텐츠로 이동

펜차트 (종이차트)

진입 위치: - 진료실 차트 페이지 → 우측 패널 [펜차트] 버튼 - 차트 팝업 메뉴 → 펜차트 라우트: /popup/chart/paper-chart?patientId=... (팝업) / 차트 내 모달 권한: 전 직원 (level 1~5)

한 줄 요약

환자의 동의서·문진표·초진기록지·기타 자유 메모를 캔버스에 직접 그려 저장. 안드로이드 태블릿 펜차트 앱과 동기화되어 태블릿에서 환자가 직접 사인받은 결과도 같은 화면에서 조회.

두 가지 사용 흐름

1. 웹 차트에서 직접 작성 (마우스/펜)

진료실에서 차트 보면서 빠르게 메모. 마우스로 그릴 수 있어 즉시 처리.

2. 태블릿 앱으로 환자 사인 받기

환자 동의서/문진표 → 안드로이드 태블릿 펜차트 앱에서 환자가 직접 펜으로 사인 → 자동으로 웹 차트로 동기화.

화면 구성

[펜차트 — 김보혜 (44/여)]                                              [X]
┌──────────────┬────────────────────────────────────────────────────┐
│ 좌측 패널    │ [↶ 실행취소] [↷ 다시실행] [지우기]                │
│              │ 펜/지우개  굵기 ▾  색상 ●                         │
│ ─ 작성된 차트│ ────────────────────────────────────────────────│
│   카테고리/  │                                                    │
│   날짜별     │              [캔버스 영역]                          │
│             │       (마우스/펜으로 직접 그림)                      │
│   - 26-05-19│       (서식 이미지 위에 덮어 그리기 가능)           │
│     • 동의서 │                                                    │
│       (서명) │                                                    │
│     • 문진표 │                                                    │
│ ─ 새 차트    │ ────────────────────────────────────────────────│
│   + 동의서  │ 태그: [환자 #초진 #동의서]              [저장]    │
│   + 문진표  │                                                    │
│   + 초진기록 │                                                    │
│   + 기타    │                                                    │
└──────────────┴────────────────────────────────────────────────────┘

4가지 카테고리

카테고리 한글명 용도 예시
INITIAL_RECORD 초진기록지 환자 첫 방문 시 작성 다이어트 초진, 피부 초진
CONSENT 동의서 환자 동의 받는 양식 시술 동의서, 개인정보 동의
SURVEY 문진표 환자 응답 양식 한약 복용 문진, 알레르기 문진
OTHER 기타 자유 메모 빈 캔버스

카테고리별 시드 서식이 미리 등록되어 있고, 직원/관리자가 추가 가능: 펜차트 서식 관리

직원 사용 흐름 — 새 차트 작성

빠른 시나리오: 시술 동의서 받기

  1. 환자 차트 진입 (진료실 또는 환자관리)
  2. 우측 패널 → [펜차트] 버튼 → 모달 또는 별도 팝업 창
  3. 좌측 패널 → + 동의서 펼치기 → 원하는 양식 선택 (예: "보톡스 시술 동의서")
  4. 캔버스에 양식 이미지가 배경으로 표시됨
  5. 태블릿 모드: 환자에게 태블릿 건네서 직접 사인 받기
  6. 즉석 모드: 직원이 환자 대신 마우스/펜으로 사인 표시
  7. 태그 입력 (예: #보톡스 #2026-05-19) → [저장]
  8. 저장된 차트는 좌측 패널의 "작성된 차트" 영역에 누적

캔버스 도구 (CanvasToolbar)

도구 단축키 동작
펜 P 자유 드로잉 — 굵기/색상 선택
지우개 E 그린 부분 지우기
굵기 - 1px / 3px / 5px / 10px
색상 - 검정 / 빨강 / 파랑 / 초록 / 노랑
실행취소 Ctrl+Z 마지막 동작 취소
다시실행 Ctrl+Shift+Z 취소한 동작 복원
전체지우기 - confirm → 캔버스 초기화
회전 - 90° 좌/우 회전
확대/축소 +/- 줌 in/out, [원래 크기로] 복원

태블릿 앱 동기화 흐름

[웹 차트 — 직원]              [짱한의원 태블릿]            [환자]
─────────────────────────────────────────────────────────────────
1. 동의서 양식 선택           
                              ← 동기화 ←
2. (태블릿 화면 자동 갱신)
                                          → 화면에 양식 표시 →   3. 환자가 펜으로 사인
4. 자동 저장 (PNG)            
   ← 동기화 ←
5. "작성된 차트"에 표시

태블릿 앱은 안드로이드 빌드 별도 — 빌드/배포 정보는 git repo CLAUDE.md 의 "Android 앱 (짱한의원 펜차트)" 섹션 참조 (개발자 문서, 매뉴얼 사이트 외부).

태블릿 동기화는 WebSocket / SSE 기반 실시간 푸시 (네트워크 양호 시 < 1초).

작성된 차트 조회

좌측 패널 정렬 옵션

정렬 표시
날짜별 (date) 작성일자 내림차순 — 최신 위
카테고리별 4종 카테고리로 묶음

검색 / 필터

필드 동작
기간 시작/종료일 (기본: 전체)
키워드 태그 / 양식명 부분 매칭
다중 보기 작성된 차트 여러 개 동시 펼침 (MultiViewerModal)

각 행 클릭 → 우측 캔버스 영역에 표시 + 회전/확대/축소 + 인쇄 가능.

인쇄

  1. 작성된 차트 행 선택 → 우측 상단 [인쇄] 버튼
  2. 별도 인쇄 창 → 브라우저 인쇄 다이얼로그 (Ctrl+P)
  3. 환자 동의서를 종이로 보관해야 할 경우 사용

태그 사용

태그는 작성된 차트 검색/분류에 사용: - 자유 입력 (예: #초진, #보톡스, #알레르기-있음) - 여러 태그 콤마 또는 스페이스 구분 - 후속 검색에서 태그로 필터 가능

안전장치 / 보안

항목 동작
저장 전 확인 빈 캔버스 저장 시 confirm
삭제 권한 본인 작성 + admin (시술 동의서는 admin만 삭제 가능)
태블릿 ↔ 웹 동기화 실패 대응 태블릿 로컬 저장 후 네트워크 복구 시 재전송 (앱 자동)
이미지 형식 PNG 저장 (벡터 X — 줌 시 픽셀화 가능)
백업 작성된 차트는 chart_attachments 테이블에 저장 + S3/디스크 백업

권한별 차이

기능 권한
차트 조회 🟢 전 직원
새 차트 작성 🟢 전 직원
본인 작성 차트 수정/삭제 🟢 작성자
타인 작성 차트 수정/삭제 🟡 admin / Level 1~2
환자 사인 받은 동의서 삭제 🔴 Level 1만 (법적 보관 의무 고려)
펜차트 서식 추가/편집 🟡 Level 1~3 서식 관리 참조

자주 묻는 질문 / FAQ

Q. 태블릿에서 환자가 사인했는데 웹에 안 떠요

체크: 1. 태블릿 앱이 최신 버전인지 (https://dev-jjang.genaidev.io/install-pen-chart-apk.html 또는 운영팀 배포 APK) 2. 태블릿이 같은 Wi-Fi인지 (서버 접근 가능해야 함) 3. 환자 검색 → 동일 환자 선택했는지 (이름·차트번호 매칭) 4. 웹 [새로고침] (또는 좌측 패널 ↻ 클릭) 5. 그래도 안 되면 chart_attachments DB 직접 확인 (#dev 문의)

Q. 캔버스가 흐릿하게 보여요

화면 확대(브라우저 Ctrl+) 또는 캔버스 확대([확대] 버튼) 후에는 픽셀이 늘어나 흐릿. [원래 크기로] 클릭 후 확대 비율 조정.

Q. 실행취소가 안 돼요

캔버스 동작 한 번만 저장됨 (브러시 한 획). 저장 후에는 실행취소 불가. 잘못된 저장은 좌측 패널에서 해당 행 삭제 후 재작성.

Q. 동의서 양식이 없어요

펜차트 서식 관리 페이지에서 PNG 양식 업로드 → 카테고리 = CONSENT로 등록.

Q. 환자가 사인한 동의서를 인쇄해서 보관해야 하나요?

법적 보관 의무는 병원 정책. 시스템 내 저장(chart_attachments) + 디스크 백업으로 충분한 경우 다수. 종이 보관이 필요하면 [인쇄] 사용.

Q. 환자 정보 수정 후 펜차트 환자 이름이 안 바뀌어요

환자 정보 변경 후 펜차트 모달 새로 열어야 갱신됨 (모달 내 환자 정보는 진입 시점 캐시).

Q. 태블릿 앱이 자꾸 종료돼요

Android 펜차트 앱 충돌 시 #dev 문의. 빌드 정보: android/ 디렉토리 + 사내 APK 배포 채널.

Q. 캔버스가 너무 작아요

모달 우하단 모서리 드래그 → 크기 조절. 또는 별도 팝업(/popup/chart/paper-chart) 으로 전체 화면 사용.

관련 페이지