17개 화면으로 본 웹 서비스 서비스의 대시보드 전략
2024년, 17개 화면의 웹 서비스 프로젝트. 기획부터 설계까지, 현장에서 마주한 문제와 해결의 기록.
데모 체험
실제 서비스가 아닌, 핵심 기능 흐름만 담아 재구성한 익명화 목업입니다. 모든 데이터는 가상입니다.
화면 스켈레톤
실제 서비스 기획 화면을 수강 여정 중심 7개 화면으로 재구성고객사 화면은 저작권 보호를 위해 공개하지 않는 대신, 주요 화면의 구성을 와이어프레임으로 재구성했습니다.
홈
클래스 탐색
클래스 상세
수강 신청
강의실
커뮤니티
마이페이지
이 서비스가 해결하는 문제
이 프로젝트의 핵심 과제는 기존에 수작업이나 오프라인으로 처리하던 프로세스를 디지털로 전환하면서, 사용자 경험을 해치지 않는 것이었습니다.
17개 화면에 걸쳐 사용자의 주요 태스크를 분석하고, 최소한의 단계로 목표를 달성할 수 있도록 플로우를 설계했습니다. 반응형웹 환경에서의 접근성과 사용성을 동시에 고려해야 했습니다.
핵심 가치 제안
- 스마트한 탐색 경험 — 검색어 자동완성, 다중 필터, 정렬 옵션을 조합하여 사용자가 원하는 것을 3번의 터치 안에 찾을 수 있도록 설계했습니다.
- 데이터로 말하는 의사결정 — 핵심 지표를 한눈에 파악할 수 있는 대시보드를 제공합니다. "무엇을 보여줄까"보다 "무엇을 안 보여줄까"가 더 중요한 설계였습니다.
- 맥락에 맞는 알림 — 사용자의 행동 패턴에 따라 적시에 알림을 보내되, "알림 피로"를 유발하지 않는 빈도와 내용을 설계했습니다.
- 개인화된 사용자 경험 — 마이페이지에서 이력 조회, 설정 관리, 맞춤 추천까지 원스톱으로 제공합니다.
사용자 시나리오
주요 사용 흐름:
- 앱을 처음 실행하면 온보딩 화면이 나타납니다. 소셜 로그인 또는 이메일로 간편하게 가입할 수 있습니다.
- 메인 화면에서 핵심 콘텐츠와 개인화된 추천을 확인합니다. 주요 기능으로의 진입점이 명확하게 배치되어 있습니다.
- 검색 또는 카테고리 탐색으로 원하는 항목을 찾습니다. 필터와 정렬로 결과를 좁혀갑니다.
- 상세 페이지에서 충분한 정보를 확인하고 의사결정을 내립니다.
관련 포스트
제품이 아니라 신뢰를 판다 — 디지털 헬스케어 기업 사이트의 기획
웨어러블 생체신호 모니터링 기업의 국문·영문 회사 사이트. 임상 근거 아카이브, 보도자료·팝업 운영, 전자공시·외부 채용 연동, 데모 요청까지 — 병원 고객과 투자자를 동시에 설득하는 기업 홈페이지 분석.
전화 업무를 웹으로 — 상태 16종으로 설계한 상표 셀프 출원 서비스
전화로 시작되던 상표 출원을 셀프 신청 웹으로 옮긴 프로젝트. 출원 준비부터 등록·갱신까지 알림톡 16종과 단계별 결제, 상품류별 사건 관리로 풀어낸 절차형 서비스 기획 기록.
견적 계산기가 영업을 대신한다 — 법인설립 비용 안내 반응형 웹
설립 정보를 단계별로 입력하면 중과세 권역까지 반영된 예상 견적이 계산되어 카카오 알림톡과 이메일로 발송되는 법인설립 비용 안내 웹. 자동 임시 견적과 담당자 확정 견적을 분리한 2단계 견적 구조, 테마 복제로 변경등기 사이트까지 파생한 확장 전략을 담았다.