2025년 8월 30일한국어

프론트엔드 프레젠테이션 API를 탐색하여 매끄러운 멀티스크린 웹 애플리케이션을 만들어 보세요. 여러 디스플레이에 걸쳐 몰입감 있는 콘텐츠를 제공하기 위한 개념, 구현, 그리고 모범 사례를 배웁니다.

멀티스크린 경험 구현하기: 프론트엔드 프레젠테이션 API 심층 분석

오늘날과 같이 모든 것이 연결된 세상에서 사용자들은 여러 기기에서 매끄러운 경험을 기대합니다. 프론트엔드 프레젠테이션 API는 웹 개발자들이 단일 화면을 넘어 매력적이고 협업적인 멀티스크린 경험을 제공하는 애플리케이션을 만들 수 있는 강력한 메커니즘을 제공합니다. 이 종합 가이드에서는 프레젠테이션 API의 기능, 구현 세부 정보 및 모범 사례를 탐색하여 여러 디스플레이의 힘을 활용하는 혁신적인 웹 애플리케이션을 구축할 수 있도록 돕습니다.

프레젠테이션 API란 무엇인가?

프레젠테이션 API는 웹 페이지(프레젠테이션 컨트롤러)가 보조 디스플레이(프레젠테이션 수신기)를 발견하고 연결할 수 있게 해주는 웹 API입니다. 이를 통해 개발자는 다음과 같이 여러 화면에 콘텐츠를 표시하는 웹 애플리케이션을 만들 수 있습니다:

프레젠테이션: 발표자는 노트북으로 노트를 보면서 프로젝터에 슬라이드를 표시합니다.
디지털 사이니지: 중앙 웹 애플리케이션에서 제어하는 공공 디스플레이에 정보를 보여줍니다.
게임: 향상된 몰입감이나 협동 플레이를 위해 게임 플레이를 두 번째 화면으로 확장합니다.
인터랙티브 대시보드: 관제실이나 사무실 환경의 여러 모니터에 걸쳐 실시간 데이터와 시각화를 표시합니다.
협업 애플리케이션: 여러 사용자가 별도의 화면에서 동시에 콘텐츠와 상호 작용할 수 있도록 합니다.

본질적으로 프레젠테이션 API는 웹 애플리케이션이 다른 화면으로 콘텐츠를 "방송"할 수 있게 해줍니다. 크롬캐스트(Chromecast)와 비슷하지만, 브라우저에 직접 내장되어 있고 개발자가 제어할 수 있다고 생각하면 됩니다. 이 API는 제어하는 웹 페이지와 제시된 콘텐츠를 렌더링하는 하나 이상의 수신 웹 페이지 간의 통신을 용이하게 합니다.

주요 개념 및 용어

프레젠테이션 API로 작업하려면 다음 개념을 이해하는 것이 중요합니다:

프레젠테이션 컨트롤러 (Presentation Controller): 프레젠테이션을 시작하고 제어하는 웹 페이지입니다. 일반적으로 사용자가 애플리케이션과 상호 작용하는 기본 화면입니다.
프레젠테이션 수신기 (Presentation Receiver): 보조 화면에 표시되는 웹 페이지입니다. 이 페이지는 프레젠테이션 컨트롤러로부터 콘텐츠를 받아 렌더링합니다.
프레젠테이션 요청 (Presentation Request): 특정 URL(프레젠테이션 수신기)에서 프레젠테이션을 시작하라는 프레젠테이션 컨트롤러의 요청입니다.
프레젠테이션 연결 (Presentation Connection): 성공적인 프레젠테이션 요청 후 프레젠테이션 컨트롤러와 프레젠테이션 수신기 사이에 설정된 양방향 통신 채널입니다.
프레젠테이션 가용성 (Presentation Availability): 프레젠테이션 디스플레이를 사용할 수 있는지 여부를 나타냅니다. 이는 브라우저와 운영 체제에 의해 결정됩니다.

프레젠테이션 API 작동 방식: 단계별 가이드

프레젠테이션 API를 사용하여 멀티스크린 프레젠테이션을 설정하는 과정은 여러 단계로 이루어집니다:

