Electron에서 모니터 해상도로 인한 이미지 및 창 불일치 문제 해결

Electron에서 모니터 해상도로 인한 이미지 및 창 불일치 문제 해결

Electron을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 때, 다양한 해상도를 갖는 여러 모니터를 처리하는 것은 이미지 캡처 및 표시와 관련된 도전을 유발할 수 있습니다. 일반적인 문제 중 하나는 모니터 해상도의 차이로 인한 캡처된 이미지와 창 간의 불일치입니다. 이 블로그 게시물에서는 이 문제의 근본 원인을 탐구하고 이를 해결하기 위한 정교한 접근 방식을 제시하며, height: 100%에서 auto로 CSS 속성을 조정하는 경우를 중점적으로 다룹니다.

문제: 다양한 모니터 해상도

이 문제는 외부 모니터에서 캡처된 이미지가 올바르게 표시되는 반면 MacBook에서는 그렇지 않은 경우에 발생했습니다. 초기 의심사항은 일관된 표시를 위해 화면 DPI를 맞추어야 한다는 것이었습니다. 그러나 근본적인 문제는 CSS 속성 구성 오류로 역추적되어, 이로 인해 계몽적인 “아하” 순간이 도래했습니다.

원인 확인: CSS 속성 구성 오류

문제의 본질은 캡처된 이미지의 CSS 스타일링에 있었습니다. 원래 height: 100%로 설정된 이 속성은 이미지를 컨테이너의 높이에 맞게 늘리거나 축소시켰으며, 이미지의 자연스러운 가로 세로 비율을 무시했습니다. 이러한 불일치는 해상도가 다른 모니터 간에 명확해지며, DPI의 차이가 왜곡을 악화시켜 늘어진 또는 압축된 이미지가 발생하게 했습니다.

해결 전략

해결책은 우아하고 간단하지만 효과적이었습니다: CSS 속성을 height: 100%에서 height: auto로 변경하는 것입니다. 이 조정은 캡처된 이미지가 원래의 가로 세로 비율을 유지하도록 보장하며, 이미지의 너비에 맞추어 높이를 자동으로 조절하여 컨테이너의 제약 조건을 준수합니다. 이 변경으로 인해 해상도 설정이 다른 장치 간의 일관성이 확보되어 해상도 불일치 문제의 핵심이 해결되었습니다.

다중 모니터 지원을 위한 JavaScript 구현

다음 JavaScript 코드 스니펫은 각 디스플레이의 썸네일 이미지를 비동기적으로 검색하여 화면 캡처를 위한 창을 만드는 방법을 보여줍니다. desktopCapturer.getSources()를 사용하여 디스플레이 썸네일을 가져오고, 디스플레이 해상도에 따라 썸네일 크기를 조정하여 고해상도 캡처를 보장합니다.

async createCaptureWindows() {
  const displays = screen.getAllDisplays();
  const thumbnailPromises = displays.map(async (display) => {
    try {
      const sources = await desktopCapturer.getSources({
        types: ["screen"],
        thumbnailSize: display.size,
      });

      const source = sources.find(source => source.display_id === display.id);
      if (source) {
        this.createCaptureWindowForDisplay(display, source

.thumbnail);
      } else {
        throw new Error(`No source found for display ${display.id}`);
      }
    } catch (error) {
      console.error("Error creating capture windows:", error);
      throw error; // 외부 처리를 위해 오류 전파
    }
  });

  try {
    await Promise.all(thumbnailPromises);
  } catch (error) {
    console.error("Error creating capture windows:", error);
  }
}

캡처 영역을 위한 React 컴포넌트

Capture React 컴포넌트는 캡처 영역을 선택하기 위한 사용자 인터페이스를 보여주며, 마우스 이벤트를 사용하여 캡처 영역의 시작점과 끝점을 정의합니다. useEffect 훅은 마우스 액션을 위한 이벤트 리스너를 관리하며, 계산된 CSS 스타일을 통해 동적 선택 영역을 시각화합니다.

이미지 표시 방법에서 핵심적인 조정은 id="background-img"를 가진 img 태그가 가로 세로 비율을 유지하기 위해 직접 또는 포괄적인 스타일 시트 내에서 height: auto CSS 규칙을 채택하도록 하는 것입니다. 이로써 다양한 모니터 해상도에 걸쳐 이미지의 가로 세로 비율을 보존할 수 있습니다.

#background-img {
  width: 100%; /* 필요에 따라 너비 조정 */
  height: auto; /* 가로 세로 비율 유지 */
}

결론

Electron 애플리케이션에서 다중 모니터 캡처를 처리하는 이 정교한 접근 방식은 CSS가 장치 간 콘텐츠 일관성을 보장하는 데 중요함을 강조합니다. 캡처된 이미지의 높이 속성을 100%에서 auto로 조정함으로써, 개발자는 왜곡을 피하고 하드웨어 해상도와 상관없이 일관된 사용자 경험을 제공할 수 있습니다. 이 해결책은 단순히 즉시 문제를 해결하는 것뿐만 아니라, 반응형 디자인에서 CSS 스타일링과 애플리케이션 기능 사이의 중요한 상호 작용을 상기시키는 역할도 합니다.