의료진 회원제 아카이브 — 제안 설명
세미나 영상 다시보기(온라인·현장) · 제품 자료실 · 회원 인증 · 관리자 — 기술 선택, 미확정 항목 의견, 일정과 성공 기준
juststudio
동작하는 데모를 먼저 만들었습니다제안서만으로는 "조잡해 보이지 않을지"를 판단하기 어렵다고 보고, 공고의 필수 과업 7가지를 실제로 동작하는 화면으로 만들었습니다. 원장님 입장(회원)과 담당자 입장(관리자) 모두 직접 눌러 보실 수 있습니다.
dr-archive-demo.pages.dev회원 doctor@demo.kr · 관리자 /admin · 비밀번호 demo1234
A원장님이 겪게 될 흐름 — 문자 링크 하나로 가입부터 열람까지, 휴대폰에서 3분
클라이언트 우려: 피부과 원장에게 안내하는 사이트라 조잡해 보이면 안 되고, UI 완성도가 가장 걱정 → 화면은 "많은 기능"보다 "적은 클릭과 정돈된 여백"으로 설계했습니다. 데모가 그 기준입니다.
원장님
(회원)
① 가입 신청이름·병원·이메일 + 사업자등록번호(즉시 형식 확인) 또는 면허번호
→
② 승인 대기 화면"담당자 확인 중" 3단계 표시 · 승인되면 이메일 안내
→
③ 홈다음 세미나 D-day · 최근 영상 · 자료실 · 공지 한 화면
→
④ 영상 · 자료 열람카테고리·검색 · 플레이어 워터마크 · PDF 뷰어(열람 전용) · 세미나 사전 등록(외부 링크)
담당자
(관리자)
승인 대기 알림대시보드에 대기 인원 표시 · 거래처 명단과 대조 → 승인/거절 한 번 클릭
→
콘텐츠 등록영상은 Vimeo 링크 붙여넣기 · 자료는 PDF 업로드 · 세미나 일정은 외부 등록 링크만
→
열람 기록누가·언제·무엇을 열람·재생·다운로드 — 유출 시 추적 근거
→
설정영상 보안 · 인증 방식 · 다운로드 허용을 스위치로 — 개발 없이 정책 변경
B아직 정하지 않으신 범위 3가지 — 의견 — 데모 관리자 설정에서 각 항목을 켜고 끄며 비교하실 수 있습니다
| ① 영상 보안 수준 | 회원 로그인만 | YouTube 비공개 임베드 | Vimeo(관리형) + 워터마크 | DRM 스트리밍 |
|---|
| 유출 방어 | 링크 유출 시 그대로 시청 | '일부 공개' 링크는 누구나 시청 · 로고·추천 영상 노출 | 도메인 제한(우리 사이트에서만 재생) · 다운로드 차단 · 화면 워터마크로 유출자 식별 | 캡처까지 차단 |
| 월 비용 | 0 | 0 | 약 2~3만원 (Vimeo Starter/Standard) | 수십만원 + 개발 추가 |
| 담당자 운영 | 영상 파일 관리 필요 | YouTube 채널 관리 | Vimeo에 올리고 링크만 붙여넣기 · 화질 자동 | 전문 업체 의존 |
권장: Vimeo 비공개 + 로그인 + 화면 워터마크 + 시청 기록. 의료진 대상 자료의 유출 위험을 현실적으로 막으면서 월 비용은 커피 몇 잔 수준입니다. 워터마크·시청 기록은 저희가 구현하므로 추가 비용이 없습니다. 나중에 바꾸려면: 영상마다 '재생 방식(YouTube·Vimeo·자체)'을 저장하도록 설계해 두어, 데모에서도 세 방식이 한 목록에 섞여 있습니다. Vimeo를 끊고 자체 스토리지로 옮기거나 DRM을 붙여도 화면과 DB는 그대로입니다.
| ② 회원 인증 방식 | 사업자등록번호 | 의사 면허번호 | 관리자 승인 |
|---|
| 자동 확인 | 10자리 검증식으로 오타 즉시 차단 · 국세청 API로 휴·폐업 자동 확인 (무료) | 공개 검증 API 없음 — 입력만 받을 수 있음 | - |
| 막는 것 | 병원 아닌 사업자(유통사 등)는 승인 단계에서 걸러야 함 | 번호 도용은 못 막음 | 거래처 명단과 대조 → 실제 거래처만 |
| 원장님 부담 | 낮음 — 병원 사업자번호는 누구나 알고 있음 | 면허번호를 기억해야 함 | 승인까지 대기 (보통 반나절) |
권장: 사업자등록번호(자동 형식·상태 확인) + 관리자 승인. 면허번호는 선택 입력란으로 두고 승인 시 참고합니다. 승인은 하루 한 번 대시보드에서 처리하면 되고, 대기 중인 원장님에게는 "확인 중" 화면과 승인 안내 메일이 갑니다. 나중에 바꾸려면: 설정 스위치입니다 — 데모 관리자 화면에서 세 방식을 켜고 끌 수 있습니다.
| ③ 자료 다운로드 | 열람 전용 (뷰어) | 다운로드 허용 |
|---|
| 유출 | 사이트 안에서만 열림 · 페이지마다 시청자 워터마크 · 열람 기록 | 파일이 원장님 PC에 남음 — 재배포 통제 불가 |
| 편의 | 오프라인·인쇄 불가 | 상담실에서 출력해 쓰기 좋음 |
권장: 기본은 열람 전용, 자료마다 '다운로드 허용'을 개별 지정. 제품 리플렛처럼 상담용으로 배포해도 되는 자료만 허용하고, 시술 전후 사진과 프로토콜은 항상 열람 전용으로 고정합니다. 지금 SharePoint에서 하시는 "열람만" 방식을 그대로 옮기되, 기간 종료 후 닫을 필요가 없습니다. 나중에 바꾸려면: 전역 스위치 하나와 자료별 스위치 — 개발이 필요 없습니다.
공고만으로 판단이 어려워 확인이 필요한 것- 기존 영상의 보관 위치·형식·개수 (지금 쓰시는 온라인 세미나 플랫폼에서 내려받을 수 있는지)
- 회원 규모 (거래처 병원 수) — 승인 운영 부담 산정
- 도메인·브랜드 가이드(로고·색) 유무
- 가입 안내를 문자로 보낼지, 담당자가 직접 계정을 만들어 드릴지
- 의료진 개인정보(면허번호 등) 처리방침 — 저희가 초안을 드립니다
범위에서 뺀 것 (공고 기준)- 세미나 현장 촬영·라이브 송출
- 세미나 사전 등록 자체 구현 — 외부 등록 페이지 링크만
- 네이티브 앱 — 모바일 웹으로 대응 (데모가 휴대폰에서 그대로 동작)
포함하면 좋다고 보는 것 (추가 비용 없음)- 열람 기록 — 유출 추적, 어떤 자료가 읽히는지 파악
- 세미나 종료 후 '다시보기' 자동 연결
- 승인·새 콘텐츠 이메일 안내 (알림톡은 별도 견적)
C기술 스택 — 왜 이렇게 고르는지 — 사내 개발자가 없어도 5년 뒤까지 유지되는 구성
구성 요소
선택
비개발자용 설명 · 이유
화면
Next.js (React) + 반응형 웹
가장 널리 쓰이는 웹 화면 기술. 어느 개발사든 이어받을 수 있고, 휴대폰·태블릿·PC를 한 벌로 대응합니다. 별도 앱 불필요.
서버 · DB
Cloudflare Workers + D1 (또는 PostgreSQL)
서버 컴퓨터를 빌려 관리하는 대신, 요청이 올 때만 실행되는 방식. 서버 점검·보안 패치가 필요 없고 월 비용이 거의 0입니다. 데모가 정확히 이 구조로 돌아갑니다. 회원 수천 명 규모까지 충분합니다.
파일 저장
Cloudflare R2 (비공개 저장소)
PDF·사진을 인터넷에 직접 노출하지 않고, 로그인한 회원에게만 그때그때 열어 줍니다. 저장 용량 비용은 10GB 무료.
영상
Vimeo (비공개 · 도메인 제한)
영상 변환·화질·재생 안정성을 맡깁니다. 담당자는 Vimeo에 올리고 링크만 붙여넣습니다. B안과 연결.
인증
이메일+비밀번호 · 사업자번호 검증 · 국세청 API
소셜 로그인은 넣지 않습니다 — 의료진 확인이 먼저이고, 원장님 개인 카카오 계정과 병원 자격을 묶는 것은 어색합니다.
배포 · 운영
Cloudflare Pages · 자동 백업 · 운영 매뉴얼
담당자가 관리자 화면에서 모든 콘텐츠를 다룹니다. 개발자 손이 필요한 일은 "새 기능"뿐이도록 설계합니다.
월 운영비 예상 Vimeo 약 2~3만원 + Cloudflare 0~1만원 + 도메인 — 합계 3~4만원 수준대안 사내 정책상 일반 서버(카페24·AWS)를 원하시면 같은 코드를 Node.js + PostgreSQL 로 올릴 수 있습니다소유권 소스·DB·Vimeo·Cloudflare 계정 모두 귀사 명의
D디자인·UI 완성도를 어떻게 확보하나 — 가장 중요하게 보신다고 하셔서
지금
데모가 기준선제안 단계에서 이미 동작하는 화면을 보여드립니다. 이 수준 아래로는 내려가지 않습니다.1주차
디자인 방향 2안동종 의료기기사 사이트 벤치마크 → 톤(색·서체·여백) 2안 제시 → 담당자 선택2주차
전 화면 시안 확정회원 8화면 · 관리자 6화면 시안. 검토 2회. 사내 결재용 PDF 제공3~4주차
디자인 시스템으로 구현색·서체·버튼·카드 규격을 한 벌로 관리 → 나중에 추가되는 화면도 같은 완성도5주차
휴대폰 실기기 검수iPhone·갤럭시 실제 기기에서 원장님 시나리오로 검수 · 담당자 검수표 통과 후 오픈
비슷한 성격의 작업- 대학교 실시간 강의 녹화·재생 시스템 — 강의실 촬영본을 저장·재생하는 웹과 앱. 영상 아카이브 구조가 이번 건과 같습니다.
- 대기업 계열 반려동물 커머스 포인트·관리자 시스템 — 운영자가 매일 쓰는 관리자 화면 설계
- 퍼블릭 블록체인 익스플로러 운영 — 대량 트래픽 웹 서비스의 화면·API·인프라를 팀 단위로 운영
- 학원 관리 시스템 · 쇼핑몰 관리자 — 비개발자 운영자를 위한 관리 화면 (위시켓 수행, 평점 5.0)
UI 원칙 (데모에 적용된 것)- 한 화면에 한 가지 일 — 홈은 "다음 세미나·새 영상·자료·공지" 넷만
- 클릭 2번 안에 영상 재생 — 로그인 → 홈 → 재생
- 의료진 대상 톤 — 채도 낮은 네이비·틸, 넓은 여백, Pretendard 서체
- 휴대폰 우선 — 원장님은 진료실에서 휴대폰으로 봅니다. 하단 탭 내비게이션
- 관리자 화면도 같은 수준 — 담당자가 매일 쓰는 화면
E일정 · 산출물 · "완료"의 기준 — 5주 · 계약 후 즉시 착수
| 주차 | 내용 | 확인 지점 |
|---|
| 1 | 요구사항 정의서 · 화면 흐름 · 디자인 방향 2안 · Vimeo/Cloudflare 계정 개설(귀사 명의) | 요구사항 승인 |
| 2 | 전 화면 디자인 시안 · 회원가입·인증·승인 · 관리자 회원 관리 | 디자인 확정 (중간 지급) |
| 3 | 영상 아카이브(카테고리·검색·플레이어·워터마크) · 자료실(뷰어·다운로드 정책) · 관리자 콘텐츠 등록 | 회원 화면 시연 |
| 4 | 세미나 일정 · 공지 · 열람 기록 · 이메일 안내 · 기존 콘텐츠 이관(영상·PDF 등록 대행) | 콘텐츠 이관 완료 |
| 5 | 실기기 검수 · 담당자 교육(1시간) · 운영 매뉴얼 · 도메인 연결 · 오픈 · 이후 2주 안정화 | 검수표 통과 (잔금) |
납품물
- 요구사항 정의서 · 화면 설계서 · 디자인 원본(Figma)
- 전체 소스코드 — 귀사 소유 저장소
- DB 스키마 · 배포·운영 매뉴얼 · 관리자 사용 설명서
- 귀사 명의 Cloudflare·Vimeo 계정에 배포된 완성본
- 인계 후 2주 무상 안정화
이 프로젝트가 "성공"한 상태
- 원장님이 문자 링크로 가입 → 승인 → 휴대폰에서 영상·자료 열람까지 3분 안에, 설명 없이
- 담당자가 개발자 없이 영상·자료·공지·세미나를 올리고 회원을 승인
- 파일 주소를 알아도 로그인·승인 없이는 열리지 않음 (데모에서 확인 가능)
- 누가 무엇을 봤는지 기록이 남아 유출 시 추적 가능
- 담당자 검수표(휴대폰·PC 각 화면) 통과 — "조잡해 보이지 않는다"를 담당자가 확인
저스트스튜디오 · 위시켓 제안 첨부 자료 · 데모 dr-archive-demo.pages.dev이 문서는 제안 단계의 설계이며, 미팅에서 확인되는 사항에 따라 조정됩니다