건축 & 지붕 공사

Muller Toiture

지붕 누수는 리모델링 프로젝트처럼 다룰 수 없습니다: 두 개의 동선, 하나의 사이트.

연도
2026
제작 기간
4주
기술 스택
Next.js · React · Tailwind · Vercel
  • 디자인
  • 개발
  • 견적 계산 도구
  • 로컬 SEO

Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.

https://mullertoiture.vercel.app/
Muller Toiture 웹사이트 메인 페이지 — 건축 & 지붕 공사, Kayzen Web 제작
개의 분리된 동선
2
견적에 필요한 질문 수
3
Lighthouse SEO
100/100
출발점

해결해야 했던 과제.

배경

Muller Toiture는 미옹(Mions)에 자리한 지붕 공사 전문 업체로, 리옹 동부와 북부 이제르(Nord-Isère) 지역에서 지붕 시공, 함석 작업, 단열, 이끼 제거를 합니다.

제약

정반대로 행동하는 두 고객이 같은 사이트에 들어옵니다. 누수가 생긴 고객은 당장, 그것도 흔히 일요일 저녁에 전화번호를 찾습니다. 지붕 교체를 고민하는 고객은 대략적인 가격을 찾고, 두 달에 걸쳐 견적을 세 군데서 받습니다. 하나의 동선으로는 둘 다 제대로 응대할 수 없었습니다.

해법

첫 화면부터 두 개의 입구를 구분했습니다. 스크롤 없이도 보이는 전화번호가 담긴 상시 긴급 배너. 그리고 두 번째 고객을 위해 면적과 지붕재 종류로 즉시 가격대를 보여 주는 지붕 견적 계산기. 하나는 긴급한 수요를, 다른 하나는 긴 검토 기간의 수요를 잡습니다.

주장이 아닌 측정

납품 시점에 측정한 점수.

운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.

PageSpeed
75
성능: 100점 만점에 75점
97
접근성: 100점 만점에 97점
100
권장사항: 100점 만점에 100점
100
검색엔진 최적화: 100점 만점에 100점
디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 상시 긴급 배너

    클릭 가능한 전화번호가 늘 보이며, 스크롤해도 가려지지 않습니다. 누수 상황에서 중요한 지표는 단 하나, 사이트 도착부터 전화까지 걸리는 초입니다.

  2. 세 가지 질문으로 끝나는 견적 계산기

    면적, 지붕재 종류, 상태. 결과는 가정과 함께 가격대라고 분명히 밝혀 보여 줍니다. 정확한 가격을 제시하는 것은 정직하지 못하고, 아무것도 제시하지 않으면 방문자는 과감히 가격을 보여 주는 경쟁사로 떠납니다.

  3. 이끼 제거는 따로

    객단가는 낮지만 물량이 많고, 단독으로 검색되는 경우가 많은 서비스입니다. 목록의 한 줄이 아니라 전용 페이지를 두었습니다.

프로젝트 색상 팔레트

  • 슬레이트

    #39434D

    구조 — 자재의 색

  • 기와

    #B15A2B

    행동 유도

  • 하늘

    #EEF3F7

    배경

  • 긴급 레드

    #C0392B

    누수 배너 전용

타이포그래피 체계

제목용 서체

Outfit 700

본문용 서체

Inter 400

긴급 레드는 누수 배너에만 씁니다. 장식에 쓰인 경고색은 더 이상 경고하지 못합니다.

엔지니어링

보이지 않는 곳의 기술.

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 완전히 클라이언트 측에서 도는 견적 계산기

    계산은 브라우저 안에서 이루어집니다. 서버 호출도, 대기도 없고, 사용자가 결정하기 전에는 어떤 개인정보도 수집하지 않습니다. 연락처는 결과가 표시된 뒤에만 요청합니다.

  2. 파악된 성능 개선 과제

    성능 75점은 시공 사례 갤러리 때문입니다. AVIF 변환, srcset, 갤러리 페이지 분할이라는 계획이 세워져 있습니다. 점수는 공개되어 있으니, 숨기기보다 설명하는 편이 더 유용합니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 긴급 검색어와 프로젝트 검색어

    “리옹 지붕 누수 긴급”, “미옹 지붕 업체”, “북부 이제르 지붕 보수 가격”. 세 가지 의도, 세 가지 페이지군. 섞으면 어느 검색어에서도 순위를 얻지 못합니다.

  2. 명시적인 서비스 지역

    실제로 방문하는 코뮌을 나열하고 마크업했습니다. “프랑스 전역”이라고 적는 장인은 전환이 일어나는 유일한 검색어인 지역명 검색을 놓칩니다.

웹 접근성

누구나 사용할 수 있도록.

2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.

  1. 키보드로 쓸 수 있는 견적 계산기

    네이티브 입력 필드, 라이브 영역으로 안내되는 결과, 드래그 앤 드롭에 의존하는 단계 없음.

사이트 구조

납품한 결과물.

  • 홈 — 긴급 + 견적 계산기
  • 지붕 시공 및 함석 작업
  • 단열
  • 이끼 제거
  • 지붕 견적 계산기
  • 서비스 지역
  • 문의
방법론

프로젝트 진행 과정.

  1. 문의 분석

    받은 전화를 바탕으로 두 가지 고객 유형 확인.

  2. 디자인

    긴급 배너, 견적 계산기, 분리된 동선.

  3. 개발

    클라이언트 측 견적 계산기, 양식, 알림.

  4. SEO

    세 가지 페이지군, 서비스 지역 마크업.

질문

자주 받는 질문.

아무것도 보여 주지 않는 것보다는 덜 위험합니다. 대략적인 금액을 찾지 못한 방문자는 다른 곳에서 찾고, 돌아오지 않습니다. 가정을 함께 적은 가격대는 장인을 보호하고, 대화의 틀을 잡아 주며, 예산이 맞지 않는 문의를 걸러 줍니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유