우리 지금 — 햄버거 메뉴
- 볼 것
- 서랍에 구매하기▸·레시피·혜택▸·브랜드▸·매거진·문의하기. 구매하기를 펼쳐야 브랜드 이탤릭+한글 5줄. 상품 사진·가격·담기 없음.
- 가져올 것
- 여기가 레스토랑 메뉴판 한 장으로 바뀔 자리(은우 하단탭 「전체보기」와 같은 서랍).
Il menu · 2026-09-13
메뉴판 개편 벤치마크
미주 방향: 레스토랑 메뉴판처럼 가볍게 나누고, 메뉴판 안에서 바로 담기. 새 입구·새 페이지는 늘리지 않는다. 캡처는 전부 폰 390×664에서 실제로 열어 찍었다(도서관 재사용 제외). 이미지를 누르면 크게 보인다.
데모 안을 채점하는 기준
- 메뉴판을 열자마자 첫 화면(390×664)에 바질페스토가 보인다 — 안 보이면 탈락
- 상세로 떠나지 않고 메뉴판 안에서 두 종류 이상 담는다
- 사파리 실제 높이(664·740)에서 추가상품이 가려지지 않는다
- 담기 측정(GA4 add_to_cart · 메타 장바구니 · 터치 원장)이 끊기지 않는다
가장 큰 발견: 식품 브랜드·레스토랑·대형몰 메뉴 화면 어디에도 「메뉴 안에서 바로 담기」가 없다. 목록 담기는 컬리처럼 반쪽 바텀시트로 여는 곳만 있다 — 우리 상세 바텀시트 문법을 메뉴판 카드로 넓히는 게 차별점.
NOW
지금 우리
개편 전 기준선 — 라이브 캡처 · 4곳
우리 지금 — 구매하기 목록(cate 43)
- 볼 것
- 칩 4개(바질페스토·파스타·파네·올리브유 — 커피 칩 없음) 아래 2열 큰 사진. 첫 화면에 상품 2개, 첫 줄은 빵(룽고)이고 페스토는 두 번째. 담기 버튼 없음, 13개를 스크롤로.
- 가져올 것
- 첫 화면 원칙에 걸림(페스토가 첫 자리가 아님) · 커피 칩 없음 · 목록 담기 없음 — 개편 전 기준선.
우리 지금 — 상세 바텀시트(사파리 740·664)
- 볼 것
- 수량 카드 + ICE + 추가상품 3장 + 무료배송 막대·담기·N페이 고정 223px. 740px에서 세 번째(커피) 카드가 잘리고 664px에선 두 번째부터 잘림.
- 가져올 것
- 미주가 객단가 핵심이라 한 문법 — 메뉴판 카드가 이걸 따른다. 높이 80→90% 등으로 세 장 확보 안은 데모에서.
우리 지금 — 장바구니 추천 칸
- 볼 것
- 「함께 사면 더 맛있어요」 가로 카드, 한 화면 두 장 반. 순서 파스타 7 → 빵 2(8·9번째), 커피 없음. 30일 주문 포함률은 빵 19.1% > 파스타 8.7%.
- 가져올 것
- 순서가 데이터와 반대 — 빵·대표 파스타·커피를 앞으로(미주 OK 대기).
A
메뉴를 나누는 법
식품 브랜드 · 레스토랑 메뉴판 · 13곳
Brightland
- 볼 것
- 첫 화면은 계절 히어로 한 장과 「Shop Fall Flavors」 버튼. 메뉴를 열면 검색창, Shop All 버튼 아래로 줄마다 이름·한 줄 설명·작은 제품 사진이 붙는다(The Mediterranean Capsule 「100% Greek + Italian EVOO」, Best Sellers, Olive Oil, Vinegar).
- 가져올 것
- 메뉴 한 줄에 USP 한 줄과 썸네일을 같이 둔다. 첫 줄을 낱개가 아니라 조합 세트(Capsule)로 연다.
Eataly
- 볼 것
- 메뉴를 「무엇을 하러 왔나」로 나눈다 — 맨 위 파란 띠로 BOOK A TABLE을 강조하고, 그 아래 Shop our Products · Sale-a-brate · Classes & Events · Local Delivery · Stores. 글자 목록뿐이고 사진이 없다. 첫 진입 때 뉴스레터 가입 팝업이 화면을 다 가린다(닫고 찍음).
- 가져올 것
- 목적별 입구 분리와 한 가지만 색 띠로 강조하는 방식. 사진이 없어 끌림이 약한 점은 우리가 넘을 자리.
Fly By Jing
- 볼 것
- 메뉴가 초록 전면 화면에 굵은 대문자 다섯 줄 — SHOP · STORE LOCATOR · OUR STORY · MEMBERSHIP · RECIPES. 첫 화면은 한정 상품(어드벤트 캘린더) 히어로. 진입 몇 초 뒤 매운맛 고르기 할인 팝업.
- 가져올 것
- 항목 수를 다섯으로 줄이고 메뉴 화면 자체를 브랜드 색으로 칠한다. 레시피와 멤버십이 최상위.
Graza
- 볼 것
- 메뉴 Shop을 펼치면 맨 위에 사진 카드 두 장(「The Trio」 세트, 「Original」 Mayo), SHOP ALL PRODUCTS 버튼, 그 아래 Olive Oil · Mayo · Chips · Bundles 글자 목록.
- 가져올 것
- 대표 조합을 사진 카드로 먼저 보여주고 분류는 뒤에 둔다. Bundles(세트)를 독립 분류로 둔다.
Rao's Homemade
- 볼 것
- 파스타 소스 회사인데 최상위 메뉴가 PRODUCTS ▾ · RECIPES ▾ · GIFTS · ABOUT 넷뿐. 레시피와 선물이 상품과 같은 급.
- 가져올 것
- 「선물」을 상품 분류가 아니라 최상위 입구로 둔다. 레시피도 펼침 메뉴로 최상위.
Caffè Gilli
- 볼 것
- 파티세리·쇼콜라티에·비스트로·칵테일바를 한 페이지에서 장면으로 나눈다. 이번에 새로 찍지 않았고 도서관 캡처를 쓴다: ij-design-guide-cf/img/ref015-01.png
- 가져올 것
- 용도 구분을 목록이 아니라 한 화면 안의 장면 전환으로 보여주는 예. 메뉴보다는 카테고리 첫 화면 연출 참고.
Bestia (LA)
- 볼 것
- 가장 가볍고 촘촘하다. 코스 제목 ANTIPASTI는 20px·굵기 500으로 작고, 한 줄 = 굵은 이름(16px·700) + 같은 줄에 이어지는 설명(16px·400) + 설명 끝에 숫자만 붙은 가격(「oregano. 9」). 캡처 한 화면에 9개가 보인다. 가격 칸·기호가 따로 없다. 코스 사이에는 요리 사진 한 장(피자)을 크게 두고 다음 코스 제목.
- 가져올 것
- 줄마다 사진을 넣지 않고 코스 사이에 사진 한 장. 가격은 설명 끝 숫자로 약하게.
Rezdôra (NYC)
- 볼 것
- 메뉴 위에 Dinner·Lunch·Brunch·Dessert·Cocktail 테두리 버튼. 코스 두 단계 — ANTIPASTI 32px, 그 안 CASEIFICIO 24px(둘 다 굵기 400 대문자). 한 줄 = 대문자 이름 + 아래 설명 + 오른쪽 끝 숫자 가격 열. 한 화면 5개 안팎.
- 가져올 것
- 가격을 오른쪽 열로 빼 훑기 쉽다. 코스 안 소분류를 한 단계 작은 크기로 — 우리 메인(페스토 / 파스타) 나눔에 맞다.
Osteria Mozza (LA)
- 볼 것
- 가장 무겁다. 코스 제목 40px·굵기 700 대문자 산세리프가 화면 폭을 채운다. 한 줄 = 가운데 정렬 굵은 세리프 이름(20px) + 이탤릭 설명 + 다음 줄 이탤릭 숫자 가격. 한 화면 4개.
- 가져올 것
- 비교용 반대쪽 끝. 이탤릭 가격·설명 문법은 좋지만 코스 제목이 이렇게 크면 미주가 말한 「무거워진다」가 된다.
L’Artusi (NYC)
- 볼 것
- 코스 제목은 30px인데 굵기 300의 얇은 세리프라 크기에 비해 가볍다. 한 줄 = 대문자 세리프 이름(22.5px) + 얇은 설명(18px·300) + 아래 굵은 숫자 가격(18px·700). 가운데 정렬, 여백이 넓어 한 화면 3개.
- 가져올 것
- 코스 구분을 크기가 아니라 굵기(얇게)로 가볍게 만든다. 대신 여백이 넓어 줄 수가 적다.
Cecconi’s Mayfair (London)
- 볼 것
- 메뉴를 코스 접기로 연다 — 12px 자간 넓힌 대문자 코스명(HEALTHY & LIGHT · BAKERY · EGGS · SIDES · COLD PRESS JUICE…) 옆에 ＋만 있고 내용은 닫혀 있다. 첫 화면에 코스 8줄이 다 보인다. 위에 BREAKFAST · BRUNCH · COCKTAILS 탭.
- 가져올 것
- 지금 우리 .ij-acc 아코디언과 같은 뼈대를 파인다이닝이 쓴다. 첫 화면에 코스 전체가 보이고 무게가 없다 — 닫힘 상태 한 줄 = 작은 이탤릭 눈썹으로 바꾸기만 해도 된다.
Via Carota (NYC) — 피할 것
- 볼 것
- 종이 메뉴판을 그림 한 장으로 올렸다. 폰 폭에서는 글자가 읽히지 않는다.
- 가져올 것
- 피할 것. 메뉴판 느낌을 이미지로 흉내 내지 않는다 — 우리 메뉴판은 글자와 카드로.
Don Angie (NYC) — 피할 것
- 볼 것
- FOOD · DRINKS · WINE 탭 아래 「DOWNLOAD PDF」 버튼으로 메뉴를 넘긴다.
- 가져올 것
- 피할 것. 메뉴를 다른 파일로 내보내면 담기와 끊긴다.
B
목록에서 바로 담기
담기 버튼 위치와 누른 뒤 · 4곳
컬리 — 목록에서 바로 담기
- 볼 것
- 2열 격자, 사진 바로 밑에 사진 폭 그대로 「담기」 버튼. 누르면 페이지 이동 없이 반쪽 바텀시트 — 옵션 줄마다 가격 + −0+ 스테퍼, 아래 「첫 구매니까 하나만 사도 무료배송」, 맨 아래 장바구니 담기.
- 가져올 것
- 우리 상세 바텀시트와 같은 문법을 목록에서 연다 — 메뉴판 카드의 담기 버튼 → 지금 바텀시트 재사용이 검증된 길. 무료배송 한 줄을 시트 안에.
컬리 베스트 — 담기 버튼 위치
- 볼 것
- 가로 탭(베스트랭킹·간편식사·검색 TOP) + 칩 필터 아래 2열. 담기 버튼은 사진 아래 테두리 버튼으로 크게, 가격·할인율은 그 아래.
- 가져올 것
- 담기가 사진 다음 두 번째 줄이라 엄지가 바로 닿는다. 하단탭 4칸(홈·☰·검색·마이) 아이콘만.
오아시스마켓 — 사진 모서리 장바구니 아이콘
- 볼 것
- 사진 오른쪽 아래 어두운 원형 장바구니 아이콘. 비회원이 누르면 로그인 페이지로 넘어간다(9/13 실측).
- 가져올 것
- 피할 것 — 담기 누르자마자 로그인 벽. 우리는 비회원도 시트에서 바로 담게 유지. 아이콘만 있는 담기는 작아서 안 보인다.
Fishwife(식품 D2C) — 목록 버튼이 「Shop Now」
- 볼 것
- 2열 카드마다 큰 노란 버튼인데 담기가 아니라 Shop Now·Get Started — 누르면 상세로 간다. 첫 방문에 전면 할인 팝업.
- 가져올 것
- 식품 D2C도 목록에선 안 담게 한다 → 목록에서 바로 담기가 우리 차별점. 전면 팝업은 피할 것.
C
앱식 하단탭 쇼핑몰
탭 구성과 가운데 칸 · 5곳
29CM
- 볼 것
- 하단탭 홈 · 카테고리 · 검색 · 좋아요 · 마이페이지(글자 있음). 카테고리 화면은 위에 원형 바로가기 넷(라이브·기획전·오프라인·29특가), 왼쪽 세로 레일(전문관·의류·슈즈·가방…), 오른쪽 사진 타일과 BEST · FOR YOU · EXCLUSIVE 글자 타일. 첫 진입에 개인정보 유출 공지 팝업(닫고 찍음).
- 가져올 것
- 왼쪽 레일 + 오른쪽 사진 타일. 레일 위에 기획성 원형 바로가기를 따로 둔다.
컬리
- 볼 것
- 모바일 웹 하단탭은 홈 · 카테고리(☰) · 검색 · 마이 넷이고 글자 없이 아이콘만. 첫 화면은 마켓/뷰티 전환, 가로 탭(추천·베스트·세일…), 아이콘 격자. 카테고리 화면은 왼쪽 레일 맨 위에 「9월 원더컬리」「2026 추석」「더퍼플셀렉션」 같은 시즌·기획이 먼저 오고 그 아래 채소 · 과일·견과·쌀 · 수산… 식재료 분류. 첫 진입에 가입 쿠폰 팝업(닫고 찍음).
- 가져올 것
- 시즌·명절 입구를 식재료 분류와 같은 레일 맨 위에 섞는다 — 우리 「선물」「이번 달」 칸의 자리.
무신사
- 볼 것
- 하단탭 카테고리 · 스냅 · 홈 · 좋아요 · 마이 — 홈이 가운데. 카테고리 화면은 위 탭(카테고리·브랜드·팬스토어·서비스·오프라인), 왼쪽 레일, 오른쪽에 소분류마다 사진 아이콘 3열 격자와 신상품/전체 보기 버튼.
- 가져올 것
- 가운데 칸을 가장 중요한 입구로 쓴다(은우 하단탭 가운데 회원혜택과 같은 문법). 소분류를 글자 대신 사진 아이콘 격자로.
오늘의집
- 볼 것
- 모바일 웹에는 하단탭이 없다. 왼쪽 위 햄버거를 열면 서랍: 로그인/회원가입 버튼, 집구경 · 쇼핑 · 인테리어/생활 아코디언, 마이페이지. 첫 화면은 위 가로 탭과 아이콘 10개 격자. 진입하면 「앱에서는 1초만에」 앱 설치 반쪽 팝업이 뜬다(「모바일 웹으로 볼래요」로 닫고 찍음).
- 가져올 것
- 서랍 안 아코디언 — 우리 .ij-acc와 같은 문법이라 구조를 뒤엎을 필요는 없다는 근거. 앱 유도 반쪽 팝업은 은우 반쪽 팝업 참고.
배민상회(웹) — 하단탭 5칸, 가운데 홈
- 볼 것
- 하단탭 카테고리·검색·홈(가운데, 파란 강조)·주문배송·로그인. 위에 가로 탭(추천·장날·직배송·첫구매혜택)과 원형 아이콘 격자 10칸.
- 가져올 것
- 가운데 칸 = 가장 중요한 입구(은우 하단탭 가운데 회원혜택과 같은 문법). 목록 담기는 웹에선 확인 못 함.
D
우리가 할 수 있는 것
남긴 안 · 버린 안 · 5곳
담기 후에도 메뉴판이 그대로 (숨결 안)
- 볼 것
- a·c 9곳 메뉴 화면 어디에도 담기 버튼이 없다. 사진이 있는 곳(Brightland·Graza·29CM·무신사)도 누르면 목록이나 상세로 넘어간다.
- 가져올 것
- 새 칸은 만들지 않는다. 메뉴판 한 줄 = 지금 바텀시트 카드(사진·이름·USP 한 줄·담기). 담기를 눌러도 메뉴판은 닫히지 않고, 그 줄의 담기 버튼이 「담김 ✓」으로 바뀌며 이미 있는 무료배송 막대만 차오른다. 늘어나는 요소 0개. 날아가는 모션은 넣더라도 짧게, 없어도 되는 장식으로만.
코스는 글자 크기가 아니라 여백으로 나눈다 (숨결 안)
- 볼 것
- 레스토랑 5곳 실측: 코스를 가볍게 나누는 방법은 셋 — 작게(Bestia 20px·500) · 얇게(L’Artusi 30px·300) · 접어서(Cecconi’s 12px 대문자 + ＋). 무거운 쪽은 Osteria Mozza(40px·700). 가격은 5곳 모두 기호 없이 숫자만, 이름보다 약하게(이탤릭·설명 끝·오른쪽 열). 메뉴 줄마다 사진을 넣은 곳은 0곳 — Bestia만 코스 사이에 사진 한 장.
- 가져올 것
- 코스명 = 작은 이탤릭 눈썹(Bestia 크기 + L’Artusi 얇기), 코스 사이는 선·박스 없이 여백. 🟡 긴장 하나: 우리 카드는 줄마다 사진이 있어 레스토랑 메뉴판보다 무겁다. 미주가 사진 크기 유지를 원했으니 줄 수를 줄이지 말고 카드 높이를 낮추는 쪽으로 — 사진을 작게 할지는 미주 판단.
상황 카드 안에서 바로 담기 (숨결 안)
- 볼 것
- 이번 9곳 메뉴 화면 어디에도 담기 버튼이 없다. 사진이 있는 곳(Brightland·Graza·29CM·무신사)도 누르면 목록이나 상세로 넘어간다.
- 가져올 것
- 메뉴를 열면 상황 카드 2열(오늘 한 끼 · 선물 · 처음이라면 · 다 떨어졌어요). 카드 한 장 = 한 상 사진 + 조합 구성 한 줄 + 조합가 + 담기. 누르면 지금 바텀시트가 그 조합으로 올라온다. Graza의 사진 카드와 Eataly의 목적 분리를 합치고, 둘 다 없는 「메뉴 안 담기」를 더한다.
버린 이유 — 미주 17:49 「구매의도는 직관적이지 않다」 — 상황별 새 입구는 버림. 뼈대는 레스토랑 메뉴판 한 장.
메뉴를 닫지 않고 계속 담기 (숨결 안)
- 볼 것
- 대형몰은 담기 뒤 장바구니나 토스트로 흐름을 끊는다(이번 캡처 범위 밖, 담기 흐름은 확인 안 함).
- 가져올 것
- 담으면 병 썸네일이 메뉴 머리의 장바구니 칸으로 작게 날아가고, 그 자리 무료배송 막대가 채워진다. 남은 금액에 맞는 추가상품 한 줄이 막대 바로 아래 바뀐다(f8 안과 합침). 메뉴가 곧 장보기 화면이 된다.
버린 이유 — 새 칸·추가상품 제안 줄은 버림. 담기 동작만 아래 「담기 후에도 메뉴판이 그대로」로 좁혀 남김(f8·미주 17:49).
식탁 위에 올리며 조합 만들기 (숨결 안)
- 볼 것
- a·c 어디도 제품 사이 관계(무엇과 같이 먹나)를 화면으로 보여주지 않는다. 전부 분류 목록이다.
- 가져올 것
- 빈 식탁 사진 위에 누끼 제품을 탭해 올리면 한 상이 완성되고, 올린 것들이 그대로 담기 목록이 된다. 누끼는 상세 촬영 원본에서 따고 라벨은 AI로 다시 그리지 않는다. 구현 부담이 커서 데모 셋 중 하나로만.
버린 이유 — 미주 17:49 「무거워지고 많아지면 인상 찌푸려진다」 — 식탁 인터랙션은 요소가 늘어 버림.
원본 폴더: 배포링크_원본/ij-ux-lab/menu-bench/ · 목록 bench.json · 코드수정방·숨결_자사몰 디자인 공동 · 라이브 사이트는 건드리지 않음