이사 서비스 신뢰형 랜딩 페이지

이사 서비스 소개와 함께 후기·실적·인증 등 신뢰 요소를 상단에 배치해 첫 화면에서부터 신뢰도를 전달하는 랜딩 구조를 설계합니다.

• CSS 변수 기반 디자인 토큰(color/spacing/typography)을 정의해 컴포넌트 전반에 일관 적용
• IntersectionObserver로 스크롤 진입 시 신뢰 지표 섹션에 페이드인 애니메이션 적용
• React 컴포넌트 단위로 히어로·신뢰요소·CTA 블록을 분리해 재사용 가능하게 설계

스크롤 기반 순차 노출 구조와 디자인 토큰 체계를 결합해 신뢰 요소 중심의 전환 동선을 구현합니다.

근거리·장거리·특수이사 등 서비스 유형별 범위와 가격 기준, 진행 절차를 탭 형태로 안내합니다. 서비스 유형 선택 시 해당 유형의 상세 정보와 진행 단계 타임라인이 갱신되는 탭 전환 구조로 구현합니다.

• 탭 상태를 URL 쿼리와 동기화해 특정 서비스 유형으로 직접 링크 공유 가능하도록 설계
• 진행 절차 타임라인 컴포넌트를 단계 수 가변형으로 설계해 서비스별 재사용
• 가격 기준 표를 반응형 카드/테이블 전환 컴포넌트로 구현

서비스 유형별 콘텐츠를 하나의 템플릿 컴포넌트로 관리해 신규 서비스 추가 시 데이터만 확장하면 되는 구조를 설계합니다.

이사 유형·일정·주소·연락처를 3단계로 나눠 입력받는 다단계 견적 신청 폼으로 완료까지 자연스럽게 이어지는 전환 동선을 설계합니다.

• React 로컬 상태(useReducer)로 3단계 폼 데이터를 관리하고 단계 간 값 유지
• 단계별 진행률 인디케이터와 이전/다음 네비게이션 컴포넌트 구현
• 입력 필드별 인라인 유효성 검증(정규식 기반 연락처·주소 형식 체크) 적용

단계 분할과 실시간 유효성 검증을 결합해 입력 오류를 사전에 방지하는 폼 UX 구조를 구현합니다.

서비스 이용 전 궁금증을 해소하는 FAQ와 고객 후기를 함께 노출해 마지막 전환 시점의 신뢰를 보강하는 섹션을 설계합니다.

• 아코디언 컴포넌트를 접근성 속성(aria-expanded)과 함께 구현해 키보드 탐색 지원
• 후기 카드 캐러셀에 Intersection Observer 기반 자동 재생/정지 로직 적용
• FAQ 카테고리 필터를 태그 형태로 구현해 질문 그룹을 빠르게 좁힐 수 있도록 설계

FAQ 아코디언과 후기 캐러셀을 인접 배치해 마지막 의사결정 단계에서 정보 탐색과 신뢰 확인을 동시에 지원하는 구조를 구현합니다.