WebRTC로 P2P 파일 공유 앱 만들기: 초보자도 쉽게 따라하는 가이드 🚀

안녕하세요, 여러분! 오늘은 정말 흥미진진한 주제로 찾아왔어요. 바로 WebRTC를 이용한 P2P 파일 공유 애플리케이션 개발에 대해 알아볼 거예요. 어려워 보이죠? 걱정 마세요! 제가 쉽고 재미있게 설명해드릴게요. 마치 카톡으로 수다 떠는 것처럼 편하게 읽어주세요. ㅋㅋㅋ

이 글을 다 읽고 나면, 여러분도 WebRTC의 고수가 될 수 있을 거예요! 심지어 재능넷(https://www.jaenung.net)에서 여러분의 새로운 스킬을 공유할 수 있을지도 모르겠네요. 어때요, 기대되지 않나요? 😎

자, 이제 본격적으로 시작해볼까요? 준비되셨나요? 그럼 고고씽~ 🏃‍♂️💨

1. WebRTC의 기초: 친구랑 비밀 노트 주고받기 🤫

WebRTC를 이해하기 위해, 우리 학창 시절로 잠깐 돌아가볼까요? 수업 시간에 친구와 몰래 쪽지를 주고받던 그 시절 말이에요. ㅋㅋㅋ

WebRTC는 마치 그 쪽지 전달과 비슷해요. 하지만 여기서 중요한 점! 선생님(서버)의 도움 없이 친구와 직접 쪽지를 주고받을 수 있다는 거죠.

이제 WebRTC가 뭔지 조금은 감이 오시나요? 그럼 이 기술을 이용해서 어떻게 파일을 공유할 수 있는지 알아볼까요?

위의 그림을 보세요. Peer A와 Peer B가 직접 연결되어 있죠? 이게 바로 WebRTC의 마법이에요! 🧙‍♂️

WebRTC를 사용하면 중간에 서버 없이도 브라우저끼리 직접 대화할 수 있어요. 이게 바로 P2P(Peer-to-Peer) 통신의 핵심이죠. 파일을 주고받을 때도 서버를 거치지 않고 직접 전송할 수 있으니, 얼마나 빠르고 효율적일까요?

자, 이제 WebRTC의 기본 개념을 알았으니, 본격적으로 파일 공유 애플리케이션을 만들어볼까요? 어려워 보이지만, 걱정 마세요. 제가 step by step으로 설명해드릴게요. 마치 레고 블록 쌓듯이, 하나씩 차근차근 만들어 갈 거예요!

다음 섹션에서는 WebRTC의 핵심 컴포넌트들에 대해 알아볼 거예요. 뭔가 어려워 보이는 용어들이 나올 수도 있지만, 겁먹지 마세요! 제가 쉽게 설명해드릴게요. 준비되셨나요? 그럼 고고! 🚀

2. WebRTC의 핵심 컴포넌트: 통신의 3대 천사 👼👼👼

자, 이제 WebRTC의 핵심 컴포넌트들을 알아볼 차례예요. 이 녀석들을 저는 "통신의 3대 천사"라고 부르고 싶네요. ㅋㅋㅋ 왜 그런지 함께 알아볼까요?

이 세 가지가 바로 WebRTC의 핵심이에요. 각각이 무슨 역할을 하는지 자세히 알아볼까요?

1. MediaStream (getUserMedia) 📸

MediaStream은 말 그대로 미디어 스트림을 담당해요. 카메라나 마이크에서 오는 데이터 스트림을 잡아내는 녀석이죠.

getUserMedia() 메서드를 사용하면 사용자의 카메라나 마이크에 접근할 수 있어요. 영상 통화 앱을 만든다면 이 컴포넌트가 정말 중요하겠죠?

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 스트림을 사용하는 코드
  })
  .catch(error => {
    console.error('미디어 접근 에러:', error);
  });

위 코드를 보면, 카메라(video)와 마이크(audio) 접근 권한을 요청하고 있어요. 허락이 떨어지면 스트림을 사용할 수 있게 되는 거죠!

2. RTCPeerConnection 🤝

RTCPeerConnection은 WebRTC의 심장이라고 할 수 있어요. 이 녀석이 바로 피어 간의 연결을 담당하죠.

RTCPeerConnection은 두 피어 사이의 안전한 연결을 만들고 유지해요. 음성, 영상, 데이터 등 모든 종류의 통신이 이 연결을 통해 이루어져요.

