채움 예약 · 회원 관리자 화면 설계
VELOFIT 헬스장 사이트의 뒷단입니다. 웹사이트로 들어온 상담 신청이 이 화면에 쌓이고, 만료 임박 회원에게 메시지를 보냅니다
- 제작 범위
- 관리자 화면 설계UI 시안반응형 대응 설계시안 뷰어 제작
- 사용 기술
- PC·모바일 짝 구성기기 목업 제작자동 넘김WebPHTMLCSS
실제 화면
그림이 아니라 실제로 동작하는 화면입니다. 여기서 바로 만져 보실 수 있습니다.
위 화면은 그림이 아니라 실제로 동작하는 화면입니다. 눌러서 직접 만져 보세요.
앞서 만든 VELOFIT 강남점(헬스장 웹사이트)의 관리자 화면입니다. 회원 412명, 그중 이용 중 318명이라고 가정했습니다.
※ 채움 CHAEUM은(는) 실제 존재하지 않는 가상의 브랜드입니다. 노바센트가 직접 기획하고 제작한 데모 화면이며, 페이지에 적힌 수치와 사업자 정보 또한 예시입니다.
프로젝트 목표
웹사이트로 들어온 상담 신청과 기존 회원의 만료일을 한 화면에서 놓치지 않게 하는 것입니다.
문제점
헬스장이 회원을 잃는 곳은 대부분 만료일입니다. 만료 3일 전에 연락하면 연장하고, 지나고 나서 연락하면 이미 다른 곳에 등록해 있습니다. 그런데 만료일은 엑셀 어딘가에 있고 아무도 매일 열어보지 않습니다.
해결 방법
대시보드에 "만료 임박 회원" 을 D-22 · D-7 · D-3 · D-1 로 세워 두고, D-3 이하는 빨간색으로 띄웠습니다. 그 아래에 "오늘 상담 신청 — 웹사이트에서 접수" 를 붙여 앞면에서 들어온 문의가 같은 화면에 쌓이게 했습니다.
왜 이렇게 디자인했나
화면의 모든 요소에는 이유가 있습니다. 이 프로젝트에서 내린 판단과 그 근거를 그대로 적었습니다.
- 01
앞면과 뒷면을 한 이야기로 이었습니다
이 포트폴리오의 다른 12건은 전부 손님이 보는 앞면이었습니다. 채움은 그중 VELOFIT의 뒷면입니다. 사이드바 프로필이 "VELOFIT 강남점 · 관리자" 이고, 대시보드의 상담 신청 카드에는 "웹사이트에서 접수" 라고 적혀 있습니다. 홈페이지를 만들면 그 뒤가 어떻게 되는지를 두 건을 나란히 놓아 보여줍니다.
- 02
만료일을 D-일로 바꿨습니다
"2026.09.12 만료" 는 오늘이 며칠인지 계산해야 뜻이 생깁니다. "D-22" 는 계산이 필요 없습니다. 사람이 계산하게 만드는 화면은 결국 안 보게 됩니다.
- 03
메시지를 화면 안에서 미리 보여줍니다
메시지 발송 화면 아래에 "받는 분에게 이렇게 보입니다" 를 넣고 실제 알림톡 말풍선 모양으로 그렸습니다. 이름과 만료일 자리에 {이름}, {만료일} 이 들어가고 미리보기에서는 실제 값으로 바뀝니다. 24명에게 보내기 전에 오타를 잡을 수 있는 마지막 자리입니다.
- 04
보낼 인원을 버튼에 적었습니다
"발송하기" 가 아니라 "24명에게 발송하기" 입니다. 단체 메시지는 잘못 누르면 되돌릴 수 없습니다. 버튼에 숫자를 적어 두면 누르기 직전에 한 번 더 확인하게 됩니다.
- 05
회원 상세에 출석 달력을 넣었습니다
회원이 연장할지 말지는 최근에 얼마나 왔는지로 갈립니다. 상세 화면에 출석 기록을 달력으로 놓아, 상담 전에 "요즘 안 나오셨네요" 인지 "꾸준히 오시네요" 인지를 먼저 알 수 있게 했습니다.
- 06
폰에서는 오늘 하루만 보여줍니다
PC의 예약 화면은 주간 시간표입니다. 폰에서 주간 표는 읽히지 않습니다. 폰에서는 날짜 띠에서 하루를 고르고 그날의 예약만 시간순으로 세웠습니다. 밖에 있는 사장님이 궁금한 것은 이번 주가 아니라 오늘입니다.
주요 기능
- PC 5장 + 모바일 5장을 원본 그대로 게시 (다시 그린 픽셀 0개)
- 대시보드 · 예약 캘린더 · 회원 목록 · 회원 상세 · 메시지 발송
- VELOFIT 웹사이트(포트폴리오 19번)의 뒷단으로 설계
- 만료 임박 회원을 D-일로 표시하고 D-3 이하는 빨간색
- 알림톡 미리보기 · 발송 버튼에 대상 인원 표기
- 폰에서는 주간 시간표를 하루 단위 목록으로 재구성
프로젝트 결과
웹사이트에서 들어온 상담 신청과 기존 회원의 만료일이 같은 첫 화면에 놓입니다. 새 손님을 받는 일과 있던 손님을 지키는 일을 한 화면에서 하게 만드는 것이 이 설계의 목표였습니다.
