• 우리 프로젝트에서 기술적으로 강점을 삼을 만할 항목을 정리해 주세요. (최종 발표 및 면접에서 프로젝트를 진행할 때 어떤 도전을 했는지 말할 수 있는 좋은 소스가 됩니다)

    • [ FE ] : 더 나은 유저 경험을 위한 무한 스크롤 기능
    • [ FE / BE] : 잦은 로그아웃 방지를 위한 Refresh Token 사용
    • [ FE / BE ] : WebSocket을 이용한 채팅 서비스 구현 및 화상 채팅을 위한 WebRTC 사용
    • [ BE ] : 서비스 로직 동시성 제어를 위한 DB 비관적 락 및 동기화 작업
    • [ BE ] : S3 엔드포인트 노출을 방지하기 위한 CloudFront 사용
    • [ BE ] : 개발 환경에 집중하기 위한 CI / CD 인프라 구축
    • [ BE ] : SockJS와 STOMP를 이용한 텍스트 채팅

  • 프로젝트에 적용했던 핵심 기술 목록을 작성해 주시고, 각 기술을 도입하게된 의사결정 과정을 정리해주세요.

    구분 요구사항 선택지 핵심 기술을 선택한 이유 및 근거
    FE / BE 화상 채팅 기능 구현을 위한 WebRTC (SFU / MESH / MCU) MESH (P2P) vs SFU 실시간성이 중요한 게임 서비스임을 고려했을 때, 실시간성이 가장 낮고 중앙 서버에서 데이터 혼합 및 가공에 많은 비용이 요구되는 MCU는 제외하기로 했다. Mesh와 SFU 방식을 놓고 고민하게 됨.
    나몰닭 서비스 특성 상 한 방에 최대 인원이 4명인 점을 고려했을 때 클라이언트의 부하가 심하지 않을 것이라고 판단했고, 서버에 거치는 일 없이 바로 peer끼리 정보를 주고 받기 때문에 실시간성이 중요한 게임 서비스에 적합하다고 판단했다.
    또한 서버의 부하를 줄일 수 있다는 장점까지 포함하여 Mesh 방식을 선택했다.
    FE / BE 유저에게 잦은 로그인을 요구하지 않기 위한 Refresh Token 사용 Redis를 활용한 Refresh Token Access Token의 유효 시간을 길게 설정하면 유저에게 잦은 로그인을 요구하지 않아도 되지만 토큰이 탈취되었을 때 남은 유효 기간 동안 탈취자가 마음대로 사용할 수 있다는 단점이 있다. 이를 극복하기 위하여 Access Token의 유효 기간은 2시간, Refresh Token의 유효 기간은 1주일로 설정하여 Access Token이 만료되면 자동으로 재발급 해줄 수 있도록 설계했다.
    Refresh Token을 저장할 DB로는 Redis를 선정했는데, Redis 자체의 TTL 기능으로 토큰 생명 주기 관리가 용이하기 때문에 선정했다.
    Refresh Token을 client 쪽에서는 Cookie에 저장했다. local / session stor
    BE 방 입장 시 트랜잭션이 겹쳐서 최대 인원을 초과하는 이슈를 발생.
    동시성을 해결하기 위한 DB락이 필요 Pessimistic Lock vs Optimistic Lock 나몰닭의 메인 서비스인 게임을 하기 전에 필수적으로 이루어져야하는 방 입장하기 로직이기 때문에 동시적으로 여러 트랜잭션이 DB에 접근하는 상황이 많을 것이라고 생각.
    충돌이 발생했을 경우 오버헤드가 생기는 Optimistic Lock보다 충돌이 발생하지 않았을 경우 오버헤드가 발생하는 Pessimistic Lock이 더 효율적이라고 판단했다.
    BE 웹 시그널링 서버 연결 시 간헐적으로 끊기는 이슈 synchronized 한 개의 스레드만 활용하고 있어서 동시에 메소드를 여러번 실행하면 간헐적으로 서버가 다운되는 상황이 발생.
    synchronized를 통한 동기화 작업으로 동시에 여러번 실행되지 않도록 수정
    BE S3 이미지 다운로드 시 엔드포인트가 그대로 노출되는 이슈 CloudFront, Route53 AWS CloudFront를 이용하요 속도 개선 및 엔드포인트를 감추는 용도로 사용.
    CloudFrontd의 배포 도메인을 감추기 위해서 Route53을 이용하여 도메인 변경
    BE 문자 채팅을 위한 SockJS와 STOMP 사용 SockJS & STOMP, Only Websocket 메시징 전송을 효율적으로 처리하기 위해 pub/sub 구조로 메시지를 공급하는 STOMP를 사용하여 기존 WebSocket만을 사용 했을 때 보다 쉽게 메세징 처리.
    WebSocket을 지원하지 않는 브라우저에서도 기능을 사용할 수 있도록 도우며, 낮은 대기 시간과 크로스 브라우징을 지원하는 SockJS를 선택해서 사용

  • 이번주 한 일

    BE

    • 서비스 배포
      • 인스턴스 스케일업
      • 구글폼/ 슬랙 홍보 자료/ 노션 자료 준비
    • AWS S3 이미지 주소 대체도메인으로 변경
    • 회원탈퇴 로직 변경 ( 유저와 관련된 게시글/ 이미지파일 탈퇴 시 삭제 되도록 변경)
    • Refresh Token 적용 완료 ( FE/BE )
    • throws IOException 등 별도 처리 없이 던져지는 에러 처리
    • 서비스 배포 후 트러블슈팅
      • 게임방을 나와도 채팅으로 연결된 웹소켓 연결이 제때 끊기지 않는 이슈가 있었는데, FE에서 웹소켓을 끊어주는 로직을 추가하여 해결함.
      • 카카오톡 로그인 시 이메일 허용을 하지 않은 user들은 로그인이 제대로 처리되지 않는 이슈가 있었는데, Kakao Developers 페이지 동의항목에 이메일 요소를 필수사항을 변경 후 해결.

    FE

    • 커뮤니티 기능 수정 및 추가
      • 댓글 CRUD 수정
      • 댓글 무한 스크롤
      • 커뮤니티 리스트 카테고리
      • 제목별 검색 기능
    • 게임 로직 일부 수정 (유저 피드백 반영)
      • 게임 시작, 종료 시 효과음 추가
      • 게임 시작, 종료, 강제종료, 패배 케이스 등 채팅 공지 추가
      • 게임 종료 시 유저 별 키워드 공개
    • 일부 페이지에서 뒤로가기, 새로고침 막기
    • UI 수정 (유저 피드백 반영)
    • 설정 모달 수정
      • 사용자 닉네임, 이메일, 가입일 표시
    • 회원가입/로그인 validation 작업

  • 유저 테스트를 진행했다면 해당 항목을 추가로 작성 해 주세요

    • 유저테스트 설문지의 링크와 결과, 결과를 토대로 반영해야 할 점을 작성 해 주세요

      • 설문지 링크 : https://docs.google.com/forms/d/1vQC_Rp70MSX1gL04VsL5y2MobGtqtP9V2mhvaPAI7sQ/edit
      • 반영해야 할 점
        • [x] 닉네임 변경 기능
        • [x] 게임 종료 시 키워드 알림
        • [x] 카카오톡 회원탈퇴 (서비스 연결 끊기)
        • [x] 버튼 중복 클릭 방지
        • [x] 게임 플레이 시 효과음 혹은 배경음
        • [x] 카메라 기본 상태 off로 설정
        • [x] 커뮤니티 페이지 카테고리 설정 방식 변경

    • 유저 테스트를 기반으로, 무엇을 어떻게 개선하면 좋을지 우선순위 별로 기록 해 주세요

      • 가장 중복 문의가 많은 순서로 우선순위 설정
        1. 닉네임 변경 기능
        2. 카메라 기본 상태 off로 설정
        3. 게임 종료 시 키워드 알림
        4. 커뮤니티 페이지 카테고리 설정 방식 변경
        5. 카카오톡 회원탈퇴 (서비스 연결 끊기)
        6. 버튼 중복 클릭 방지
        7. 게임 플레이 시 효과음 혹은 배경음