{"id":20321280,"url":"https://github.com/boostcampwm-2024/web20-camon","last_synced_at":"2025-03-17T16:13:17.592Z","repository":{"id":261393184,"uuid":"879638962","full_name":"boostcampwm-2024/web20-camon","owner":"boostcampwm-2024","description":"출석부 관리부터, 소통까지! 부담없이 함께하는 네부캠 전용 실시간 스트리밍 서비스","archived":false,"fork":false,"pushed_at":"2025-03-02T04:49:10.000Z","size":4589,"stargazers_count":62,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-03-02T05:26:01.686Z","etag":null,"topics":["docker","express","ffmpeg","mediasoup","mysql","nest","react","webrtc"],"latest_commit_sha":null,"homepage":"http://cam-on.site","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boostcampwm-2024.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-28T09:33:38.000Z","updated_at":"2025-02-10T05:16:53.000Z","dependencies_parsed_at":"2025-02-14T15:46:12.526Z","dependency_job_id":null,"html_url":"https://github.com/boostcampwm-2024/web20-camon","commit_stats":null,"previous_names":["boostcampwm-2024/web20-camon"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm-2024%2Fweb20-camon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm-2024%2Fweb20-camon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm-2024%2Fweb20-camon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm-2024%2Fweb20-camon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boostcampwm-2024","download_url":"https://codeload.github.com/boostcampwm-2024/web20-camon/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244066189,"owners_count":20392406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","express","ffmpeg","mediasoup","mysql","nest","react","webrtc"],"created_at":"2024-11-14T19:12:22.751Z","updated_at":"2025-03-17T16:13:17.564Z","avatar_url":"https://github.com/boostcampwm-2024.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/b3d9e371-82a9-4423-9104-0ffcf322ae3a\"\u003e\n    \u003ch2\u003e\u003c/h2\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/5dbc8d2a-8819-43bf-9d5e-9fd9237c971d\"\u003e\n    \u003cbr /\u003e\n    \u003ch4\u003e\n      \u003ca href='https://intelligent-broker-ff0.notion.site/Cam-on-1290201238ac808ebb56d75e07685ae4'\u003e📒 팀 노션\u003c/a\u003e | \n      \u003ca href='https://github.com/boostcampwm-2024/web20-camon/wiki'\u003e🔎 위키\u003c/a\u003e | \n      \u003ca href='https://www.figma.com/design/ckY510YXPKJJUoURVxlmYz/Cam'on?node-id=0-1\u0026node-type=canvas\u0026t=BIq7ck3oUBLHea8J-0'\u003e🎨 피그마\u003c/a\u003e | \n      \u003ca href='https://github.com/orgs/boostcampwm-2024/projects/85'on?node-id=0-1\u0026node-type=canvas\u0026t=BIq7ck3oUBLHea8J-0'\u003e🗓️ 백로그\u003c/a\u003e\n    \u003c/h4\u003e\n    \u003ch3\u003e\n      \u003ca href='https://cam-on.site'\u003e👉 Cam'On 서비스 바로가기 👈\u003c/a\u003e \n    \u003c/h3\u003e\n    \u003cbr\u003e\n    \u003ch2\u003e🌟 핵심 가치 🌟\u003c/h2\u003e\n    \u003cp\u003e\n        💻 \u003cb\u003e부스트 캠프 출석 관리\u003c/b\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n        🤝 \u003cb\u003e실시간 네트워킹\u003c/b\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n        👥 \u003cb\u003e네부캠 All-in-One\u003c/b\u003e\n    \u003c/p\u003e\n\u003c!--     \u003ch3\u003e👩‍💻 누가 사용하면 좋을까요?\u003c/h3\u003e\n    \u003cdiv\u003e출석을 체계적으로 관리하고 싶은 캠퍼 🙋‍♂️\u003c/div\u003e\n    \u003cdiv\u003e학습 경험을 공유하고 싶은 캠퍼 🙋‍♀️\u003c/div\u003e\n    \u003cdiv\u003e온라인에서 동료와 소통하고 싶은 캠퍼 🌐\u003c/div\u003e --\u003e\n\u003cbr\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n# 🗒️ 목차\n[🖼️ 프로젝트 기획 배경](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B8%B0%ED%9A%8D-%EB%B0%B0%EA%B2%BD)\n\n[🎯 핵심 기능](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%95%B5%EC%8B%AC-%EA%B8%B0%EB%8A%A5)\n- [실시간 방송](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EB%B0%A9%EC%86%A1)\n- [채팅](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%B1%84%ED%8C%85)\n- [녹화](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EB%85%B9%ED%99%94)\n- [출석](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%B6%9C%EC%84%9D) \n- [아카이브](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%95%84%EC%B9%B4%EC%9D%B4%EB%B8%8C)\n  \n[💻 핵심 개발 일지](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%95%B5%EC%8B%AC-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80)\n- [방송 송출 및 시청 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%EB%B0%8F-%EC%8B%9C%EC%B2%AD-%EA%B5%AC%ED%98%84)\n- [Canvas Api를 사용한 방송 송출 화면 구성](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-canvas-api%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%84%B1)\n- [화질 조정 기능 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%99%94%EC%A7%88-%EC%A1%B0%EC%A0%95-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)\n- [실시간 썸네일과 녹화 기능 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%8D%B8%EB%84%A4%EC%9D%BC%EA%B3%BC-%EB%85%B9%ED%99%94-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)\n  \n[🚨 트러블 슈팅](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85)\n- [FFmpeg를 이용한 실시간 HLS 변환에서 CPU 과부하 발생](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-FFmpeg%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-HLS-%EB%B3%80%ED%99%98%EC%97%90%EC%84%9C-CPU-%EA%B3%BC%EB%B6%80%ED%95%98-%EB%B0%9C%EC%83%9D)\n- [Chrome 자동 재생 문제](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-chrome-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D-%EB%AC%B8%EC%A0%9C)\n- [Git Action에서 도커 이미지 빌드 시간 단축](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-git-action%EC%97%90%EC%84%9C-%EB%8F%84%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%8C%EB%93%9C-%EC%8B%9C%EA%B0%84-%EB%8B%A8%EC%B6%95)\n  \n[🧐 고민](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EA%B3%A0%EB%AF%BC)\n- [Release 브랜치? 너 필요해?](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-release-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%84%88-%ED%95%84%EC%9A%94%ED%95%B4)\n- [실시간 채팅 구현: 인메모리 방식을 선택한 이유](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84-%EC%9D%B8%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0)\n  \n[⚙️ 전체 서비스 아키텍쳐](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%A0%84%EC%B2%B4-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90)\n\n[🏗️ 시스템 아키텍처](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98)\n\n[🛠️ 기술 스택](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)\n\n[👨‍👩‍👧‍👦 팀원 소개](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%8C%80%EC%9B%90-%EC%86%8C%EA%B0%9C)\n\n# 🖼️ 프로젝트 기획 배경\n\n\u003e 1️⃣ 부스트캠프의 베이스캠프가 슬랙, 부스트코스, zoom 등 여러 개로 나누어져 있어서 다양한 링크와 출석 관리에 불편함을 느꼈습니다.\u003cbr\u003e\n\u003e 2️⃣ 소통을 위해 zoom에 \"라운지\"라는 공간이 존재하지만 많은 캠퍼들이 잘 사용하지 않아서 캠퍼들 간의 실시간 소통이 어려웠습니다.\u003cbr\u003e\n\n이런 불편함을 해소하기 위해 하나의 플랫폼에서 출석 관리부터 소통, 그리고 링크 및 자료 아카이브까지 한 번에 관리할 수 있는 서비스를 기획하게 되었습니다.\n\n# 🎯 핵심 기능\n### 🎥 실시간 방송\n\u003e 1️⃣ 캠퍼들은 코어타임 시간에 실시간 방송을 키면서 부스트 캠프 활동에 참여할 수 있습니다.\u003cbr\u003e\n\u003e 2️⃣ 화면공유 on/off, 캠 on/off, 마이크 on/off 기능으로  캠퍼들이 보다 자유로운 방송을 할 수 있도록 돕습니다.\u003cbr\u003e\n\u003e 3️⃣ 별도의 송출 소프트웨어 없이 서비스 내에서 방송 송출과 화면 배치 과정이 자동으로 이루어져 캠퍼들이 부담없이 방송할 수 있는 환경을 제공합니다.\u003cbr\u003e\n\u003e 4️⃣ 캠퍼들은 서로의 방송을 시청하면서 실시간으로 서로의 학습 경험을 공유할 수 있습니다.\n\n![송출및시청](https://github.com/user-attachments/assets/50e8e9da-7b5d-455b-b53d-8a9489288466)\n\n\n### 💬 채팅\n\u003e 1️⃣ 캠퍼들은 채팅을 통해 실시간으로 소통할 수 있습니다.\u003cbr\u003e\n\u003e 2️⃣ 방송 송출창과 시청창 모두 채팅 기능을 제공하여 방송중인 캠퍼와 시청하는 캠퍼 모두 자유롭게 지식을 공유하고 유대감을 쌓을 수 있습니다.\u003cbr\u003e\n\n![채팅최종](https://github.com/user-attachments/assets/8974ad8e-f70d-4bc1-a794-502e22ffea35)\n\n\n### 🔴 녹화\n\u003e 1️⃣ 실시간 녹화 기능을 제공하여 코어타임 학습 중 기억하고 싶은 순간을 기록할 수 있습니다.\u003cbr\u003e\n\u003e 2️⃣ 방송 중 기록한 녹화본들은 출석 내역에서 확인하며 스스로의 학습 경험을 돌아볼 수 있습니다.\u003cbr\u003e\n\n![녹화 최종](https://github.com/user-attachments/assets/8610fcd9-effd-4fb6-bdeb-057ba8c19d20)\n\n\n### ✏️ 출석\n\u003e 1️⃣ 캠퍼는 마이페이지에서 본인의 출석 내역을 한 눈에 확인할 수 있습니다.\u003cbr\u003e\n\u003e 2️⃣ 코어타임 시간 내에 송출되는 방송 시간을 기반으로 자동으로 캠퍼들의 출석이 관리됩니다.\u003cbr\u003e\n\n![출석데모최종](https://github.com/user-attachments/assets/32e104b3-daec-4d47-9db6-1898aa48d005)\n\n\n### 📚 아카이브\n\u003e 1️⃣ 캠퍼들은 메인페이지에서 여러개로 나누어진 베이스캠프를 한 번에 모아서 관리할 수 있습니다.\u003cbr\u003e\n\u003e 2️⃣ 자유롭게 하이퍼링크를 등록하여 맞춤형 온라인 베이스 캠프를 구성할 수 있습니다.\u003cbr\u003e\n\n![아카이브데모최종](https://github.com/user-attachments/assets/d5c4818c-be47-4851-91c1-4d6128a04aad)\n\n\n# 💻 핵심 개발 일지\n### 💡 [방송 송출 및 시청 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%EB%B0%8F-%EC%8B%9C%EC%B2%AD-%EA%B5%AC%ED%98%84)\n- WebRTC와 Mediasoup을 활용해 실시간 송출 및 시청 환경을 구축  \n- 브라우저에서 간편하게 방송을 시작하고 종료할 수 있도록 UI/UX 개선  \n\n### 💡 [Canvas Api를 사용한 방송 송출 화면 구성](https://github.com/boostcampwm-2024/web20-camon/wiki/Canvas-Api%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%84%B1)\n- Canvas API를 활용해 방송 화면을 실시간으로 커스터마이징\n- 두 개의 스트림을 합친 Canvas를 캡처한 스트림을 송출하는 방식\u003cbr\u003e\n\n### 💡 [화질 조정 기능 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%ED%99%94%EC%A7%88-%EC%A1%B0%EC%A0%95-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)\n- WebRTC 스트림의 화질을 상황에 따라 조정하여 최적의 사용자 경험을 제공  \n- 해상도, 비트레이트, 프레임레이트를 유동적으로 설정해 화질 변경   \n\n### 💡 [실시간 썸네일과 녹화 기능 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%8D%B8%EB%84%A4%EC%9D%BC%EA%B3%BC-%EB%85%B9%ED%99%94-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)\n- Mediasoup과 FFmpeg을 활용하여 실시간 스트리밍 중 썸네일을 생성하고, 녹화본을 저장  \n- 녹화된 자료는 Object Storage에 저장하고, 스트리밍 종료 후에도 확인 가능\n \n\u003e 🙇‍♀️ 프로젝트의 **개발 일지**에 대한 더 자세한 사항은 [개발 일지 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!\n\n\u003cbr\u003e\n\n# 🚨 트러블 슈팅\n### ❓ [FFmpeg를 이용한 실시간 HLS 변환에서 CPU 과부하 발생](https://github.com/boostcampwm-2024/web20-camon/wiki/%EB%B0%A9%EC%86%A1-%EB%85%B9%ED%99%94-%EC%8B%9C-CPU-%EA%B3%BC%EB%B6%80%ED%95%98-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%95%B4%EA%B2%B0%ED%95%B4%EB%B3%B4%EC%9E%90)\n- **문제**: WebM 영상을 HLS로 실시간 변환하면서 CPU 사용량이 급격히 증가해 스트리밍 품질 및 녹화 영상에 문제가 발생.  \n- **해결**: 실시간 변환 대신 WebM 원본 저장 후, CPU 부하가 낮을 때 큐를 통해 순차적으로 HLS 변환을 수행.   \n\n### ❓ [Chrome 자동 재생 문제](https://github.com/boostcampwm-2024/web20-camon/wiki/Chrome-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D%EC%9D%B4-%EC%95%88%EB%90%98%EB%8A%94-%EB%AC%B8%EC%A0%9C)\n- **문제**: Chrome의 정책상 음소거되지 않은 영상은 사용자 상호작용(클릭, 탭 등)이 없으면 자동으로 재생되지 않음\n- **해결**: muted 속성을 사용해 초기에 음소거 상태로 비디오를 자동 재생하고, 사용자에게 음소거 해제 버튼을 제공하여 수동으로 소리를 켤 수 있도록 구현.   \n\n### ❓ [Git Action에서 도커 이미지 빌드 시간 단축](https://github.com/boostcampwm-2024/web20-camon/wiki/Git-action%EC%97%90%EC%84%9C-%EB%8F%84%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%8C%EB%93%9C-%EC%8B%9C%EA%B0%84%EC%9D%84-%EB%8B%A8%EC%B6%95%EC%8B%9C%EC%BC%9C%EB%B3%B4%EC%9E%90)\n- **문제**: GitHub Actions에서 Docker 이미지를 빌드하는 데 시간이 과도하게 소요됨\n- **해결**: BuildKit을 활성화하고 type=gha로 Docker 레이어 캐시를 저장 및 재사용하여 빌드 시간 단축  \n\n\u003e 🙇‍♀️ 프로젝트의 **트러블 슈팅**에 대한 더 자세한 사항은 [트러블 슈팅 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!\n\n\u003cbr\u003e\n\n# 🧐 고민\n### 🔍 [Release 브랜치? 너 필요해?](https://github.com/boostcampwm-2024/web20-camon/wiki/Release-%EB%B8%8C%EB%9E%9C%EC%B9%98%3F-%EB%84%88-%ED%95%84%EC%9A%94%ED%95%B4%3F)\n- **고민 이유**: 기존 Git Flow 전략에서 Release 브랜치를 사용하는 것이 효율적인지 의문. CI/CD 자동화 과정에서 불필요한 브랜치 관리로 복잡성이 증가할 우려.  \n- **결론**: Release 브랜치를 생략하고 `develop` 브랜치에서 주요 검증 후 `main`에 직접 배포하도록 결정.\n \n### 🔍 [실시간 채팅 구현: 인메모리 방식을 선택한 이유](https://github.com/boostcampwm-2024/web20-camon/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84%3A-%EC%9D%B8%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0)\n- **고민 이유**: Redis와 같은 영구 저장소 대신 인메모리를 사용하는 것이 적절한지 논의.  \n- **결론**: 성능 최적화와 낮은 지연 시간을 위해 인메모리 방식을 채택.\n\u003cbr\u003e\n\n\u003e 🙇‍♀️ 프로젝트의 **고민**에 대한 더 자세한 사항은 [고민 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%EA%B3%A0%EB%AF%BC-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!\n\n\u003cbr\u003e\n\n# ⚙️ 전체 서비스 아키텍쳐\n\u003e 저희 서비스의 전반적인 흐름도를 확인 할 수 있습니다.\n\n![image](https://github.com/user-attachments/assets/f35da73a-0cc6-4aa1-b0aa-36094ffeb87e)\n\n# 🏗️ 시스템 아키텍처\n\u003e 저희 서비스의 인프라 구축 환경을 한 눈에 보실 수 있습니다.\n\n\u003cimg width=\"1352\" alt=\"image\" src=\"https://github.com/user-attachments/assets/e8e1eef7-4c3e-46e6-bdae-91934bcc4237\"\u003e\n\n# 🛠️ 기술 스택\n\n| 분야 | 기술 스택 |\n|:---|:---|\n| 공통       | ![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge\u0026logo=pnpm\u0026logoColor=f69220) ![TypeScript](https://img.shields.io/badge/typescript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white) ![TypeScript](https://img.shields.io/badge/mediasoup-895fde?style=for-the-badge\u0026logoColor=white)                                                                                                                                          |\n| FE | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white) |\n| BE     | ![NestJS](https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge\u0026logo=nestjs\u0026logoColor=white) ![Express](https://img.shields.io/badge/express-000000?style=for-the-badge\u0026logo=FFmpeg\u0026logoColor=white) ![MySQL](https://img.shields.io/badge/mysql-4479A1?style=for-the-badge\u0026logo=mysql\u0026logoColor=white) ![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=for-the-badge\u0026logo=FFmpeg\u0026logoColor=white)                                      |\n| 인프라   |  ![GitHub Actions](https://img.shields.io/badge/Ncloud-03C75A?style=for-the-badge\u0026logo=naver\u0026logoColor=white) ![Docker](https://img.shields.io/badge/docker-2496ED?style=for-the-badge\u0026logo=docker\u0026logoColor=white) ![NginX](https://img.shields.io/badge/nginx-009639?style=for-the-badge\u0026logo=nginx\u0026logoColor=white) ![GitHub Actions](https://img.shields.io/badge/githubactions-FF4438?style=for-the-badge\u0026logo=githubactions\u0026logoColor=white)                 |\n\n# 👨‍👩‍👧‍👦 팀원 소개\n| 김광현| 백지연 | 전희선 | 한승헌 |\n|:---:|:---:|:---:|:---:|\n| \u003cimg src=\"https://github.com/g00hyun.png\" width=\"150\" height=\"150\"\u003e | \u003cimg src=\"https://github.com/zero0205.png\" width=\"150\" height=\"150\"\u003e | \u003cimg src=\"https://github.com/huiseon37.png\" width=\"150\" height=\"150\"\u003e | \u003cimg src=\"https://github.com/seungheon123.png\" width=\"150\" height=\"150\"\u003e |\n| [@g00hyun](https://github.com/g00hyun) | [@zero0205](https://github.com/zero0205) | [@huiseon37](https://github.com/huiseon37) | [@seungheon123](https://github.com/seungheon123) |\n| BE | FE | BE | BE |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboostcampwm-2024%2Fweb20-camon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboostcampwm-2024%2Fweb20-camon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboostcampwm-2024%2Fweb20-camon/lists"}