🖥️ dev:meet - 코드와 설계, 대화의 맥락이 하나로 이어지는 공간

🛎️ 서비스 소개

서비스 URL: https://www.devmeet.p-e.kr/

"화상 회의 따로, 설계 따로, 코드 공유 따로... 번거로운 협업은 이제 그만!"

• dev:meet는 화상 회의, 실시간 코드 편집, 화이트보드를 하나의 브라우저 탭에서 통합 제공하는 개발자 전용 실시간 협업 플랫폼입니다.

• 대상 사용자: 개발자 / 페어 프로그래밍 / 기술 회의

❓ 문제 정의

기존 협업 환경의 한계

프로젝트 회의나 페어 프로그래밍 시, 우리는 여러 도구를 병행 사용합니다.

사용 목적	도구
화상 회의	Zoom, Google Meet
코드 공유	VS Code Live Share
설계 / 다이어그램	excalidraw, Miro

이러한 도구 파편화는 다음과 같은 문제를 발생시킵니다.

• 문제점
  • 컨텍스트 스위칭 비용: 툴 전환이 잦아질수록 집중력 저하 및 논의 흐름 단절
  • 협업 환경 설정 비용: 페어 프로그래밍을 위한 세션 생성, 권한 설정의 번거로움
  • 표현력의 한계: 코드 블럭만으로는 아키텍처, 로직 흐름 설명에 제약

🎯 해결 목표

dev:meet는 분리된 협업 도구로 인한 비효율을 하나의 흐름으로 통합하고자 합니다.

“개발자가 협업을 위해 여러 도구를 오가는 비효율을 줄이고,
하나의 공간에서 실시간 소통과 구현이 자연스럽게 이루어지도록 한다.”

• 협업 흐름을 단일 컨텍스트로 통합
• 실시간 미디어 환경에서도 안정적인 성능 유지
• 개발 회의에 최적화된 UX 제공

➡️ dev:meet는 이 모든 과정을 하나로 합쳐, 오직 '개발'과 '소통'에만 집중할 수 있는 환경을 제공합니다.

⭐ 서비스 주요 기능

1️⃣ 그룹 화상 회의 & 화면 공유

• WebRTC (SFU) 기반 실시간 화상/음성 통화
• 화면 공유 및 발표자 전환 지원
• 참여자 수 증가 시에도 안정적인 미디어 처리

2️⃣ 실시간 동기화 코드 에디터

• 기능

  • Monaco Editor 기반 코드 편집 환경
  • 자동 완성, 문법 하이라이팅, 에러 감지 지원
  • 다중 사용자 실시간 편집 동기화

• 활용 시나리오

  • 페어 프로그래밍
  • 라이브 코딩 리뷰
  • 알고리즘 풀이 스터디

3️⃣ 공유 화이트보드

• 기능

  • Canvas API 기반 자유 드로잉
  • 아키텍처 다이어그램 및 흐름도 시각화
  • 회의 중 즉각적인 아이디어 공유

• 활용 시나리오

  • 시스템 설계 설명
  • 로직 흐름 정리
  • 브레인스토밍

4️⃣ 실시간 채팅

• 회의 중 메시지 송수신
• 링크 및 파일(사진, 동영상, 문서 등) 공유
• 미디어 통화와 분리된 보조 커뮤니케이션 채널

5️⃣ 추후 확장 방향

• 화면 스플릿 기능을 통한 화이트보드, 코드 에디터 동시 작업
• 화이트보드, 코드 에디터 결과물 저장 및 파일로 내보내기
• Mermaid 코드 → 다이어그램 변환
• 가상 배경 추가

🔧 기술 스택

• Collaboration & Tools

  

• Frontend

  

• Backend

  

• Infra

  

🏗️ 시스템 아키텍처

⛏️ 문제 해결 과정 및 기술 경험

[FE] 통화 음질 개선

• 작성자: Tony (윤장호)
• 🔗 링크

[FE] React-Konva 라이브러리 환경에서의 SVG 렌더링 이슈 및 해결 방안

• 작성자: Kuma (차지태)
• 🔗 링크

[n8n] 코드 리뷰 자동화

• 작성자: Kuma (차지태)
• 🔗 링크

[FE] canvas 재렌더링 문제 및 개선

• 작성자: Andrew (이선우)
• 🔗 링크

[FE] Redo Undo 시 아이템 중복 생성 문제 및 개선

• 작성자: Andrew (이선우)
• 🔗 링크

[FE] React Profiler React Compiler로 렌더링 분석 및 최적화

