미용실(Hair Salon) 예약 사이트
워드프레스 활용 이야기
워드프레스로 미용실 예약을 받는 사이트 제작을 하는 방법에 대해 소개를 해 보려고 합니다.
제작 과정은 대략 이렇습니다.
1. 워드프레스, 테마 설치 (Be Theme)
2. 데모 콘텐츠 설치 및 내용 수정
3. 예약을 받는 기능은 플러그인으로 추가
4. 예약 관련 페이지 추가, 메뉴 구성
1. 워드프레스 + Be Theme
이전에도 소개를 했듯이 유료 테마를 사용하면 시간과 비용을 조금 줄이면서 직접 사이트를 준비하는 것도 가능할 수 있습니다. (그게 어려우면 저 같은 퍼블리셔와 함께...) 요즘의 테마들은 대부분 자체 기술을 보여주는 방법으로 이 테마로 제작이 된 여러 데모들을 미리 만들어 두고, 이걸 테마가 설치된 사이트에서도 그대로 불러다 사이트를 세팅해 주는 원클릭 인스톨 기능을 제공합니다. 그중에서 미리 고민을 해서 만들어 놓은 데모들의 완성도나 참고를 할 수 있는 레이아웃들이 많아 저는 예전부터 Be Theme을 즐겨찾기를 해 놓고 있습니다.
현재는 준비된 데모만 549개가 된 거로 보입니다. 다양한 주제의 사이트 레이아웃이 제공이 되며, 마음에 드는 것이 있다면 거의 그대로 사용을 하여 사이트를 제작하면 되는 정도는 갖춰져 있습니다. 물론 영, 한 글자의 폰트 차이나 모바일 상의 디자인 개선을 위해 스타일 수정은 필요하긴 합니다만 제 경험상 제공되는 템플릿에 비해 빠르고, 기능이 충실하고, 안정적인 건 BeTheme만 한 게 없었던 거 같습니다. 단, 나의 디자인에 맞춘 사이트를 제작하고자 하는 경우에는 추천하고 싶지는 않은 테마입니다.
2. 데모 콘텐츠 설치 및 내용 수정
pre-built websites들 중 하나를 골라 그대로 설치를 하기 위해서는 만들었을 때 사용했던 환경과 같게 세팅을 하는 게 필요합니다. BeTheme은 자체 빌더인 머핀(Muffin) 빌더로 기본 구조들이 제작이 돼 있어서 추가 플러그인이 꼭 필요한 것은 아니지만, 문의 폼과 메인 페이지의 주 슬라이더를 추가를 하고자 하는 경우 이 것들만 설치 후 활성화를 하면 준비는 끝납니다. hair salon 관련 데모는 2가지가 검색이 되는데 이 중 하나를 선택 후 설치 버튼을 클릭하면 내 홈페이지의 모습도 데모와 똑같은 모습으로 표시가 됩니다.
레이아웃 구조는 그대로 이용하되 내 콘텐츠에 맞는 문구와 사진 등을 수정하고 싶다면, 상단 페이지 수정 버튼을 클릭 후, 수정하고 싶은 위치의 요소에서 수정 버튼(연필 모양)을 클릭하여 수정하면 됩니다.
이 정도를 할 수 있다면 내가 직접 워드프레스 CMS가 탑재된 반응형 웹사이트를 제작하는 것도 가능합니다.
+ 팁
다목적 테마의 경우, 불필요한 기능은 모두 끄는 것이 좋습니다. 이번에는 간단한 소개 페이지 정도만 사용이 되기 때문에 다른 기능은 모두 꺼서 메뉴를 간소화합니다.
3. 예약을 위한 기능 추가 (※ 헤어 살롱 예약 관련 플러그인 소개)
먼저, 예약을 받고 운영을 한다면 어떤 시스템이 필요할까를 고민해 봤습니다. 대략 아래와 같이 정리가 됩니다.
예약이 최대한 간편해야 하고, 운영 시 서비스나, 스탭, 스케줄을 설정하는 데 어려움이 없어야 하고, 관련자들에게 알림이 자동 발송이 되어야 하는 점이 핵심입니다. 글을 계획할 때에는 Bookly 플러그인으로 기존에 구축을 해 놨던 사이트를 토대로 설명을 해 볼까 했다가, 아무래도 최근의 트렌드나 버전에 맞는 테마나 플러그인을 사용하여 세팅을 해 보는 것이 좋을 것 같아서 글에서 소개된 플러그인들을 하나씩 적용을 해 보았습니다. (괜한 욕심을...)
1. Salon Booking - 서비스별 시간이 다르게 설정을 하고 > 예약 시 이것도 자동 체크가 되어야 할 텐데 이 부분에서 문제 확인. 그리고 한글 번역 적용 시 js 에러가 있음
2. Bookly (free) - 기능이 너무 제한적, 무료 버전의 평점이 너무 낮음
3. Amelia - 필요한 모든 기능을 구현해 놨으나, 결정적으로 최종 프런트 앤드 필드 컨트롤이 안 되는 문제
삽질의 결론. 결국은 다시 Bookly (pro유료)로 적용을 하는 것이 가장 간편하다는 사실이네요.
기능이나 설치, 그리소 설정 방법에 대해서는 Bookly 문서가 너무 잘 정리가 돼 있어서 저도 수시로 문서를 확인합니다. 플러그인 활성 화 후 스태프를 추가 > 서비스를 만들기 > 알림 설정 > 사이트에 표시될 폼 만들기 > 예약을 위한 기본 설정만 마우스 클릭으로 몇 번 진행을 하면 세팅이 완료가 됩니다.
외부 화면에는 어떻게 표시를 하는가 하면 페이지 편집에서 관련 버튼이 추가가 돼 있는 것을 볼 수 있습니다. 이 버튼을 통해 쇼트 코드를 페이지에 추가할 수 있고, 이제 예약을 받는 폼이 작동 및 표시가 됩니다.
완료 시점에 예약 시 기재한 메일로 예약 접수 안내 메일이 발송이 되고, 관리자에게도 새 예약에 대한 알림이 발송됩니다. (휴대폰의 메일 알림 이용, 구글 캘린더로도 모든 예약 현황 확인할 수 있게 연동도 가능!)
4. 예약 페이지를 주 메뉴로 연결
[어드민 > 테마 디자인 > 메뉴]에서 예약하기 페이지를 상단의 주 메뉴에 노출을 합니다.
여기서 좀 더 나아간다면, 예약 과정에서 메일로 회원이 가입이 되도록 하거나, 워드프레스의 간편 회원가입 페이지를 공개하여 로그인 상태에서 예약을 진행토록 한 다음, 차후에 사이트 내에서 예약 내용을 체크하거나 수정, 취소를 할 수 있는 페이지도 제공이 가능합니다. 다만 이러려면 별도의 개인정보정책 등이 필요할 것 같아 과정에서는 생략을 하였습니다.
관리자(어드민)에서는 예약 현황을 한눈에 파악을 할 수 있고, 만약 전화나 다른 방법으로 예약이 접수되거나 관리자가 직접 수정을 해야 하는 경우엔, 현황판에서 예약을 추가하거나 수정이 가능합니다.
※ 서비스 별 예약 시간 텀이 자동 적용이 되는 것과, 중복 예약 금지 등은 당연히 잘 적용이 되도록 만들어져 있습니다. 요일별 스탶별 근무 가능 시간도 다르게 설정이 가능하고요. 여러 발생 상황에 대한 설정은 기본입니다 .
워드프레스의 기본 구조를 잘 활용한 플러그인을 이용하여 간단히 예약을 받는 사이트를 구성해 보았습니다. 이와 같이 워드프레스로는 무엇을 어떻게, 왜 이용을 할까 하는 아이디어만 있다면 안정적이고도 멋진 사이트를 만드는 게 가능합니다.
