---

# 서론 – “윈도우가 깜빡거려요!” 라는 문제에 직면했나요?

Electron 기반 데스크톱 애플리케이션을 개발하면서 윈도우 리사이즈 시 화면이 깜빡이거나 레이아웃이 깨지는 경우를 종종 경험합니다. 특히 초보 개발자에게는 이런 현상이 “버그인가요?” 라는 의문을 품게 만들죠. 이번 포스트에서는 Electron에서 윈도우 리사이즈 동작을 최적화하고, 부드러운 사용자 경험을 제공하는 방법을 단계별로 살펴보겠습니다.

핵심 키워드: Electron 윈도우 리사이즈, Electron 최적화, 데스크톱 앱 개발

---

# 1️⃣ 기본 원리 이해하기 – Electron 윈도우는 어떻게 동작하나요?

Electron은 Chromium과 Node.js를 결합한 프레임워크로, BrowserWindow 객체를 통해 윈도우를 제어합니다. 윈도우 리사이즈 시 발생하는 주요 흐름은 다음과 같습니다.

| 단계 | 설명 |

|------|------|

| resize 이벤트 | 사용자가 창 크기를 조절하면 BrowserWindow 객체가 resize 이벤트를 발생시킵니다. |

| 렌더러 프로세스 | 이벤트가 발생하면 렌더러 프로세스에 window.onresize가 전달되어 DOM 레이아웃을 재계산합니다. |

| 그림 그리기 | Chromium이 새 크기에 맞춰 화면을 다시 그리면서 화면 깜빡임이 발생할 수 있습니다. |

초보자는 이 흐름을 이해하면 “왜 리사이즈가 부드럽지 않은가?” 라는 질문에 답을 찾을 수 있습니다.

---

# 2️⃣ 리사이즈 이벤트 과다 호출 방지 – 디바운스(디바운싱) 적용하기

resize 이벤트는 사용자가 창을 끌 때마다 수십~수백 번 발생합니다. 매번 DOM을 다시 계산하면 CPU 부하와 깜빡임이 발생하죠. 이를 해결하는 가장 쉬운 방법은 디바운스(debounce) 기법을 적용하는 것입니다.

javascript

// main.js (메인 프로세스)

const { BrowserWindow } = require('electron');

let win = new BrowserWindow({ width: 800, height: 600 });

function debounce(fn, delay) {

  let timer = null;

  return (...args) => {

    clearTimeout(timer);

    timer = setTimeout(() => fn.apply(this, args), delay);

  };

}

// 리사이즈 이벤트에 디바운스 적용

win.on('resize', debounce(() => {

  win.webContents.send('window-resized');

}, 200));

위 코드는 리사이즈가 멈춘 뒤 200ms가 지나면 한 번만 window-resized 이벤트를 전송하도록 합니다. 이렇게 하면 Electron 최적화 효과가 즉시 나타납니다.

---

# 3️⃣ CSS와 레이아웃 최적화 – Flexbox와 Grid 활용

렌더러 프로세스에서 화면이 깜빡이는 원인 중 하나는 고정된 크기를 가진 요소가 리사이즈 시 재배치되지 않기 때문입니다. CSS 레이아웃을 유연하게 설계하면 브라우저가 자동으로 재배치를 수행해 부드러운 전환을 만들 수 있습니다.

css

/* index.css */

.container {

  display: flex;           /* Flexbox 사용 */

  flex-direction: column;

  height: 100vh;           /* 뷰포트 높이에 맞춤 */

}
.header, .footer {

  flex: 0 0 60px;          /* 고정 높이 */

}
.main {

  flex: 1 1 auto;          /* 남은 공간을 자동으로 채움 */

  overflow: auto;

}

또는 CSS Grid를 사용해 복잡한 레이아웃을 구현할 수도 있습니다. 핵심은 절대값(px) 대신 비율값(%, vh, vw)을 활용하는 것입니다.

---

# 4️⃣ 하드웨어 가속 활용 – transparent와 frame 옵션 조정

Electron은 기본적으로 하드웨어 가속을 사용하지만, transparent: true 옵션을 켜면 GPU 가속이 제한될 수 있습니다. 투명 창이 필요하지 않다면 이 옵션을 꺼두는 것이 Electron 윈도우 리사이즈 성능에 큰 도움이 됩니다.

javascript

let win = new BrowserWindow({

  width: 800,

  height: 600,

  transparent: false,   // 투명 창 비활성화

  frame: true,          // 기본 프레임 사용

  webPreferences: {

    backgroundThrottling: false   // 백그라운드에서도 타이머 유지

  }

});

또한 win.setBackgroundColor('#FFF') 로 배경색을 지정하면 화면 깜빡임을 최소화할 수 있습니다.

---

# 5️⃣ 개발자 도구 활용 – 퍼포먼스 프로파일링

마지막으로, 실제로 어느 부분에서 병목이 발생하는지 확인하는 것이 중요합니다. Chrome DevTools의 Performance 탭을 열어 리사이즈 시 FPS와 CPU 사용량을 체크해 보세요.

1. win.webContents.openDevTools() 로 개발자 도구를 연다.

2. Performance 탭에서 Record 버튼을 눌러 리사이즈 동작을 기록한다.

3. Main과 Renderer 섹션을 비교해 long task가 있는지 확인한다.

병목이 발견되면 해당 스크립트를 최적화하거나, Web Workers 로 옮겨 비동기 처리하는 방법을 고려합니다.

---

# 결론 – 부드러운 윈도우 리사이즈, 이제는 기본 옵션!

Electron으로 만든 데스크톱 앱이 리사이즈 시 깜빡거리거나 느려지는 문제는 대부분 이벤트 과다 호출, 고정 레이아웃, 불필요한 투명 옵션 때문에 발생합니다. 이번 포스트에서 소개한 디바운스 적용, Flexbox/Grid 레이아웃, 하드웨어 가속 옵션 조정, 그리고 퍼포먼스 프로파일링을 순서대로 적용한다면, Electron 최적화 수준이 크게 향상될 것입니다.

실전 팁

• 프로젝트 초기에 resize 이벤트를 디바운스 처리해 두면 추후 유지보수가 쉬워집니다.

• CSS는 항상 반응형을 염두에 두고 설계하고, vh/vw 단위를 적극 활용하세요.

• 배포 전 반드시 DevTools Performance 탭으로 최종 테스트를 진행하세요.

# 📢 행동 유도

• 지금 바로 여러분의 Electron 프로젝트에 위 코드를 적용해 보세요!

• 적용 후 성능 차이를 직접 확인하고, 개선된 부분을 커밋 메시지에 기록하면 팀원과의 협업도 원활해집니다.

• 더 궁금한 내용이 있다면 댓글이나 포럼에 질문을 남겨 주세요. 여러분의 피드백이 다음 포스트의 주제가 됩니다.

Electron 윈도우 리사이즈를 최적화하고, 사용자에게 부드러운 경험을 제공하는 첫 걸음, 지금 시작해 보세요! 🚀