※소개글. (멘토 김수보)
이 프로젝트는 "오픈소스 방식으로 시작하는 스타트업 표준 템플릿"을 만들고자
시도 되었으며 아래와 같은 사연이 있습니다.
- 전현직 기자분들이 스타트업하면서 개발자를 구하지 못함.
- 1.0 을 만들지 못해 투자유치를 못하고 있었음.
- 친한 개발자는 "이거 안돼~~~" 라고 하던 상황.
- 42학생들이 오픈소스 협업방식으로 개발
(기업간 합의 : 교육목적 전환, 실패확률수용, 기업개입수준을 협력레벨로 조율)
- 매달 팀을 바꿔서 인수인계 3회하면서 14주만에 클리어
(인수인계경험, 문서화 기반 협력경험 습득 등)
- 안돼~~ 하던 개발자가 메인 개발자로 합류.
- 이젠 상용개발팀에게 인수인계한 상태
앱스토어에선 "세이버", 구글플레이스토어에선 "스마트한 뉴스브리핑"으로 검색하세요.
1만 다운로드 응원합니다.Developers
junhpark, kbaek, jaeylee
1. 오픈 프로젝트 그 마지막 여정의 첫 걸음
세이버 뉴스 서비스는 지난 5월부터 7월 초까지 1차, 2차에 걸쳐 기반이 다져진 오픈 프로젝트였습니다. 각 차수별 목표와 앞선 기수분들의 후기는 아래의 링크를 통해 확인하실 수 있습니다.
1차: 모바일 웹앱 프로젝트 기반 구축(3명, 4주간 진행)
2차: 웹앱 세부 기능 추가(3명, 4주간 진행)
3차: 하이브리드앱 개발과 앱 스토어 출시(6명, 6주간 진행)
1차, 2차에 이어 저희는 마지막 바통을 이어받게 된 3차 카뎃들이었습니다. 이전 기수분들의 노력으로 모바일 웹의 기준에서 굵직한 주요 기능과 디자인은 거의 완성에 가까웠습니다. 그럼에도 구현되지 못한 요구사항이 아직 많이 남아있었기 때문에, 3차에서는 하이브리드 앱 개발과 node.js 기반의 세부 기능 추가 작업 두 가지를 동시에 수행하였습니다.
웹 관련 작업은 6명의 카뎃분들 모두 적절하게 역할을 분담하여 참여했고, 하이브리드앱 개발을 위해서는 3명씩 두 팀으로 나누어져 각각 안드로이드 개발과 iOS 개발을 맡았습니다.
2. 애플 너네 정말 왜그래.
2-1. 모바일 웹으로 감싸진 애플리케이션 만들기
iOS 개발은 Swift 언어를, 에디터는 xcode를 사용하였습니다. 앱 개발은 네이티브 하이브리드 등으로 여러 종류가 있지만, 이번 프로젝트에서는 웹뷰를 통한 앱 개발 방법을 선택하게 되었습니다.
하단 링크에서 Xcode 로 새로운 프로젝트를 생성한 뒤 WebKit 사용을 위한 환경 세팅 내용이 상세히 정리되어 있습니다.
https://github.com/innovationacademy-kr/slabs-saver/wiki/iOS-개발환경-세팅
먼저 firebase를 기반으로 돌아가는 어플리케이션 개발 환경설정을 위해 저희가 사용할 KakaoSDK, Firebase/Messaging 등을 설치하기 위해 yarn이나 npm처럼 강력한 기능을 제공하는 cocoa pod을 사용했습니다.
웹을 iOS기기에 띄우기 위해서는 WKWebview를 사용했습니다. 처음에는 “이렇게 쉽게 띄울 수 있다고?” 라고 생각했었지만, iOS 기기와 웹과의 유연한 연동을 위해서는 webkit framework에 대한 이해와 UI constraint에 대한 이해가 필요했습니다.
UIView를 사용하지 않고, WKWebview를 단독으로 사용할 때 스크롤을 할 때, 컨텐츠에 constraint를 걸어뒀음에도 불구하고 safe area 바깥에 표시되는 문제를 해결하기 위해서 viewBound를 적절하게 활용해야 했으며,
WKView 속에서 돌아가는 web과 바깥의 controller와의 연동을 위해서 webView를 띄우기 전, 미리 contentCotroller에 messageHandler를 통해 연동할 Bridge 아이디를 등록한 후 webView의 configuration에 등록을 하는 작업등도 해주어야 했습니다.
무엇보다 firebase를 이용한 Push알림을 적절하게 띄우기 위해서 UIResponder와 UIApplicationDelegate, 그리고 userDefault에 대한 심도있는 학습이 필요했습니다.
앱의 UI는 웹에서 거의 완성되어 있지만, 이러한 기술적인 측면에서 다양한 기술을 심도있게 다루어볼 수 있는 기회가 정말 많았습니다.
2-2. 애플 정책의 모든 것.
개발을 시작하고 막혔던 부분은 ‘푸쉬 알림 기능 구현’이었습니다. 해당 기능을 구현하기 위해서는 애플에서 제공하는 Certificates, Identifiers, Profiles 등이 필요한데 이 기능은 애플 개발자 계정만 사용을 할 수 있었습니다. 때문에 저희는 개발자 계정이 등록되기 전까지 먼저 ‘카카오톡, 페이스북 링크’를 먼저 구현하기 시작했습니다.
애플 앱 등록이나 테스트 플라이트 사용을 위해서 애플 개발자 등록 과정을 거치게 됩니다. 기본적으로 애플은 개인 혹은 팀 개발자 등록 시 1년 멤버십으로 129,000 상당의 구독료를 받고 있습니다. 그렇기 때문에 saver 측에서 결제해 주신 계정을 사용해서 팀원을 추가하는 방식으로 팀 작업을 할 수 있었습니다.
Apple Developer Program 가입 후 Certification 발급받기 위해서 다양한 인증 절차를 거치게 됩니다. 제로베이스에서 시작하려다보니 처음에는 상당히 복잡하게 다가온 절차였고, 단순히 개발자 계정을 등록하는 과정임에도 애플 측으로부터 승인 과정을 거쳐야 하는 절차다 보니 기다리는 시간도 최대 48시간까지 소요될 수 있습니다. 하지만 다양한 레퍼런스를 참고한 결과 개발자 계정 등록에 대한 최종 승인을 받을 수 있었습니다.
Apple Developer 지원 사이트
애플 개발자 계정 인증에 대한 노션 링크
2-3. 테스트 플라이트
초반 작업은 Xcode 에서 제공하는 애플 디바이스 시뮬레이터만으로 테스트가 가능했습니다.
하지만 당연하게도 시뮬레이터만으로는 테스트에 한계가 있습니다. 앱이라는 것은 스마트 기기에서 클라언트와 상호작용하게 됩니다. 가령 기사를 카카오톡이나 페이스북으로 공유 시 테스트 앱에서 내가 가지고 있는 앱으로 연동되는 기능까지 테스트할 수 있어야 합니다.
또한, Firebase에서 FCM 등의 기능을 이용하기 위해서는 각각의 기기에 앱이 최초 실행될 때 등록 Token ID를 부여할 수 있어야 하기 때문에, 시뮬레이터에서는 firebase의 기능들을 제대로 이용하지 못하는 문제들이 있었습니다.
결국 iOS 개발에서 유의미한 베타 테스트를 위해서는 TestFlight 사용이 필수불가결했습니다. TestFlight를 통해 실제 작동하는 앱을 직접 사용하는 아이폰에 넣고 동작을 시켜보니, 개발자의 입장에서 시뮬레이터만 이용할 때보다 어떤 부분을 수정하고 어떤 부분을 추가해야하는지 등이 사용자 입장에서 개발의 방향성을 더욱 잘 설정할 수 있었습니다.
3. 파이어 베이스, 좋은 도구는 더 많은 것을 꿈꾸게 한다
파이어베이스는 구글에서 만든 모바일 플랫폼으로, 서버에서 앱을 빌드하고 호스팅, 사용자 분석, 클라우드 메시징 등의 기능을 사용할 수 있습니다.
저희가 만든 앱은 웹앱으로서 파이어베이스를 통해 사용자에게 PUSH 알림을 보내는 기능이 필요했기 때문에, Firebase의 FCM (Firebase Cloud Messaging) 기능을 이용하였습니다.
Firbase FCM이 정말 편리한 이유는 기기마다 Token을 부여하여 개별적으로 관리할 수 있고, 원하는 주제에 대해 사용자의 기기마다 subscribe 혹은 unsubscribe로 관리하여 기기마다 사용자마다 알림 수신 여부를 매우 간편하게 설정할 수 있다는 것에 있습니다.
저희 앱은 현재 크게 카테고리 6개와 알람 수신여부, 이렇게 총 7가지의 주제를 통해 사용자가 어떤 알람을 수신할 지에 대한 여부를 결정합니다.
FCM의 주제 구독 기능은 각각의 사용자에게 알맞는 알람을 보내기 쉽게 해주었고 향후 이 부분을 더욱 확장하여 사용자에게 더욱 세분화된 맞춤기능을 제공할 수 있을 것이라고 생각했습니다.
또 Firebase의 Analytics를 사용해보면서, 아직은 출시 전이라 유저 데이터가 많지 않은 상태이고, Webview를 사용한 hybrid앱이기에 명확하게 기능 구분을 하기 어렵다는 한계가 있지만,
후에 네이티브 어플리케이션 프로젝트에 적용했을 때 사용자의 앱 사용 패턴을 파악하기에 정말 좋은 기능이라는 생각이 들었습니다.
4. 24시간 만에 돌아온 대답 reject, 그리고 기다리던 출시!!
앱스토어 등록이 매우 까다롭다는 소문을 들어서 reject를 당하지 않기 위해서 많은 준비를 했습니다.
먼저 심사를 위한 기본 정보를 reject 사례를 찾아보고 작성했습니다.(아이폰 기종별 스크린샷 준비, 앱 정보 관련 URL, 테스트 로그인 계정 등…)
기본적으로 웹앱이기 때문에 반려당할 사유가 많지 않았지만, 저희 앱은 푸쉬알림을 제공하기 때문에 관련 reject 사례들을 찾아보고 참고했습니다. 특히 유저의 개인 정보와 관련된 사항에 애플이 민감하기 때문에, 앱이 수집하는 정보를 제공할 때, 애플 공식 사이트를 참고했습니다.
하치만 아쉽게도 첫번째 심사는 Reject 였습니다. 이유는 저희의 뉴스 앱에 ‘COVID-19’와 관련된 정보가 들어가 있었기 때문입니다. 애플에서는 COVID-19 pandemic 이후, 코로나와 관련된 정보를 취급하는 앱들을 매우 신중하게 검토하고 있습니다. 그래서 저희는 일단 코로나 키워드가 들어간 스크린샷을 교체하고, 관련 기사들을 웹페이지에서 내리는 방식으로 해당 반려사유를 처리했습니다.
반려사유를 처리하고 결국에 출시에 성공할 수 있었습니다.
이제 앱스토어에 “세이버 뉴스”를 검색하면 저희의 앱을 다운 받을 수 있습니다.
많은 카뎃분들이 다운 받고 이용해보신 후, 적극적인 피드백을 주시면 감사하겠습니다.
5. 코로나 4단계… 한계가 없는 git hub 협업
5-1. 또 다시 닫힌 클러스터의 문
6월의 시작과 동시에 사회적 거리 두기 4단계라는 깜짝 선물이 42를 덮쳤습니다. 그 여파로 클러스터는 또다시 문을 닫게 되었고, cms 오픈 프로젝트는 불안한 마음과 함께 첫 온라인 미팅을 가지게 되었습니다. 미팅은 주 2회 고정이었고, 대게 월목 오후 2시에 평균 한 시간가량으로 진행되었습니다. 각 팀별로 작업의 진행 상황을 말하고, 개인별로 세부 작업 상항을 설명하는 시간을 빠짐없이 가졌던 것 같습니다. 초반 멘토님의 노력 덕분에 사무적인 분위기는 찾아볼 수 없고 항상 웃음이 넘치는 그런 유쾌한 회의였습니다.
그럼에도 2차분들이 항상 서초 클러스터 한편에서 함께 두런두런 모여 작업하던 모습을 기억하고 있었기에 온라인으로만 프로젝트를 진행하게 되어 정말 유감스러웠습니다. 하지만 그건 github의 유용한 기능과 서비스를 제대로 활용한 적었기 때문에 그 진가를 몰랐던 것이었습니다.
깃허브는 그냥 저장소잖아? 응 아니야~
깃허브의 Projects 페이지에서는 프로세스 별로 현재 진행사항을 정리하고 쉽고 직관적으로 문서화할 수 있는 서비스를 이용할 수 있습니다. 안드로이드팀과 iOS팀으로 나누어져 서로의 현재 상황을 파악할 수 있었고,
wiki 페이지를 통해 팀원들과 앞으로 업무를 이어서 할 사람들을 위해 각자의 업무를 명확하게 문서화 하였습니다.
또한 issue template과 commit template을 통해 개별 상황들에 대해 issue 와 commit 들을 생성하면서, 각자 무슨 업무를 어떻게 수행해 나가고 있는지 조금 더 세세하게 파악할 수 있었습니다.
이렇게 깃허브 협업 툴을 최대한 활용함으로서 비대면 상황에서도 체계적으로 협업 해나갈 수 있다는 것이 놀라웠습니다.
zoom, 슬랙, 메타버스 gather town그리고 github 까지…
cms 프로젝트를 진행하면서 온라인으로 소통의 메카들을 모두 이용해 본 것 같습니다. 직접적인 도움이 필요하거나 협심해서 하나의 작업을 수행할 때는 사당 인근 카페에서 모이기도 했습니다. 적당한 만남과 온라인을 통한 협업은, 항상 만나는 것과 항상 온라인 소통 이 두 가지 상황보다 훨씬 합리적이면서, 팀원 각자 책임감을 가지고 작업에 임할 수 있는 최적의 대안이었다고 생각합니다.
5-2. 개인 후기
jaeylee:
- 해당 프로젝트에 지원하게 된 계기는 iOS 개발을 해보고 싶어서였고, 프로젝트가 끝난 지금 그 목적을 훌륭하게 달성한 것 같습니다. 첫 3주는 기본적인 앱 기능을 구현하고, 기존 프로젝트를 파악하는 데 집중했고, 마지막 3주는 추가 기능 업데이트와 앱 출시를 위한 테스트를 진행했습니다.
- 먼저 가장 어려웠던 점은 앱 개발보다는 기존에 진행된 프로젝트를 파악하는 일이었습니다. 웹 프론트엔드와 백 엔드 개발의 경험이 없었기 때문에, 전체적인 틀을 파악하려고 관련 지식을 공부하는데 많이 고생했던 기억이 납니다. 도저히 이해가 안 되는 부분은 멘토님, 이전에 프로젝트를 진행했던 동료, 현재 같이 작업을 하는 동료들에게 도움을 받았습니다. 약 한 달 하고도 보름 정도의 기간 동안 정말 많은 것을 배웠습니다.
- 첫 번째는 다른 사람이 작업한 코드를 분석해서 프로젝트를 파악하는 방법입니다. 이번 기회를 통해서 ‘작업의 문서화’의 중요성을 알게 되었습니다. 이전 기수가 작업하면서 기록한 문서들이 많은 도움이 되었고, 저희 역시 같은 방식으로 작업 내용을 파악하기 쉽도록 기록했습니다.
- 두 번째는 협업의 방식입니다. 브랜치를 구분하는 의미, 기능별 분담을 통해서 각자 feature브랜치를 통해 작업하고 개발 브랜치에서 테스트를 진행하기, PR을 통한 리뷰 등 협업에 필요한 기본적인 방식들을 체험해 볼 수 있었습니다.
- 마지막은 앱 출시까지의 전체적인 흐름을 한 번 경험해본 것입니다. 뉴스 앱의 기획, 개발, 테스트, 출시, 서비스의 과정 중에서 개발에서 출시까지의 과정을 직접 진행해보았습니다. 개발 단계에서 기획자의 추가 기능 요청을 처리했고, 개발이 완료된 기능들을 디바이스, OS별로 테스트도 진행해보았고, 앱을 출시하고 리젝당했던 경험은 현재 진행 중인 앱 개발에도 많은 도움이 되고 있습니다.
- 42과제는 대부분 혼자서 진행하게 되기 때문에 협업해보기가 쉽지 않습니다. 사이드 프로젝트를 통해서 다른 동료와 협업할 기회가 오게 되면 꼭 해보시기를 추천해 드립니다. 감사합니다.
junhpark:
- js와 웹개발이 처음이었고 이미 6분의 카뎃들이 진행하셨던 프로젝트이기에, 처음에 코드를 이해하는 것이 쉽지 않았습니다. 하지만 프로젝트에 대한 문서화를 너무도 잘 해주셨고 인수인계를 훌륭하게 해주신 덕분에 MVC 구조에 대한 이해를 마치게 되자 개발에 속도가 붙을 수 있었고, 처음에는 막막하게 느껴졌던 많은 것들을 구현 해낼 수 있게 되었습니다. 높은 산을 오르는 것이 불가능해 보일지라도 방향이 정상을 향하고 있다면 반드시 정상에 오를 수 있다는 자신감이 생겼습니다.
- 멘토님께서 개발의 방향을 잡아주시는 것이 앱 출시까지 할 수 있게 하는 큰 원동력이 되었습니다. 저희를 계속 지켜 보시면서 개발 과정의 우선순위를 정해주셨습니다. 저희는 제품 개발이 처음이기 때문에 아직은 무엇을 우선적으로 해야하는지 등 개발 프로세스를 잘 알지 못했습니다. 일주일마다 두번씩 진행했던 멘토님과의 대화는 마치 주니어 개발자로서 시니어 개발자와 커피 타임을 하는 느낌이어서 값진 경험이었고, 그 시간들 덕분에 한달 조금 넘는 시간 동안 목표한 앱 출시까지 완료 해낼 수 있었다고 생각합니다.
- 함께 개발을 진행했던 iOS, 안드로이드 팀원들 모두 “팀이란 이런 거구나” 라는 생각이 들정도로 환상적이었습니다. 코로나로 인해서 비대면을 베이스로 진행해야 하는 것에 걱정을 많이 했었지만, 걱정이 무색할 만큼 협업이 잘 이루어졌습니다. 모두들 자신의 역할 이상으로 해내기 위해 노력했고 서로에게 응원과 도움을 적극적으로 주고받았습니다. 무엇보다 팀원들 서로가 어떤 작업을 하고 있는지 계속 파악하면서 개발을 진행했기 때문에 개발의 흐름을 놓치지 않을 수 있었고 서로가 어려움을 겪고 있는 점에 대해서 빠르게 도움을 주고 받을 수 있었습니다.
- 저는 가장 크게 두가지를 얻어갈 수 있었다고 생각합니다. 첫번째는 “일을 한다는 것이 무엇인지” 깨달았습니다. 42프로젝트를 할 때를 포함한 많은 학습 상황에서 만족할만큼 이해되지 않으면 다음으로 잘 넘어가지 못했습니다. 이런 태도가 개발할 때 큰 속도 저하를 불러온 다는 것을 알고 있었지만 잘 고치지 못했는데 이번에프로젝트를 하면서 “필요한 부분을 선별적으로 빠르게 습득하여 실제에 적용한다”라는 방식을 드디어 실행할 수 있었습니다. 두번째로는 “제품을 끝까지 완성해보았다”는 것입니다. 이를 통해 자신감도 커졌지만, 무엇보다 개발의 프로세스를 완성단계까지 파악할 수 있었습니다. 이를 통해 다른 프로젝트를 할 때, 어떤 과정으로 얼마 정도의 시간이 걸리겠다를 대략적으로 예상할 수 있게 되었고 어떤 부분을 우선적으로 생각해야 하는지, 어떤 부분을 놓치지 쉬운지 등등을 생각할 수 있게 되었습니다.
- 올 해 가장 잘 한 선택은 CMS 프로젝트에 참여한 것이라고 생각합니다. 이런 소중한 기회를 주신 허광남 멘토님과 함께 최선을 다해서 성공적으로 프로젝트를 완수 해낸 동료들에게 진심으로 감사를 전하고 싶습니다.
kbaek:
- cms 오픈 프로젝트를 처음 시작했을 때는 걱정 반, 기대 반이었습니다. 가장 늦게 42 본과정에 합류하게 된 카뎃으로서 레벨도 저보다 훨씬 앞선 다른 팀원분들에게 뒤처지진 않을까 하는 걱정이 있었고, 반대로 확실하게 도움이 되는 팀원이 되고자 하는 욕구도 샘솟고 있었습니다! 제 열정을 불살라야겠다는 의지는 분명 도움이 되는 마음가짐이었지만, 이미 기반이 잡혀있는 오픈 프로젝트의 특성상 초반에 제가 마주했던 수십 개의 파일과 생소한 기술 스택들을 통해 느꼈던 멘붕도 어쩔 수 없는 거지 싶습니다. 하지만 6주라는 시간은 제가 적응하고 제 몫을 할 수 있는 성장의 시간으로는 충분했던 것 같습니다. 물론 그렇다고 해서 여유 부릴 수 있는 기간도 아니었습니다.
- 앱 개발뿐만 아니라 대부분의 시간을 할애했던 웹 관련 작업도 정말 너무 즐거웠습니다. node.js 의 웹 프레임워크를 공부하면서 익스프레스와, 템플릿 엔진인 ejs 그리고 쿼리문 대신 orm으로 사용된 시퀄라이즈 까지 정말 다양한 기술을 익혔습니다. 웹에서 가장 기억에 남은 작업으로는 알림 페이지를 위한 데이터베이스 처리 부분과, 검색 기능이었던 것 같습니다.
- 특히나 iOS 개발을 진행하면서 난관에 자주 부딪혔던 것 같습니다. 함께 고군분투하던 동료분들이 아니었다면 정말 헤쳐나가기 어려웠을 것이라고 생각합니다. 함께 공부해나가던 시간마저도 뜻깊고 오래 기억에 남습니다. 멘토님의 상냥한 지도와 언제나 든든한 동료들과 함께 작업할 수 있어서 좋았고, 이런 기회를 만들어주신 분들 모두에게 감사를 표하고 싶습니다. 물론 열심히 참여한 저 자신에게도 아주아주 고맙습니다.
- 또 한 번 느꼈지만 저는 백앤드가 적성에 맞는 것 같습니다. 개발자로서의 방향성을 다잡을 수 있어서 더욱 값진 시간이었습니다.
- 어서 빨리 친구들에서 saver 어플을 다운받으라고 강제하고 싶습니다.
앱스토어에서 “세이버”라고 검색하시면 나옵니다.