[ 무물 ] 근처 사용자 찾기 #1 : 위도 / 경도 GPS 기반 WebSocket 세팅하기

사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 만들기 위해 WebSocket을 도입했습니다.
첫번째로 웹소켓을 세팅하고 연결하는 초기세팅 과정입니다. 

모티브인 토스 주변 친구 찾기 기능입니다.

 

🧭 전체 목표 기능

‘무물’ 프로젝트는 다음 기능을 목표로 하고 있습니다.

• 내 주변 100m 이내의 사용자 탐색
• 실시간으로 사용자 위치 갱신 및 시각화
• 사용자 클릭 시 실시간 알림 전송
• 멀티 디바이스 간 통신 가능 (예: 핸드폰 ↔ 노트북)

이러한 기능들은 기본적으로 사용자 간의 실시간 데이터 송수신이 필요합니다.

 

 

💡 왜 WebSocket인가?

• HTTP는 클라이언트가 요청해야 서버가 응답하는 구조라, 실시간 통신이 어렵고
• WebSocket은 양방향 통신을 통해 서버 → 클라이언트로도 메시지를 즉시 보낼 수 있다는 장점이 있습니다.

프로젝트 목표 기능이 사용자의 위치 정보를 주기적으로 서버에 보내고, 서버는 실시간으로 다른 사용자 정보를 전달해야 했습니다. 

결론적으로 WebSocket은 실시간 위치 기반 통신에 최적화된 기술이었습니다.

 

---

처음 시도는 블루투스, 하지만 결국은 위도/경도로 전환한 과정

초기 기획 단계에서는 "근거리 통신"이라는 단어 그대로, 기기 간의 물리적 근접을 탐지하는 방법으로 Bluetooth Low Energy (BLE) 기반 접근을 고려했습니다. 하지만 구현과 조사 과정에서 여러 현실적인 제약으로 인해 GPS 기반 위도/경도 거리 계산 방식으로 전환하게 되었습니다.

 

• ❌ 블루투스는 브라우저 지원 제약이 큼 (특히 모바일에서)
• ❌ 웹 기반 앱에서 권한 처리와 스캔 API 제약이 큼
• ✅ 위치 기반 접근은 모바일 웹, 웹 앱, PWA에서 모두 안정적으로 지원
• ✅ GPS 정보는 사용자간 거리 계산이 명확함

 

❌ 블루투스를 포기한 이유 1: 브라우저 지원의 한계

Chrome (Desktop)	✅ 지원	실험적 기능으로 활성화 필요
Chrome (Android)	✅ 제한적 지원	기기/OS에 따라 차이 있음
Safari (iOS)	❌ 미지원	Web Bluetooth 미지원 (2025년 현재 기준)
Firefox	❌ 미지원	보안 문제로 기본적으로 차단
Samsung Internet	❌ 미지원	Web Bluetooth 지원하지 않음

 

우선 블루투스는 치명적으로 브라우저 별 제약이 컸습니다.

iOS Safari에서는 아예 동작하지 않으며, 안드로이드라고 해도 WebView, PWA 등에서 BLE 접근이 불안정하거나 불가능한 경우가 많았습니다.

저희는 웹 개발이지만 모바일 화면만 개발하기로 (시간 제약 상 반응형은 생략) 했기 때문에 브라우저 제약이 큰 블루투스는 곤란했습니다.

 

 

❌ 블루투스를 포기한 이유 2: 권한 및 기기 탐색 복잡성

 

또 블루투스로 다른 사용자의 위치를 인식할 때 해당 기기를 인식하는 과정에서 복잡하다고 느꼈습니다.

블루투스를 우선적으로 고려했을 당시, 아래의 플로우를 따라야 했습니다.

 

• 1. 사용자가 기기 검색 권한을 수동으로 허용
  2. 스캔 가능한 BLE 기기가 특정 서비스 UUID를 브로드캐스트하고 있어야 함
  3. 해당 기기를 스캔하고 연결하거나, 정보를 읽어야 함
• 그러나 저희의 목표는 '누군가 근처에 있다'는 것을 즉시 감지하는 것이었기 때문에, 위 과정은 너무 번거롭고,
  • 기기마다 BLE 브로드캐스트 방식이 다르고
  • 사용자가 앱을 백그라운드에 둘 경우 BLE 인식이 작동하지 않음
  • 기기 간 페어링이나 BLE Advertising 세팅도 필요해 사용자 UX 저하 요인이 많았습니다

 

 

반면에 위도/경도는 브라우저 호환성이 상대적으로 좋고, 실시간 거리 계산이 안전하기 때문에 위도/경도 GPS 기반 거리 계산 방식을 최종적으로 선택했습니다.

브라우저 호환성	✅ 모든 최신 브라우저에서 지원 (PWA 포함)
권한 처리	✅ 사용자 위치 권한만 요청하면 사용 가능
거리 측정	✅ 위도/경도를 통해 명확한 거리 계산 가능
실시간성	✅ WebSocket과 결합해 실시간 거리 기반 매칭 가능

 

 

