플러스프로젝트 배경
[문제점] 장기렌트와 리스는 조건에 따라 월 납입액 편차가 큽니다. → 이용자가 업체별로 따로 확인해야 해 비교 비용이 큽니다. 상담 신청 경로가 화면 하단에 있어 접근성이 떨어졌습니다. → 차량을 살펴보다 이탈하는 구간이 발생했습니다. 자원 로딩 실패와 렌더링 모드 오류가 섞여 있었습니다. → 화면이 설계와 다르게 표시되는 문제가 있었습니다. [목표] 첫 화면에서 차량별 월 렌탈료를 바로
프로젝트 성과
스타일시트 전량 복구
요청 경로와 실제 파일명 불일치로 적용되지 않던
스타일시트 7종을 모두 정상 로딩 상태로 되돌렸습니다.
진입점 한 곳을 바로잡아 연쇄로 불러오는
6개 스타일시트까지 함께 복구했습니다.
스타일시트 7종을 모두 정상 로딩 상태로 되돌렸습니다.
진입점 한 곳을 바로잡아 연쇄로 불러오는
6개 스타일시트까지 함께 복구했습니다.
렌더링 모드 정상화
문서 타입 선언을 복원해 하위 호환 모드에서 표준 모드로 전환했습니다.
차량 카드 영역 높이가 1080px에서 458px로 교정되었고,
전체 페이지 높이도 5,492px에서 3,447px로 설계값에 맞춰졌습니다.
차량 카드 영역 높이가 1080px에서 458px로 교정되었고,
전체 페이지 높이도 5,492px에서 3,447px로 설계값에 맞춰졌습니다.
자원 로딩 무결점 달성
자원 로딩 실패 5건을 0건으로 줄였습니다.
깨진 이미지 0건, 콘솔 오류 0건 상태를
헤드리스 브라우저 계측으로 확인했습니다.
깨진 이미지 0건, 콘솔 오류 0건 상태를
헤드리스 브라우저 계측으로 확인했습니다.
오프라인 렌더링 지원
외부 이미지 서버에 의존하던 차량 이미지 24건을
프로젝트 내부 경로로 옮겼습니다.
네트워크 연결이 없는 환경에서도
전체 화면이 동일하게 렌더링됩니다.
프로젝트 내부 경로로 옮겼습니다.
네트워크 연결이 없는 환경에서도
전체 화면이 동일하게 렌더링됩니다.
검증 자동화
브라우저 자동화 스크립트로 화면 캡처와 렌더링 계측을 자동화했습니다.
화면을 수정한 뒤 명령 한 번으로
전체 화면 이미지와 오류 여부를 다시 확인할 수 있습니다.
화면을 수정한 뒤 명령 한 번으로
전체 화면 이미지와 오류 여부를 다시 확인할 수 있습니다.
핵심 기능
메인 비주얼 롤링 배너
배너 3종을 5초 간격으로 자동 전환하고 페이저로 직접 이동할 수 있습니다.
배너가 바뀌는 동안에도 우측 견적 폼은 계속 노출됩니다.
배너가 바뀌는 동안에도 우측 견적 폼은 계속 노출됩니다.
진행 단계
[1단계] 구조 분석 및 렌더링 정상화
2025.03.
스타일시트 로딩 경로와 문서 타입 선언을 점검해 표준 모드로 전환하고,
레이아웃 계산의 기준선을 확보했습니다.
레이아웃 계산의 기준선을 확보했습니다.
프로젝트 상세
[한 줄 소개] 차량 카드 슬라이더와 실시간 견적 상담 폼을 축으로 구성한 장기렌트 / 리스 비교견적 PC 웹사이트 프론트엔드입니다. [기획 배경] 장기렌트와 리스는 차량 가격, 계약 기간, 선납금 비율에 따라 월 납입액이 크게 달라지는 상품입니다. 이용자는 여러 업체를 각각 방문해 조건을 확인해야 했고, 비교 과정에서 이탈하는 경우가 많았습니다. 그래서 첫 화면에서 곧바로 차량별 월 렌탈료
