간단한 웹 기반 채팅 애플리케이션을 만드는 방법
Published: 2024-01-19 15:39:39

실시간 시스템과 메시징 플랫폼은 즉각적인 사용자 커뮤니케이션을 가능하게 하는 일상의 필수 요소가 되었습니다. 문자 메시지와 이메일부터 Microsoft Teams, Slack, WhatsApp의 그룹 채팅까지, 우리 모두는 친구 및 동료와 지속적인 커뮤니케이션을 유지하기 위해 선호하는 플랫폼을 가지고 있습니다. 이러한 채팅 애플리케이션은 어디에나 존재하며 즉각적인 응답 시간과 광범위한 기능으로 인해 거의 모든 최신 실시간 애플리케이션에 통합되어 있습니다.

채팅 애플리케이션에 대한 의존도가 높아지는 이유는 다양한 이점 때문입니다. 예를 들어, 채팅 애플리케이션을 사용하면 더 빠른 의사 결정, 향상된 협업, 생산성 향상이 가능합니다. 또한 채팅 플랫폼은 모든 대화를 기록하므로 진행 상황을 쉽게 추적하고 이전 논의를 참조할 수 있습니다. 또한 이러한 애플리케이션은 다음과 같은 기능을 통합하여 더욱 정교해지고 있습니다. [영상 및 음성 통화](https://www.pubnub.com/integrations/vonage-video-api-video-chat/), 화면 및 파일 공유와 같은 기능을 통합하여 더욱 다양한 용도로 활용되고 있습니다. 전반적으로 채팅 애플리케이션은 현대의 커뮤니케이션과 협업에 없어서는 안 될 필수 도구가 되었습니다.

간단한 웹 기반 채팅 애플리케이션을 구축해야 하는 이유
------------------------------

특정 요구 사항을 충족하는 새롭고 혁신적인 채팅 애플리케이션에 대한 수요가 높습니다.

웹 기반 채팅 애플리케이션은 다양한 산업과 비즈니스에 맞게 [다양한 산업 및 비즈니스](https://www.pubnub.com/customers/?filter-solutions=In-App%20chat)사용자들이 소통하고 협업할 수 있는 고유한 플랫폼을 제공합니다. 예를 들어, 의료 전문가를 위해 설계된 채팅 애플리케이션은 보안 메시징과 같은 특정 기능을 통합할 수 있습니다([HIPAA 준수](https://www.pubnub.com/solutions/digital-health/)) 및 화상 상담과 같은 특정 기능을 통합하여 의료진에게 보다 효율적이고 효과적인 서비스를 제공할 수 있습니다.

채팅 애플리케이션을 구축하면 광고, 구독, 인앱 구매를 통해 잠재적으로 수익을 창출할 수 있는 수익성 높은 비즈니스 기회도 얻을 수 있습니다. 또한, 기술이 발전함에 따라 채팅 애플리케이션의 가능성은 무궁무진하며 인공 지능 및 가상 현실과 같은 최첨단 기능을 통합할 수 있는 잠재력이 있습니다.

### 간단한 웹 기반 채팅 애플리케이션의 장점

간단한 웹 기반 채팅 애플리케이션을 구축하면 많은 이점을 얻을 수 있습니다. 간단히 말해, 채팅 애플리케이션을 사용하면 전 세계 어디에서나 메시지를 주고받으며 사람들과 쉽게 소통할 수 있습니다. 웹 채팅 애플리케이션을 사용하면 사용자들은 맞춤형 메시징 기능을 통해 직접 대면할 때와 똑같이 흥미롭고 생생한 상호작용을 할 수 있습니다. 또한 사용자는 다른 곳에서 메시징 솔루션을 찾지 않고 플랫폼에서 대화할 수 있습니다. 다음과 같은 [비공개 채팅](https://www.pubnub.com/tutorials/getting-started-chat-sdk/), [그룹 채팅](https://www.pubnub.com/demos/group-chat-react-demo/)또는 [대규모 채팅](https://www.pubnub.com/demos/virtual-events/)등 앱에 개인화된 채팅 기능을 추가하면 사용자에게 기억에 남는 경험을 제공할 수 있습니다.

웹 기반 채팅 애플리케이션은 다른 형태의 커뮤니케이션이 제공하지 못하는 편리함을 제공할 수 있습니다. 사용자는 인터넷이 연결된 곳이라면 어디에서나 애플리케이션에 액세스할 수 있으므로 이동 중에도 쉽게 연결 상태를 유지할 수 있습니다. 또한 웹 기반 채팅 애플리케이션은 다른 애플리케이션과 원활하게 작동하도록 설계할 수 있으므로 사용자는 대화를 중단하지 않고도 다양한 도구와 기능 사이를 전환할 수 있습니다.

### 간단한 웹 기반 채팅 애플리케이션 구축 대 구매

사내 채팅 솔루션을 개발할 것인지 아니면 공급업체가 제공하는 솔루션을 선택할 것인지는 중요한 결정입니다. 일부 조직의 경우, 사내에 개발자를 보유하고 있거나 외주 업체를 통해 개발자를 고용할 수 있다면 완전히 맞춤화된 채팅 또는 메시징 솔루션을 개발하여 소유하는 것이 매력적일 수 있습니다. 또는 기존 채팅 솔루션을 서비스형 가격 모델로 구매하면 많은 이점을 얻을 수 있지만, 그만큼 어려움도 따릅니다. 하지만 플러그 앤 플레이 채팅 제공업체는 소프트웨어 제품에 채팅 기능을 추가할 수 있는 세 번째 옵션입니다. 이 옵션은 모든 규모에 맞는 UI 기능과 간소화된 백엔드 통합을 제공하므로 특정 애플리케이션에 적합할 수 있습니다.

채팅 기능을 구축하거나 구매하기 전에 비즈니스의 핵심 가치 제안을 고려하여 고객을 위해 해결하고자 하는 주요 문제와 관련하여 채팅의 우선 순위를 적절히 정하는 것이 중요합니다. 채팅은 많은 이점을 제공하지만, 중요한 비즈니스 차별화 요소는 아닙니다.

겉으로 보기에 채팅은 현재 인프라에 통합하기 쉬운 구성 요소처럼 보일 수 있습니다. 그러나 채팅을 처음부터 구축하는 것은 완전히 새로운 제품을 개발하는 것과 비슷하거나 더 많은 개발력을 필요로 할 수 있으며, 개발 리소스는 비용도 많이 들고 한정되어 있습니다. 대부분의 상황에서는 채팅 작업보다는 핵심 가치 제안에 우선순위를 두는 것이 더 중요합니다. 그렇다면 어떻게 하면 비용과 시간을 절약하면서도 웹 애플리케이션에 통합할 수 있는 완전 맞춤형 채팅 솔루션을 구현할 수 있을까요?

비용과 시간을 절약하면서 모든 웹 애플리케이션에 쉽게 통합할 수 있는 완전 맞춤형 채팅 솔루션을 구축하려면 다음과 같은 이점을 활용할 수 있습니다. [서비스형 인프라](https://www.pubnub.com/learn/glossary/what-is-infrastructure-as-a-service-iaas/) (IaaS)의 이점을 활용할 수 있습니다. IaaS는 서버, 스토리지, 네트워킹 구성 요소와 같은 컴퓨팅 리소스를 종량제 방식으로 대여할 수 있는 클라우드 기반 컴퓨팅 모델입니다. IaaS를 사용하면 기업은 인프라 구축 및 유지 관리에 드는 초기 비용을 절감하고 대신 핵심 가치 제안을 개발하는 데 집중할 수 있습니다. 이 모델은 필요와 요구 사항에 따라 인프라를 신속하게 확장하는 데 도움이 됩니다.

웹 기반 채팅 애플리케이션 구축 시 고려해야 할 사항
-----------------------------

실시간 채팅 애플리케이션을 구축하려면 애플리케이션이 원하는 기능과 사용자 경험을 충족할 수 있도록 신중한 계획과 고려가 필요합니다. 아래에서는 실시간 채팅 애플리케이션을 처음부터 구축할 때 또는 IaaS 서비스를 사용할 때 고려해야 할 몇 가지 사항을 살펴봅니다.

### 매력적인 실시간 메시징 기능

오늘날 채팅 애플리케이션은 단순히 메시지를 주고받는 것 이상으로 복잡합니다. 사용자는 인앱 채팅을 사용할 때 항상 다른 기능을 원합니다. 실시간 메시징 기능을 갖춘 디지털 웹 기반 채팅 애플리케이션은 사용자에게 진정한 대화형 경험을 제공할 수 있습니다.

다음과 같은 기능 [메시지 반응](https://www.pubnub.com/docs/chat/sdks/messages/message-receipts), 스티커, 이모티콘, GIF, 음성 통화 및 영상 채팅과 같은 기능은 외부 플랫폼이 아닌 앱에서 직접 사용자의 참여를 유도하여 더욱 연결된 경험을 제공할 수 있는 방법을 제공합니다.

활성 사용자 식별과 같은 기타 기능, 모바일 [푸시 알림](https://www.pubnub.com/docs/general/push/send)및 [메시지 기록](https://www.pubnub.com/docs/general/storage)\-와 같은 다른 기능도 실시간 채팅 애플리케이션에 사용자가 있는지 자동으로 감지하거나 사용자를 현재 애플리케이션으로 다시 호출하여 즉각성을 높입니다. 예를 들어 [현재 위치](https://www.pubnub.com/docs/general/presence/overview) 는 친구, 동료 플레이어 또는 공동 작업자가 온라인 상태일 때 사용자에게 알려줍니다. 이는 친구나 공동 작업자와 채팅할 때 더 몰입감 있는 경험을 제공하는 다른 애플리케이션으로 이동하지 않고 웹사이트에 계속 머물게 하므로 웹 기반 애플리케이션에 특히 중요하며 반드시 고려해야 할 기능입니다.

### 강력한 사용자 인증 및 권한 부여 시스템

오늘날의 기술로 인해 간단한 채팅 애플리케이션은 생성할 수 있는 채팅의 수가 많기 때문에 보다 고급 인증 시스템을 갖추는 경향이 있습니다. 공개 채팅방이든, 그룹 채팅이든, 1대1 채팅이든, 특정 대화에 액세스할 수 있는 사용자를 제한하여 특정 메시지를 볼 수 있는 사용자를 제한할 수 있습니다.

처음부터 채팅을 구축하여 다음과 같은 기술을 사용하려는 경우 [Socket.IO](http://socket.io) 와 같은 기술을 사용하여 채팅을 구축하려는 경우에는 통신 계층 위에 일정 수준의 채널 아키텍처를 적용해야 합니다. 채널은 모든 유형의 각 채팅에 대한 데이터 전송을 위해 격리될 것입니다. 인증된 사용자 또는 채널/채팅을 생성한 사용자만 현재 채널에 액세스하고 사람들을 초대할 수 있습니다.

두 번째 보호 계층은 JSON 웹 토큰과 같은 동적 토큰 인증 시스템([JWT](https://jwt.io/)). 토큰은 앱의 백엔드 서버에서 생성되는 수명이 짧은 액세스 키로, 사용자가 초대받았거나 액세스 권한이 있는 채널에 액세스할 수 있도록 허용합니다. 백엔드 서버의 로직은 토큰을 사용자가 게시(메시지 보내기)하거나 구독(메시지 읽기)할 수 있는 채널을 지정하는 채널 식별 가능한 개체로 파싱하기 위해 구현되어야 합니다.

암호화는 데이터 전송 및 데이터 저장 계층 위에 적용할 수 있는 또 다른 보안 계층입니다. 이는 전송 프로토콜에 따라 다르며, 전송 계층 보안([TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security)) 또는 웹 소켓 보안([WSS](https://en.wikipedia.org/wiki/WebSocket))를 구현하여 웹 애플리케이션에서 비공개 채팅을 실행하는 기능을 구현할 수 있습니다.

PubNub와 같은 IaaS 서비스를 사용하면 채널 분리 아키텍처를 사용하여 구축되며 다음과 같은 기능을 제공합니다. [액세스 관리자](https://www.pubnub.com/docs/general/security/access-control) 를 제공하므로 모든 메시지와 채널이 보호되며, 설정이 완료되면 어떤 유형의 채팅을 만들지 사용자가 재량에 따라 결정할 수 있습니다.

### 실시간 채팅 애플리케이션의 확장성

웹 기반 채팅 애플리케이션을 처음부터 설계할 때는 채팅이 증가하는 사용자 기반과 트래픽 증가를 처리할 수 있도록 확장성을 최우선적으로 고려해야 합니다.

백엔드 아키텍처는 많은 동시 사용자와 메시지를 처리할 수 있도록 설계되어야 합니다. 확장 가능한 아키텍처는 [분산 데이터베이스](https://en.wikipedia.org/wiki/Distributed_database), [로드 밸런서](https://en.wikipedia.org/wiki/Load_balancing_(computing))및 캐싱 메커니즘을 사용하여 높은 트래픽을 관리하고 성능을 개선할 수 있습니다. 사용자와 메시지의 수가 증가함에 따라 스토리지 요구 사항도 증가하게 됩니다. 대용량의 데이터를 처리할 수 있고 필요에 따라 쉽게 확장할 수 있는 데이터베이스 시스템을 선택하는 것이 중요합니다.

간단한 웹 기반 채팅 애플리케이션을 구축하는 방법
---------------------------

웹 앱의 클라이언트 측을 구축하려면 다음과 같은 통합 개발 환경(IDE)을 다운로드하세요. [Visual Studio Code](https://code.visualstudio.com/) 와 같은 통합 개발 환경(IDE)을 다운로드하여 특정 프레임워크를 선택하거나 HTML, CSS 및 [Javascript를](https://www.pubnub.com/guides/javascript/) 사용합니다. 웹 애플리케이션용 프레임워크는 다음과 같습니다. [React](https://reactjs.org/) 또는 [Angular](https://angular.io/)이 있으며, 이 프레임워크는 고급 상태 관리 기술을 통합하여 개발을 더 쉽게 만들어 줍니다.

최신 버전의 Visual Studio Code를 다운로드한 후에는 프로젝트 디렉터리에 .html, .css 및 .js 파일을 만들어 프로젝트를 만듭니다. 일반적으로 바닐라 자바스크립트 프로젝트의 핵심 파일 이름은 app.js, index.html, main.css입니다. index.html 파일의 절대 경로를 복사하여 브라우저에 붙여넣으면 이제 코드가 표시되고 실행됩니다. 바닐라 자바스크립트 프로젝트에 대한 자세한 설정은 Visual Studio 코드 [튜토리얼](https://learn.microsoft.com/en-us/training/modules/get-started-with-web-development/) 를 참조하여 웹 개발을 시작하세요. 프레임워크를 사용하는 경우 튜토리얼을 따라 다음을 시작할 수 있습니다. [React](https://reactjs.org/docs/getting-started.html) 또는 [Angular](https://angular.io/start).

이제 통신을 처리하는 데 사용할 서버 측 언어와 호스팅 서비스를 선택해야 합니다. 예를 들어 다음을 사용하여 첫 번째 웹 서버를 만들어 보겠습니다. [Node.js](https://nodejs.org/en/). Node.js를 설치한 후 터미널에서 "npm init" 명령을 사용하여 Node.js 프로젝트를 생성합니다. 새 프로젝트를 만든 후 Visual Studio Code를 사용하여 프로젝트를 열고 localhost에서 서버 호스팅을 처리할 index.js라는 파일을 만들 수 있습니다. 새 프로젝트를 만든 후 Visual Studio Code를 사용하여 프로젝트를 열고 Node.js 시작하기 가이드를 따를 수 있습니다. [가이드](https://nodejs.org/en/docs/guides/getting-started-guide/) 를 따라 로컬에서 서버를 호스팅할 수 있습니다.

두 클라이언트 애플리케이션 간에 실시간으로 통신할 수 있도록 프런트엔드 인프라가 서버와 웹소켓 프로토콜을 통해 통신하기를 원할 것입니다. 이 경우 Node.js 내에서 WebSocket 용어를 구현하고 이해하는 데 익숙해져야 합니다. 웹소켓 라이브러리를 설치해야 합니다, [ws](https://www.npmjs.com/package/ws) 라는 웹소켓 라이브러리를 설치해야 합니다, [express](https://www.npmjs.com/package/express) 와 간단한 [HTTP](https://www.pubnub.com/guides/http/) 서버를 생성하기 위한 [nodemon](https://www.npmjs.com/package/nodemon) 을 사용하여 코드의 변경 사항을 추적하고 서버를 재시작합니다. 이 모든 설정이 완료되었으므로 이제 간단한 웹 기반 채팅 애플리케이션을 만드는 로직을 구현할 수 있습니다. node.js에서 웹소켓을 구현하는 방법에 대한 자세한 내용은 다음을 참조하세요. [Node.js 웹소켓 프로그래밍 예제](https://www.pubnub.com/blog/nodejs-websocket-programming-examples/).

위에서 언급한 라이브러리를 사용하여 WebSocket 기능을 구현하는 것도 물론 가능하지만, 애플리케이션에서 실시간 통신을 구현하는 데 더 유용한 선택이 될 수 있는 여러 가지 이점을 제공하는 것이 PubNub입니다. PubNub 사용의 주요 이점 중 하나는 실시간 통신을 위한 완전 관리형 인프라를 제공한다는 점입니다. 즉, 자체 웹소켓 서버를 설정하고 관리하는 것에 대해 걱정할 필요가 없는데, PubNub에서 이 모든 것을 처리해 주기 때문입니다. 특히 웹소켓 구현의 복잡성에 익숙하지 않은 경우 많은 시간과 노력을 절약할 수 있습니다.

간단한 웹 기반 채팅 애플리케이션 예시
---------------------

메신저, 마이크로소프트 팀즈, 슬랙과 같은 웹 기반 채팅 애플리케이션은 고유한 사용자 경험을 만들기 위해 사용자 지정 채팅 애플리케이션을 구현합니다. 하지만 PubNub을 사용하면 기업이 인프라를 설정하고 확장할 필요가 없습니다.

-   [**자바스크립트 그룹 채팅 애플리케이션:**](https://www.pubnub.com/demos/10-line-chat/) Javascript SDK를 사용하는 간단한 웹 기반 그룹 채팅 애플리케이션으로, PubNub을 통해 실시간으로 메시지를 보낼 수 있습니다. 이 리포지토리는 PubNub 메시징을 사용하여 작성되었으며, 단 10줄의 코드(스타일 제외)로 완성되었습니다. 이 리포지토리는 다음에서 다운로드할 수도 있습니다. [GitHub](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat).
    
-   [**React 채팅 컴포넌트를 사용한 그룹 채팅**](https://www.pubnub.com/demos/group-chat-react-demo/)**:** 이 그룹 채팅 애플리케이션은 단일 사이즈의 채팅 컴포넌트를 사용하여 사용자가 직접 일대일 채팅과 그룹 채팅을 시작할 수 있게 해줍니다. 이 애플리케이션은 React 프레임워크와 저희의 [React 채팅 컴포넌트](https://www.pubnub.com/docs/chat/components/react). 우리의 [Github](https://github.com/pubnub/react-chat-components/tree/master/samples/react/group-chat) 에서 리포지토리를 다운로드하세요.
    

웹 기반 채팅 애플리케이션을 위한 PubNub 시작하기
------------------------------

PubNub은 사용자 정의가 가능한 채팅 솔루션을 구현할 수 있는 IaaS 서비스입니다. [SDK](https://www.pubnub.com/docs/sdks) 를 사용하여 웹 애플리케이션에 빠르고 비용 효율적으로 통합할 수 있는 IaaS 서비스입니다. PubNub을 활용하여 애플리케이션에 실시간 메시징 기능을 구축할 수 있습니다. 이러한 전략은 궁극적으로 기업이 시간과 비용을 절약하는 동시에 고객에게 고품질 채팅 솔루션을 제공하는 데 도움이 될 수 있습니다.

PubNub에는 다음과 같은 기능이 API에 내장되어 있으며 애플리케이션의 특정 요구 사항을 충족할 수 있습니다.

1.  [게시](https://www.pubnub.com/docs/messages/publish): 텍스트 업데이트, 이모티콘 반응, 전송된 파일, 기타 복잡한 메타데이터 등 사용자 입력이 업데이트될 때마다 메시지를 전송하세요. [메타데이터](https://www.pubnub.com/docs/metadata/channel-metadata).
    
2.  [구독](https://www.pubnub.com/docs/messages/receive): 새 메시지를 수신하여 사용자 화면을 새로 고칩니다.
    
3.  [현재 상태](https://www.pubnub.com/docs/presence/overview): 사용자의 온라인 상태를 업데이트하고 감지합니다.
    
4.  [메시지 지속성](https://www.pubnub.com/docs/storage): 사용자가 앱에 로그인하면 수신된 모든 메시지를 표시하거나 프로젝트 및 문서 수정 사항을 추적합니다.
    
5.  [모바일 푸시 알림](https://www.pubnub.com/docs/push/send): 앱에서 떨어져 있는 모바일 사용자에게 채팅 메시지, 프로젝트 업데이트 또는 애플리케이션 업데이트에 대해 알립니다.
    
6.  [앱 컨텍스트](https://www.pubnub.com/docs/metadata/channel-metadata): 데이터베이스를 설정하거나 호출하지 않고도 사용자에 대한 정보를 한 곳에 저장하세요.
    
7.  [액세스 관리자](https://www.pubnub.com/docs/security/access-control): 특정 사용자의 비공개 대화, 채널 룸, 문서, 프로젝트에 대한 액세스를 제한하세요.
    
8.  [기능](https://www.pubnub.com/docs/general/serverless/functions/overview): 메시지 번역, 부적절한 메시지 검열, 새 사용자 도착 알림, 다른 사용자에게 멘션 알림 기능.
    
9.  [이벤트 및 작업](https://www.pubnub.com/docs/general/serverless/events-and-actions/overview): 애플리케이션의 에코시스템에서 이벤트를 중앙에서 관리하고 코드 없이 비즈니스 로직을 트리거할 수 있습니다.
    

웹 기반 실시간 채팅 앱을 강화하기 위해 PubNub을 사용하려면 먼저 PubNub 계정을 생성하고 PubNub의 JavaScript SDK를 다운로드해야 합니다. 이 SDK는 애플리케이션에 원활하게 통합되며 PubNub의 실시간 커뮤니케이션 플랫폼에 연결할 수 있습니다.

1.  [로그인](https://admin.pubnub.com/#/login) 하거나 계정을 생성하여 관리자 포털에서 앱을 만들고 애플리케이션에서 사용할 키를 받으세요. 키 생성 방법은 다음 도움말을 참조하세요. [키 생성하기](https://www.pubnub.com/how-to/admin-portal-create-keys/).
    
2.  [다운로드](https://www.pubnub.com/docs/sdks/android) 문서에 나와 있는 지침에 따라 JavaScript SDK를 다운로드하여 메시징 앱에 필요한 PubNub 종속 요소를 설치합니다.
    
3.  SDK 시작하기 문서에 따라 채널 게시 및 구독을 시작할 수 있도록 PubNub 개체를 구성합니다.
    

PubNub이 어떻게 도움이 되나요?
====================

이 문서는 원래 [PubNub.com에](https://www.pubnub.com/blog/web-based-chat-application/) 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱 및 IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공 및 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.