랩 매니저

연구실을 한곳에서 꾸리는 웹앱(PWA)이에요. 제목 옆 [행정 | 연구] 스위치로 모드를 바꿔요. 연구 모드(프로토콜·계산기·재고·기기·팁)는 학생과 같이 쓰고, 행정 모드(한눈에 보기·예산·인건비·정보·서류)는 PI만 봐요. 마지막에 쓴 모드로 다시 열려요. 설치 없이 브라우저에서 열고, 폰에서는 홈 화면에 추가해 앱처럼 써요.

주소: https://kkonoo.github.io/lab-manager/

모드	탭	하는 일
행정	한눈에 보기	행정 모드 첫 화면. 확인할 것(기간 밖 인건비·배정액 빈 칸·오래 기다리는 주문 등), 과제 기간·연차, 이번 달 학생별 인건비
행정	재원별 예산	과제(책임·참여)·BK21별 연차 예산, 세목 예산(계획·집행), 과제 개요
행정	인건비	학생·포닥 × 재원 × 월 인건비 표 (학기 보기 / 월 보기, 5학기씩 — 그 구간에 인건비 받는 사람만), 참여율
행정	정보	행정 절차 노트, 행정 정보 표(🔒 칸은 가려서 보임), 내선번호
행정	서류	학교 양식(교육 중간보고서·출장 서류·구매 규격서·회의록·영문 레터)을 채워 A4 PDF로 저장. ✨ 자동 채우기로 메모·PDF·사진에서 빈 칸을 채우거나 고침 (각자의 Claude API 키)
연구	프로토콜	묶음(NGS, 세포 배양 …) → 프로토콜. 본문 노트(준비·순서·주의할 점, 체크 가능) + 재료(재고와 연결: 보관 위치·살 것·주문함), 인쇄/PDF
연구	계산기	실험 계산기: 몰농도·희석·버퍼 조제·세포 seeding. 버퍼 프리셋은 PI가 정하고 랩이 같이 봐요
연구	재고	장보기처럼 '살 것' → 주문 → 받음, 보관 위치 지도, 업체 연락처. 주문 금액은 세목 집행에 더해짐
연구	기기	공동기기 handbook. 프로토콜과 같은 틀(묶음 → 기기, 본문 노트에 사용법·주의사항, 인쇄/PDF) + 위치·담당자(목록엔 위치, 묶음 안은 이름 abc순)·사진(PI가 넣고 학생은 봐요). PI는 🏫 공동기기 목록 넣기로 의대 연구기기현황·생명의학연구원 Core lab의 기기 정보(js/equip.js의 SHARED_EQUIPS)를 묶음째 넣어요
연구	팁	앱에 들어 있는 팁(발표·논문 쓰기·논문 표현·통계 검정·공부와 AI·그림)을 보기 좋게 보고 A4로 인쇄. PI는 Google 문서(·PDF) 링크를 더 넣을 수 있어요

처음 쓸 때

1. 처음엔 예시 데이터(가짜 과제·학생·금액·프로토콜)가 들어 있어요. 둘러보고 고쳐 쓰거나 지우고 시작해요.
2. 서류 탭 → 👤 내 정보에 소속·성명·연락처·도장·서명(영문 레터용 영문 이름·직함·주소도)을 넣으면 서류마다 미리 채워져요.
3. 오른쪽 위 로그인(구글 계정)을 하면 PC·폰에서 같은 데이터를 봐요. 로그인 전에는 이 브라우저에만 저장돼요.
4. 이미 쓰던 데이터가 있으면 설정 → 데이터 → 가져오기로 JSON 파일을 넣어요 (내보내기로 백업).

학생과 같이 쓰기

• 설정 → 계정 → 랩 멤버에 학생의 구글 이메일을 적어요.
• 학생이 같은 주소에서 그 계정으로 로그인하면 연구 모드(프로토콜·계산기·재고·기기·팁)만 보여요. 프로토콜·품목·살 것·보관 위치·주문·받음·기기 페이지를 같이 쓰고, 주문의 재원(과제·세목)·기기 사진·팁 링크는 PI만 정해요.
• 행정 모드(예산·인건비·정보·서류)는 학생에게 보이지 않아요. Firestore 보안 규칙이 서버에서 막아요.

실험 계산기

연구 모드의 계산기 탭이에요 (PI·랩 학생 모두, 로그인 안 해도 계산은 돼요). 계산 값은 저장하지 않아요. 왼쪽 목록(폰에선 위 2×2)에서 고른 계산기 하나가 보이고, 칸을 채우면 바로 계산돼요 (다른 계산기나 탭에 갔다 와도 넣은 값은 그대로): 몰농도(질량 = 몰농도 × 부피 × MW, 셋 중 빈 칸을 계산), 희석(C1V1 = C2V2, 몰농도·mg/mL·배수 X를 자동 변환해 'stock 10 µL + 용매 990 µL'처럼), 버퍼 조제(최종 부피와 성분 행 → 성분별 g·mL 표, 프리셋을 불러와 고치기, pH는 직접), 세포 seeding(hemocytometer 평균 × 희석배수 × 10⁴ = cells/mL 또는 직접 입력 → 6~96-well 프리셋의 웰 면적·권장 부피로 '현탁액 ○ mL + 배지 ○ mL', 여유분 % 포함). 부피는 2 mL 아래면 µL로 보여 주고(세포 카드는 mL), 0·음수·빈칸은 결과 칸에 짧은 안내만 떠요. 예전 주소(calc.html)로 열면 이 탭으로 넘어와요.

