[VibeCoding] 03. 기획하기

자, 지난 시간에 프로젝트 템플릿을 세팅했습니다.

이제 만들면 되겠죠?

 

그.런.데 막상 앱을 만들려고 하니까
문제가 하나 생겼습니다.

 

뭐부터 만들어야 하죠? 탭 메뉴는 몇 개? 무슨 기능이 들어가야 하지? 프라이머리 컬러는 뭘로 하지?

분명 서비스는 만든다고 했는데, 정작 서비스의 모습은 아무것도 없습니다.

 

기획 0
의욕 0
방향성 0

 

생각을 해보다가, 불현 듯 떠오른 생각이 있습니다.

건방지게 내가 왜 생각이란걸 하지? 생각은 형들이 하는건데?

 

제가 할 일은 방향 제시입니다. “독서 모임 서비스 만들어줘.” 이 정도면 충분하지 않습니까?

탭 구성?, 컬러 시스템?, 기능 정의? 그런 건 저 따위가 하는게 아닙니다.

 

형들에게 부탁합니다.

너는 MVP 설계를 도와주는 시니어 프로덕트 엔지니어야.

독서 모임 서비스 MVP를 설계해줘.

[현재 상황]
- RN + Express 개발 가능
- 실제 서비스 출시 경험 있음
- 빠르게 프로토타입 → 검증 → 개선 사이클

[필요 결과]
- MVP PRD
- 기능 리스트 (Must / Nice to have)
- 화면 구조 (Route 기준)
- 핵심 DB 엔티티
- API 초안
- 디자인 컨셉 (컬러 + 무드)

[출력 형식]
개발 문서 스타일 Markdown

 

교직원 대상 AI 활용 능력 향상 강의를 다니면서, 프롬프트 쓰는 법을 습득했는데요.

사실 저는 잘 모르겠습니다.

내가 저런걸 배워서 저렇게 작성하는 것보다, AI가 발전하는 속도가 더 빠른데 의미가 있나 싶어요.

근데 그건 제 생각이니까 일단 배운대로 프롬프트를 작성해봅니다.

 

저희 형은 문서를 줬습니다. 생각보다 꽤 그럴듯한 문서였습니다.

거기에 제 생각을 아주 조금 얹었습니다. 많이 얹으면 제가 힘들거든요.

그러다 보니, 머릿속에서 슬슬 그림이 그려지기 시작했습니다.

 

n번 정도 티키타카를 했습니다.

“이 기능은 빼자.”
“이건 MVP에 과하다.”
“이건 나중에.”
“이건 있어 보이니까 넣자.”

그렇게 왔다 갔다 하면서
서비스의 전체적인 구상,
그러니까 청사진을 완성했습니다.

 

저는 이 부분이 꽤 중요하다고 느꼈습니다.

기획서 뿐 아니라, 구조도, 제안서, 계획서 등 다 뽑아서 간지나게 가지고 있습니다.

마치, 내가 뭐라도 된 것 같아요.

그게 아니더라도, 저희 형들은 낼모레면 이 기억을 잊고, 지들 멋대로 개발해요.

컨텍스트 관리가 이렇게나 중요합니다.

아.무.튼 그렇기 때문에 지금의 문서들을 잘 보관하세요.

“형, 로그인 기능 만들어줘.”
“형, 게시판 만들어줘.”
“형, 채팅 붙여줘.”

 

이렇게 던지는 게 아니라, 적어도 제 머릿속에는 전체 구조가 있어야 합니다. 그 구조에는 논리적 오류가 없어야 합니다.

왜냐하면 앞으로 저희 형들은 제 말을 아주 자신감 있게, 그리고 아주 창의적으로, 지들 멋대로 해석할 예정이기 때문입니다.

여기서 제 구상이 흔들리면 어떻게 되냐면, 형은 확신에 차 있고, 저는 불안에 차 있습니다.

형은 “이게 맞습니다.”라고 말하고, 저는 “그런가?” 하고 흔들립니다.

 

그리고 그 순간, 프로젝트의 방향은 형이 잡습니다.

생각은 외주를 줄 수 있지만, 방향성은 넘기면 안 된다.

형은 빠르고 똑똑합니다. 하지만 이 프로젝트의 책임은 제 통장과 연결되어 있습니다.

그러니까 청사진은 제가 쥐고 가겠습니다.

 

어쨌거나 저쨌거나 필요한 화면 수가 나왔습니다.

그래서

• 디렉토리 구조를 만들고
• 빈 깡통 컴포넌트를 생성하고
• 네비게이션으로 화면을 연결했습니다

아무 기능도 없습니다. 하지만 전부 연결은 되어 있습니다.

