[AI 바이브 코딩] 레시피 추천
Figma Make 사용해보기
삼시세끼를 차려먹는 게 정말 큰 일이다. 매일 같은 걸 먹기는 싫지만 새로운 메뉴 아이디어가 잘 떠오르지 않는다. 냉장고에 있는 재료로 무엇을 만들어먹을 수 있을지 AI한테 자주 물어봤는데 바이브 코딩으로 앱을 한 번 만들어보기로 했다.
가볍게 PRD를 작성하고 목업을 만들어보는 것이 목표였다. 처음에는 가볍게 요구사항을 넣고 필요한 부분을 추가 프롬프팅 하며 진행했다. 초안을 잡을 때는 30분 정도밖에 안걸렸는데, 세부사항을 추가하는 것이 더욱 오래 걸렸다.
그렇게 완성된 목업이다
1. 꼼꼼하게 작성한다고 해도 PRD를 작성하다보면 놓치는 부분이 생긴다. Figma에서 설계가 없는 부분을 어느 정도 자동으로 채워주기도 하고, 목업을 보면서 바로바로 추가 설계가 필요한 부분을 확인할 수 있어서 좋았다.
2. AI는 보통 블랙박스이다. 그래서 결과를 확인할 수 있지만 왜 그러한 결과가 나왔는지 알기 어렵다. Figma 에서는 사고 과정(reasoning)과 구현된 기능을 구체적으로 설명해줘서 추가 수정하기 편했다.
3. 새로운 목업이 나올 때마다 버전이 저장된다. 이전 버전으로 돌아가서 확인하는 것이 쉬웠다.
4. 그런데 목업 버전이 바뀔 때마다 요청하지 않은 부분의 기능이 같이 바뀌는 경우가 종종 있었다. 아직은 MVP 혹은 내부 커뮤니케이션 용도로 적합하지 않으까 싶었다.
5. 그래서인지 개별 요소를 클릭하여 수정을 요청하거나 (프롬프트를 작성하여) 직접 수정할 수 있는 기능이 있었다.
6. 그래도 여전히 꼼꼼하게 PRD를 작성하는 능력이 중요해 보인다. 구체적으로 프롬프팅을 해줄수록 완성도 높은 목업이 나왔다.
7. 내 서비스에서는 로그인 상태에 따라 유저 저니가 달랐다. 이 경우에는 각각을 정의해주고, 하나의 테스트 계정을 만들어서 로그인 기능을 체크할 수 있었다.
8. 나는 글로만 가이드를 줬지만 이미 존재하는 서비스를 업데이트 하거나 레퍼런스 하고 싶은 서비스가 있다면 이미지를 업로드 할 수도 있다.
9. 나의 프롬프팅을 정리해서 하나의 PRD로 추출할 수 있는 기능이 있으면 매우 유용할 것 같다.
목업을 실제로 확인해볼 수 있다
1. 메인
1. 사진 업로드 및 촬영
상단에 "오늘 뭐 먹지?" 문구가 노출된다.
문구 하단에 카메라 이미지가 있다.
해당 이미지를 클릭하면 사진 촬영 또는 사진 선택이 가능하다.
사진 촬영은 최대 2장까지 가능하며, 이미 촬영한 사진은 X 버튼을 눌러 삭제할 수 있다.
사진 선택 또한 최대 2장까지 가능하며, 선택한 사진은 X 버튼을 눌러 삭제할 수 있다.
동일한 이미지(중복 이미지)는 업로드할 수 없으며, 업로드 시 안내 메시지를 노출한다.
2장 초과 업로드 시 추가 업로드가 제한되며, 안내 메시지를 노출한다.
이미지 선택이 완료되면 [완료] 버튼을 눌러 다음 단계로 진행한다.
2. 네비게이션 바
하단에 좋아요, 홈, 회원정보가 노출된다.
메인 페이지, 추천 레시피 페이지, 레시피 페이지, 로그인 페이지, 좋아요 페이지에 노출된다.
2. 추천 레시피
1. 레시피 생성
레시피 생성 중 로딩 화면을 노출한다.
이미지 업로드부터 추천 결과 노출까지의 목표 시간은 3~5초이다.
2. 레시피 추천
추천 결과 화면 진입 시, skeleton UI(카드 5개 placeholder)를 먼저 노출하여 로딩 상태를 표현한다.
업로드된 이미지를 분석하여 추천 메뉴 10개를 노출한다.
추천 메뉴는 추가 재료 없이 만들 수 있는 메뉴를 우선순위로 정렬한다.
동일한 조건일 경우, 메뉴는 랜덤으로 노출된다.
하단에는 [다시보기] 버튼이 있으며, 클릭 시 새로운 추천 메뉴를 제공한다.
재료 인식에 실패한 경우: "재료를 인식하지 못했어요. 다시 찍어주세요.” 메시지를 노출한다.
재료가 부족하여 추천이 어려운 경우: 기본 추천 메뉴를 대신 노출한다.
레시피 생성에 실패한 경우: “레시피를 불러오지 못했어요. 다시 시도해주세요.” 메시지를 노출한다.
3. 레시피 상세
메뉴를 선택하면 레시피 상세 페이지로 이동한다.
레시피는 영상, 이미지, 텍스트로 구성된다.
뒤로가기를 선택하면 이전 추천 메뉴 리스트 화면으로 돌아간다. 원래 보고 있던 영역으로 떨어진다.
추천 결과는 세션 내에서 캐싱되며, 뒤로가기 시 재로딩 없이 즉시 노출된다.
4. 좋아요
1. 좋아요 페이지
좋아요 페이지에서 대표 이미지와 메뉴명을 기준으로 리스트 형태로 노출된다.
정렬 기준은 최신순 / 가나다순을 선택할 수 있다.
각 메뉴 카드에는 하트 아이콘이 표시되며, 기본적으로 채워진 상태로 노출된다.
2. 좋아요
추천목록 및 레시피 상세에서 메뉴에 좋아요를 누를 수 있다.
로그인한 경우: 좋아요 탭에 즉시 저장되며 현재 화면은 유지된다.
로그인하지 않은 경우: 로그인 화면으로 이동하며, 로그인 완료 후 좋아요가 저장되고 기존 화면으로 복귀한다.
3. 좋아요 취소
하트 아이콘을 다시 클릭하면 좋아요가 해제되며, 아이콘은 빈 상태로 변경된다.
좋아요 취소한 이후 페이지를 새로고침하면 해당 메뉴는 리스트에서 제거된다.
5. 로그인
아이디와 비밀번호를 입력하여 로그인한다.
아이디 입력 필드와 비밀번호 입력 필드가 노출된다.
하단에 [로그인하기], [아이디/비밀번호 찾기] 버튼이 있다.
로그인 기능 테스트를 위하여 테스트 아이디 test 비밀번호 test 생성한다.
상단에 [뒤로가기] 버튼이 노출된다. 클릭 시 원래 보던 페이지로 랜딩된다.
로그인 버튼 하단에 [회원가입 하기] 버튼이 노출된다.