전체 글

[WIL] 항해99 12주차 회고ㅣ실전 프로젝트 런칭

이번 주 톺아보기 🎮 드디어 [눈치 코치 캐치!] 서비스 런칭! 7명의 팀원 모두가 약 한 달간 밤낮없이 고생한 결과물이 세상에 나왔다! 다들 열심히 해준 덕분에 항해99 10기 중 가장 빠르게 서비스를 런칭하게 되었다✌ 👉 눈치 코치 캐치! Github 구경하러 가기 GA를 이용하여 유저들의 데이터를 수집한 결과, 런칭 기간 동안 무려 793명의 유저가 우리 서비스를 이용해 주었다. 우리 예상을 훨씬 뛰어넘는 수치여서 감사할 따름🥰 또, 우리는 유저와 소통할 수 있는 여러 창구를 마련해 놓았는데, 소통 방식에 따라 다른 유형으로 이용할 수 있었다. 채널톡 ⇒ 즉각적인 오류 피드백 구글폼 ⇒ 디테일한 설문조사 채널톡으로 즉각적인 오류 피드백받기 설문 참여 이벤트 홍보, 점검 시간 안내, 챗봇 등등 이번 ..

[눈치 캐치 코치!] 본격 Spring으로 시그널링 서버 구축하기

시작하기 전에 지난 글에서 WebRTC를 구현하기 위한 방식으로는 Mesh 방식을, 그에 따라 필요한 시그널링 서버는 WebSocket을 통신 프로토콜로 사용하여 Spring Boot로 구축하기로 결정했다. 👇아직 이전글을 보지 않았다면?👇 [눈치 코치 캐치!] WebRTC를 어떻게 구현해야 할까? 시작하기 전에 지난 글에서 WebRTC에 대해 알아보았다. 그럼 이제 우리의 [눈치 코치 캐치!] 드로잉 게임 서비스에 맞게 WebRTC를 구현해야 한다. WebRTC를 어떻게 구현해야 할까? 👇아직 이전글을 보 oneul-losnue.tistory.com [눈치 코치 캐치!] WebRTC 한 방에 정리하기 시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주..

[눈치 코치 캐치!] WebRTC를 어떻게 구현해야 할까?

시작하기 전에 지난 글에서 WebRTC에 대해 알아보았다. 그럼 이제 우리의 [눈치 코치 캐치!] 드로잉 게임 서비스에 맞게 WebRTC를 구현해야 한다. WebRTC를 어떻게 구현해야 할까? 👇아직 이전글을 보지 않았다면?👇 [눈치 코치 캐치!] WebRTC 한 방에 정리하기 시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주기 위해 음성 채팅 기능을 고려하게 되었고, WebRTC를 접하게 되었다. 이것만으로 영상 oneul-losnue.tistory.com 첫 번째 고민, WebRTC의 방식 선택 WebRTC의 다양한 방식(Mesh vs SFU vs MCU) WebRTC는 기본적으로 서버를 사용하지 않는 P2P(Peer to Peer) 방식을 사용한..

[눈치 코치 캐치!] WebRTC 한 방에 정리하기

