플러스프로젝트 배경
1) 문제점 - 화면이 페이지마다 제각각. 같은 버튼·같은 목록이 페이지별로 다른 크기·색·간격으로 반복되어 유지보수 비용이 계속 늘어나는 상태 - 모바일에서만 드러나는 결함이 방치됨. 보이는 것보다 탭 영역이 절반인 버튼, 탭한 뒤 눌린 상태가 남는 요소, 배지가 헤더를 덮는 겹침 - 검색 유입 기반이 약함. 필수 메타 태그 누락, 공유 이미지 없음, 내부 링크 빈약, 상세 페이지 본문 부족 - 외부
프로젝트 성과
외부 API 호출 도시당 41회 → 1회
도시마다 41번씩 나가던 시세 호출을 전용 엔드포인트 전환과 중복 제거로 1회로 줄였습니다. 빌드 시간 제한안에서 117페이지 전부 안전하게 생성됩니다.
117개 페이지 전부 정적 프리렌더
도시 상세 92, 카드사 상세 21, 공통 4개 페이지를 빌드 시점에 모두 생성해 CDN에서 응답하도록 전환했습니다. 요청마다 외부 API를 기다리지 않습니다.
반응형·접근성 자동 검증 60개 조합 결함 0건
폭 3종 x 라이트/다크 x 페이지 10종을 매 변경마다 자동 검사합니다. 가로 넘침, 터치 hover 잔류, 탭 영역 미달, h1 중복 전부 0건으로 정리했습니다.
필수 메타 14종 전 페이지 누락 0건
title, description, canonical, Open Graph 7종 등 14종을 전 페이지에 적용하고, 중복 title/description을 0건으로 맞추었습니다.
동적 영역 레이아웃 시프트 0px
콘텐츠가 나중에 채워지는 구간마다 골격 높이를 실제 콘텐츠와 1px 단위로 맞췄습니다. CPU 4배 스로틀링 환경에서도 로드 중 높이 변동 0px을 확인했습니다.
핵심 기능
링크 붙여넣기 한 번으로 가격 비교
예약 사이트 주소를 그대로 붙여넣으면 채널별 조건을 즉시 비교해 보여줍니다. 설치나 가입 절차 없이 첫 화면에서 바로 동작합니다.
진행 단계
진단 및 범위 확정
2026.07.
전 페이지를 폭별로 계측해 겹침, 탭 영역, 넘침 결함을 목록화하고 리뉴얼 범위를 117페이지 전면으로 확정했습니다.
프로젝트 상세
호텔 예약 채널별 가격을 비교해 주는 웹서비스의 프론트엔드 전면 리뉴얼입니다. 기존 서비스는 기능은 동작했지만 화면이 페이지마다 제각각이었고, 모바일 대응과 검색 노출이 약한 상태였습니다. 디자인 시안 확정부터 퍼블리싱, 프론트엔드 구현, 정적 사이트 빌드 구조, SEO, 자동 검증 체계까지 단독으로 전 구간을 담당했습니다.
