1인 앱 개발 '쑥쑥약속' 회고

1인 앱 개발? 회고를 시작하며..

안녕하세요! 로우 입니다. 최근에 1인 앱 개발 및 바이브 코딩 ,mcp 등 AI 기술이 발달하면서 작업 효율이 증가하였습니다. 저 또한 작업할 때, AI의 도움을 많이 받고 여러 현업에 종사하시는 분들도 이제는 AI의 도움이 없으면 안된다고 하는 사람도 많아졌습니다.

이런 현상은 좋은 걸까요? 나쁜 걸까요?

이번 제 회고 글을 보면서 생각해보시면 좋을 것 같아요. 시작하겠습니다 !

뭐 만들지

최근 프로젝트로 CS morning을 만들면서, 혼자서 개발하는데 재미가 생겼습니다. 실제 서비스를 운영하면서 사람들의 반응도 보니 무언가를 이뤄낸 것만 같은 도파민 이 있었습니다.

그리고 만들면서 배워고 잦은 에러를 고치면서 개선하고 학습하니 더욱 도파민 이 오는 것 같습니다.

지금까지 저는 무언가를 배워서 완성을 하고? 그 경험치는 고스란히 저한테 녹여내는 것을 잘합니다. 그리고 반드시 그 기술은 다음 프로젝트 에서 사용합니다.

내가 뭐가 부족하더라

프로젝트를 만들더라도 부족한 부분을 공부하면서 만들어 내고 싶었습니다. CS morning 을 만들 기 전에는 스스로 부족했다고 느끼는 것은 전반적인 벡엔드 기술 이었습니다.

그래서 처음에는 연습도해보고 무작정 AI만 믿고 만들어보자하고 내 브랜드로 쇼핑몰 만들기부터 CRUD를 천천히 진행했습니다.

그리고 기본적인 기능들부터 열심히 만들었습니다.

근데 실패했습니다. 문제는 총 3가지 였습니다..

첫번째

엉망 진창 테이블 구조

사실 erd 다이어그램은 그림으로 보면 복잡하지만, 제가 만든건 괴물이었습니다. 생각보다 상품 과 상품의 하위 카테고리,다양한 옵션(컬러, slug, 사이즈) 등을 깔끔한 관계구조로 만드는 것은 AI만 믿고 만드는데 역시 불가능에 가까웠습니다. 또한 테스트 할때마다, 상품을 처음부터 만들고, 테스트 데이터들도 일관된 규칙이 정리되어 있지않아 피로감이 쌓였습니다.

그러다보니 어디가 문제인지, 뭐가 문제인지 하나도 모르는 부분도 많았습니다.

깨달음 : 테이블 구조 기획 잘하자. 데이터가 들어오고 나가는 구조를 확실하게 하려면 Front,Back 폴더의 구조 및 네이밍을 정확하게 하자.

두번째

혼자 하는데 지나친 Rule

팀원들과 함께 프로젝트를 만들 때, git 전략을 잘 세워서 작업하다보니 이게 정답이구나 생각하여 프로젝트 만들고, 기능들을 issue에 등록하고 new branch파서 작업하고 main에 merge하면서 작업했습니다. 물론 issue,PR 할 때도 꼼꼼히 적으면서 작업했습니다.

Code Review는 누가 해줘요? Github Copilot이 해줘서 외롭지는 않았습니다.

이런 과정은 혼자서 토이 프로젝트를 진행하는데 너무 엄격 하다고 느꼈습니다.불필요한 시간 지출이 있다보니 자연스럽게 제 피곤함도 늘어갔습니다 ;3; ..

깨달음 : 정답은 없다. 개발은 지치지 않고, 지금 환경에 맞는 대로 세팅을 fit하게 하는게 최고다. 그래도 git은 확실히 알았다.

세번째

가장 큰 이유 PG 결제가 생각보다 심사하는 과정이 길었고, 무엇보다 Footer에 개인정보처리방침, 이용약관동의 그리고 로그인하고 실제 상품까지 이루어지는 과정이 있어야 된다고 .. .. ..