• 작성자: Tony (윤장호)
• 🔗 링크

[FE] next image의 비동기 로딩에 따른 Layout Shift와 채팅 스크롤 동기화 개선

• 작성자: Lisey (이채민)
• 🔗 링크

[BE] 회의 단위 협업 툴 상태 공유 문제 해결 과정

• 작성자: Logan (김동완)
• 🔗 링크

[BE] Yjs 기반 문서 동기화 문제 해결 과정

• 작성자: Logan (김동완)
• 🔗 링크

🚀 빌드 & 실행 (One-shot)

1. 저장소 clone

git clone https://github.com/boostcampwm2025/web03-devmeet.git
cd devmeet

2. 환경변수 설정

각 서비스별로 .env.example 파일을 기반으로 .env 파일을 생성합니다.

[frontend/.env.example]

# 소켓 통신 및 공통 서버 기본 주소
NEXT_PUBLIC_SERVER_URL="http://localhost:8080"

# REST API 호출에 사용되는 API 서버 주소
NEXT_PUBLIC_API_SERVER_URL="http://localhost:8080/api"

# 실시간 협업 툴(코드 에디터, 화이트보드) 백엔드 기본 주소
NEXT_PUBLIC_TOOL_BACKEND_URL="http://localhost:8000"

# WebSocket 공통 prefix
NEXT_PUBLIC_TOOL_BACKEND_WEBSOCKET_PREFIX="/tool/ws"

# 실시간 코드 에디터 WebSocket 엔드포인트
NEXT_PUBLIC_TOOL_BACKEND_WEBSOCKET_CODEEDITOR="/codeeditor"

# 화이트보드 WebSocket 엔드포인트
NEXT_PUBLIC_TOOL_BACKEND_WEBSOCKET_WHITEBOARD="/whiteboard"

[rep/main_backend/.env.example]

NODE_PORT=8080
NODE_HOST="0.0.0.0"
NODE_ENV="deployment"

NODE_BACKEND_PREFIX="api"
NODE_BACKEND_WEBSOCKET_PREFIX="/api/ws"

NODE_BACKEND_SERVER="http://localhost:8080"
NODE_FRONTEND_SERVER="http://localhost:3000"

# CORS 설정
NODE_ALLOWED_ORIGIN="http://localhost:3000"
NODE_ALLOWED_METHODS="GET,POST,PUT,DELETE,PATCH"
NODE_ALLOWED_HEADERS="Content-Type, Accept, Authorization"
NODE_ALLOWED_CREDENTIALS="true"
NODE_ALLOWED_EXPOSE_HEADERS="x-access-token"

# Database 설정
NODE_APP_DATABASE_HOST="데이터베이스 host (예: 127.0.0.1)"
NODE_APP_DATABASE_PORT="데이터베이스 port (예: 3306)"
NODE_APP_DATABASE_NAME="데이터베이스 이름 (예: db)"
NODE_APP_DATABASE_USER="데이터베이스 사용자명"
NODE_APP_DATABASE_PASSWORD="데이터베이스 비밀번호"

# Redis 설정
NODE_APP_REDIS_URL="redis://localhost:6379"
NODE_APP_REDIS_PASSWORD="레디스 비밀번호"

# JWT 설정
NODE_APP_JWT_ACCESS_SECRET_KEY="access token secret"
NODE_APP_JWT_ACCESS_EXPIRED_TIME="5m"
NODE_APP_JWT_REFRESH_SECRET_KEY="refresh token secret"
NODE_APP_JWT_REFRESH_EXPIRED_TIME="7d"
NODE_APP_JWT_ISSUE_NAME="jwt issuer"
NODE_APP_JWT_AUDIENCE_NAME="jwt audience"
NODE_APP_JWT_ALGORITHM="HS256"

# Kakao OAuth 설정
NODE_APP_KAKAO_REST_API_KEY="카카오 REST API 키"
NODE_APP_KAKAO_CLIENT_SECRET="카카오 CLIENT SECRET"

# AWS S3 설정
NODE_APP_AWS_ACCESS_KEY="AWS access key"
NODE_APP_AWS_SECRET_KEY="AWS secret key"
NODE_APP_AWS_BUCKET_NAME="S3 bucket 이름"
NODE_APP_AWS_REGION_NAME="AWS region"
NODE_APP_AWS_PRESIGNED_URL_EXPIRES_SEC="presigned url 만료 시간(초)"

