카페 홈페이지 디자인 세 가지 비교: 분위기형 · 간판형 · 주문형

카페 홈페이지의 첫 화면은 손님이 가장 먼저 확인하려는 것에 맞춰 고르면 됩니다. 공간이 자랑이면 매장 사진을 크게 거는 분위기형, 단골과 전화 주문이 많으면 전화번호·영업시간을 앞에 두는 간판형, 빵 나오는 시간과 미리 주문이 중요하면 주문표를 띄우는 주문형이 맞습니다. 카페 콘셉트 시안 세 개를 나란히 놓고 첫 화면, 영업시간 위치, 휴대폰 화면을 비교했습니다.

이 글의 DAY & NIGHT, 두잔 로스터리, 연남 버터오븐은 심플웹이 만든 콘셉트 시안입니다. 실제 카페나 납품 사례가 아니며, 상호·메뉴·가격·후기·주소는 모두 가상이고, 같은 이름의 실제 가게와도 관계가 없습니다.

카페 홈페이지를 만들 때 가장 오래 고민하는 곳은 첫 화면입니다. 매장 사진을 크게 걸지, 메뉴와 가격을 먼저 보여줄지, 전화번호와 영업시간을 앞에 둘지. 정답은 카페마다 다릅니다. 손님이 홈페이지에 들어와서 가장 먼저 확인하려는 것이 무엇이냐에 따라 달라집니다.

세 시안은 서로 다른 가상 카페지만, 한 카페가 고를 수 있는 세 가지 방향을 잘 보여줍니다. 우리 카페가 어느 쪽에 가까운지 생각하면서 보시면 됩니다. 세 시안 모두 직접 눌러볼 수 있습니다.

DAY & NIGHT 시안 → · 두잔 로스터리 시안 → · 연남 버터오븐 시안 →

한눈에 비교

	DAY & NIGHT	두잔 로스터리	연남 버터오븐
첫인상	남색과 베이지, 차분함	초록·노랑 간판과 전단지	연회색 바탕에 흰 둥근 카드, 배달 앱 같은 화면
첫 화면에 보이는 것	매장 사진 반, 소개 글 반	전화번호, 영업시간, 원두 가격, 쿠폰	빵 사진, 주문표, 영업시간·휴무일·전화
가장 큰 버튼	디너 예약하기	원두 구매	예약 픽업
영업시간·주소	소개 글에 시간대, 정확한 표는 맨 아래 '오시는 길'	첫 화면 버튼 옆, 중간쯤 '오시는 길'	첫 화면 두 곳, 사진 바로 아래 '매장 정보'
휴대폰 첫 화면	소개 글이 먼저, 사진은 아래로	간판의 전화번호가 맨 위에 남음	영업시간·전화는 남고, 주문표는 빠짐
어울리는 카페	공간이 자랑인 카페, 저녁 예약·대관	단골 많은 동네 카페, 원두 판매	빵·디저트를 미리 주문받는 카페

1. DAY & NIGHT: 사진으로 분위기부터 보여줍니다

PC 첫 화면을 반으로 나눴습니다. 왼쪽 남색 칸에는 '낮과 밤, 두 번의 취향'이라는 제목과 소개 글이 있고, 오른쪽 절반은 매장 사진이 채웁니다. 메뉴나 가격보다 "이런 곳입니다"를 먼저 보여주는 구성입니다. 사진 위 작은 상자에는 '시즌 디너 코스'와 '1인 ₩98,000 · 6코스'만 올렸습니다.

영업시간은 표가 아니라 소개 글 안에 있습니다. "오전 10시부터 오후 4시까지는 커피와 브런치를 내고, 한 시간 정리를 마친 뒤 저녁 6시부터는 예약제 시즌 디너 코스를 운영합니다." 낮과 밤에 다른 가게가 된다는 특징을 시간으로 설명한 셈입니다.

