율무 라떼부터 고르는 오후 다섯 시 카페 랜딩페이지 제작기

율무 라떼 사진에서 이름·가격과 두 버튼을 함께 봅니다

첫 화면은 상호보다 ‘율무 라떼’를 크게 씁니다. 사진 왼쪽에는 음료 설명과 가격·카페인 안내, 두 버튼이 차례로 보입니다. 휴대전화에서는 사진 아래로 설명과 가격이 내려오고, 두 버튼은 화면 아래 고정 바 위에서 보입니다. 음료가 마음에 들면 바로 시그니처나 전체 메뉴를 더 볼 수 있습니다.

화면이 열릴 때에는 어두운 드립 사진 위에 상호가 잠시 나타난 뒤 율무 라떼 사진으로 바뀝니다. 본문에서는 ‘시그니처 보기’ 버튼이 먼저 나오고 ‘전체 메뉴 보기’가 뒤에 있어, 손님이 대표 음료부터 살펴보게 됩니다. 휴대전화에서도 두 버튼의 순서는 같고, 먼저 볼 시그니처 버튼은 짙은 색으로 구분됩니다. 오후 다섯 시 첫 화면

시그니처 사진 세 장을 보고 전체 가격표를 훑습니다

시그니처 구역에는 율무 라떼, 율무 케이크, 아몬드 커피의 사진이 같은 크기로 나옵니다. 각 카드에는 이름과 가격, 짧은 설명이 붙어 있어 손님이 음료와 디저트를 함께 비교합니다. 첫 화면의 라떼는 케이크가 곁에 있는 사진이고, 카드의 라떼는 잔을 위에서 본 사진이라 같은 품목을 다른 모습으로 볼 수 있습니다.

그다음 전체 메뉴에서는 왼쪽의 ‘오늘의 커피’ 소개와 작은 메뉴 사진들 옆에 가격표가 펼쳐집니다. 시그니처·커피·커피 외 음료와 디카페인·디저트·원두와 드립백을 갈래로 나누고, 이름과 가격 사이를 점선으로 이어 품목마다 가격을 쉽게 찾을 수 있게 디자인했습니다. 휴대전화에서는 오늘의 커피와 사진 다음에 가격표가 나와, 큰 사진에서 고른 품목과 다른 메뉴를 차례로 볼 수 있습니다.

메뉴 다음에 매장·전화 포장·배달 안내를 고릅니다

주문 방법은 매장, 포장, 배달을 세 줄로 나눕니다. 매장 줄에는 계산대 주문 설명과 ‘자리 보기’ 버튼이, 포장 줄에는 전화로 미리 주문하는 설명과 ‘전화로 포장 주문’ 버튼이 있습니다. 배달 줄에서는 거리·시간·최소 주문 조건을 확인할 수 있습니다. 손님은 원하는 주문 방식의 줄에서 버튼을 눌러 바로 자리를 보거나 포장 주문을 하고, 배달은 조건부터 확인할 수 있습니다.

휴대전화에서는 각 주문 방법의 사진, 설명, 조건과 버튼이 위에서 아래로 이어집니다. 화면 아래 고정 바에는 ‘전화’와 ‘주문 방법’ 버튼이 계속 보여서, 메뉴를 보다가도 버튼만 누르면 바로 포장 주문 전화를 걸거나 주문 방법을 확인할 수 있습니다. 원두와 드립백을 찾는 사람은 주문 안내 끝의 ‘원두 가격 보기’에서 전체 메뉴로 돌아갑니다.

자리를 고른 뒤 영업시간과 오시는 길을 확인합니다

자리 안내에서는 긴 테이블, 안쪽 소파, 구석 2인석, 창가 1인석의 자리 수와 콘센트 여부를 비교합니다. 자리 이름을 누르면 큰 사진과 설명이 바뀌고, 사진을 더 크게 열어 볼 수도 있습니다. 아래에는 주문, 와이파이, 콘센트와 머무는 시간에 관해 자주 묻는 내용이 이어져 실제 카페에 방문할 사람의 궁금증을 덜어줍니다.

영업시간과 오시는 길에는 영업일·주문 마감·휴무와 교통·주차 안내가 모여 있습니다. 길을 나타낸 그림과 가게 앞 사진을 함께 보고 찾아오는 방법을 확인할 수 있으며, 뒤에는 가게 사람의 짧은 인사말이 붙습니다. 메뉴와 주문 방법을 본 손님이 방문 계획에 필요한 정보를 이어서 찾도록 디자인했습니다.

저희 에코스튜디오에 카페 홈페이지 제작을 맡겨주시면 실제 메뉴 사진과 가격, 매장·포장·배달 안내, 자리와 방문 정보를 확인해 손님이 대표 음료부터 고르고 방문이나 포장 방법을 찾기 쉽게 구성해드립니다.

홈페이지 제작 안내에서 작업 내용을 살펴보시고, 프로젝트 문의에 궁금한 점을 남겨 주세요.