시작하게 된 배경
앱을 만들기로 결정하고 기획부터 배포까지 일주일에 걸쳐 영단어 퀴즈앱 '바로보카'가 완성되었습니다.
많은 사람들이 영단어를 꾸준히 외우고 싶어하지만, 꾸준히 습관을 만들기가 참 어려운 것 같아요.
저도 '하루에 20개씩 외우겠어!' 라고 다짐하지만 며칠 못가고는 했습니다. (중학교때부터 지금까지...)
동기부여가 되도록 영단어 암기에 보상을 추가한 보상형 영단어 퀴즈앱을 만들고 싶어졌습니다.
캐시워크가 100보에 1캐시씩 바꿔주듯이, 영단어 1문제를 풀때마다 1캐시씩 적립시켜주는 앱을 말이죠.
용돈을 벌 수 있다면 더 성취감도 있고, 커피도 사먹고..영단어를 더 자주 보지 않을까요?
앱 기획
이런 아이디어를 시작으로 앱 기획을 시작했습니다.
작업 전에 개발 과정을 크게 2가지로 나누었는데요.
작업 1. 영단어 퀴즈앱을 만든다.
작업 2. 영단어 퀴즈에 캐시 적립 기능을 추가한다.
부족한 실력으로 한 번에 1번과 2번을 모두 구현하여 출시하려면 꽤 오래 걸릴 것 같았습니다. (예상 기간조차 감이 없었죠)
1번이 되는 앱을 만들어서 우선 출시하고 그 다음에 2번을 추가하기로 했습니다.
그리고 12월 28일에 기획을 시작해서, 그 당일에 끝났어요. 페이지 3쪽이라 기획이라고 하기도 민망할 정도입니다.
출시 버전의 기획은 은 딱 2가지였습니다.
- 기초 / 중등 / 고등 / 토익 등 4가지의 단어장이 존재한다.
- 단어장별로 문제풀이를 할 수 있으며, 단어장을 한 번 선택한 후에는 앱을 들어오자마자 문제풀이가 시작된다.
기획 끝에 나온 앱 구조이자 페이지는 크게 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일 ..!)
첫 출시인데도 4시간만에 승인해준 애플 그는 대체..
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중에 무엇을 사용할까하고 찾아보니, 대부분 후자를 추천하네요.
안녕하세요. 글 잘 봤습니다.
제가 궁금한 점이 조금 있는데 여쭤봐도 될까요?
혹시 단어장 데이터들은 어떻게 얻으셨나요?
저도 얻고 싶어서요.
답변해주시면 감사하겠습니다.