아래로는 소개 → NEWS → 공간 둘러보기 → 메뉴 → 후기 → 오시는 길 순서입니다. 정확한 운영시간('데이 10:00–16:00 · 나이트 18:00–22:30 · 월요일 휴무')과 주소는 맨 아래 '오시는 길'에 표로 정리했습니다. 분위기를 보러 온 손님에게는 자연스러운 순서지만, "오늘 문 열었나?"만 확인하려는 손님은 끝까지 내려가야 합니다.

아쉬운 점도 있습니다. 첫 화면의 버튼은 '디너 예약하기' 하나입니다. 낮에 커피를 마시러 오려는 손님을 위한 입구는 메뉴 줄의 'DAY'뿐입니다. 낮 장사 비중이 큰 카페라면 '오늘 메뉴'나 '오시는 길' 버튼을 나란히 두는 편이 낫습니다.

휴대폰에서는 메뉴가 '메뉴' 버튼 하나로 접히고, 남색 소개 칸이 먼저, 매장 사진이 그 아래로 내려옵니다. '디너 예약하기' 버튼은 첫 화면 안에 들어옵니다. 휴무일과 주소는 휴대폰에서도 페이지 끝 가까이 가야 보입니다.

2. 두잔 로스터리: 간판처럼 전화번호와 영업시간을 앞에 둡니다

맨 위 초록 간판에 상호와 '전화 주문 02-000-0000'을 크게 넣었습니다. 가게 앞 간판을 화면으로 옮긴 모양입니다. 첫 화면 한 장에 다음이 모두 들어 있습니다.

• 'EVENT 가을 시즌 원두 에티오피아 구지' 띠
• 제목 '매주 볶는 원두 세 종류'와 '원두 구매' 버튼
• 버튼 옆 '영업시간 매장별 08:00–20:00'
• 오려 쓰는 쿠폰 모양의 'COUPON' 상자
• 사진 가장자리에 걸친 별 모양 가격표 '하우스 블렌드 원두 200g 16,000원'

정보가 많지만 칸과 색이 나뉘어 있어서 하나씩 읽힙니다. 아래로는 오려 가세요(쿠폰) → 우리 가게 자랑 → 후기 → 알림판 → 오시는 길 → 차림표 순서입니다. '오시는 길'이 차림표보다 위에 있고, 여기에 '☎ 02-000-0000'을 한 번 더 크게 적었습니다. 매장에 오거나 전화하는 손님을 먼저 챙긴 순서입니다.

휴대폰에서도 간판의 '전화 주문 02-000-0000'은 맨 위에 그대로 남습니다. 메뉴는 '메뉴' 버튼으로 접히고, 사진이 제목 위로 올라갑니다. 영업시간은 '원두 구매' 버튼 바로 아래라서 한 번 스크롤하면 보입니다.

아쉬운 점은 매장 정보입니다. 이 시안은 '로스터리 카페 세 곳'을 가정했고 알림판에도 '광화문점 오픈 시간 변경'이 있는데, 메인의 영업시간은 '매장별 08:00–20:00'으로 묶여 있고 '오시는 길'의 주소는 하나입니다. 매장이 여러 곳인 카페라면 매장마다 주소와 시간을 따로 보여줘야 손님이 전화로 묻지 않습니다.

3. 연남 버터오븐: 주문표를 첫 화면에 둡니다

배달 앱 화면을 닮은 시안입니다. 빵 진열대 사진 아래 흰 카드에 '오전 11시, 버터 굽는 냄새'와 '오전 11시와 오후 3시, 두 번 오븐이 열립니다.'가 있고, 오른쪽에는 '주문표'가 떠 있습니다. 고메버터 소금빵 수량을 고르고, 합계(3,500원)를 확인하고, '예약 픽업'을 누르는 순서입니다.

영업시간은 첫 화면에 두 번 나옵니다. 카드 아래 '영업 10:00–19:00 · 월·화 휴무'와 주문표 안 '영업시간 10:00–19:00 · 월·화 휴무'입니다. 세 시안 중 휴무일까지 첫 화면에 보이는 건 이 시안 하나입니다.

