채널톡 아이콘

NestJS · Next.js로 만드는 실시간 화상진료 — 의사·환자·보호자가 한 진료실에서 만나는 풀스택

PostgreSQL부터 Socket.IO·WebRTC 화상통화, 채팅, 공유 판서까지 하나의 업무 흐름으로 직접 완성

1명 이 수강하고 있어요.

난이도 입문

수강기한 무제한

실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
화상회의
화상회의
진료
진료
실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
화상회의
화상회의
진료
진료

수강 후 이런걸 얻을 수 있어요

  • NestJS와 Next.js를 처음 하나의 프로젝트로 연결해 보는 분을 위한 풀스택 과정입니다. 병원 화상진료라는 하나의 업무 흐름을 끝까지 만들면서, 목록 조회·상태 변경 같은 REST API, 역할별 화면, 실시간 방과 채팅, WebRTC 화상통화, 공유 판서를 한 진료실에 연결합니다.

  • 먼저 pnpm 워크스페이스와 PostgreSQL을 준비하고 환자 목록·상태 변경·대화 저장 API를 만듭니다. 그 위에 의사·간호사·환자 역할 입장과 환자 대기열, 반응형 진료실을 올리고, Socket.IO 방과 WebRTC 연결, 카메라·마이크·화면 공유, 보호자 초대, 실시간 채팅과 공유 판서, 판서 주도권과 음성 자막까지 이어 갑니다. 마지막에는 완료 기록과 재진료, 린트·테스트·빌드로 결과를 확인합니다.

  • 모든 강의는 실제 소스의 줄을 강조하며 설명하고, 터미널 실행과 두 개 이상의 브라우저 탭 동작을 그대로 보여 줍니다. 화면에 나오는 환자 정보는 모두 가상 데이터이며, 실제 인증·TURN 서버·개인정보 암호화·배포는 다루지 않고 운영 단계의 확장 과제로 정리합니다.

화상통화 앱, 튜토리얼 따라 하면 되는데 "진짜 서비스 흐름"으로 이어 붙이려면 어디서부터 막힐까?🤔

답은 연결 순서에 있습니다. 환자 상태가 데이터베이스에 저장되고, 화면이 그것을 읽고,

같은 진료실에 들어온 브라우저끼리 연결 정보를 주고받아 영상과 채팅과 판서가

한 방에서 움직이는 — 이 길 전체를 실제 소스로 따라갑니다.

이 강의는 NestJS와 Next.js로 교육용 화상진료 서비스를 처음부터 끝까지 만듭니다.

소스의 줄을 하나씩 강조하며 읽고, 터미널에서 직접 실행하고,

의사·환자·보호자 브라우저를 나란히 열어 동작을 확인합니다.

목록 조회 예제와 화상통화 예제를 따로 따라 하는 데서 끝나지 않고, 하나의 업무 흐름으로 연결해 보세요.

고쳐 보고, 깨 보고, 다시 확인하는 것이 가장 빠른 길입니다.

이 강의의 특징

📌 모든 설명은 실제 소스의 줄을 강조해서 보여 주고, 설명한 동작은 실제로 실행해 확인합니다. (예: 두 사람이 동시에 카메라를 켜면 왜 연결이 안 되는지, 그리고 어떻게 고치는지)

📌 서버는 입력 검사와 권한을 스스로 다시 확인하는 방식으로 만듭니다. 화면에서 숨긴 버튼도 서버가 한 번 더 막는 이유를 코드로 봅니다.

📌 한 줄 한 줄 따라 치는 대신, 완성된 구조를 열어 놓고 기능 단위로 읽고 실행하고 고쳐 보는 방식입니다. 강의 끝에는 직접 해 볼 과제 다섯 가지와 고칠 파일을 알려 드립니다.

📌 단위 테스트, 린트, 배포용 빌드와 증상별 점검 순서까지 다뤄서 "돌아가는 것"에서 "믿을 수 있는 것"으로 넘어갑니다.

💡 NestJS + Next.js + PostgreSQL + Socket.IO + WebRTC + SVG 판서 + pnpm 모노레포

이런 분들께 추천해요

NestJS와 Next.js를 하나의 프로젝트로 연결해 본 적이 없는 분?

모듈·컨트롤러·서비스, 서버 컴포넌트와 클라이언트 컴포넌트의 경계가 어디인지부터 코드로 보여 드립니다.



웹 개발자 / 백엔드 개발자

Socket.IO와 WebRTC가 각각 무엇을 나르는지 헷갈리는 분?

연결 약속(시그널링)과 영상 전송이 다른 길이라는 것을 코드로 확인하고, offer·answer·ICE 후보가 오가는 순서를 따라갑니다.

실시간 기능을 처음 붙이는 개발자

게시판 다음 단계의 포트폴리오가 필요한 분?

역할별 화면, 실시간 방, 영상, 채팅, 공유 판서, 완료 기록까지 이어진 서비스를 설명하고 시연할 수 있게 됩니다.