# Kafka 설정
NODE_APP_KAFKA_BROKERS="kafka broker 주소"
NODE_APP_KAFKA_CLIENT_ID="kafka client id"
NODE_APP_KAFKA_GROUP_ID="kafka group id"
NODE_APP_KAFKA_SASL_USERNAME="kafka username"
NODE_APP_KAFKA_SASL_PASSWORD="kafka password"
NODE_APP_KAFKA_SASL_MECHANISM="sasl mechanism"
NODE_APP_KAFKA_SSL="true/false"

# 화상회의(SFU) 설정
NODE_APP_SFU_PUBLIC_IP="SFU public IP"

# Tool Backend 협업 인증
NODE_APP_TICKET_PRIVATE_JWK="private jwk"
NODE_APP_TICKET_PUBLIC_JWK="public jwk"
NODE_APP_TICKET_ISS="main_backend"
NODE_APP_TICKET_AUD="tool_backend"

# Prometheus 설정
NODE_APP_PROMETHEUS_DEFAULT_PREFIX="main_backend_"
NODE_APP_PROMETHEUS_SERVICE_LABEL="main-backend"
NODE_APP_PROMETHEUS_SERVICE_ENV="local"

[rep/tool_backend/.env.example]

NODE_PORT=8000
NODE_HOST="0.0.0.0"
NODE_ENV="deployment"
NODE_BACKEND_PREFIX="tool"

# CORS 설정
NODE_ALLOWED_ORIGIN="http://localhost:3000"
NODE_ALLOWED_METHODS="GET,POST,PUT,DELETE,PATCH"
NODE_ALLOWED_HEADERS="Content-Type, Accept, Authorization"
NODE_ALLOWED_CREDENTIALS="true"

# Database 설정
NODE_APP_DATABASE_HOST="데이터베이스 host"
NODE_APP_DATABASE_PORT="3306"
NODE_APP_DATABASE_NAME="db"
NODE_APP_DATABASE_USER="user"
NODE_APP_DATABASE_PASSWORD="password"

# Redis 설정
NODE_APP_REDIS_URL="redis://localhost:6379"
NODE_APP_REDIS_PASSWORD="레디스 비밀번호"

# Kafka 설정
NODE_APP_KAFKA_BROKERS="kafka broker"
NODE_APP_KAFKA_CLIENT_ID="client id"
NODE_APP_KAFKA_GROUP_ID="group id"
NODE_APP_KAFKA_SASL_USERNAME="username"
NODE_APP_KAFKA_SASL_PASSWORD="password"
NODE_APP_KAFKA_SASL_MECHANISM="mechanism"
NODE_APP_KAFKA_SSL="true/false"

# WebSocket 설정
NODE_BACKEND_WEBSOCKET_PREFIX="/tool/ws"
NODE_BACKEND_WEBSOCKET_WHITEBOARD="/whiteboard"
NODE_BACKEND_WEBSOCKET_CODEEDITOR="/codeeditor"

# JWK 검증
NODE_APP_TICKET_PUBLIC_JWK="public jwk"
NODE_APP_TICKET_AUD="tool_backend"

# Prometheus 설정
NODE_APP_PROMETHEUS_DEFAULT_PREFIX="tool_backend_"
NODE_APP_PROMETHEUS_SERVICE_LABEL="tool-backend"
NODE_APP_PROMETHEUS_SERVICE_ENV="local"

frontend

cd frontend
cp .env.example .env.local

main_backend

cp rep/main_backend/.env.example .env.main.backend

tool_backend

cp rep/tool_backend/.env.example .env.tool.backend

⚠️ 실제 서버 주소, DB 정보, 인증 키 값은 .env 파일에 직접 입력해야 합니다.

3. 도커 실행

docker compose up -d

4. 개발 모드 실행 (선택)

Docker 없이 개별 서비스 단독 실행도 가능합니다.

Frontend

cd frontend
pnpm install
pnpm run dev

Backend

cd rep/main_backend
pnpm install
pnpm start:dev

cd rep/tool_backend
pnpm install
pnpm start:dev

5. 서비스 접속

브라우저에서 아래 주소로 접속하여 서비스를 이용할 수 있습니다.

👉 http://localhost:3000

🦉 Team OwlCloud 소개

Logan(로건)	Tony(토니)	Andrew(앤드류)	Lisey(리시)	Kuma(쿠마)
ISTP	INFP	ISTP	ISTJ	ESTJ
@KimDwDev	@seorang42	@tjsdn052	@chamny20	@ChaJiTae
준비됐엉️	마지막까지 즐겁게	일단 해보기	다 경험이고 추억이다	크아앙