250원짜리 뭄바이 소울푸드, 내 추억을 담은 영화 같은 랜딩 페이지를 만들다

안녕하세요, 10년 차 프런트엔드 개발자이자 테크 블로거 @sarvar_04입니다. 오늘은 제가 최근 Frontend Challenge - Comfort Food Edition, Perfect Landing 챌린지에 제출했던 프로젝트 이야기를 풀어볼까 합니다. 뭄바이의 '소울푸드' 바다파브(Vada Pav)를 주제로, 특별한 랜딩 페이지를 만들었거든요. 복잡한 프레임워크나 빌드 과정 없이, 순수 HTML, CSS, 그리고 진솔한 이야기에 집중했습니다.

무엇을 만들었나

매일 2천만 명의 허기를 달래주는 뭄바이의 대표적인 스트리트 푸드, '바다파브'를 소개하는 스크롤 기반의 시네마틱 랜딩 페이지를 만들었습니다. 이 음식은 고작 15루피, 우리 돈으로 환산하면 약 250원 정도 합니다.

대학 시절, RMD 신가드 공과대학을 나설 때면 늘 그랬습니다. 아무도 펴보지 않은 책으로 가득 찬 무거운 가방을 든 채, 우리는 곧장 와르제 바다파브 센터로 향했죠. 항상 주머니가 텅 비어 있었어요. 낭만적인 빈곤이 아니라, 버스비를 위해 동전을 세고 모자라면 걸어가는 진짜 가난이었습니다. 하지만 단돈 15루피만 있으면 매일 저녁 배를 든든히 채울 수 있었죠.

이제는 수백만 원을 벌지만, 그때 그 맛과 감동은 다시 느낄 수 없습니다. 이 페이지는 바로 그 와르제 바다파브 센터와, 그곳에 서 있던 모든 젊은이들을 위한 헌정입니다.

데모

🔗 라이브 데모 보러 가기

📦 소스 코드 확인하기

히어로 섹션 스크린샷

페이지 주요 구성:

섹션	기능
히어로	뭄바이 길거리 노점을 배경으로 ₹15 가격 타이포그래피가 전체 화면을 가득 채웁니다.
탄생 (1966)	다다르 역에서 시작된 아쇼크 바이댜의 첫 수레 이야기.
개인적인 이야기	이 페이지가 만들어진 이유, 저의 대학 시절 추억.
나만의 바다파브 만들기	5단계 인터랙티브 조립기 (탭 UI, 이미지 교체, 진행 바).
레시피	서빙 수량 조절기능이 있는 프리미엄 카드 레이아웃 (재료량 실시간 업데이트).
문화	바다파브를 즐기는 6가지 '숨겨진 규칙'.
마무리	"खाल्ला का?" - 마라티어로 "밥 먹었니?"라는 의미지만, 사실 "사랑해"라는 진심이 담겨 있습니다.

개발 여정

접근 방식

의도적인 프레임워크 배제. 이 프로젝트에서는 어떠한 프레임워크도 사용하지 않았습니다. 단일 index.html과 styles.css 파일로만 구성했어요. 리액트나 테일윈드 같은 도구는 전혀 없습니다. 빌드 과정도 없어, 파일을 열면 바로 작동하죠. 이런 제약 조건이 오히려 더 나은 디자인 결정을 이끌어낸다고 저는 생각합니다. 제가 실무에서 이 부분을 테스트해 봤을 때, 가끔은 복잡한 도구 없이 바닐라 환경에서 핵심 로직에 집중하는 것이 오히려 더 효율적이고 성능 좋은 결과물을 만들 때가 많았습니다.

어둡고 시네마틱한 분위기. 페이지 전체가 '뭄바이의 밤'이라는 하나의 무드를 유지합니다. 텅스텐 전구의 은은한 불빛, 짙은 네이비 배경에 사프란색 악센트가 더해져 섹션 간에 거슬리는 색상 변화 없이 자연스럽게 이어지도록 연출했습니다.