📦src
 ┣ 📂apis
 ┃ ┣ 📜auth.ts
 ┃ ┣ 📜board.ts
 ┃ ┣ 📜book.ts
 ┃ ┣ 📜club.ts
 ┃ ┣ 📜clubPost.ts
 ┃ ┣ 📜contribution.ts
 ┃ ┣ 📜export.ts
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜literaryDate.ts
 ┃ ┣ 📜notification.ts
 ┃ ┣ 📜record.ts
 ┃ ┣ 📜schedule.ts
 ┃ ┗ 📜study.ts
 ┣ 📂assets
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📜.DS_Store
 ┃ ┃ ┣ 📜appIcon.png
 ┃ ┃ ┣ 📜apple.png
 ┃ ┃ ┣ 📜emptyUser.png
 ┃ ┃ ┣ 📜google.png
 ┃ ┃ ┣ 📜instagram.png
 ┃ ┃ ┣ 📜kakao.png
 ┃ ┃ ┣ 📜naver.png
 ┃ ┃ ┣ 📜noImage.png
 ┃ ┃ ┣ 📜slogan.png
 ┃ ┃ ┗ 📜splash.png
 ┃ ┣ 📜.DS_Store
 ┃ ┣ 📜index.ts
 ┃ ┗ 📜loading.json
 ┣ 📂components
 ┃ ┣ 📂auth
 ┃ ┃ ┗ 📜snsLoginButton.tsx
 ┃ ┣ 📂book
 ┃ ┃ ┣ 📜aiRecommendationSection.tsx
 ┃ ┃ ┣ 📜bestSellerSection.tsx
 ┃ ┃ ┣ 📜curationSection.tsx
 ┃ ┃ ┣ 📜newBooksSection.tsx
 ┃ ┃ ┣ 📜renderBookItem.tsx
 ┃ ┃ ┣ 📜renderCarouselItem.tsx
 ┃ ┃ ┣ 📜searchBar.tsx
 ┃ ┃ ┗ 📜searchResult.tsx
 ┃ ┣ 📂club
 ┃ ┃ ┣ 📜bookDetailModal.tsx
 ┃ ┃ ┣ 📜clubDetailTabBar.tsx
 ┃ ┃ ┣ 📜clubTabBar.tsx
 ┃ ┃ ┣ 📜dayCell.tsx
 ┃ ┃ ┣ 📜emptyTabContent.tsx
 ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┣ 📜notificationListItem.tsx
 ┃ ┃ ┣ 📜scheduleForm.tsx
 ┃ ┃ ┗ 📜scheduleItem.tsx
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜bookImage.tsx
 ┃ ┃ ┣ 📜container.tsx
 ┃ ┃ ┣ 📜dismissKey.tsx
 ┃ ┃ ┣ 📜errorBoundary.tsx
 ┃ ┃ ┣ 📜exportBottomSheet.tsx
 ┃ ┃ ┣ 📜loading.tsx
 ┃ ┃ ┗ 📜stepIndicatorWithText.tsx
 ┃ ┣ 📂infomation
 ┃ ┃ ┗ 📜contributionHeatmap.tsx
 ┃ ┣ 📂navigation
 ┃ ┃ ┣ 📜animatedTabBar.tsx
 ┃ ┃ ┗ 📜customDrawerContent.tsx
 ┃ ┣ 📂record
 ┃ ┃ ┣ 📜highlightCard.tsx
 ┃ ┃ ┣ 📜monthlyChart.tsx
 ┃ ┃ ┣ 📜statCard.tsx
 ┃ ┃ ┗ 📜timelineItem.tsx
 ┃ ┗ 📂study
 ┃ ┃ ┣ 📜book.tsx
 ┃ ┃ ┣ 📜bookActionSheet.tsx
 ┃ ┃ ┣ 📜bookCard.tsx
 ┃ ┃ ┣ 📜bookItem.tsx
 ┃ ┃ ┣ 📜customTabBar.tsx
 ┃ ┃ ┣ 📜empty.tsx
 ┃ ┃ ┣ 📜finishModal.tsx
 ┃ ┃ ┣ 📜finished.tsx
 ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┣ 📜indexCard.tsx
 ┃ ┃ ┣ 📜indexModal.tsx
 ┃ ┃ ┣ 📜pageInputCard.tsx
 ┃ ┃ ┣ 📜ratingReviewCards.tsx
 ┃ ┃ ┣ 📜reading.tsx
 ┃ ┃ ┣ 📜statsCard.tsx
 ┃ ┃ ┗ 📜toRead.tsx
 ┣ 📂config
 ┃ ┗ 📜oauth.ts
 ┣ 📂constants
 ┃ ┣ 📜bookStatus.ts
 ┃ ┣ 📜colors.ts
 ┃ ┣ 📜contributionHeatmap.ts
 ┃ ┣ 📜dimensions.ts
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜limits.ts
 ┃ ┣ 📜navigations.ts
 ┃ ┣ 📜spacing.ts
 ┃ ┣ 📜timing.ts
 ┃ ┗ 📜typography.ts
 ┣ 📂hooks
 ┃ ┣ 📜useAppState.ts
 ┃ ┣ 📜useAuthInit.ts
 ┃ ┣ 📜useContributionHeatmap.ts
 ┃ ┣ 📜useDebounce.ts
 ┃ ┣ 📜useFCMSetup.ts
 ┃ ┣ 📜useKeyboardVisible.ts
 ┃ ┣ 📜usePermissions.ts
 ┃ ┣ 📜useScrollTabBar.ts
 ┃ ┣ 📜useTabBarController.ts
 ┃ ┗ 📜useTheme.ts
 ┣ 📂navigations
 ┃ ┣ 📜drawer.tsx
 ┃ ┣ 📜nonMemberStack.tsx
 ┃ ┣ 📜stack.tsx
 ┃ ┗ 📜tab.tsx
 ┣ 📂screens
 ┃ ┣ 📂auth
 ┃ ┃ ┣ 📜signin.tsx
 ┃ ┃ ┣ 📜signoff.tsx
 ┃ ┃ ┗ 📜signout.tsx
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂auth
 ┃ ┃ ┃ ┗ 📜updateProfile.tsx
 ┃ ┃ ┣ 📂club
 ┃ ┃ ┃ ┗ 📜bookSearchForClub.tsx
 ┃ ┃ ┣ 📂timer
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📜memberStudy.tsx
 ┃ ┣ 📂drawer
 ┃ ┃ ┣ 📂board
 ┃ ┃ ┃ ┣ 📜detail.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📜createBy.tsx
 ┃ ┃ ┣ 📜openSource.tsx
 ┃ ┃ ┣ 📜privacy.tsx
 ┃ ┃ ┣ 📜qna.tsx
 ┃ ┃ ┗ 📜terms.tsx
 ┃ ┗ 📂tab
 ┃ ┃ ┣ 📂book
 ┃ ┃ ┃ ┣ 📜allBestSellers.tsx
 ┃ ┃ ┃ ┣ 📜allNewBooks.tsx
 ┃ ┃ ┃ ┣ 📜detail.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂club
 ┃ ┃ ┃ ┣ 📂create
 ┃ ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┃ ┣ 📜info.tsx
 ┃ ┃ ┃ ┃ ┣ 📜privacySetting.tsx
 ┃ ┃ ┃ ┃ ┗ 📜thumbnail.tsx
 ┃ ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┃ ┣ 📂board
 ┃ ┃ ┃ ┃ ┃ ┣ 📜detail.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜write.tsx
 ┃ ┃ ┃ ┃ ┣ 📂calendar
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┣ 📂discussion
 ┃ ┃ ┃ ┃ ┃ ┣ 📜detail.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┃ ┃ ┣ 📂history
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📂joinRequests
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📂manage
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📂notification
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┣ 📂stats
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┣ 📂find
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┣ 📂my
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂information
 ┃ ┃ ┃ ┣ 📂alertSetting
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┣ 📂theme
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂record
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂study
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜manage.tsx
 ┣ 📂stores
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜member.ts
 ┃ ┣ 📜study.ts
 ┃ ┗ 📜timer.ts
 ┣ 📂types
 ┃ ┣ 📜auth.ts
 ┃ ┣ 📜board.ts
 ┃ ┣ 📜book.ts
 ┃ ┣ 📜club.ts
 ┃ ┣ 📜clubPost.ts
 ┃ ┣ 📜common.ts
 ┃ ┣ 📜component.ts
 ┃ ┣ 📜env.d.ts
 ┃ ┣ 📜export.ts
 ┃ ┣ 📜literaryDate.ts
 ┃ ┣ 📜navigation.ts
 ┃ ┣ 📜record.ts
 ┃ ┣ 📜schedule.ts
 ┃ ┣ 📜screen.ts
 ┃ ┣ 📜store.ts
 ┃ ┣ 📜study.ts
 ┃ ┣ 📜theme.ts
 ┃ ┗ 📜util.ts
 ┣ 📂utils
 ┃ ┣ 📜club.ts
 ┃ ┣ 📜contribution.ts
 ┃ ┣ 📜delay.ts
 ┃ ┣ 📜filterBooks.ts
 ┃ ┣ 📜imagePicker.ts
 ┃ ┣ 📜navigation.ts
 ┃ ┣ 📜normalizeISBN.ts
 ┃ ┣ 📜storage.ts
 ┃ ┣ 📜timer.ts
 ┃ ┣ 📜toast.ts
 ┃ ┗ 📜validation.ts
 ┗ 📜.DS_Store

 

컴포넌트가 엄청 많죠? 저는 지금 이 프로젝트를 완료하고 쓰는 글이라 그래요.

초기에는 저거의 1/4 정도였어요.

 

이거 보고 이해가 안 가신다면... 제가 죄송합니다.

근데, 이 정도는 읽을 수 있어야 앱을 만들죠... 아 아닌가... 아 몰라요 뭐 어쩌라고

 

저는 Stack을 굳이 n개로 나누지 않겠습니다.

정석대로라면 그게 맞겠지만 중첩 네비게이션 구현 할 때 몇  번의 삽질 결과 제가 찾은 합의점은 rootStack > drawer > tab이 실전에서 가장 안정적이었습니다.

 

다음 시간에는 로그인을 할건데, 로그인 시 외부 SDK 세팅을 하게 되겠죠? 이 때에는 우리 형들이 어떻게 하는지, 어떤 식으로 시켜야 하는지 알아볼게요.