지원 계기

• junhypar
  지금까지 본 과정이나 백준 알고리즘 등을 통해 학습은 했었지만, 실무 프로젝트 경험이 없는 상태에서 슬랙에 올린 모집 글을 보게 되었습니다.
  이전 팀들이 만들어둔 웹서비스를 웹 뷰를 통해 감싼 Android, IOS 앱을 만드는 프로젝트였는데 사실 이쪽에 대해 해본 적이 없어서 걱정이 많았지만 웹서비스를 만드는 것을 경험해보고 싶고, 앱을 만드는 과정도 흥미가 있었기에 지원했습니다.

• hokim
  openCMS는 이전부터 관심 있게 보고 있던 프로젝트였습니다. 참여해보고 싶다는 생각을 하고 있었는데 제가 웹 개발에 대해서는 잘 몰라서 조금 더 공부하고 기회가 되면 도전해 보자고 생각하고 있었습니다. 그러던 중에 앱 개발 참여자 모집 공고를 보게 되었고, 개발해야 할 부분을 보니 저도 할 수 있을 것 같다는 생각에 지원하게 되었습니다.

• jiskim
  이전 기수분들이 클러스터에서 CMS 프로젝트를 진행하는 모습을 보고 관심을 가지고 있었습니다. 웹 개발 경험이 전무해서 지원을 망설이고 있었는데, 3기 공고는 앱 출시를 목표로 안드로이드와 ios 개발 지원자를 모집하는 공고였습니다. 안드로이드는 접한 적 있는 분야였고, 앱 출시 경험도 할 수 있는 좋은 기회였기 때문에 용기를 가지고 지원하게 되었습니다.

프로젝트 과정

1. Android 웹뷰

웹은 거의 다 구현이 되어있어서 웹사이트를 웹뷰로 감싸는 작업을 시작했습니다.

해야 할 일은 크게 세 가지였습니다.

• 시작할 때 스플래시 화면 띄우기
• 웹뷰로 페이지 띄우기 (+자바스크립트 허용하기)
• 뒤로가기 클릭 시 이전 페이지로 이동 / 이전 페이지가 없을 경우 앱 종료

이 부분은 크게 어렵지 않았습니다. 단순히 웹뷰로 감싸고 몇 가지 설정만 해주니 간단하게 앱에 페이지를 띄울 수 있었습니다.

+) 로그인 창이 안 열리는 이슈가 있었는데, 로컬 스토리지에 접근하지 못해서 발생한 문제였습니다. domStorage를 허용해 주어서 해결할 수 있었습니다.

2. 파이어베이스로 알림 띄우기

웹앱을 스토어에 등록하기 위해서는 웹과 차별성을 가지는 앱만의 기능이 있어야 합니다. 이 때문에 푸시알림 기능이 추가되었습니다.

파이어베이스의 클라우드 메시징 기능은 특정 주제로 메세지를 보내면 주제를 구독한 모든 사용자가 메세지를 받을 수 있는 아주 편리한 기능을 지원합니다. 저희의 구독 시스템은 정치/경제/문화/국제/사회 등의 토픽을 사용자들이 팔로우하고 알람을 받을 수 있도록 되어있기 때문에 이러한 기능이 아주 적절했습니다.

이를 위해 파이어베이스를 통해 메세지를 받으면 해당 메세지 데이터를 이용해 notificationBuilder로 푸시 알림을 만들도록 했습니다.

사용자가 앱에서 팔로잉 버튼을 누를 경우 안드로이드 앱이 해당 주제를 구독하도록 해야 했는데, 방법을 찾다가 JavascriptInterface에 대해 알게 되었습니다.

간단히 말하자면 안드로이드에서 정의한 함수를 자바스크립트에서 사용할 수 있도록 해주는 아주 편리한 기능이었습니다.

이를 이용해 웹 코드 내부에서 안드로이드 코드로 정의한 자바스크립트 함수를 사용해 파이어베이스 주제를 구독할 수 있었습니다.

3. 딥링크

딥링크는 다른 어플리케이션에서 해당 앱의 링크를 클릭하면 페이지가 이동되는 게 아니라 앱이 열리도록 하는 기술입니다. 앱으로 보기 버튼을 누르면 이 딥링크가 작동해서 연결된 어플리케이션을 엽니다.

딥링크는 두 가지 경우에 필요했습니다.

