Les Halles de Lyon Paul Bocuse
60개 상점, 하나의 장소: 사이트는 쇼윈도이자 안내 책자여야 했습니다.
- 연도
- 2026
- 제작 기간
- 5주
- 기술 스택
- Next.js · React · Tailwind · Vercel
- 정보 구조 설계
- 디자인
- 개발
- SEO
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.
- 개 상점 등록
- 60
- Lighthouse 접근성
- 97/100
- Lighthouse 성능목표치 90에 못 미칩니다. 사진이 포함된 60개 상점의 디렉터리는 본질적으로 무겁습니다. 지연 로드와 더 가벼운 포맷으로 용량을 줄이는 것이 다음 개선의 최우선 과제입니다.
- 76/100
해결해야 했던 과제.
배경
리옹 폴 보퀴즈 시장(Halles de Lyon Paul Bocuse)에는 정육점, 치즈 가게, 굴·해산물 가게, 제과점 등 60여 곳의 상점이 모여 있으며, 그중 여럿이 프랑스 국가 명장(Meilleurs Ouvriers de France, MOF) 칭호를 보유하고 있습니다. Food & Wine이 선정한 세계 최고의 시장 3위이기도 합니다.
제약
여러 상점이 모인 장소의 사이트는 양쪽으로 끌려다닙니다. 장소 이야기만 하면 특정 상점을 찾는 사람에게 도움이 안 되고, 상점 목록에 그치면 찾아오고 싶게 만드는 모든 것을 잃습니다. 처음 방문하는 사람과 “시장의 그 치즈 가게”를 찾는 사람 모두를 도와야 했습니다.
해법
두 겹의 층을 포갰습니다. 방문 욕구를 일으키는 이야기의 층(역사, 사진, 분위기). 유용함을 주는 디렉터리의 층(업종별로 필터링할 수 있고 위치와 영업시간이 담긴 60개의 상점 정보). 앞의 층이 사람을 데려오고, 뒤의 층이 붙잡아 둡니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
상점마다 하나의 정보 카드
업종, 대표 상품, 시장 안의 위치, 영업시간. 거의 언제나 빠져 있는 정보이며, 그 때문에 방문자들이 통로를 헤맵니다.
업종별 필터
정육, 치즈, 굴·해산물, 청과, 와인, 델리. 방문자는 이름이 아니라 필요를 찾습니다. 필터는 사람들이 시장을 생각하는 방식을 따릅니다.
화면을 채우되 절제된 사진
유산은 보여 줘야 합니다. 이미지는 크고 정성스럽지만 점진적으로 로드되어, 갤러리가 찾던 치즈 가게 정보를 느리게 만들지 않습니다.
프로젝트 색상 팔레트
마켓 레드
#9B2C2C
아이덴티티
타일 화이트
#FAFAF8
배경
슬레이트
#2B2E33
텍스트
황동
#B99247
구분선, MOF 메달
타이포그래피 체계
제목용 서체
Playfair Display
본문용 서체
Inter 400
유산의 톤에는 세리프가, 디렉터리에는 촘촘한 산세리프가 필요합니다. 둘은 영역별로 공존하며, 한 블록 안에서 섞이지 않습니다.
보이지 않는 곳의 기술.
- Next.js
- React
- Tailwind
- Vercel
구조화된 데이터로 만든 디렉터리
60개 상점은 타입이 지정된 데이터셋 안에 있으며, 목록, 필터, 지도, 마크업의 단일 원천입니다. 영업시간 변경은 한 곳에서만 하면 됩니다.
성능 76점: 감수한 선택
우리 기준에 못 미치는 점수이며, 숨기기보다 기록으로 남깁니다. 유산을 담은 갤러리가 무겁기 때문입니다. AVIF 전환과 갤러리의 더 세밀한 분할이 첫 번째 최적화 과제로 정해져 있습니다.
사이트가 검색되는 방식.
업종별 페이지
“폴 보퀴즈 시장 치즈 가게”, “리옹 굴 가게”. 업종마다 모아 보기 페이지가 있어, 홈이 노릴 수 없는 검색어를 잡습니다.
장소와 상점의 마크업
장소에는 Place 노드를, 각 상점에는 그에 연결된 LocalBusiness 노드를 달았습니다. 검색 엔진에도 AI 어시스턴트에도 계층 구조가 명확합니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
필터와 결과의 음성 안내
필터를 바꾸면 라이브 영역의 결과 개수가 갱신됩니다. 이것이 없으면 시각장애 사용자는 목록이 바뀌었다는 사실을 알 수 없습니다.
납품한 결과물.
- 홈 — 장소 소개
- 60개 상점 — 필터형 디렉터리
- 업종별 페이지
- 역사와 유산
- 오시는 길, 영업시간, 안내도
프로젝트 진행 과정.
현황 조사
60개 상점, 업종, 위치, 영업시간.
구조 설계
이야기 층과 디렉터리 층, 업종별 필터.
디자인
유산의 톤, 갤러리, 상점 정보 카드.
SEO
업종별 페이지, Place 및 LocalBusiness 마크업.
