관계 분석 대시보드 디자인

상호 연결 대시보드 개요

OpenDesign 공식 데스크톱 앱 예시인 이 페이지는 “YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP”라는 문구 아래 관계 분석 대시보드를 보여 줍니다. 왼쪽 내비게이션 레일과 넓은 지표 작업 공간이 짝을 이루어, 계정 맥락에서 현재 지표로, 이어서 과거 활동으로 시선을 옮길 수 있습니다.

이 대시보드는 OpenDesign이 제작했으며 예시용 샘플 데이터를 사용합니다. 화면의 숫자, 이름, 관계 관련 주장, 해석은 디자인 구성을 설명하기 위한 것이며 검증된 개인 분석이나 연결된 서비스가 아닙니다.

01

현재 스냅샷

지표 블록 9개가 개수, 백분율, 시간, 관계 범주를 한 화면의 목록으로 정리합니다.

02

편집형 읽기

“the people who'd text back within a day” 같은 이탤릭 메모가 원시 값을 설계된 관점으로 바꿔 줍니다.

03

과거로 이어지는 흐름

아래 패널은 스냅샷 지표에서 일별 막대와 더 긴 매치율 설명으로 이어집니다.

상태에서 맥락으로

첫 번째 작업 공간 행에는 “MUTUALS ON FILE”, “REPLIES IN 24H”, “COMMUNITIES”가 함께 놓입니다. 다음 행에는 “MATCH RATE”, “2ND DATES”, “EXES IN YOUR CIRCLE”가, 그다음에는 “SHARED BLOCKS”, “AVG RESPONSE”, “LOGGED-OFF HRS”가 이어집니다. 이 순서는 네트워크 규모와 반응성에서 관계 이력과 행동으로 나아갑니다.

각 지표는 라벨, 눈에 띄는 값, 짧은 이탤릭 해석으로 구성됩니다. 예를 들어 “1,842”는 “↑ 41 this wk · healthy growth”와, “14%”는 “above median for your cohort”와 짝을 이룹니다. 이런 조합 덕분에 패널이 편집형 평가처럼 읽히지만, 함께 달린 판단은 샘플 콘텐츠의 일부일 뿐 실제 제품이 어떻게 계산하는지를 보여 주지는 않습니다.

조용한 사이드바 기준점

사이드바에는 “mutuals.”, @signals 프로필 마커, “RATIO 22.9 · TIER III”, 그리고 “TODAY”, “YOU”, “ARCHIVE” 섹션이 작업 공간 옆에 계속 보입니다. “your stats”는 옅은 붉은색 바탕으로 강조되고, 배지는 specimen, inbox, queue, notifications를 구분합니다. 덕분에 페이지에 안정적인 내비게이션 축이 생기지만, 캡처만으로는 이 항목들이 상호작용 가능하거나 실제 상태와 연결되어 있다고 증명되지 않습니다.

상호 연결과 매치율 읽기

“mutuals — last 30 days” 패널은 일별 세로 막대를 쓰고 “MAR 18”, “MAR 25”, “APR 1”, “APR 8”, “APR 15”, “TODAY”에 날짜 기준점을 둡니다. 대부분의 막대는 검은색이고 끝부분 근처 두 개는 빨간색입니다. 주석은 “↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE”라고 말하며, 구체적인 데이터 정의는 드러내지 않은 채 강조된 막대를 최근의 특정 사건과 연결합니다.

시각적 결과는 빠른 방향성 파악입니다. 막대 높이는 변동을 보여 주고, 빨간색은 눈에 띄는 구간을 따로 짚으며, 제목이 해석을 제공합니다. 대신 y축, 명시적인 일별 값, 범례가 없어서 정밀한 측정보다는 패턴과 강조를 전달하는 데 더 적합합니다.

12주 주장

다음 제목은 “match rate — last 12 weeks”입니다. 보조 문구는 “STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).”라고 말합니다. 그 아래의 더 큰 문장은 “A real climb, not a vibe.”로 시작하며, 커뮤니티 가입 한 번을 넉 달간의 프로필 수정과 대비시킵니다.

