UI 가이드라인

개요

플러그인에 UI를 추가하면 대화 흐름을 끊지 않고도 사용자가 더 많은 작업을 할 수 있습니다. 카드, 캐러셀, 전체 화면 등의 표시 모드는 화면에서 직접 상호작용하는 것이 워크플로우에 도움이 될 때만 사용하세요.

디자인 시스템

ChatGPT에 자연스럽게 어울리는 완성도 높은 UI를 설계하려면 @openai/apps-sdk-ui 컴포넌트 라이브러리를 사용할 수 있습니다.

이 라이브러리는 Tailwind 기반 스타일, CSS 변수로 정의된 디자인 토큰, 접근성을 고려해 세심하게 설계한 컴포넌트를 제공합니다.

컴포넌트 라이브러리는 선택 사항입니다. 사용하면 ChatGPT 디자인 시스템에 맞는 컴포넌트를 더 빠르게 만들 수 있습니다.

표시 모드

표시 모드는 개발자가 ChatGPT에서 앱의 콘텐츠와 기능을 사용자에게 제공하는 화면 형식입니다. 파트너는 표시 모드를 활용해 대화에 자연스럽게 어울리는 콘텐츠와 동작을 제공할 수 있습니다. 각 모드는 간단한 확인부터 몰입이 필요한 워크플로우까지 특정 유형의 상호작용에 맞게 설계되었습니다.

표시 모드를 일관되게 사용하면 사용자가 앱을 쉽게 이용하고 동작을 예측할 수 있습니다.

인라인

인라인 모드는 대화 흐름 안에 바로 표시됩니다. 현재 인라인 UI는 항상 모델이 생성한 응답보다 먼저 표시됩니다. 모든 앱은 처음에 인라인 모드로 표시됩니다.

레이아웃

• 아이콘 및 도구 호출: 앱 이름과 아이콘이 표시되는 레이블입니다.
• 인라인 화면: 모델 응답 위에 앱 콘텐츠를 표시하는 간결한 화면입니다.
• 후속 응답: 위젯 다음에 표시되는 짧은 모델 응답으로, 수정할 내용이나 다음 단계, 관련 작업을 제안합니다. 카드 내용을 반복하지 마세요.

인라인 카드

인라인 카드는 대화 안에 바로 표시되며 한 가지 용도에 집중하는 간결한 위젯입니다. 빠른 확인, 간단한 작업 또는 시각 자료를 제공하는 데 적합합니다.

사용 시점

• 예약 확인처럼 한 가지 작업을 수행하거나 결정을 내릴 때
• 지도, 주문 요약, 간단한 상태 정보처럼 소량의 구조화된 데이터를 표시할 때
• 오디오 플레이어나 점수표처럼 독립적으로 사용할 수 있는 위젯이나 도구를 제공할 때

레이아웃

• 제목: 문서 기반 카드이거나 재생 목록에 속한 곡처럼 공통 상위 요소가 있는 항목을 담은 카드에는 제목을 넣으세요.
• 확장: 카드에 리치 미디어가 있거나 지도 또는 대화형 다이어그램처럼 직접 조작할 수 있는 콘텐츠가 있다면 전체 화면 모드로 열 수 있게 하세요.
• 더 보기: 여러 결과를 목록으로 표시할 때 추가 항목을 보여 주는 데 사용하세요.
• 편집 컨트롤: 대화 화면이 복잡해지지 않도록 앱 응답을 인라인에서 편집할 수 있게 하세요.
• 주요 동작: 카드 하단에 최대 두 개의 동작을 배치하세요. 각 동작은 대화를 한 턴 진행하거나 도구를 호출해야 합니다.

상호작용

사용자는 카드에서 간단한 작업을 직접 수행할 수 있습니다.

• 상태: 사용자가 수정한 내용은 저장됩니다.
• 간단한 직접 편집: 필요한 경우 텍스트를 인라인에서 편집할 수 있게 하세요. 사용자가 모델에 프롬프트를 입력하지 않고도 내용을 빠르게 수정할 수 있습니다.
• 동적 레이아웃: 카드 높이는 콘텐츠에 맞게 늘어날 수 있으며, 최대 높이는 모바일 화면의 표시 영역 높이입니다.

설계 원칙

• 카드당 주요 동작 수를 제한하세요: 기본 CTA 하나와 선택적 보조 CTA 하나를 합쳐 최대 두 개의 동작을 제공하세요.
• 한 카드 안에 여러 화면이나 복잡한 탐색 구조를 넣지 마세요. 카드 안에서 여러 상세 화면으로 이동하거나 탭을 전환하거나 하위 단계를 계속 탐색하게 하지 마세요. 이런 기능은 별도 카드나 도구 동작으로 분리하는 방안을 고려하세요.
• 중첩 스크롤을 사용하지 마세요. 카드 내부를 스크롤할 필요가 없도록 콘텐츠에 맞춰 카드 크기를 자동으로 조정하세요.
• 입력 기능을 중복해서 제공하지 마세요. ChatGPT에 이미 있는 기능을 카드 안에 다시 구현하지 마세요.

