SaaS & 외식업

Tableo

레스토랑의 QR 코드는 더 이상 PDF가 아니라 판매 채널이어야 했습니다.

연도
2026
제작 기간
9주
기술 스택
React · TypeScript · Vite · Supabase · Vercel
  • 프로덕트 디자인
  • 모바일 디자인
  • 개발
  • 데이터베이스
  • 결제
사이트 방문(새 탭)이와 같은 프로젝트 상담하기

Kayzen Web이 개발·운영하는 제품으로, 정식 도메인으로 옮기기 전까지 Vercel 미리보기 주소에서 제공됩니다.

https://tableo-sepia.vercel.app/
Tableo 웹사이트 메인 페이지 — SaaS & 외식업, Kayzen Web 제작
스캔 후 메뉴가 열리는 시간
< 1초
Lighthouse 성능
91/100
Lighthouse 접근성우리 기준인 95에 못 미칩니다. 각 레스토랑의 색상을 따르는 메뉴의 명도 대비가 지적된 항목이며, 다음 작업에서 기준에 맞출 예정입니다.
87/100
출발점

해결해야 했던 과제.

배경

Tableo는 레스토랑 테이블 위의 QR 코드를 완전한 인터페이스로 바꿉니다. 최신 메뉴, 주문, 결제, 리뷰 수집, 방문 데이터까지.

제약

QR 코드는 2020년 이후 평판이 좋지 않습니다. 처음에는 읽기 힘든 PDF를 띄우는 데 쓰였기 때문입니다. 제품은 시끄러운 홀, 한 손, 포화된 네트워크, 바쁜 손님이라는 불리한 상황에서, 모바일 첫 화면부터 그 기억을 지워야 했습니다.

해법

관리자 화면이 아니라 손님 화면부터 설계했습니다. 메뉴는 설치도, 계정도 없이 1초 안에 열리고, 한 손으로도 읽을 수 있습니다. 레스토랑 운영자용 대시보드는 그다음에, 손님 화면이 실제로 만들어 내는 데이터에 맞춰 설계했습니다.

주장이 아닌 측정

납품 시점에 측정한 점수.

운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.

PageSpeed
91
성능: 100점 만점에 91점
87
접근성: 100점 만점에 87점
100
권장사항: 100점 만점에 100점
100
검색엔진 최적화: 100점 만점에 100점
디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 엄지손가락을 위한 설계

    카테고리 내비게이션을 화면 하단, 엄지가 닿는 영역에 고정했습니다. 터치 영역은 최소 44px. 레스토랑 메뉴는 서서, 한 손으로, 다른 손에는 잔을 든 채 봅니다.

  2. 사진은 선택 사항, 필수가 아니게

    모든 요리의 제대로 된 사진을 가진 레스토랑은 드뭅니다. 메뉴는 이미지 없이도 우아하며, 사진이 있다면 그것은 보너스일 뿐 페이지의 구조가 아닙니다.

  3. 한눈에 읽히는 대시보드

    레스토랑 운영자는 영업과 영업 사이에 대시보드를 봅니다. 맨 위에 숫자 세 개, 나머지는 스크롤 아래에. 주의 깊게 읽어야 하는 그래프는 하나도 없습니다.

프로젝트 색상 팔레트

  • 세피아

    #7C4A21

    아이덴티티, 헤더

  • 크림

    #FBF7F0

    메뉴 배경

  • 잉크

    #1C1917

    텍스트

  • 오더 그린

    #15803D

    확인

타이포그래피 체계

제목용 서체

Outfit 700

본문용 서체

Inter 400

가격은 오른쪽 정렬된 고정폭 숫자로 표시합니다. 정렬이 어긋난 가격 열은 대충 만든 메뉴처럼 읽힙니다.

엔지니어링

보이지 않는 곳의 기술.

  • React
  • TypeScript
  • Vite
  • Supabase
  • Vercel

  1. Supabase 실시간

    주문은 실시간 구독으로 주방에 즉시 전달됩니다. 주기적 새로고침이었다면 가장 눈에 띄는 곳에 지연이 생겼을 것입니다.

  2. 매장별 데이터 분리

    행 단위 접근 정책: 한 레스토랑은 구조적으로 다른 레스토랑의 데이터를 읽을 수 없습니다. 멀티 테넌트 제품에서 이 규칙은 애플리케이션 코드가 아니라 데이터베이스에 속합니다.

  3. 외부 결제 대행

    카드 정보는 제품을 전혀 거치지 않습니다. 결제 대행사가 입력과 PCI 규정 준수를 맡습니다. 이 규모의 팀에게 유일하게 합리적인 선택입니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. SEO는 소프트웨어 판매를 위한 것

    레스토랑의 메뉴는 색인될 필요가 없습니다. 매일 바뀌고 어떤 검색어에도 답하지 않습니다. SEO는 “테이블 오더 솔루션”, “레스토랑 QR 메뉴” 같은 레스토랑 운영자의 검색어를 겨냥합니다.

웹 접근성

누구나 사용할 수 있도록.

2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.

  1. 메뉴의 명도 대비 재검토

    레스토랑 메뉴는 흰 바탕에 옅은 회색을 남용합니다. 가격과 알레르기 유발 성분 표시를 포함한 모든 색 조합이 4.5:1 이상입니다. 알레르기 정보의 가독성은 단지 편의의 문제가 아닙니다.

사이트 구조

납품한 결과물.

  • 제품 사이트
  • 손님 화면(QR)
  • 레스토랑 운영자 대시보드
  • 요금
  • 계정
방법론

프로젝트 진행 과정.

  1. 손님 화면

    관리자 화면 코드를 한 줄 쓰기 전에 매장에서 모바일 프로토타입 테스트.

  2. 관리자 화면

    메뉴, 카테고리, 품절 관리, 영업시간.

  3. 주문과 결제

    주방 실시간 연동, 결제 대행사.

  4. 분석

    방문 현황, 가장 많이 본 메뉴, 평균 객단가.

질문

자주 받는 질문.

아닙니다. 그리고 그것이 차이를 만드는 지점입니다. 스캔하면 웹 페이지가 열리고, 모든 것이 휴대폰 브라우저 안에서 이루어집니다. 설치형 앱이었다면 첫 주문 전에 손님 열 명 중 아홉 명을 잃었을 것입니다.

다른 작업

포트폴리오로 돌아가기

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

상담 예약하기요금 보기
공유