휴먼톡톡 2.0 업데이트 후기
휴먼스케이프 Frontend Software Engineer Henry입니다.
이번 포스트에서는 이전에 만들었던 휴먼톡톡을 새로운 버전으로 업데이트한 배경과 업데이트 후기를 알려드리려고 합니다.
1.0 그 이후
휴먼톡톡을 만들고 난 후, 몇 개월간 계속 사용하며 제가 유지보수하는 환경이 조성되었습니다. 하지만 그 과정에서는 불편한 점 및 개선점도 하나둘 생겨나게 되었습니다.
물론 인위적으로 피드백을 받았지만, 그렇다고 개선점이 없던 것도 아니었습니다.
이 피드백 말고도, 제 개인적인 개선점은 이렇습니다.
하루만에 급하게 만들어 코드 퀄리티가 좋지 않습니다.
인원 변동이 있을 시 무조건 재배포해야 합니다.
모바일에서 보기 너무 힘듭니다.
다시 만들어볼까?
그래서 코드를 다시 보고 지금 상태로는 유지보수하기 너무 힘들다는 판단이 들었습니다. (새로운 기능도 넣기 힘들어보였던 v1 코드 ㅠㅠ)
휴먼톡톡이 평온하게 꾸준히 진행되던 도중 코로나19가 국내에 발발하며, 밀집된 공간에서 대화하면 위험하기 때문에 휴먼톡톡도 덩달아 진행하지 않게 되었습니다. 저는 이 기회를 틈타 다시 휴먼톡톡을 재개하는 날까지 반드시 리팩토링을 하리라고 다짐했습니다.
열정적인 마음을 가지고!
하나부터 열까지, 같은 것처럼 다르게
먼저, 새로운 프로젝트는 두 개의 큰 변경점이 있습니다.
Slack API
Next.js (React + Serverless API)
Tailwind CSS
월요일 휴먼톡톡을 하기 전 10시에 출근해서, 가장 먼저 파악했던 것이 멤버 변동사항이었습니다. 새로운 분이 저희 회사에 합류했는지, 어떤 분이 회사를 떠나신다는지 아니면 인턴 기간이 끝났다던지 등등을 파악해서 휴먼톡톡에 반영하고 재배포하는(…) 일을 했습니다.
이 부분을 개선하기 위해 한참을 고민했는데, 어딘가에서 불러올 수 있는 API나 Firebase 같은 DB가 필요했습니다. 고민 끝에, 새 프로젝트는 Slack API를 사용해서 멤버의 사진, 이름 등을 자동으로 불러오도록 했습니다.
이거 하나 + webhook만 썼다는 건 비밀
그런데 이 API를 안전하게 사용하기 위해서는 반드시 API key 같은 정보들이 클라이언트에 저장되어서는 안 됩니다. 그래서 떠오른 게 Next.js였고, 훌륭한 환경 변수 관리 기능 + Serverless API 덕분에 간편히 마음 놓고 작업할 수 있었습니다.
참고: https://nextjs.org/docs/basic-features/environment-variables
마지막 큰 변경점은 전체 UI에 Tailwind CSS를 사용했습니다. Utility-first CSS 프레임워크라서, UI 작업하기에는 당연히 좋고 반응형도 무리 없이 진행할 수 있었습니다.
후기
칭찬 받았어요 :)
처음 만든 1.0보다 조금 더 생각하며 공들여 만든 2.0이기에 더좋은 사용성, 더 좋은 평가와 피드백을 받았습니다.
그리고 이제는 완성하지 못했던 기능들을 주기적으로 업데이트하기로 다짐하고, 제가 없더라도 평생 사용할 수 있도록 만들고 싶은 마음이 있네요 :)
레포지토리
이 프로젝트는 오픈소스로 공개되어 있습니다. (PR & 질의응답 환영합니다) 또한 세팅만 동일하게 하신다면 독자분의 다른 슬랙에도 사용하실 수 있습니다!
humanscape/human-talktalk 휴먼톡톡 세션을 편리하게 진행하기 위한 웹 앱. Contribute to humanscape/human-talktalk development by creating an account on GitHub.github.com
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
