Grand Café du Commerce
프레임워크도, CMS도 없이: 동네 브라스리에는 공장이 필요 없습니다.
- 연도
- 2026
- 제작 기간
- 2주
- 기술 스택
- HTML/CSS · JavaScript · Google Analytics · Vercel
- 디자인
- 개발
- 로컬 SEO
- 방문자 분석
Kayzen Web이 Vercel 주소에 공개한 데모 버전입니다. 정식 도메인은 고객 소유입니다.
- Lighthouse 성능
- 93/100
- 외부 의존성
- 0
- HTML 외 추가 요청 수
- 2
- Lighthouse SEO
- 100/100
해결해야 했던 과제.
배경
Le Grand Café du Commerce는 리옹 9구 베즈(Vaise)의 브라스리입니다. 동네 손님, 점심 단골, 저녁 테이블 손님이 찾습니다.
제약
이전 사이트는 반응형도 아니고 영업시간도 갱신되지 않은 단일 페이지였습니다. 실제 필요는 세 줄로 요약됐습니다. 메뉴, 영업시간, 예약 수단. 그 밖의 모든 것은 효과 없는 지출이었을 것입니다.
해법
HTML, CSS, 약간의 JavaScript. 프레임워크도, CMS도, 데이터베이스도 없습니다. 결과물은 즉시 로드되고, 보안 업데이트가 필요 없으며, 호스팅 비용은 0유로입니다. 메뉴는 파일 하나에서 평문으로 수정합니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
파인다이닝이 아닌 브라스리의 톤
힘 있는 타이포그래피, 버건디와 크림의 팔레트, 소박한 요리 사진. 너무 세련된 디자인은 매출의 첫째 축인 점심 손님을 쫓아냈을 것입니다.
첫 화면에 영업시간
일곱 줄짜리 표 대신 실시간으로 계산한 “22시까지 영업”. 가장 많이 받는 질문에는 해석이 필요한 문서가 아니라 답이 필요했습니다.
메뉴는 PDF가 아니라 HTML로
PDF 메뉴는 휴대폰에서 읽기 어렵고, 색인되지 않으며, 스크린 리더가 읽어 주지 않습니다. 메뉴는 가격까지 담은 구조화된 HTML 페이지입니다.
프로젝트 색상 팔레트
버건디
#6E2436
아이덴티티, 제목
크림
#F6F0E4
배경
잉크
#211E1C
텍스트
황동
#B08A4A
구분선과 디테일
타이포그래피 체계
제목용 서체
Libre Baskerville
본문용 서체
Source Sans 3
브라스리 간판을 닮은 클래식 세리프는 제목에만 쓰고, 본문은 화면용 산세리프로 유지했습니다.
보이지 않는 곳의 기술.
- HTML/CSS
- JavaScript
- Google Analytics
- Vercel
의존성 제로
업데이트할 라이브러리가 없으니 6개월 뒤 패치해야 할 취약점도 없습니다. 매달 관리되지 않을 레스토랑 사이트에 가장 책임감 있는 선택입니다.
CSS 파일 하나, JS 파일 하나
HTML 외에 요청은 두 개뿐입니다. 프레임워크 기반 사이트가 번들을 해석하기도 전에 이 사이트는 이미 완성되어 있습니다.
동의에 기반한 방문자 분석
Google Analytics는 명시적으로 동의한 뒤에만 로드됩니다. 동의가 없으면 외부 스크립트는 하나도 호출되지 않습니다. 편의상의 선택이 아니라 CNIL(프랑스 개인정보보호위원회)의 규칙입니다.
사이트가 검색되는 방식.
“베즈 브라스리”, “리옹 9구 레스토랑”
로컬 SEO는 도시보다 동네를 먼저 겨냥합니다. 경쟁은 10분의 1, 의도는 열 배 강합니다.
구조화된 영업시간
JSON-LD의 openingHoursSpecification. Google에 표시되는 “영업 중 · 22시에 영업 종료”의 원천이며, 확인 전화를 줄여 줍니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
추가 작업 없이 97/100
단순한 사이트는 접근성을 확보하기도 쉽습니다. 시맨틱 HTML, 검증된 명도 대비, 기본 키보드 내비게이션. 나중에 고칠 것이 없습니다.
납품한 결과물.
- 홈
- 메뉴
- 예약
- 오시는 길·영업시간
- 문의
프로젝트 진행 과정.
범위 설정
세 가지 필요를 확인하고 나머지는 모두 제외.
디자인
브라스리의 톤, 동적 영업시간, HTML 메뉴.
개발
의존성 없는 HTML/CSS/JS, 분석 전 동의.