넵 그래서 포기하였습니다.

깨달음 : 잘 알아 보자

그렇게 마무리를 하고 다시 일어나서 만든게 지난 포스트에 있는 CS Morning 입니다 !

이제 본론

서론이 길었네요 !! 그렇게 저는 AI한테 한 번 혼나보고 많은 깨달음을 통해서 하나의 프로젝트를 마무리 했습니다. 지금도 아픈 손가락같은 함수들과 음..뭐지 싶은 함수들도 여전히 있다고 생각합니다.

저는 다시 한번 더 스스로 질문(점검)했습니다.

1Front-End
2- useEffect? useState, React 제대로 아는가?
3- 프로젝트와 파일 분리 어떻게 할 것 인가?
4- 데이터를 통신할 때 상태관리, 서버 상태 관리는 뭘로 할거지?
5- 최적화는 어떻게 할거야? useMemo? 캐싱 이용해서?
6- TypeScript는 제대로 알아? Type 관리는 어떻게 할거야? 계속 선언부에 적을 거는 아니지?
7- modal,toggle 관리는 어떻게 할거야? 등
8
9Back-End
10- 프로젝트와 파일 분리 어떻게 할거야?
11- 어떻게 설계해서 만들거야?
12- 테이블 구조는 완벽해?
13- MVC 패턴을 기반으로 만들거야?
14- controller, service 정확하게 분리할 수 있어? 등

이런 식으로 생각 마음 속에 점검사항들을 넣어놓고 다음 프로젝트를 진행했습니다. React 사용 방법을 더 익히고 싶었고, 웹이 아닌 앱을 만들어 보고 싶었습니다.

핸드폰 안에서 부드럽게 움직이는 앱의 반응이 웹보다는 더욱 깔끔하다고 느꼈습니다.

React-Native Expo

React-Native로 처음 시작할 때, 크게 두가지 방법으로 나뉜다고 들었습니다.

cli 는 native 코드 가 필요할 때 시작해도 된다는 글을 보고 Expo 로 시작했습니다. Expo 는 cli 로 시작하는 것보다 훨씬 편하게 환경 설정이 가능했고, 처음 하는 React-Native 였지만 비교적 쉽게 세팅이 되었습니다 !

React-Native 여기서 공식 문서를 통해 천천히 설정하였다.

React와 React-Native

React와 React-Native는 크게 다르지 않았고, 빠르게 적응 할 수 있었습니다.

1사용하는 태그
2Web : <div>, <span>, <p>, <h1>, <button>, <input>, <img>, <ul>, <ol>
3App: <View>, <Text>, <TouchableOpacity>, <TextInput>, <Image>, <FlatList>, <SectionList>
4
5
6실행 명령어
7Wep : npm start, npm run dev 등
8App : npx expo start

이런 명령어,태그 같은 것들은 쉽게 적응할 수 있었지만, 생각보다 웹 동작 방식과 미묘하게 조금씩 달랐습니다. 특히 네비게이션 부분부터 달랐습니다.

React

1import { BrowserRouter, Routes, Route } from 'react-router-dom';
2
3<BrowserRouter>
4  <Routes>
5    <Route path="/" element={<Home />} />
6    <Route path="/about" element={<About />} />
7  </Routes>
8</BrowserRouter>

React Native

1import { NavigationContainer } from '@react-navigation/native';
2import { createStackNavigator } from '@react-navigation/stack';
3
4<NavigationContainer>
5  <Stack.Navigator>
6    <Stack.Screen name="Home" component={Home} />
7    <Stack.Screen name="About" component={About} />
8  </Stack.Navigator>
9</NavigationContainer>

이렇게 Stack을 사용하는데, 이는 아마 웹은 URL/ 경로에 따라서 진입하게되는 방식이고, 앱 환경에서는 URL 개념보다, 화면을 쌓고 빼는 방식으로 전환이 되기 때문입니다. (물론 다른 방식도 존재합니다.)

