[ 무물 ] 근처 사용자 찾기 #2 : 실시간 사용자 감지 및 사용자 아바타 불러오기

사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 추가하고, 해당 사용자의 아바타 모양대로 화면에 불러오는 과정입니다.
단순히 감지하는 것이 아니라 A,B가 시간 차이를 두고 접속했을 때도 감지가 되어야 합니다.

 

 

🧭 요구 사항

• 서버는 위치 정보를 기준으로 주변 사용자들을 계산하고, 클라이언트에 실시간 전송
• 클라이언트는 서버로부터 받은 사용자 리스트를 상태값으로 저장하여 컴포넌트에 반영
• 사용자마다 고유한 캐릭터 프로필이 존재하므로, userId를 기반으로 개별 정보 조회 API를 추가 호출

 

https://arty6848.tistory.com/189

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

 

우선 이전 글을 통해 기본적인 웹 소켓 세팅을 진행했습니다.웹 소켓에 접속할 때 접속한 사용자의 userId를 웹 소켓 서버에 전송하고, 이를 감지하여 해당 userId로 데이터베이스에서 사용자의 고유 캐릭터 프로필을 가져와야 합니다.

 

 

사용자 감지 흐름을 정리하면 이렇습니다.

  participant A as 사용자 A
  participant B as 사용자 B
  participant Server as WebSocket 서버
  participant DB as 백엔드 API

  A->>Server: 위치 정보 전송
  B->>Server: 위치 정보 전송
  Server-->>A: B 감지됨 → userId 전송
  Server-->>B: A 감지됨 → userId 전송
  A->>DB: userId로 프로필 조회
  A->>DB: userId로 이름 조회
  A->>화면: 아바타와 이름 표시

 

 

우선 NextJS의 AppRouter 방식을 선택했기 때문에 

app/nearby/page.tsx 파일에 기본 내용을 작성하여 /nearby 경로에서 근거리 통신을 위한 화면을 개발하였습니다.

근처 사용자를 불러오는 부분은 재사용성과 코드 컨벤션을 따르기 위해 훅으로 분리하였습니다.

 

---

 

✨ app/nearby/page.tsx 주요 흐름 정리

 

위치 기반 사용자 탐지 및 아바타 렌더링의 중심 컴포넌트

 

 

• 현재 로그인한 사용자의 위치 정보를 기준으로 주변 100m 이내 사용자 감지
• WebSocket을 통해 실시간 위치 갱신 수신
• 감지된 사용자 정보를 바탕으로 아바타 UI 동적 렌더링

 

 

✅  useSession으로 로그인된 사용자 ID 불러오기

const { data: session } = useSession();
const userId = session?.user?.id;

 

 

• WebSocket 연결 시 접속한 사용자의 ID를 함께 서버에 보내야 했기 때문입니다.
• 사용자 구분을 위해선 유일한 식별자가 필요했고, NextAuth의 세션에서 바로 userId를 가져올 수 있었습니다.

 

✅ useRef를 사용해 userId를 기억

const myIdRef = useRef<string | null>(null);

useEffect(() => {
  if (userId) {
    myIdRef.current = userId;
  }
}, [userId]);

 

 

• 실시간 소켓 통신은 여러 번 리렌더링될 수 있어서, userId를 계속 prop으로 넘기기보다는 ref로 보존했습니다.
• useRef는 렌더링에 영향을 주지 않으면서도 지속적으로 값을 유지해줍니다.
• "로그인된 사용자 id를 WebSocket 통신 중 나 자신과 감지된 다른 사용자를 구분하기 위해 ref로 저장"하였습니다.

 

✅ useNearbySocket 훅 사용

useNearbySocket((data: NearbyUser) => {
  if (
    !data.userId ||
    typeof data.userId !== "string" ||
    data.userId === myIdRef.current
  ) {
    console.warn("🔎 유효하지 않거나 본인 userId 무시:", data.userId);
    return;
  }

  console.log("📡 새 사용자 감지:", data.userId);

  setUsers((prev) => {
    const filtered = prev.filter((u) => u.userId !== data.userId);
    return [...filtered, data];
  });
}, userId);

 

 

