라멘집 홈페이지 제작, 메뉴판·매장 사진·영상까지 한 번에 (온스라멘야)

점심 장사를 열자마자 전화가 옵니다. «오늘 하세요?»

끊으면 또 한 통. «돈코츠 얼마예요?» «혼자 가도 자리 있어요?» 오후 세 시쯤엔 브레이크타임이라 닫아 둔 문 앞에서 발길을 돌리는 손님도 보입니다.

손님이 묻는 건 늘 비슷해요. 오늘 여는지, 몇 시에 쉬는지, 뭐가 얼마인지.

이번 글은 라멘 가게 «온스라멘야»의 홈페이지가 만들어지고 고쳐지는 과정을 실제 화면 그대로 따라갑니다. 먼저 밝혀 둡니다. 온스라멘야는 저희 온스토리가 시연용으로 지은 가게라 실제 영업은 하지 않고, 사진과 영상도 분위기를 보여 드리려고 준비한 것입니다. 홈페이지는 진짜로 열려요. onstori.com/onsramen

1. «오늘 하세요?»에 홈페이지가 먼저 답하게

요즘 손님은 전화하기 전에 먼저 찾아봅니다. 그래서 라멘집 홈페이지가 할 일은 단순합니다. 전화로 묻는 질문에 미리 답해 두는 것. 영업시간과 브레이크타임, 쉬는 날, 메뉴와 가격, 오시는 길이 한 화면에 있으면 전화도 헛걸음도 줄어듭니다.

지도 앱이면 되지 않나 싶기도 하죠. 그런데 지도에는 정해진 칸만 있고, 블로그 글은 시간이 지나면 아래로 밀립니다. 메뉴판과 사진, 가게 이야기, 문의 창구를 사장님 뜻대로 한곳에 모아 두는 자리는 결국 홈페이지예요.

2. 가게 이름 하나로 시작해서, 질문 여섯 장

가입 첫 화면에는 칸이 하나뿐입니다. «사장님 가게 이름부터 알려주세요.» 여기에 «온스라멘야»를 적었어요. 네이버 플레이스에 등록된 가게라면 [네이버 플레이스에서 불러오기]로 이름·업종·주소·전화를 한꺼번에 가져옵니다.

두 번째는 업종. «카페·식당»을 누르고 «일식»을 골랐습니다.

세 번째 화면에서 꼭 채울 칸은 «하는 일 한 줄»과 «전화번호» 둘입니다. 한 줄 소개는 «일본식 라멘을 끓여요. 돼지뼈 육수와 직접 뽑은 면이 자랑이에요.»처럼 말하듯 적으면 되고, 문구는 온스토리가 다듬어 넣습니다. 번호 칸 바로 밑에는 «전화번호는 홈페이지에 공개되지 않습니다»라는 안내가 붙어 있어요. 공개하려면 나중에 관리 화면에서 켭니다.

그다음은 사진(최대 15장, 없으면 [건너뛰기]), 문의폼·전화·카톡·인스타·블로그 같은 창구를 고르는 «채널연결»(선택), 그리고 홈페이지 모양 고르기. 여섯 번째 화면 끝에서 약관 동의 두 칸에 체크하고 [홈페이지 만들기 — 무료]를 누르면 화면 안내로 보통 30초쯤 걸립니다. 이번에는 이미 만들어 둔 온스라멘야가 있어서 이 단추는 누르지 않았습니다. 그래서 처음부터 끝까지 몇 분이 걸렸는지는 재지 않았어요.

로고는 홈페이지가 생긴 뒤 그림 후보 네 가지로 그려지고(화면 안내로 몇 분), 그동안은 가게 이름으로 만든 글자 로고가 먼저 걸립니다. 고른 로고는 «디자인 › 로고»에서 크기(작게·보통·크게)를 정하고 [지금 로고 받기]로 내려받습니다.

3. 완성된 온스라멘야, 첫 화면부터 문의 폼까지

첫 화면입니다. 사진 위에 «오늘 끓인 라멘 한 그릇» 한 줄, 그 아래 [문의하기]와 [전화하기]. 그 바로 밑에 영업시간(매일 11:30~21:00)과 전화번호, 오시는 길이 붙어 있어서 한 번만 내려 보면 «오늘 하세요?»의 답이 나옵니다.

휴대폰에서는 같은 내용이 위에서 아래로 쌓입니다. 휴대폰용을 따로 만들 필요가 없습니다. 오른쪽 아래 떠 있는 문의·전화 단추는 어디까지 내려가든 따라옵니다.

맨 아래 문의하기 칸에는 브레이크타임(15:00~17:00), 라스트오더(20:30), 휴무(매주 월요일)를 적었습니다. 오후 세 시의 헛걸음은 이 세 줄이 줄여 줍니다.

문의 폼은 이름·연락처·문의 내용 세 칸입니다. 사진 첨부 칸도 켤 수 있는데 껐어요. 라멘집이 손님한테 사진을 받을 일은 드물고, 단체 예약이나 포장 문의는 몇 줄이면 되니까요.

4. 고친 것 전·후 — 첫 화면 사진과 분위기

예전 첫 화면은 낮 햇빛이 드는 밝은 매장 사진이었습니다(왼쪽). 지금은 등불 켜진 나무 카운터에 라멘 한 그릇이 놓인 사진이에요(오른쪽). 둘 다 시연용 분위기 사진이라, 실제로 쓰실 때는 이 자리에 가게 대표 한 그릇 사진을 넣으시면 됩니다.