인라인 캐러셀

캐러셀은 여러 카드를 나란히 배치해 사용자가 선택지를 빠르게 훑어보고 고를 수 있게 합니다.

사용 시점

• 음식점, 재생 목록, 이벤트처럼 비슷한 항목을 몇 개 보여 줄 때
• 항목에 담긴 시각 콘텐츠와 메타데이터가 많아 일반적인 목록 행에 다 들어가지 않을 때

레이아웃

• 이미지: 모든 항목에 이미지나 시각 자료를 포함하세요.
• 제목: 일반적으로 캐러셀 항목에는 내용을 설명하는 제목을 넣으세요.
• 메타데이터: 응답의 맥락에서 해당 항목을 이해하는 데 가장 중요하고 관련성이 높은 정보를 표시하세요. 텍스트는 두 줄을 넘기지 않는 것이 좋습니다.
• 배지: 필요한 경우 배지로 보충 정보를 제공하세요.
• 동작: 가능하면 항목마다 명확한 CTA 하나를 제공하세요.

설계 원칙

• 쉽게 훑어볼 수 있도록 캐러셀당 항목 수를 3~8개로 유지하세요.
• 메타데이터에는 관련성이 가장 높은 정보만 담고 세 줄을 넘기지 마세요.
• 각 카드에는 필요에 따라 CTA를 하나만 넣을 수 있습니다(예: ‘예약’, ‘재생’).
• 모든 카드에서 정보의 중요도를 일관된 방식으로 표현하세요.

전체 화면

인라인 카드를 전체 화면으로 확장하면 사용자가 여러 단계로 이루어진 워크플로우에 집중하거나 콘텐츠를 더 자세히 살펴볼 수 있습니다. 전체 화면에서도 ChatGPT의 메시지 입력창이 콘텐츠 위에 겹쳐 표시되므로 사용자는 보고 있는 내용을 바탕으로 계속 자연스럽게 ‘앱과 대화’할 수 있습니다.

사용 시점

• 핀이 표시된 대화형 지도, 다양한 편집 기능을 갖춘 캔버스, 대화형 다이어그램처럼 카드 하나에 담기 어려운 작업을 제공할 때
• 부동산 매물이나 메뉴처럼 상세한 콘텐츠를 탐색할 때

레이아웃

• 시스템 닫기 버튼: 시트나 화면을 닫습니다.
• 전체 화면 뷰: 콘텐츠가 표시되는 영역입니다.
• 메시지 입력창: 사용자가 전체 화면에서 보고 있는 내용에 대해 후속 요청을 입력할 수 있는 ChatGPT의 기본 입력창입니다.

상호작용

• 채팅 시트: 전체 화면을 사용하면서도 대화 맥락을 유지할 수 있게 합니다.
• 생각 중: 응답이 스트리밍되는 동안 메시지 입력창에 은은하게 반짝이는 효과가 나타납니다.
• 응답: 모델이 응답을 마치면 메시지 입력창 위에 응답의 일부가 잠시 표시됩니다. 이 부분을 탭하면 채팅 시트가 열립니다.

설계 원칙

• 시스템 메시지 입력창과 함께 사용할 수 있도록 UX를 설계하세요. 전체 화면에서는 메시지 입력창이 항상 표시됩니다. 사용자가 자연스러운 대화형 프롬프트로 도구 호출을 실행할 수 있도록 설계하세요.
• 넓은 공간이 유리한 작업에는 전체 화면을 사용하세요. 기존 편집기와 관리 인터페이스가 iframe 정책을 충족하면 전체 화면에 삽입할 수 있습니다.

화면 속 화면(PiP)

PiP는 게임이나 동영상처럼 계속 진행되거나 실시간으로 제공되는 세션에 적합한 ChatGPT 내 플로팅 창입니다. 대화가 이어지는 동안에도 창이 계속 표시되며 사용자 프롬프트에 따라 내용이 동적으로 바뀔 수 있습니다.

사용 시점

• 게임, 실시간 협업, 퀴즈, 학습 세션처럼 대화와 동시에 진행하는 활동에 사용하세요.
• PiP 위젯이 채팅 입력에 반응할 수 있는 상황에 사용하세요. 예를 들어 사용자 요청에 따라 게임 라운드를 이어 가거나 실시간 데이터를 새로 고칠 수 있습니다.

상호작용

• 활성화: 사용자가 스크롤해도 PiP 창은 표시 영역 상단에 고정됩니다.
• 고정: 사용자가 창을 닫거나 세션이 끝날 때까지 PiP는 고정된 상태로 유지됩니다.
• 세션 종료: PiP는 인라인 위치로 돌아가며, 이후 스크롤하면 화면 밖으로 이동합니다.

설계 원칙

• 사용자가 시스템 메시지 입력창을 통해 상호작용할 때 PiP 상태가 업데이트되거나 입력에 반응할 수 있도록 하세요.
• 세션이 끝나면 PiP를 자동으로 닫으세요.
• PiP에 컨트롤이나 정적 콘텐츠를 과도하게 넣지 마세요. 인라인이나 전체 화면에 더 적합한 요소는 해당 모드에서 제공하세요.