이는 추세 라벨 옆에 인과적 서사를 만들지만, 캡처에는 주간 데이터 점, 계산 방식, 뒷받침하는 출처가 없습니다. 따라서 이 섹션은 분석 디자인이 설명을 전면에 내세우는 방식의 예시로는 유용하지만, 수치와 귀속은 예시용 샘플 콘텐츠로 보아야 합니다.

사이드바에서 추이 패널까지

작업 공간의 흐름은 화면 전환이 아니라 순차적입니다. 독자는 사이드바로 들어와 선택된 “your stats” 상태를 보고, 3열 지표 그리드를 훑은 뒤, 아래의 활동 및 매치율 패널에 도달합니다. CSS 근거로는 3열 그리드, 패널 메타데이터의 최대 텍스트 너비 56ch, 전체 너비 패널 SVG가 확인되며, 이런 제약은 모든 라벨을 한 줄에 놓지 않아도 넓은 데스크톱 읽기 화면을 지탱합니다.

핵심적인 절충점은 밀도입니다. 각 블록을 라벨, 값, 메모로 절제했기 때문에 지표 9개가 차트 위에 들어가지만, 독자는 서로 다른 많은 정의를 기억해야 합니다. 패널 제목과 날짜 기준점이 긴 캔버스를 읽기 쉽게 유지하는 전환점 역할을 합니다.

영역 간에 달라지는 점

개요는 반복되는 지표 블록과 가로 구분선으로 비교를 쉽게 합니다. 활동 패널은 반복되는 막대와 드문 날짜 라벨로 바뀌고, 매치율 패널은 다시 편집형 서술로 바뀝니다. 이는 비교하고, 훑어보고, 해석하는 서로 다른 읽기 방식입니다.

러스트 레드는 선택된 내비게이션, 강조된 활동 막대 두 개, 그리고 exes와 logged-off hours의 샘플 값 4 두 개를 표시합니다. 초록색은 답장 47, 매치율 14%, 온라인 표시를 나타냅니다. 이 샘플은 그 색상들 뒤에 보편적인 상태 체계를 정의하지는 않습니다.

눈에 보이는 디자인과 기능의 한계

이 결과물은 사이드바, 지표 그리드, 막대 차트, 타이포그래피 체계, 색상 강조, 설명 문구로 이루어진 시각적 대시보드 구성을 보여 줍니다. 제공된 캡처만으로는 실시간 데이터 조회, 영구 저장, 알림, 계정 상태, 차트 상호작용, 실제 관계 모델이 확인되지 않습니다. 따라서 이를 재현할 때 해당 요소는 별도로 구현하고 검증하기 전까지 제안된 동작으로 다루어야 합니다.

샘플에는 “above median for your cohort”, “two are now friends”, “one community join moved your match rate”처럼 의도적으로 구체적인 문장도 들어 있습니다. 이런 문장은 인터페이스를 의견이 뚜렷하고 구체적으로 느끼게 하지만, 측정된 결과가 아니라 예시 콘텐츠로 제시해야 합니다. 이 디자인에서 가장 널리 적용할 수 있는 교훈은 값, 그 시간 범위, 그리고 함께 놓인 해석 사이의 관계입니다.

패턴을 신중하게 응용하기

새 버전에서는 샘플 값을 명확히 정의된 데이터로 바꾸면서도 3열 지표 리듬, 30일 막대 시퀀스, 별도의 12주 서술을 유지할 수 있습니다. 각 제목에 기간을 넣고, 각 지표가 무엇을 세는지 정의하며, 시각적 강조와 검증된 상태를 구분하세요.

구현 측면에서 캡처는 CSS 레이아웃, 타이포그래피, 색상 변화, 차트 렌더링 같은 로컬 시각 기법을 뒷받침합니다. 연결된 서비스나 효과는 입증하지 않습니다. 재현 시 관찰된 레이아웃을 시각적 참고로 쓰되 데이터와 동작은 직접 정의할 수 있습니다.