🔧 WebSocket 어떤 기술 스택으로 개발할까?

프론트엔드는 이미 NextJS (typescript 기반) 로 구성되어 있었고, 클라이언트와 서버 모두 JS/TS 생태계를 공유하면 통합 유지보수가 쉬웠기 때문에, WebSocket 서버 개발 시 다음과 같이 선택했습니다.

• Node.js + Express: 빠른 개발과 높은 커스터마이징 가능
• ws 라이브러리: Node.js에서 가장 널리 쓰이는 WebSocket 라이브러리

이외에도 배포는 Render를 사용했습니다.

WebSocket 서버가 지속적으로 열려 있어야 하고, 무료 요금제에서도 NodeJS 서버 배포가 간편하기 때문에 Render 배포를 선택했습니다.

 

---

 

🛠 초기 WebSocket 서버 세팅

처음에는 가장 간단한 구조로 WebSocket 서버를 구성해봤습니다. 특별한 비즈니스 로직 없이, 연결된 모든 클라이언트끼리 메시지를 브로드캐스트하는 구조입니다.

 

목표 실행 결과 예시

• 브라우저 탭 A에서 메시지를 보냄 → 탭 B, C에서도 즉시 console.log로 출력됨

 

1️⃣ 초기 서버 코드 구성

const express = require("express");
const http = require("http");
const WebSocket = require("ws");
const cors = require("cors");

const app = express();
app.use(cors()); // CORS 허용

const server = http.createServer(app); // HTTP 서버 래핑
const wss = new WebSocket.Server({ server }); // WebSocket 서버 생성

const clients = new Set(); // 연결된 클라이언트 목록 저장

 

 

• clients는 현재 연결된 WebSocket 클라이언트를 저장하는 Set입니다.
• CORS 설정은 프론트엔드 (Next.js)에서 이 서버에 자유롭게 연결하기 위함입니다.

 

2️⃣ WebSocket 연결 및 메시지 처리

wss.on("connection", (ws) => {
  console.log("🔗 New client connected");
  clients.add(ws);

  ws.on("message", (message) => {
    console.log("📩 Received:", message.toString());

    // 모든 클라이언트에게 브로드캐스트
    for (const client of clients) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    }
  });

  ws.on("close", () => {
    console.log("❌ Client disconnected");
    clients.delete(ws);
  });
});

 

 

• wss는 new WebSocket.Server({ server })로 생성된 WebSocket 서버 인스턴스입니다.
• wss.on("connection", (ws) => {...}): 클라이언트가 연결될 때 실행됩니다.
• ws는 연결된 개별 클라이언트 WebSocket 객체입니다.
• 새로운 클라이언트가 접속하면 .on("connection") 이벤트가 발생합니다.
• 연결된 ws 인스턴스를 clients Set에 저장하여 관리합니다.

ws.on("message", (message) => {
  console.log("📩 Received:", message.toString());
  ...
});

• 클라이언트가 메시지를 보내면, 다른 모든 클라이언트에게 그대로 전달합니다.

 

• 현재 접속 중인 모든 클라이언트를 순회하면서 readyState가 OPEN인 경우에만 메시지를 전송합니다.
• 즉, 클라이언트 A가 보낸 메시지를 서버가 받아서 B, C, D 등 모든 클라이언트에게 동일하게 전달합니다.

for (const client of clients) {
  if (client.readyState === WebSocket.OPEN) {
    client.send(message.toString());
  }
}

 

• 클라이언트가 연결 해제되면 Set에서 제거합니다.

ws.on("close", () => {
  console.log("❌ Client disconnected");
  clients.delete(ws);
});

 

3️⃣ 서버 실행

const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log(`🚀 WebSocket server running on http://localhost:${PORT}`);
});

 

• 클라이언트가 브라우저를 닫거나 연결이 끊기면 .on("close")가 실행됩니다.
• 서버에서는 해당 WebSocket 객체를 clients Set에서 제거합니다.
• 불필요한 메모리 점유나 전송 오류를 방지하기 위한 클린업 작업입니다.

 

전체코드

const express = require("express");Add commentMore actions
const http = require("http");
const WebSocket = require("ws");
const cors = require("cors");

const app = express();
app.use(cors());

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

const clients = new Set();

wss.on("connection", (ws) => {
  console.log("🔗 New client connected");
  clients.add(ws);

  ws.on("message", (message) => {
    console.log("📩 Received:", message.toString());

    // 브로드캐스트
    for (const client of clients) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    }
  });

  ws.on("close", () => {
    console.log("❌ Client disconnected");
    clients.delete(ws);
  });
});

const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log(🚀 WebSocket server running on http://localhost:${PORT});
});

 

기초 웹 소켓 서버를 세팅한 다음, 실시간으로 접속한 사용자를 감지하고, 해당 유저의 프로필 사진으로 아바타를 띄우는 기능을 추가하겠습니다. 

 

 

무물 서버 바로가기

GitHub - Ureka-Middle-Team1/nearby-wss-server: 근거리 위치 기반 실시간 통신을 위한 서버 레포