• 실시간으로 감지된 사용자 정보를 서버로부터 수신하면, 화면에 표시할 사용자 목록을 갱신하기 위해 setUsers로 상태를 업데이트합니다.
• 여기서 본인 자신은 감지 대상이 아니므로 userId === myIdRef.current인 경우 무시합니다.
• useNearbySocket 커스텀 훅으로 분리하여, 해당 로직이 WebSocket 통신의 복잡한 로직을 캡슐화하고 재사용성을 높였습니다.

---

✨ NearbyUserAvatar.tsx 주요 흐름 정리

사용자 개별 아바타 렌더링 컴포넌트

 

 

• 각 사용자의 타입에 맞는 아바타 이미지와 이름 표시
• angle + distance를 이용한 상대적 위치 계산 및 렌더링

 

 

✅ 사용자 아바타 이미지 렌더링

const { data: profile } = useGetUserCharacterProfile(userId);
const imageSrc = profile?.type
  ? `/assets/moono/${profile.type.toLowerCase()}-moono.png`
  : "/assets/moono/default-moono.png";

 

 

• userId를 기반으로 해당 사용자의 캐릭터 타입(profile.type)을 가져오기 위해 비동기 API 요청 훅을 사용했습니다.
• 이 타입에 따라 캐릭터 이미지 경로를 유동적으로 바꾸기 위해 삼항 연산자를 사용했습니다.
• 성향 테스트를 아직 진행하지 않아서, 캐릭터 프로필이 아직 없다면 default 이미지로 대체합니다.

 

✅ 사용자의 거리/각도에 따른 위치 계산

const boundedDistance = Math.min(distance * 80, 180);
const x = Math.cos((angle * Math.PI) / 180) * boundedDistance;
const y = Math.sin((angle * Math.PI) / 180) * boundedDistance;

 

• 원형 방사형 구조로 화면에 사용자 아바타를 배치하기 위해 삼각함수를 이용한 좌표 계산을 적용했습니다.
• distance는 실제 거리(m)를 기반으로 적절히 시각화되도록 보정하고, 최대 크기를 제한하여 UI가 깨지지 않도록 했습니다.

---

 

 

🔥 트러블 슈팅 : 사용자 A, B가 시간 차를 두고 접속 시 감지가 되지 않는 문제

https://github.com/Ureka-Middle-Team1/moo-mool/issues/187

[BUG] 근거리 통신_서로 다른 기기에서 상대방 프로필 정보 감지 X · Issue #187 · Ureka-Middle-Team1/moo-mo

 

사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되고, 해당 사용자 정보를 바탕으로 아바타가 렌더링되어야 했습니다. 하지만 예상과 다르게 A와 B가 시간 차를 두고 접속하면 서로를 감지하지 못하는 문제가 발생했습니다.

 

발생한 상황

시간 차를 두고 접속 시 주변 친구 감지X

 

• 브라우저 A에서 사용자 A 로그인 → /nearby 진입 → WebSocket 연결 및 위치 전송
• 브라우저 B에서 사용자 B 로그인 → /nearby 진입 → WebSocket 연결 및 위치 전송
• 서버는 B 입장 기준으로 반경 100m 이내 사용자(A) 를 계산해 B에게만 전송함
• A는 이후 위치를 전송하지 않음 → 서버도 B를 A에게 전달하지 않음

 

결과적으로 한쪽 사용자만 서로를 감지하게 되어 화면에는 아무것도 뜨지 않거나, 양방향 감지가 되지 않음.

 

 

🔍 원인 분석

처음에는 사용자 위치를 WebSocket 서버에 전송할 때, getCurrentPosition()을 한 번만 호출하고, 그 결과를 서버에 한 번만 전송했습니다.

 

클라이언트

