AI 시대, 우리 병원 메신저를 직접 만들어볼까요?

병원에서 단체 채팅으로 업무를 나누며, 우리 팀에 맞는 도구를 만들어보고 싶은 실무자에게.

“회의 시간이 바뀌었습니다.”
“어제 올린 자료는 어디 있나요?”
“그건 다른 방에 올렸어요.”

익숙한 대화입니다. 단톡방은 빠르고 편리합니다. 그런데 공지와 질문, 파일과 잡담이 한곳에 쌓이면 필요한 내용을 다시 찾는 일이 또 하나의 업무가 됩니다.

이럴 때 “우리 팀에 맞게 방 목록을 바꿀 수 있다면?”, “공지를 대화 위에 따로 보여줄 수 있다면?” 하는 생각이 들 수 있습니다. 그 생각을 작은 화면으로 만들어보면 어떨까요. AI 코딩 도구에 요구사항을 설명하고, 나온 결과를 보며 수정하는 방식으로 시작할 수 있습니다.

이번 실습의 목표는 가상의 직원과 메시지로 움직이는 채팅 화면 하나입니다. 실제 직원들이 접속하는 메신저로 발전시키는 과정은 그다음에 다룹니다.

1. 만들기 전에, 불편한 장면 하나 고르기

처음부터 병원 전체 업무를 넣으려 하면 무엇을 만들어야 할지 흐려집니다. 먼저 한 가지 장면을 적어보세요.

“총무팀 직원들이 회의 일정과 공지문을 확인하는 작은 대화방.”

이렇게 범위를 정하면 첫 화면에 필요한 것도 줄어듭니다. 방 목록, 메시지 목록, 입력창, 공지를 보여줄 자리 정도입니다. 환자 정보나 실제 직원 연락처는 실습에 필요하지 않습니다. 가상의 이름과 “회의실 점검 안내” 같은 예시만 준비하면 됩니다.

2. AI에게는 화면의 모양과 동작을 함께 설명하기

프로젝트를 생성하고 파일을 편집할 수 있는 AI 코딩 도구에서 새 실습 폴더를 열어보세요. 처음 요청은 아래처럼 구체적으로 적어볼 수 있습니다.

코딩을 배우는 병원 실무자를 위한 메신저 화면 실습을 만들고 싶습니다.
외부 라이브러리나 서버 연결 없이 HTML, CSS, JavaScript를 한 파일에 작성하고, 파일 이름은 index.html로 해주세요.
화면에는 왼쪽에 ‘총무팀 시험방’, ‘교육 일정 시험방’이라는 방 목록을, 오른쪽에는 선택한 방의 메시지와 입력창을 배치해 주세요. 좁은 화면에서도 내용을 읽을 수 있게 해주세요.
가상의 직원 이름과 예시 메시지만 사용해 주세요. 전송 버튼을 누르면 해당 방의 메시지 목록에 내용이 추가되게 하고, 다른 방으로 이동했다가 돌아와도 실행 중인 화면 안에서는 메시지가 유지되게 해주세요.
화면 위에는 ‘화면 실습용 — 다른 사람에게 전송되지 않으며 새로고침하면 초기화됩니다’라고 표시해 주세요. 실제 로그인, 외부 전송, 파일 업로드, AI 답변 기능은 이번에 넣지 마세요.
파일을 브라우저에서 여는 방법과, 직접 확인해야 할 동작을 쉬운 말로 설명해 주세요.

AI가 파일을 만들면 안내에 따라 브라우저에서 열어봅니다. 오류가 난다면 오류 문구와 어떤 버튼을 눌렀는지를 그대로 전달하세요. “안 돼요”보다 “총무팀 시험방에서 메시지를 보낸 뒤 교육 일정 시험방으로 바꾸면 이전 메시지가 함께 보입니다”처럼 설명할수록 고칠 대상을 분명히 할 수 있습니다.

3. 예쁜 화면보다 먼저 눌러볼 것

첫 결과가 나오면 아래 동작을 직접 확인해 보세요.

