Net Rénovation
휴대폰을 위해 설계한 석고보드 시공 장인의 사이트. 고객이 거기에 있기 때문입니다.
- 연도
- 2026
- 제작 기간
- 2주
- 기술 스택
- React · Vite · Tailwind · Vercel
- 모바일 퍼스트 디자인
- 개발
- 로컬 SEO
- 카피라이팅
- 모바일 방문 비율
- 80%
- 기준 시안 너비
- 375px
- 성능 — 작업량 산정을 마친 진행 중 과제
- 59/100
해결해야 했던 과제.
배경
리옹의 석고보드 시공 장인입니다. 칸막이벽, 벽체 덧대기, 천장 마감, 실내 단열을 개인 고객과 리모델링 현장에 시공합니다.
제약
방문의 80% 이상이 휴대폰에서, 그것도 흔히 Google 지도 검색을 거쳐 낮 시간에 들어옵니다. 이전 사이트는 데스크톱용으로 만들어져 모바일에서는 쓸 수가 없었습니다. 양식은 화면 밖에 있고, 전화번호는 눌러지지 않았습니다.
해법
모든 것을 먼저 너비 375픽셀 화면에 맞춰 디자인한 뒤 넓혔습니다. 전화번호는 언제나 누를 수 있고, 양식은 한 화면에 들어가며, 시공 항목은 고객의 언어로 설명합니다. “BA13 석고보드 달대 천장”이 아니라 “천장 새로 하기”처럼요.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
375픽셀에서 설계
기준 시안은 데스크톱이 아니라 모바일입니다. 반대로 설계하면 모바일은 늘 품질이 떨어지는데, 방문자의 80%가 바로 그곳에 있습니다.
고객의 어휘
시공 항목은 고객이 표현하는 방식대로 이름 붙였습니다. 기술 용어도 있지만 두 번째 층위에 둡니다. 배제하지 않으면서 안심을 줍니다.
늘 닿을 수 있는 전화와 견적
화면 하단에 고정된 액션 바. 모바일에서 화면 아래쪽은 엄지손가락의 영역이며, 접근을 보장하는 유일한 위치입니다.
프로젝트 색상 팔레트
슬레이트 블루
#2C4A63
아이덴티티
오렌지
#D96D2B
행동 유도
플라스터 화이트
#F7F7F5
배경
잉크
#1E2226
텍스트
타이포그래피 체계
제목용 서체
Outfit 700
본문용 서체
Inter 400
서체 패밀리는 두 개면 충분합니다. 초기 콘텐츠에서 넘어온 세 번째 폰트는 최적화 계획에서 제거 대상으로 지정되어 있습니다.
보이지 않는 곳의 기술.
- React
- Vite
- Tailwind
- Vercel
인정하고 공개하는 성능 개선 과제
성능 59점. 우리 포트폴리오에서 가장 낮은 두 점수 중 하나로, 고객이 최적화 없이 제공한 시공 사례 갤러리와 추가 디스플레이 폰트 하나 때문입니다. 이미지 규격 통일과 세 번째 폰트 제거라는 계획이 세워져 있으며, 다음 작업 때 적용합니다. 공개된 점수를 숨겨서 사이트가 나아진 적은 한 번도 없기에 그대로 보여 드립니다.
관대한 양식
전화번호는 흔히 쓰는 모든 형식을 받아들이고 자동으로 정규화합니다. 점으로 구분해 적었다고 번호를 거부하는 것은 고객을 잃는 어리석은 방법입니다.
사이트가 검색되는 방식.
“리옹 석고보드 시공”과 인접 코뮌
실제로 서비스하는 지역마다 페이지를 두고, 지역별 고유한 시공 사례를 담았습니다.
Google 비즈니스 프로필과의 일관성
상호, 주소, 전화번호, 영업시간을 모바일 트래픽 대부분이 유입되는 비즈니스 프로필과 정확히 일치시켰습니다.
납품한 결과물.
- 홈
- 시공 항목
- 시공 사례
- 서비스 지역
- 견적
프로젝트 진행 과정.
모바일 우선
375px 시안, 액션 바, 한 화면 안의 양식.
콘텐츠
시공 항목을 고객의 언어로 다시 씀.
개발
관대한 양식, 로컬 SEO.
예정
이미지 규격 통일, 불필요한 폰트 제거.
