프로젝트 명 [ 타요 ]
비대면 화상 회의 및 화면 공유, 캐릭터를 통한 의사소통이 가능한 가상의 작업 공간입니다.
2021년 10월 25일 ~ 2021년 12월 05일
사이트 데모
타요 - 메타버스 코딩공간
같은 공간에 있는 팀원들과 편하게 대화해요! 같은 가상공간에서 상대의 모습을 보고 쉽고 빠르게 대화할 수 있습니다. 비대면 회의, 프로젝트에서의 커뮤니케이션 어려움을 해소합니다.
tayo.fun
테스트 계정
test1@test.com
test2@test.com...
test5@test.com
패스워드 test1234
test1 ~ test2는 최고관리자 계정이며 test3~5는 일반계정입니다.
여러사람이 테스트용 계정을 사용합니다.
패스워드 변경시에는 다시 원래 패스워드로 바꿔주시기 바랍니다.
본 사이트는 포트폴리오용 사이트 이며 패스워드가 db에 평문으로 저장됩니다.
절대 자주쓰는 비밀번호를 사용하지 마세요
| 개발도구 | IntelliJ, eclipse |
| DBMS | Oracle DB |
| 개발환경 | Spring framework 5.3.12 JDK1.8 Tomcat 9.0 |
| 버전관리 | Git |
활용 해본 대표 기술 : SpringFramework / WebSocket / WebRTC / Mybatis
팀 전체 구현 기능
사용자 페이지
로그인, 카카오 로그인, 회원가입 비밀번호 찾기 기능
메일 발송 및 인증 기능
프로필 비밀번호 확인 및 정보 변경 기능, 프로필 사진 등록 및 수정
가상공간 등록, 수정, 삭제 기능
가상공간 초대 코드를 통한 구성원 초대, 추방 및 탈퇴 기능
가상공간 내에 캐릭터 이동, 채팅 기능
가상공간 내 일정 범위 내 인원에게 음성, 캠, 화면공유 기능
가상공간별 이슈, 일정, 질문 게시판 게시 글 작성, 수정, 삭제 기능
게시판 실시간 읽지 않은 글 표시 기능
공지사항 무한스크롤 페이징 기능
자주 묻는 질문, 응답
1대1 문의 (채팅) 기능
관리자 페이지
회원 관리 회원 이름 검색, 제재, 관리자 권한 수정 기능
1대1 문의 채팅 최근 채팅 기록 및 읽지 않은 문의 표시 기능, 각 사용자별 1대1 연결 채팅 기능
공지사항 작성, 수정, 삭제 기능
자주 묻는 질문 등록, 수정, 삭제 기능
나의 구현 기능
해당 프로젝트에서 조장으로 참여했습니다.
[담당 역할]
가상공간 및 가상공간별 게시판 구현
- 가상공간 목록 표시 및 생성, 수정, 삭제 기능
- 가상공간 멤버추방 및 초대, 탈퇴 기능
- 웹 소켓 활용 가상공간 입, 퇴장 및 채팅, 캐릭터 이동 기능
- 실시간 접속구성원 표시, 읽지 않은 게시 글 실시간 표시 기능
- 웹RTC 활용 P2P 음성, 영상 데이터 공유 기능
- turn 서버 구축 및 aws 배포
- 전체적인 사이트 템플릿 구축, 모든 곳에 활용할 수 있는 모달창 제작
- 가상공간 내 게시판 모달형태 표시, 수정, 삭제 뒤로가기 및 종료 기능
- 스프링 인터셉터를 활용한 로그인, 관리자 체크 및 오류 페이지 커스터마이징
[기여도] 50% (팀 구성원 5명)
소감
새로운 기술을 공부하고 활용해본 재미있는 프로젝트였습니다. 주어진 작업에 관한 기술을 공부하고 바로바로 적용했기에 역시 설계단계에서 완벽한 설계가 불가능했습니다. 그로 인해 WebRTC 정보를 릴레이 해주는 웹 소켓 핸들러 클래스가 깔끔한 구조로 만들어지지 못한 것 같아서 상당히 아쉽습니다.
또한 영상처럼 무거운 데이터를 실시간 P2P로 스트리밍하다 보니 사용자가 많아지면 클라이언트에 상당한 부하가 생겼습니다.
영상 및 음성 데이터를 서버를 거쳐서 전달하고 이동 및 채팅을 WebRTC를 활용하여 P2P로 전달하는 것이 옳은 디자인이 아니었는가 생각해 보게 되었습니다.
가상공간에서 캐릭터 이동을 우클릭으로 구현하고 모바일기기를 배제하고 구현하였는데 이동 방법을 바꾸고 게시판 디자인을 반응형으로 제작하여 모바일 환경에서도 이용할 수 있게 구현하였으면 좋았을 것 같습니다.
내가 구현한 내용 설명
가상공간 목록 화면
코드 보기 - 컨트롤러 / 서비스 / MybatisMapper(DAO)
- 가입된 가상공간 목록 표시 및 가상공간 생성, 본인이 만든 가상공간 수정, 삭제 기능을 구현하였습니다.
- 가상공간이 많아져서 최대 높이를 넘어간다면 스크롤바가 생성됩니다.
- 본인이 생성한 가상공간에는 이름 옆에 L 아이콘이 표시됩니다.
- 본인이 생성한 가상공간 우측에는 톱니 모양의 설정 버튼이 표시됩니다.
- 가입한 가상공간의 우측에는 탈퇴 버튼이 표시됩니다.
- 오른쪽 위에 초대 코드를 기재하여 가상공간에 가입할 수 있습니다.
가상공간 수정 화면
- 가상공간 수정 화면은 모달 형식으로 표시됩니다.
- 가상공간 수정화면에서 가상공간 삭제 및 이름, 인원수 수정 혹은 초대 코드 재생성, 복사 가 가능합니다.
가상공간
코드 보기 - 웹소켓핸들러
- 화면 좌측에는 게시판 및 온라인 구성원을 볼 수 있는 내비게이션 버튼이 존재합니다.
- 가상공간의 캐릭터를 우클릭으로 이동시킬 수 있으며 엔터키로 채팅을 시작, 전송할 수 있습니다.
- 채팅창 우측에 화살표 버튼을 통해 채팅 기록을 열거나 닫을 수 있습니다.
- 채팅창 우측에 캠, 화면공유, 음성공유 버튼을 통해 캠 화면 및 데스크톱 화면, 음성을 공유할 수 있습니다.
- 공유범위 내에 캐릭터의 구분 선이 파란색으로 변하며 본인의 캐릭터를 클릭하여 공유범위를 확인할 수 있습니다.
- 마이크가 공유 중이라면 캐릭터 하단에 음 소거 아이콘이 사라지며 화면을 공유 중이라면 라이브 아이콘이 표시됩니다.
- 라이브 중인 캐릭터를 클릭 시 캐릭터 상단에 작은 화면으로 송출 중인 화면이 표시됩니다.
- 공유 중인 영상 오른쪽 위에 확대 버튼을 통해 전 화면으로 영상을 볼 수 있습니다.
가상공간 게시판
코드 보기 - 컨트롤러 / 서비스 / MybatisMapper(DAO)
- 가상공간별 이슈, 일정, 질문 게시판이 존재합니다.
- 내비게이션 바와 목록에 읽지 않은 게시글이 존재하면 n 아이콘이 표시되며 가장 상단에 정렬됩니다.
- 새로운 게시글 작성 시 각 멤버에게 읽지 않은 게시글이 있음을 실시간으로 표시합니다.
- 게시글 작성, 수정, 삭제가 가능하며 댓글 작성 및 삭제를 할 수 있습니다.
- 모든 화면은 모달형태로 제작되었으며 뒤로가기 버튼과 종료 버튼을 구현하였습니다.
- 글 수정 시에 첨부 사진을 삭제하거나 수정할 수 있습니다.
- 네이버 스마트에디터를 활용하여 게시글 작성 및 수정을 구현하였습니다.