const peerConnection = new RTCPeerConnection();

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // ICE candidate를 다른 피어에게 전송
  }
};

peerConnection.ontrack = event => {
  // 받은 미디어 트랙을 처리
};

위 코드에서 RTCPeerConnection 객체를 생성하고, ICE candidate(연결에 필요한 네트워크 정보)와 미디어 트랙을 처리하는 이벤트 핸들러를 설정하고 있어요.

3. RTCDataChannel 💬

마지막으로 RTCDataChannel! 이 녀석이 바로 오늘의 주인공이에요. 파일 공유 앱을 만드는 데 가장 중요한 컴포넌트죠.

RTCDataChannel을 사용하면 피어 간에 직접 데이터를 주고받을 수 있어요. 텍스트, 파일, 게임 데이터 등 어떤 종류의 데이터든 주고받을 수 있죠.

const dataChannel = peerConnection.createDataChannel('myDataChannel');

dataChannel.onopen = () => {
  console.log('데이터 채널이 열렸어요!');
};

dataChannel.onmessage = event => {
  console.log('받은 메시지:', event.data);
};

위 코드에서는 데이터 채널을 생성하고, 채널이 열렸을 때와 메시지를 받았을 때의 동작을 정의하고 있어요.

위 그림을 보세요. RTCPeerConnection이 가장 바깥쪽에 있고, 그 안에 MediaStream과 RTCDataChannel이 있죠? 이렇게 세 가지 컴포넌트가 서로 협력하면서 WebRTC 통신을 가능하게 만드는 거예요!

자, 이제 WebRTC의 핵심 컴포넌트들에 대해 알아봤어요. 어때요? 생각보다 어렵지 않죠? 이 세 가지만 잘 이해하고 있으면, WebRTC를 이용한 애플리케이션 개발의 절반은 성공한 거나 다름없어요!

다음 섹션에서는 이 컴포넌트들을 실제로 어떻게 사용하는지, 그리고 P2P 연결을 어떻게 설정하는지 자세히 알아볼 거예요. 준비되셨나요? 그럼 고고씽! 🚀

3. P2P 연결 설정하기: 친구와 비밀 통로 만들기 🕵️‍♂️

자, 이제 본격적으로 P2P 연결을 설정해볼 거예요. 이 과정은 마치 친구와 비밀 통로를 만드는 것과 비슷해요. 어렵게 들릴 수 있지만, 차근차근 따라오면 금방 이해할 수 있을 거예요!

Step 1: 시그널링 서버 준비하기 📡

P2P 연결을 시작하려면 먼저 '시그널링'이라는 과정이 필요해요. 이건 뭐냐고요? 음... 친구와 비밀 통로를 만들기 전에 먼저 어디서 만날지 약속을 정하는 것과 비슷해요.

시그널링 서버는 두 피어가 서로를 찾고 연결하는 데 필요한 정보를 교환하는 중개자 역할을 해요.

시그널링 서버는 WebSocket을 이용해 구현할 수 있어요. 간단한 예제 코드를 볼까요?

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    // 받은 메시지를 다른 모든 클라이언트에게 브로드캐스트
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

이 코드는 Node.js와 ws 라이브러리를 사용해 간단한 시그널링 서버를 만든 거예요. 클라이언트로부터 메시지를 받으면, 그 메시지를 다른 모든 클라이언트에게 전달해주는 역할을 하죠.

Step 2: RTCPeerConnection 객체 생성하기 🤝

이제 클라이언트 쪽 코드를 볼 차례예요. 먼저 RTCPeerConnection 객체를 생성해야 해요.

const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
const peerConnection = new RTCPeerConnection(configuration);

여기서 configuration 객체는 STUN 서버의 주소를 포함하고 있어요. STUN 서버는 뭐냐고요? 음... 네트워크 환경을 파악하는 도우미라고 생각하면 돼요. NAT 뒤에 있는 피어의 공개 IP 주소와 포트를 알아내는 데 도움을 주죠.

Step 3: 시그널링 채널 연결하기 📞

이제 시그널링 서버와 연결할 차례예요. WebSocket을 사용해 연결해볼게요.

const signaling = new WebSocket('ws://localhost:8080');

signaling.onmessage = function(event) {
  const message = JSON.parse(event.data);
  if (message.type === 'offer') {
    handleOffer(message);
  } else if (message.type === 'answer') {
    handleAnswer(message);
  } else if (message.type === 'candidate') {
    handleCandidate(message);
  }
};

