앱을 만들기로 결정하고 기획부터 배포까지 일주일에 걸쳐 영단어 퀴즈앱 '바로보카'가 완성되었습니다.
많은 사람들이 영단어를 꾸준히 외우고 싶어하지만, 꾸준히 습관을 만들기가 참 어려운 것 같아요.
저도 '하루에 20개씩 외우겠어!' 라고 다짐하지만 며칠 못가고는 했습니다. (중학교때부터 지금까지...)
동기부여가 되도록 영단어 암기에 보상을 추가한 보상형 영단어 퀴즈앱을 만들고 싶어졌습니다.
캐시워크가 100보에 1캐시씩 바꿔주듯이, 영단어 1문제를 풀때마다 1캐시씩 적립시켜주는 앱을 말이죠.
용돈을 벌 수 있다면 더 성취감도 있고, 커피도 사먹고..영단어를 더 자주 보지 않을까요?
이런 아이디어를 시작으로 앱 기획을 시작했습니다.
작업 전에 개발 과정을 크게 2가지로 나누었는데요.
작업 1. 영단어 퀴즈앱을 만든다.
작업 2. 영단어 퀴즈에 캐시 적립 기능을 추가한다.
부족한 실력으로 한 번에 1번과 2번을 모두 구현하여 출시하려면 꽤 오래 걸릴 것 같았습니다. (예상 기간조차 감이 없었죠)
1번이 되는 앱을 만들어서 우선 출시하고 그 다음에 2번을 추가하기로 했습니다.
그리고 12월 28일에 기획을 시작해서, 그 당일에 끝났어요. 페이지 3쪽이라 기획이라고 하기도 민망할 정도입니다.
출시 버전의 기획은 은 딱 2가지였습니다.
- 기초 / 중등 / 고등 / 토익 등 4가지의 단어장이 존재한다.
- 단어장별로 문제풀이를 할 수 있으며, 단어장을 한 번 선택한 후에는 앱을 들어오자마자 문제풀이가 시작된다.
기획 끝에 나온 앱 구조이자 페이지는 크게 3개입니다.
1. 랜딩페이지(단어장 고르는 화면)
2. 문제풀이 화면
3. 오답노트 화면
개발 시작 전에 다짐하고, 개발하는 동안 스스로에게 계속 주의를 줬던 건, '절대 추가 기능을 넣지 않는다!' 였습니다. (하지만 지키지 못했다죠)
개발을 하다보면 이것도 넣고 싶고, 저것도 넣고 싶고, '어? 이런 기능도 있으면 좋겠다!' 라는 생각이 굉장히 많이 들거든요.
그러다보면, (특히 혼자 개발하는 경우) 첫 기획에는 없는 다양한 기능이 마구 들어가고 개발 기간도 길어지게 됩니다. 그래서 애초에 저 2가지 기능만 갖고 일단 출시하자를 목표로 잡았어요. 원래는 2주정도 생각했는데, 이렇게 최소 목표를 잡고 시작하니까 생각보다 더 빨리 출시할 수 있었던 것 같아요.
개발 환경은 아래와 같습니다.
- 기획&디자인: Adobe XD, 제플린
- 개발 환경: Git, VS code, React Native (백엔드는 없으며, 나중에는 firebase를 사용할 예정입니다.)
- OS: Mac OS
- 스승님들: StackOverFlow, 각종 깃헙 커뮤니티, Dody님을 비롯한 개발 블로거님들.
프로젝트 파일을 만들고 배포하는 과정동안 코드를 개발하는 시간보다 라이브러리를 찾고, 환경을 세팅하고, 설정하는 시간이 더 오래걸렸습니다.
전체 100이라면 코드 개발 40, 개발환경 및 배포환경 세팅 60 정도 소요된 것 같습니다,,ㅜㅜ
프로그래밍 실력보다 구글링 실력이 더 좋아진 것 같네요 ㅎㅎ..
처음으로 혼자서 a-z까지 다 해본거라, 기록을 남기고 싶어졌습니다.
날짜별로 어떤걸 개발했는지 메모해놨다면 좋았을텐데, 잘 생각이 안나네요. 분명 엄청 바빴던거같은데...
아, 깃헙 커밋을 보면서 기억을 더듬어봐야겠네요. 앞으로는 틈틈히 기록을 해야겠어요.
12월 28일에 기획을 시작했고, 1월 1일이 새해맞이로 구글에 출시 심사를 요청했습니다.
iOS는 설정해줘야할 게 더 많아서 우선 플레이스토어에 먼저 제출했어요. 그리고, 2일동안 열심히 셋팅해주고 보완해서 앱스토어에도 심사를 제출했답니다.
그런데... 애플.... 이녀석...!
이 글을 쓰고있는 1월 5일 기준으로, 안드로이드는 아직도 심사중인데 애플은 심사제출한 밤에 바로 승인이 났어요!
늦게 제출한 앱스토어에서 오히려 먼저 배포가 되었답니다.
작업 1 시작.
28일
- XD에서 기획과 동시에 디자인을 시작했습니다.
- 3페이지 안에서 이것저것 고민하느라 은근 시간이 걸렸습니다. 3~4시간 정도 걸려서 기획 & 디자인 끝났어요.
- 곧바로 RN 프로젝트를 생성하고 개발 작업에 들어갔습니다.
- 앱 환경 세팅, 페이지 이동과 전체적인 아키텍트, 유저 flow를 설계했어요.
29일
- 설계에 맞추어 본격적인 프론트엔드 디자인 작업을 시작했습니다.
- 랜딩페이지(첫 화면)와 퀴즈 화면 프론트 작업이 끝났어요. 같은 디자인인 버튼이 여러개 있는데.. 단순히 복붙하면 되는거를 코드의 효율성을 높여보겠다고 컴포넌트로 만들었다가 결국 나중에 안쓰였더랍니다. 나의 시간..!
- 샘플 영단어 데이터를 만들어서 데이터 표현이 잘 되는지 테스트했습니다.
- 랜딩페이지가 맘에 안드네요. 랜딩페이지를 다시 기획하고, 기존의 코드를 다 지..지워버렸습니다..ㅠ
(버려진 나의 코드..ㅠㅠ 길이는 짧지만 구조를 짠다고 오래 걸렸다고 한다. 아까우니 여기에라도 남으렴..?)
const vacaNoteContainer = () => {
return (
VOCATYPE.map((item, index) => {
return (
<View
key={index}
style={styles.vocaNoteContainer}>
<Text style={styles.vocaNoteContainerTypeText}>{item.name}</Text>
{vocaNote(item)}
</View>
)
})
)
}
const vocaNote = (vocaType) => {
return(
vocaType.data.map((item, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => navigation.push("QuizIndex", {id:1})}
activeOpacity={0.6}
>
<View style={styles.vocaNoteView}>
<Text style={styles.vocaNoteTitle}>{vocaType.name} 영단어 {index + 1}</Text>
<Text style={styles.vocaNoteNumWord}>{vocaType.wordNum} 단어</Text>
</View>
</TouchableOpacity>
)
})
)
}
30일
- 새로운 디자인으로 랜딩페이지를 다시 개발했습니다. 맘에 듭니다 ㅎ
- 기초, 중학, 고등&수능, 토익. 이렇게 4개의 영단어 데이터셋을 만들었습니다. 데이터베이스나 구조를 다뤄본 적이 없어서 구조를 짜는데 시간이 오래 걸렸어요. 지금 편한대로 만들자니, 나중에 보수 난이도가 너무 높아질 거 같고.... 아는게 없으니 일단 최대한 단순하게 만들었습니다.
- 이 앱의 핵심 알고리즘(?!)인 퀴즈 기능을 개발했습니다. 단순합니다 ㅎㅎ.. 데이터셋에서 랜덤으로 4개의 영단어를 뽑아서 1개는 정답으로 정의하고, 나머지 3개는 오답으로 정의해요. (따로 포스팅을 작성했는데, 궁금하신 분들은 아래 포스팅을 봐주세요!)
31일
- 유저의 상황(정답, 오답)에 맞게 스타일(색상, 폰트크기 등)이 바뀌는 프론트엔드 색칠작업 노가다를 진행했습니다.
- 정답을 맞추면 다음 문제로, 오답이면 오답노트로 이동해요.
- 뭔가 이대로 출시하기 아쉬워서, 오늘 푼 문제 개수를 LocalStorage에 저장해서 보여주는 기능을 추가해보기로 했습니다. (이러지 말자고 다짐도 했는데;;)
- 오늘 푼 문제 개수 / 맞은 개수 / % 데이터를 기기에 저장해서 보여줘요. 다음날이 되면 다시 0부터 시작해요.
- 구글 애드몹을 연결했어요. 많이 눌러주시면 개발자의 삶을 윤택하게 만들수 있습니다.
1월 1일
- 파이어베이스 설정, 구글플레이 콘솔 설정, 배포 환경 셋팅만 한나절... 그 과정에서 만난 수많은 에러를 만났습니다. 혼자 개발해도 에러를 많이 만나서 외롭지 않아요.
- 플레이스토어 심사 요청! (1월 7일에 승인났습니다. 그래도 거절안당하고 한 번에 승인나서 다행이에요)
1월 2일
- 새해 기념으로 쉬었습니다.. ㅎㅎ
1월 3일, 4일
- 앱스토어에 배포하기 위해 iOS 구글 애드몹, 파이어베이스, 앱 커넥트, 애플 개발자센터 등 환경 세팅 진행했어요.
- 자잘한 버그들을 보완했어요.
- 스플래시 화면을 추가했어요. 다른 개발자님들의 블로그를 보면 분명 간단한 작업인데, 저는 왜이렇게 오래걸리는걸까요. 이틀이나 걸렸네요.
- IOS 배포환경 셋팅 및 앱스토어에 심사를 요청했습니다. (12시 넘어서 요청해서 날짜는 5일 ..!)
1월 5일 새벽
- 자고 일어나니 승인이 되었네요! 28일부터 딱 1주일 걸려서 배포가 되었습니다!
이렇게 RN으로 기획부터 배포까지 앱 전체 사이클을 한 번 돌면서, 1번 작업(영단어 퀴즈앱을 만든다.)이 끝났습니다.
하지만, 백엔드가 없는 앱이라 완전한 경험을 했다고 하기에는 조금 부실하죠.
이제부터는 2번 작업을 시작해야겠습니다.
작업 2 시작
1월 6일
- 바로보카는 단어장 선택 유무에 따라 앱의 초기화면이 달라져요. 단어장 선택 유무를 파일 안에서 state로 사용했었는데.. 다른 파일들이 추가되니 props로는 감당하기 어려워졌습니다.
- 그리고 나중에 회원기능을 추가하면 중앙에서 유저정보를 관리해야합니다. 나중에 매맞을거 빨리 맞자고 생각해서 mobx도입을 결정합니다.
- 인프런에서 mobx 무료강좌로 기본개념과 구조를 공부했습니다. 한 2-3시간 돌려 들었는데도 어렵네요.
- 다 이해는 안됐지만 바로 코딩을 시작했습니다.(사실 계속 들어도 이해가 안가서..) 음.. '자동차 엔진의 작동원리는 잘 모르지만, 핸들과 액셀로 운전만 잘하면 되지!' 랑 비슷하다고 할 수 있겠습니다.
- mobx 역시 겉으로는 굉장히 복잡해보였으나, 막상 도입하니 그리 복잡하지 않았습니다.
- props의 늪에서 벗어났어요. 정말 좋네요 ㅎㅎ
1월 7일~9일
- Firebase auth를 이용해서 구글, 페이스북, 애플 회원가입&로그인 기능을 추가했습니다. 시작하기 전에는 실타래처럼 어디서부터 시작해야하나 걱정했는데, 코드와 구조는 정말 간단하네요. 코드보다 개발환경 세팅이 꽤나 복잡했습니다.그래도 각 공식문서에 설명이 너무 잘되어있습니다. 그리고 역시나, 에러 해결하는데 정말 오래걸렸습니다.
- 화면모드 이외에 다른 state들도 mobx로 이전하고, 앱의 스택 네비게이터 구조를 바꾸고, 코드에서 비효율적인 부분들을 리팩토링했습니다. 네 맞습니다. 유저가 보기에는 하나도 변한게 없습니다. 개발자만 아는 업데이트입니다.
- 이때부터 개발과정에 대해서 제대로 블로그 포스팅을 하기 시작했어요. 원래는 에러 노트만 적으려고했는데... 다른 것들도 적게 되었네요. 포스팅을 하면서 개발하니까, 작업 시간이 3배는 길어진 것 같습니다 ㅎㅎ;
- 페이스북 로그인은 페북 자체에서 설정해야할 게 꽤 많아서 포스팅할 엄두가 안났습니다. 그래도 다행인건 다른 2개의 포스팅을 마쳤습니다. 뿌듯하네요. firebase auth와 애플, 구글 로그인을 연동하는 방법은 아래 포스팅을 참고해주세요 :)
임시 디자인이지만 로그인 버튼이 생기니 진짜 어플 같습니다 ㅎㅎ(진짜 어플 맞는데...)
이 다음으로는 firebase의 firestore db를 연결해주어야 합니다. realtime db와 firestore db중에 무엇을 사용할까하고 찾아보니, 대부분 후자를 추천하네요.
1월 10일
- 오늘은 투자자 미팅이 있어서 작업을 많이 못했습니다.
- 그래도, firestore에 회원 데이터베이스를 만들고 로그인과 연동하는 기능을 구현했습니다.
- RN의 공식문서에 쉽게 잘 설명되어있어서 구글링 시간이 상당히 절약되었습니다.
1월 11일
- firestore에 데이터베이스 구조를 만들고, 유저가 회원가입/로그인 할 때 데이터를 읽고 쓰는 걸 만들었습니다.
- 작성한 코드는 몇 줄 안되는데, firestore의 구조를 짜고 쿼리를 날릴 부분을 정하느라 시간을 오래 썼습니다.
- iOS에 애드몹 광고를 넣으려면 추적 요청 팝업을 띄워야 한다고 알림이 왔네요. 간단한 건 줄 알았드만, 저녁부터 시작했는데도 결국 해결하지 못하고 잠들고 말았습니다...
1월 12일
- 오전 내내 어제 해결하지 못한 iOS 추적 요청 팝업로 머리를 싸맸습니다. 시뮬레이터에서는 되는데 실제 기기에서는 안되는 이유를 찾느라 4시간이 넘게 걸렸네요. iOS 15버전에서는 추가적으로 설정해주어야 하는게 있었습니다... 온세상 깃헙이란 깃헙은 다 뒤져보고 알았네요.
- firestore의 회원기능을 더 개선했습니다. firestore를 통해 유저 정보를 갖고오면 무한루프로 실행되는 문제를 해결하느라 3시간은 걸린 것 같습니다. 결국 공식문서대로 처음부터 다시 따라했더니 해결했습니다. 구관이 명관이라고 역시 정석을 따라해야 하나 봅니다.
1월 13일
- firestore를 도입하느라 여기저기서 작성했던 관련 코드들을 전부 리팩토링했습니다. 유저의 로그인 상태 감지부터 데이터를 저장하고 불러오는 위치를 최적화했습니다. firestore의 읽기 및 쓰기 횟수가 5만번까지 무료인데, 테스트 과정에서 벌써 저 혼자 8천번을 써버렸습니다.
- 코드에 eslint를 적용하고 파일명, 폴더명을 통일했습니다. 어떤 파일은 소문자로 시작하고, 어떤건 대문자로 시작해서 참 보기 안좋았는데 말이죠. 덕분에 모든 파일에서 import에러가 발생해서 다 맞추느라 시간이 오래걸렸습니다.
- iOS에서 앱 추적 기능과 관련해서 또 거절당했습니다. 추적팝업에 '당신이 왜 사용자의 데이터를 수집하는지'에 대해 더 정확하고 납득가능한 이유를 적으라고 하네요. 애플은 철저합니다.
- 이유 모르게 3일전부터 모달 팝업에 광고가 뜨질 않습니다. 새내기 앱에는 광고를 잘 안넣어준다는데... 처음부터 안넣어줄 것이지, 처음에는 광고맛좀 보게하다가 갑자기 끊어버렸습니다. 코드를 잘못건드린줄 알고 한참 또 헤맸다가, 저같은 경우가 많은 걸보고 기다리기로 했습니다.
- 오답노트 화면 상단에 띠배너를 추가했습니다. 이 광고도 안나오는지 한번 봐야겠습니다.
1월 14일
- 큰 일 났습니다. 광고 계정이 블락당한 것 같습니다. 앱 출시 초기에 광고가 잘 되는지 제 폰으로 몇 번 클릭해봤는데, 이러면 부정클릭으로 판단돼서 광고가 짤린다고 합니다.
- 다시 광고가 나올때까지 하염없이 기다려야하고 최대 한 달까지 걸릴 수 있다고 합니다...
- 영단어 외우면서 리워드 얻고, 광고를 보면서 리워드를 캐시로 지급하는 어플인데.... 그 핵심인 광고가 짤렸습니다..
- 다시 광고가 나올 때까지 마냥 기다릴 수도 없는 노릇이니 플랜 B를 세워야합니다. 우선은 애드몹이 아닌 페이스북처럼 다른 광고 메디에이션을 쓰는 방법이 있습니다. 두번째로는 앱의 수익모델을 바꾸는 것입니다.
- 제가 처음에 하고싶었던 건, 평소에 영단어 외우는 습관만들기가 어렵던 사람들이 리워드와 즉각적인 퀴즈를 통해서 영단어 암기 습관을 만들어주는 것이었습니다. 주요 타겟은 고등학생, 대학생, 토익준비생, 회사원 등 여러 사람들 중 앱테크와 영단어 암기에 니즈가 있는 사람들이었죠.
- 하지만, 광고가 짤려버리니 리워드 방향으로 더 개발하기는 어려울 듯 합니다. 페이스북 메디에이션을 쓸 수도 있겠지만, 애드몹만큼 수익성이 높지 않아서 리워드형 앱으로 수지타산이 맞지 않을 수도 있습니다
- 그래서 '꼭 영단어를 외워야하는 학생들'을 위한 영단어 앱을 만들기로 방향을 바꿨습니다. 지금은 기본적인 영단어 노트(기초, 중등, 고등, 토익)만 제공하는데, 구독 결제를 하면 나만의 영어 단어장들을 무한대로 만들 수 있는 앱으로 방향을 바꿨습니다.
- 그리고 나중에 리워드형 수익모델도 추가해야할 듯 합니다.
- 앱 활성 사용자가 1만, 10만 이상이 되지 않는 이상 앱에서 광고 수익으로만 많은 수익을 내기는 꽤 어렵다고 합니다. 광고를 넣더라도, 추가적인 구독 및 콘텐츠 판매상품을 통해 다른 수익 모델을 넣어야 좋다고 하는데요. 어찌보면, 순서만 바뀌었다고 생각하고 있습니다. 광고 수익 -> 콘텐츠 판매 로 나아갈 일정을 콘텐트 판매 -> 광고 로 바꿔버린 것이죠.
- 다른 영단어 앱들에 비해서 기능이 많이 부족하기 때문에 정말 저렴한 가격으로 구독 상품을 출시해야겠습니다.
- 기존에 리워드 기능을 거의 다 개발했기 때문에, 방향 전환을 위해 코드 리팩토링을 하는데 대부분 시간을 보냈습니다.
1월 15일, 16일
- 개인 영단어장 추가를 위해 데이터베이스 구조를 다시 짰습니다.
- 데이터베이스와 상호작용하는 로직이 점점 복잡해지기 시작했습니다. 그래도 firestore는 직관적이고 심플한 방법으로 데이터를 추가, 읽기, 삭제, 수정이 가능하여 다행입니다.
- 다만, 실제 배포되고 나서도 개발서버와 배포서버를 분리할 수 있을지 의문입니다.
'React Native > 캐시보카' 카테고리의 다른 글
| React Native로 앱테크 서비스 만들기: 리워드 시스템 편 (4) | 2024.06.11 |
|---|---|
| [React Native] 랜덤 퀴즈 앱을 만들어보자 (0) | 2022.01.06 |
