데스크톱 앱
SaaS 매출 대시보드 디자인
이 SaaS 매출 대시보드 디자인은 구독 지표, 30일 매출 차트, 계정 상태, 최근 이벤트를 하나의 개요 화면에 담았습니다.
대시보드 디자인 활용 사례
- SaaS 매출 검토매출, 계정, 이탈, 지연 시간 지표를 한눈에 훑어봅니다.
- 계정 모니터링계정명, 플랜, 상태를 하나의 표에서 비교합니다.
- 구독 이벤트 추적최근 계정 이벤트를 시간 및 플랜과 함께 확인합니다.
대시보드 레이아웃 핵심 포인트
- 네 가지 요약 지표MRR, 활성 계정, 이탈률, P95 지연 시간이 맨 앞에 놓입니다.
- 매출과 계정넓은 추세 차트가 신규 계정 행 옆에 배치됩니다.
- 최근 이벤트샘플 이벤트 네 건이 표시된 시간순으로 정렬됩니다.
대시보드 화면
1 / 1SaaS 매출 개요
화면 제목은 “Overview · April 2026”이며, 상단에 “Last 30 days” 컨트롤과 “+ New report” 버튼이 있습니다. 그 아래 네 개의 지표 패널에는 MRR($48.2K), 활성 계정(3,184), churn (30d)(2.1%), P95 latency(182 ms)가 각각 보조 변화 값과 함께 표시됩니다. 비즈니스 지표와 기술 지표를 첫 화면에서 함께 훑을 수 있지만, 서로 다른 지표가 어떻게 정의되는지는 설명하지 않습니다.
색상으로 보조 수치를 빠르게 구분합니다. 세 개는 녹색이고, 이탈률의 “+0.4 pp”는 빨간색입니다. 부호만으로는 변화가 긍정적인지 알 수 없으므로 라벨과 단위가 중요합니다. 제시된 수치와 계정 정보는 예시용 샘플 콘텐츠이며, 검증된 운영 결과가 아닙니다.
매출 및 계정 패널 읽기
다음 행에서는 “Revenue · 30 days”와 “New accounts”가 짝을 이룹니다. CSS는 이 행을 2:1 열 비율로 정의해 꺾은선 차트에 계정 표보다 더 많은 공간을 줍니다. 이 비율 덕분에 매출 흐름이 주된 시각 요소가 되고, 플랜과 상태는 빠른 계정 확인용으로 남습니다.
차트는 전반적으로 상승하지만 눈에 띄는 하락 구간도 있습니다. 축 라벨이나 표시된 수치가 없으므로 정확한 일별 값보다는 방향과 변동을 전달합니다. 옆의 표에는 Account, Plan, Status 세 필드가 명확히 있습니다. 예를 들어 Linear는 Team 플랜에 active 상태이고, Notion은 Team 플랜에 trial 상태입니다. 플랜과 상태를 별도 열로 두면 구독 등급과 계정 상태를 구분하기 쉽습니다.
지표 훑어보기
네 가지 대표 값과 함께 표시된 변화량을 비교하되, 방향을 해석하기 전에 각 단위와 라벨을 확인하세요.
계정 확인
계정 표를 사용해 조직을 플랜 및 상태와 연결하되, 플랜 이름을 상태 라벨로 혼동하지 마세요.
요약에서 최근 이벤트까지
시각적 읽기 순서는 네 가지 지표에서 차트와 신규 계정 표로 이어지고, 그 아래 “Recent events”로 내려갑니다. 스타일시트는 이 이벤트 섹션이 두 열 패널 아래에서 한 행 전체를 차지하도록 합니다. 표는 Time, Account, Event, Plan으로 구성되어 있어, 기록된 동작을 조직과 플랜에 함께 연결해 읽을 수 있습니다.
예시로는 Acme Co의 “Upgraded to Team”과 Globex의 “Cancelled subscription”이 있습니다. 이 행들은 요약 지표나 계정 상태 표에는 없는 맥락을 더하지만, 이벤트가 표시된 지표와 어떤 관계인지는 화면에 명시되어 있지 않습니다. 순서와 샘플 타임스탬프는 이 화면이 최근 활동 보기임을 보여줄 뿐, 전체 감사 이력의 증거는 아닙니다.
| 영역 | 표시되는 필드 | 읽기 목적 |
|---|---|---|
| 지표 패널 | 지표, 값, 변화량 | 대표 지표와 함께 표시된 증감을 훑어봅니다. |
| 신규 계정 | 계정, 플랜, 상태 | 계정 등급을 표시된 상태와 비교합니다. |
| 최근 이벤트 | 시간, 계정, 이벤트, 플랜 | 샘플 활동 항목을 계정 및 플랜과 연결해 읽습니다. |
화면에 보이는 디자인과 기능의 한계
이 결과물은 샘플 값과 눈에 보이는 컨트롤을 갖춘 대시보드 디자인입니다. “Last 30 days”와 “+ New report”는 상호작용 요소처럼 보이지만, 확인 가능한 근거로는 날짜 범위를 바꾸거나 보고서를 만들거나 실시간 서비스에 연결된다고 단정할 수 없습니다. 따라서 차트, 지표, 표는 실시간 데이터, 저장, 완료된 동작의 증거가 아니라 디자인된 콘텐츠로 읽어야 합니다.
소스는 메인 워크스페이스 옆에 220px 사이드바를 정의합니다. 캡처된 화면은 메인 영역에 초점을 두며, 2:1 비율의 차트-계정 행 아래에 전체 너비의 이벤트 표가 이어집니다. 900px 미만에서는 소스가 두 패널을 세로로 쌓고 지표 카드를 두 열로 바꾸지만, 휴대폰 전용의 완전한 내비게이션 레이아웃은 제공하지 않습니다.
OpenDesign에서 SaaS 매출 대시보드 디자인 만드는 방법
개요와 지표 정의 설정하기
날짜가 표시된 개요 제목과 네 개의 지표 패널로 시작합니다. 대상 독자에게 함께 의미가 있는 지표를 고르고, 단위와 비교 기간을 포함해 각 값과 변화량이 무엇을 뜻하는지 명시합니다. 샘플 값은 검증된 운영 데이터와 눈에 띄게 구분해 두세요.
제안된 프롬프트MRR, 활성 계정, 30일 이탈률, P95 지연 시간을 보여주는 네 개의 지표 패널, 30일 매출 꺾은선 차트, 신규 계정 표, 최근 이벤트 표가 있는 날짜 표시 개요 형태의 SaaS 매출 대시보드 디자인을 만드세요. 예시용 샘플 데이터임을 분명히 표시하세요. 화면에 보이는 날짜 범위 및 새 보고서 컨트롤은 디자인 요소로만 보여주고, 실제 작동하는 서비스나 실시간 데이터를 암시하지 마세요.
차트와 계정 맥락 배치하기
매출 차트와 계정 표의 균형을 다듬습니다. 계정, 플랜, 상태의 구분을 유지하고, 의도한 읽기 작업에 차트의 축이나 값 표시가 필요한지 판단하세요. 추세 보기 옆에서도 더 상세한 표가 읽기 쉬운지 확인합니다.
이벤트를 맥락과 연결하기
이벤트 목록에 시간, 계정, 이벤트, 플랜 필드를 두고, 샘플 행이 전체 이력을 암시하지 않으면서 하나의 동작을 전달하는지 확인합니다. 의도한 워크스페이스 너비에서 요약 지표에서 차트, 계정 행, 이벤트로 이어지는 흐름을 검토하세요.
내보내기 및 공유 링크 받기
완성된 디자인을 내보낸 다음, OpenDesign의 공유 기능을 사용하여 공유 링크를 받으세요. 별도의 브라우저 창에서 링크를 열고 의도한 버전과 해당 자산이 전송 전에 이용 가능한지 확인하세요.
애널리틱스 대시보드 와이어프레임 디자인
OpenDesign 그레이박스 대시보드가 사이드바, KPI 플레이스홀더 4개, 도식형 차트, 표 5행, 파란색 레이아웃 주석으로 애널리틱스 작업 공간을 구성합니다.
데스크톱 앱
코드 리뷰 인박스 앱 디자인
코드 리뷰 인박스 앱 디자인은 리뷰 요청, CI 실패, 할당된 이슈, 활동을 하나의 빠르게 훑어볼 수 있는 작업 공간에 모아 일상적인 트리아지를 지원합니다.
데스크톱 앱
콘텐츠 성과 대시보드 디자인
플랫폼 스냅샷을 차트 검사, 초안 계획, 그리고 오디언스·전환 신호에 대한 심층 보기와 연결한 다크 콘텐츠 대시보드입니다.
데스크톱 앱
당일 여행 플래너 디자인
일러스트 지도, 도보 예상 시간, 유용한 경로 경고와 함께 가상의 Solara Bay에서 6개의 시간대별 정류장을 계획하세요.
데스크톱 앱