Best of 2019 - 프로젝트 회고

bemypet.clarekang·2019년 12월 31일
3
post-thumbnail

이렇게 회사에 합류하고 첫 글이 프로젝트 회고라니, 느낌이 이상하네요.

제가 와서 주어진 첫 번째 과제는 앱을 만드는 일이었습니다.
요즘의 대세라는 Flutter를 사용해서 하이브리드 앱을 만드는게 첫 과제인데, 이 이야기는 오늘의 주인공이 아니므로, 나중에 차차 소개하도록 하겠습니다.

뜻밖의 토이프로젝트

이 모든 과정은 새로 입사한 개발자(네 그 개발자가 바로 접니다)가 워크샵 가는 길에 사내 메신저에서 농담처럼 던진 한마디에서 시작되었습니다.

'우리 아이'에게 연말에 시상을 하면 어때요?

이렇게 시작된 프로젝트는 일주일간의 개발 및 검수과정을 거쳐 출시되었습니다.

Project Goal

사용자가 Form을 통해 상장 컨텐츠를 제작 가능하고,
제작된 컨텐츠를 소셜미디어를 통해 공유 가능하다.

Form을 통해 입력된 내용을 Canvas로 렌더링해 이미지를 만들고,
결과적으로 그 이미지를 공유하는 이벤트를 진행할 수 있는 것이 목표였습니다.

사용된 프레임워크 및 기술(?)들

React + TypeScript

원래 저는 React만 3년 넘게 다뤄온 웹 프론트엔드 개발자인만큼, 빨리 진행해야하는 프로젝트의 특성상 익숙한 프로그래밍 언어 및 프레임워크를 선택했습니다.그동안 React의 hooks의 겉핥기를 하고 있었다고 생각한다면, 이번에 좀 더 관련 문서들을 찬찬히 읽어보고 적용할 수 있었던 것 같습니다. 특히 useEffect의 lifecycle을 좀 더 이해할 수 있었습니다.

HTML5 Canvas

제가 정말 좋아하는 HTML5 Canvas도 이번에 사용되었습니다.
상장 문구를 Form에 입력하면 Canvas에 렌더링되어 원하는 이미지를 만들 수 있도록 하는 역할이었습니다.

Firebase

Firebase는 간단한 로그인 등을 사용하기 위해 자주 사용하는 라이브러리인데, 이번에는 logging을 위해 Form Submit이 작성되면 Firestore에 로그를 쌓는 방식으로만 사용되었습니다.

Google Analytics + Google Tag Manager

GTM은 사실 처음 사용해봤습니다. 습관적(?)으로 GA를 붙였는데 최근에는 GTM을 사용하도록 추천한다고해서 이벤트 트래킹 및 트래픽 추적을 목적으로 사용했습니다.

Netlify

저는 자동화를 좋아하는 개발자이기 때문에 배포의 자동화는 당연한 수순이었습니다. 어차피 Back-end 서버를 따로 필요로 하지 않기 때문에 부담없이 Netlify를 통해 배포 자동화를 진행했습니다.

production 브랜치를 만들어서 이 브랜치에 푸시가 발생하면 자동으로 배포가 될 수 있도록 했습니다. 원래 Github Page를 더 자주 사용했지만, Github이 Pricing Plan을 변경하면서 최근에는 Netlify를 좀 더 사용하게 되는 것 같아요. 훨씬 편리하기도 하고요!

그 외

  • bemypet.kr 도메인과 연결을 위한 AWS
  • 소셜 공유를 위해 kakao, facebook, twitter 등 소셜 API

발생했던 문제들

급하게 진행된 프로젝트, OG를 제대로 사용하지 못했다

vonvon과 같은 콘텐츠 제작툴을 이미 사용해본 사용자들은 특별한 행동이 없이 내가 작성한 컨텐츠가 OG의 썸네일 이미지로 공유하는 것에 익숙해져 있습니다. 백엔드 없이 그 기능을 구현하기에는 성과대비 공수가 많이 드는 것 같아 과감히 생략했습니다. 하지만 이 기능의 생략은 사용자의 참여도가 떨어지게 하는 결과를 낳았던 것 같습니다.

뜻밖의 폰프듀

토이 프로젝트의 특성상 상업성 및 저작권 등에 크게 구애받지 않으며 cdn으로 로딩이 가능한 Google Fonts에서 serif 서체를 사용하기로 생각했습니다.

상장은 좀 굵은 폰트를 사용하는 경향이 있고, 나눔명조의 경우 serif에 들어가는 각진 느낌이 별로 마음에 들지 않아 Song Myung 폰트를 사용하기로 결정했습니다.

다만, 이 폰트는 서브셋 폰트라 문제가 발생합니다.
고양이 오너들이 좋아하는 고양이의 애칭 고먐미가 제대로 렌더링 되지 않았던 것..
급하게 상업용 한글 폰트 페이지, 눈누를 통해 새로운 폰트 후보를 찾아보는데.. 먐은 흔히 쓰이는 글자가 아니라 제외된 폰트가 꽤 많았습니다.

그 중에 사용할 수 있는 폰트를 골라 열린 폰트 프로듀스 101

내부적 투표를 거쳐 최종 승자는 아모레퍼시픽에서 만든 아리따 부리로 결정되었습니다.

마치며

회사에 입사 후 한달도 채 되기 전에 시작하고, 끝낸 프로젝트를 정리하며..
시작은 비록 채팅 한 줄로 시작되었으나, 마무리는 제대로 하고 싶어 포스트잇에 잘한 점 못한 점 나눠가며 모든 멤버가 주간미팅을 마치고 회고를 진행했습니다.

앞으로도 이렇게 작은 프로젝트들이 가끔씩 진행될 것 같은데, 이번 프로젝트의 경험이 더 나은 사용자 경험으로 발전할 수 있길 바라며 긴 첫 글을 마무리합니다.


참고 링크

완성된 프로젝트 사이트
http://bestof2019.bemypet.kr/

프로젝트 회고에 사용된 슬라이드 Slide Share

profile
비마이펫 개발자 클레어입니다

0개의 댓글