• 공유 받은 메세지에서 앱으로 열기를 누르면 크롬같은 웹 어플리케이션이 아니라 앱으로 열기
• 공유하기를 눌렀을 때 카카오/페이스북 앱이 있다면 saver 앱에서 카카오/페이스북 앱을 열기

다른 앱에서 저희 앱을 열도록 하는 것과 저희 앱에서 다른 앱을 열도록 하는 두 가지 기능이 모두 필요했습니다.

다른 앱에서 saver 앱을 열도록 하는 것은 매니페스트 파일을 수정해 주는 것 만으로 간단하게 구현할 수 있었습니다. 특정 페이지를 열도록 하기 위해 맨 처음 앱이 열릴 때 intent.data에 들어있는 링크를 받아와서 옮겨주는 것도 간단한 일이었습니다.

카카오톡 딥링크는 카카오톡 디벨로퍼 페이지가 너무 잘 되어있어서 그대로 따라가기만 하면 구현할 수 있었는데, 페이스북 공유하기가 정말 큰 난관이었습니다.

맨 처음에는 카카오톡 공유하기처럼 열어보려고 했는데 페이스북을 여는 딥링크인 fb가 이미 사용 중단되어서 쓸 수 없었습니다. 그래서 이것저것 찾아보았는데 디벨로퍼 페이지에 링크가 끊긴 부분이 너무 많았습니다. 안드로이드 공유하기 페이지를 구글 검색을 통해 찾기는 했는데 페이스북 디벨로퍼 메인 페이지를 통해 들어가려면 어디로 들어가야 하는지 알 수가 없었습니다.

아무튼 팝업 방식을 채택해 구현했는데, 아무리 해도 앱으로 열리지를 않았습니다. 저는 API 30인 에뮬레이터를 사용하고 있었는데, 그게 문제일 줄이야… 쓰던 에뮬레이터가 가끔 먹통이 되어서 콜드부트 하는 동안 다른 에뮬레이터를 썼는데, 거기서는 정상적으로 작동했습니다. 혹시나 해서 API 26부터 29까지 모두 테스트해보았더니 딱 API 30에서만 앱이 열리지 않았습니다.

원인을 알고 나니 해결이 정말 쉬웠습니다. FAQ에 android11에서는 매니페스트 파일에 쿼리를 추가해 주어야 한다고 쓰여있더군요. 해당 방법을 적용하니 바로 해결되었습니다.

여기까지 하니 앱 작업이 어느 정도 마무리되었습니다. 이후부터는 본격적으로 웹 작업에 착수했습니다.

4. 웹서비스 작업

이전 기수분들이 작업 내용을 위키와 노션에 꼼꼼하게 작성해 주셔서 코드를 익히는데 정말 많은 도움이 되었습니다. 덕분에 코드에 빨리 익숙해질 수 있었습니다.

저희가 해야 할 것은 크게 두 가지였습니다.

• 알림
• 북마크

여기에 더해 자잘한 수정 사항과 관리자 페이지 기능 추가가 있었습니다.

메인 페이지에서 북마크 버튼을 누르면 데이터베이스에 저장되고, 북마크 탭에서 자신의 북마크 목록을 무한 스크롤 형식으로 볼 수 있도록 되어있습니다.

무한 스크롤은 메인 페이지에 이전 기수 분들이 구현해두셔서 많이 참고해서 구현했습니다. 사실 이 부분을 구현할 때 가장 많이 신경 쓴 부분은 애니메이션 효과였습니다. 밀어서 삭제할 때 값이 사라지는 모습이 뚝뚝 끊기니까 어색해 보여서 밀어서 삭제 예시를 이것저것 찾아보고 참고해서 만들었습니다. css를 잘 몰라서 어려웠지만 해내고 나니 굉장히 만족스러웠습니다.

그리고 알림 보내는 페이지 구현, 연결 기사 찾기 기능 추가, 페이지네이션 추가 등의 작업을 했습니다.

4. 서비스 적용, 협업

소통은 슬랙/온라인 클러스터/깃허브 프로젝트&이슈를 통해 이루어졌습니다. 구현하고자 하는 기능에 맞추어 각자 브랜치를 만들고 작업한 후 Pull Request를 통해 코드 리뷰 과정을 진행했습니다. 이후 develop 브랜치로 머지해서 dev 서버에서 제대로 동작하는지 확인 후 main 브랜치에 합쳐 실제 서비스 중인 웹 페이지를 업데이트했습니다.

