[프로젝트 회고] 설치형 협업툴 서비스 TOOLIV

 

Github: https://github.com/TOOLIV/tooliv

1. 서비스 소개

협업을 위한 새로운 선택, TOOLIV

친구 및 동료들과 자유롭게 채팅하고,
화상회의를 통해 업무 효율을 높이고 실시간으로 소통해보세요!

 

주요 기능

튜토리얼

• TOOLIV을 처음 사용하는 사용자들도 서비스를 쉽게 사용할 수 있도록 튜토리얼을 제공합나다.

워크스페이스

• 워크스페이스는 팀 구성원이 함께 소통하고 작업할 수 있는 채널로 구성됩니다. 공동의 작업공간인 워크스페이스를 생성하고 소통하고 싶은 회원을 초대할 수 있습니다.

채널

• 채널은 채팅 및 파일 송·수신, 화상회의 등 팀원들이 모여 업무를 공유할 수 있는 공간입니다.
• 공개/비공개 여부을 선택할 수 있습니다. 워크스페이스 소속멤버라면 해당 워크스페이스의 모든 공개채널에 참여할 수 있습니다.
• 채팅채널 또는 화상채널을 생성할 수 있습니다.

채팅

• Markdown, 파일 송·수신을 포함하여 개인 또는 팀 전체에 쉽게 연락할 수 있는 수단입니다.
• 채팅 알림 기능을 제공합니다.
• 채널 내 검색 기능을 제공하여 필요한 정보를 쉽게 찾을 수 있습니다.

화상회의

• 화면공유 기능을 제공합니다.
• 화상회의 중에도 실시간 채팅이 가능합니다. 기존 채팅내역도 확인할 수 있습니다.

Incoming Webhook

• 외부 서비스로부터 메세지를 받을 수 있습니다.
• 웹훅을 생성하고, 생성된 웹훅 ID를 통해 외부로부터 받는 메세지를 채팅창으로 확인합니다.

메시지 전송 예약

• 메세지 전송 예약 기능을 제공합니다.
• 일정 시간이 되면 메세지 및 파일을 매일 자동으로 전송할 수 있습니다.
• 사용자들은 단순 반복 업무를 자동화하고, 본 업무에 집중할 수 있습니다.

파일 모아보기

• 파일 모아보기 기능을 제공합니다.
• 채널 내에서 주고 받은 파일을 한 눈에 확인할 수 있습니다.

 

2. 나의 역할

프론트엔드

사실 같이 프엔을 맡은 팀원 분들께서 다들 프론트엔드 고수셨다. 프로젝트를 세 번째 진행하다 보니 리액트로 개발하는 데 어느 정도 습관(?)이 들어서 내가 개발하던 대로만 개발하려는 느낌이 없지 않아 있었다. 하지만 다른 팀원들의 코드를 보고 미약하게나마 좋은 팁들(useCallback, 커스텀 hook)을 얻을 수 있었고 쉽게 쉽게 편하게 하려고 했던 걸 반성하게 되었다. 아쉬웠던 점은 이제서야 div를 남발하는 게 좋지 않다는 걸 깨달았단 거다. 다음에 또 프로젝트를 할 수 있다면 HTML 시멘틱 태그를 잘 지켜서 개발해 보고 싶다.

 

3. 좋았던 점

Electron

일렉트론은 리액트 프로젝트를 웹앱으로 만들어 주는 프레임워크다. 이걸 위해서 크게 고생한 건 없지만 웹에서는 잘 되는데 일렉트론 앱에서 안 되는 경우가 종종 있어서 그 버그 잡느라 다같이 고생한 기억이 오래 남는다. 크로미움의 존재에 대해 알 수 있어서 좋았고, 결론적으로 MS store에 배포까지 해 볼 수 있어서 좋았다.

 

Stomp

첫 번째 프로젝트 때 stomp가 뭔지, websocket이 뭔지 제대로 학습이 안 된 상태에서 그냥 완성하기만 급급했었는데 이번에 두 번째 사용하면서 조금 더 감을 잡을 수 있어서 좋았다. 특히 백이랑 소통하면서 내가 원하는 대로 구독하거나 할 수 있어서 좋았다. 첫 번째 프로젝트에서 구독을 굳이 두 번 했었는데, 그것도 한 번만 할 수 있게 수정할 수 있을 것 같다.

