(WEB_PORTAL) 사용자가 접속한 네트워크 위치에 따라 기능을 다르게 보여주기

개요

이 서비스는 사내망에서 접속했을 때와 외부망에서 접속했을 때 사용 가능한 기능 범위가 다르게 설계되어 있습니다. 이 구분을 서버에서 한 번만 판단하고 끝내는 것이 아니라, 화면 단에서도 사용자가 "지금 이 기능을 왜 쓸 수 없는지" 바로 알 수 있도록 UX를 개선했습니다.

핵심 구현 포인트

1. 네트워크 위치 조회 API

현재 요청이 사내망에서 온 것인지 외부망에서 온 것인지, 그리고 판별에 사용된 IP 정보를 반환하는 조회용 API를 별도로 만들었습니다. 화면에서는 이 API를 호출해 현재 상태를 파악합니다.

2. 네트워크 상태 확인 훅

컴포넌트 여러 곳에서 반복적으로 네트워크 위치를 확인해야 했기 때문에, 이 조회 로직을 재사용 가능한 훅으로 뽑아냈습니다.

useNetworkCheck():
    상태 = { 사내망여부, 로딩중여부 }
    마운트 시 네트워크 위치 조회 API 호출 → 상태 갱신
    반환 상태

3. 버튼 비활성화 + 안내 배지

사내망에서만 허용되는 동작을 실행하는 버튼은, 외부망 접속이 감지되면 클릭 자체를 막고 "사내망에서만 이용 가능합니다" 같은 안내 배지를 옆에 표시하도록 했습니다. 서버 쪽에서도 동일한 검증을 이미 하고 있었지만, 클라이언트에서 미리 막아주는 편이 사용자가 시도했다가 거부당하는 것보다 훨씬 명확한 경험을 준다고 판단했습니다.

회고

• 접근 제어는 서버에서 최종적으로 막아야 하는 게 맞지만, 사용자 경험 관점에서는 "왜 안 되는지"를 화면에서 바로 알려주는 게 신뢰도를 높인다는 걸 체감했습니다. 서버 검증과 클라이언트 안내는 서로 대체재가 아니라 각자의 역할이 다른 보완재라는 점을 다시 정리하게 됐습니다.