시각 디자인 가이드라인

일관된 디자인을 적용하면 파트너가 만든 도구가 ChatGPT 플랫폼의 일부처럼 자연스럽게 느껴집니다. 시각 디자인 가이드라인을 따르면 UI를 명확하고 사용하기 쉽게 만들고 접근성을 높이면서도 적절한 곳에 브랜드의 개성을 담을 수 있습니다.

다음 원칙은 색상, 서체, 간격, 이미지를 활용해 시스템 UI의 명료함을 유지하면서 파트너 서비스의 특색을 살리는 방법을 설명합니다.

일관성이 중요한 이유

시각 디자인과 UX가 일관되면 ChatGPT에서 앱을 사용하는 전반적인 경험이 향상됩니다. 파트너가 이 가이드라인을 따르면 사용자는 익숙한 방식으로 도구를 사용하면서 주의를 빼앗기지 않고 필요한 작업에 집중할 수 있습니다.

색상

시스템에서 정의한 색상 팔레트를 사용하면 동작과 응답이 항상 ChatGPT 플랫폼과 일관되게 보입니다. 파트너는 강조 요소, 아이콘, 인라인 이미지에 브랜드를 표현할 수 있지만 시스템 색상을 재정의해서는 안 됩니다.

설계 원칙

• 텍스트, 아이콘, 구분선처럼 공간을 나누는 요소에는 시스템 색상을 사용하세요.
• 로고나 아이콘 등 파트너 브랜드를 강조하는 요소 때문에 배경색이나 텍스트 색상이 바뀌지 않도록 하세요.
• ChatGPT의 간결한 디자인과 어울리지 않는 사용자 지정 그라데이션이나 패턴은 피하세요.
• 앱의 표시 모드 안에 있는 기본 버튼에는 브랜드 강조색을 사용하세요.

강조 요소와 배지에는 브랜드 색상을 사용하세요. 텍스트 색상이나 핵심 컴포넌트의 다른 스타일은 변경하지 마세요.

텍스트 영역의 배경에 색상을 적용하지 마세요.

타이포그래피

ChatGPT는 기기에 관계없이 가독성과 접근성을 유지하기 위해 각 플랫폼의 기본 시스템 글꼴을 사용합니다. iOS에서는 SF Pro를, Android에서는 산세리프 글꼴을 사용합니다.

설계 원칙

• 항상 시스템 글꼴 스택을 상속하고 제목, 본문, 캡션의 글자 크기는 시스템 규칙을 따르세요.
• 굵게, 기울임꼴, 강조 표시 등 파트너 고유의 스타일은 콘텐츠 영역에만 사용하세요. UI 구조를 이루는 요소에는 적용하지 마세요.
• 글자 크기는 가능한 한 통일하고, 본문과 작은 본문 크기를 우선 사용하세요.

전체 화면 모드에서도 사용자 지정 글꼴을 사용하지 마세요. 가능한 한 시스템 글꼴 변수를 사용하세요.

간격 및 레이아웃

바깥 여백, 안쪽 여백, 정렬을 일관되게 적용하면 사용자가 대화 속에서 파트너 콘텐츠를 빠르게 훑어보고 원하는 정보가 어디에 있을지 예측할 수 있습니다.

설계 원칙

• 카드, 컬렉션, 인스펙터 패널에는 시스템 그리드 간격을 사용하세요.
• 안쪽 여백을 일정하게 유지하세요. 콘텐츠를 빽빽하게 배치하거나 텍스트가 양쪽 가장자리에 닿게 하지 마세요.
• 모양을 일관되게 유지하려면 가능한 한 시스템에서 지정한 모서리 반경을 따르세요.
• 제목, 보조 텍스트, CTA 순서가 뚜렷하게 드러나도록 시각적 위계를 유지하세요.

아이콘 및 이미지

시스템 아이콘은 기능을 한눈에 알아볼 수 있게 하고, 파트너 로고와 이미지는 사용자가 어느 브랜드의 콘텐츠인지 알아보는 데 도움이 됩니다.

설계 원칙

• 시스템 아이콘을 사용하거나, ChatGPT의 시각적 스타일에 맞게 단색 윤곽선으로 디자인한 사용자 지정 아이콘을 사용하세요.
• 응답에 로고를 넣지 마세요. ChatGPT가 위젯을 렌더링하기 전에 항상 로고와 앱 이름을 추가합니다.
• 모든 이미지는 왜곡되지 않도록 지정된 가로세로 비율을 준수해야 합니다.

접근성

가능한 한 많은 사용자가 파트너 앱을 이용할 수 있어야 합니다. ChatGPT용 앱을 만들 때는 접근성을 핵심 설계 요건으로 고려하세요.

설계 원칙

• 텍스트와 배경 사이의 명암비는 WCAG AA의 최소 기준을 충족해야 합니다.
• 모든 이미지에 대체 텍스트를 제공하세요.
• 텍스트 크기를 조정해도 레이아웃이 깨지지 않도록 하세요.