이렇게 조금은 다르지만, 비슷한 성질을 가지고 있어서 적응하는데 크게 어려움이 없었고, 앱 초기 설정 및 시작을 빠르게 할 수 있었습니다.

영차영차 일단 만들어보기

1. 먼저 기획 했습니다.

저는 무언가를 만들 때, 아래 처럼 프로세스를 가지고 만듭니다.

11. 나와 비슷한 어플이 있는지? 어떤 어플을 벤치마킹 해야 할지? (시장 조사)
22. 어떤 문제를 정의를 내리고 어떻게 해결 할 것 인지? (WHY? HOW?) 
33. 가능한가? (Possible?)

갑자기 번뜩이는 아이디어는 없고, 앱 차트 를 보거나, 환경 에서 아이디어를 많이 얻는 편입니다. 저에게는 3명의 조카가 있고, 가까운 곳(친 누나)에서 앱 소재를 얻을 수 있었습니다.

자녀들을 둔 누나들은 아이들이 약속을 잘 지키지 못한다는 의견이 있었고, 칭찬스티커 같은 것도 관리할 수 있으면 좋겠다고 말했습니다.

이 의견을 듣자마자 생각한 것은 바로 앱 이름이었습니다.

'쑥쑥약속'

이 네이밍 하나만으로 수많은 아이디어가 떠올라 바로 피그마에 디자인부터 기획했습니다.

저는 이 과정을 좋아합니다. 무언가 창작하고 만들 때, 일한다는 느낌보다는 뭔가 비로소 쉬고 있다는 느낌을 받습니다. 취미로 그림을 그리고 글을 쓰는 것을 좋아하고 기타도 연주합니다.

디자인을 배운 적은 없지만, 확실한 건 제가 디자인 감각 이 있다는 것을 알고 있었습니다. 그 감각은 뭔가 인간의 심리와 매우 밀접해 있다는 것을 느끼고 있었고, 사람과 대화하는 걸 좋아하다보니 자연스레 익히게 된 것 같습니다. 그리고 현재 인터넷에 참고 할 수 있는 디자인도 많습니다.

무작정 만들면 큰일나는 건 이전에 앞서 경험을 해봤으니, 피그마에 디자인 틀을 잡고 만들어야 겠다고 생각했습니다.

위와 같이 대충 필요한 스크린을 만들고 진짜 대충이라도 디자인을 해봅니다. 이 이유는 기능을 만들 때, 눈으로 확인할 수 있게 도와주고, workflow 를 빠르게 확인할 수 있다고 생각합니다.

2. 와이어프레임 만들기

우선 프론트 단에서 와이어프레임을 만들었습니다. 그리고 제일 중요한 기능들을 나열했습니다.

1[메인 기능]
2- 부모와 자녀가 연결되어 약속 관리
3  - 부모와 자녀가 연결한다.
4  - 부모가 약속을 설정한다
5  - 자녀는 해당 약속을 사진으로 인증한다.
6  - 부모가 약속을 승인한다.
7  - 자녀는 약속 인증 시 스티커를 받는다.
8
9- 자녀의 보상 설정
10  - 설정한 보상과 스티커의 교환 기능

이렇게 필요한 기능들에 맞게 화면을 구성하였고, 파일들도 분리 하였습니다.

1📦app
2 ┣ 📂(auth)
3 ┃ ┣ 📜_layout.tsx
4 ┃ ┣ 📜index.tsx
5 ┃ ┣ 📜 (...)
6 ┣ 📂(child)
7 ┃ ┣ 📜_layout.tsx
8 ┃ ┣ 📜index.tsx
9 ┃ ┣ 📜 (...)
10 ┣ 📂(parent)
11 ┃ ┣ 📜_layout.tsx
12 ┃ ┣ 📜index.tsx
13 ┃ ┣ 📜 (...)
14 ┣ 📂(settings)
15 ┃ ┣ 📜_layout.tsx
16 ┃ ┣ 📜index.tsx
17 ┃ ┣ 📜 (...)
18 ┣ 📂(tabs)
19 ┃ ┣ 📜_layout.tsx
20 ┃ ┣ 📜index.tsx
21 ┃ ┣ 📜 (...)

