React, Tailwind 및 Zegocloud를 사용해 비디오 통화 애플리케이션 만들기

발행: 4일 전 (2025년 12월 11일 오후 04:59 GMT+9)

5 min read

Source: Dev.to

소개

안녕하세요 여러분, 최근에 전체 영상 통화 애플리케이션을 만들었는데 ZEGOCLOUD 서비스를 이용하면 몇 분 안에 얼마나 빠르게 만들 수 있는지에 놀랐습니다.

ZEGOCLOUD는 강력한 SDK와 UI Kit을 제공하여 실시간 통신의 복잡한 부분을 모두 처리해 줍니다. 영상 스트리밍, 디바이스 관리, 연결 로직 등을 처음부터 구축하는 대신, 기본 UI를 디자인하고 API를 통합하면 바로 애플리케이션을 사용할 수 있습니다.

이 가이드에서는 ZEGOCLOUD를 사용해 직접 영상 통화 애플리케이션을 만드는 과정을 단계별로 안내합니다.

1단계 – ZEGOCLOUD 회원가입

ZEGOCLOUD 웹사이트에 방문합니다.

2단계 – 프로젝트 생성

Create Your Project 를 클릭합니다.
애플리케이션 유형으로 Voice and Video Call 을 선택합니다.

3단계 – 프로젝트 이름 지정

프로젝트 이름을 입력하고 Start with UIKits 를 클릭합니다.

4단계 – 플랫폼 선택

For Web 을 선택한 뒤 Save & Start to integrate 를 클릭합니다.

5단계 – 인증 정보 가져오기

방금 만든 프로젝트에서 AppID 와 AppSecret 을 복사합니다.

6단계 – 개발 도구 설치

VS Code
Node.js

7단계 – 새 작업 공간 설정

VS Code를 새 창에서 엽니다.
데스크톱에 폴더를 하나 만들고(이름은 자유) VS Code 창에 끌어다 놓아 작업 공간으로 엽니다.

8단계 – Vite와 함께 Tailwind CSS 설치

VS Code 터미널을 열고 공식 Tailwind CSS 가이드에 따라 설치합니다.

9단계 – ZEGOCLOUD SDK와 React Router 설치

npm install @zegocloud/zego-uikit-prebuilt react-router-dom

10단계 – 컴포넌트 파일 만들기

src 폴더 안에 components 라는 폴더를 만들고, 다음 두 파일을 추가합니다.

Home.jsx
VideoCall.jsx

11단계 – Home.jsx (방 만들기 / 입장)

import { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
  const [roomCode, setRoomCode] = useState("");
  const [userName, setUserName] = useState("");
  const [showRoomLink, setShowRoomLink] = useState(false);
  const [generatedRoomLink, setGeneratedRoomLink] = useState("");
  const [copied, setCopied] = useState(false);
  const navigate = useNavigate();

  const handleCreateRoom = () => {
    if (userName.trim()) {
      setGeneratedRoomLink(
        `${window.location.origin}/room?roomID=${Math.random()
          .toString(36)
          .substring(2, 8)
          .toUpperCase()}`
      );
      setShowRoomLink(true);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(generatedRoomLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const joinCreatedRoom = () =>
    navigate(
      `/room?roomID=${new URLSearchParams(
        new URL(generatedRoomLink).search
      ).get("roomID")}&userName=${userName}`
    );

  return (
    <>
      {/* UI elements for entering user name, creating room, showing link, etc. */}
    </>
  );
}

(필요에 따라 반환된 fragment 안에 UI용 JSX를 추가하세요.)

12단계 – VideoCall.jsx (ZEGOCLOUD UI Kit 통합)

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

export default function VideoCall() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const roomID = params.get("roomID");
  const userName = params.get("userName");

  useEffect(() => {
    const appID = YOUR_APP_ID;          // replace with your AppID
    const appSign = "YOUR_APP_SECRET"; // replace with your AppSecret

    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID,
      appSign,
      roomID,
      userName
    );

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom();
    // Additional configuration (e.g., UI layout, event listeners) can be added here.
  }, [roomID, userName]);

  return null;
}

Note: YOUR_APP_ID 와 YOUR_APP_SECRET 을 5단계에서 얻은 인증 정보로 교체하세요.

13단계 – 라우팅 설정

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import VideoCall from "./components/VideoCall";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/room" element={<VideoCall />} />
      </Routes>
    </Router>
  );
}

export default App;

14단계 – 애플리케이션 실행

npm run dev   # or the script defined for Vite

제공된 로컬 URL(예: http://localhost:5173)을 브라우저에서 열고 방을 만든 뒤 영상 통화를 시작합니다.

결론

이제 React, Tailwind CSS, ZEGOCLOUD 로 만든 실용적인 영상 통화 앱이 완성되었습니다. UI를 자유롭게 커스터마이징하고, 인증 기능을 추가하거나, 필요에 따라 기능을 확장해 보세요.