이사 서비스 데모 설계 의도서

설계 방향을 잡기 위해 2026년 9월 10일 브라우저로 시장의 대표적인 세 이사 서비스 사이트를 직접 방문하여 화면 구성 요소와 수치를 실측했습니다. 지어낸 추측 없이, 화면에 직접 노출된 공식 요소들만 비교 정리한 결과입니다.

현행 주요 3개사 웹 화면 실측 분석 (2026년 9월 10일 기준)

실측 자료를 통해 도출한 두 가지 시사점

실측 조사 결과, 기존 사이트 세 곳 중 두 곳이 차가운 원색 파란색(rgb 0, 119, 255 및 rgb 20, 92, 230)을 사용하고 있었습니다. 경쟁사 대부분이 동일한 원색 파란색을 쓰고 있어, 같은 색을 적용하면 브랜드 구별이 어렵고 기억에 남지 않습니다.

한 가지 색상으로 못 박지 않고 '두 벌의 체계'를 준비한 이유

도입하는 회사의 핵심 타깃(기업·가정 또는 원룸 이사) 확정 결과에 맞춰 즉시 적용하실 수 있도록 대비되는 두 가지 색상 체계를 준비했습니다. 사업 전략과 시장 반응에 따라 관리자가 최적의 분위기를 선택하여 운영하실 수 있도록 코드 레벨에 미리 반영해 두었습니다.

이 데모에서는 화면을 만들 때 눈대중으로 색이나 여백을 정하지 않고, tokens.css라는 전용 규칙 파일에 모든 수치를 규격화해 두었습니다. 이것을 기술적으로는 '디자인 토큰(Design Token)'이라고 부릅니다.

화면을 확장할 때 디자인 일관성을 유지하고 재작업을 없애는 설계

웹사이트 오픈 후 새로운 홍보 페이지나 상세 화면을 추가할 때, 공통 기준이 없으면 글자 크기나 버튼 모양, 여백이 제각각으로 어긋나 전체적인 완성도가 떨어지기 쉽습니다. 규격화된 토큰이 준비되어 있으면 다음과 같은 세 가지 실질적 이익이 생깁니다.

우측 상단에 고정된 데모 검토 도구에서 [서비스 확장 범위] 스위치를 눌러 보실 수 있습니다. 화면을 새로고침하지 않아도 [이사 전용]과 [생활 결합] 상태 사이를 즉시 오가며 화면의 변화를 눈으로 확인할 수 있습니다.

스위치를 조작했을 때 화면에서 실제로 일어나는 변화

서비스 항목이 늘어나도 화면이 깨지지 않는 이유는 상단 차림표를 묶음으로 바꾸었기 때문입니다. 전에는 서비스 이름이 한 줄로 죽 늘어서 있어서 생활 서비스를 켰을 때 항목이 늘어나면 좁은 화면에서 뒤쪽이 가려졌습니다. 지금은 이름을 두 묶음으로 접어 두고 눌러서 펼치도록 설계했습니다. 그래서 서비스가 몇 개로 늘어나든 차림표의 길이는 그대로 유지되어 화면 구성이 흐트러지지 않습니다.

디자인 감상에 그치지 않고, 방문 고객이 실제로 견적을 신청하고 계약으로 이어지는 전환율 향상에 초점을 맞췄습니다. 프로젝트 완료 후 주관적인 평가에 머물지 않고 객관적인 데이터로 성과를 검증하기 위한 접근입니다.

운영을 시작한 뒤 시스템에서 실제로 세어야 할 네 가지 측정 기준을 정했습니다.

도입 전후로 반드시 세어야 할 4대 측정 지표

이 데모는 공개된 업계 데이터를 바탕으로 만들었기에, 도입하는 회사 안의 실제 데이터는 아직 들어 있지 않습니다. 실제 운영 사이트로 완성하려면 담당자님과 확인해야 할 것이 네 가지 있습니다.

정식 운영으로 넘어갈 때 담당자님과 확정할 네 가지 항목

• 1
  기존 웹사이트의 실제 유입 및 이탈 통계 확인:
  현재 운영 중인 사이트가 있다면, 고객이 주로 모바일로 들어오는지 PC로 들어오는지, 견적 문의를 남기지 않고 나가는 주요 페이지가 어디인지 확인이 필요합니다. 이 데이터가 확보되면 첫 화면에 어떤 문구를 가장 위에 둘지 데이터에 근거해 최종 배치할 수 있습니다.
• 2
  현장 상담사가 반드시 필요로 하는 필수 문진 항목 정의:
  이 데모의 견적 폼(quote.html)에는 출발지/도착지 층수와 엘리베이터 유무 등 일반적인 항목을 배치했습니다. 그러나 실제 배차를 담당하는 현장 실무자 입장에서 '사다리차 진입 가능 여부'나 '반포장/포장 여부' 등 꼭 사전에 받아야 하는 정보가 무엇인지 확인하여 입력창을 다듬어야 합니다.
