Brasserie Georges
1836년의 브라스리: 사이트는 실내 장식을 가리는 것이 아니라 그에 걸맞아야 했습니다.
- 연도
- 2026
- 제작 기간
- 콘셉트 — 3주
- 기술 스택
- Next.js · React · TypeScript · Tailwind · Vercel
- 아트 디렉션
- 디자인
- 개발
- SEO
- 카피라이팅
Kayzen Web이 데모 주소에 공개한 제안 시안입니다. 해당 브랜드는 이 프로젝트를 승인하지 않았으며 이 사이트는 브랜드의 사이트가 아닙니다.

유의 사항. 이 시안은 Kayzen Web이 자체적으로 제작하여 해당 브랜드에 제시한 것입니다. 브랜드의 승인을 받지 않았고, 브랜드 명의로 공개되지 않았으며, 브랜드에 어떠한 의무도 발생시키지 않습니다. 저희는 이를 고객 사례로 소개하지 않습니다.
- 개업 연도
- 1836
- 주년(2026년 기준)
- 190
- 장식 문양에 쓴 이미지SVG만 사용
- 0
해결해야 했던 과제.
배경
Brasserie Georges는 1836년에 문을 연 리옹 페라슈(Perrache)의 명소이자 프랑스에서 가장 큰 브라스리입니다. 아르데코 양식의 홀은 가이드북만큼이나 도시의 기억 속에 새겨져 있습니다.
제약
이 정도 위상의 장소는 판매하는 것이 아니라 연출하는 것입니다. 어려운 점은 6인치 휴대폰 화면에서 이 특별한 공간을 제대로 보여 주면서, 토요일 저녁 4인 예약, 연회 준비, 영업시간 확인 같은 실용적인 필요도 채우는 것입니다.
해법
공간의 장식을 사이트의 구조로 삼았습니다. 벽화와 철제 장식이 팔레트, 리듬, 구분 문양을 결정합니다. 각 섹션은 하나의 홀이고, 내비게이션은 거니는 산책입니다. 이 연출 아래에서도 예약, 대관, 오시는 길 같은 기능은 전면에 남아 있습니다.
모든 선택에는 이유가 있습니다.
공간에서 온 팔레트
왜건 그린, 황동, 가닛 레드, 크림. 모든 색을 홀의 벽화와 철제 장식에서 뽑았습니다. 새로 만든 색은 하나도 없습니다.
구분선이 된 아르데코 문양
구분선은 가벼운 SVG로 장식의 기하학 문양을 재현합니다. 이미지 한 장 추가하지 않고 리듬을 만듭니다.
190주년 특집
보도 자료처럼 다룬 전용 기념 섹션: 연도, 숫자, 아카이브. 공유되고 인용되는 콘텐츠입니다.
상품으로 다룬 대관
홀별 수용 인원, 배치 형태, 패키지. 이 규모의 브라스리에서 연회는 사업의 큰 축이며, 한 문단 이상의 대접을 받을 만했습니다.
프로젝트 색상 팔레트
왜건 그린
#1F3B33
배경, 목재 장식
황동
#C39A4E
구분선, 문양
가닛
#7A2233
강조
크림
#F4EDDF
텍스트, 밝은 표면
타이포그래피 체계
제목용 서체
Poiret One / Cormorant
본문용 서체
Inter 400
제목에는 아르데코풍 지오메트릭 디스플레이 서체를 쓰고, 본문 전체는 현대적인 산세리프로 균형을 잡았습니다. 그렇지 않으면 페이지를 읽을 수 없게 됩니다.
보이지 않는 곳의 기술.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
정적 렌더링과 점진적 이미지 로딩
연출 중심의 사이트는 본질적으로 무겁습니다. 홀 사진마다 여러 너비와 최신 포맷으로 제공하고, 스크롤에 따라 점진적으로 로드합니다.
문양은 이미지가 아니라 SVG로
아르데코 구분선은 수백 바이트에 불과하며, 어떤 해상도에서도 선명합니다.
사이트가 검색되는 방식.
유산 관련 검색어와 거래형 검색어
한쪽은 “Brasserie Georges Lyon”, “프랑스 최대 브라스리”, “페라슈 레스토랑”, 다른 쪽은 “리옹 브라스리 예약”, “리옹 연회”. 두 가지 의도, 두 가지 페이지군입니다.
Restaurant 및 Event 마크업
브라스리에는 완전한 Restaurant 노드를, 190주년에는 날짜가 들어간 Event 노드를 달았습니다. 날짜가 있는 이벤트는 검색 결과의 전용 영역에 노출됩니다.
납품한 결과물.
- 홈 — 홀
- 메뉴
- 예약
- 대관 — 수용 인원과 패키지
- 190주년 — 특집
- 1836년부터의 역사
- 오시는 길
프로젝트 진행 과정.
공간 조사
색과 문양 채집, 아카이브, 숫자.
아트 디렉션
채집한 팔레트, 벡터화한 문양, 섹션의 리듬.
디자인
홀을 거니는 동선, 기능은 전면에.
개발
정적 사이트, 점진적 이미지 로딩, SVG 문양.


