Home
친해지길: Road to Friendly
친해지길은 서로가 처음인 사람들로 구성된 팀이 친해지기를 바라는 마음에서 기획한 온라인 아이스브레이킹 플랫폼입니다.
팀원들끼리 여러 질문들에 대해 실시간으로 답변 키워드를 입력하며 비슷한 취향이나 관심사를 파악하고, 관련된 다양한 컨텐츠를 공유하며 빠르게 친밀감을 형성할 수 있습니다.
여러 명이 입력했거나, 많은 공감을 받은 답변들을 한눈에 파악할 수 있는 워드 클라우드 UI를 제공해요
모든 아이스브레이킹 질문이 끝나면, 개개인의 답변들 중 공감을 많이 받은 항목들을 표시하고, 팀에서 함께 나누면 좋을만한 공통 관심사를 분석해서 제안해 드려요
우리 팀이 다같이 즐길 수 있는 것도, 내가 추천하고 싶은 것도 좋아요. 이미지 또는 유튜브 컨텐츠를 공유할 수 있어요.
참가자들의 실시간 답변과 공감 빈도를 동적인 UI로 표현하고 싶었습니다
키워드들이 서로 겹치지 않으면서 빈도수가 높을수록 중앙에 위치하도록 만들 수 있을까요?
관련 오픈소스를 분석하고 별도의 라이브러리 없이 구현한 과정을 정리해 보았습니다
👉 워드 클라우드 UI 구현을 위한 방향성 고민
👉 jQCloud 라이브러리의 워드클라우드 UI 구현 로직 분석
👉 오픈소스를 참고하여 React에서 워드 클라우드 UI 구현하기
실시간으로 입장하는 참여자들을 타원형으로 배치하고 싶어요!
👉사용자 배치 로직 구현하기
실시간 통계결과를 처리할 때, 소켓알림 이벤트 등록과 해제는 어디서 이루어질까요?
브라우저 탭 비활성화 시 타이머의 정확도가 떨어지는 문제는 어떻게 해결할까요?
웹워커의 도입 이유와 타이머 동기화문제, 그리고 소켓이벤트 리스너 등록 타이밍 문제를 해결하는 방법입니다
👉소켓이벤트 알림 타이밍 제어
유튜브 영상을 각 사용자 화면에서 동기화하려면, 영상 흐름 조작 권한을 특정 인원에게만 줘야 해요.
그런데, 유튜브 영상은 iframe으로 가져와야 해요. iframe 내부 영상의 컨트롤러를 영상 흐름 조작만 막도록 커스텀할 수 있을까요?
영상의 흐름과 프로그래스바는 setTimeout으로 동기화하는 게 좋을까요?
유튜브 영상 흐름을 동기화할 때 차이는 어떻게 줄일 수 있을까요?
👉 유튜브 영상을 어떻게 가져올 수 있을까
👉 유튜브 클라이언트끼리 동기화 개발하기 일지
👉 커스텀 비디오 컨트롤러 개발하기
사용자가 중복 입장할 수 있다면 어떤 문제가 발생할까요?
탭마다 독립적인 브라우징 컨텍스트를 가지는데, 어떻게 한 번에 하나의 방에 입장하도록 만들 수 있을까요?
Shared Worker라는 개념이 있다는데… Shared Worker를 이용하면 사용자의 방 입장 여부를 저장해서 해결할 수 있지 않을까요?
Shared Worker에서 방 입장 여부는 어떻게 관리할 수 있을까요?
👉 방 중복 입장 막기 우당탕탕 개발 과정
Socket.IO의 ‘Room’은 간단한 string 타입입니다.
그러나 프로젝트의 ‘Room’에는 필요한 메타데이터가 굉장히 많았습니다.
이러한 차이를 어떻게 해결했을까요?
👉 Socket.IO의 Room과 프로젝트 방 개념의 통합
모든 키워드 입력이 끝나고 나면, 사용자들은 이미지나 유튜브 영상을 공유할 수 있습니다.
해당 공유 상태를 어떻게 관리해야 할까요?
또한 공유자가 방을 나간다면, 이를 어떻게 처리하는 게 가장 안전할까요?
👉 공유 상태 관리와 동시성 문제 해결
| 분류 | 기술 스택 |
|---|---|
|
Common |
|
|
Frontend |
|
|
Backend |
|
|
Deployment |
|
|
Collaboration |
|
| 김주호 | 이종민 | 신유진 | 조윤희 | 한민수 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Backend | Backend | Frontend | Frontend | Frontend |