이 코드는 시그널링 서버로부터 메시지를 받았을 때의 동작을 정의하고 있어요. 메시지 타입에 따라 다른 처리를 하게 되죠.

Step 4: Offer와 Answer 교환하기 💌

P2P 연결을 시작하려면 한 쪽에서 'Offer'를 보내고, 다른 쪽에서 'Answer'로 응답해야 해요. 마치 "우리 친구할래?"하고 물어보고 "그래, 좋아!"라고 대답하는 것과 비슷하죠. ㅋㅋㅋ

// Offer를 생성하고 전송하는 함수
async function createOffer() {
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  signaling.send(JSON.stringify({type: 'offer', sdp: offer.sdp}));
}

// Offer를 받아 처리하는 함수
async function handleOffer(offer) {
  await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);
  signaling.send(JSON.stringify({type: 'answer', sdp: answer.sdp}));
}

// Answer를 받아 처리하는 함수
function handleAnswer(answer) {
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

이 과정을 통해 두 피어는 서로의 세션 설명(SDP)을 교환하게 돼요. SDP에는 사용할 미디어 형식, 네트워크 정보 등이 포함되어 있죠.

Step 5: ICE Candidate 교환하기 🧊

마지막으로 ICE Candidate를 교환해야 해요. ICE Candidate는 피어 간 연결을 위한 네트워크 정보를 담고 있어요.

peerConnection.onicecandidate = function(event) {
  if (event.candidate) {
    signaling.send(JSON.stringify({
      type: 'candidate',
      candidate: event.candidate
    }));
  }
};

function handleCandidate(message) {
  const candidate = new RTCIceCandidate(message.candidate);
  peerConnection.addIceCandidate(candidate).catch(e => console.error(e));
}

이렇게 하면 P2P 연결 설정이 완료돼요! 🎉

위 그림은 P2P 연결 과정을 간단히 표현한 거예요. Peer A가 Offer를 보내고, Peer B가 Answer로 응답하며, 그 후 ICE Candidate를 교환하는 과정을 볼 수 있죠.

자, 이제 P2P 연결 설정 방법에 대해 알아봤어요. 어때요? 생각보다 복잡하지 않죠? 이제 이 연결을 이용해 실제로 파일을 주고받는 방법을 알아볼 차례예요. 다음 섹션에서 계속해볼까요? 고고! 🚀

4. RTCDataChannel로 파일 전송하기: 비밀 파일을 친구에게 보내자! 🕵️‍♀️📁

드디어 우리의 메인 이벤트, RTCDataChannel을 이용한 파일 전송 시간이에요! 이 부분이 바로 우리가 만들고 있는 P2P 파일 공유 애플리케이션의 핵심이죠. 준비되셨나요? 그럼 시작해볼게요!

Step 1: DataChannel 생성하기 🛠️

먼저 DataChannel 을 생성해야 해요. RTCPeerConnection 객체를 통해 만들 수 있죠.

const dataChannel = peerConnection.createDataChannel('fileTransfer');

dataChannel.onopen = function() {
  console.log("DataChannel이 열렸어요!");
};

dataChannel.onmessage = function(event) {
  // 메시지 수신 처리
};

여기서 'fileTransfer'는 DataChannel의 이름이에요. 이름은 마음대로 정할 수 있어요. 그리고 onopen과 onmessage 이벤트 핸들러를 설정했죠? 이렇게 하면 채널이 열리고 메시지가 도착했을 때 어떻게 처리할지 정의할 수 있어요.

Step 2: 파일 선택하기 📂

이제 사용자가 전송할 파일을 선택할 수 있게 해줘야 해요. HTML에 파일 입력 요소를 추가하고, JavaScript로 선택된 파일을 읽어올 거예요.

<input type="file" id="fileInput">

<script>
const fileInput = document.getElementById('fileInput');
let file;

fileInput.addEventListener('change', function(e) {
  file = e.target.files[0];
  console.log('선택된 파일:', file.name);
});
</script>

이렇게 하면 사용자가 파일을 선택했을 때 그 파일의 정보를 얻을 수 있어요.

Step 3: 파일 전송하기 📤

이제 진짜 파일을 전송해볼 거예요. 파일을 작은 조각(chunk)으로 나눠서 보낼 거예요. 왜 그럴까요? 큰 파일을 한 번에 보내려고 하면 메모리 부족이나 성능 문제가 생길 수 있거든요.

function sendFile() {
  const chunkSize = 16384; // 16KB
  const fileReader = new FileReader();
  let offset = 0;

  fileReader.addEventListener('load', e => {
    dataChannel.send(e.target.result);
    offset += e.target.result.byteLength;
    if (offset < file.size) {
      readSlice(offset);
    }
  });

  const readSlice = o => {
    const slice = file.slice(o, o + chunkSize);
    fileReader.readAsArrayBuffer(slice);
  };

  readSlice(0);
}

이 코드는 파일을 16KB 크기의 조각으로 나눠서 전송해요. FileReader를 사용해 파일의 각 조각을 ArrayBuffer로 읽고, 그것을 DataChannel을 통해 전송하죠.

Step 4: 파일 수신하기 📥

이제 반대편에서 파일을 받을 차례예요. 받은 데이터를 모아서 다시 파일로 만들어야 해요.

let receivedBuffers = [];

dataChannel.onmessage = function(event) {
  const data = event.data;
  if (typeof data === 'string') {
    // 파일 정보 (이름, 크기 등)
    const fileInfo = JSON.parse(data);
    // 파일 정보 처리
  } else {
    // 파일 데이터
    receivedBuffers.push(data);
  }
};

function assembleFile() {
  const file = new Blob(receivedBuffers);
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(file);
  downloadLink.download = 'receivedFile';
  downloadLink.click();
}

이 코드는 받은 데이터를 receivedBuffers 배열에 모아두다가, 모든 데이터를 받으면 Blob 객체로 만들어 다운로드 링크를 생성해요.

위 그림은 파일이 어떻게 전송되는지를 보여주고 있어요. 파일이 작은 조각으로 나뉘어 RTCDataChannel을 통해 전송되는 걸 볼 수 있죠.

자, 이제 우리는 WebRTC를 이용해 P2P로 파일을 전송하는 방법을 배웠어요! 어때요? 생각보다 어렵지 않죠? 이 기술을 응용하면 정말 다양한 애플리케이션을 만들 수 있어요.

예를 들어, 재능넷에서 1:1 화상 과외를 하면서 동시에 학습 자료를 주고받을 수 있는 서비스를 만들 수 있겠네요. 또는 디자이너들이 작업 파일을 실시간으로 공유하며 협업할 수 있는 플랫폼도 만들 수 있겠어요. 가능성은 무궁무진해요! 🌟

다음 섹션에서는 지금까지 배운 내용을 종합해서 간단한 P2P 파일 공유 애플리케이션을 만들어볼 거예요. 준비되셨나요? 그럼 고고! 🚀

5. 실전: 간단한 P2P 파일 공유 앱 만들기 🛠️

드디어 우리의 지식을 총동원해서 실제 애플리케이션을 만들어볼 시간이에요! 간단하지만 실용적인 P2P 파일 공유 앱을 만들어볼 거예요. 준비되셨나요? 그럼 시작해볼까요?

Step 1: HTML 구조 만들기 🏗️

먼저 우리 앱의 기본 구조를 HTML로 만들어볼게요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>초간단 P2P 파일 공유</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        button { padding: 10px; margin: 5px; }
        #fileInfo, #receivedFileInfo { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>초간단 P2P 파일 공유</h1>
    <input type="file" id="fileInput">
    <button id="sendButton">파일 보내기</button>
    <div id="fileInfo"></div>
    <div id="receivedFileInfo"></div>
    <script src="app.js"></script>
</body>
</html>

이 HTML은 파일 선택, 전송 버튼, 그리고 파일 정보를 표시할 영역을 포함하고 있어요. 간단하지만 우리가 필요한 모든 요소를 갖추고 있죠.

Step 2: JavaScript로 기능 구현하기 🧠

이제 app.js 파일에 우리 앱의 핵심 기능을 구현해볼게요.

// WebRTC 연결 설정
const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
const peerConnection = new RTCPeerConnection(configuration);
let dataChannel;

// 파일 전송 관련 변수
let fileInput = document.getElementById('fileInput');
let sendButton = document.getElementById('sendButton');
let fileInfo = document.getElementById('fileInfo');
let receivedFileInfo = document.getElementById('receivedFileInfo');
let file;

// DataChannel 생성
dataChannel = peerConnection.createDataChannel('fileTransfer');
dataChannel.binaryType = 'arraybuffer';

dataChannel.onopen = function() {
    console.log("DataChannel이 열렸어요!");
    sendButton.disabled = false;
};

// 파일 선택 시 동작
fileInput.addEventListener('change', function(e) {
    file = e.target.files[0];
    fileInfo.textContent = `선택된 파일: ${file.name} (${file.size} bytes)`;
});

// 파일 전송
sendButton.addEventListener('click', sendFile);

function sendFile() {
    if (!file) {
        alert('먼저 파일을 선택해주세요!');
        return;
    }

    const chunkSize = 16384;
    const fileReader = new FileReader();
    let offset = 0;

    fileReader.addEventListener('load', e => {
        dataChannel.send(e.target.result);
        offset += e.target.result.byteLength;
        if (offset < file.size) {
            readSlice(offset);
        } else {
            console.log('파일 전송 완료!');
        }
    });

    const readSlice = o => {
        const slice = file.slice(o, o + chunkSize);
        fileReader.readAsArrayBuffer(slice);
    };

    readSlice(0);
}

// 파일 수신
let receivedBuffers = [];
let receivedSize = 0;
let fileSize = 0;

dataChannel.onmessage = function(event) {
    const data = event.data;
    if (typeof data === 'string') {
        const fileInfo = JSON.parse(data);
        fileSize = fileInfo.fileSize;
        receivedFileInfo.textContent = `받고 있는 파일: ${fileInfo.fileName} (${fileInfo.fileSize} bytes)`;
    } else {
        receivedBuffers.push(data);
        receivedSize += data.byteLength;
        
        if (receivedSize === fileSize) {
            const received = new Blob(receivedBuffers);
            receivedFileInfo.innerHTML = `
                파일 수신 완료!<br>
                <a download="${file.name}" href="${URL.createObjectURL(received)}">다운로드</a>
            `;
            receivedBuffers = [];
        }
    }
};

// 여기에 시그널링 코드를 추가해야 합니다.
// (실제 구현을 위해서는 시그널링 서버가 필요합니다)

이 코드는 우리가 앞서 배운 모든 개념을 종합해서 만든 거예요. 파일 선택, 전송, 수신, 그리고 다운로드까지 모든 기능을 구현했죠.

Step 3: 테스트와 개선 🧪

이제 우리 앱을 테스트해볼 차례예요. 로컬에서 테스트할 때는 두 개의 브라우저 창을 열고 서로 다른 피어 역할을 하도록 설정해야 해요. 실제 환경에서는 시그널링 서버를 통해 서로 다른 컴퓨터에서 연결할 수 있겠죠.

테스트를 하면서 다음과 같은 점들을 개선해볼 수 있어요:

• 전송 진행 상황을 표시하는 프로그레스 바 추가
• 여러 개의 파일을 한 번에 전송할 수 있는 기능
• 연결 상태를 실시간으로 표시하는 UI
• 파일 전송 중 오류 처리 및 재시도 기능

위 그림은 우리가 만든 P2P 파일 공유 앱의 구조를 보여주고 있어요. Peer A에서 파일을 선택하고 전송하면, WebRTC DataChannel을 통해 Peer B로 전송되고, Peer B에서는 이를 수신하고 다운로드할 수 있죠.

자, 이제 우리는 간단하지만 실용적인 P2P 파일 공유 앱을 만들어봤어요! 어떠세요? 생각보다 어렵지 않죠? 이 기본적인 구조를 바탕으로 더 많은 기능을 추가하고 개선할 수 있어요.

예를 들어, 재능넷에서 이런 기술을 활용하면 어떨까요? 1:1 화상 과외 중에 학습 자료를 바로 주고받을 수 있는 기능을 추가한다든지, 또는 디자이너들이 작업 파일을 실시간으로 공유하며 협업할 수 있는 플랫폼을 만들 수도 있겠죠. 가능성은 무궁무진해요! 🌟

WebRTC와 P2P 파일 공유에 대해 배운 내용이 여러분의 개발 여정에 도움이 되었길 바라요. 이 기술을 활용하면 정말 혁신적인 서비스를 만들 수 있어요. 여러분의 상상력이 한계예요!

다음에 또 다른 흥미진진한 주제로 찾아올게요. 그때까지 코딩 열심히 하세요! 안녕~ 👋