부모화면과, 자녀화면을 분리하고 공통으로 볼 수 있는 화면은 (tabs)/ 에서 처리 하였습니다. 그리고 왜 최상위 Root에는 앱의 진입 및 인증 관리는 index.tsx와, Stack 관리는 _layout.tsx에서 했습니다.

각 screen에 맞게 components/(...screen)/(하위 컴포넌트) 스크린 별로 컴포넌트를 분리하였습니다.

이후 백앤드 단으로

node.js 와 Express 를 이용하였습니다. Nest.js를 사용하고 싶지만, 제가 느끼는 학습에 러닝커브 를 경험해본 적이 있기때문에 많은 것을 새롭게 시도하지는 않았습니다. 기본부터 알파로 학습을 해야 성장이 잘 되는 것을 알았기 때문이죠 !

백엔드는 이전에 학습했던 경험이 있으니 이번에는 node.js 에서 typeScript 이용해서 간단하게 CRUD를 구현했습니다.

이렇게 관심사를 통해서 각각 다르게 분리하고 와이어프레임이 어느정도 끝난 제 앱 상황은

진짜 말 그대로 와이어프레임느낌으로 제작만 되어 있는 상황

하지만 React-Native 환경은 처음이라 이 화면을 시뮬레이터에 불러오는 것 만으로도 엄청난 기쁨이었습니다.

이외에도 더 필요할 것 같은 화면들을 구성하였고, 몇 가지 기능들을 추가하였습니다.

1[추가 기능]
2- 약속 인증 시 캐릭터(식물) 성장 하는 기능
3- 부모는 자녀는 여러 명의 자녀와 부모와 연결이 가능 
4  ㄴ ex) 한 자녀인데 엄마 아빠가 보고 싶은 경우, 자녀가 여러 명인 경우
5- 식물 선택 기능
6- 사진 인증 기능 개선 등

이러한 추가 기능을 통해서 다시 한번더 백엔드 단을 수정했습니다. 폴더 구조도 정확하게 분리하고, 저는 계속된 추가 확장이 필요하기에 DB 는 postgreSQL 을 사용하고 ORM 으로 prisma 를 이용했습니다.

저는 MVC 패턴활용하여 사용했습니다.

1📦 api 
2 ┣ 📂auth
3 ┃ ┣ 📜 auth.controller.ts
4 ┃ ┣ 📜 auth.services.ts
5 ┃ ┣ 📜 auth.routes.ts
6 ┃ ┣ 📜 auth.validation.ts
7 ┣ 📂(...ETC)
8 ┣ app.ts
9┣ server.ts

1routes → controller → service → database

이 흐름이 뭔가 직관적이어서 토이프로젝트에서는 좋아서 계속 사용하고 있습니다.

이렇게 여러가지 필요한 API들을 만들고, 다시 프론트로 돌아와서 제대로 작업을 시작했습니다.

3. 프론트와 백의 통신..!

이번 프로젝트에서도 생각보다 상태관리에 중요성 과 렌더링에 중요성 을 확실하게 느낄 수 있었습니다.

팀원과 협업하여 작업했을 때는 각자 맡은 파트에서 작업을 하다보니, 누군가가 잘 만들어놓은 환경에서 열심히 데이터만 배달했다는 알게 되었습니다. 그 데이터는 싱싱하고 신선한 데이터가 아닌 오래된 데이터를 전달 하고 있었다는 것을 알게 되었습니다.

UI나 각각 변수들을 처리하는 상태 관리는 Zustand 서버에서 오는 싱싱한 실시간 데이터 동기화 및 체크를 위해서는React-Query

를 이용했습니다.

이렇게 정말 잘 짜여진 각본으로 모든게 수월하게 이뤄졌으면 좋았지만,

이슈 대!폭!발!

