PENNY PAGE
CASE 26노크 KNOCK2026.09

타일·수전을
직접 고르는 욕실 시공

서울 양천구에서 욕실 시공·리모델링을 하는 노크(희성건축)의 5페이지 사이트입니다. 접수 당일 5페이지 프리뷰를 완성했습니다.

업종
욕실 시공·리모델링 (서울 양천구·수도권)
형태
5페이지 멀티페이지 + 견적 문의 폼
기간
접수 당일 5페이지 프리뷰
구성
홈 · 자재 직접 선택 · 공간별 시공
시공 과정 · 견적 문의
기술 스택
Cloudflare Pages · gpt-image-2 · AI 히어로 영상 · JSON-LD · 반응형 HTML/CSS
호스팅
Cloudflare Pages
노크 KNOCK 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 26

01과제

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

욕실 고객은 타일·수전·도기를 직접 보고 고르고 싶어 합니다. 그래서 NAVY·BRIGHT·STONE 자재 조합 카드와 빌라·아파트·원룸·주택 공간별 안내를 만들고, 시공 사진 대신 gpt-image-2로 욕실 이미지 7장을 생성해 채웠습니다.

시공 과정 페이지 히어로는 AI 이미지를 움직인 30초 루프 영상으로 만들고, 홈과 문의 페이지에 공간유형·희망시기를 받는 견적 폼을 두었습니다.

핵심 — 자재를 고객이 고른다자재 조합 카드와 공간별 안내로 고르는 과정을 먼저 보여 주고, 견적 폼은 공간유형·희망시기부터 받습니다.

02화면

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

자재 직접 선택 — 자재 조합 카드
01자재 직접 선택 — 자재 조합 카드
시공 과정 — 상담부터 마감까지 단계 안내
02시공 과정 — 상담부터 마감까지 단계 안내
공간별 시공 — 빌라·아파트·원룸·주택
03공간별 시공 — 빌라·아파트·원룸·주택
견적 문의 폼 — 공간유형·희망시기
04견적 문의 폼 — 공간유형·희망시기

03구성

이 사이트에 들어간 것

  • 01
    네이비×브라스 디자인 토큰Pretendard · Montserrat
  • 02
    자재 조합 카드 호버 슬라이드NAVY·BRIGHT·STONE
  • 03
    모자이크 타일 리빌스크롤 인터랙션
  • 04
    시공과정 히어로 루프 영상AI 이미지 기반 30초 루프
  • 05
    공간 유형별 안내빌라·아파트·원룸·주택
  • 06
    견적 문의 폼공간유형·희망시기·시공 지역
  • 07
    모바일 앱 배너 슬롯앱 연동 대비 자리
  • 08
    LocalBusiness JSON-LD구조화 데이터
노크 KNOCK 모바일 전체 화면

모바일 · 스크롤해서 보기

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

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