다중 모니터 환경에서 window.open으로 특정 모니터에 팝업 띄우기

웹 애플리케이션을 개발하다 보면 window.open을 이용해 새로운 팝업 창을 띄우는 경우가 자주 발생합니다. 하지만 여러 개의 모니터를 사용하는 환경에서는 기본적으로 팝업 창이 메인 모니터에만 열리는 제한이 있습니다. 이 글에서는 다중 모니터 환경에서 팝업 창을 특정 모니터에 띄우는 방법을 상세히 설명하고, 이를 구현하기 위한 소스를 제공합니다.

---

기본적인 window.open 메서드

문법

window.open(url, windowName, [windowFeatures]);

주요 매개변수

1. url: 팝업으로 열릴 페이지의 URL.
2. windowName: 새 창의 이름(또는 고유 식별자).
3. windowFeatures: 팝업 창의 속성(크기, 위치 등)을 정의하는 문자열.

예제

window.open('https://example.com', 'popup', 'width=600,height=400');

위 코드로 팝업 창을 띄우면 브라우저가 기본적으로 창의 위치를 정합니다. 그러나 다중 모니터 환경에서는 위치를 제어하려면 추가적인 작업이 필요합니다.

---

다중 모니터에서 특정 위치로 팝업 띄우기

핵심 아이디어

1. 브라우저 화면 정보 얻기: window.screen 객체를 사용하여 현재 화면의 해상도 및 위치 정보를 가져옵니다.
2. 팝업 위치 지정: 팝업 창의 좌표(left, top)를 계산하여 특정 모니터에 위치하도록 설정합니다.

---

예제 1: 기본적인 위치 지정

다음 코드는 특정 좌표로 팝업 창을 띄우는 방법을 보여줍니다.

function openPopup(url) {
    const width = 800; // 팝업 너비
    const height = 600; // 팝업 높이
    const left = 100; // 화면의 X 좌표
    const top = 100; // 화면의 Y 좌표

    window.open(
        url,
        'popup',
        `width=${width},height=${height},left=${left},top=${top}`
    );
}

openPopup('https://example.com');

이 코드는 팝업을 항상 (100, 100) 좌표에 열지만, 특정 모니터를 고려하지 않은 점이 한계입니다.

---

예제 2: 다중 모니터 지원

다중 모니터 환경에서의 창 배치는 window.screen 객체의 속성을 활용해야 합니다.

function openPopupOnMonitor(url, monitorIndex = 0) {
    const monitors = [
        { left: 0, top: 0, width: 1920, height: 1080 }, // 첫 번째 모니터
        { left: 1920, top: 0, width: 1920, height: 1080 }, // 두 번째 모니터
        { left: -1920, top: 0, width: 1920, height: 1080 }, // 왼쪽 모니터
    ];

    // 선택한 모니터
    const monitor = monitors[monitorIndex];

    if (!monitor) {
        console.error('해당 모니터가 존재하지 않습니다.');
        return;
    }

    const width = 800; // 팝업 너비
    const height = 600; // 팝업 높이
    const left = monitor.left + (monitor.width - width) / 2; // 모니터 중앙으로 설정
    const top = monitor.top + (monitor.height - height) / 2;

    window.open(
        url,
        'popup',
        `width=${width},height=${height},left=${left},top=${top}`
    );
}

// 두 번째 모니터에 팝업 열기
openPopupOnMonitor('https://example.com', 1);

설명

1. monitors 배열에 각 모니터의 정보를 설정합니다.
2. 특정 모니터를 선택하여 팝업의 좌표를 계산합니다.
3. 팝업 창이 모니터 중앙에 열리도록 left와 top 값을 조정합니다.

---

예제 3: 동적으로 모니터 정보 가져오기

대부분의 환경에서는 모니터의 위치 정보를 하드코딩하지 않고 동적으로 가져오는 것이 바람직합니다. 이를 위해 브라우저 API를 활용할 수 있습니다.

window.screen을 이용한 동적 처리

function getScreenDetails() {
    const screenLeft = window.screenLeft || window.screen.left;
    const screenTop = window.screenTop || window.screen.top;
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;

    return { screenLeft, screenTop, screenWidth, screenHeight };
}

function openPopupOnCurrentMonitor(url) {
    const { screenLeft, screenTop, screenWidth, screenHeight } = getScreenDetails();

    const width = 800;
    const height = 600;
    const left = screenLeft + (screenWidth - width) / 2;
    const top = screenTop + (screenHeight - height) / 2;

    window.open(
        url,
        'popup',
        `width=${width},height=${height},left=${left},top=${top}`
    );
}

// 현재 사용 중인 모니터에 팝업 열기
openPopupOnCurrentMonitor('https://example.com');

코드 해설

1. 모니터 정보 획득:
   • window.screenLeft, window.screenTop을 사용하여 현재 화면의 시작 좌표를 가져옵니다.
2. 중앙 배치:
   • 화면 크기를 기반으로 팝업을 중앙에 배치합니다.

---

예제 4: 복수 모니터 지원

다음은 여러 모니터 환경에서 사용 가능한 전체 모니터 정보를 동적으로 탐지하고 팝업을 열도록 설계한 코드입니다.

function openPopupOnMultipleMonitors(url, monitorIndex = 0) {
    if (!window.screen || !window.screen.availWidth) {
        console.error('모니터 정보를 가져올 수 없습니다.');
        return;
    }

    const totalWidth = window.screen.availWidth; // 전체 모니터 가로 크기
    const totalHeight = window.screen.availHeight; // 전체 모니터 세로 크기
    const primaryWidth = window.screen.width; // 기본 모니터 가로 크기
    const primaryHeight = window.screen.height; // 기본 모니터 세로 크기

    console.log(`총 모니터 크기: ${totalWidth}x${totalHeight}`);
    console.log(`기본 모니터 크기: ${primaryWidth}x${primaryHeight}`);

    // 특정 모니터 계산 (예: monitorIndex 기반)
    const monitorLeft = monitorIndex * primaryWidth;

    const width = 800;
    const height = 600;
    const left = monitorLeft + (primaryWidth - width) / 2;
    const top = (primaryHeight - height) / 2;

    window.open(
        url,
        'popup',
        `width=${width},height=${height},left=${left},top=${top}`
    );
}

// 첫 번째 모니터에 팝업 열기
openPopupOnMultipleMonitors('https://example.com', 0);

---

결론

다중 모니터 환경에서 팝업 창을 특정 모니터에 띄우는 방법은 브라우저의 화면 좌표와 해상도 정보를 잘 활용하면 가능합니다. 위 코드들을 활용하여 다중 모니터 환경에서도 사용자 경험을 향상시키는 팝업 동작을 구현할 수 있습니다. 단, 브라우저 및 운영체제의 제한 사항에 따라 일부 기능이 완전히 지원되지 않을 수 있으니 테스트가 필수적입니다.