프레젠테이션 컨트롤러: 가용성 감지: 프레젠테이션 컨트롤러는 먼저 `navigator.presentation.defaultRequest` 객체를 사용하여 프레젠테이션 디스플레이가 사용 가능한지 확인합니다.
프레젠테이션 컨트롤러: 프레젠테이션 요청: 컨트롤러는 프레젠테이션 수신기 페이지의 URL과 함께 `navigator.presentation.defaultRequest.start()`를 호출합니다.
브라우저: 사용자에게 확인: 브라우저는 사용자에게 프레젠테이션을 위한 디스플레이를 선택하라는 메시지를 표시합니다.
프레젠테이션 수신기: 페이지 로드: 브라우저는 선택된 디스플레이에 프레젠테이션 수신기 페이지를 로드합니다.
프레젠테이션 수신기: 연결 설정: 프레젠테이션 수신기 페이지는 `PresentationConnection` 객체를 포함하는 `PresentationConnectionAvailable` 이벤트를 수신합니다.
프레젠테이션 컨트롤러: 연결 설정: 프레젠테이션 컨트롤러도 자체 `PresentationConnection` 객체와 함께 `PresentationConnectionAvailable` 이벤트를 수신합니다.
통신: 이제 프레젠테이션 컨트롤러와 수신기는 `PresentationConnection` 객체의 `postMessage()` 메서드를 사용하여 통신할 수 있습니다.

구현 세부 정보: 코드 예제

간단한 프레젠테이션 애플리케이션을 구현하는 데 필요한 코드를 살펴보겠습니다.

프레젠테이션 컨트롤러 (sender.html)

이 페이지는 사용자가 프레젠테이션 디스플레이를 선택하고 수신자에게 메시지를 보낼 수 있도록 합니다.


<!DOCTYPE html>
<html>
<head>
  <title>프레젠테이션 컨트롤러</title>
</head>
<body>
  <button id="startPresentation">프레젠테이션 시작</button>
  <input type="text" id="messageInput" placeholder="메시지 입력">
  <button id="sendMessage">메시지 전송</button>
  <div id="status"></div>
  <script>
    let connection = null;

    const startPresentationButton = document.getElementById('startPresentation');
    const messageInput = document.getElementById('messageInput');
    const sendMessageButton = document.getElementById('sendMessage');
    const statusDiv = document.getElementById('status');

    startPresentationButton.addEventListener('click', async () => {
      try {
        connection = await navigator.presentation.defaultRequest.start('receiver.html');
        statusDiv.textContent = '프레젠테이션이 시작되었습니다!';
        connection.onmessage = (event) => {
          statusDiv.textContent += '\n수신기로부터 받음: ' + event.data;
        };
        connection.onclose = () => {
          statusDiv.textContent = '프레젠테이션이 종료되었습니다.';
          connection = null;
        };
      } catch (error) {
        statusDiv.textContent = '프레젠테이션 시작 오류: ' + error;
      }
    });

    sendMessageButton.addEventListener('click', () => {
      if (connection) {
        const message = messageInput.value;
        connection.postMessage(message);
        statusDiv.textContent += '\n전송됨: ' + message;
        messageInput.value = '';
      } else {
        statusDiv.textContent = '프레젠테이션 연결이 없습니다.';
      }
    });
  </script>
</body>
</html>

프레젠테이션 수신기 (receiver.html)

이 페이지는 프레젠테이션 컨트롤러에서 받은 콘텐츠를 표시합니다.


<!DOCTYPE html>
<html>
<head>
  <title>프레젠테이션 수신기</title>
</head>
<body>
  <div id="content">콘텐츠를 기다리는 중...</div>

  <script>
    navigator.presentation.receiver.connectionList.then(list => {
      list.connections.forEach(connection => {
        handleConnection(connection);
      });
      list.addEventListener('connectionavailable', event => {
        handleConnection(event.connection);
      });
    });

    function handleConnection(connection) {
      const contentDiv = document.getElementById('content');
      contentDiv.textContent = '연결이 설정되었습니다!';
      connection.onmessage = (event) => {
        contentDiv.textContent += '\n수신됨: ' + event.data;
        connection.postMessage('수신기가 받음: ' + event.data);
      };
      connection.onclose = () => {
        contentDiv.textContent = '연결이 종료되었습니다.';
      };
    }
  </script>
</body>
</html>

설명:

sender.html(프레젠테이션 컨트롤러)은 `navigator.presentation.defaultRequest.start('receiver.html')`를 사용하여 프레젠테이션을 요청합니다. 그런 다음 연결이 설정되기를 기다리고 메시지를 보낼 수 있는 버튼을 제공합니다.
receiver.html(프레젠테이션 수신기)은 `navigator.presentation.receiver.connectionList`를 사용하여 들어오는 연결을 수신합니다. 연결이 설정되면 메시지를 수신하고 표시합니다. 또한 답장 메시지를 보냅니다.