// [문제 코드 - useNearbySocket.ts]
navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(
        JSON.stringify({
          type: "location_update",
          userId,
          lat: latitude,
          lng: longitude,
        })
      );
    }
  },
  (error) => {
    console.error("📍 위치 정보 가져오기 실패:", error.message);
  }
);

 

useNearbySocket은 사용자의 위치를 주기적으로 WebSocket 서버에 전송하고, 서버로부터 주변 사용자 리스트를 수신하는 커스텀 훅입니다.

이 훅 내부에서 getCurrentPosition이 단 한 번만 호출되고 있습니다.

 

1. 사용자 A가 /nearby에 진입 → 위치 한 번 전송 후 끝
2. 사용자 B가 나중에 진입 → 위치 전송 → 서버는 B 기준으로만 거리 계산
3. 서버는 B에게만 A를 보내주고, A는 업데이트 없음 → 결국 A는 아무도 못 감지함

 

결과적으로 양방향 감지가 되지 않는 문제가 발생했습니다

 

 

서버코드

// [문제 코드 - server.js]
ws.on("message", (message) => {
  const parsed = JSON.parse(message);
  if (parsed.type === "location_update") {
    // 서버 내부에 사용자 위치만 저장하고 끝
    userLocations[parsed.userId] = {
      lat: parsed.lat,
      lng: parsed.lng,
    };

    // ❌ 감지된 사용자를 클라이언트에게 보내주는 부분이 없음
  }
});

 

 

• 클라이언트가 위치를 보내더라도 감지된 주변 사용자 리스트를 돌려주지 않음, 즉 위치 저장만 하고 감지 결과를 클라이언트에 보내지 않음
• 결국 A는 서버에 위치를 보냈지만, 아무 응답을 못 받음

 

 

✅ 개선: 위치를 1초마다 반복 전송

 

클라이언트 코드

// [수정된 코드 - useNearbySocket.ts]
const sendLocation = () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      if (wsRef.current?.readyState === WebSocket.OPEN) {
        wsRef.current.send(
          JSON.stringify({
            type: "location_update",
            userId,
            lat: latitude,
            lng: longitude,
          })
        );
      }
    },
    (error) => {
      console.error("📍 위치 정보 가져오기 실패:", error.message);
    }
  );
};

sendLocation(); // 최초 1회 전송
intervalId = setInterval(sendLocation, 1000); // 이후 1초마다 전송

• 위치 전송하는 부분을 sendLocation 함수로 지정하고 setInterval로 1초마다 반복하여 전송하였습니다.
• 사용자 A, B 모두 자신의 위치를 1초마다 서버에 갱신하게 됨
• 서버는 최신 위치 기준으로 주변 사용자를 계산해서 양방향 전송 가능

 

서버 코드 : 실시간 응답 브로드캐스트

// [수정된 코드 - server.js]
ws.on("message", (message) => {
  const parsed = JSON.parse(message);

  if (parsed.type === "location_update") {
    userLocations[parsed.userId] = {
      lat: parsed.lat,
      lng: parsed.lng,
    };

    // 주변 사용자 계산
    const nearbyUsers = getNearbyUsers(parsed.userId, userLocations);

    // 주변 사용자 정보 브로드캐스트
    for (const client of clients) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(
          JSON.stringify({
            type: "nearby_users",
            users: nearbyUsers,
          })
        );
      }
    }
  }
});

 

 

• 클라이언트가 서버에 메세지를 보낼 때 "location_update"라는 타입으로 전송하면 
• 해당 메세지 타입을 받았을 때 nearbyUsers에 거리를 계산하여 사용자를 저장한 후, 웹 소켓에 접속한 사용자 (웹 소켓이 OPEN 상태인 clients)에게 nearby_users라는 메세지 타입으로 근처 사용자 정보를 모두 보내줍니다.
• 이렇게 되면 새로운 사용자가 시간차를 두고 접속하더라도 접속할 때마다 "location_update" 타입의 메세지를 보내게 되고 위의 과정을 반복하게 됩니다.

---

 

그 결과...