La Raffinerie
두 매장, 하나의 브랜드: 어느 쪽도 희석하지 않고 둘 다 담아내야 했습니다.
- 연도
- 2026
- 제작 기간
- 4주
- 기술 스택
- React · Vite · Tailwind · Framer Motion · Vercel
- 디자인
- 개발
- 다지점 로컬 SEO
- 카피라이팅
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.
- 개 매장, 하나의 도메인
- 2
- Lighthouse 성능
- 95/100
- Lighthouse 접근성
- 100/100
해결해야 했던 과제.
배경
La Raffinerie는 수제 맥주, 타파스, 칵테일을 내는 바로, 리옹에 삭스(Saxe, 리옹 3구)와 베즈(Vaise, 리옹 9구) 두 곳의 매장이 있습니다.
제약
매장이 두 곳이면 로컬 SEO의 전형적인 문제가 생깁니다. 사이트를 둘로 나누면 도메인 권위가 나뉘고, 하나로 합치면 동네 단위 검색어에서 보이지 않게 됩니다. 여기에 늘 바뀌는 맥주 메뉴와, 무엇을 골라야 할지 모르는 손님들까지 더해졌습니다.
해법
도메인은 하나, 매장마다 전용 페이지를 두고 각각 완전한 정보와 고유한 마크업을 갖췄습니다. 맥주 메뉴는 테이스팅 가이드가 되었습니다. 맥주마다 스타일, 쓴맛, 도수, 추천 타파스 페어링을 표시합니다. 나열하는 대신 추천합니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
목록이 아니라 가이드
스타일별·쓴맛별 필터, 맥주마다 추천 타파스 페어링. 마흔 가지 맥주 앞에서 망설이는 손님은 늘 마시던 것을 주문하거나, 아예 주문하지 않습니다.
매장마다 고유한 개성
공통의 그래픽 토대 위에 삭스점과 베즈점 각각의 사진, 분위기, 영업시간을 담았습니다. 쌍둥이 같은 두 페이지였다면 방문자도 Google도 분량 채우기로 받아들였을 것입니다.
질감을 살리는 모션
등장 애니메이션은 거품, 구리, 슬레이트의 질감을 강조합니다. 사용자가 동작 줄이기를 설정하면 완전히 사라집니다.
프로젝트 색상 팔레트
슬레이트
#22262B
기본 배경
코퍼
#C0763C
행동 유도, 강조
폼
#EFE6D4
텍스트, 밝은 표면
홉
#6C7A3F
스타일 태그
타이포그래피 체계
제목용 서체
Bebas Neue
본문용 서체
Inter 400
제목에는 수제 맥주 펍의 톤을 담은 콘덴스드 대문자 서체를 쓰고, 테이스팅 카드에는 가독성이 뛰어난 산세리프로 균형을 맞췄습니다.
보이지 않는 곳의 기술.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
메뉴는 HTML이 아니라 데이터로
맥주와 타파스는 타입이 지정된 데이터 파일에 있습니다. 새 메뉴를 추가할 때 마크업을 건드리거나 레이아웃을 깨뜨릴 위험이 없습니다.
절제된 애니메이션
Framer Motion은 실제로 애니메이션이 있는 페이지에서만 로드됩니다. 오시는 길이나 영업시간 같은 정보 페이지는 그 코드를 한 줄도 내려받지 않습니다.
사이트가 검색되는 방식.
두 개의 독립된 LocalBusiness
각 매장에 주소, 지리 좌표, 영업시간을 담은 고유한 노드가 있습니다. 두 주소를 한 블록에 넣으면 Google이 두 비즈니스 프로필을 올바르게 연결할 수 없습니다.
동네 단위 검색어
“리옹 바”가 아니라 “삭스 맥주 바”, “리옹 9구 베즈 바”. 동네 페이지는 브랜드 페이지가 노릴 수 없는 표현에서 이깁니다.
색인되는 테이스팅 콘텐츠
맥주 소개 페이지는 “리옹 쌉쌀한 IPA”, “앰버 맥주 타파스 페어링” 같은 실제 검색에 답하며, 주소만으로는 잡을 수 없는 탐색형 트래픽을 끌어옵니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
인터랙티브 필터가 있어도 100/100
필터는 눌림 상태를 알려 주는 네이티브 버튼이며, 변경할 때마다 결과 개수를 라이브 영역으로 안내합니다.
납품한 결과물.
- 홈
- 삭스점(리옹 3구) — 매장 정보
- 베즈점(리옹 9구) — 매장 정보
- 맥주 가이드
- 타파스와 칵테일
- 문의
프로젝트 진행 과정.
다지점 전략
도메인 하나 / 페이지 둘로 결정, 매장별 마크업.
테이스팅 콘텐츠
스타일, 쓴맛, 페어링: 메뉴가 가이드가 됨.
디자인
공통 토대, 매장별 개성.
개발
타입이 지정된 데이터, 필요할 때만 로드되는 애니메이션.
