CASE 51뽀송뽀독케어2026.04

다시 또렷한 뷰,
유리창 외창청소 랜딩

1인 대표가 직접 작업하는 고층 아파트 유리창 외창청소 업체의 원페이지 랜딩입니다.

업종: 고층 아파트 유리창 외창청소 (경기 부천, 수도권)
형태: 원페이지 랜딩 + 유형별 견적 폼
구성: 히어로 견적 폼 · 고객 유형 · BEFORE/AFTER 갤러리
강점 · FAQ
기술 스택: Cloudflare Pages · 커스텀 도메인 · 무한 마퀴 갤러리(RAF) · 인라인 SVG 아이콘 · 반응형 HTML/CSS
호스팅: Cloudflare Pages, 자체 도메인

뽀송뽀독케어 데스크탑·모바일 화면 — PENNYPAGE WORKS · CASE 51bsbdcare.shop

01과제

무엇을 받았고, 무엇을 했나

유리창 청소는 결과가 사진 한 장으로 증명됩니다. 그래서 대표님 블로그의 같은 현장 전·후 사진을 짝지어 BEFORE/AFTER 합성 6장으로 만들고, requestAnimationFrame 기반 무한 마퀴 갤러리로 드래그·스와이프까지 되게 했습니다.

견적 폼은 아파트·빌라·상가 유형에 따라 입력 항목이 바뀌고 창 상태 칩과 사진 첨부를 받도록 구성했으며, FAQ 답변은 대표님 워딩 그대로 반영해 bsbdcare.shop 도메인으로 완성했습니다.

핵심 — 사진 한 장의 증명같은 현장의 전·후 사진을 짝지어 보여 주고, 보는 자리에서 바로 견적을 넣을 수 있게 폼을 첫 화면에 두었습니다.

02화면

히어로가 아니라 실제로 일하는 구간

견적 폼 — 창 상태 칩·사진 첨부 — 01견적 폼 — 창 상태 칩·사진 첨부

고객 유형 · BEFORE/AFTER 마퀴 — 02고객 유형 · BEFORE/AFTER 마퀴

BEFORE/AFTER 갤러리 · 강점 4가지 — 03BEFORE/AFTER 갤러리 · 강점 4가지

03구성

이 사이트에 들어간 것

01
히어로 통합 견적 폼첫 화면 배치
02
아파트/빌라/상가 유형별 폼 분기유형별 입력 항목 전환
03
창 상태 다중선택 칩상태 복수 선택
04
사진 첨부현장 사진 업로드
05
BEFORE/AFTER 합성 갤러리같은 현장 전·후 6장
06
RAF 무한 마퀴드래그·스와이프 지원
07
인라인 SVG 스프라이트 아이콘외부 아이콘 의존 없음
08
Cloudflare Pages + 커스텀 도메인bsbdcare.shop

뽀송뽀독케어 모바일 전체 화면

모바일 · 스크롤해서 보기

실제 사이트에서 확인하세요.

지금도 운영 중인 사이트입니다.

라이브 사이트 ↗미러본 보기 제작 문의