Au P'tit Zinc
사진이 중심인 사이트에서 성능 95점, 접근성 100점: 그것이 과제였습니다.
- 연도
- 2026
- 제작 기간
- 3주
- 기술 스택
- Next.js · React · Tailwind · Vercel
- 디자인
- 개발
- 로컬 SEO
- 사진 디렉션
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.
- Lighthouse 성능
- 95/100
- Lighthouse 접근성
- 100/100
- Lighthouse SEO
- 100/100
- 모바일 상시 행동 버튼
- 3
해결해야 했던 과제.
배경
Au P'tit Zinc는 1992년부터 리옹 5구 피에르시즈 강변(quai Pierre-Scize)에서 영업해 온 비스트로입니다. 요리만큼이나 늦은 밤의 분위기로 이름난 동네 명소입니다.
제약
이 가게는 분위기로, 즉 사진으로 팔립니다. 따뜻한 조명, 바 카운터, 손님으로 가득 찬 홀. 그런데 사진 중심의 레스토랑 사이트는 거의 언제나 느리고, 방문의 절반은 저녁 7시 30분, 밖에서 휴대폰으로 주소를 찾고 예약하려는 사람들입니다.
해법
몰입감과 속도를 함께 잡았습니다. 첫 화면은 넓은 이미지 한 장을 우선 로드하고, 나머지는 모두 지연 로드합니다. 실제로 필요한 세 가지 행동, 즉 예약, 전화, 길찾기는 페이지 어디에서든 한 번의 동작으로 할 수 있습니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
따뜻한 다크 테마
차콜 배경, 구리색 포인트, 호박빛이 도는 사진. 여기서 어두운 테마는 유행이 아닙니다. 사람들이 가게에 갈지 결정하는 시간대의 조명을 그대로 재현합니다.
늘 손 닿는 곳에 있는 세 가지 행동
예약, 전화, 길찾기. 모바일에서는 고정 액션 바가 스크롤 내내 이 행동들을 붙잡아 둡니다. 방문자의 80%가 하러 오는 일은 이것뿐입니다.
함정 없는 캐러셀
자동 넘김은 기본적으로 꺼져 있고, 키보드 조작, 마우스를 올리면 일시 정지, 사용자가 동작 줄이기를 설정하면 완전 정지합니다. 혼자 넘어가는 캐러셀은 웹에서 가장 보편적으로 미움받는 구성 요소입니다.
프로젝트 색상 팔레트
차콜
#171412
배경
코퍼
#B4763A
강조, 행동 유도
아이보리
#F3EDE4
텍스트
보틀 그린
#2E4034
보조 섹션
타이포그래피 체계
제목용 서체
Playfair Display
본문용 서체
Inter 400
가게 이름과 제목에는 대비가 강한 세리프를 써서 비스트로의 분위기를 살렸고, 1초 만에 읽혀야 하는 메뉴에는 중립적인 산세리프를 썼습니다.
보이지 않는 곳의 기술.
- Next.js
- React
- Tailwind
- Vercel
우선 로드 이미지는 단 하나
첫 화면 이미지는 미리 로드하고 속성으로 크기를 지정하며, 나머지는 모두 지연 로드합니다. 사진 사이트에서 성능 95점을 가능하게 한 비결입니다.
최신 포맷과 알맞은 크기
모든 사진을 여러 너비로 준비해 srcset으로 제공합니다. 휴대폰이 데스크톱용 이미지를 내려받지 않습니다. 레스토랑 사이트에서 가장 흔한 낭비의 원인입니다.
외부 예약 시스템, 하지만 지연 로드
외부 업체의 예약 모듈은 수백 킬로바이트에 달합니다. 페이지를 열 때가 아니라 “예약” 버튼을 눌렀을 때만 로드합니다.
사이트가 검색되는 방식.
근거리 검색어
“리옹 5구 비스트로”, “피에르시즈 강변 레스토랑”, “비외 리옹(Vieux Lyon) 저녁 맛집”. 즉시 결정하는 검색어이며, 흔히 레스토랑에서 1킬로미터도 안 되는 곳에서 입력됩니다.
완전한 Restaurant 마크업
주소, 좌표, 영업시간, 가격대, 요리 종류, 메뉴 링크를 담은 Restaurant JSON-LD. Google이 로컬 패널에 가져다 쓰는 것이 바로 이 블록입니다.
Google 비즈니스 프로필과의 일관성
상호, 주소, 전화번호를 사이트와 비즈니스 프로필에서 한 글자까지 똑같이 맞췄습니다. 문장 부호 하나의 차이도 로컬 SEO를 약하게 만듭니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
어두운 배경에서 100/100
다크 테마의 함정은 차콜 위의 회색 텍스트입니다. 모든 색 조합을 4.5:1 이상으로 끌어올렸고, 사진 위의 텍스트에는 어떤 이미지에서도 기준을 지킬 만큼 짙은 반투명 막을 깔았습니다.
납품한 결과물.
- 홈
- 메뉴
- 공간
- 예약
- 오시는 길·영업시간
- 문의
프로젝트 진행 과정.
사진 디렉션
선별과 보정: 사이트의 가치는 이미지의 가치만큼입니다.
디자인
다크 테마, 액션 바, 절제된 캐러셀.
개발
우선 로드 이미지, srcset, 지연 로드 예약 모듈.
로컬 SEO
Restaurant 마크업, 비즈니스 프로필과의 일관성.
