작년 11월 경 스타트업 실험실에서 진행한 <버블 찍먹하기> 강의를 준비하면서 실습용으로 만들어본 흑백요리사 검색앱입니다.
목적
흑백요리사의 이름과 가게 정보를 데이터베이스화하여, 사용자들이 검색을 통해 위치 정보 등을 손쉽게 찾을 수 있도록 하는 것이 목표입니다.
필요 자원
흑백요리사 관련 데이터
버블 io(무료버전)과 클로드 3.5 소넷 이용
2. 개발 프로세스
2.1 PRD(제품 요구사항 문서) 작성
클로드를 활용 하여 아래와 같은 내용을 포함한 PRD를 작성했습니다.
프로젝트 개요: 앱의 취지 및 핵심 목표
핵심 기능 지정: 검색 및 필터링 기능 중심
사용자 시나리오(UX): 사용자가 어떻게 검색하고 정보를 찾는지 정의
사용자 화면 구성(UI): 앱의 주요 화면 레이아웃 설계
데이터베이스 구조도: 데이터 항목 정의 및 관계 설정
전체 프로젝트 문서는 다음과 같습니다.(다만 개발 과정에서 변형됨)
이 프로젝트 문서를 프로젝트 지식으로 첨부후 참고하면서 개발 상황을 보도록 시킵니다.
# 흑백요리사 앱 프로젝트 문서
## 프로젝트 개요
- 프로젝트명: 흑백요리사
- 개발 플랫폼: Bubble.io
- 목적: 요리사 정보 검색 서비스 및 Bubble.io 교육용 샘플 앱
- 타겟 디바이스: 모바일 중심 (최대 너비 420px)
## 1. 제품 요구사항 문서 (PRD)
### 1.1 기본 정보
- 앱 이름: 흑백요리사
- 개발 목적:
* 흑백요리사 정보 검색 서비스 제공
* Bubble.io 교육용 샘플 앱 개발
- 주요 사용자:
* 1차 대상: 흑백요리사 정보를 찾는 일반 사용자
* 2차 대상: Bubble.io 학습자
### 1.2 데이터베이스 구조 (Chef_DB)
필수 필드:
- Name (Text): 요리사 이름/별명
- Restaurant (Text): 매장명
- Address (Text): 주소
- Region (Text): 지역 [서울/제주/기타]
- Naver_Map_URL (Text): 지도 링크
선택 필드:
- Alias (Text): 추가 별명
- Restaurant_Image (Image): 매장 이미지
### 1.3 페이지 구조
#### A. 메인 페이지 (Home)
1. 히어로 섹션
- 앱 소개 문구
2. 검색 섹션
- 통합 검색창
- 검색 옵션: 이름/별명, 가게명
3. 전체 리스트 버튼
#### B. 목록 페이지 (List)
1. 검색 영역
- 요리사 이름 전용 검색창
2. 필터 영역
- 지역 필터 드롭다운
3. 리스트 표시
- 페이지당 10개 항목
- URL 파라미터 방식 페이지네이션
#### C. 상세 페이지 (Detail)
1. 매장 이미지 섹션
2. 정보 섹션
- 가게명
- 요리사 이름/별명
- 주소
- 네이버 지도 링크
## 2. 디자인 시스템 가이드
### 2.1 색상 팔레트
메인 컬러:
- 블랙: #2B2F33 (주요 텍스트, 헤더)
- 화이트: #FFFFFF (배경, 카드)
그레이 스케일:
- Grey/900: #2B2F33 (주요 텍스트)
- Grey/500: #727982 (보조 텍스트)
- Grey/300: #AFB6BC (비활성 텍스트)
- Grey/100: #ECEFF1 (구분선, 배경)
### 2.2 타이포그래피 (Pretendard)
- 제목(H1): 20px Bold (#2B2F33)
- 서브제목(H2): 17px Bold (#2B2F33)
- 본문: 15px Regular (#2B2F33)
- 보조텍스트: 13px Regular (#727982)
- 버튼텍스트: 16px Bold
- 라벨: 12px Medium (#727982)
### 2.3 컴포넌트 스타일
#### 카드 디자인
- 배경: #FFFFFF
- 패딩: 16px
- 여백: 하단 8px
- 그림자: 0 1px 3px rgba(0,0,0,0.1)
#### 버튼
- 높이: 48px
- 패딩: 좌우 16px
- 보더 레디우스: 8px
#### 검색창
- 높이: 44px
- 배경: #ECEFF1
- 보더 레디우스: 8px
- 패딩: 좌우 16px
## 3. 개발 계획
### 3.1 Phase 1: 기본 기능 개발
1. 데이터베이스 설정
- CSV 데이터 임포트
- 필드 타입 설정
- 옵션셋 설정
2. 메인 페이지 구현
- 420px 고정 레이아웃
- 히어로 섹션
- 검색 기능
3. 목록 페이지 구현
- 리스트뷰
- 필터링
- 페이지네이션
4. 상세 페이지 구현
- 정보 표시
- 네이버 지도 연동
### 3.2 Phase 2: 이미지 통합
- 이미지 필드 추가
- 이미지 업로드
- UI 업데이트
### 3.3 개발 우선순위
1. MVP 구현 (3일)
- Day 1: 데이터베이스 및 기본 레이아웃
- Day 2: 검색 및 리스트 기능
- Day 3: 상세 페이지 및 네비게이션
## 4. 참고 사항
- CSV 데이터 파일: new_restaurant_list_최종.csv
- 디자인 참고: 당근마켓 모바일 앱
- 반응형 제한: 420px 고정 너비
## 5. 체크리스트
- [x] PRD 문서 작성
- [x] 디자인 시스템 정의
- [x] 데이터 구조 설계
- [ ] Bubble.io 프로젝트 생성
- [ ] 개발 환경 설정2.2 기능 구현
1) 메인 페이지
히어로 섹션
검색창 이동 버튼
업종별 리스트
2) 목록 페이지
검색창(요리사명 또는 가게명 검색 가능)
필터링 검색 결과 구현
3) 상세 페이지
메인 이미지
가게 세부 정보
네이버 지도에서 위치 확인 기능 추가
4) 하단 메뉴 바
홈, 음식점 검색, 콘텐츠 검색, 마이페이지로 구성
메뉴 바하고 가게 리스트는 리유저블 엘레먼트로 따로 뺐습니다. (반복사용위함)
2.3 데이터베이스 설계
데이터 항목: 요리사 이름/별명, 가게명, 주소, 지역, 메인 이미지, 업종, 네이버 지도 링크
구현 방법: 복잡한 기능 대신 Option Set과 Repeating Group을 적극 활용
필터링 방식: 간단한 Option Set 기능을 활용하여 빠르게 구현했지만, URL 파라미터 방식과 AI 기반 추천 기능을 추가했으면 더욱 고도화된 검색이 가능했을 것으로 판단됨
먼저 DB를 세팅하지 않고, CSV로 정리해둔 흑백요리사 가게 리스트를 전달해서 구조를 짜기 쉽게 만들었습니다.
한정된 속성값은 그냥 옵션 셋으로
2.4 디자인
기 존 당근마켓 클론 연습 시 사용했던 UI 요소(버튼, 필터링, 옵션셋)를 재사용
디자인 참고 자료: 당근마켓 앱 캡처본을 클로드에 제공하여 와이어프레임 생성
브랜드 색상 팔레트: 블랙 & 화이트 & 그레이 콘셉트로 설정
내가 원하는 대로 나오지 않아 수정이 많이 필요했어요.
3. 개발 진행 과정
클로드의 와이어프레임을 참고하되, 세부 수치는 기존 앱 클론에서 차용
한 장씩 진행 과정을 공유하며 대화하며 조정
검색 기능 구현이 가장 어려운 부분이었음: 워크플로우, 카테고리 버튼 설정 등에서 많은 논의 진행
데이터베이스는 상대적으로 간단하게 세팅했으나, 데이터 수집이 수작업이 많아 어려움 발생
Option Set, Custom State 설정을 적극 활용
버블(Bubble)의 기능 설명이 한국어 번역이 부족하여 일부 개념을 이해하는 데 어려움
기능 구현 단계별로 클로드와 논의하며 진행
4. 어려웠던 점
필터링 기능: Option Set을 활용해 빠르게 구현했으나, URL 파라미터 방식 및 AI 추천 기능 추가를 고려할 필요가 있음
"Do a search for" 활용의 어려움: 보다 효율적인 검색 쿼리 작성 필요
Properties 활용: 추가적인 학습 필요
5. 배운 점
클로드를 활용하면 전체적인 구조를 빠르게 잡을 수 있 음: 직접 처음부터 설계하는 것보다 효율적
워크플로우 세부 구현은 일반 코딩보다 직관적이지 않음: 개발 방식의 차이점을 이해하고 적응 필요
버블(Bubble)에 대한 기초 지식이 쌓이면 충분히 개발 가능: 지속적인 학습을 통해 더욱 정교한 앱 개발이 가능할 것으로 기대
참고 사례
유튜브 "노코드 마케터"님 클론 강의 참고
클래스101 "정용준"님 버블 강의 참고
앱 시연 : https://blackandwhite-89386.bubbleapps.io/version-test