본문 바로가기
서비스 웹 서비스 개발 앱 개발 AI 알고리즘 개발 AI 컨설팅 AI 마케팅 프로젝트 인사이트 회사소개 고객게시판
웹 제품 설계 8 MIN READ

같은 대시보드를 봤는데 숫자가 다르다면: 공유 가능한 필터 상태 설계

B2B 대시보드에서 필터와 기간이 화면 안에만 남아 있으면 회의 때 숫자를 재현하기 어렵습니다. URL·저장된 보기·권한·시간대·기본값을 일관되게 관리하는 방법을 설명합니다.

Category
웹 제품 설계
Published
Read
8분
Author
네이처프랙탈
같은 대시보드를 봤는데 숫자가 다르다면: 공유 가능한 필터 상태 설계 대표 이미지

회의 중 한 사람이 “이번 달 미처리 건은 24건”이라고 말합니다. 다른 담당자는 같은 대시보드를 열고 31건을 봅니다. 데이터 오류일까요? 알고 보니 한 사람은 지난 30일, 다른 사람은 이번 달을 선택했고, 한쪽은 취소 건을 숨긴 필터를 유지하고 있었습니다. B2B 대시보드에서 숫자의 신뢰는 계산식만이 아니라 어떤 조건으로 그 숫자를 만들었는지 다시 열 수 있는가에도 달려 있습니다.

화면 상태를 업무 문장으로 정의한다

대시보드 상태에는 기간, 시간대, 고객사 또는 사업장, 상태, 담당자, 검색어, 정렬, 페이지, 표시 단위가 들어갈 수 있습니다. 이 가운데 결과 집합을 바꾸는 조건은 공유 가능한 상태로 다뤄야 합니다. “지난주” 같은 상대 기간은 열어 보는 날마다 날짜가 바뀝니다. 회의 자료를 재현하려면 절대 시작·종료 시각을 저장할지, 상대 기간 규칙을 저장할지 구분해야 합니다. 날짜 경계도 사용자 브라우저 시간대와 서버 시간대가 다르면 어긋나므로 기준 시간대를 명시합니다.

웹에서는 쿼리 문자열을 필터 상태의 한 원본으로 사용할 수 있습니다. MDN의 URLSearchParams 문서처럼 브라우저는 쿼리 매개변수를 읽고 수정하는 표준 인터페이스를 제공합니다. 예를 들어 특정 기간과 상태를 URL에 반영하면 링크를 복사해 동료에게 전달할 수 있고, 새로고침 후에도 조건을 복구할 수 있습니다. 다만 URL에 개인정보나 비밀 검색어를 넣으면 브라우저 기록·분석 도구·로그에 남을 수 있으므로 값의 종류를 제한해야 합니다.

대시보드의 기간·상태·정렬·검색 조건이 하나의 공유 가능한 링크에 담기는 구조
같은 링크로 같은 조회 조건을 다시 열 수 있어야 합니다.

같은 URL이 같은 숫자를 보장하지는 않는다

운영 데이터는 계속 바뀝니다. 같은 링크를 오늘과 다음 주에 열면 필터는 같아도 결과 수는 다를 수 있습니다. 따라서 “조회 조건의 재현”과 “데이터 스냅샷의 재현”을 분리합니다. 결산이나 감사처럼 특정 시점의 숫자가 필요하다면 데이터 기준 시각, 집계 버전 또는 고정된 보고서 결과를 별도로 저장해야 합니다. 일반 운영 화면이라면 마지막 갱신 시각과 데이터 지연 여부를 보여 주는 편이 더 적절합니다. 공유 링크를 받은 사용자가 해당 사업장에 접근할 권한이 없다면 동일한 조건을 열 수 없거나 권한 범위 내 결과만 볼 수 있어야 합니다.

서버는 URL의 고객 ID를 그대로 신뢰하지 않습니다. 링크는 조건을 전달할 뿐 권한을 부여하지 않기 때문입니다. OWASP의 객체 수준 권한 안내도 요청의 객체 식별자를 바꾸어 다른 데이터에 접근하는 위험을 설명합니다. 필터 값은 유효성 검사를 하고, 허용된 선택지와 정렬 열을 제한하며, 항상 서버 측에서 사용자 권한을 다시 적용해야 합니다.

URL 상태를 설계할 때는 순서와 기본값도 정규화합니다. 같은 조건이 매개변수 순서만 달라 다른 링크가 되면 캐시와 공유 기록이 지저분해집니다. 허용하지 않는 값을 받으면 조용히 다른 결과를 보여 주기보다 수정된 조건을 알려 주거나 명확한 오류를 보여 주세요. 페이지 번호가 현재 필터 결과 범위를 넘어가면 첫 페이지로 돌아가야 할 수 있습니다. 필터를 바꿀 때마다 페이지 번호를 유지해 빈 화면을 만드는 흔한 실수를 피하려면 상태 간 의존성까지 정의해야 합니다.

저장된 보기는 공유 링크보다 한 단계 더 깊다

자주 쓰는 조건을 이름 붙인 ‘저장된 보기’로 만들 수 있습니다. 개인 보기인지 팀 공용 보기인지, 누가 수정할 수 있는지, 기본 보기로 지정할 수 있는지 정해야 합니다. 보기의 소유자가 퇴사하거나 선택했던 필터 값이 폐기될 때의 동작도 필요합니다. 필터 정의의 버전을 남기면 필드 이름이나 상태 코드가 바뀌어도 기존 보기를 마이그레이션하거나 명확히 안내할 수 있습니다. 공유 보기를 수정하면 모든 사용자의 화면이 달라질 수 있으므로 변경 이력을 남기는 것이 좋습니다.

저장된 보기의 생성, 권한 검사, 조건 적용, 데이터 갱신을 구분하는 흐름
보기 설정의 재현성과 데이터 값의 시점은 서로 다른 문제입니다.

구현 테스트는 링크를 복사해 다른 브라우저에서 열고, 새로고침·뒤로 가기·권한이 없는 계정·다른 시간대에서 결과 조건이 일치하는지 확인하는 것으로 시작합니다. 기본값은 화면과 URL에서 같은 의미로 해석되어야 합니다. 사용자가 필터를 바꾼 뒤 뒤로 가기를 눌렀을 때 이전 조건이 복원되지 않는다면 공유 가능한 상태가 아직 완성되지 않은 것입니다. 숫자를 믿을 수 있는 대시보드는 예쁜 차트 이전에 그 숫자의 조건을 누구나 설명하고 권한 안에서 재현할 수 있는 화면입니다.

#대시보드 #필터공유 #저장된보기 #URL상태 #B2B제품 #보고서재현성 #데이터시각화 #웹UX #시간대 #네이처프랙탈

JavaScript TypeScript 데이터 품질관리

/ 다음 단계

이런 문제, 직접 겪고 계신가요?

글로 정리한 방법을 실제 환경에 맞춰 적용하는 일까지 함께 하겠습니다.

영업일 기준 3일 이내 회신 · 상담 및 범위 견적 무료