WordPress로 레스토랑 웹사이트 만들기
레스토랑 웹사이트가 해야 할 일은 네 가지입니다. 음식을 보여주고, 다른 동네에서 일부러 찾아올 가치가 있는 공간임을 증명하고, 예약을 받고, 영업 시간을 알리는 것입니다. 이 가이드는 네 가지를 모두 다룹니다. 빈 WordPress 설치에서 시작해 고객에게 넘겨줄 수 있는 사이트로 마무리합니다.
1단계: WordPress 준비하기
레스토랑 사이트는 다른 사이트보다 WordPress 설정 세 가지에 더 의존하므로, 디자인을 손대기 전에 먼저 설정하세요.
- 사이트 제목과 태그라인. 설정에서 일반으로 이동하세요. 제목에는 식당 이름을, 태그라인에는 음식 종류와 동네를 입력합니다. 브라우저 탭, 검색 결과, 손님이 친구에게 전달하는 카드 모두 이 두 줄을 바탕으로 만들어집니다.
- 고유주소. 설정, 고유주소, 글 이름 순서로 선택하세요. 메뉴 페이지는 테이블 카드나 전단지에 인쇄할 만큼 짧은 주소를 갖게 됩니다.
- 시간대. 일반 설정 화면으로 돌아가 식당이 위치한 도시를 선택하세요. 예약 요청은 이 시간대를 기준으로 시간이 기록되며, 잘못 설정하면 오늘 밤 예약이 내일 날짜로 저장됩니다.
WordPress 준비의 나머지 부분은 모든 Canvas 사이트에 동일하게 적용됩니다. WordPress 및 PHP 버전, 실제로 테스트해 본 백업, 가져오기 시 다운로드되는 사진을 처리할 만큼의 PHP 메모리가 여기에 해당합니다. 가져오기 가이드에서 모든 프로젝트에 대해 이 내용을 한 번에 다룹니다.
예약 요청은 주방이 영업 전에 확인해야 의미가 있습니다. 별도로 설정하지 않으면 WordPress는 이메일 발송을 서버에 맡기는데, 많은 호스팅 업체가 아무런 안내 없이 이 이메일을 버리기도 합니다. 지금 이메일 발송 서비스나 SMTP 플러그인을 설정하고 테스트 이메일을 직접 보내 보세요.
2단계: Canvas 설치 및 설정 마법사 실행
대시보드에서 외모 > 테마 > 새로 추가 메뉴로 이동해 테마 zip 파일을 업로드한 뒤 활성화하세요. 설정 마법사는 자동으로 열리며, 이 프로젝트에서는 금방 끝낼 수 있습니다.
- 라이선스를 먼저 준비하세요. 대시보드에서 라이선스 키를 붙여넣으세요. 이 키가 있어야 마법사가 다음 단계에서 레스토랑 패키지를 다운로드할 수 있습니다.
- 데모 단계에서 Italian Restaurant 검색하세요. 카드에 가져오기 전에 미리 볼 수 있는 페이지, 글, 요리 항목이 나열됩니다.
- 플러그인 단계가 자동으로 건너뛰도록 두세요. 레스토랑 디자인에는 Canvas와 설정 마법사가 대신 설치하는 보조 플러그인 외에 필요한 것이 없습니다.
설정 마법사를 중간에 닫아도 Canvas 메뉴 아래에서 대기하며, 다시 돌아오면 이어서 진행할 수 있습니다.
단계 3: 레스토랑 데모 가져오기
가져오기 전에 이탈리안 레스토랑 데모의 실시간 미리 보기를 열어 메뉴 페이지와 예약 페이지까지 직접 둘러보세요. 미리 보기는 설치할 테마와 같은 테마로 실행되므로, 그곳에서 작동하는 것은 여러분의 사이트에서도 작동합니다.
사이트 전체, 새 사이트 기준
빈 설치 환경이라면 사이트 전체 가져오기를 선택하세요. 레스토랑의 글꼴, 색상, 테마 옵션, 메뉴가 사이트의 것이 되므로, 다음 겨울에 추가할 프라이빗 다이닝 페이지도 잘 어울립니다. 이미 운영 중인 사이트에 가져오는 것이 다른 선택지이며, 가져오기 가이드에서 적합한 경우를 설명합니다.
구성 내용
- 6개 페이지, 홈부터 메뉴, 소개, 연락처 페이지까지
- 카테고리가 포함된 블로그 글 6개로, 첫날부터 뉴스 섹션이 비어 있지 않도록 합니다.
- 50개의 요리, 각각이 고유한 메뉴 항목 레코드
- 슬라이더, 작동하는 예약 양식, 그리고 각 위치에 지정된 내비게이션 메뉴 2개
- 헤더, 푸터, 페이지 제목 디자인: 각각 편집 가능한 레코드
- 본인의 미디어 라이브러리에 복사된 음식 사진
사진 속 식당 공간이 실제와 전혀 다르다면, Canvas의 Demo Import에서 가져오기를 되돌리고 다른 레스토랑 데모 중 하나를 선택해 보세요. 이전 설정도 함께 복원됩니다.
4단계: 데모 문구와 이미지 바꾸기
페이지 메뉴에서 홈 페이지를 엽니다. 편집기는 손님이 실제로 보게 될 모습대로 헤더, 슬라이더, 페이지 제목 영역, 푸터를 콘텐츠 주변에 배치하므로, 실제 페이지 안에서 환영 문구를 작성할 수 있습니다.
클릭, 입력, 교체
페이지의 모든 제목, 단락, 사진은 블록입니다. 블록을 클릭해 내용을 바로 입력하거나, 이미지에서 ‘교체’를 선택해 직접 가진 사진을 고를 수 있습니다. 오른쪽 패널에는 색상부터 링크까지 해당 블록에서 설정할 수 있는 나머지 항목이 모두 있습니다.
구체적인 내용을 말하세요
데모 문구는 일부러 일반적으로 작성되어 있어 쉽게 알아볼 수 있고, 그만큼 이기기도 쉽습니다. "Authentic Italian cuisine" 대신 당신만 할 수 있는 말로 바꾸세요. 예를 들어 레시피가 온 지역, 요리를 최종적으로 내보내는 사람의 이름, 오븐에 쓰는 나무, 빵이 오븐에서 나오는 시각 같은 내용입니다. 두 식당 중 하나를 고르는 손님은 형용사가 아니라 세부 정보를 보고 판단합니다.
섹션이 레스토랑에 맞지 않으면 삭제하고 그 자리에 패턴을 넣으세요. 선택할 수 있는 패턴이 183개 있으며, 각 패턴은 일반 블록으로 추가되어 바로 재배치할 수 있습니다.
6단계: 양식으로 예약 받기
데모에는 작동하는 양식이 포함되어 있습니다. Canvas에서 양식은 블록으로 만든 레코드입니다. Form 블록은 필드를 담고, Form Field 블록은 각 필드를 정의하며, Form Submit Button이 양식을 전송하고, Form Embed 블록은 완성된 양식을 어떤 페이지에든 삽입합니다.
예약에 필요한 입력 항목
- 가장 이른 시간과 가장 늦은 시간을 지정할 수 있는 날짜 및 시간 필드입니다. 가장 이른 시간은 영업 시작 시간으로, 가장 늦은 시간은 마지막 회차로 설정하고, 간격은 15분 또는 30분으로 지정하여 19:07에 예약이 들어오지 않도록 하세요.
- 인원 수를 위한 숫자 필드입니다. 최소값과 최대값은 가장 큰 테이블에 맞게 설정하세요.
- 이름과 전화번호를 위한 텍스트 및 전화번호 필드, 그리고 확인용 이메일 필드.
- 알레르기, 유아용 의자, 그냥 두면 놓칠 기념일을 위한 텍스트 영역.
- 나중에 손님에게 이메일을 보낼 계획이라면 Consent 체크박스, 그리고 사람에게는 불편을 주지 않으면서 대부분의 스팸을 조용히 걸러내는 보이지 않는 함정인 허니팟 필드.
요청이 전달되는 곳
데모의 예약 양식에는 이름, 전화번호, 이메일 주소 필드가 있으며, 과거 날짜를 비활성화하는 날짜 선택기, 시간 메뉴, 인원 수 메뉴가 포함되어 있습니다. 모든 요청은 사이트 내부의 테이블에 저장되고, WordPress 관리자 화면의 ‘Submissions’ 아래에서 확인할 수 있습니다. 아직 이메일로 알림을 보내지는 않습니다. 양식을 열고 ‘Actions’ 탭에서 ‘Send Email Notification’을 켠 뒤, 영업 중에 실제로 확인하는 주소를 입력하세요. 그다음 직접 테이블을 예약해 보고 메시지가 도착하는지 확인하세요.
각 항목은 확인이 필요한 요청으로 다루세요. 이 폼은 예약 요청을 접수하는 역할만 하며, 좌석 수를 세거나 테이블을 잡아 두지는 않습니다. 실시간 예약 가능 여부가 필요하다면 전용 예약 시스템이 적합하며, 폼의 웹훅 작업으로 각 요청을 해당 시스템에 전달할 수 있습니다. 또한 폼에 보관 기간을 설정하여 방문 고객의 전화번호가 원하는 일정에 따라 삭제되도록 하세요.
88개 데모 중 83개에는 바로 작동하는 양식이 최소 하나씩 포함되어 있습니다. 그래서 대부분의 경우 양식만 편집하면 되고, 연결 작업은 이미 되어 있습니다.
7단계: 헤더, 영업시간, 연락처 정보 설정
헤더는 배고픈 방문객이 전화번호를 찾는 곳이고, 푸터는 주소를 찾는 곳입니다. 두 항목 모두 Canvas의 블록으로 만든 레코드이며, 페이지와 같은 방식으로 편집합니다.
헤더
헤더 항목에는 영역이 있고, 영역은 헤더 행의 한 칸입니다. 첫 번째 영역에는 로고를, 가운데 영역에는 내비게이션을 넣고, 마지막 영역에는 전화번호가 포함된 Header Icon Link와 ‘Book a table’이라고 적힌 Header Button을 나란히 배치하세요. 공간이 있을 때는 Header Info 블록에 주소나 영업시간을 넣을 수 있습니다.
오늘의 영업시간이나 휴무 안내를 위해 헤더 위에 상단 바를 추가하세요. 상단 바는 별도의 항목이므로, 헤더를 전혀 열지 않고도 메시지를 바꿀 수 있습니다.
푸터의 영업시간
푸터에는 주소와 전화번호를 위한 Footer Contacts 블록과, 그 옆에 영업시간 열을 넣습니다. 영업시간은 사람이 읽을 수 있는 글로 적고 정확하게 유지하세요. 방문객이 닫힌 문 앞에 도착하는 것만큼 불쾌한 일은 없으니까요.
헤더와 푸터 모두 사이트 전체 기본값과 페이지별 재정의 설정이 있어, 프라이빗 다이닝 랜딩 페이지에서는 사진 위에 투명한 헤더를 얹고 나머지 사이트는 자체 설정을 유지할 수 있습니다.
8단계: 확인한 다음 열기
사이트를 누구에게든 공유하기 전에 이 목록을 끝까지 확인하세요. 짧은 목록이지만 여기 있는 항목은 모두 누군가를 난처하게 만들었던 실수들입니다.
- 휴대폰에서 레스토랑 와이파이를 끈 상태로 실제 테스트 예약을 진행하고 알림이 도착하는지 확인하세요.
- 모든 페이지를 휴대폰에서 확인하세요. 오늘 저녁 먹을 곳을 찾는 대부분의 사람은 이동 중에 휴대폰을 봅니다.
- 이 정보가 반복되는 모든 페이지(푸터 포함)에서 주소, 전화번호, 영업시간을 확인하세요.
- 사진에 대체 텍스트를 작성하세요. 화면 낭독기를 사용하는 사람들에게 도움이 되며, 검색 엔진도 페이지와 함께 이를 읽어 식사 공간을 파악합니다.
- SEO 화면을 확인하세요. Canvas는 실시간 콘텐츠를 바탕으로 제목, 설명, 공유 카드, 구조화된 데이터를 생성하므로, 여기서 할 일은 별도의 입력란을 채우는 것이 아니라 콘텐츠를 구체적으로 작성하는 것입니다.
- 필요한 성능 스위치를 켜세요. 총 35개의 최적화가 있으며, 각각 되돌릴 수 있고, 페이지에서 쓰지 않는 요소를 덜 불러옵니다.
그다음 사이트를 게시하고, 주소를 사람들이 검색하는 곳에 등록한 뒤 레스토랑 운영으로 돌아가세요. 이제 사이트는 프로젝트가 아니라 메뉴가 바뀔 때 수정하는 정보들의 모음입니다.
출처
이 가이드에서 Canvas 자체가 아닌 내용을 설명하는 경우, 해당 내용을 다루는 공식 페이지는 다음과 같습니다.
- 설정 > 일반 화면wordpress.org · WordPress에서 사이트 제목과 태그라인을 설정하는 화면이며, 같은 화면에서 시간대도 설정합니다
- ‘설정’ 고유주소 화면wordpress.org · 모든 페이지에 짧고 읽기 쉬운 주소를 주는 ‘글 이름’ 구조
- wp_mail()developer.wordpress.org · WordPress에서는 기본적으로 메일 전송을 PHP의 mail() 함수에 맡기며, 전송 성공 메시지가 곧 전달 완료를 의미하지는 않습니다.
- 이미지 튜토리얼w3.org · 스크린 리더는 이미지의 대체 텍스트를 소리 내어 읽습니다
- 일반 구조화된 데이터 가이드라인developers.google.com · 올바른 마크업이 있으면 리치 결과가 가능해지며, 표시 여부는 Google이 결정합니다
다음 단계
출시 이후의 작업을 다루는 가이드 두 편과 이 가이드의 바탕이 된 데모입니다.
예약을 받으려면 플러그인이 필요한가요?
아니요. Canvas 레스토랑 사이트의 예약은 Canvas 블록으로 만든 양식을 통해 들어옵니다. 입력 내용은 사용자의 웹사이트에 있는 테이블에 저장되며 WordPress 관리자에서 확인할 수 있습니다. 테이블과 인원을 관리하는 타사 예약 시스템으로 예약을 보내고 싶을 때만 플러그인을 추가하면 됩니다.
직접 찍은 사진을 사용할 수 있나요?
네, 레스토랑 데모에 포함된 사진은 모두 직접 준비한 사진으로 교체하시는 것이 좋습니다. 데모의 모든 이미지는 일반 첨부 파일로 미디어 라이브러리에 추가되므로, 이미지를 교체하는 작업은 WordPress의 다른 이미지를 교체하는 것과 같습니다. 레이아웃이 흐트러지지 않도록 원래 이미지와 비슷한 비율을 유지하고, 교체하는 김에 대체 텍스트 필드에 짧은 설명도 입력하세요.
레스토랑 데모가 마음에 들지 않으면 어떻게 하나요?
되돌린 뒤 88개의 Canvas 데모 중 다른 데모를 가져오세요. 모든 플랜에 전체 데모가 포함되어 있고 각 가져오기는 별도로 기록되기 때문입니다. 두 번째 데모는 페이지만 가져와서 현재 디자인은 그대로 둘 수도 있습니다.
메뉴 가격도 Google에 표시되나요?
Canvas는 렌더링 시점에 페이지에 있는 내용을 바탕으로 구조화된 데이터를 생성하며, 영업시간, 제공 혜택, 리뷰를 포함한 16개의 스키마 유형을 지원합니다. 검색 결과에 무엇을 표시할지는 검색 엔진이 결정하지만, 두 번째 SEO 플러그인 없이도 마크업은 제공됩니다.
Canvas로 다음 웹사이트를 만들어 보세요
초보자, 프리랜서, 에이전시 모두 같은 블록과 같은 데모를 사용할 수 있습니다. 사이트 하나부터 시작해 같은 라이선스로 필요한 만큼 얼마든지 만들 수 있습니다.