Damien Mugnier
97, 100, 100, 100: 사진이 많은 사이트에서 거둔 흠잡을 데 없는 Lighthouse 점수.
- 연도
- 2026
- 제작 기간
- 3주
- 기술 스택
- React · Vite · Tailwind · Vercel
- 디자인
- 개발
- 사진 디렉션
- 로컬 SEO
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.
- Lighthouse 성능
- 97/100
- 접근성, 권장사항, SEO
- 100/100
- 우선 로드 이미지, 나머지는 모두 지연 로드
- 1
해결해야 했던 과제.
배경
Damien Mugnier는 리옹 남서부 보발롱(Beauvallon)의 타일·석공 장인입니다. 대형 타일, 대리석, 천연석, 테라스 시공을 하며 고급 주택 고객을 상대합니다.
제약
고급 포지셔닝은 오직 이미지로만 증명됩니다. 잘 시공된 대형 타일은 글이 아니라 줄눈과 재단면에서 드러납니다. 그래서 사진이 매우 많은 사이트가 필요했고, 알다시피 그것은 느린 사이트의 공식입니다.
해법
성능을 마지막 최적화가 아니라 설계 제약 조건으로 다뤘습니다. 모든 사진을 퍼블리싱 이전에 보정하고 다시 크롭하여 여러 너비로 준비했습니다. 결과는 거의 전부가 시각 콘텐츠인 사이트에서 성능 97점, 나머지 세 항목은 만점입니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
자재가 곧 팔레트
스톤 베이지, 마블 그레이, 딥 블랙. 팔레트는 시공한 자재에서 뽑았습니다. 사이트와 시공 사례가 같은 언어로 말합니다.
큰 이미지, 타이트한 프레이밍
공간 전체를 담은 와이드 컷은 작업을 묻어 버립니다. 재단면, 줄눈, 이음새에 바짝 붙여 프레이밍했습니다. 시공 기사와 장인의 차이가 드러나는 곳입니다.
적은 글, 아주 잘 쓴 글
이런 포지셔닝에서 긴 글은 인상을 희석합니다. 각 페이지는 자재의 정확한 용어를 쓴 몇 개의 정밀한 문장으로 이루어져 있습니다.
프로젝트 색상 팔레트
스톤
#D9CFC0
배경, 표면
마블 그레이
#7F8489
구조
딥 블랙
#151719
텍스트, 대비
황동
#A3813F
디테일
타이포그래피 체계
제목용 서체
Cormorant Garamond 600
본문용 서체
Inter 400
포지셔닝에는 가늘고 키가 큰 세리프를, 정보에는 절제된 산세리프를 썼습니다. 타이포그래피는 사진을 돕고, 결코 그 반대가 아닙니다.
보이지 않는 곳의 기술.
- React
- Vite
- Tailwind
- Vercel
퍼블리싱 전에 정한 이미지 예산
처음부터 페이지당 최대 용량을 정하고, 이미지를 그에 맞춰 준비했습니다. 느린 것을 확인한 뒤에야 최적화하는 일반적인 방식과 정반대입니다.
일관된 점진적 로딩
우선 로드 이미지는 단 하나, 나머지는 모두 지연 로드하며, 레이아웃 이동이 전혀 없도록 크기를 명시했습니다.
애니메이션 라이브러리 없음
전환 효과는 순수 CSS입니다. 이미지가 모든 것을 짊어진 사이트에서 애니메이션용 JavaScript 100킬로바이트를 더했다면, 차이를 만드는 성능 점수를 잃었을 것입니다.
사이트가 검색되는 방식.
자재 검색어
“리옹 대형 타일 시공”, “리옹 남서부 대리석 욕실”, “천연석 테라스”. 고급 고객은 직종이 아니라 자재를 검색합니다.
설명과 이름을 갖춘 이미지
설명적인 대체 텍스트와 명확한 파일명. 마감 공사 업종에서 이미지 검색은 실제 유입 채널입니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
이미지 사이트에서 100/100
모든 사진에 비어 있거나 중복된 대체 텍스트 대신 자재, 규격, 공간을 담은 유용한 설명을 달았습니다. 시각 중심 사이트라고 해서 접근성이 떨어질 운명은 아닙니다.
납품한 결과물.
- 홈
- 대형 타일
- 대리석과 천연석
- 테라스
- 시공 사례
- 견적
프로젝트 진행 과정.
성능 예산
퍼블리싱 전에 페이지당 최대 용량 설정.
사진 디렉션
선별, 타이트한 프레이밍, 여러 너비로 준비.
디자인
자재 팔레트, 짧고 정확한 글.
개발
순수 CSS, 점진적 로딩, 크기 명시.
