❓ 한페이지 북클럽 앱은 무슨 프로젝트인가요?
한페이지 북클럽 앱 바로가기
한페이지 북클럽?
북클럽인 한페이지는 내가 참여하고 있는 책모임이다. 책을 좋아하는 사람들이 모여 다양한 분야의 책을 읽어봐야 한다는 취지 아래 한달에 한번 만남을 갖고 있다. 한달동안 책 한권을 읽고 발제자가 발제문을 올리면 모임에서 멤버들이 이에 대해 이야기를 나누는 모임이다.
한페이지 북클럽 앱은 한페이지 멤버들이 북클럽에 대한 기록을 편하게 남기게 할 수 있기 위해 만들어졌다.
✅ 대표적인 기능
- 로그인 / 회원가입 / 게스트로 입장 기능
- 발제문 작성 기능
- 추천책 검색 기능
- 모임후기 기록 기능
- 지난 독서모임 히스토리 연도별 보기 기능
- 투표하기 기능
- 자신이 작성한 기록을 볼 수 있는 기능
등등이 있다. (더 많이 있다...!)
이번 프로젝트는 실제 다른 사람들이 정말 쓸 것을 고려하며 만든 것이기 때문에 완성도 있게 만들기 위해 노력했다. 예를 들어 회원가입 후 로그인 하는 기능이 있으니 비밀번호 찾기, 비밀번호 변경하기 기능 등등 필수 기능을 모두 추가했다. Demo 보기
홈에서는 모임의 전체적인 일정과 정보를 한눈에 볼 수 있게 담아봤다. 가장 첫번째로 이달의 북클럽 책이 나오며, 아래 섹션은 모임 일정, 그 아래는 위의 사진에는 안나오지만 등록된 투표와 그 아래는 독서 분야 일정이 나온다.
그리고 멤버들이 네비게이션에 지난 책모임의 기록과 이달의 책모임 기록을 나눴으면 좋겠다고 해서 그 의견을 반영했다. 원래 구분이 없었는데 아주 좋은 의견이었다. 그래서 지난 책모임의 기록도 연도별로 나눠서 쉽게 찾아볼 수 있도록 했다. 연도별로 나눈 것은 한해동안 이렇게 12권의 책을 읽었구나라는 느낌을 주고 싶었다.
그리고 홈 다음으로 앱에서 가장 메인인 화면이므로 네비게이션 가장 가운데에 위치시켰다. 이달의 책모임 페이지에서는 발제자가 발제문을 작성할 수 있는 모달창과 추천책과 모임후기를 작성할 수 있는 입력창이 있다.
책을 검색 ➔ 도서 정보 확인 ➔ 추천책 정보에 넣기
그리고 추천책은 유저가 책 이름만 쓰게 해서는 별로 기능의 효용성이 없을 것 같아 카카오 도서 api를 받아와 책 정보를 찾아 그 정보를 보여줄 수 있게 했다.
언급한 것 이외의 더 많은 기능은 아래 링크에서 확인할 수 있다.
한페이지 북클럽 앱 바로가기
🔎 프로젝트를 시작하게 된 계기
내가 참석하고 있는 책모임 일명 한페이지는 내가 출판사 편집자가 되고 싶어서 다녔던 한겨레 출판학교에서 만난 사람들과 꾸린 독서모임이다.(이것저것 기웃대본 1인...) 한페이지는 "사람은 자기가 좋아하는 분야의 책만 읽게 되는데 다양한 분야의 책을 읽으며 시야를 넓혀야 한다" 라는 취지 아래 한달에 한번 만나는 모임이다. 현재 11명에서 3명이 빠지고 8명으로 유지되고 있다.
내가 한페이지 전용 앱을 만들기 이전에는 멤버 개인적으로 조금 기록을 해두는 정도였고 발제문 이외의 기록은 공유되지 않았다. 그렇게 책모임을 오래 이어가다 보니 누가 어떤 책을 추천했고, 무슨 이야기를 했었는지 유실되기 시작했다.
나는 모임에서 나왔던 이야기들을 기록물로 만들어 관리할 필요성을 느꼈고 멤버들 또한 공감했다. 내가 중요하게 생각했던 건 모임에 관한 기록물과 정보는 모든 멤버들이 쉽게 볼 수 있고 또 공유되어야 한다는 것이었다. 그런 점에서 대표적인 문서 도구인 노션이나 구글 문서 같은 경우 쓰지 않는 멤버들이 있어 사용하기 어려웠고, 독서모임을 위한 앱 또한 마땅한 것이 없었다. 그래서 링크만 있으면 들어가서 쓸 수 있는 웹앱을 내가 직접 만들기로 했다....!(없으면 만들지 뭐! 그럴려구 코딩 배운거 아녀~)~~
그래서 멤버들에게 나의 계획을 알렸고, 모두가 너무 직접 앱을 만든다는 사실을 신기해했으며 너무 좋다고 말씀들을 해주셨다. 그래서 일단 먼저 내가 혼자 기획해서 만든 프로토타입을 멤버들에게 보여주었고,(일단 시각적으로 보여주는 게 좋을 것 같았다) 그걸 본 멤버들과의 회의가 시작되었다.
그 회의는 무려 우리 독서모임의 1주년 이벤트를 하기 위해 만난 자리에서 하는 것이어서 더욱 의미(?)있었다 ㅎㅎㅎ
멤버들은 주저하지 않고 의견들을 냈다. 실제로 회의를 하면서 조금 결이 맞지 않는 것 같은 의견은 과감히 쳐내지고(?) 내가 생각지도 못했던 좋은 아이디어를 내주었다. 혼자 하는 것보다 함께 쓸 앱을 함께 만들어가니 굉장히 재밌었다.😆 개발자는 나 한명이었지만 기획 자체는 우리 멤버들도 참여해줘서 든든했다.
❓ 프론트엔드
✅ TypeScript
이번에는 타입스크립트를 사용해봤다! 처음에는 오류가 발생해서 해결못하고 아예 프로젝트를 다시 시작해야까봐 좀 걱정스러웠는데 용감하게 시작했고 결과는 너무 만족스럽다! 쓰기를 정말 잘한 것 같다. 이래서 한번 타입스크립트를 쓰면 자바스크립트를 못쓴다고 하는 거구나! 그렇지만 이번 프로젝트를 위해 공부를 해가면서 사용해봤는데 썩 그렇게 엄청 잘 쓴 것 같지는 않다. interface만 주구장창 썼다.... 하지만 에러를 다 해결했다는 점에서 일단 만족하려고 한다. ㅋㅋㅋ 다음에는 좀 더 타입스크립트의 다양한 기능들을 써보려고 노력해봐야 겠다.
✅ React
프론트엔드 프레임워크로는 React를 선택했다. 일단 NextJS를 쓸까 좀 고민을 하긴 했는데 해당 프로젝트의 경우 SEO나 SSR이 그렇게 중요하지 않아서 꼭 NextJS를 쓸 필요는 없었다. 그래서 React18(Suspense나 LazyLoading... 등등)을 연습해보겠다는 생각으로 React를 선택했다.
✅ Recoil
React에는 Redux를 많이들 사용하는데 나는 Redux를 그렇게 좋아하지 않는다... Redux 공부할 때는 그냥 그냥 아무 생각 없이 했는데 Recoil을 접하고 나니까 Redux는 정말 보일러 플레이트가 넘심.... 그리고 Recoil은 React에 최적화된 상태 라이브러리라서 그런지 개념도 훨씬 비슷하고 이해하기가 좋았다. 일단 처음에 Typescript부담이 컸기 때문에 상태 라이브러리는 Recoil을 쓰기로 결정했다.
❓ 백엔드
Firebase
그렇다면 아직 코딩을 배운지 채 1년도 안된 사람으로서... 백엔드는 어떻게 했을까? 답은 이미 위에 있다 ㅋㅋ
처음에는 백엔드 때문에 이 프로젝트를 할 수 있을까 많이 걱정됐다. 파이썬을 배워보고 싶었던 나는 순간 파이썬을 공부하면서 만들어볼까...? 했지만 시간이 굉장히 오래 걸릴 것 같았다.그렇게 백엔드 서비스를 제공해주는 파이어베이스를 선택하게 되었다. AWS와 파이어베이스에서 고민을 했지만 AWS는 일정 기간동안만 무료인 반면 파이어베이스는 일정 용량이 무료인 형식이었다. 이 앱을 한정된 기간동안 사용하진 않을 것 같고 또 이미지나 영상같은 고용량 데이터를 다룰 앱이 아니었기 때문에 파이어베이스가 더 적합한 것 같았다. 또 파이어베이스가 문서정리도 잘 되어 있는 편이었다.
오... 하루에 문서를 20,000번이나 절대 안쓸 것 같다. 무료 요금제 땅땅!
❓ 개발 기간
✔️ 2022년 4월 20일 ~ 2022년 7월 3일 (약 2달)
이게 정말 개발에만 걸린 시간이 아니라 기획부터 디자인까지 합친 기간이어서 더 오래 걸린 것 같다. 정말 왜 분업을 하는지 알 것 같았다...😭 😭
초반에는 어떻게 어떤 기능을 만들고 어떤 위치에 넣어야 할지 기획했고, 사용자가 낯설어 하지 않고 잘 사용할 수 있도록 고민하며 디자인을 구상했다. 패캠 과정에서 디자이너 수강생과의 협업을 했었는데 그때 어깨너머로 배운 피그마로 구현도 해봤다.
그래도 대학생때 기획발표를 엄청 해본 경험이 있고, 미적감각이 없는 편은 아니라고 생각했는데 지금 결과물을 보면 계속 수정에 수정을 거쳐 많이 달라졌다. 계속해서 중간에 마음에 안들어서 바꾼 것이다. 그래서 중간에 바꾸니 코드를 아예 들어내서 처음부터 짜야 하는 경우도 생겼다.
아 그래서 패캠의 기업 연계 프로젝트를 할 때 실무 담당자님 기획 기획을 부르짖었구나...! 개발보다는 오히려 기획에 시간을 더 많이 써야 한다고 했었는데...!🫢
중간에 정말 후회도 하고 반성을 많이 했다. 왜 기획을 더 탄탄하게 하지 않았을까. 디자인을 왜 확정하지 않고 개발부터 시작했을까. 물론 나는 개발자고 빨리 앱을 개발하고픈 마음에 그랬지만 내가 개발만 맡아서 할 게 아니라면 개발에 앞서 기획과 디자인 단계가 정말 탄탄해야 한다고 느꼈다. 안그러면 오히려 더 돌아가게 된다!
그리고 이번에 정말 느꼈다. 모든 것을 다 하기는 정말 쉽지 않다고. 괜히 기획자가 있고 디자이너가 있는게 아니라고.
중간에 기획이 바뀐 부분이 있어서 어느 기능을 아예 처음부터 갈아엎기도 하고 멤버들의 의견을 반영하느라고 아예 로직을 다시 짠 부분이 있어서 그런 것 같다.
❓ 개발하면서 느낀 점
-
인내심이 많아졌다. 나의 코딩 스타일을 좀 더 알게 되었다.
처음 다루는 것들이 많다보니 에러도 많이 만났고 또 어떤 건 어떻게 코드를 짜나가야할지 감도 잡히지 않는 것이 있었다. 특히 투표하기에서 다시 투표할 수 있는 기능을 만들다가 만난 버그는 정말... 지금 생각해도 머리가 아프다. 그러면서 인내심이 많아진 것 같다 ㅋㅋㅋ 이걸 인내심이라고 해야하나? 예전에는 문제를 해결 못할까봐 굉장히 불안해했는데 이제는 시간이 좀 더 걸릴 뿐 해결할 수 있다고 생각하고 있다.
그리고 문제가 해결되지 않을 때에는 어떻게 해야 할지 나의 코딩 스타일도 조금 파악했다. 어떤 분들은 정말 해결될 때까지 붙잡고 세세하게 살펴보는데 나는 무조건 최소 10분은 머리를 식혀줘야하는 것 같다. 한번은 정말 끈질기게 반나절동안 버그를 붙잡고 있었는데, 고쳐지지 않아 포기하고 머리좀 식히고 한시간뒤에 하니까 10분만에 고친 기적이.... 진짜 그땐 엄청 허탈했다 ㅋㅋ 약간 그런 경우가 반복되어서 에러나 버그를 만나면 일단 고치려고 시도하고, 너무 시간을 잡아먹는다 싶으면 조금 머리를 식히거나 다른 걸 하다가 다시 하는 편이다.
-
위에서도 말했지만 정말 개발에 앞서 기획과 디자인은 탄탄해야 한다.
이부분은 위에서 언급했으니 넘어가겠다. 하지만 정말 기억하자!! 앞 단계가 탄탄하지 않으면 개발은 오히려 더 오래 걸린다!!
-
반응형... 정말 신경써야 할게 많다!
그렇다 앞서 얘기하진 않았는데 웹앱을 중심으로 만들었지만 태블릿과 데스크탑에서도 사용할 수 있도록 반응형으로 만들었다. 이것도 정말... 디자인이 다 확실히 완성되고 나서야 해야하는 것 같다. 중간 중간 디자인을 바꿔서 얼마나 고생을 했는지 모른다.
디자인이 변경되어서 힘든 것도 있지만 정말 아이폰... 대체 아이폰에 예상치 못한 디자인이 들어가는 걸까? 처음 배포하고 나서 아이폰으로 버튼을 보고 나서 정말 깜짝 놀랐다. ㅋㅋ
-
다음에는 꼭 디자인 시스템 컴포넌트를 만들어야겠다!
정말 의외로 시간 오래걸리는 부분 css.... 그동안 좀 더 작은 프로젝트만 했었기 때문에 css에 시간을 많이 뺏긴다는 생각을 하진 못했는데 조금 규모가 커지니까 바로 느꼈다. 다음에는 꼭 디자인 라이브러리를 사용하고 디자인 시스템 컴포넌트를 만들기로 결심했다.
이번 프로젝트에서도 그래도 styled-component로 공통 스타일을 추출해서 컴포넌트에 적용하는 정도까지는 했는데, 너무 얕은 수준이었던 것 같다.
정말 커스텀해야할 것 같은 건 내가 짜지만 그 이외의 것은 mui 컴포넌트 라이브러리를 써야겠다.
-
충격의
flexbox....나는 flexbox에서
justify-content: end라고 줄여서 적는 습관이 있었는데 정말 싹 고쳤다. 그러니까justify-content: flex-end다! 왜냐하면 심각한 오류를 발견했기 때문이다. 개발환경에서는 오류가 안나지만 배포되면 아예 적용이 안된다. 정말 "왜 버튼이 끝으로 안가지?? ㅠㅠ 대체 뭐가 문제야 ㅠㅠ" 라며 다른 css를 계속 고쳤더랬다... 그리고 스택오버플로우에서 나와 같은 오류가 있었던 작성자의 글을 보고 경악해서justify-content: flex-end라고 고쳤더니 해결되는 매직이... 진짜 상상도 못했다. 이 부분은 사실 느낀점 카테고리에 적을 만한 글은 아닌데 너무 충격적이어서 적어봤다.
여기까지 나의 개발 후기였다. 조금 글이 부족한 것 같은데😂 😂 더 글을 많이 써보면서 더 완성도 있는 글을 쓰려고 한다. 일단 프로젝트가 너무 재미있었고 다 완성해보고 나니 너무 뿌듯하다는 마지막 말을 남기며 이만!
긴 글 읽어주셔서 감사합니다. 🥰