데이터베이스를 수정해야 하는 경우도 있었는데 기존에 담겨있던 데이터를 훼손시키면 안 되기 때문에 선뜻 건드리기가 어려웠습니다. 하지만 dev 서버와 데이터베이스가 따로 동작하고 있어서 미리 테스트해보고 main 서버를 수정할 수 있었습니다. 기존의 데이터를 해치지 않고 한 달 반의 프로젝트를 마무리할 수 있어서 정말 다행이었습니다.

느낀점

• junhypar
  kotlin, node.js등 다 처음 입문하는 것으로 진행되는 프로젝트라 걱정이 많았지만, 멘토님과 팀원들이 정말 많은 도움을 주셔서 정말 감사했습니다. 진행하면서 클라이언트와 소통하는 것, 필요한 정보를 요구하거나 받는 부분이 왜 중요한지, 서버 사이드에서 작업할 때 발생하는 다양한 돌발 상황들에 대해 체감하고 고민하며 앞으로 어떤 개발자가, 어떻게 실속 있는 개발자가 될 수 있을까에 대한 생각 많았던 기간이었습니다.
  전에 내가 만들거나 혹은 다른 사람이 작업했던 코드를 다시 참조할 때 작업한 내용에 대한 정리 문서가 있고 없고의 차이가 너무나 컸습니다. 그리고 프로젝트를 진행하는 동안 깃허브의 pull request, issue 기능을 통해 작업 내용에 대한 코드 리뷰를 받고 미처 발견하지 못한 부분을 듣고 고치는 작업을 반복하면서 왜 이런 플랫폼들이 협업 기능들을 중요하게 하는지 체감할 수 있었고 위의 일련의 과정들이 개발 과정에 얼마나 많이 이바지하는지 느낄 수 있었습니다.

• hokim
  사실 맨 처음에는 안드로이드만 할 줄 알았는데 웹 프론트/백에서 구현이 덜 된 부분도 같이 개발해야 했습니다. 맨 처음에 기존 코드의 양이 많아서 파악하는데 시간이 조금 걸리기는 했지만 이전 기수 분들이 정리를 너무 꼼꼼하게 잘 해주셔서 빠르게 개발에 착수할 수 있었습니다.
  그리고 혼자 개발할 때는 아는 기능 안에서 해결해보려는 경향이 있었는데, 멘토님께서 확실히 가야 할 곳을 알려주시니까 훨씬 빠른 기간 안에 다양한 기능을 구현해 볼 수 있었습니다. 다른 동료분들과 함께 하니까 진행 속도가 빨라서 더 재밌었던 것 같습니다.
  한 달 반의 기간 동안 정말 많이 배웠습니다. 확실히 멘토님께서 이끌어주시니까 더 많이 성장할 수 있었던 것 같아요. 미팅마다 멘토님께서 주시는 정보들도 너무 좋았고 무엇보다 허광남 멘토님이 정말 따뜻하고 친절한 분이십니다. 혹시 프로젝트에 참가해보고 싶지만 망설이고 계시는 분들이 계시다면 허광남 멘토님이 이끄는 프로젝트로 입문해보시는 걸 추천합니다. 저도 처음에는 조금 긴장된 마음을 가지고 시작했는데 너무 재밌고 좋은 경험이었습니다. 다들 망설이지 말고 참여해보세요!

• jiskim
  처음 프로젝트를 시작하게 되었을 때는 아는 게 너무 없어서 막막함을 느꼈습니다. 하지만 잘 정리되어 있던 문서들을 참고하며 멘토님과 동료 카뎃분들의 도움을 받아 작은 기능부터 구현하면서 점차 발전 해나갈 수 있었습니다. 함께 만든 기능이 실 서버에서 잘 작동할 때는 보람도 느낄 수 있었습니다.
  또한 깃허브를 협업에 이용해 본 것이 처음이었는데, branch를 나눠 작업한 후 서로 review를 하면서 오류나 개선점을 발견하는 과정들이 효율적이고 앞으로의 저에게도 많은 도움이 된다고 생각했습니다.
  개발 중 느낀 것 외에도 매주 진행되는 미팅 중 멘토님이 따뜻한 조언과 함께 주시는 자료들도 많은 도움이 되었고 큰 힘이 되었습니다. 같이 열심히 작업한 동료 카뎃분들과 허광남 멘토님을 만날 수 있었던 것도 CMS 프로젝트에서 얻을 수 있는 큰 자산이었습니다. 다른 카뎃분들도 프로젝트에 참여할 기회가 생긴다면 많이 참여하셨으면 좋겠습니다.