숙박 앱 운영자와 입점 사업자를 위한 관리 도구
화면 비공개입점 사업자와 투숙객의 실제 운영 데이터가 그대로 찍힌 관리자 화면이라 캡처를 싣지 않습니다.어떤 문제를 어떻게 풀었는지는 아래에 정리해 두었습니다.
STATION by UHC는 호텔·숙박 서비스 앱입니다. 이 프로젝트는 그 앱을 실제로 굴러가게 만드는 뒷단, 즉 백오피스를 만드는 일이었습니다. 최상위 운영 관리자와 입점한 숙박 사업자가 같은 시스템을 쓰되 서로 다른 것을 볼 수 있어야 했습니다.
이런 도구의 사용자는 개발자가 아닙니다. 하루 종일 이 화면을 띄워놓고 객실을 등록하고, 예약을 확인하고, 쿠폰을 발급합니다. 그래서 '한 화면에 얼마나 많은 정보를 담느냐'보다 '실수했을 때 되돌릴 수 있느냐', '지금 뭘 하고 있는지 알 수 있느냐'가 훨씬 중요했습니다.
특히 공들인 부분은 등록 화면의 미리보기입니다. 사업자가 숙소 정보를 입력할 때, 그 내용이 실제 앱에서 어떻게 보이는지를 옆에서 같이 보여줬습니다. 등록하고 앱을 켜서 확인하고 다시 수정하는 왕복을 없애기 위해서였습니다.
문제가 무엇이었고, 무엇을 골랐고, 그래서 어떻게 됐는지.
결정 01
결정 02
결정 03
결정 04
운영 관리자와 입점 사업자의 라우트·메뉴·데이터 범위를 권한 정의에서 파생시켜 관리합니다.
입력하는 즉시 실제 앱에 노출될 화면을 옆에서 보여줘 등록 전에 결과를 확인할 수 있습니다.
FullCalendar로 객실별 예약 현황을 달력 뷰로 확인하고 그 자리에서 조정합니다.
FFmpeg로 브라우저에서 해상도·용량을 조정한 뒤 전송해 업로드 시간과 서버 부담을 줄였습니다.
프로모션 쿠폰을 등록하고, 누가 언제 썼는지 이력을 추적할 수 있습니다.
결제 내역·예약 현황·사용자 지표를 Chart.js로 시각화해 의사결정에 필요한 숫자를 모았습니다.
백오피스를 만드는 일은 결국 남의 하루를 줄여 주는 일이었습니다. 프리뷰는 기술적으로 어려운 기능이 아닙니다. 그런데 사업자가 등록하고, 앱 켜서 확인하고, 다시 고치던 왕복을 통째로 없앴습니다. 여기서 가장 값어치 있었던 건 그거였습니다.
FFmpeg를 브라우저에서 돌리는 것은 처음이었는데, 변환이 진행되는 동안 화면이 멈춘 것처럼 보이는 문제가 있었습니다. 진행률을 노출하는 것만으로 체감이 크게 달라졌습니다. 무거운 작업일수록 '지금 뭐가 되고 있는지'를 보여주는 것이 실제 속도만큼 중요합니다.
권한을 라우트 수준에서 나눈 결정은 프로젝트가 커질수록 이득이 커졌습니다. 컴포넌트 안에 조건문으로 흩뿌렸다면 두 달 뒤에는 아무도 전체 그림을 말할 수 없었을 것입니다.