+ 현재 개인 메시지가 새로 생성되면 그 채팅방을 새로고침 해야 캐치할 수 있게 되어 있는데 이걸 유저 아이디로 따로 구독을 하게 수정을 해야 할 것 같다.

 

웹 성능 최적화

사실 웹 성능 최적화라고 하기엔 코드 스플리팅 뿐이었지만, 어떤 식으로 성능 최적화를 진행하는지 알 수 있어서 좋았다. 폰트 압축도 nginx 설정을 통해 부탁드렸고, cdn도 적용은 하지 않았지만 원리를 배울 수 있었다. 라우트 기준의 코드 스플리팅만 진행했는데 별로 어렵지 않은 과정임에도 성능 점수가 많이 올라서 신기했다. 앞으로 성능적으로 좋은 코드를 짜는 방법에 대해 계속 고민해 보고 싶다. (애니메이션이라든지..)

 

4. 아쉬운 점

marked.js

최대한 라이브러리를 사용하지 않고 마크다운 기반의 채팅을 진행해 보고 싶었는데, 아무래도 기간이 짧다 보니 text를 마크다운으로 전환하는 라이브러리를 사용한 건 어쩔 수 없던 부분이다. 그래도 에디터를 사용하지 않은 건 나름 괜찮았다고 생각한다!

 

next.js

우리 서비스의 랜딩 페이지가 next.js를 사용하여 개발되었다. 검색 엔진 최적화를 위해서였는데, 채팅에서 시간을 너무 뺏기다 보니 이 개발에 참여하지 못한 게 아쉬웠다. 코드 뜯어보면서 따로 혼자 공부를 해야겠다. 구글에 TOOLIV 검색하면 나오는 게 신기하다~

 

채팅 알림 로직

제일 리팩토링을 하고 싶은 부분이다.. 하지만 백 코드도 건드려야 하니 쉽지 않은 게 사실이다. 우리 서비스 구조 자체가 워크스페이스 밑에 채널을 여러 개 가질 수 있는데, 하나의 채널에 알림이 오면 그 채널이 속한 워크스페이스에도 알림을 띄워 주게 하려니 너무 어려웠다. 또한 그 채널의 메시지를 읽은 순간을 캐치해야 하는데 그것도 어려웠다. 슬랙이랑 MM 뜯어보니까 일정 주기로 api를 호출하는 것 같던데. 아무튼 브라우저를 떠나는 순간과 메시지가 도착한 순간에도 그 채널을 읽었다고 갱신해 주는 걸로 어느 정도 해결했지만 뭔가 만족스럽진 않다. 그냥 알림 띄우고 읽었다 해주고. 이게 전부일 줄 알았는데 생각보다 예외 상황이 너무 많아서.. 테스트의 중요성을 또 한번 깨달았다.

 

5. 정리

이 프로젝트를 마지막으로 모든 프로젝트가 막을 내렸다. 좋은 팀원들을 만나서 아직도 시작 안 했지만(?) 업데이트를 계속 진행하고 서버를 유지하기로 했다. 많은 기술을 사용해 보려고 협업 툴이라는 기획을 시도했는데, 중간중간 너무 슬랙과 MM 클론 코딩이 되지 않도록 계속 우리만의 차별점을 위해 노력했다는 게 다른 사람 눈에도 보였으면 좋겠다. 

무조건 붙잡고 시간 들이면 해결된다의 긍정주의자임에도 너무 안 될 땐 찡찡댔던 것 같기도 해서 좀 반성하게 된다... 

비대면으로 진행한 다른 프로젝트와 달리 툴립팀은 한번이라도 만나서 같이 할 수 있어서 정말 좋았다. 스타트업 차립시다(????) 비록 본선 진출은 못했지만 최우수상으로도 만족스럽다. 좋은 포트폴리오를 만들었으니 이제 취뽀만 하면 된다... 파이팅!