왜 음식점 홈페이지는 ‘먹고 싶다’에서 출발하는가
음식점 홈페이지 제작에서 가장 먼저 푸는 문제는 디자인이 아니라 식욕입니다. 손님은 ‘오늘 어디서 먹지’를 검색하다 화면을 0.3초 안에 스칠지 말지 정합니다. 그래서 이 식당 홈페이지는 첫 화면에 잘 구운 요리의 온기가 먼저 전해지도록, 따뜻한 조명 아래 촬영한 대표 메뉴를 풀블리드 히어로로 깔았습니다. 정보보다 먼저, ‘여기 맛있겠다’는 감각이 옵니다.
색: 차콜의 깊이, 브라스의 온기
바탕은 딥 차콜(#14110f) — 음식 사진을 가장 먹음직스럽게 받쳐 주는 어두운 무대입니다. 포인트로 브라스(#9c7430·#e3bd72)를 절제해 써서 따뜻한 황동빛 격을 더하고, 와인색을 상태 표시에 조금 섞었습니다. 흔한 배달앱식 화이트 배경 대신 어두운 톤으로 가니, 같은 요리 사진도 한 단계 더 고급스럽고 따뜻하게 보입니다. 음식점 홈페이지 제작에서 색은 ‘분위기’이자 곧 ‘식욕’입니다.
타이포: 명조의 결, 한식의 격
헤드라인에 명조(세리프)를 쓴 건 우연이 아닙니다. 명조의 획은 전통·정성·손맛의 결을 시각으로 전합니다 — 제철 식재료로 짓는 다이닝의 온도와 정확히 맞습니다. 본문은 Pretendard로 가독성을 확보해, 메뉴 설명과 가격이 또렷이 읽히게 했습니다. 격은 헤드라인에서, 읽기는 본문에서 — 역할을 나눴습니다.
메뉴탭: 코스·단품·주류를 한 화면에
식당 사이트에서 가장 자주 보는 곳은 결국 메뉴입니다. 그래서 메뉴를 코스·단품·주류·페어링으로 나눠, 자바스크립트 없이도 작동하는 메뉴탭으로 묶었습니다(라디오 기반이라 가볍고 빠릅니다). 손님은 보고 싶은 분류만 눌러 깔끔하게 훑고, 가격은 ‘예시’로 정직하게 표기해 실제 운영가와 헷갈리지 않게 했습니다. 코스의 구성·단품의 중량까지 한 화면에서 비교됩니다.
영업중 배지: ‘지금 문 열었나요’에 즉답
손님이 식당 사이트에서 가장 급히 알고 싶은 건 ‘지금 가도 되나’입니다. 그래서 영업시간을 글로만 적지 않고, 현재 시각을 읽어 실시간 영업중 배지(영업 중·브레이크타임·곧 오픈·영업 종료)로 상단과 예약 영역에 띄웠습니다. 초록 점이 맥동하면 ‘지금 영업 중’, 호박색이면 ‘브레이크타임/곧 오픈’ — 글을 읽지 않아도 색 하나로 상태가 전해집니다. 영업시간 표와 함께 두어, 헛걸음을 줄입니다.
예약 동선: 모든 길이 한 통의 예약으로
업무는 결국 예약으로 모입니다. 상단 CTA·히어로 버튼·예약 섹션·푸터까지 모든 동선이 ‘예약하기’ 하나로 향하게 했습니다. 예약 양식은 성함·연락처·날짜·인원·시간·요청사항(알레르기·기념일)까지 받아, 전화 통화 없이도 매장이 필요한 정보를 다 받습니다. 동시에 큼직한 전화 버튼을 함께 둬, 급한 손님은 바로 통화로 넘어가게 했습니다. 노쇼·취소 안내까지 미리 적어 신뢰를 더했습니다.
모바일에서 시작되는 예약
손님은 대개 약속 장소를 정하는 길 위에서, 휴대폰으로 식당을 찾습니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 대표 요리와 메뉴탭, 영업중 배지가 한눈에 들어오고, 화면 어디서든 한 번의 터치로 전화·예약이 되도록 했습니다. 데스크톱에서는 갤러리와 명조의 여백으로 분위기를 키우고, 모바일에서는 속도와 예약 동선을 키워, 같은 페이지가 두 맥락 모두에서 제 역할을 하게 맞췄습니다.
정직과 발견(GEO)
가상의 매장임을 명시하고, 메뉴 가격을 ‘예시’로 표기해 과장하지 않았습니다(가짜 후기·허위 평점 없음). 대신 “북촌 한식 다이닝”, “안국역 코스 요리”처럼 손님이 실제로 검색하는 지역·업종 질문에 답하는 구조와 FAQ, 영업시간·주소·예약 가능 여부를 담은 Restaurant 구조화 데이터를 넣어 — 검색엔진과 AI 답변, 그리고 지역 검색 양쪽에서 음식점 홈페이지 제작 사례로 발견되게 했습니다. 보기 좋은 사이트가 아니라, 찾아지고 예약으로 이어지는 사이트를 목표로 했습니다.