매일 찾아오는 식사 시간마다 무엇을 먹을지 고민하는 과정은 생각보다 지루하고 번거로운 일입니다. 한 번에 너무 많은 선택지를 마주하면 결정 장애가 심해지기 때문에, 범주를 좁혀가며 최종 음식을 확정하는 방식이 효율적입니다. 이번 예제에서는 한식, 일식, 중식, 분식을 순차적으로 거쳐 최종 메뉴를 도출하는 웹 도우미를 구현합니다.
메뉴 선택 3단계 흐름과 인터페이스 설계
사용자가 혼란을 느끼지 않도록 화면의 컴포넌트를 단계별로 교체하는 인터페이스를 구성합니다. 카테고리 선택부터 세부 메뉴 확인까지의 흐름은 단순하면서도 직관적인 구조로 모바일에서도 쉽게 조작할 수 있습니다.
메뉴 선택 흐름 특징
- 주요 특징 목록입니다. 각 단계는 이전 선택에 따라 동적으로 변경되며 불필요한 새로고침 없이 부드럽게 화면이 전환됩니다. 브라우저 로컬 저장소를 활용하거나 가벼운 바닐라 자바스크립트로 구현되어 속도가 빠릅니다. 반응형 디자인으로 다양한 기기에서 사용할 수 있으며 개발 환경과 외부 라이브러리 없이 브라우저에서 즉시 실행 가능합니다. 소스 코드를 조합하여 나만의 메뉴판을 만들 수 있고 데이터와 인터페이스가 분리되어 유지보수가 용이합니다. CSS를 수정하여 자유롭게 디자인을 변경할 수 있으며 추가 카테고리를 손쉽게 확장할 수 있습니다. 모든 현대 브라우저에서 동일하게 작동합니다.
데이터 구조와 상태 관리 구현
음식 데이터는 자바스크립트 객체 형태로 관리하여 추후 카테고리를 추가하거나 음식을 수정할 때 유지보수가 편리하도록 구성합니다. 현재 진행 중인 단계와 선택된 값을 변수로 선언해 상태를 추적합니다.
app.jsJAVASCRIPT
const menuData = {
korean: ['김치찌개', '불고기', '된장찌개', '비빔밥'],
japanese: ['초밥', '라멘', '돈카츠', '우동'],
chinese: ['짜장면', '짬뽕', '탕수육', '볶음밥'],
snack: ['떡볶이', '김밥', '튀김', '순대']
};
let selectedCategory = null;TIP
객체 키 값을 영어 식별자로 지정하고 화면에 표시되는 라벨을 따로 매핑하면 다국어 지원이나 디자인 변경 시 유리합니다.
로컬 환경에서 실행하고 테스트하는 방법
순수 바닐라 자바스크립트와 HTML, CSS만 사용하므로 별도의 빌드 도구나 외부 라이브러리 설치 과정 없이 웹브라우저만 있으면 즉시 구동할 수 있습니다. 작업 디렉토리를 만들고 세 개의 파일을 같은 폴더에 저장하세요.
script.shBASH
mkdir menu-picker
cd menu-picker
touch index.html style.css app.js메뉴 항목을 더 추가하고 싶으면 어떻게 수정해야 하나요?
JavaScript 파일의 menuData 객체 내부에 원하는 카테고리의 배열 값을 추가하면 버튼과 선택지가 자동으로 확장됩니다.
모바일 환경에서도 버튼 배치가 정상적으로 작동하나요?
CSS 미디어 쿼리나 유연한 Flexbox 레이아웃을 적용해 스마트폰 화면에서도 터치하기 편한 크기로 자동 정렬됩니다.
완성 코드 예제
정리하며
단계별 선택 방식을 활용한 식사 메뉴 초이스 도우미 예제를 통해 DOM 조작과 상태 관리 기초를 살펴보았습니다.
본인만의 단골 식당 목록이나 싫어하는 음식 제외 기능을 덧붙여 실용성을 높여보시기 바랍니다.