메시지를 보내면 선택한 방에만 나타나는가?
다른 방으로 갔다 돌아와도 실행 중에는 내용이 남아 있는가?
아무것도 입력하지 않았을 때 빈 메시지가 전송되지는 않는가?
화면을 좁혀도 입력창과 전송 버튼을 사용할 수 있는가?
새로고침하면 초기화된다는 안내가 실제 동작과 맞는가?

이 단계에서 다른 컴퓨터의 동료에게 메시지가 보이지 않는 것은 자연스럽습니다. 지금 만든 것은 내 브라우저 안에서 동작하는 화면이기 때문입니다. 이 차이를 이해하면 다음에 무엇이 필요한지도 보입니다.

4. 두 사람이 대화하려면 무엇이 더 필요할까

다른 사람과 실제로 메시지를 주고받으려면 사용자를 구분하는 로그인, 메시지를 전달하는 서버, 내용을 보관하는 저장소가 필요합니다. 메시지가 새로 왔다는 사실을 화면에 바로 전달하는 데에는 WebSocket 같은 기술을 사용할 수 있습니다. MDN은 WebSocket을 브라우저와 서버 사이에서 양방향으로 메시지를 주고받는 기술로 설명합니다.[1]

참고한 병원 업무 메신저 개발 프로젝트 ‘talk’의 소스코드에도 채팅방 생성, 메시지 저장, WebSocket 통신, 읽음 처리, 첨부파일을 다루는 코드가 들어 있습니다. 다만 코드가 존재한다는 사실만으로 실제 운영 상태나 안전성이 검증되는 것은 아닙니다. 이번 글은 개발 자료를 검토해 작성했으며 운영 환경에서의 동작을 시험한 결과를 제시하는 글은 아닙니다.

실제 직원용으로 확장할 때에는 “로그인한 사람인가?”에 더해 “이 방의 대화와 파일을 볼 수 있는 사람인가?”를 확인해야 합니다. OWASP도 로그인 여부를 확인하는 인증과, 해당 자료에 접근해도 되는지 판단하는 권한 검사를 구분하며 요청마다 권한을 검증하도록 권고합니다.[2]

화면에서 방을 숨기는 것만으로 이 조건이 충족되지는 않습니다. 서버에서도 메시지 조회·전송과 파일 접근을 확인하도록 구현하고 검증해야 합니다. 현재 개발 자료에도 보완할 부분이 있어, 이 실습 화면을 그대로 직원 업무나 환자 정보 처리에 사용하도록 권하지 않습니다.

우리 업무를 설명하는 것부터 시작됩니다

첫 화면을 만들어보면 필요한 기능을 더 구체적으로 말할 수 있게 됩니다. “메신저가 있으면 좋겠다”에서 “공지는 대화와 분리해서 보여주고 싶다”, “방 이름보다 담당 업무로 찾고 싶다”로 질문이 달라집니다.

AI와 함께 만든다는 것은 이런 요구를 말하고, 결과를 눌러보고, 어긋난 부분을 고치는 과정을 반복하는 일입니다. 실제 도입을 검토할 때에는 직접 개발하는 데 드는 운영·유지보수 부담과 기존 업무 메신저를 활용하는 방법도 함께 비교할 수 있습니다.

오늘은 가장 자주 쓰는 업무방 하나를 떠올려보세요.

“이 방에서 매번 사람에게 다시 묻는 일은 무엇인가?”

그 답 하나를 적는 것이 우리 팀에 맞는 메신저를 설계하는 첫 단계입니다.

참고 자료

작성자 제공 ‘talk’ 개발 자료. 채팅방 화면, 메시지 API, WebSocket 통신 코드를 검토했습니다. 개발 자료 확인일: 2026년 11월 1일. 운영 배포와 보안 검증 완료를 의미하지 않습니다.
[1] MDN Web Docs, WebSocket API (WebSockets) (새 창). 발행일 미확인. 브라우저와 서버의 양방향 통신 설명을 확인했습니다.
[2] OWASP Cheat Sheet Series, Authorization Cheat Sheet (새 창). 발행일 미확인. 인증과 권한 검사의 구분, 요청별 권한 검증 원칙을 확인했습니다.

외부 자료 확인일: 2026년 11월 1일.