버퍼 프리셋 공유 — 로그인하면 PI와 랩 학생이 같은 프리셋을 봐요 (로그인 전엔 기본 프리셋 PBS 1X·TBS 1X·10X TAE만). PI만 프리셋 줄 끝의 **+**로 지금 표를 프리셋으로 저장하고, 프리셋을 길게 눌러(PC는 오른쪽 클릭) 이름·pH 메모 바꾸기, 지금 표로 바꾸기, 지우기를 해요. 기본 프리셋도 고치거나 지울 수 있고 + 창의 기본 프리셋 되돌리기로 처음 값으로 돌아와요 (직접 만든 건 그대로). 랩 학생은 보기만 하고, PI가 고치면 학생 화면에도 바로 바뀌어요.

서류 자동 채우기 (AI)

서류 화면의 ✨ 자동 채우기를 누르고 메모·메일·안내문을 붙여 넣거나 PDF·사진(견적서, 학회 안내, 초청장 …)·한글 hwpx 파일을 붙이면, Claude(claude-opus-5-5)가 읽고 빈 칸을 채워요. 한글로 이미 채워 둔 같은 서류(.hwpx)를 붙이면 그 내용을 앱 양식으로 옮겨요 (예전 .hwp는 한글에서 hwpx나 PDF로 저장해서). 이미 쓴 칸은 메모가 바꾸라고 할 때만(예: "의학연구 기법 및 기기 50명 됨" → 그 과목 인원만) 그 부분을 고쳐요 — 지난해 문서를 복사해 고칠 때 좋아요. 자동 계산 칸(출장 기간·참석 인원 등)은 그대로고, 자료에 없는 숫자·날짜·이름은 지어내지 않아요. 바뀐 칸은 ↶ 되돌리기로 그 전으로 돌려요 (새로고침 전까지). 채운 뒤 꼭 확인해요.

• API 키는 각자 — 설정 → AI 자동 채우기에 자기 Anthropic API 키를 넣어요 (console.anthropic.com → API Keys). 쓴 만큼 그 키의 계정에 요금이 나가요.
• 키는 내 계정 데이터(users/{내 uid}/admin/aiKey)에 저장돼서 로그인한 PC·폰에서 같이 써요. 보안 규칙상 본인만 읽고, 랩 멤버(학생)는 못 봐요. 로그아웃하면 그 기기에선 지워져요. 내보내기 JSON엔 안 들어가요 (가져오기를 해도 지금 키는 그대로). 로그인 전엔 이 브라우저에만 있어요.
• 요청은 브라우저에서 Anthropic API로 바로 가요 (서버 없음). 사진은 긴 변 2000px로 줄여서 보내요. 환자 정보·미발표 데이터는 넣지 않아요.
• SDK는 js/ai.js의 AI_SDK(jsDelivr, 버전 고정)에서 처음 누를 때 불러와요.

기기 사진

기기 탭에서 PI가 + 사진으로 넣어 두면 랩 학생은 보기만 해요 (누르면 크게). 따로 설정할 것 없이 사진을 긴 변 1600px JPEG로 줄여서 앱 안(Firestore labs/{PI uid}/photos)에 저장해요 — 다른 교수님 랩도 그대로 써요.

(선택) 원본을 내 Google Drive에

설정 → 기기 사진 저장 → Google Drive 연결을 누르고 구글 계정을 고른 뒤 허용하면 끝이에요 (교수님마다 각자 자기 Drive). 내 Drive에 ‘랩 매니저 기기 사진’ 폴더가 생기고, 그 뒤 넣는 사진 원본이 거기로 가요. 앞서 넣은 사진은 앱 안에 그대로 있어요.

