WebSocket

게임과 채팅 구현을 위해 실시간성을 보장하는 통신 방식이 필요했다.

HTTP에서도 실시간성을 보장하는 반이중 기법들(polling, long polling, streaming)이 존재하나, 실시간성이 떨어지거나 서버 부하가 올라갈 수 있다는 단점이 있어서, 하나의 TCP 연결을 통해 양방향 통신을 제공하는 Websocket을 선택했다.

SockJS

SockJS는 웹소켓 연결 실패 시 HTTP의 반이중 기법들을 사용할 수 있게 한다. 다양한 환경에서 안정적으로 실시간 통신을 가능하게 하기 위해 사용했다.

Stomp

다중 접속을 통한 비정상적인 이용을 방지하기 위해 서비스 시 인증 구현이 필요했다.

Stomp는 메세지 헤더를 통해 인증 처리를 구현하기 용이하며, pub/sub 구조의 Websocket기반 프로토콜로 메세지 발행 시 엔드포인트를 별도로 분리하여 관리하기 용이하여 선택하였다.

WebRTC

화상/보이스 채팅 기능을 위해 카메라와 마이크 등의 미디어 자원을 통해 실시간으로 소통할 수 있는 기술이 필요했다. WebRTC는 브라우저에서 지원하는 프레임워크로 많이 사용되어 안정성이 검증되어있고, 별도의 플러그인 없이 사용이 가능하여 User 경험에 유리할 것으로 판단했다.

Open-Vidu

Peer to Peer 기반의 WebRTC로 N:M 화상 채팅을 구현하기 위한 방법은 여러가지가 있는데 그 중 클라이언트와 서버의 부하가 비교적 적고 안정적인 SFU 방식의 구현을 위해서는 미디어 서버가 필요하다.

Open-vidu는 미디어 서버를 구현하는데 필요한 리소스를 절약해주고 빠른 실시간 통신을 도와주는 라이브러리이다. 대부분의 코드를 정리된 소스 코드로 제공해주고 있고 화상 채팅 뿐 아니라 메시징, 화면 공유 등 다양한 기능을 지원하여 확장성과 접근성이 좋을 것으로 판단하여 선택하였다.

QueryDSL / JPA

MyBatis은 SQL Session 생성/연결, SQL문을 개별로 작성하여 매핑한 후 Mapper(매핑xml)을 사용하여 SQL문을 호출하는 등 길고 반복적인 코드가 필요하다.

JPA는 이런 코드의 양을 줄여주고 가독성이 좋게 해준다. 다만 상세한 조건의 데이터를 추출하기에는 제한이 있고, Entity에 대한 repository를 생성/운영해야 하는 단점이 있다.

QueryDSL은 추가적인 클래스 파일을 생성할 필요가 없으며 JPA보다 자세한 조건을 통한 데이터 추출이 가능하다. 또한 동적 쿼리를 지원하여 조회 조건이 동적으로 바뀌는 경우 즉각적으로 조회할 수 있다.

위와 같은 사유로 당 프로젝트에서는 JPA와 QueryDSL을 함께 사용하였다.

JPA는 MyBatis에 비해 코드의 양이 적고, 가독성이 좋아 선택하였다. 다만, 상세한 조건의 데이터를 추출하기 어렵고 Entity에 대한 repository를 생성/운영해야하는 단점이 있어 QueryDSL과 함께 사용하였습니다. QueryDSL은 JPA보다 자세한 조건을 통한 데이터 추출이 가능하고 동적 쿼리를 지원하여 조건이 변경되는 경우 즉각적인 조회에 용이합니다.

SASS(SCSS)

variables와 mixins/include를 통해 동일한 style을 재사용하여 보일러 플레이트 코드를 최소화 할 수 있는 방식으로 기대되어 선택하였다.

Amazon AWS Amplify

자동 배포 방식 중 ‘Amazon AWS S3/Git Action’과 ‘Amazon AWS Amplify’ 두 가지 방법을 고려하였고, Open-vidu의 경우 https 프로토콜 사용이 필수 적인데 ‘Amazon S3/Git Action’ 방식은 http 프로토콜 배포를 지원하지 않아 ‘Amazon AWS Amplify’ 배포 방식을 사용하게 되었다.

Redux & Redux Toolkit

게임 특성상 한 화면의 구성 요소가 복잡하고, 요소의 변화도 다양하다. 때문에 한 눈에 구성 요소들을 파악하기 어렵고, props이용 시 props drilling이 발생할 수 있을 것으로 예상되어 상태관리 라이브러리가 필요했다.

Redux는 가장 많이 사용되며 검증된 신뢰성 있는 상태관리 라이브러리이며 Redux Toolkit의 Redux Devtool을 통해 debugging에 도움을 받을 수 있고, Redux의 보일러 플레이트 코드를 줄이기 용이하여 사용하였다.