장인 & 건축

BTP EA Rénovation

입력 항목은 6개, 하나도 더하지 않았습니다: 양식이 곧 제품입니다.

연도
2026
제작 기간
3주
기술 스택
Next.js · React · TypeScript · Tailwind · Vercel
  • 디자인
  • 개발
  • 로컬 SEO
  • 전환 퍼널
  • 카피라이팅
https://www.btp-ea-renovation.com/
BTP EA Rénovation 웹사이트 메인 페이지 — 장인 & 건축, Kayzen Web 제작
선별용 필드
6
회신 약속
48시간
지역별 페이지
9+
CAPTCHA
0
출발점

해결해야 했던 과제.

배경

리옹과 리옹 광역권에서 활동하는 인테리어 마감 시공 전문 장인입니다. 도장, 석고 미장, 바닥·벽 마감재, 욕실 리모델링을 합니다.

제약

건축 장인이 고객을 잃는 이유는 노출 부족이 아니라 고객 선별의 부재입니다. 성사되지 않는 전화는 몇 시간을 잡아먹습니다. 서비스 지역 밖의 현장, 맞지 않는 예산, 하지 않는 시공. 사이트는 좋은 문의를 꺾지 않으면서 전화 전에 걸러 내야 했습니다.

해법

견적 요청 양식을 페이지 하단이 아니라 첫 화면에 두고, 짧게 만들었습니다. 공사 유형, 면적, 공간, 지역, 희망 시기, 연락처. 현장을 파악하는 여섯 개의 필드입니다. 이 사전 정보가 회신 전화를 효율적으로 만듭니다. 이것이 없으면 통화는 5분짜리 질문으로 시작됩니다.

디자인 & 아트 디렉션

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

  1. 첫 화면에 견적 요청

    양식은 페이지 끝이 아니라 핵심 메시지 바로 옆에 있습니다. 장인의 사이트를 찾는 방문자는 이미 원하는 것을 알고 있습니다. 행동하기 전에 화면 세 개를 스크롤하게 만드는 것은 순전한 손실입니다.

  2. 하나하나 골라낸 여섯 개의 필드

    필드를 하나 줄이면 완료율이 오르고, 하나 늘리면 사전 정보가 늘어납니다. 여섯 개가 우리가 택한 균형점입니다. 그 이상이면 이탈로 잃는 것이 정보로 얻는 것보다 커집니다.

  3. 공사 현장 사진 대신 시공 전후

    장인들은 진행 중인 현장을 보여 주곤 합니다. 하지만 고객이 보고 싶은 것은 결과입니다. 갤러리는 정확한 공사 내용과 함께 시공 전후 사진을 짝지어 구성했습니다.

  4. 회신 약속을 명시

    “48시간 내 회신 전화”는 양식 위에 적힌 숫자로 된 약속입니다. “빠르게 답변드리겠습니다” 같은 모호한 약속은 누구도 안심시키지 못합니다.

프로젝트 색상 팔레트

  • 현장 블루

    #1D4E77

    구조, 신뢰

  • 안전 오렌지

    #D9601A

    행동 유도, 견적

  • 콘크리트 그레이

    #F2F3F5

    배경

  • 잉크

    #1C2126

    텍스트

타이포그래피 체계

제목용 서체

Outfit 700

본문용 서체

Inter 400

견고하고 군더더기 없는 서체입니다. 면적과 기간 숫자는 견적 요약에서 정렬이 유지되도록 고정폭 숫자를 씁니다.

엔지니어링

보이지 않는 곳의 기술.

  • Next.js
  • React
  • TypeScript
  • Tailwind
  • Vercel
  1. 클라이언트와 서버 양쪽에서 검증

    양식은 입력을 돕기 위해 실시간으로 검증하고, 저장 전에 서버에서 다시 검증합니다. 클라이언트 검증만으로는 10초 만에 우회되어 무엇이든 통과시킵니다.

  2. CAPTCHA 없는 스팸 방지

    허니팟 필드, 제출 시각 기록, 요청 속도 제한. CAPTCHA는 사이트가 지켜야 할 유일한 요소에 마찰을 더했을 것이고, 널리 알려진 접근성 장벽이기도 합니다.

  3. 즉시 알림

    모든 문의는 선별 정보 전체를 제목에 담은 이메일로 전송됩니다. 장인은 현장과 현장 사이에 휴대폰을 확인합니다. 필요한 정보는 미리보기 안에 다 들어가야 합니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 구(區)별 페이지

    리옹의 9개 구와 광역권 코뮌. 각 페이지는 도시 이름만 바꿔 넣은 것이 아니라 동네, 건물 유형, 시공 사례 등 고유한 내용을 담고 있습니다.

  2. 업종이 아니라 직종 검색어

    “리옹 3구 도장공”, “빌뢰르반(Villeurbanne) 욕실 리모델링”. 고객은 직종과 지역을 검색하지, 결코 “건설업체”를 검색하지 않습니다.

  3. HomeAndConstructionBusiness 마크업

    전용 유형, 명시된 서비스 지역, Service로 나열한 시공 항목. 이것이 로컬 팩 노출을 좌우합니다.

웹 접근성

누구나 사용할 수 있도록.

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

  1. 실제로 접근 가능한 양식

    연결된 레이블, 필드와 연결되어 안내되는 오류 메시지, 검증된 탭 순서. 양식은 사이트에서 가장 흔하게 접근성이 떨어지는 구성 요소입니다. 그리고 여기서는 유일하게 중요한 요소입니다.

사이트 구조

납품한 결과물.

  • 홈 — 빠른 견적
  • 시공 항목(도장, 석고 미장, 바닥, 욕실)
  • 시공 전후 사례
  • 서비스 지역 — 9개 구 + 광역권
  • 문의
방법론

프로젝트 진행 과정.

  1. 선별 기준

    놓친 전화를 바탕으로 장인과 함께 여섯 개 필드를 정의.

  2. 디자인

    첫 화면 견적, 시공 전후 갤러리, 숫자로 된 약속.

  3. 개발

    이중 검증, CAPTCHA 없는 스팸 방지, 알림.

  4. 로컬 SEO

    구별 페이지, 직종 마크업.

질문

자주 받는 질문.

이탈률이 정보의 질보다 빠르게 늘어나기 때문에 그렇지 않습니다. 여섯 개 필드면 효율적인 회신 전화를 위한 정보로 충분합니다. 열 개가 되면, 30초 통화로 얻을 수 있는 세부 정보 두 개를 위해 문의의 3분의 1을 잃게 됩니다.

도시 이름만 바꿔 넣는다면 그렇습니다. 각 페이지에는 서로 다른 동네, 건물 유형, 시공 사례가 담겨 있습니다. 그런 작업 없이 만들 바에는 잘 만든 페이지 하나가 낫습니다.

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

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

공유