• 앱이 받는 권한은 drive.file 하나예요 — 앱이 만든 파일만 보고 고칠 수 있고, Drive의 다른 파일은 못 봐요.
• 사진은 '링크가 있는 모든 사용자: 보기'로 올려요 (학생 폰에서 띄우려고). 학교(Workspace) 계정은 관리자가 이 공유를 막아 둔 경우가 있어서, 사진이 '못 불러왔어요'로 나오면 개인 Gmail 계정으로 다시 연결해요.
• 구글 권한은 1시간마다 풀려요. 그 뒤 처음 사진을 넣거나 지울 때 구글 창이 잠깐 떴다 닫혀요 (넣을 때는 + 사진을 한 번 더 눌러 골라요).
• 앱에서 사진을 지우면 Drive 휴지통으로 가요 (30일 안에는 되살릴 수 있어요).
• 연결 끊기를 하면 앞으로 넣는 사진은 앱 안에 저장되고, 이미 올린 Drive 사진은 그대로 보여요.
• 구글 창은 Google Cloud 콘솔(프로젝트 lab-manager-knumed) › Google 인증 플랫폼 › 클라이언트의 웹 클라이언트(승인된 JavaScript 원본 https://kkonoo.github.io)로 떠요. 클라이언트 ID는 js/equip.js의 DRIVE_CLIENT_ID예요 (공개돼도 괜찮아요). 앱 주소를 바꾸면 원본에도 더해야 해요.

팁

• 앱에 들어 있는 팁은 저장소의 tips/ 폴더 md 파일이에요. 앱이 소제목·목록·체크리스트·표를 보기 좋게 그리고(폰에선 칸이 셋 이상인 표를 줄마다 카드로), 🖨 인쇄 / PDF로 A4에 맞춰 인쇄해요. 모든 랩에 똑같이 보여요.
• 고치려면 md 파일을 고쳐 main에 올리면 바로 반영돼요. 새 팁은 tips/에 md 파일을 넣고 js/tips.js의 TIP_FILES와 sw.js의 SHELL에 한 줄씩 더해요.
• md에서 쓸 수 있는 것: ##·### 소제목, - 목록, 1. 순서, - [ ] 체크(종이에 펜으로 체크하는 네모), > 메모, | 표, **굵게**, `코드`. 맨 위 # 제목은 앱에선 패널 제목으로 대신해요.

Google 문서 링크 넣기 (PI)

1. Google 문서에서 공유 → 일반 액세스: 링크가 있는 모든 사용자 (뷰어) 로 바꾸고 링크 복사.
2. 랩 매니저 연구 → 팁 → + 팁 문서에 이름·아이콘과 그 링크를 넣어요. 웹에 게시한 링크, Google 슬라이드·시트, Drive의 PDF 링크도 돼요. 이 랩에만 보이고, 앱에 들어 있는 팁 아래에 붙어요.
3. 내용은 Google 문서에서 고치면 앱에도 그대로 보여요. 인쇄·PDF는 Google 문서에서 열기 → 파일 → 인쇄.

데이터는 어디에

• 로그인하면 구글 Firebase(Firestore)에 저장돼요. PI 데이터는 users/{내 uid}, 연구 모드 데이터(프로토콜·재고·기기·팁 목록)는 labs/{내 uid}에 있고, firestore.rules가 본인(연구 쪽은 랩 멤버까지)만 읽고 쓰게 막아요.
• 기기 사진은 앱 안 저장이면 labs/{PI uid}/photos/{id}에 사진 하나 = 문서 하나(줄인 JPEG)로 있고, 기기 페이지엔 사진 id만 있어요. Google Drive를 연결했으면 원본은 PI의 Drive ‘랩 매니저 기기 사진’ 폴더에, 기기 페이지엔 Drive 파일 id만 있어요.
• 계산기의 버퍼 프리셋만 calcPresets/{내 uid}에 따로 있어요. 누구나 읽기(문서 하나씩, 목록 훑기는 안 됨), 고치기는 본인만이에요. firestore.rules를 바꿨으면 Firebase 콘솔 > Firestore Database > 규칙에 다시 붙여 넣고 게시해요.
• 금액은 모두 천원 단위로 저장해요 (인건비 화면만 만원으로 보여요).
• 기준 인건비·중앙구매 기준은 설정에서 시행 월과 함께 바꿔요. 지난 달 참여율과 지난 주문은 그때 기준대로 계산돼요.

개발

빌드 없음 — 정적 HTML/CSS/JS 그대로예요.

powershell -NoProfile -ExecutionPolicy Bypass -File tools/serve.ps1

http://localhost:8768 에서 열려요. 아이콘은 tools/make-icons.ps1, HWP 양식 구조 보기는 tools/hwpdump.ps1.

파일	내용
js/app.js	공통: 상태·저장(localStorage)·탭 전환(render)·입력 창·설정·테마. 탭 파일보다 먼저 읽음
js/home.js budget.js pay.js docs.js info.js protocol.js calc.js stock.js equip.js tips.js	탭별 화면 (한눈에 보기·재원별 예산·인건비·정보·서류(출장·내 정보 포함)·프로토콜·계산기·재고·기기·팁)
js/ai.js	서류 ✨ 자동 채우기 (Claude API, 설정의 API 키 칸)
js/pages.js	프로토콜·기기가 같이 쓰는 틀 (묶음 → 페이지, 본문 노트, 인쇄) + A4 인쇄 printSheet (팁도 씀)
tips/*.md	앱에 들어 있는 팁 내용 (js/tips.js가 그려 줌)
js/sync.js	구글 로그인 + Firestore 동기화 (PI 데이터는 부분별 문서, 프로토콜·기기·품목·주문은 한 건씩, 계산기 버퍼 프리셋)
js/data.js	처음 예시 데이터
js/forms*.js	서류 양식 (HTML 표로 옮긴 학교 양식)
calc.html	예전 계산기 주소 → 앱의 계산기 탭으로 넘김
css/style.css	화면·인쇄 스타일
firestore.rules	보안 규칙 (콘솔에 붙여 넣는 원본)