시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주기 위해 음성 채팅 기능을 고려하게 되었고, WebRTC를 접하게 되었다. 이것만으로 영상 통화도 가능하다고?! 그래서 WebRTC가 뭔데..! 지금부터 차근차근 알아보자. WebRTC가 뭔데? 드라이버나 별도의 플러그인 설치 없이 실시간 소통(비디오, 오디오)이 가능하도록 만들어주는 기술. 기본적으로는 P2P (Peer to Peer), 즉 두 단말이 서로 1:1 통신을 하게 되어있다. 웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고 또 유일한 P2P 표준이기도 하다. WebRTC는 표준임과 동시에 표준을 구현한 오픈소스 프로젝트의 이름이라고 한다. (사실 프로젝트가 먼저 있었고 표준화..

[TIL] 9주차 실전 프로젝트ㅣ WebRTC로 게임 준비 로직 구현

[눈치, 캐치, 코치!] 게임 준비 로직 구현 WebRTC를 이용해 다대다 음성연결까지 성공하였고, 이제 본격적으로 게임 준비부터 시작까지 로직을 구현하려 한다. 팀 내에서 WebSocket Handler를 하나 더 추가하자는 의견이 나왔으나 비교적 사례가 많지 않고, 불필요하다는 의견도 있어서 하나의 Handler에서 게임 로직을 진행하기로 했다. (텍스트 채팅은 STOMP를 활용하여 따로 구현 예정) 클라이언트로부터 받아오는 message type으로 구분하여 분기 처리를 해줄 것이다. 흐름으로 보는 로직은 이러하다. 접속한 유저의 sessionId와 해당 roomId를 GameRoomService에 넘겨서 유저의 ready 상태 변경 (true였다면 false로, false였다면 true로) 해당 ..

[WIL] 항해99 8주차 회고ㅣ실전 프로젝트

이번 주 톺아보기 벌써 8주 차라니? 시간이 너무 빠른 거 아닌가🤦‍♀️ 드디어 실전 프로젝트 돌입! 우리 팀은 눈치, 캐치, 코치! (Trys' ketch) 라는 드로잉 게임을 개발 중이다. 기획 단계부터 쉽진 않았지만, 팀원들과 오랜 회의 끝에 모두가 즐겁게 만들 수 있는 게임으로 결정하게 되었다. 이번주에는 다음과 같은 일들을 진행하였다. 기술 스택 결정 Spring Boot WebRTC + WebSocket(SockJS, STOMP) Redis, AWS RDS(MySQL) 협업 규칙 설정 코딩 컨벤션 Git 컨벤션 ERD 작성 Redis 적용에 러닝커브가 있어 일단은 MySQL 기준으로 ERD 작성 추후 휘발성 데이터를 구분하여 Redis로 적용 예정 API 명세서 기존 Rest API 방식이 아..

[TIL] 8주차 실전 프로젝트ㅣAPI 명세서, kakao 소셜 로그인, WebSocket

실전 프로젝트 [눈치, 코치, 캐치!] 진행 상황 API 명세 작성하기 어제 백엔드 팀원들과 작성했던 ERD를 토대로 프론트엔드 팀원들까지 전체 팀원이 모여 API 명세서를 작성했다. 아무래도 리얼타임 게임 서비스이다 보니 WebSocket에 관련된 부분은 명세를 작성하기가 어려웠다😭 일단은 데이터의 흐름만 참고하는 느낌으로 작성해 보았는데 중간에 많은 수정과, 많은 소통이 있을 예정..^^ kakao 소셜 로그인 제일 먼저 완성한 카카오 소셜 로그인 기능을 클라이언트와 맞춰 보았다. 역시나 한 번에 되는 법이 없지! 1) Redirect URI mismatch 처음에 잘못 설정해 주었던 부분은 Redirect URI 부분이었다. 최초 인증 요청 시 요청한 Redirect URI와 토큰 요청의 Redir..

[TIL] 8주차 실전 프로젝트ㅣ소소한 의사 결정과 WebRTC 시작

실전 프로젝트 [눈치, 코치, 캐치!] 진행상황 MVP 기준 회원 기능을 넣을지? MVP에는 굳이 회원 기능이 필요 없다 vs 구체적으로 유저에게 피드백을 받을 수 있는 범위가 좁아진다 1) 비회원만 2) 일반 로그인만 3) 소셜 로그인만 4) 일반 로그인 + 소셜 로그인 소셜 로그인만 도입하면? 개발 시간은 짧은 반면 추후 확장성 용이함 → 소셜 로그인만 구현하기로 결정! refresh 토큰의 필요성? → access 토큰의 만료시간을 길게 주기로 결정! 게임의 제시어를 어떻게 운영할지? 우리가 제공 vs 유저한테 받기 그렇다면 제시어를 제공해 주고 변경할 수 있도록! easy 모드는 제시어 강제(명사), hard 모드는 제시어 주되 자유(형용사+명사) 오늘의 나는 WebRTC와 고군분투 중이다. We..