"SLASH24 후기: 'N개의 탭' 문제와 '단 하나의 웹소켓'으로 찾은 해법"

"N개의 탭"과 "단 하나의 웹소켓" - 브라우저의 한계를 넘다

---

유튜브 알고리즘은 종종 예상치 못한 배움의 기회를 제공합니다.

흥미로운 제목의 영상이 문득 눈에 띄웠고, 

그 영상은 내가 평소에 놓치고 있던 브라우저 동작과 WebAPI와 개발자로써 성장하기 위한 새로운 통찰을 제공했다고 생각합니다. 이 글에서는 해당 영상에 대한 후기를 남기고, 제가 얻은 영감을 바탕으로 기록을 남깁니다.

---

📺 내가 본 영상

영상의 주제는 제목만으로도 충분히 유추해보자면...

"N개의 탭"과 "단 하나의 웹소켓"이라는 개념을 중심으로,
브라우저의 다중 탭 환경에서 발생할 수 있는 문제와 이를 해결하기 위한 기술적 접근이라고 유추할 수 있습니다.

---

💡 핵심 내용 요약

"N개의 탭"

• 브라우저에서 동일한 애플리케이션을 여러 탭에서 실행했을 때, 각 탭이 독립적으로 서버에 연결을 시도하며, 중복 작업과 리소스 낭비를 초래하는 상황.
• 예: 실시간 알림 서비스에서 동일한 알림 메시지가 각 탭에서 중복으로 수신된다면 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

"단 하나의 웹소켓"

• 각 탭이 개별적으로 웹소켓 클라이언트를 생성하지 않고, 브라우저 전역에서 단 하나의 웹소켓 연결을 유지.
• 이를 통해 효율적인 데이터 통신이 가능하며, 서버 리소스도 절약할 수 있습니다.
• 필요한 기술:
  • 브라우저 탭 간 통신 (BroadcastChannel, SharedWorker)을 활용하여 데이터를 공유.

---

AI를 통해 핵심 주제를 한번 그려 보았다.

브라우저의 다중 탭과 단일 웹소켓 연결을 나타낸 다이어그램.

---

🛠 SLASH24는 어떻게 해결했을까?

영상에서는 SLASH24에서 다중 탭 환경 문제를 해결한 방식을 아래와 같이 소개합니다.

단일 웹소켓 연결을 활용해 모든 탭이 동일한 데이터 소스를 공유하도록 설계했으며, 이를 구현하기 위해
아래 기술을 알아보았고, 최종적으로 SharedWorker WebAPI를 사용하였습니다.

---

BroadcastChannel API

BroadcastChannel API는 브라우저의 여러 탭 간 데이터를 실시간으로 주고받을 수 있는 기능을 제공합니다.
이를 통해 각 탭에서 메시지를 송신하거나 수신하며, 탭 간 상태를 동기화할 수 있습니다.

• 장점:
  • 간단한 구조와 빠른 구현이 가능합니다.
  • 메시지를 브로드캐스트 형태로 전송합니다.
• 단점:
  • 일부 오래된 브라우저에서는 지원되지 않습니다.
  • 고성능이 요구되는 환경에서는 적합하지 않을 수 있습니다.

사용법

// 1. BroadcastChannel 생성
const channel = new BroadcastChannel('example_channel');

// 2. 메시지 송신
channel.postMessage('Hello from one tab!');

// 3. 메시지 수신
channel.onmessage = (event) => {
  console.log('Message received:', event.data);
};

// 4. 채널 닫기
channel.close();

참조

• MDN BroadcastChannel API 문서

---

SharedWorker

SharedWorker는 브라우저의 여러 탭에서 공통으로 실행되는 백그라운드 스크립트를 제공합니다.
이를 통해 탭 간 공통 상태를 유지하고, 서버와의 단일 연결을 관리할 수 있습니다.

• 장점:
  • 단일 웹소켓 연결을 유지할 수 있어 서버 부하를 줄입니다.
  • 탭 간 데이터 동기화에 적합합니다.
• 단점:
  • 구현이 비교적 복잡하며, 디버깅이 어려울 수 있습니다.
  • CORS 정책의 영향을 받을 수 있습니다.

사용법

SharedWorker 스크립트 (worker.js):

// worker.js
let connections = [];

onconnect = (event) => {
  const port = event.ports[0];
  connections.push(port);

  port.onmessage = (event) => {
    // 받은 메시지를 다른 모든 연결에 브로드캐스트
    connections.forEach((connection) => {
      if (connection !== port) {
        connection.postMessage(event.data);
      }
    });
  };

  port.start();
};

메인 스크립트 (main.js):

// main.js
const worker = new SharedWorker('worker.js');

// 메시지 수신
worker.port.onmessage = (event) => {
  console.log('SharedWorker로부터 메시지 수신:', event.data);
};

// 메시지 송신
worker.port.postMessage('Hello, SharedWorker!');

// 연결 시작
worker.port.start();

참조

• MDN SharedWorker API 문서

---

✨ 이 영상을 통해 얻은 영감

이 영상은 단순히 기술적인 접근법을 보여주는 데 그치지 않고, 아래 3가지 핵심 요소를 강조할 수 있을 것 같습니다.

1. 사용자 경험의 극대화:
   다중 탭 환경에서도 일관되고 매끄러운 실시간 동작을 제공하여 사용자에게 최적의 경험을 보
2. 프론트엔드 레벨에서의 효율성 최적화:
   별도의 서버 리소스 증설 없이 브라우저 측 기술(WebAPI)을 활용하여 성능과 자원 활용의 효율성을 극대화.
3. 실시간 시스템 설계의 모범 사례 제시:
   다중 탭 간 데이터 공유와 동기화를 효율적으로 처리하는 실시간 웹 애플리케이션 설계 방법을 명확히 보여줌.

---

이 세 가지는 실시간 애플리케이션 개발뿐 아니라, 브라우저 환경에서의 효율적인 설계와 구현에 대해 다시 생각하게 해주는 중요한 포인트였습니다.

마무리

브라우저의 "N개의 탭" 문제는, 돌이켜보면 제가 진행했던 프로젝트에서도 충분히 고려해볼 만한 주제였다고 생각합니다.
하지만 이런 문제를 도출하고 깊이 고민하기까지, 개발자로서 생각할 수 있는 관점이 부족했던 것 같아 아쉬움이 남습니다.

이번에 접한 SLASH24의 접근 방식은 실시간 웹 애플리케이션 설계에 영감을 주는 훌륭한 사례였습니다.
이와 관련된 WebAPI에 대해 더 공부해보는 것도 중요하지만, 단순히 기능 완성 → 테스트 → 배포로 끝나는 개발 방식에서 벗어나야겠다는 생각이 들었습니다.

---

앞으로는 작은 기능을 구현하더라도,

1. 최적의 효율성,
2. 사용자가 느낄 경험,
   이 두 가지를 함께 고민하며 개발하는 습관을 들인다면,
   개발자로서 한층 더 성장할 수 있는 밑거름이 되지 않을까 생각합니다. 🚀