1?? : 이렇게 잘 기획하고, 문제 없이 앱 하나가 뚝!딱! 나오면 아무나 만들겠지요?
2나 : 네. 저는 뚝!딱! 나올 줄 알았어요

생각보다 앱 생태계는 웹이랑 달랐고, 상태 관리 또한 제대로 이루어지지 않고, 자기고 온 data를 잘 파싱해야하는데 이상한 걸 파싱하고 있고, css는 엉망진창이고, 툭 하면 Navigation 오류, null 처리, 타입 오류, Expo 설정 오류, 라이브러리 버전 호환 충돌 오류, 중복되는 함수, 이상한 API 호출 등..

여러 오류들이 저를 덮치고 말았습니다. 이 모든 현상은 바로 AI가 하기 때문입니다.

chatGpt가 나오고 사용하면서 AI 프롬포트 사용법과 원하는 결과를 도출하는 그 과정은 계속해서 익히고 있었지만, 역시 AI는 일정 크레딧을 다 사용하거나 새로운 프롬포트를 작성할 때, 이 찰나의 순간으로 많은 이슈들이 생기게 됩니다.

1?? : 그러면 프롬포트를 처음부터 잘 쓰면 되잖아

라고 생각할 수 있지만, 솔직히 지금 AI를 사용하면서 개발하시는 분들은 알고 있을 겁니다.

분명히 한계가 존재하고 결국 도구라는 것을.

물론 먼 미래에는 진짜 딸깍 한 번으로 앱이 만들어지고, 뭐가 만들어지는 날이 오겠지만유..그거에 맞춰서 적응해야겠죠? 하하

하지만 미래는 미래고 저는 현시점에서 열심히 코딩하는 그런 존재이니 그냥 열심히 해야죠 뭐

그래서 그렇게 오류들을 하나씩 고쳐봤습니다.

Expo로 앱 개발하면서 큰 오류로 3가지를 뽑았습니다.

1. 잦은 navigation 오류.. 일단 이 문제는 최악이었습니다. 가장 많은 시간을 지체했습니다.

앱 시작시 들어가게 되는 화면 입니다. 하단에 보이는 대시보드,스티커,물주기,정보 버튼들은 하위 컴포넌트들에 있는 버튼 들입니다. 정보를 누르면 각 자녀의 맞는 식물의 정보를 출력해야 했습니다. 어떤 상황에서 계속해서 navigation Stack 오류가 나는 겁니다.

그래서 문제를 AI에게 검색해보면 계속 루트 _layout 에서 <Stack.Navigation> 태그 감싸라고만 나오고 정확한 문제가 무엇인지 몰랐습니다.

결국 디버깅을 시도하면서 찾아보니 자녀가 없는 경우, 연결이 안되어 있는 경우, 자녀의 식물이 없는 경우, 식물은 있지만 선택이 안 된 경우 등 이렇게 다양한 경우에 속해 있었습니다.

이렇게 또 한번 배웠습니다. 예외처리에 소중함, 그렇게 저는 타입들을 올바르게 null과 undefined 로 잘 지정하여 처리를 하니 해결이 되었습니다.

이와 비슷한 문제가 엄청 많았습니다. (최종 식물 도달 했을 때, 해당 스크린에서 식물이 null일 때, not found error를 우선시 호출 하게 될 때 등)

**2. Expo도 결국 완벽하지 않구나 **

이 얘기는 React-Native social login 포스팅에 작성되었습니다 !

3. 이쁘게 잘 만들고 싶은데 어렵구나

초기에 기획했던 디자인과 달리 기능이 점점 추가되면서 개발과 동시에 디자인이 되었습니다. 하지만, 오히려 기능이 점점 많아지니 심플하게 직관적인 디자인과는 점점 멀어지고 있었습니다.

그렇게 기능은 만들었지만, 과감하게 없애는 과정도 많았고, 디자인을 위한 기능인지, 기능을 위한 디자인인지 정말 헷갈렸습니다.

그렇다고 대충하는 건 제 성격에서 절대금지 이기에 끝까지 노력하였습니다.

다양한 애니메이션을 구사하기 위해서

