Muller Toiture
지붕 누수는 리모델링 프로젝트처럼 다룰 수 없습니다: 두 개의 동선, 하나의 사이트.
- 연도
- 2026
- 제작 기간
- 4주
- 기술 스택
- Next.js · React · Tailwind · Vercel
- 디자인
- 개발
- 견적 계산 도구
- 로컬 SEO
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

- 개의 분리된 동선
- 2
- 견적에 필요한 질문 수
- 3
- Lighthouse SEO
- 100/100
해결해야 했던 과제.
배경
Muller Toiture는 미옹(Mions)에 자리한 지붕 공사 전문 업체로, 리옹 동부와 북부 이제르(Nord-Isère) 지역에서 지붕 시공, 함석 작업, 단열, 이끼 제거를 합니다.
제약
정반대로 행동하는 두 고객이 같은 사이트에 들어옵니다. 누수가 생긴 고객은 당장, 그것도 흔히 일요일 저녁에 전화번호를 찾습니다. 지붕 교체를 고민하는 고객은 대략적인 가격을 찾고, 두 달에 걸쳐 견적을 세 군데서 받습니다. 하나의 동선으로는 둘 다 제대로 응대할 수 없었습니다.
해법
첫 화면부터 두 개의 입구를 구분했습니다. 스크롤 없이도 보이는 전화번호가 담긴 상시 긴급 배너. 그리고 두 번째 고객을 위해 면적과 지붕재 종류로 즉시 가격대를 보여 주는 지붕 견적 계산기. 하나는 긴급한 수요를, 다른 하나는 긴 검토 기간의 수요를 잡습니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
상시 긴급 배너
클릭 가능한 전화번호가 늘 보이며, 스크롤해도 가려지지 않습니다. 누수 상황에서 중요한 지표는 단 하나, 사이트 도착부터 전화까지 걸리는 초입니다.
세 가지 질문으로 끝나는 견적 계산기
면적, 지붕재 종류, 상태. 결과는 가정과 함께 가격대라고 분명히 밝혀 보여 줍니다. 정확한 가격을 제시하는 것은 정직하지 못하고, 아무것도 제시하지 않으면 방문자는 과감히 가격을 보여 주는 경쟁사로 떠납니다.
이끼 제거는 따로
객단가는 낮지만 물량이 많고, 단독으로 검색되는 경우가 많은 서비스입니다. 목록의 한 줄이 아니라 전용 페이지를 두었습니다.
프로젝트 색상 팔레트
슬레이트
#39434D
구조 — 자재의 색
기와
#B15A2B
행동 유도
하늘
#EEF3F7
배경
긴급 레드
#C0392B
누수 배너 전용
타이포그래피 체계
제목용 서체
Outfit 700
본문용 서체
Inter 400
긴급 레드는 누수 배너에만 씁니다. 장식에 쓰인 경고색은 더 이상 경고하지 못합니다.
보이지 않는 곳의 기술.
- Next.js
- React
- Tailwind
- Vercel
완전히 클라이언트 측에서 도는 견적 계산기
계산은 브라우저 안에서 이루어집니다. 서버 호출도, 대기도 없고, 사용자가 결정하기 전에는 어떤 개인정보도 수집하지 않습니다. 연락처는 결과가 표시된 뒤에만 요청합니다.
파악된 성능 개선 과제
성능 75점은 시공 사례 갤러리 때문입니다. AVIF 변환, srcset, 갤러리 페이지 분할이라는 계획이 세워져 있습니다. 점수는 공개되어 있으니, 숨기기보다 설명하는 편이 더 유용합니다.
사이트가 검색되는 방식.
긴급 검색어와 프로젝트 검색어
“리옹 지붕 누수 긴급”, “미옹 지붕 업체”, “북부 이제르 지붕 보수 가격”. 세 가지 의도, 세 가지 페이지군. 섞으면 어느 검색어에서도 순위를 얻지 못합니다.
명시적인 서비스 지역
실제로 방문하는 코뮌을 나열하고 마크업했습니다. “프랑스 전역”이라고 적는 장인은 전환이 일어나는 유일한 검색어인 지역명 검색을 놓칩니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
키보드로 쓸 수 있는 견적 계산기
네이티브 입력 필드, 라이브 영역으로 안내되는 결과, 드래그 앤 드롭에 의존하는 단계 없음.
납품한 결과물.
- 홈 — 긴급 + 견적 계산기
- 지붕 시공 및 함석 작업
- 단열
- 이끼 제거
- 지붕 견적 계산기
- 서비스 지역
- 문의
프로젝트 진행 과정.
문의 분석
받은 전화를 바탕으로 두 가지 고객 유형 확인.
디자인
긴급 배너, 견적 계산기, 분리된 동선.
개발
클라이언트 측 견적 계산기, 양식, 알림.
SEO
세 가지 페이지군, 서비스 지역 마크업.