프레젠테이션 가용성 처리하기

프레젠테이션을 시작하기 전에 프레젠테이션 디스플레이의 가용성을 확인하는 것이 중요합니다. `navigator.presentation.defaultRequest.getAvailability()` 메서드를 사용하여 프레젠테이션 디스플레이가 사용 가능한지 확인할 수 있습니다.


navigator.presentation.defaultRequest.getAvailability()
  .then(availability => {
    if (availability.value) {
      console.log('프레젠테이션 디스플레이를 사용할 수 있습니다.');
    } else {
      console.log('사용 가능한 프레젠테이션 디스플레이가 없습니다.');
    }

    availability.addEventListener('change', () => {
      if (availability.value) {
        console.log('이제 프레젠테이션 디스플레이를 사용할 수 있습니다.');
      } else {
        console.log('더 이상 프레젠테이션 디스플레이를 사용할 수 없습니다.');
      }
    });
  })
  .catch(error => {
    console.error('프레젠테이션 가용성 확인 중 오류 발생:', error);
  });

오류 처리 및 안정성

다른 웹 API와 마찬가지로 적절한 오류 처리는 매우 중요합니다. 다음은 몇 가지 고려 사항입니다:

예외 처리: 잠재적인 오류를 처리하기 위해 Presentation API 호출을 `try...catch` 블록으로 감싸십시오.
연결 끊김 처리: `PresentationConnection`의 `close` 이벤트를 수신하여 연결이 끊어졌을 때를 감지하십시오. 재연결하거나 사용자 경험을 자연스럽게 저하하는 메커니즘을 구현하십시오.
사용자에게 알림: 사용자에게 정보성 오류 메시지를 제공하여 문제점을 설명하고 가능한 해결책을 제안하십시오.
점진적 저하(Graceful Degradation): 브라우저에서 프레젠테이션 API를 지원하지 않거나 사용 가능한 프레젠테이션 디스플레이가 없는 경우, 멀티스크린 기능이 비활성화되더라도 애플리케이션이 여전히 사용 가능한 경험을 제공하도록 하십시오.

보안 고려 사항

프레젠테이션 API에는 사용자를 보호하고 악의적인 사용을 방지하기 위한 보안 기능이 내장되어 있습니다:

사용자 동의: 브라우저는 항상 사용자에게 프레젠테이션을 위한 디스플레이를 선택하도록 요청하여 사용자가 프레젠테이션을 인지하고 승인하도록 보장합니다.
교차 출처 제한(Cross-Origin Restrictions): 프레젠테이션 API는 교차 출처 정책을 준수합니다. 프레젠테이션 컨트롤러와 수신기는 동일한 출처에서 제공되거나 통신을 위해 CORS(교차 출처 리소스 공유)를 사용해야 합니다.
HTTPS 요구 사항: 보안상의 이유로 프레젠테이션 API 사용은 일반적으로 보안 컨텍스트(HTTPS)로 제한됩니다.

멀티스크린 개발을 위한 모범 사례

매력적이고 사용자 친화적인 멀티스크린 애플리케이션을 만들려면 다음 모범 사례를 고려하십시오:

다양한 화면 크기 및 해상도에 맞게 디자인: 프레젠테이션 수신기 페이지가 다양한 디스플레이 크기 및 해상도에 자연스럽게 적응하도록 하십시오. 반응형 디자인 기술을 사용하여 여러 화면에서 일관된 사용자 경험을 만드십시오.
성능 최적화: 프레젠테이션 컨트롤러와 수신기 간에 전송되는 데이터 양을 최소화하여 특히 낮은 대역폭 연결에서도 원활한 성능을 보장하십시오. 데이터 압축 기술 사용을 고려하십시오.
명확한 시각적 신호 제공: 사용자에게 어떤 화면이 기본 화면이고 어떤 화면이 보조 화면인지 명확하게 하십시오. 시각적 신호를 사용하여 사용자의 주의와 상호 작용을 유도하십시오.
접근성 고려: 멀티스크린 애플리케이션이 장애가 있는 사용자에게도 접근 가능하도록 하십시오. 이미지에 대한 대체 텍스트를 제공하고, 적절한 색상 대비를 사용하며, 키보드 탐색이 지원되는지 확인하십시오.
다양한 기기 및 브라우저에서 테스트: 호환성을 보장하고 잠재적인 문제를 식별하기 위해 다양한 기기 및 브라우저에서 애플리케이션을 철저히 테스트하십시오. 프레젠테이션 API는 성숙했지만 브라우저 지원 및 구현의 미묘한 차이는 여전히 존재합니다.
사용자 여정 고려: 초기 설정부터 연결 해제까지 전체 사용자 경험을 고려하십시오. 사용자가 과정을 따라갈 수 있도록 명확한 지침과 피드백을 제공하십시오.

