ChatGPT 앱 디스플레이 모드 참조

Source: Dev.to

인라인

인라인 디스플레이 모드는 리소스를 대화 흐름에 삽입합니다. 앱 iframe은 다음과 같은 <div> 안에 배치됩니다:

<div>
    <!-- app iframe goes here -->
</div>

외부 <div>의 높이는 리소스 높이에 고정되며, 리소스는 원하는 만큼 높게 설정할 수 있습니다(최대 20 kpx까지 테스트). window.openai.maxHeight 전역 변수(또는 useMaxHeight 훅)는 모든 테스트에서 정의되지 않았으며, 이 모드에서는 사용되지 않는 것으로 보입니다.

전체 화면

전체 화면 디스플레이 모드는 ChatGPT 헤더/네비게이션 아래의 전체 대화 공간을 차지합니다. 네비게이션 바는 중앙에 애플리케이션 제목을 표시하고, 왼쪽에 전체 화면을 종료하는 X 버튼이 있습니다. 앱 iframe은 다음과 같은 <div> 안에 삽입됩니다:

<div class="fullscreen-container">
    <!-- app iframe goes here -->
</div>

인라인 모드와 마찬가지로 리소스는 임의의 높이로 설정할 수 있으며(최대 20 kpx까지 테스트). window.openai.maxHeight 전역 변수도 이 모드에서는 정의되지 않습니다.

화면 속 화면 (PiP)

PiP 디스플레이 모드는 리소스를 대화 위에 절대 위치로 삽입합니다. iframe은 다음과 같은 <div> 안에 배치됩니다:

<div class="pip-container">
    <!-- app iframe goes here -->
</div>

이 모드만 window.openai.maxHeight 전역 변수(또는 useMaxHeight 훅)를 사용합니다. iframe은 원하는 높이를 요청할 수 있지만, maxHeight 설정을 초과하는 내용은 스크롤 가능하며 PiP 창은 그 한계를 넘어 확장되지 않습니다.

Note: PiP는 모바일 화면 너비에서는 지원되지 않으며, 해당 기기에서는 전체 화면 모드로 대체됩니다.

마무리

실제로 각 디스플레이 모드는 서로 다른 클라이언트처럼 동작하므로, 앱은 이를 각각 처리해야 합니다. 좋은 소식은 인라인 모드만 구현하면 되므로 개발이 단순해진다는 점입니다.

• 각 디스플레이 모드의 인터랙티브한 시각 자료는 sunpeak ChatGPT 시뮬레이터를 확인하세요.
• Sunpeak 프레임워크로 ChatGPT 앱을 만들고 싶다면 Sunpeak 문서를 참고하세요.
• 이 글이 도움이 되었다면 GitHub에서 별표를 눌러 주세요.