PENNY PAGE
CASE 46AM 데코2026.05

방수기능사가
직접 시공하는 집수리 사이트

방수기능사가 운영하는 종합 집수리·방수 업체 사이트입니다.

업종
방수·설비·집수리 종합 인테리어
형태
멀티페이지 7p (메인 + 공종별 서브 6)
구성
시공 사례 그리드 · 시공 앨범 · 명함·소개
공종별 서브 · 신뢰 스트립 · CALL/SMS 버튼
기술 스택
Cloudflare Pages · 멀티페이지 HTML/CSS · Vanilla JS · CSS scroll-snap · WebP 이미지
호스팅
Cloudflare Pages
AM 데코 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 46

01과제

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

집수리 고객은 이 업체가 실제로 어떤 현장을 해냈는지 보고 연락합니다. 그래서 실제 시공 현장 사진 20건을 WebP로 정리해 CSS scroll-snap 앨범과 라이트박스로 넘겨 보게 하고, 방수·설비·도배·지붕 공종별 페이지를 따로 만들었습니다.

대표님이 보내 주신 명함 실사진을 메인 명함·소개 섹션에 넣어, 시공 사례부터 상담 연결까지 이어지는 모노톤 7페이지 사이트로 완성했습니다.

핵심 — 현장이 곧 증거집수리 고객은 실제 현장을 보고 연락합니다. 그래서 시공 사진 앨범을 사이트의 중심에 두고, 공종별 페이지가 상담으로 이어지게 했습니다.

02화면

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

시공 사례 그리드 — 공종별 현장 사진
01시공 사례 그리드 — 공종별 현장 사진
시공 앨범 — scroll-snap 넘김
02시공 앨범 — scroll-snap 넘김
명함·소개 섹션 — 서비스 5종
03명함·소개 섹션 — 서비스 5종

03구성

이 사이트에 들어간 것

  • 01
    시공 사례 히어로 그리드공종별 현장 사진 카드
  • 02
    시공 앨범 scroll-snap현장 사진 20건 WebP
  • 03
    라이트박스키보드·스와이프 넘김
  • 04
    명함·소개 섹션명함 실사진 + 서비스 리스트
  • 05
    공종별 서브 6페이지방수·설비·도배·지붕 등
  • 06
    신뢰 스트립상단 자격 안내 바
  • 07
    하단 CALL/SMS 고정 버튼모바일 상담 연결
  • 08
    모바일 내비반응형 메뉴
AM 데코 모바일 전체 화면

모바일 · 스크롤해서 보기

제작 당시 화면을 보존했습니다.

미러본은 납품 시점 화면을 그대로 보존한 사본입니다.