취업·이직 준비 개발자


💡중급으로 넘어가는 개발자

  • 권한 규칙과 실시간 동기화를 한 흐름으로 익히고 싶은 분?

    "방에서 가장 높은 역할만 판서를 제어한다"는 규칙을 공용 패키지에 한 번 쓰고 화면과 서버가 함께 쓰는 방법을 봅니다.


수강 후에는

  • pnpm 워크스페이스로 웹·API·공용 패키지를 구성할 수 있어요.

  • PostgreSQL 테이블과 입력 검사를 갖춘 REST API를 만들 수 있어요.

  • Socket.IO 방과 WebRTC 연결, 카메라·마이크·화면 공유를 구현할 수 있어요.

  • 채팅 기록 복원, 좌표 기반 공유 판서, 역할 주도권을 구현할 수 있어요.

  • 린트·테스트·빌드로 결과를 확인하고 문제의 원인을 증상별로 좁힐 수 있어요.

이런 내용을 배워요.

섹션 0. 과정 소개

-.0.1 완성 프로젝트 시연

-.0.2 전체 구조와 학습 순서

섹션 1. 개발 환경과 모노레포

-.1.1 pnpm workspace 만들기

-.1.2 Next.js와 UI 컴포넌트 준비

-.1.3 NestJS API 준비

섹션 2. PostgreSQL과 NestJS API

-.2.1 Docker PostgreSQL 연결

-.2.2 교육용 테이블 설계

-.2.3 환자 목록과 상태 변경 API

-.2.4 대화 저장 API

섹션 3. 역할별 Next.js 화면

-.3.1 데모 역할 입장

-.3.2 의료진 환자 대기열

-.3.3 진료 상태 전환

-.3.4 반응형 진료실 레이아웃

섹션 4. Socket.IO와 WebRTC 진료실

-.4.1 진료실 방과 참여자

-.4.2 WebRTC 연결 구조

-.4.3 카메라와 마이크 연결

-.4.4 상대 영상과 재생 제한 처리

-.4.5 보호자 초대와 화면 공유

섹션 5. 채팅 · 공유 판서 · 자막

-.5.1 실시간 채팅과 DB 기록

-.5.2 공유 판서 좌표 동기화

-.5.3 판서와 자막 주도권

-.5.4 칠판 테마와 이미지 저장

-.5.5 음성 자막의 범위와 한계

섹션 6. 완료 기록과 마무리

-.6.1 완료 환자 기록과 재진료

-.6.2 오류 점검과 빌드

-.6.3 다음 단계

수강 전 참고 사항

실습 환경

  • Windows 11 화면 기준으로 진행합니다. 브라우저는 Chrome을 사용합니다.

  • Node.js 22.22 이상, pnpm 10.18, Docker Desktop(PostgreSQL 컨테이너)이 필요합니다. Next.js 16, React 19, NestJS 12, PostgreSQL 16을 사용합니다.

학습 자료

  • 강의에서 사용하는 소스 일체를 압축 파일(c2i_seeu_full.zip, 1.1강 수업 자료)로 제공합니다. 새 폴더를 만들어 그 안에 압축을 풀고 시작하세요. README에 실행 순서가 있습니다.


선수 지식 및 유의사항

  • TypeScript 문법과 React 컴포넌트의 기초가 필요합니다. NestJS·WebRTC 경험은 필요 없습니다.

  • 카메라·마이크 장면은 자동화 환경의 가상 영상으로 보여 드립니다. 직접 따라 하실 때는 실제 카메라와 마이크 권한을 허용해야 하며, 카메라는 localhost 또는 HTTPS 주소에서만 열립니다.

  • 화면의 모든 환자·병실·진료 메모는 가상 데이터이며 실제 의료 서비스에 사용할 수 없습니다. 실제 인증, TURN 서버, 개인정보 암호화, 배포는 다루지 않고 운영 확장 과제로 정리합니다.

  • 강의 음성은 강사가 직접 녹음했습니다.

  • 강의와 소스의 저작권은 강사에게 있습니다. 수강생 본인의 프로젝트(업무 · 제품)에서 소스를 사용하고 변형하는 것은 가능합니다. 다만 소스 자체의 판매 · 재배포, 공개 저장소(Git Public) 게시, 강의 · 교재 등 교육 목적의 사용은 허용하지 않습니다.

  • 질문은 수업 질문 게시판에 남겨 주시면 3일 이내에 답변 드립니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • NestJS와 Next.js를 하나의 프로젝트로 구성해 보고 싶은 개발자

  • Socket.IO와 WebRTC의 역할 차이를 실제 코드로 이해하고 싶은 개발자

  • 게시판 다음 단계의 포트폴리오(실시간 협업 서비스)를 만들고 싶은 개발자

  • 상태 관리, 권한 규칙, 실시간 동기화를 한 흐름으로 익히고 싶은 분