메인 페이지는 세 시안 중 가장 짧습니다. 첫 화면 아래 '메뉴 / 리뷰 / 정보' 탭이 있고, 사진 세 장 바로 아래 '매장 정보'에 주소·전화·영업시간을 표로 넣었습니다. 그 아래로 시그니처 메뉴(가격과 '담기' 버튼), 리뷰, 가게 혜택·안내가 이어집니다. "빵 언제 나와요?"라는 질문에는 가게 혜택·안내의 '하루 두 번 굽기 — 11시와 15시에 갓 구운 빵이 나옵니다'가 답합니다.

휴대폰에서는 오른쪽 주문표가 첫 화면에서 빠집니다. 카드 속 영업시간·휴무일·전화는 그대로 남아서, 들어오자마자 오늘 문을 여는지는 알 수 있습니다. 대신 '예약 픽업' 버튼은 페이지 끝, 가게 혜택·안내 아래의 주문 요약 바('1 3,500원')로 옮겨 갑니다. 이 바는 화면을 따라 내려오지 않습니다. 실제로 만든다면 화면 아래에 늘 떠 있는 '예약 픽업' 바로 바꾸기를 권합니다.

우리 카페는 어느 쪽일까

• 공간이 자랑이고 저녁 예약·대관을 받는 카페 → DAY & NIGHT. 사진 한 장이 긴 소개를 대신합니다. 낮 손님을 위한 버튼은 하나 더 두세요.
• 단골이 많고 전화 주문·원두 판매를 하는 동네 카페 → 두잔 로스터리. 전화번호와 영업시간이 간판처럼 늘 보입니다.
• 빵·디저트 나오는 시간이 중요하고 미리 주문을 받는 카페 → 연남 버터오븐. 굽는 시간, 휴무일, 주문 버튼이 첫 화면에 모여 있습니다.

매장 사진이 아직 없다면 분위기형보다 간판형이나 주문형으로 시작하는 편이 쉽습니다. 분위기형은 사진이 좋아야 살아납니다.

세 방향을 섞을 수도 있습니다. 예를 들어 분위기형 첫 화면 바로 아래에 주문형처럼 '매장 정보'를 두는 식입니다. 시안 구성을 섞거나 섹션 순서를 바꾸는 작업은 맞춤형 견적 상담에서 범위를 정합니다.

실제 카페 홈페이지로 옮길 때 확인할 것

• 영업시간과 휴무일: 가장 자주 바뀌고, 손님이 가장 많이 찾는 정보입니다. 카페에서 직접 고칠 수 있어야 합니다. 견적 계산기의 '관리자 페이지' 항목을 함께 고르면 영업시간·휴무일·메뉴 가격을 카페에서 바로 고칠 수 있습니다.
• 전화번호는 눌러서 걸리게: 시안에서는 전화번호가 글자로만 들어가 있습니다. 실제 홈페이지에서는 휴대폰에서 번호를 누르면 바로 전화가 걸리게 만드는 게 기본입니다.
• 버튼을 어디에 연결할지: 시안에서는 실제 예약이나 주문이 접수되지 않습니다. 실제로는 카페가 지금 쓰는 예약·주문 방식에 맞춰 '디너 예약하기', '원두 구매', '예약 픽업'의 연결 대상을 정합니다. 이미 네이버 예약·주문이나 전화·카카오톡 채널로 받고 있다면 버튼을 그쪽으로 연결하고, 홈페이지 안에서 예약이나 결제까지 받으려면 견적 계산기의 '예약 기능'·'결제 기능' 항목으로 만듭니다.
• 매장이 여러 곳이면: 매장별 주소와 영업시간을 나눠서 보여줍니다.

---

DAY & NIGHT 시안 → · 두잔 로스터리 시안 → · 연남 버터오븐 시안 → 카페·베이커리·디저트 시안 보기(요식업 탭) · 카페·레스토랑 시안 보기(공간 탭) · 우리 카페 예상 견적 보기