Discord Overlay 만들기 여정

📅 2025년 4월 16일 — 실시간 채팅 오버레이를 만들기까지의 과정 기록

목표

• 디스코드 메시지를 받아서 방송 화면에 채팅 오버레이로 띄우는 윈도우 앱 만들기
• 투명한 UI, 항상 위에 있는 창, 자동 스크롤, 버튼으로 닫기
• Electron + Node.js + Discord.js + WebSocket 사용

---

기술 스택

• Electron (윈도우 앱)
• Node.js
• Discord.js (봇 처리)
• WebSocket (ws 라이브러리)
• dotenv (.env 파일로 민감 정보 관리)
• electron-builder (배포용 .exe 생성)

---

구성 파일

• main.js: Electron 앱 초기화, 봇 실행 포함
• bot.js: 디스코드 메시지를 받아 WebSocket으로 전송
• overlay.html: 채팅 UI 및 닫기 버튼
• overlay.js: WebSocket 수신 및 채팅 표시
• .env: 디스코드 봇 토큰 및 포트 설정
• package.json: 실행 스크립트 및 빌드 설정

---

문제 & 해결

❌ 봇 실행 오류: "Invalid token"

• .env 파일을 안 읽었거나, 위치가 잘못됐거나
• 해결: require('dotenv').config({ path: path.join(__dirname, '.env') }) 명시함

❌ 포트 충돌: "EADDRINUSE"

• Electron 앱을 두 번 실행했을 때 발생
• 해결: 포트 충돌 감지 후 에러 출력으로 넘어감

❌ .exe 실행 시 채팅이 안 나옴

• 원인: .env가 빌드 후 dist에 포함되지 않음
• 해결: extraFiles에 .env 포함

"build": {
  ...
  "extraFiles": [
    { "from": ".env", "to": ".env" }
  ]
}

---

자동 스크롤 처리

• #chat-container가 채워질 때 scrollTop = scrollHeight 처리
• 추가 메시지 표시 후 스크롤 자동 이동

scrollArea.scrollTop = scrollArea.scrollHeight;

---

상단바 고정

• #title-bar는 drag,
• #scroll-container는 no-drag 으로 분리하여 마우스 스크롤 허용

#scroll-container {
  -webkit-app-region: no-drag;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}

---

스타일 개선

• 채팅 텍스트에 그림자 추가로 배경과 대비 향상
• 스크롤바 반투명 처리로 방송에 자연스럽게 녹임

.chat-message {
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

---

배포 및 실행

npm run dist

• dist/Discord Overlay.exe 실행 시 봇 + 오버레이 모두 실행됨
• .env 포함 여부 꼭 확인!

---

마무리

디스코드 채팅 오버레이를 직접 만들어보면서

• Electron 앱 구조
• 디스코드 봇 동작 방식
• WebSocket 실시간 처리
• UI/UX 디테일 조정

을 전부 다뤄볼 수 있었음.
방송 툴을 직접 커스터마이징해보고 싶은 사람에게 정말 좋은 프로젝트였다!