실제 사례 및 사용 사례

프레젠테이션 API는 혁신적인 웹 애플리케이션을 위한 광범위한 가능성을 열어줍니다. 다음은 몇 가지 예입니다:

인터랙티브 화이트보드: 여러 사용자가 대형 터치스크린이나 프로젝터에 표시된 공유 캔버스에서 협업할 수 있는 웹 기반 화이트보드 애플리케이션.
원격 협업 도구: 원격 팀이 여러 화면에서 실시간으로 문서나 프레젠테이션을 공유하고 주석을 달 수 있는 도구.
컨퍼런스 및 이벤트 애플리케이션: 중앙 웹 애플리케이션으로 제어되는 컨퍼런스 및 이벤트의 대형 화면에 발표자 정보, 일정, 인터랙티브 설문 조사를 표시합니다.
박물관 및 갤러리 전시: 여러 화면에서 방문객의 참여를 유도하고 전시된 유물에 대한 깊이 있는 통찰력을 제공하는 인터랙티브 전시를 만듭니다. 주 화면에 유물을 보여주고 작은 화면에서 추가적인 맥락이나 인터랙티브 요소를 제공하는 것을 상상해 보십시오.
교실 학습: 교사는 기본 화면을 교육용으로 사용하고 학생들은 개별 기기에서 보충 콘텐츠와 상호 작용하며, 이 모든 것이 프레젠테이션 API를 통해 조정됩니다.

브라우저 지원 및 대안

프레젠테이션 API는 주로 구글 크롬 및 마이크로소프트 엣지와 같은 크로미움 기반 브라우저에서 지원됩니다. 다른 브라우저는 부분적이거나 지원하지 않을 수 있습니다. 최신 브라우저 호환성 정보는 MDN 웹 문서를 확인하십시오.

네이티브 프레젠테이션 API를 지원하지 않는 브라우저를 지원해야 하는 경우 다음 대안을 고려할 수 있습니다:

웹소켓 (WebSockets): 웹소켓을 사용하여 프레젠테이션 컨트롤러와 수신기 간의 지속적인 연결을 설정하고 통신 프로토콜을 수동으로 관리합니다. 이 접근 방식은 더 많은 코딩이 필요하지만 더 큰 유연성을 제공합니다.
WebRTC: WebRTC(Web Real-Time Communication)는 P2P 통신에 사용될 수 있어 중앙 서버에 의존하지 않고 멀티스크린 애플리케이션을 만들 수 있습니다. 그러나 WebRTC는 설정하고 관리하기가 더 복잡합니다.
서드파티 라이브러리: 멀티스크린 통신 및 프레젠테이션 관리를 위한 추상화를 제공하는 자바스크립트 라이브러리나 프레임워크를 탐색해 보십시오.

멀티스크린 웹 개발의 미래

프론트엔드 프레젠테이션 API는 더 풍부하고 매력적인 멀티스크린 웹 경험을 가능하게 하는 중요한 진전을 나타냅니다. 브라우저 지원이 계속 증가하고 개발자들이 그 잠재력을 최대한 탐색함에 따라, 여러 디스플레이의 힘을 활용하는 더욱 혁신적인 애플리케이션을 볼 수 있을 것으로 기대합니다.

결론

프레젠테이션 API는 웹 개발자들이 매끄럽고 매력적인 멀티스크린 경험을 만들 수 있도록 하여 프레젠테이션, 협업, 디지털 사이니지 등을 위한 새로운 가능성을 열어줍니다. 이 가이드에서 설명한 핵심 개념, 구현 세부 정보 및 모범 사례를 이해함으로써 프레젠테이션 API를 활용하여 단일 화면의 한계를 넘어서는 혁신적인 웹 애플리케이션을 구축할 수 있습니다. 이 기술을 받아들이고 멀티스크린 웹 개발의 잠재력을 발휘하십시오!

제공된 코드 예제를 실험하고 다양한 사용 사례를 탐색하여 프레젠테이션 API에 대한 더 깊은 이해를 얻는 것을 고려해 보십시오. 애플리케이션이 호환성을 유지하고 멀티스크린 웹 개발의 최신 발전을 활용할 수 있도록 브라우저 업데이트 및 새로운 기능에 대한 정보를 계속 확인하십시오.