본문 바로가기
프로그래밍/Portfolio Log

[메타프루츠] WebRTC 기반 포트폴리오

by YuminK 2023. 10. 17.

[작품 이름]
메타프루츠(Metafruits)

[작품 바로가기]
웹 사이트: https://metafruits.kro.kr

[작품 소개]
메타프루츠는 '메타'와 '프루츠'의 합성어로,

메타버스 환경에서 과일이 되어 채팅이나 다자간 화상회의를 진행할 수 있습니다.

 

[개발 기간]
23.09.27~23.10.17

[주요 기능]
1. 다자간 화상회의


2. 채팅
 - 전체 채팅
 - 회의방 채팅



3. 캐릭터, 닉네임 변경


 
4. 장치설정
 - 카메라, 마이크 제어
 - 장치 선택
 - 마이크 테스트 



5. 모바일웹(사파리 브라우저)


[사용 기술]
언어: javascript, HTML, CSS
서버: node.js(express)
라이브러리: Mediasoup, Phaser, Socket.io, Webpack 

프로토콜: HTTPS/HTTP, WebRTC, WebSocket
배포: AWS EC2
OS: Ubuntu

 

Tool: Visual Studio Code, Tiled, Putty


[후기]
처음에 '게더타운' 같은 작품을 만들겠다고 다짐했을 때, '내가 정말 이걸 만들 수 있을까?'라는 의심이 많이 들었습니다. 그러나 결국 하나씩 배우면서 공부하다보니 끝까지 만들 수 있었습니다. 스스로 세워뒀던 벽을 하나 부셔버린 느낌이 듭니다. 

 

원래 웹으로는 따로 개발을 해보지 않아, Javascript 기반으로 코드를 작성하는 것이 쉽지는 않았습니다. 하지만 결국 쓰다보니 익숙해져서 크게 어렵지 않았네요. Phaser나 Mediasoup 같은 처음 써보는 라이브러리를 이해하고 활용하는 것도 굉장히 즐거웠습니다. 

 

이전에 해보지 않았던 분야를 접하면서 '내가 이런 것도 할 수 있구나'라는 생각이 많이 들었습니다. 앞으로도 다양한 기술을 활용하여 무언가를 만들어낼 수 있는 능력을 꾸준히 키우고 싶습니다. 

 

제가 만든 작품은 '팀노바' 수강생들의 작품(버스콘, 뉴오피스)을 많이 참고했습니다. 팀노바 유튜브나 카페에서 너무 수준 높은 자료들을 접하고 있네요. 감사합니다. 

 

제가 끝까지 작품을 만들 수 있었던 것은 모두 '노프 팀장님의 유튜브' 덕분입니다. 좋은 마인드로 꾸준히 공부할 수 있도록 도와주셔서 감사합니다. 앞으로도 더욱 공부하겠습니다. 

댓글