← 목록으로

스크롤만으로 군침 도는 추억 소환! Rasa Kenangan 랜딩 페이지, 바닐라JS로 Awwwards 급 경험 선사하기

2026. 8. 10.

스크롤만으로 군침 도는 추억 소환! Rasa Kenangan 랜딩 페이지, 바닐라JS로 Awwwards 급 경험 선사하기

10년 차 IT 실무자이자 테크 블로거로서, 가끔은 프레임워크의 편리함을 잠시 내려놓고 순수한 웹 기술의 힘을 느껴보고 싶을 때가 있습니다. 이번에 제가 소개할 프로젝트, 'Rasa Kenangan' 랜딩 페이지는 바로 그런 갈증에서 시작되었습니다. 인도네시아 가정식 레스토랑을 위한 가상의 랜딩 페이지를 오로지 바닐라 HTML, CSS, JavaScript만으로 구현하며, 프레임워크나 백엔드 의존성 없이 100% 정적인 페이지로 Cloudflare Pages에 배포했습니다.

"추억은 천천히 요리됩니다."

라이브 데모: {% embed https://rasa-kenangan.pages.dev %}

제가 만든 것

Rasa Kenangan은 '기억의 맛'이라는 의미를 가진 이름 그대로, 인도네시아 족자카르타(Yogyakarta)에 위치한 가상의 고급 가정식 레스토랑입니다. 'resep warisan', 즉 대대로 내려오는 유산 레시피를 현대적인 우아함과 함께 선보이는 것이 컨셉이죠.

'집밥(masakan rumahan)' 테마를 선택한 건, 인도네시아의 가정식이 가진 깊은 정서적 울림 때문입니다. 어디에 있든 당신을 고향처럼 편안하게 만들어주는 음식, 바로 그것이죠. "Masak pelan, saji hangat, ingat lagi" (천천히 요리하고, 따뜻하게 대접하며, 다시 기억하라)라는 태그라인이 이 본질을 완벽하게 포착하고 있습니다.

리디자인 챌린지

기존 랜딩 페이지는 평범함 그 자체였습니다. 전형적인 히어로 섹션에 3단 피처 그리드, 그리고 CTA 버튼이 전부였죠. 애니메이션도, 개성도, 특별함도 찾아볼 수 없었습니다. 저는 이 페이지를 몰입형 스크롤 내러티브로 완전히 탈바꿈시키기로 결심했습니다. BALANS KITCHEN, CAÍN, Mister Pio 같은 Awwwards 수상작 레스토랑 사이트들에서 영감을 얻었죠. 솔직히 저도 Awwwards 사이트들을 보면서 '대체 저런 건 어떻게 만들지?' 하는 궁금증을 많이 가졌습니다. 막상 파고들어 보니 마냥 어렵기만 한 건 아니더라고요.

무엇이 특별할까

레이아웃 (전형적인 히어로 → 3단 → CTA가 아닙니다):

  • 시네마틱 히어로: 전체 뷰포트를 채우는 패럴랙스 배경과 키네틱 타이포그래피(Kinetic Typography)를 통해 시선을 사로잡습니다.
  • 고정 스크롤 스토리: 이미지는 왼쪽에 고정된 채, 내러티브 텍스트만 오른쪽에 스크롤되는 방식으로 몰입감을 더했습니다.
  • 가로 스크롤 메뉴: 드래그 가능한 트랙 안에 6개의 요리 카드를 배치하고, 도트 내비게이션으로 편리하게 이동할 수 있습니다.
  • 분할 화면 예약 섹션: 왼쪽에 분위기 있는 이미지를, 오른쪽에 예약 폼을 배치하여 시각적인 균형을 맞췄습니다.

애니메이션:

  • 히어로 제목에 3D rotateX 효과를 준 단어 단위 키네틱 타이포그래피 연출.
  • 히어로 배경, 스토리 이미지, 예약 이미지에 적용된 패럴랙스 스크롤링 (모두 GPU 합성 처리).
  • IntersectionObserver 기반의 스크롤 애니메이션 (형제 요소 지연 효과 포함).
  • CSS 키프레임 애니메이션으로 구현된 김 모락모락 효과.
  • 섹션 사이를 연결하는 트레이서 마퀴(Tracer marquee) 효과.
  • 스냅 포인트와 도트 인디케이터가 적용된 가로 메뉴.

디자인 시스템:

  • 팔레트: 따뜻한 앰버 (oklch(72% 0.105 62)), 짙은 차콜 (oklch(22% 0.018 60)), 크리미 화이트 (oklch(96% 0.012 85)).
  • 폰트: Fraunces (디스플레이 세리프), Manrope (본문), Space Grotesk (라벨).
  • 모든 색상은 CSS 커스텀 프로퍼티 사용: 하드코딩된 값은 단 하나도 없습니다.
  • oklch 색 공간 활용: 현대적이고 인지적으로 균일한 색상 공간으로, 일관된 디자인 톤을 유지합니다. 솔직히 예전에는 HSL이나 HEX로도 충분하다고 생각했는데, oklch를 써보니 색상 팔레트 관리의 섬세함이 한 차원 달라지는 걸 느꼈습니다.

데모

🔗 라이브: {% embed https://rasa-kenangan.pages.dev %}

페이지의 주요 특징은 다음과 같습니다.

  • 브랜드 마크와 진행 바가 있는 로딩 화면.
  • 패럴랙스 배경이 적용된 전체 뷰포트 히어로 섹션.
  • 고정 스크롤 스토리 섹션.
  • 6가지 요리를 담은 가로 스크롤 메뉴.
  • Cloudflare Turnstile이 적용된 분할 화면 예약 폼.
  • 반응형 디자인 (380px부터 1920px 이상까지).
  • prefers-reduced-motion 미디어 쿼리 존중.
  • Lighthouse 스코어: 100/100/100/100 (성능, 접근성, 모범 사례, SEO). 실무에서 복잡한 SPA를 만들다 보면 100/100/100/100을 찍는 게 얼마나 어려운 일인지 잘 아실 겁니다.

개발 여정

리서치 단계

Awwwards 수상 레스토랑 웹사이트들을 분석하며 독특한 패턴들을 찾아냈습니다.

  • BALANS KITCHEN: Clip-path 슬라이더, 고정 레이아웃, 패럴랙스가 적용된 가로 스크롤.
  • CAÍN: 따뜻한 시골 불/전통 미학, 대담한 패럴랙스 디자인.
  • Mister Pio: 패럴랙스 컬럼, 애니메이션 푸터, 키홀(keyhole) 이미지 공개 효과.
  • TRIPLETTA PIZZA: 무한 스크롤, 가로 레이아웃.
  • Zur Linde Rotkreuz: GSAP + SplitText, 스크롤 기반 미세 인터랙션.

핵심 인사이트는 이겁니다. 최고의 레스토랑 사이트들은 전형적인 3단 그리드 패턴을 따르지 않는다는 것. 대신, 몰입감 있는 스크롤 기반 내러티브를 사용하여 사용자들을 경험 속으로 끌어들입니다.

디자인 결정

"몰입형 스크롤 내러티브" 컨셉을 적용하기 위해 레이아웃을 완전히 뜯어고쳤습니다.

  1. 히어로: 전체 뷰포트를 차지하는 패럴랙스 배경 레이어와 키네틱 타이포그래피. "Kenangan dimasak pelan-pelan." 이라는 제목은 미묘한 3D 회전 효과와 함께 단어별로 드러납니다.
  2. 스토리: 고정 스크롤 내러티브 — 부엌 이미지는 고정된 채 스토리를 읽을 수 있습니다. 이미지와 텍스트가 함께 작동하여 시네마틱한 느낌을 줍니다.
  3. 메뉴: 3단 그리드 대신 가로 스크롤을 채택했습니다. 이는 메뉴를 직접 넘겨보는 듯한 '촉각적'인 느낌을 줍니다. 도트 인디케이터와 이전/다음 버튼으로 편리한 탐색을 제공합니다.
  4. 예약: 분할 화면 레이아웃으로, 왼쪽에 분위기 있는 이미지를, 오른쪽에 예약 폼을 배치했습니다. 이미지는 깊이감을 위해 패럴랙스 스크롤링 효과가 적용되었습니다.

기술적 하이라이트

프레임워크는 없습니다. 순수 바닐라로 구현했습니다.

  • IntersectionObserver를 활용한 스크롤 애니메이션 (가시성 판단을 위해 스크롤 이벤트 핸들러를 사용하지 않았습니다).
  • 모든 패럴랙스 효과에 requestAnimationFrame 스로틀링 적용.
  • 가로 메뉴를 위한 CSS scroll-snap.
  • 전체 디자인 시스템을 위한 CSS 커스텀 프로퍼티.
  • GPU 합성을 위한 will-change: transform 및 translate3d().
  • prefers-reduced-motion 완벽 존중 — 모든 애니메이션 비활성화, 모든 트랜지션 즉시 전환. 제가 처음 실무에 뛰어들었을 땐 jQuery가 대세였지만, 요즘 바닐라JS의 재발견은 정말 흥미롭습니다. 불필요한 의존성 없이 핵심에 집중하는 개발은 언제나 만족도가 높죠.

접근성:

  • Skip link, 시맨틱 HTML5 랜드마크, 섹션별 aria-labelledby.
  • 메뉴 도트를 위한 role="tablist", 폼 에러를 위한 role="alert".
  • 모든 이미지에 alt 텍스트, 장식용 요소는 aria-hidden으로 마크.
  • 모든 인터랙티브 요소는 키보드로 접근 가능.
  • 색상 대비 검증: 앰버 on 차콜 ≥ 4.5:1.
  • Lighthouse 접근성: 100점.

성능:

  • 히어로 이미지: AVIF 형식, fetchpriority="high", 명시적인 width/height.
  • 그 외 모든 이미지: loading="lazy"로 지연 로딩.
  • 폰트: Google Fonts에 preconnect, display=swap.
  • 단일 CSS 파일 (~767줄), 단일 JS 파일 (~249줄).
  • 외부 JS 의존성 없음.
  • Lighthouse 성능: 100점.

"홀마크(Hallmark)" 규율:

  • 6가지 축 기반의 자체 비판적 검토.
  • 진실성 있는 카피 문구만 사용 — 가짜 지표나 허위 리뷰 배제.
  • 정의된 디자인 토큰만 사용 — 임의의 값 배제.

가장 자랑스러운 부분

  1. 고정 스크롤 내러티브 — 이 부분을 제대로 구현하는 게 가장 어려웠습니다. 이미지가 완벽하게 고정된 채 텍스트가 스크롤되어야 했고, 이미지의 패럴랙스 효과는 과장되지 않고 자연스럽게 느껴져야 했죠.
  2. 개인적으로 가장 뿌듯했던 순간 중 하나는, 구현 직후 첫 Lighthouse 감사에서 100/100/100/100이라는 완벽한 점수를 받았을 때입니다. 접근성과 성능, 모범 사례까지 모두 놓치지 않으려 했던 노력이 결실을 맺은 순간이었죠.
  3. 가로 스크롤 메뉴 — 정적인 그리드와 달리 촉각적이고 물리적인 느낌을 줍니다. 스크롤에 따라 도트 내비게이션이 동적으로 업데이트되고, 스냅 포인트 덕분에 네이티브 앱 같은 느낌을 줍니다.
  4. 제로 의존성 — React, Tailwind, GSAP 같은 라이브러리 없이 순수 HTML, CSS, JavaScript로만 만들었습니다. 전체 디자인 시스템은 CSS 커스텀 프로퍼티 안에 살아 숨 쉽니다.

배운 점

  • Awwwards 리서치는 통한다 — 실제로 수상한 사이트들을 연구하며 추상적인 디자인 원칙이 아닌, 구현 가능한 구체적인 패턴들을 얻을 수 있었습니다.
  • oklch는 그만한 가치가 있다 — 인지적으로 균일한 색 공간은 HSL보다 팔레트 결정을 훨씬 예측 가능하게 만들어줍니다.
  • 고정 스크롤 내러티브는 어렵다 — 타이밍과 느낌을 제대로 맞추려면 스크롤 수학에 대한 세심한 조정이 필요합니다.
  • 모바일에서의 가로 스크롤은 특별한 주의가 필요하다 — 터치 스크롤링, 스냅 포인트, 오버플로우 처리 등 모든 부분에 신경 써야 합니다.

다음 계획

  • 서버 측 폼 처리 (현재는 Turnstile 검증만 가능한 데모용).
  • 이미지 최적화 파이프라인 구축 (현재 Unsplash CDN 원본 사용).
  • 오프라인 지원을 위한 서비스 워커 도입.
  • 메뉴 아이템 관리를 위한 CMS 통합.

기술 스택

  • HTML5 — 시맨틱 마크업, 랜드마크, ARIA
  • CSS3 — 커스텀 프로퍼티, oklch, scroll-snap, clip-path, 애니메이션
  • JavaScript (ES6+) — IntersectionObserver, requestAnimationFrame, 트랜스파일링 없음
  • Cloudflare Pages — 글로벌 CDN을 갖춘 정적 호스팅
  • Cloudflare Turnstile — CAPTCHA 보호

라이선스

MIT

2026년 8월, 프론트엔드 챌린지: 컴포트 푸드 에디션을 위해 제작되었습니다.

원문: https://dev.to/rexreus/rasa-kenangan-immersive-scroll-narrative-landing-page-1dm0 수집일: 2026-08-10 00:45:48