플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 이사 유형(근거리/장거리/특수이사)별로 상이한 견적 입력 항목을 하나의 다단계 폼 스키마로 통합 설계할 필요가 있음 - 신뢰 요소(후기/실적/인증)를 과도하게 배치하면 정보 과부하가 될 수 있어 섹션별 우선순위 설계가 필요함 - PC 그리드 기반 서비스 소개 레이아웃을 모바일 세로 스크롤로 재구성하는 브레이크포인트 전략이 필요함 - 기존 화면의 정보를 신규 IA로 재
프로젝트 성과
전환 동선 정보구조(IA) 설계
히어로 → 신뢰요소 → 서비스소개 → 견적신청 CTA 순으로 스크롤 흐름을 설계, 단계별 시선 유도 구조를 구현
다단계 견적 신청 폼 상태 관리 설계
React 로컬 상태 기반 3단계 폼(이사유형·일정/주소·연락처) 분리 설계, 단계별 유효성 검증과 진행률 인디케이터 구현
디자인 토큰 기반 컴포넌트 시스템 구축
컬러·타이포·spacing 토큰을 CSS 변수로 정의하고 헤더·카드·아코디언 등 공통 컴포넌트 12개로 재사용 구조 설계
신뢰 요소 시각화 컴포넌트 설계
후기 카드·실적 배지·인증 마크를 조합한 신뢰 지표 섹션을 컴포넌트화하여 서비스 상세 페이지에도 재사용
핵심 기능
메인 페이지 – 신뢰 요소 히어로
이사 서비스 소개와 함께 후기·실적·인증 등 신뢰 요소를 상단에 배치해 첫 화면에서부터 신뢰도를 전달하는 랜딩 구조를 설계합니다
진행 단계
UI/UX 현황 분석 및 정보구조(IA) 재설계
2026.09
기존 화면 진단, 전환 동선 문제점 도출, 신뢰 요소 배치 전략 수립
프로젝트 상세
1) 포트폴리오 소개 이사 서비스 소개 랜딩부터 서비스 상세, 다단계 견적 신청, FAQ·후기까지 신뢰도·전문성을 전달하는 전환 동선 설계와 일관된 디자인 체계를 React + TypeScript 기반으로 구현하는 맞춤 데모입니다. 방문 고객이 첫 화면부터 안심하고 견적 신청까지 이어지도록 정보구조를 재설계합니다. 2) 작업 범위 - 메인 페이지 – 신뢰 요소 히어로: 이사 서비스 소개와 함께 후기·
