2024-01-04 본 캠프 65일차 / 84일차 TIL

2024-01-04 본 캠프 65일차 / 84일차 TIL

주요 진행 사항

- 최종프로젝트 발제

- 프로젝트 1차 스크럼 (디자이너님과 회의)

 

최종 프로젝트 1차 스크럼 (SA)

최종 프로젝트 주제 : 커스텀 화면공유가 가능한 메타버스 환경 (NEP)

- 프로젝트 선정 배경

프로젝트 배경현재 상황:
개발자 교육과정을 수강 중인 송용승씨는 프로젝트 시작 및 진행 중 발표자료 공유 방식에 불편함을 느낌.

문제점:
청취자는 발표자가 제공하는 자료만 볼 수 있으며, 발표자는 자신의 환경을 청취자에게 맞게 설정해야 하는 불편함이 있음.

타겟
개발자 교육 과정을 수강 중인 학생들과 강사.화상회의를 자주 사용하는 기업 및 교육 기관.

목적 / 기대효과목적:
화상회의 시 발표자료 공유의 효율성과 사용자 경험 개선.기대효과: 발표자와 청취자 모두가 더 편리하고 유연하게 자료를 공유하고 확인할 수 있는 환경 조성.

컨셉
사용자 중심의 발표자료 공유 시스템 개발.청취자 개개인이 원하는 방식으로 자료를 볼 수 있는 기능 제공.

Pain Point
청취자의 제한적인 발표자료 접근성.
발표자의 청취자 환경에 맞는 자료 준비 부담.

핵심 기능
양방향 발표자료 공유: 청취자가 원하는 시점에서 발표자료를 개별적으로 조작 및 확인할 수 있는 기능.
사용자 환경 맞춤 설정: 발표자의 화면을 청취자의 화면 크기나 해상도에 맞게 조정하는 기능.
대화형 피드백 시스템: 청취자가 발표 중 질문이나 의견을 즉시 공유할 수 있는 인터랙티브 기능.

 

1. MVP 스펙 

1. 인증/인가 (로그인):
기술 스택: 인증 라이브러리: supabase auth 사용
데이터베이스: 사용자 정보 저장을 위한 supabase PostgreSQL.

2. 여러 개의 화면 공유:
기술 스택: 화면 공유 로직: JavaScript와 Next.js의 상태 관리로 구현.
프론트엔드: React.js와 Next.js의 동적 컴포넌트 로딩 활용.

3. 카메라 공유:
기술 스택: WebRTC: 실시간 비디오 및 오디오 커뮤니케이션.
프론트엔드: 사용자 카메라 인터페이스 구현을 위한 HTML5와 CSS.

4. 채널 별 실시간 채팅:
기술 스택: supabse realTime

5. 키보드 조작 가능한 아바타:
기술 스택: phaser or pixi.js를 이용한 2D 동작 구현 canvas를 이용한 메타버스 화면 구현

6. 아바타 중심의 공간 이동:
기술 스택: phaser or pixi.js를 이용한 2D 동작 구현 canvas를 이용한 메타버스 화면 구현

7. 청취자 맞춤형 화면 선택 및 조절:
기술 스택: React.js: 동적 UI 구성.
CSS Grid/Flexbox: 유연한 레이아웃 디자인.

8. 양방향 발표자료 공유:
기술 스택: Next.js: 서버사이드 렌더링 및 클라이언트사이드 로직 통합.
WebSocket/REST API: 데이터 교환 및 관리.

9. 사용자 환경 맞춤 설정:
기술 스택: CSS Media Queries: 반응형 웹 디자인.
JavaScript: 사용자 환경 감지 및 UI 조정.

 

2. MVP 목표 (~1/18)

1. 인증/인가 (로그인):
Next.js를 이용해 구축된 웹 애플리케이션에서는 사용자가 안전하게 로그인하고 인증을 받을 수 있는 기능이 구현됩니다. 이를 통해 개인화된 서비스 접근이 가능합니다.

2. 여러 개의 화면 공유:
웹 애플리케이션에서 사용자는 여러 화면을 동시에 공유할 수 있습니다.
이는 Next.js의 동적 라우팅과 상태 관리 기능을 활용하여 구현될 수 있습니다.

3. 카메라 공유:
사용자는 자신의 카메라를 통해 실시간으로 얼굴을 공유할 수 있으며,
이는 WebRTC와 같은 기술을 통해 구현됩니다.

4. 채널 별 실시간 채팅:
각 채널에 따른 실시간 채팅 기능이 제공되며, WebSocket 또는 다른 실시간 통신 프로토콜을 활용하여 구현됩니다. 채널은 특정 주제나 그룹에 맞게 분류됩니다.

5. 키보드 조작 가능한 아바타:
사용자는 키보드를 통해 자신의 아바타를 조작할 수 있으며, 이는 JavaScript 이벤트 리스너와 애니메이션 기능을 활용하여 구현됩니다.

6. 아바타 중심의 공간 이동:
사용자의 아바타는 가상 공간에서 중심적인 역할을 하며, 이동 시 항상 화면의 중앙에 위치합니다. 이는 CSS와 JavaScript를 이용한 동적 위치 조정으로 구현됩니다.

7. 청취자 맞춤형 화면 선택 및 조절:
청취자는 원하는 화면을 선택하고 크기를 조절할 수 있으며, 이는 사용자 인터페이스의 동적 조정 기능을 통해 구현됩니다.

8. 양방향 발표자료 공유:
발표자와 청취자 모두가 자료를 공유하고 상호작용할 수 있으며, 이는 Next.js의 서버사이드 렌더링과 클라이언트사이드 처리를 통합하여 구현됩니다.

9. 사용자 환경 맞춤 설정:
사용자의 기기 및 환경에 따라 최적화된 경험을 제공하며, 이는 반응형 웹 디자인과 사용자 설정 기능을 통해 구현됩니다.