1@shopify/react-native-skia, "react-native-gesture-handler": "~2.24.0",
2    "react-native-linear-gradient": "^2.8.3" 등 라이브러리 사용.

다양한 인터렉티브한 ui/ux를 만들고 싶어서 노력하였습니다.

식물 카드 뽑기 화면	홈 화면	로그인 화면

이렇게 많은 시행착오를 겪어보니 엉성했던 css 실력도 점차 보완이 되었습니다 !

이후에는 배포와 마케팅을 !

이렇게 만든 프로젝트가 내 시뮬레이터에만 돌아가는 것은 너무 아까웠습니다. 세상에 꼭 내보내야겠다고 목표를 하면서 만들어서 배포에 신경을 썼습니다.

하지만 욕심은 끝이 없고

이렇게 스켈레톤 UI도 적용해보면서 유저 사용자 경험을 증가하는 것도 해봤습니다 ! 최적화 해야하는 곳과 Refactoring 해야한 곳이 정말 많이 보였지만, 그래도 어느정도 MVP가 완성되었으니, 이제는 배포에 신경을 썼습니다.

우선 제가 아이폰을 사용하고 있어서 ios 부터 차근차근 배포를 시작했습니다.

Testflight에 등록하고, 지인 및 개인 SNS를 통해서 사람들에게 피드백을 받았습니다.

앱 배포 과정은 나중에 자세하게 포스팅 하겠습니다 (__)

어느정도 피드백을 받고 오류를 수정하고 드디어 배포해서 앱 심사를 받았습니다 ! 생각보다 1인 앱 개발 글을 사람들이 많이 좋아해줘서 더 열심히 할 수 있었습니다.

이렇게 글을 올리다보니 자연스럽게 마케팅이 되었고, ios 는 정식 배포 되었고, 현재는 Android 심사를 기다리고 있습니다 !

느낀 점

5월부터 시작하고 약 6월 초에 1인 앱 개발 배포까지 완성되었습니다 ! 하루에 약 8시간 씩 개발했습니다. (AI 크레딧 한도가 매번 생김) 오류가 있는 날에는 12시간 이상 개발을 했던 적도 있습니다. 그냥 지고 싶지 않았거든요. 그리고 무엇보다 지체되고 보기 싫어지면, 프로젝트가 흐지부지 되는 경향이 있는 느낌이었습니다.

그리고 기록 했습니다. 생각보다 저는 기억력이 안 좋더라구요. to-do list부터 시작해서 그냥 간단한 생각도 기록하고 오류가 나는 부분도 기록했습니다.

그러다보니 뭔가 성장하게 되더라구요. 그러다보니 자연스럽게 집에서 코딩만 하게 되고 이 과정이 너무 행복했습니다.

저는 이 AI를 활용할 수 있는 시대가 너무 좋습니다. 제 머릿속에 있는 것들을 실현할 수 있고 원하는 대로 되니까 정말 기쁩니다. 예전부터 이것저것 경험(이모티콘 출시, 일러스트로 굿즈화, 위탁 판매)을 많이 해봤는데 이런 경험들이 지금 저한테는 여러모로 좋은 장점으로 작용되는 것 같습니다.

앞으로 저는 많은 앱을 만들 수 능력을 가졌습니다. 유지보수? 최적화? 공부하면 됩니다. 취업 시장, 경기가 안 좋다하더라고 그냥 적응하고 견뎌내며 이겨내야 한다고 생각합니다.

완성하고 보니 약 40개 정도되는 화면을 만들었습니다.

이제는 이렇게 1달안에 앱도 만들고 기획,마케팅 등등 하는 사람들을 솔로프리너, 인디해커, PE 등 지칭하더라구요.

그래서 저는 README.md에 Product Engineer PE 로 작성했습니다 ㅎㅎ

이번 프로젝트를 통해서 많은 것을 얻었고 경험했습니다. 취준생, 개발자 분들, 모두 화이팅 입니다 ! 긴글 읽어주셔서 감사합니다.

쑥쑥약속