첫 서비스로 ‘오늘 뭐 먹지?’를 고른 이유

첫 서비스로 메뉴 추천을 고른 이유는 단순합니다.

“오늘 뭐 먹지?”는 자주 하지만 오래 고민하고 싶지는 않은 질문입니다. 메뉴 하나를 대신 골라 주는 것만으로도 바로 써볼 수 있고, 도움이 되는지도 금방 판단할 수 있습니다.

작은 기능을 끝까지 만들어 공개해 보려는 Go-To의 첫 실험과도 잘 맞았습니다.

처음 적은 기능은 한 문장이었습니다

음식 종류를 고르면 그 안에서 메뉴 하나를 뽑아 준다.

메뉴 추천 서비스라고 하면 주변 식당 검색, 거리 계산, 취향 분석, 예약 같은 기능도 떠올릴 수 있습니다. 하지만 이 기능들을 붙이기 시작하면 메뉴 하나를 고르는 도구가 아니라 식당 검색 서비스가 됩니다.

첫 버전에서는 사용자가 음식 종류를 고르고 버튼을 누르는 흐름만 남겼습니다. 위치 정보와 회원가입은 넣지 않았습니다. 식당을 추천하는 것이 아니라 지금 먹고 싶은 음식의 범위를 줄이는 것이 목표였기 때문입니다.

현재 메뉴는 한식, 분식, 중식, 일식 등 10개 종류로 나뉘어 있습니다. 전체 메뉴는 268개입니다.

브라우저 안에서 끝낸 추천 규칙입니다

메뉴 목록은 별도의 데이터베이스가 아니라 코드 안에 들어 있습니다. 사용자가 종류를 고르면 해당 목록에서 하나를 무작위로 뽑습니다.

추천 기록도 서버로 보내지 않습니다. 최근에 나온 메뉴 세 개만 지금 사용하는 브라우저의 localStorage에 저장합니다. 다른 사람이 같은 서비스에 접속해도 기록이 섞이지 않습니다.

메뉴를 고르는 도구에 계정을 만들 이유는 없다고 판단했습니다. 서버가 없어도 필요한 기능이 모두 동작했기 때문에 Vanilla JavaScript로 만든 정적 페이지로 공개할 수 있었습니다.

저장소 접근이 막혀 있거나 기존 기록이 손상된 경우에도 추천 기능은 계속 동작합니다. 이때는 현재 화면에서만 메뉴를 확인할 수 있고 최근 기록은 남지 않습니다.

처음 만든 버전은 목록에서 메뉴 하나를 단순히 뽑았습니다. 문제는 ‘다른 메뉴’를 눌렀는데 방금 본 메뉴가 다시 나올 수 있다는 점이었습니다.

그래서 직전에 나온 메뉴 하나는 다음 추천 후보에서 제외했습니다. 최근 기록에는 같은 메뉴를 중복해서 쌓지 않고 세 개까지만 남깁니다.

취향을 학습하거나 여러 날의 식사 기록을 분석하는 추천은 아닙니다. 다시 뽑기 버튼을 눌렀을 때 바로 같은 답이 나오는 일만 막았습니다.

더 긴 기간의 반복도 제외해야 하는지는 아직 정하지 않았습니다. 실제로 사용해 본 뒤 불편하다는 의견이 있을 때 검토하려고 합니다.

프롬프트와 개발 도구도 기록합니다

이번 서비스는 Codex 데스크톱 앱에서 대화하며 만들었습니다. 기능을 정하고 코드를 수정한 뒤, 같은 하네스에서 PowerShell 명령과 로컬 브라우저를 사용해 결과를 확인했습니다.

기능과 디자인을 실제로 바꾼 핵심 프롬프트는 아래와 같습니다. 읽기 쉽도록 띄어쓰기만 일부 정리했고 의미는 바꾸지 않았습니다.

“오늘 뭐 먹지? 서비스 디자인을 좀 수정하자. 우리 메인 블로그와 너무 비슷해. 5.6 Terra 이용해서 디자인 수정해.”

“처음에 간단하게 만든 프로그램은 우리 주변에 없는 음식들이 뜰 때 다시 골라야 하는데, 직전에 나온 메뉴는 다음 추천 후보에서 제외됐는지?”

“다른 유저들이 방문했을 때 각자 선택한 메뉴가 최근 메뉴로 저장되는지?”

“지금 보니까 메뉴 추천 서비스의 디자인이 Go-To의 메인 디자인과 너무 유사해서 서비스라고 생각이 안 드네.”

프롬프트에서 지정한 디자인 모델은 GPT-5.6 Terra였습니다. 다만 현재 저장소에는 각 응답을 실행한 모델 식별값이 남지 않기 때문에, 이 글에서는 ‘지정한 모델’로만 기록합니다. 실제 실행 모델을 별도로 증명할 수 있는 로그는 확인하지 못했습니다.

최종 구현과 검증에 사용한 하네스와 기술은 다음과 같습니다.

구분	사용한 항목	역할
AI 개발 환경	Codex 데스크톱 앱	요구사항 정리, 파일 수정, 빌드와 브라우저 검증
로컬 작업	PowerShell, Git	검사 명령 실행, 변경 확인과 버전 관리
사이트	Astro 7 정적 빌드	블로그와 서비스 페이지 생성
서비스 코드	Astro 마크업, CSS, Vanilla JavaScript	화면과 메뉴 추천 동작 구현
사용자 기록	localStorage	브라우저별 최근 메뉴 세 개 저장
배포	GitHub, Cloudflare Pages	main 브랜치의 정적 결과물을 공개

Figma 연동으로 디자인 시안을 만드는 방법도 시도했습니다. 하지만 이용 한도 때문에 최종 시안을 만들지 못했고, 실제 화면은 코드에서 직접 디자인한 뒤 브라우저 캡처로 확인했습니다. 따라서 Figma는 최종 결과에 사용한 도구가 아니라 시도했으나 미사용한 도구입니다.

블로그와 다른 모습의 서비스로 다시 만들었습니다

첫 화면은 Go-To 블로그와 같은 색과 카드 구성을 사용했습니다. 한 사이트 안에 있다는 점은 잘 보였지만, 별도의 서비스를 사용한다는 느낌은 약했습니다.

이번에는 서비스의 역할에 맞게 화면을 다시 나눴습니다. 노란 메뉴판에서 음식 종류를 고르고, 주황색 영수증 형태의 영역에서 결과를 확인합니다. Go-To 로고와 블로그 메뉴는 작은 제작자 링크로 줄였습니다.

Go-To의 네이비와 크림을 그대로 반복하는 대신 음식 도구에 맞는 별도 색을 정했습니다. 배경은 #FFF8E7, 메뉴판은 #FFD95A, 결과는 #FF6B4A, 보조 포인트는 #79D4C7, 외곽선과 글자는 #232323을 사용했습니다. 두꺼운 선과 단단한 그림자를 사용해 일반적인 블로그 카드보다 인쇄된 메뉴판에 가까운 인상을 만들었습니다.

기능의 순서는 그대로입니다.

음식 종류 선택 → 메뉴 추천 → 최근 메뉴 확인

서비스 화면에는 이 흐름만 남기고, 만든 이유와 개발 과정은 블로그에서 설명하기로 했습니다. 기능을 추가한 것이 아니라 블로그와 서비스의 역할을 분리한 수정입니다.

검증은 node --check .\메뉴추천\app.js와 npm run build로 진행했습니다. 글과 조회수 API 테스트, Astro 검사와 정적 빌드가 모두 통과했고, 로컬 브라우저에서는 카테고리 선택, 결과 표시, 재추천 시 직전 메뉴 제외, 최근 메뉴 갱신을 확인했습니다.

지금 확인하고 싶은 것은 하나입니다. 이 정도로 단순한 도구가 실제로 메뉴를 고민하는 시간을 줄여 주는지입니다.

‘오늘 뭐 먹지?’ 사용해 보기