타이포그래피의 강력한 역할. 페이지에 들어서자마자 가장 먼저 눈에 띄는 것은 거대한 'Playfair Display' 폰트로 쓰인 "₹15"입니다. 복잡한 히어로 이미지 갤러리나 슬라이더 대신, 오직 가격만을 강조했어요. 바다파브의 본질은 바로 그 저렴한 가격에 담겨 있기 때문이죠.

기술적 하이라이트

네비게이션 페이드인: '₹15' 가격은 항상 우측 상단에 고정되어 있습니다. 반면 '탄생', '만들기', '레시피', '문화' 같은 링크들은 처음엔 보이지 않다가, 스크롤함에 따라 requestAnimationFrame과 완화된 보간법(eased interpolation)을 활용해 점진적으로 나타나도록 구현했습니다.
인터랙티브 조립기: ARIA 탭리스트 패턴을 적용하여 키보드 내비게이션을 지원합니다. 각 단계마다 이미지가 바뀌고 설명이 업데이트되며, 진행 바가 채워지죠. 총 다섯 단계로 구성되는데, 빵(Pav), 그린 처트니, 바다, 갈릭 처트니, 튀긴 고추 순서로 진행됩니다.
레시피 수량 조절기: 서빙 수를 1인분부터 8인분까지 변경하면, data-base 속성을 활용해 모든 재료의 양이 즉시 자동으로 재계산됩니다. 이 정도는 바닐라 자바스크립트로도 충분히 깔끔하게 구현할 수 있죠.
스크롤 리빌 효과: IntersectionObserver를 사용해 각 섹션이 뷰포트에 진입할 때 .reveal 애니메이션이 트리거되도록 만들었습니다. 성능 저하 없이 부드러운 사용자 경험을 제공하는 데 효과적입니다.

접근성

접근성은 프로젝트 시작부터 중요하게 고려했습니다.

시맨틱 HTML5 (<section>, <nav>, <article>) 구조 사용
조립기를 위한 role="tablist" 및 role="tab" ARIA 패턴 적용
키보드 내비게이션 완벽 지원 (단계별 화살표 키 이동)
동적 콘텐츠를 위한 aria-live="polite" 속성 활용
마라티어 텍스트를 위한 lang="mr" 설정
prefers-reduced-motion 미디어 쿼리를 통한 모든 애니메이션 비활성화 옵션 제공
WCAG AA 색상 대비 검증 완료

가장 자랑스러운 점

제가 가장 자랑스럽게 생각하는 부분은 바로 '감성적인 대비'입니다. "버스비를 위해 동전을 세던 시절"에서 "지금은 수백만 원을 버는 나"로 이어지는 그 간극 자체가 이 페이지의 핵심 스토리거든요. 디자인은 오직 그 순간을 위해 존재합니다.

그리고 또 하나, 전체 페이지의 용량이 HTML 32KB, CSS 27KB, 이미지 2.8MB에 불과하다는 점입니다. 어떤 의존성도, node_modules도, 빌드 과정도 없죠. 그저 파일 그 자체입니다. 이런 미니멀한 접근 방식이 오히려 메시지를 더욱 강렬하게 전달한다고 믿습니다.

사용된 기술 스택

HTML5 + CSS3 + Vanilla JS
Google Fonts (Playfair Display + Lora)
GitHub Pages를 통한 배포
총 페이지 용량: 약 3.2MB

라이선스: MIT

여러분은 어떤 '250원짜리 소울푸드'를 가지고 계신가요? 힘들었던 시절을 버티게 해준 바로 그 음식 말이죠. 댓글로 공유해주세요!

클라우드 아키텍처, 프런트엔드 실험, 그리고 'Building in Public'에 대한 더 많은 이야기를 원하시면 저를 팔로우해주세요! sarvarnadaf.com | LinkedIn | Dev.to | YouTube | AWS Builder Center

원문: https://dev.to/sarvar_04/i-built-a-15-landing-page-about-mumbais-soul-food-1l78 수집일: 2026-08-11 00:45:09