[🛠] 블로그 내부에 구현한 다이어트/식단 앱 MVP

✨ GPT-5.6 Sol의 요약 　

사진만 올리면 자동으로 쌓이지만 정작 읽지 않던 식단 기록을 블로그 안의 작은 앱으로 바꾸고, 내가 먼저 써보며 개선할 MVP를 만든 기록.

버전 1: 기록된 데이터는 많은데… 가독성은 똥망

2026년 6월 20일부터 몸 기록 및 먹은 음식을 기록하기 시작했다.

내가 음식 사진만 올리면 Codex가 알아서 FatSecret에서 영양소를 찾아 기록하고 하이퍼링크까지 걸어주니 작성 자체는 어렵지 않았다. 하지만 정작 가독성은 똥망이었다. 나도 안 읽었으니 아무도 안 읽었을 것이다.

버전 2: 먹은 음식 내역은 접고, 최근 7일을 붙이니, 개선된 가독성

그래서 2026년 7월 10일부터 형식을 바꿔봤다.

먹은 음식 내역은 접기/펼치기 기능으로 숨겨 AI가 훑기 위한 아카이브용으로 바꿔버렸다. 전체적인 가독성도 개선하고 최근 7일간의 변화까지 넣어보니, 나름대로 자가 피드백이 되기 시작했다.

‘아, 내가 실질적으로 어느 정도의 열량을 섭취했고, 그래서 몸무게가 어떻게 변했구나!’ 슬슬 보이기 시작했다.

그런데 여전히 뭔가 한눈에 들어오지 않는 느낌은 강했다. 뭔가 텍스트 기반이어서 그런 것 같았다. 어차피 Codex에 시키면 되니까, 한 번 페이지 안에 간단한 앱 스타일 뷰어를 구현해볼까 싶어졌다.

버전 3: 블로그 안에 작은 앱을 만드니, 매우 높아진 가독성

그래서 오늘부터 다음과 같이 바꿔봤다.

Codex에 내가 원하는 기능들을 하나하나 상세하게 설명하고 지속적으로 피드백하니, 1시간 만에 내가 원하던 수준의 결과물이 게시물 안에서 동작하기 시작했다.

이렇게 앱 화면으로 보니 내가 각 시간대별로 어떤 식사를 했는지, 어떤 음식을 먹었는지가 한눈에 들어왔다. 그러니 내 스스로도 충분히 자가 피드백을 할 수 있었다. 예전에 한창 잘 쓰던 필라이즈(Pillyze) 앱하고 많이 비슷해진 느낌이었다.

구현은 front matter에 기록하고, Liquid로 그렸다

보이는 건 앱 화면이지만, 입력 방식까지 별도의 앱으로 만든 건 아니다. 각 DR 마크다운 위쪽의 front matter에 body_review 데이터를 YAML로 적는다.

body_review:
  today:
    exercise:
      aerobic: []
      anaerobic: []
    nutrition:
      complete: true
      meals:
        - type: lunch
          foods:
            - name: 제육덮밥
              calories_kcal: 779
              macros_g:
                carbohydrate: 115.13
                protein: 29.85
                fat: 21.41

본문에서 HTML을 매번 반복하는 대신 Liquid의 {% include %}로 공용 뷰어를 한 번 부른다.

{% include body-review.html review=page.body_review %}

Jekyll이 빌드될 때 page.body_review가 _includes/body-review.html로 전달되고, 거기서 카드, 운동 내역, 식사 탭, 탄/단/지 그래프가 렌더링된다. 아침이나 야식처럼 기록이 없는 식사 탭은 아예 만들지 않는다. 음식별 열량과 탄/단/지만 적으면 식사별·전체 합계와 퍼센트도 렌더러가 계산한다. 별점과 식습관 판정은 화면이 멋대로 계산하지 않고, Codex가 다이어트 관점에서 판단한 값을 front matter에 직접 저장하도록 했다.

그러니 이후 DR에서는 같은 UI 코드를 복사할 필요 없이 그날의 데이터만 채우면 된다.

MVP 도그푸딩

앞으로도 좀 더 써보면서 불편한 점은 계속 개선할 예정이다. 추후 웹/앱이 연동되는 관련 서비스를 낼 수도 있겠다는 생각이 들었다.

이건 사실상 앱 개발에 들어가기 전에 진행하는 블로그 내부 MVP 앱이고, 일종의 도그푸딩¹ 과정이다. 시간 여유가 날 때마다 Codex + Flutter로 조금씩 네이티브/웹 앱을 만들고, 추후에는 블로그 내부에 내 앱 데이터를 임베딩할 수 있게 해야겠다.

참고 자료

1. 도그푸딩은 개발 중인 제품을 만든 사람이 실제 사용 환경에서 직접 써보며 가치와 사용성을 확인하는 방식이다. Microsoft Azure DevOps Blog의 Lean Product 설명에서도 MVP를 다듬기 전에 개발한 제품을 직접 사용하는 과정으로 소개한다. ↩