Spring Boot Web Chatting v2: 스프링 부트로 실시간 화상 채팅 만들기(1) ChatForYou v2

1. 시작하면서

와 정말정말 오랜만에 글을 쓰는것 같습니다. 하긴 실제로도 4개월정도 지났으니 오랜만에 쓰는게 맞네요, 사실 이번에는 정말 변명거리도 없습니다...그냥 그냥 귀찮아서 시간없어서 라는 핑계로 글을 쓰지 않았어요ㅠㅠ 그렇다고 그냥 마냥 놀고 있지만은 않았습니다. 나름대로 알게모르게 열심히 공부하고 개발하고 했습니다요(진짜임)

 

이번에 글을 쓰게 된 가장 큰 이유는 chatforyou.io 프로젝트가 대략 마무리 되었다는 것과 기존의 chatforyou 프로젝트를 리팩토링하고 이것저것 기능을 추가하는 v2 를 계속 개발하고 있다는 것을 적어두기 위해서입니다ㅋㅋ

 

사실 chatforyou.io 에서 개발된 것들이 정말정말 많았고, 특히나 처음으로하는 팀 프로젝트였기에 공부한것들도 많았습니다. 물론 그만큼 시행착오도 있었고, 특히 배운것 공부한것 개발했던 모든 것들을 합쳐도 아쉬운 것들이 많았습니다. 뭐, 아쉬운것은 아쉬운것이고, 내가 원하는 것을 만드는 것을 멈출 수 없으니까요.

 

최근에 chatoforyou.io 를 마무리한 이후 조금 많이 놀면서...기존의 chatforyou 에 '어떤 것들을 더 붙일 수 있을까? 또 어떻게 개선하면 좋을까?' 를 많이 생각해보았습니다. 역시나 아직도 재미있는게 많고 공부할 것들은 더욱 더 많더라구요. 그래서 이번에도 재미있는 걸 만드는 프로젝트를 이어가볼까 합니다. 다만 이름은 바꿔서 이름하야 chatforyou V2

 

2. chatforyou.io 프로젝트

아쉽게도 디자이너분이 떠나셨지만...ㅠㅠ 그래도 아주아주 멋진 최고의 프론트 개발자 분과 함께 1년 가까이 이어졌던 팀 프로젝트입니다.  openvidu 를 기반으로 하는 화상채팅 웹 프로젝트로 기본적인 로그인 기능부터 시작해서 정말 여러가지 기능들이 많이 있습니다. 

혼자할때와 팀프로젝트는 그 궤가 완전히 다르다는 걸 알 수 있게해준 프로젝트입니다. 하다못해 네트워크의 각종 서비스들도 혼자할때는 신경조차 쓰지 않았던 것들이 팀 프로젝트를 진행하면서 고민해볼 수 있었습니다. '나 뿐만 아니라 다른사람도 편하게 로컬환경에서 개발하게 하려면, 어떻게 해야할까?', '어떻게 배포하면 둘이서 더 편하게 배포할 수 있을까?'  같은 고민들도 있었습니다. 특히 운영환경에서 에러가 발생했을 때 프론트와 백엔드 두가지를 놓고 이중으로 검토하는 방향도 고려해야했고, 동시에 이는 한쪽만의 문제가 아니고 둘이서 서로의 개발내용과 환경을 모두 고려해야한다는 것도 깨달았습니다.

 

이러한 부분들은 운영환경 K8S 배포 및 에러 발생 시 slack 알림 추가,  gitaction 을 도입하여 자동화된 ci/cd 구현 등으로 해결 할 수 있었고, 특히 로그보고 분석하는 것에 대해서 정말 많이 늘었던 것 같습니다ㅋㅋ

 

https://github.com/chatforyou-io

chatforyou.io

 

다시 한 번 준호님 감사합니다! 1년동안 고생많으셨습니다!!(아래는 저희 짱짱 멋진 프론트 개발자님의 git 입니다ㅋㅋ)

https://github.com/junotb

junotb - Overview

 

3. ChatForYou V2

