- ✨ 프로젝트 소개
- 🚀 주요 기능
- 🗺️ 프로젝트 플로우
- 🌈 기술적 도전 및 문제 해결 과정
- 🧩 시스템 아키텍처
- ⚙️ 기술 스택
- 🫶🏻 팀 소개
새로운 사람을 만날 때 어색했던 경험, 다들 한 번쯤은 있으셨죠? 저희 다할수있조도 프로젝트를 시작하며 비슷한 경험을 했어요. 이런 어색한 분위기를 바꿀 수 있는 열쇠가 뭘까 고민한 끝에, 답은 '공통된 관심사'라는 것을 깨달았답니다.
이 경험을 바탕으로 기획한 친해지길은 처음 만나는 사람들로 구성된 팀이 자연스럽게 친밀감을 쌓을 수 있도록 돕는 '온라인 아이스브레이킹 플랫폼'입니다.
친해지길에서는 팀원들이 실시간으로 다양한 질문에 답변 키워드를 입력하며 서로의 취향과 관심사를 알아갑니다.
또한, 관련된 콘텐츠를 공유하며 빠르게 공감대를 형성할 수 있도록 설계했어요.
이제 친해지길과 함께, 어색함을 깨고 진짜 소통을 시작해보세요!
여러 명이 입력했거나, 많은 공감을 받은 답변들을 한눈에 파악할 수 있는 워드 클라우드 UI를 제공해요
모든 아이스브레이킹 질문이 끝나면, 개개인의 답변들 중 공감을 많이 받은 항목들을 표시하고, 팀에서 함께 나누면 좋을만한 공통 관심사를 분석해서 제안해 드려요
우리 팀이 다같이 즐길 수 있는 것도, 내가 추천하고 싶은 것도 좋아요. 이미지 또는 유튜브 컨텐츠를 공유할 수 있어요.
저희는 짧은 시간 내로 친해질 수 있는 아이스브레이킹 서비스를 만들고 싶었어요. 이를 위해 저희가 고려한 핵심 가치는 무엇일까요?
첫 번째 가치는 “실시간성”이에요. 여러 명이 친해지기 위해서는 실시간으로 함께할 수 있어야 해요. 실시간으로 여러 명이 데이터를 주고 받을 수 있도록 아래와 같은 과정을 거쳤어요.
사용자들의 실시간 데이터 전달을 위해 Nest.js의 Gateway와 Socket.IO를 사용해보기로 했어요.
하지만 Socket.IO에서 제시한 ‘Room’의 개념과 프로젝트에서 구성할 ‘방’의 개념은 너무나도 달랐어요. Socket.io의 Room을 통해서는 방의 호스트, 페이즈, 키워드 목록 등을 기록할 수 없는 구조였기 때문이에요.
이러한 차이를 어떻게 해결할 수 있었을까요?
👉 [Nest.js] Gateway 효율적으로 사용하기 - socket.io의 방 개념 도입
두 번째 가치는 사용자들이 서비스를 사용하면서, 마치 함께 모여서 재미있는 게임을 하면서 친해지고 있다는 느낌을 받게끔 하는 것이었어요.
그러한 목표를 달성하기 위해서는 서비스의 화면이 정적이면 좋지 않을 것 같아, UI/UX면에서 동적인 애니메이션과 인터랙션의 도입을 시도했어요
- 참여자들의 프로필을 타원형으로 배치해 함께 모여 있다는 느낌을 강조했어요.
- 실시간으로 주고받는 관심사 키워드들이 추가되고 선택받는/공감받는 과정을 동적인 애니메이션으로 표현하기 위해 워드 클라우드 UI를 구현했어요
- 유튜브 영상을 공유한 사람의 화면과, 다른 참여자들에게 보여지는 화면을 동기화하여 동시에 같은 컨텐츠를 보며 친해질 수 있게끔 만들었어요
실시간으로 입장하는 참여자들을 어떤 방식으로 원활하게 배치할 수 있을까요?
타원형 배치를 구현하기위해 극좌표게를 사용하여 각 참여자의 위치를 수학적으로 계산했어요
👉사용자 배치 로직 구현하기
어떻게 키워드들을 서로 겹치지 않으면서, 선택된 횟수가 높을수록 중앙에 위치하도록 배치할지 막막했어요.
별도의 라이브러리 활용도 고려해 보았지만 스타일링의 한계가 느껴져서, 직접 로직을 분석해보기로 했어요.
워드 클라우드 관련 오픈소스를 분석하고 별도의 라이브러리 없이 구현한 과정을 소개합니다
👉 워드 클라우드 UI 구현을 위한 방향성 고민
👉 jQCloud 라이브러리의 워드클라우드 UI 구현 로직 분석
👉 오픈소스를 참고하여 React에서 워드 클라우드 UI 구현하기
유튜브 영상을 각 사용자 화면에서 동기화하려면, 영상 흐름 조작 권한을 특정 인원에게만 줘야 해요.
그런데, 유튜브 영상은 iframe으로 가져와요. iframe 내부 영상의 컨트롤러를 영상 흐름 조작만 막도록 커스텀할 수 있을까요?
영상의 흐름과 프로그래스바는 setTimeout으로 동기화하는 게 좋을까요?
유튜브 영상 흐름을 동기화할 때 차이는 어떻게 줄일 수 있을까요?
👉 유튜브 영상을 어떻게 가져올 수 있을까
👉 유튜브 클라이언트끼리 동기화 개발하기 일지
👉 커스텀 비디오 컨트롤러 개발하기
사용자들의 이미지, 유튜브 영상을 어떠한 방식으로 제공해야 효율적인 관리가 가능할까요?
공유자가 방을 나가거나 강제 종료되는 경우, 이를 어떻게 처리하는 게 가장 안전할까요?
👉 공유 상태 관리와 동시성 문제 해결
서비스의 가치 차원 이외에도 완성도를 높이기 위해 고려해야할 점들은 추가로 존재했어요. 저희는 어떤 점들을 고려하고 어떻게 결론을 내렸을까요?
실시간 통계결과를 처리할 때, 소켓알림 이벤트 등록과 해제는 어디서 이루어질까요?
브라우저 탭 비활성화 시 타이머의 정확도가 떨어지는 문제는 어떻게 해결할까요?
웹워커의 도입 이유와 타이머 동기화문제, 그리고 소켓이벤트 리스너 등록 타이밍 문제를 해결하는 방법입니다
👉 소켓이벤트 알림 타이밍 제어, Web Worker를 사용한 타이머 구현
사용자가 중복 입장할 수 있다면 어떤 문제가 발생할까요?
탭마다 독립적인 브라우징 컨텍스트를 가지는데, 어떻게 한 번에 하나의 방에 입장하도록 만들 수 있을까요?
각각의 탭끼리 정보를 공유할 수 있는 방법이 존재할까요?
👉 방 중복 입장 막기 우당탕탕 개발 과정
동적인 인터페이스가 많은 서비스인 만큼 최적화와 성능 개선도 빠뜨릴 수 없죠
React Profiler를 활용하여 불필요하게 자주 리렌더링되는 컴포넌트를 찾아 최적화한 과정과,
워드 클라우드 UI를 그릴 때 발생하는 reflow 횟수를 줄여서 성능을 개선한 과정을 소개합니다
👉 FE 코드 리팩토링 및 최적화, 성능 개선 과정
CI/CD 파이프라인을 어떤 방식으로 설계하고 구성해야 할까요?
FE 코드를 배포할 때, 어떤 절차와 도구를 활용해야 할까요?
배포된 파일을 어디에 저장하고, 어떻게 제공해야 할까요?
👉 FE CI/CD 구축하기
Let’s Encrypt를 사용하여 HTTPS를 연결하면 어떤점이 좋을까요?
HTTPS 적용을 어떻게 해야할까요?
인증서 발급 후, 관련 파일을 어디에 저장하고, 어떻게 보안을 강화할 수 있을까요?
👉 Let’s Encrypt 이용하여 HTTPS 적용하기
| 분류 | 기술 스택 |
|---|---|
|
Common |
|
|
Frontend |
|
|
Backend |
|
|
Deployment |
|
|
Collaboration |
|
| 김주호 | 이종민 | 신유진 | 조윤희 | 한민수 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Backend | Backend | Frontend | Frontend | Frontend |