편집 화면에 처음 들어가면 «처음 안내»에 할 일 네 가지가 뜹니다. 그중 하나가 «첫 화면을 우리 가게 사진으로 바꿔 보세요. 손님이 가장 먼저 봐요.»예요. 옆의 [해 보기 →]를 누르면 그 자리로 바로 갑니다.

분위기는 «디자인 › 분위기»에서 어두운 쪽을 밝은 쪽으로 바꿨습니다. 매장 소개와 만드는 법 칸이 환해졌고, 메뉴판만 일부러 어둡게 남겼어요.

5. 메뉴판은 가격까지 글자로

메뉴판은 «홈페이지 › 메뉴판»에서 고칩니다. 칸마다 이름, 가격, 한 줄 설명. 그림은 따로 안 골라도 «돈코츠 라멘»에는 «자동(라멘)», «매운 돈코츠 라멘»에는 «자동(매운 라멘)»이 붙습니다. 음식 사진이 있으면 [사진 올리기]로 바꾸면 되고요.

온스라멘야에는 돈코츠 라멘 9,500원, 매운 돈코츠 라멘 10,000원, 쇼유 라멘 9,000원, 차슈 덮밥 7,500원, 교자 5,500원에 추가 메뉴와 음료까지 열 가지를 넣었습니다. 메뉴판은 사진 한 장으로 찍어 올리는 것보다 글자로 적는 편이 낫습니다. 휴대폰에서 글씨가 뭉개지지 않고, 가격이 바뀐 날 숫자 하나만 고치면 끝이거든요.

메뉴판 칸 오른쪽 위 ⋯ 단추를 누르면 «이 섹션 어두운 배경»이 나옵니다. 홈페이지는 밝은데 메뉴판만 짙은 바탕에 흰 글씨라, 스크롤하다가도 여기가 메뉴판이구나 하고 눈에 들어와요. 고친 내용은 미리보기에 바로 보이고, 위쪽 [사이트 반영]을 눌러야 손님 화면에 나갑니다.

6. 매장 사진 열다섯 장, 뒤에는 배경 사진 한 장

매장 사진 칸에는 열다섯 장이 들어 있습니다. 바 카운터, 육수 솥, 반숙 계란, 차슈. 그리고 그 뒤로 매장 사진 한 장이 어둡게 깔려 있어요.

이 배경은 «사진 갤러리» 칸의 «배경 사진»에서 넣고, 바꾸고, 뺍니다. 안 넣어도 그만이에요. «어둡게»에 체크하면 사진 위에 검은 막이 씌워지고 글씨가 흰색으로 바뀝니다.

7. 60초 영상 한 편이 홈페이지 숏폼과 SNS로

«사장님 이야기» 칸은 휴대폰에서 세로 영상이 화면을 꽉 채웁니다. 질문은 «오늘 첫 육수는 어떤 맛이었나요?» 여기 걸린 영상도 시연용으로 넣어 둔 것입니다.

영상은 «영상 › 내 영상»에서 찍습니다. [지금 60초 녹화하기]를 누르거나, [녹화 링크 복사]·[메일로 받기]로 받은 링크를 휴대폰에서 열면 바로 녹화가 시작돼요. 앱을 깔 필요가 없습니다. 얼굴이 안 나와도 되고, 국물 젓는 손만 찍어도 충분해요.

찍은 영상은 홈페이지에 걸립니다. 올릴 곳을 미리 골라 두면 [⚡ 한 방 등록] 한 번으로 유튜브·인스타·틱톡에 한꺼번에 올라가고, 스레드와 페이스북도 곧 함께 올라가게 됩니다. 같이 나갈 글과 해시태그를 비워 두면 질문 문장과 #온스라멘야, 홈페이지 주소 한 줄이 알아서 붙어요.

SNS는 «영상 › SNS 연결»에서 계정마다 [연결하기]를 한 번 누르면 되고, [연결 끊기]를 누르면 저장해 둔 열쇠까지 바로 지웁니다. 온스라멘야는 «내 영상» 목록이 아직 비어 있고 SNS도 연결하지 않았습니다. 그래서 이 부분은 기능 설명으로만 보여 드립니다.

8. 라멘집 홈페이지 체크리스트 7가지

① 영업시간과 쉬는 날은 첫 화면 바로 아래에.

② 브레이크타임과 라스트오더. 오후 헛걸음을 줄이는 두 줄입니다.

③ 메뉴와 가격은 사진 말고 글자로.

④ 대표 한 그릇 사진은 첫 화면에, 나머지는 매장 사진 칸에.

⑤ 예약·포장·주차는 «자주 묻는 질문»에 미리. 온스라멘야는 예약, 포장, 주차, 아이 동반, 국물 맛 다섯 가지를 적어 두었습니다.

⑥ 문의 폼은 짧게. 사진 받을 일이 없으면 첨부 칸은 끄기.

⑦ 한 달에 한두 번은 영상이나 글로 소식 올리기. 마지막 소식이 오래되면 손님은 «아직 하는 집인가?» 하고 망설이기도 합니다.

저희 온스토리는 가게 이름만 넣으면 이런 홈페이지가 만들어지고, 사장님이 직접 고치고, 60초 영상 한 편을 홈페이지와 SNS에 함께 올리는 서비스를 만들고 있습니다. 가입하면 30일 동안 무료로 써 보실 수 있고, 그 뒤로는 월 49,900원(부가세 포함)입니다. 온스라멘야는 onstori.com/onsramen 에서 열어 보실 수 있고, 시작은 onstori.com 에서 하시면 됩니다.