선수 지식,
필요할까요?

  • TypeScript 문법과 React 컴포넌트의 기초

  • Node.js 22.22 이상, pnpm 10, Docker Desktop(PostgreSQL 컨테이너용), 카메라·마이크가 있는 PC, Chrome 또는 Edge

  • NestJS나 WebRTC를 몰라도 됩니다. 필요한 개념은 코드가 나오는 순간 설명합니다

안녕하세요
GregHan입니다.

커리어인증

오랜 시간 동안 기술 변화에 맞추면서 보낸 시간이 많아, 이제 보유한 기술과 경험을 초,중급분들께 미약하지만 제 기술을 제공해서 빠르게 성장하는데 함께하고 싶습니다.

기술 스택

-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT

-. MUI-X, Material-UI 등 Next & React 생태계 UI

-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)

-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,

D3, Three (WebGL), C2i: 청와대 납품 BI 차트, echarts, Vuetify, Quasar, Telerick(Progress)

IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...

-.Leaflet.js, Cesium.js, 다음 & 네이버 지도

-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net

-.Node, Nest, Spring Boot, Docker, Git, pm2

-.AWS, Azure, nCloud(Naver)

-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase

-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,

-.TensorFlow, Keras, ScikitRun, LangChain

솔루션

  • IAM-Guardian – SGC + ML + AI + Graph 플랫폼

  • IAM-MES – 개별 · 배치 · 연속 제조를 업종별 풀스택 통합 플랫폼

  • IAM-ERP – AI 회계 ERP · 증빙 자동분개 · 잠금 원장

  • IAM-FREE-BI – 쇼핑몰 · 중소기업 무료 브라우저 BI

  • IAM-SPC – 메타기반 범용 SPC · Edge+중앙 · IATF 16949

  • IAM-VeloMap – AI 기반 Lidar 후처리 자동화 솔루션(+Guardian 병합)

-.씨티-와우(City-Wow): 국토,국방,공공 및 병원,제조기업 등 3D 시뮬레이션 및

실시간 모니터링 서비스 ('23.10 ~ 현재; Three, Vanila.js)

-.씨유(SeeU): 업종별 화상 채팅 서비스(병원, 제조..)(구글-밋 + 크로마키, STT & TTS Chatting)

('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.서베이-와우(Survey-Wow): 구글-폼, MS-폼 , 네이버-폼 설문 결과를 간단하게 분석하고

공유하는 데이터 분석 웹 서비스 ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)

-.데이터-와우(Data-Wow): xls, json,csv , API 연동 등 공공 데이터 자동 분석 시각화

('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 행안부 공공데이터 포상
-.DDMV(Data-Dam Multi-Dimensional Vis-): 데이터-댐 다차원 탐색적 시각화 분석서비스

('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 인천시 공공데이터 포상
-.씨투아이(C2i: Chart Inteiiligence Insights) 차트 컴포넌트: 차트 갤러리 메뉴

BI 기반 차트 (with D3.js): '15.04 ~ 현재 ; D3.js(v3.3 ~ v7.9) 기반의 BI 패턴의 차트 솔루션

(문재인 정부 일 자리 대시보드 청와대 납품, 몽골 재정관리 국책 프로젝트 남품. 다국어 지원)

 

Data Mart & Warehouse, ROLAP, BI, 시각화, 클라우드 인프라 등 다양한 기술 스택과

업무 분석, Oracle(v6.3 ~ ) 모델링 & 튜닝 분야에 대한 전문 정보 및 경험 보유.

 

-.(주)캐주얼-인사이트 (Casual-Insights) CTO

-.전 KISTI 연구원

-.전 LG-CNS Oracle Modeler, DBA & 선임 연구원

-.전 극동(현대) 정유 전산실 사원

**. 데이터 댐 다차원 시각화-.종합 소개(필수) : https://youtu.be/noZ9H7wftsI

-.소비상권-I(필수 : 백화점 매장 포스 데이터 - 일반 제조 유통업체) : https://youtu.be/ArL-Pv3U-40 -.소비/상권-II (한국 KDX, 식신 데이터 제공): https://youtu.be/Wcpu29gI53Y

-.보건의료 (한국 KDX, 온누리H&C 데이터 제공): https://youtu.be/I8WBqAFp9L4-

.공공 데이터 (경기 화성 시청 공공 데이터 제공) : https://youtu.be/2QCw_6aeRVE

*.D3 & ThreeJS 차트 갤러리 :https://gregory-han.github.io/chart/

*.포상이력

1999.08 한겨레신문 & UTC 벤처21 본상 수상.(상금 5천만원)
2000.10 ㈜소프트다임 대통령상 수상 (PowerSi OLAP)
2002.11 한국 e-비즈니스대상 산업자원부 장관상 수상
2020.08 인천시 공공 데이터 포상
2022.12 행안부 공공 데이터 포상
더보기

커리큘럼

전체

26개 ∙ (2시간 37분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

GregHan님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얼리버드 할인 중

₩66,000

50%

₩132,000

평생교육이용권 지원 강의