최근에 이사도하고 이래저래 일이 많아서 원래 목표는 약 3개월정도 천천히 쉬는 것이었습니다. 정말로 그냥 주말에 아무것도 안하고 게임이나 하면서 쉬려고 했었어요ㅋㅋ 근데 사람이 한번 습관을 들이니 그게 그리 쉽지 않더라구요. 약 3주정도 쉬고, 다시 새롭게 개발을 시작했습니다.

그렇다고 다른 주제의 개발은 아니고, 기존의 chatforyou 를 이어서 새로운 기능을 붙이고, 기존 기능을 보완하는 v2 를 목표로 하고 있습니다.

 

현재 목표는 아래와 같습니다.

• 전체 코드 리팩토링 && 전체 디자인 변경
• 전체 네트워크 구조 조정 : K8S 특성에 맞게 수정
• 방 관리를 기존의 메모리 방식이 아닌 redis 를 도입해서 redis 를 통해 관리하기
• SSE 를 통한 실시간 채팅방 관리
• 화상 채팅 시 실시간 자막 추가
• 소설 로그인 기능 추가
• Electron 을 통한 desktop 앱 개발 : Discord 처럼 사용하기
• 녹화 기능 개발

여기서 파랑색으로 되어있는 부분은 chatforyou V2 브렌치에 개발되어 있는 상태이고, 빨간색으로 된 부분은 현재 절찬리 개발중에 있습니다. 

 

4. ChatForYou V2 기능

아래는 개발되어있는 내용의 일부분입니다. SSE 기능과 화상 채팅 시 실시간 자막 추가 그리고 electron 으로 만든 데스크톱 앱에 관한 부분입니다! 코드에 관한 부분은 다음 글에서 적어보도록 하겠습니다!

 

1) 화상 채팅 실시간 자막

이 기능은 녹화 기능을 만들기 전 단계에서 만들어진 기능입니다. kurento filiter 와 websocket 을 이용했습니다

살짝 딜레이는 있지만 그래도 거의 실시간처럼 나오는 자막!

 

2)  SSE 를 통한 실시간 채팅방 관리

현재는 방 생성 삭제 시에만 SSE 가 동작하지만, 앞으로는 방 입장, 퇴장, 수정 시에도 SSE 를 추가할 예정입니다!

방 생성과 삭제 시 실시간 확인 가능

 

 

3) Electron 으로 만든 desktop 앱

electron 은 nodejs 지원하는 GUI 프레임워크입니다. 사실 이전부터 관심이 많았는데 특히 "도대체 디스코드는 어떻게 웹과 데스크톱앱이 똑같은 UI 를 유지하면서 데스크앱으로 만들어진걸까?" 하는 부분에서 였습니다. 그렇게 검색을 하다가 알게된 것이 바로 electron 이었습니다. 

보면볼수록 너무나 신기한 프레임워크였습니다. 이 프레임워크의 가장 큰 특징은 단순한 HTML, CSS, JavaScript를 이용하여 웹 앱을 제작하듯 데스크톱용 앱을 제작할 수 있다는 점입니다. 영상으로 보시면 알겠지만 아직 이런저런 버그도 많고 문제도 있지만 그래도 데스크톱 앱으로 만든 화상채팅 이라는 기본 목적에는 아주 충족하는 만족스러운 데스크톱 앱이 나왔습니다!

거의 유사 디스코드 입니다ㅋㅋ

 

 

5. 끝내면서

약 4개월동안 계~속 놀고 있지는 않았습니다만, 그래도 글을 안쓴건 맞으니까 앞으로라도 다시 열심히 써보겠습니다! 

사실 이번 v2 도 몇몇 분들과 함께하는 프로젝트이긴한데 언제 다들 도망가실지 모르니...ㅋㅋ

 

다음에는 SSE 와 kafka, 녹화기능, electorn 데스크톱앱 3가지 중 하나는 완성시켜서 올 수 있도록 노력하겠습니다! 혹은 중간 과정이라도 중계해볼까합니다!

 

6. Reference

https://www.electronjs.org/ 

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron