🌱 함정씨앗: console.log가 Electron 프로젝트를 망치는 순간

프론트엔드 개발자라면 누구나 한 번쯤 console.log("확인")을 찍어본 경험이 있을 겁니다. 저도 그랬습니다.

디버깅의 든든한 친구, 언제 어디서나 호출하면 나타나는 log 친구.

하지만 Electron 프로젝트에선 이 친구가 성능 병목의 주범이 될 수도 있습니다.

💻 Electron 환경의 로그, 왜 특별한가요?

Electron은 두 개의 프로세스로 구성됩니다:

구성	설명
Renderer Process	React가 돌아가는 브라우저 환경 (Chromium 기반)
Main Process	Node.js 기반 백그라운드 (Electron 엔진)

✅ 문제는 여기서 시작됩니다

이 둘은 로그를 찍는 방식도, 로그가 시스템에 미치는 영향도 다릅니다.

• Renderer 로그 (console.log)
  • 브라우저 콘솔처럼 작동
  • 많이 찍히면 렌더링 지연, 메모리 누수 가능
  • 개발자 도구를 통해 사용자가 직접 볼 수 있음
  • 무한 루프나 interval 로그가 많을 경우 UI에 영향
• Main 로그 (console.log)
  • Node.js의 stdout으로 출력
  • 로그가 많아지면 디스크 IO 병목, 프로세스 지연, 리소스 누수 가능
  • 특히 보안 솔루션이나 데몬처럼 작동하는 앱일수록, 안정성이 중요

결국, 단순히 “로그 좀 많네” 수준이 아니라 시스템 성능 저하, 사용자 불편, 심지어 보안 이슈로도 이어질 수 있는 구조입니다.

---

🚨 실전에서 겪은 문제

제가 참여한 보안 솔루션 기반 Electron 프로젝트에서는 다음과 같은 로그들이 지속적으로 발생했습니다:

• Named Pipe 통신 로깅
• 시스템 정보 수집 로그
• JSON 저장/파싱 로깅
• 보안 상태 체크 및 사용자 행동 로그

초당 수십 개의 로그가 찍히다 보니:

• 렌더러 메모리가 지속적으로 증가하거나
• CPU 사용량이 6~8% 이상 고정되거나
• 통신이 비동기적으로 지연되거나
• 개발자 도구를 비활성화했음에도 내부 자원 누수 발생

이런 증상이 실제로 있었습니다.

---

😅 안일했던 생각: "어차피 배포용은 devtool 막았잖아?"

Electron에선 개발자 도구를 막을 수 있으니, log가 사용자에게 노출되지 않는다고 생각했습니다.

그래서 귀찮아서 수백 줄의 console.log를 안 지웠습니다. 😔

하지만…

console.log("✅ 요청 성공", response);
console.log("📍 현재 상태", status);
console.log("🚨 예외 발생", error)

이런 로그가 계속 쌓이면, 렌더링 지연, 메모리 누수, 디스크 I/O 부하로 이어지는 걸 실제로 경험했습니다.

---

🦸 구원자 등장 — vite-plugin-remove-console

수동으로 일일이 삭제하는 건 너무 비효율적이었고, 구글링 도중 발견한 라이브러리가 바로 이 구원자입니다.

📦 설치 및 설정

npm i vite-plugin-remove-console -D

// vite.config.ts
import removeConsole from 'vite-plugin-remove-console';

export default defineConfig({
  plugins: [
    react(),
    removeConsole({
      include: ['**/*.ts', '**/*.tsx'],
    }),
  ],
});

✅ 효과

• console.log, console.debug, console.info → 빌드시 자동 제거
• 개발 모드에서는 기존 코드 그대로 유지
• 실수로 배포에 디버깅 로그가 포함될 위험 방지
• Renderer 성능 저하 예방 (특히 많은 로그를 찍는 페이지에서 효과 큼)

+ 관련 라이브러리 비교

라이브러리	용도	특징
vite-plugin-remove-console	개발 로그 제거	빌드 시 log/debug/info 자동 제거
electron-log	운영 로그 기록	메인 프로세스 로그 파일 저장
winston	고급 로거	다양한 레벨 관리, 파일/콘솔 출력 병행 가능
pino	초고속 로거	대규모 트래픽 환경에 적합, Electron과는 덜 어울림

---

✅ 하지만 로그는 필요합니다 — electron-log

Renderer에서는 console.log를 지우지만, Main Process에서는 로그를 반드시 남겨야 합니다.

왜냐고요? Electron 앱의 핵심 기능은 대부분 Main에서 처리되기 때문입니다.

제가 맡은 프로젝트만 해도:

• Named Pipe를 통한 보안 엔진 통신
• 시스템 정보를 수집하고 상태를 기록하는 모니터링 루프
• 정책 초기화, 설정 로딩, 사용자 상태 갱신 등

모든 주요 흐름은 Main에서 일어납니다.

이때 오류가 발생하거나 예상치 못한 상황이 생기면 반드시 로그가 남아 있어야 디버깅이 가능하죠.

그래서 저는 Main에서는 console.log 대신 electron-log를 사용하고 있습니다.

💾 electron-log 기본 사용법

// main.ts
import log from 'electron-log';

log.info("📡 엔진 초기화 시작");
log.warn("⚠️ 중요한 설정 누락됨");
log.error("❌ 오류 발생", error);

🔍 Main 로그를 electron-log로 남기는 이유~!

이유	설명
시스템 이벤트 추적	사용자가 클릭하지 않아도 자동 동작하는 기능들(정책, 백그라운드 엔진 등)을 기록해야 함
성능 최적화	console.log보다 IO 안정성 높고, 텍스트 파일로 저장되니 개발자 도구 의존도 없음
운영 로그 수집	사용자 컴퓨터에서 수집하여 고객 지원, 장애 분석에 활용 가능
보안성	텍스트 파일로 저장되며, 콘솔에 노출되지 않아 사용자에게도 안전

📂 로그 경로는 여기에 파일로 저장됩니다.

OS	경로
Windows	C:\Users\USERNAME\AppData\Roaming\YourAppName\log.txt
macOS	~/Library/Logs/YourAppName/log.txt

---

🆚 로그 전략 비교 요약

항목	console.log	electron-log
대상	개발용 디버깅	운영 상태 기록
제거 가능 여부	✅ vite-plugin으로 제거 가능	❌ 직접 코드에서 관리
출력 위치	브라우저 콘솔 / 터미널	로컬 로그 파일
성능 영향	많을 경우 메모리/CPU 증가	상대적으로 안정적
사용자 노출 가능성	있음 (devtool 등)	없음 (로컬 전용)

🏁 결론: 로그도 설계 대상입니다

console.log는 디버깅에 아주 유용하지만, Electron처럼 리소스와 I/O에 민감한 환경에서는 설계 대상이 됩니다.

🧠 로그를 지우는 것이 중요한 게 아니라,

"어떤 로그를 언제, 어디에, 어떻게 남길 것인가" 가 중요합니다.

---

💬 마무리하며

Electron 기반 앱에서의 로그는 단순한 디버깅 도구가 아니라,

운영 효율성과 사용자 경험을 좌우하는 요소가 됩니다.

지우지 않아도 되는 콘솔 로그?

어쩌면, 그게 병목의 시작일 수 있습니다.

저처럼 "귀찮아서 로그 안 지웠던 그때"의 저를 반성하며…

지금은 자동화된 안전한 로그 전략으로 한층 더 성장한 기분입니다.

---