# Electron 윈도우 리사이즈 개선하기 – 초보자를 위한 실전 가이드 (55자)

---

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

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