• 3
  법적 필수 인허가 표기 정보 및 보험 증권 내용:
  화물자동차운송주선사업 허가번호, 통신판매업신고번호, 적재물 배상책임보험 가입 증권 번호 및 보상 한도액 등 실제 고객에게 법적 신뢰를 주는 공식 번호들을 푸터와 신뢰 뱃지에 반영해야 합니다.
• 4
  부가 제휴 서비스(청소·렌탈 등)의 실제 처리 방식:
  입주 청소나 가전 렌탈을 직접 담당하는 팀이 있는지, 아니면 협력 제휴사로 상담 신청 정보만 넘기는 구조인지에 따라 견적 완료 후의 알림톡 발송 방식과 데이터 보관 정책을 다르게 구현해야 합니다.

2026년 현재 웹 화면에서는 스크롤에 따라 요소가 조립되거나 단계별로 펼쳐지는 연출, 빛과 그림자 및 은은하게 비치는 유리 질감으로 낸 입체감, 섬세한 재질 표현, 모바일 환경을 우선하는 구조, 첫 화면에 믿을 거리를 쌓아 올리는 배치, 재고 사진 대신 실제 촬영이나 전용 그림을 쓰는 방식 등이 널리 쓰이고 있습니다.

이 데모는 이러한 흐름을 무조건 좇기보다, '견적을 확인하러 온 고객의 시간을 빼앗지 않는다'는 기준을 먼저 세우고 꼭 필요한 세 가지만 골라 담았습니다.

이 데모에 실제로 반영한 세 가지 절제된 연출

화려한 연출 기법을 일부러 더 쓰지 않고 멈춘 까닭

스크롤 길이에 맞춰 화면 전체가 멈춘 채 그래픽이 조립되거나, 여러 겹의 사진이 서로 다른 속도로 엇갈려 지나가는 입체 시차 연출, 다음 화면으로 넘어갈 때까지 화면을 가리고 기다리게 하는 화면 전환 효과 등은 최근 웹 디자인에서 자주 쓰이는 방식입니다.

그러나 이사 사이트를 찾는 고객은 이사 날짜와 주거 형태에 따른 예상 운임을 확인하고 신뢰할 수 있는 업체를 선별하려는 뚜렷한 목적을 지니고 있습니다. 견적을 알아보러 온 사람 앞에서 화면이 오래 움직이면 그만큼 기다리게 되고, 이는 곧 고객의 이탈로 이어집니다.

정보 구조(IA)와 화면 설계서를 정리하여, 데모로 만든 화면들이 어떤 갈래와 층위로 묶이고 어디서 어디로 이어지는지 한눈에 살필 수 있도록 구조를 정리했습니다.

화면들을 묶은 네 가지 층위와 역할 구분

이용자가 사이트에 들어와 정보를 찾고 신뢰를 확인한 뒤 최종 견적을 신청하기까지의 여정에 맞춰 화면들을 네 단계 층위로 나누었습니다.

화면 셈과 상태 분기

데모를 구성할 때 화면마다 파일을 쪼개면 이동할 때마다 화면이 깜빡이고 고객이 입력하던 정보가 날아가 이탈할 위험이 커집니다. 이에 따라 파일은 열일곱 개로 압축해 안정성을 높이되, 파일 안에서 매끄럽게 전환되는 상태를 나누어 실제 화면 단위로는 스물네 개를 구현했습니다.

고객이 어디서 들어와 어떻게 견적 신청으로 이어지는가

좋은 정보 구조는 고객이 어느 화면으로 들어오든 자연스럽게 신뢰를 느끼고 최종 견적 신청으로 발걸음을 옮기도록 돕는 길을 터놓아야 합니다. 이 데모에서는 방문 고객의 탐색이 도중에 끊겨 나가지 않도록 각 화면마다 견적으로 이어지는 통로를 열어 두었습니다.

생활 서비스가 늘어날 때 이 구조의 어디에 붙는가

회사가 사업을 확장하여 입주 청소, 가전 렌탈, 통신 이전 등 이사와 연계된 생활 서비스를 추가할 때, 기존 구조를 허물지 않고 아래 네 자리에 그대로 결합할 수 있도록 모듈형 슬롯을 마련해 두었습니다.

각 화면이 어느 파일에 담겨 있는지 정리했습니다. 검토하시면서 각 항목이 실제로 어디에 있는지 바로 찾아보실 수 있습니다.

앞 절에서는 데모 파일이 화면 단위로 몇 개인지 셌습니다. 이 절은 반대 방향입니다. 이 절은 화면을 기준으로 파일을 찾습니다.

기준 없는 분석은 개인의 인상평에 그칩니다. 담당자 누구나 같은 결론에 닿도록, 화면을 볼 때 쓸 점검 기준을 먼저 세웠습니다.

이 문서 첫 절의 본보기 세 곳 분석은 위 기준을 이미 실제로 적용해 본 결과입니다.