레슨
시작
학습 시작
CodeGym /행동 /ChatGPT Apps /Visual design: 테마, 색상, 타이포그래피, 여백, 그리고 준비된 라이브러리

Visual design: 테마, 색상, 타이포그래피, 여백, 그리고 준비된 라이브러리

ChatGPT Apps
레벨 8 , 레슨 3
사용 가능

1. 맥락: 여러분의 App — ChatGPT의 집에 온 손님

버튼을 그리고 글꼴을 고르기 전에 한 가지 현실을 받아들여야 합니다. 사용자는 “여러분의 웹사이트”를 여는 것이 아니라 ChatGPT 안에 앉아 있습니다. ChatGPT에는 이미 다음이 존재합니다:

  • 색 구성표,
  • 글꼴과 크기,
  • 여백과 요소 배치.

여러분의 위젯은 이 환경 내부, 대개 iframe 안에서 표시됩니다. 따라서 중요한 결론: App은 2008년에서 실려 온 배너가 아니라 ChatGPT 인터페이스의 자연스러운 연장처럼 보여야 합니다.

OpenAI의 공식 가이드라인도 바로 이 점을 강조합니다. 시스템 색상과 글꼴을 깨뜨리지 말고, 절제된 브랜드 액센트를 더하며, 기본 타이포그래피와 플랫폼의 그리드를 따르라고 합니다.

실무적으로는 세 가지를 의미합니다.

첫째, 배경, 기본 텍스트 색, 표준 타이포그래피 — 이 모든 것은 “나는 예술가다, 이렇게 보인다”가 아니라 ChatGPT나 시스템 변수에서 상속되어야 합니다.

둘째, “나만의 스타일”을 원한다면 액센트에 집중해야 합니다. 주요 버튼, 배지, 강조 상태 등입니다. 그렇다고 무지개 배경이나 커스텀 Comic Sans 글꼴을 쓰는 건 아닙니다 — 아무리 마음이 끌려도요.

셋째, 같은 App의 inline과 fullscreen 모드는 시각적으로 같은 세계의 일부처럼 보여야 합니다. 동일한 CTA 색, 동일한 카드의 반경과 여백, 동일한 타이포그래피. 사용자는 inline에서 fullscreen으로 전환할 때 다른 제품으로 넘어온 느낌을 받아서는 안 됩니다.

이제 레이어별로 살펴보겠습니다. 색상과 테마, 타이포그래피, 여백과 그리드, 그리고 Tailwind와 shadcn/ui가 이를 어떻게 조립하는지.

인사이트

ChatGPT sandbox는 여러분의 위젯 기능을 제한할 뿐만 아니라 자체 스타일도 적용합니다.

첫째 — HTML 루트 요소

원본 사이트:

<html lang="ru">

샌드박스 안에서는:

<html lang="en-US" data-theme="light" class="light" style="--safe-area-inset-top: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --safe-area-inset-right: 0px;">

둘째 — 기본 CSS 스타일이 적용되어, 위젯이 ChatGPT처럼 더 보이게 합니다: 

<style>
  html,body,#root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}
  html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif!important}
  button,input,textarea,select{font-family:inherit}
  html{background-color:#fff}
  html.dark{background-color:#212121}
  html.mobileSkybridge.dark{background-color:#000}
  @supports (font: -apple-system-body){html.mobileSkybridge{font:-apple-system-body}}
</style>

이 점을 기억해 두면 — 뜻밖의 일이 줄어듭니다.

2. 테마와 색상: 라이트와 다크의 두 세계에서 살기

라이트와 다크 테마

ChatGPT 인터페이스는 이미 라이트와 다크 테마를 지원합니다. 여러분의 위젯은 그중 하나 안에서 표시되고, 사용자는 언제든 테마를 바꿀 수 있습니다. 그러니 하드코딩된 순백 또는 순검은 배경은 잠재적 지뢰가 됩니다.

하얀 배경에 검은 텍스트를 그리는 위젯을 상상해 보세요. 라이트 테마에서는 그럭저럭 봐줄 만하지만, 다크 테마에서는 눈부신 스포트라이트가 됩니다. 반대로 검은 배경을 라이트 테마에 가져오는 것도 마찬가지로 어색합니다. 그래서 공식 권장사항은 색을 하드코딩하지 말고 호스트의 테마/변수에 의존하라는 것입니다.

Apps SDK 환경은 보통 현재 테마를 위한 API나 CSS 변수를 제공합니다. 문서에는 window.openai.theme 같은 접근법과 ChatGPT의 표준 CSS 변수 사용이 등장합니다. 여기에 prefers-color-scheme과 Tailwind의 dark: 유틸리티도 당연히 쓸 수 있죠.

아이디어는 대략 이렇습니다. 위젯은 호스트 테마에 맞춰 다음과 같은 것들을 자동으로 조정해야 합니다:

  • 카드 배경(기본 배경보다 약간 밝거나 어둡게),
  • 텍스트 색(충분한 대비),
  • 테두리, 그림자, hover 상태.

Tailwind로 아주 단순한 테마 래퍼 예시:

// components/AppShell.tsx
export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-background text-foreground">
      {/* bg-background/text-foreground는 테마에서 재정의됩니다 */}
      {children}
    </div>
  );
}

여기서 bg-background와 text-foreground는 표준 Tailwind 클래스가 아니라 여러분의 디자인 시스템(shadcn/ui 등) CSS 변수에 대한 별칭이며, 이 변수들이 다시 ChatGPT의 라이트/다크 테마에 연결됩니다.

시스템 색상 vs 브랜드 액센트

OpenAI는 비교적 명확히 말합니다. ChatGPT의 시스템 색상은 바꾸면 안 됩니다. 기본 텍스트, 표준 채팅 패널, 배경 — 모두 플랫폼의 공통 색을 유지해야 합니다. 여러분의 영역은 위젯 내부의 액센트입니다. CTA 버튼(call to action — 주요 행동), 배지, 작은 요소들 말이죠.

C++

GiftGenius의 실전 원칙은 다음과 같습니다:

  • 선물 카드 배경은 시스템 배경과 가깝게,
  • 텍스트는 채팅의 텍스트와 동일한 일반 색으로,
  • GiftGenius의 브랜드 색은 “선물 선택하기” 같은 주요 버튼과, 필요하다면 할인 배지에만 사용.

다음과 같은 표로 생각해 볼 수 있습니다:

요소 권장 피해야 할 것
위젯 배경 ChatGPT에서 상속 화려한 브랜드 그라디언트 적용
기본 텍스트 시스템 색상 상속 색을 과도하게 주거나 너무 옅게 만들어 가독성 해침
주요 CTA 버튼 브랜드 액센트 색 사용 버튼에 “무지개”처럼 5가지 색을 칠함
보조 버튼/링크 시스템 링크에 가깝게 CTA만큼 강렬하게 만듦
그림자/테두리 부드럽고 미니멀 두꺼운 네온 외곽선

주요 색을 위한 작은 Tailwind 예시:

// styles/globals.css (부분)
:root {
  --gift-accent: 222 84% 56%; /* hsl */
}

.dark {
  --gift-accent: 222 84% 64%; /* 다크에서 조금 더 밝게 */
}

// components/GiftButton.tsx
export function GiftButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-md bg-[hsl(var(--gift-accent))] px-4 py-2 text-sm font-medium text-white hover:opacity-90">
      {children}
    </button>
  );
}

전체 위젯 배경은 건드리지 않되, 주요 CTA 버튼에만 깔끔하게 브랜드 색을 적용합니다.

과하지 않은 대비와 WCAG

WCAG 시험을 보려는 게 아니어도 기준은 간단합니다. 텍스트는 읽기 쉬워야 합니다. 글자가 작을수록 대비는 더 높아야 하죠. 접근성 강의에서는 본문 텍스트 대비를 최소 ~4.5:1로 유지하라고 권합니다. 여기서는 표준을 깊게 파고들기보다 실용적 기준 하나로 충분합니다 — 텍스트와 배경의 대비가 충분할 것.

실무 팁:

  • “우아해 보인다”는 이유로 밝은 회색 텍스트를 밝은 회색 배경에 올리지 않기;
  • 다크 테마에서 거의 검은 배경 위에 어두운 회색 텍스트를 쓰지 않기;
  • 적어도 눈대중으로 확인하기: 여러분이 눈을 찡그리면 사용자도 고통스럽습니다.

스스로의 원칙을 정하세요. 보조 텍스트(라벨, 힌트)는 여전히 읽히되, 색과 크기에서 약간 덜 강조될 뿐 “유령처럼 사라지지는 않도록”.

3. 타이포그래피: 시스템 글꼴, 계층, 그리고 약간의 상식

자체 웹폰트 대신 시스템 글꼴

공식 가이드라인은 SF Pro, Roboto 같은 플랫폼의 시스템 글꼴을 사용하고, 자체 webfont를 끼워 넣지 말라고 권합니다. 성능 문제뿐만 아니라 여러분의 App이 인터페이스의 일부처럼 보여야 하기 때문입니다.

Next.js 앱에서는 위젯 내부 전체가 기본 시스템 스택을 상속하도록 설정하는 것이 가장 쉽습니다. Tailwind에서는 보통 font-sans로 이미 셋업되어 있습니다. 더 명시적으로 하고 싶다면: 

// app/layout.tsx (부분)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  );
}

Google Fonts로 글꼴 3가지를 연결할 필요가 없습니다. 학습용 GiftGenius에서는 엄격한 시스템 글꼴이 가벼운 장식용 글꼴보다 훨씬 단정해 보입니다.

크기 계층

타이포그래피는 몇 단계면 충분합니다. 블록 제목, 부제/핵심 파라미터, 본문, 캡션.

예를 들어 GiftGenius의 inline 카드에서는 다음 레벨로 합의하면 편합니다:

역할 Tailwind 클래스 예시
카드 제목 
text-base font-semibold
 선물 이름
핵심 파라미터 
text-sm font-medium
 가격 또는 카테고리
설명 
text-sm text-muted-foreground
 간략 설명
캡션/자잘한 정보 
text-xs text-muted-foreground
 배송, 상점

미니 카드 컴포넌트:

// components/GiftCard.tsx
type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCard({ title, price, description }: GiftCardProps) {
  return (
    <div className="rounded-lg border bg-card p-4">
      <h3 className="text-base font-semibold">{title}</h3>
      <p className="mt-1 text-sm font-medium text-emerald-600">{price}</p>
      <p className="mt-2 text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

여기서는:

  • 거대한 H1이 없고;
  • 정보가 컴팩트하며;
  • 크기와 두께로 계층이 읽힙니다.

정렬과 행 길이

채팅 인터페이스는 보통 좁습니다. 특히 inline에서는 더 그렇죠. 복잡한 타이포그래피로 머리를 과열할 필요가 없습니다. 왼쪽 정렬과 40–60자 정도의 행 길이면 충분히 편안합니다.

유용한 습관:

  • 카드의 긴 텍스트를 가운데 정렬하지 않기 — 읽기 어렵습니다;
  • 모든 글자를 대문자로 쓰지 않기;
  • 특별한 이유 없이 기본 텍스트를 14px보다 작게( Tailwind의 text-sm) 만들지 않기.

의심스러우면 떠올리세요. 읽는 사람은 지하철에서 피곤한 상태의 모바일 사용자이지, 여러분의 완벽한 27인치 모니터 앞에 앉아 있는 여러분이 아닙니다.

4. 여백, 밀도, 그리드

색과 글꼴이 “물감”이라면, 여백은 공기입니다. 여백이 없으면 아무리 단정한 카드도 죽처럼 뭉개집니다.

OpenAI 권장사항은 이렇게 강조합니다. 요소가 “붙지” 않게 하고, 여백과 반경은 디자인 시스템이나 UI 프레임워크(Tailwind, shadcn/ui 등)에서 가져오며, 가로 스크롤은 최소화하라고요.

“숨 쉬기” 원칙

가장 쉬운 패턴은 여백을 하나의 스케일(예: 4px 또는 8px 단위)로 통일해서 매번 “자체 크기”를 만들지 않는 것입니다. Tailwind에는 이미 p-2, p-3, p-4, gap-3 등이 내장되어 있습니다.

inline 선물 목록을 위한 작은 그리드 예:

// components/GiftListInline.tsx
export function GiftListInline({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3">
      {children}
    </div>
  );
}

각 카드는 gap-3로 떨어지고, 내부 p-4를 갖습니다. 이것만으로도 목록이 “긴 천”처럼 보이지 않게 충분합니다.

컬럼: inline vs fullscreen

Apps SDK의 UX 문서에서는 inline 위젯에서는 1–2열을 유지하고, fullscreen에서는 너비가 충분하면 2–3열을 권장합니다.

이유는 간단합니다. 채팅은, 특히 모바일에서, 너비가 제한적이고 두 열만 되어도 가독성의 경계에 섭니다. fullscreen에서는 화면 대부분을 얻으니 콘텐츠를 더 촘촘히 배치할 수 있습니다.

대략적인 스케치:

flowchart LR
  subgraph Inline
    A[1열
좁은 화면]
    B[2열
데스크톱에서]
  end

  subgraph Fullscreen
    C[2열
기본 시나리오]
    D[3열
그리드/카탈로그 용]
  end

GiftGenius를 위한 Tailwind 구현:

// components/GiftGrid.tsx
export function GiftGrid({ fullscreen, children }: { fullscreen?: boolean; children: React.ReactNode }) {
  const base = fullscreen ? "grid-cols-2 md:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";

  return (
    <div className={`grid gap-4 ${base}`}>
      {children}
    </div>
  );
}

inline 모드에서는 모바일에 한 열, 더 넓은 화면에 두 열. fullscreen에서는 너비에 따라 2–3열을 바로 씁니다.

수평 스크롤 피하기

채팅은 본질적으로 수직입니다. 사용자는 옆으로가 아니라 아래로 스크롤하는 데 익숙합니다. 그래서:

  • 테이블과 카드가 컨테이너 너비에 들어가도록 노력하세요;
  • 유연한 컨테이너 안에서 width: 600px; 같은 고정 너비를 주지 마세요;
  • max-w-full, overflow-x-auto는 “최후의 수단”으로만, 기본값처럼 쓰지 않기.

GiftGenius 카드에는 w-full을 주고, 몇 개가 한 줄에 들어갈지는 그리드가 결정하도록 두면 편합니다.

5. ChatGPT 컨테이너 내 반응형

일반 프런트엔드에서는 viewport를 완전히 제어할 수 있습니다. ChatGPT에서는 제어가 제한적입니다. 위젯은 자체 규칙과 크기를 가진 채팅 컨테이너 안에 놓입니다. Apps SDK는 최대 높이, 화면 노치에 대한 safe area, 기기 타입 등 몇 가지 유용한 브리지를 제공합니다.

maxHeight와 수직 제약

inline 모드에서 ChatGPT는 위젯이 화면을 다 먹지 않도록 높이를 제한할 수 있습니다. useMaxHeight() 같은 훅으로 지금 합법적으로 쓸 수 있는 공간을 알고, 필요한 곳에 내부 스크롤을 붙일 수 있습니다.

의사코드:

// 의사코드, 실제 API 아님:
const maxHeight = useMaxHeight();

return (
  <div style={{ maxHeight, overflowY: "auto" }}>
    <GiftGrid>{/* ... */}</GiftGrid>
  </div>
);

이렇게 하면 위젯이 화면 하단에 박히고, 채팅 메시지가 “지난 생”으로 밀려나는 일을 피할 수 있습니다.

safeArea와 모바일

모바일에서는 위/아래에 노치, 상태 바, 시스템 패널이 있을 수 있습니다. Apps SDK로 safeArea를 받아 적절한 패딩을 적용해 아무것도 폰의 “M자” 아래로 숨지지 않게 할 수 있습니다.

CSS 레벨에서 추가 패딩을 줄 수 있습니다:

// 의사코드
const { top, bottom } = useSafeArea(); // 예: { top: 8, bottom: 16 } 반환

return (
  <div style={{ paddingTop: top, paddingBottom: bottom }}>
    {/* 콘텐츠 */}
  </div>
);

이 강의에서 중요한 건 원칙입니다. 위젯은 최대 높이 제한과 안전 영역을 존중해야 합니다. 그렇지 않으면 UX는 “버튼을 보려면 스크롤 세 번 더”로 바로 추락합니다.

6. Tailwind와 shadcn/ui: 버튼을 다시 발명하지 않기

순수 CSS로 UI를 전부 수작업 코딩하는 건 요즘 거의 하드코어 스포츠입니다. ChatGPT Apps 문맥에서는 검증된 라이브러리를 가져와 플랫폼 요구에 맞게 조정하는 편이 훨씬 수월합니다. 이 코스에서는 기본 스택으로 Tailwind와 shadcn/ui를 사용합니다.

Tailwind: 여백과 색의 사전

Tailwind는 다음과 같은 편리한 유틸리티를 제공합니다:

  • 여백(p-4, gap-3),
  • 크기(text-sm, text-base),
  • 색상(text-muted-foreground, bg-card) — shadcn/ui 등에서는 이미 테마 CSS 변수에 연결되어 있음.

이는 ChatGPT 요구사항에 딱 들어맞습니다:

  • 임의의 여백을 만들지 않고,
  • 텍스트 크기를 일관되게 지정하며,
  • 시스템 색을 깨뜨리지 않고, 미리 합의된 토큰을 사용합니다.

shadcn/ui: 깔끔한 컴포넌트 모음

shadcn/ui(및 유사 라이브러리)은 Card, Button, Input, Tabs 등을 Tailwind 테마에 맞춰 제공합니다. 단정하고 미니멀한 인터페이스를 빠르게 만들 수 있으며, 특히 GiftGenius의 카드 UI에 유리합니다.

shadcn/ui를 사용한 GiftCard 예시:

// components/GiftCardShadcn.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCardShadcn(props: GiftCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">{props.title}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <p className="text-sm font-medium text-emerald-600">{props.price}</p>
        <p className="text-sm text-muted-foreground">{props.description}</p>
        <Button className="mt-2">선물 선택</Button>
      </CardContent>
    </Card>
  );
}

여기서 중요한 건 shadcn 자체가 아니라 원칙입니다:

  • 제목이 과하게 크지 않고;
  • 설명이 읽기 쉽고;
  • 버튼은 “나만의 스타일”이 아니라 공통 디자인 시스템을 따릅니다.

ChatGPT에 맞춘 튜닝

실제 프로젝트에서는 팔레트를 ChatGPT의 미니멀 스타일에 맞춰 조정할 수 있습니다. 밝은 배경, 부드러운 그림자, 깔끔한 반경 등. 이 모듈은 새로운 우주를 만들기보다 기존 디자인 시스템에 기대라고 권합니다.

간단한 접근:

  • shadcn/ui 기본을 가져오고,
  • 시스템 글꼴을 유지하며,
  • primary / accent 토큰에 브랜드 색 한두 개만 설정하고,
  • inline과 fullscreen이 동일한 토큰을 사용하도록 보장하세요.

이렇게 하면 불필요한 노력 없이도 일관된 비주얼 코어를 얻을 수 있습니다.

7. GiftGenius의 비주얼 언어: 모두 합치기

우리의 가상의 GiftGenius에서 무엇을 “비주얼 언어”로 삼을 수 있는지 정리해 봅시다.

첫째, 색 구성. 배경과 텍스트는 ChatGPT에서 상속합니다. 액센트 색은 눈에 띄되 과하지 않게, CTA 버튼과 필요하면 할인 배지에 적용. 다크 테마에서는 대비 유지를 위해 약간 더 밝게.

둘째, 타이포그래피. 기본 시스템 글꼴, 본문은 text-sm, 카드 제목은 text-base. 이탤릭과 올캡스는 드물게, 정말 필요할 때만. fullscreen 마스터의 제목은 한 단계 크지만 여전히 text-4xl 같은 과한 크기는 지양.

셋째, 여백과 그리드. inline에서는 선물 목록을 1–2열로, gap-3/gap-4, 각 카드에는 p-4. fullscreen에서는 2–3열, 단계형 마스터에서는 폼과 버튼 사이에 충분한 간격. 주요 시나리오에서 수평 스크롤은 금지.

GiftGenius 화면에 대한 작은 스케치:

graph TD
  A[Inline: 선물 목록] --> B[GiftCard
색상/타이포/CTA]
  A --> C[GiftGrid 1–2열]

  D[Fullscreen: 선택 마스터] --> E[1단계
폼]
  D --> F[2단계
필터/범위]
  D --> G[3단계
확인]
  
  B --> H[GiftButton
브랜드 액센트]

넷째, 호스트 컨텍스트와의 호환성. 모든 요소는 라이트/다크 전환에서 올바르게 동작하고, maxHeight를 존중하며, safe-area 아래로 숨지 않습니다. 색은 ChatGPT와 충돌하지 않고, 어디서든 CTA 버튼이 동일하게 보여서 사용자가 근육 기억으로도 어디를 눌러야 할지 알 수 있어야 합니다.

이런 결정 세트만으로도 여러분의 앱은 개발자뿐 아니라 실제 사용자나 프로덕트 매니저에게 데모할 만한 상태가 됩니다. “여기는 MCP, 저기는 Agents SDK” 같은 얘기 말고, 진짜로 논의할 수 있는 것이 생깁니다.

8. 접근성 (Accessibility Guidelines, WCAG AA)

2.3절에서 텍스트와 배경 대비를 이야기할 때 WCAG를 잠깐 언급했습니다. 그때의 관심사는 읽기성을 망치지 않는 한 가지 실용적 기준이었죠. 이제 접근성을 조금 더 넓게 봅니다. 화면을 눈으로 보지 않는 사람들에게 이 인터페이스가 어떻게 보이는지, 그리고 ChatGPT의 음성 모드에서는 어떠한지를요.

WCAG AA는 국제 표준 WCAG (Web Content Accessibility Guidelines)의 한 수준으로, 시력, 운동 기능, 인지 특성 등 다양한 제약이 있는 사람을 위해 사이트와 인터페이스를 어떻게 만들지 설명합니다.

WCAG AA의 핵심은 인터페이스를 단순히 “이론적으로 접근 가능”하게 만드는 것이 아니라 실제로 사용 가능하게 만드는 것입니다. 여기에는 텍스트와 배경 대비를 약 4.5:1로 유지하는 것뿐 아니라, 클릭 가능한 영역 크기, 포커스 상태, 폼 오류 처리 등 수십 가지 요구사항이 포함됩니다.

또 다른 층위는 보조공학(Assistive Tech) 지원입니다. 스크린 리더 등을 포함하죠. AA 수준은 올바른 시맨틱을 요구합니다. 제목은 제목 태그로, 목록은 목록으로, 버튼은 버튼으로, 인터랙티브 요소는 올바른 role과 대체 텍스트를 가져야 합니다. 그래야 VoiceOver, TalkBack, NVDA 같은 프로그램을 사용하는 사용자도 구조와 의미를 온전히 이해할 수 있습니다.

Screen reader(스크린 리더)

Screen reader(스크린 리더)는 화면의 내용을 읽어 주고 또는 구조화해 시각 장애가 있는 사람들이 컴퓨터, 스마트폰, 웹 앱을 사용할 수 있게 하는 프로그램입니다.

하지만 스크린 리더는 단순히 “텍스트를 소리 내 읽는 프로그램”이 아닙니다. 웹사이트나 앱의 시각적 표현을 청각적이고 구조화된 네비게이션으로 바꾸는 완전한 상호작용 시스템입니다.

ChatGPT, 스크린 리더, 그리고 WCAG AA

위젯이 WCAG AA 원칙(올바른 role, 제목, 버튼 라벨)을 지켜 마크업되어 있으면, 스크린 리더뿐 아니라 ChatGPT의 음성 모드에도 이해 가능합니다. 사용자는 ChatGPT와 음성으로 대화하고, 모델은 동일한 시맨틱 구조를 바탕으로 사람과 똑같이 “가상으로” 인터페이스 요소를 찾고, 버튼을 누르고, 링크를 따라갈 수 있습니다.

ChatGPT Store 요구사항에 따르면, WCAG AA 준수는 모든 앱에 의무입니다. 모든 위젯과 각 툴은 가능한 한 고품질의 설명을 가지고 있어야 하며, 마크업은 WCAG AA 표준에 맞아야 합니다. 올바른 시맨틱, 읽기 쉬운 라벨, 예측 가능한 상태 등.

그러니 WCAG AA는 “특수한 요구를 가진 사람들을 위한 별도 기능”이 아니라, ChatGPT Apps가 여러분의 앱과 제대로 상호작용하기 위한 기본 디자인 원칙입니다. 사용자가 음성 모드로 상호작용할 때도 포함해서요.

음성 UX 시나리오, 음성 대화와 텍스트 대화의 차이, ChatGPT Store의 요구사항은 이 모듈의 다른 수업과 앱 게시 모듈에서 따로 다룹니다. 하지만 그 모든 것은 여러분이 지금 본 토대 위에 서 있습니다. 음성 모드 = 멀티모달 + 접근성(WCAG AA + 스크린 리더).

9. ChatGPT App 시각 디자인의 흔한 실수

실수 №1: 하드코딩된 흰/검은 배경과 텍스트 색.
개발자가 테마를 고려하지 않고 흰 배경과 검은 텍스트를 그립니다. 라이트 테마에서는 그럭저럭 살아도, 다크에서는 스포트라이트가 되어 UX를 망칩니다. 올바른 방법은 시스템 색과 호스트 테마(CSS 변수, prefers-color-scheme 또는 Apps SDK API)를 사용하고, 자체 색은 액센트에만 두는 것입니다.

실수 №2: 지나치게 공격적인 브랜딩.
화려한 그라디언트 배경, 커스텀 글꼴, 요란한 테두리가 등장합니다. 위젯은 ChatGPT 인터페이스의 일부가 아니라 프로모 배너처럼 보이기 시작합니다. 가이드라인은 반대입니다. 미니멀하고 “자연스러운” 형태, 그리고 브랜드 색은 주요 요소(예: 주요 버튼)에만 절제해 사용하세요.

실수 №3: 타이포그래피 계층 없음.
모든 텍스트가 같은 크기와 두께거나, 반대로 작은 카드에 제목이 셋이나 있고 게다가 올캡스. 사용자는 제목, 가격, 설명 중 무엇이 중요한지 이해하지 못합니다. 3–4개의 레벨을 미리 합의하고 어디서든 지키는 게 좋습니다. 제목, 핵심 파라미터, 본문, 캡션.

실수 №4: 여백 없이 들러붙은 요소들.
카드가 서로 달라붙고, 텍스트가 가장자리에 바짝 붙으며, 버튼이 텍스트에 달라붙습니다. 데스크톱에서는 그럭저럭이지만 모바일에서는 시각적 노이즈가 됩니다. p-4, gap-3 같은 Tailwind 클래스 등 하나의 여백 스케일을 사용하고 공기를 아끼지 마세요.

실수 №5: inline 모드에서 4–5열을 우겨 넣기.
개발자가 아직도 온라인 쇼핑몰 페이지를 떠올리며 채팅에서 네 개의 좁은 카드를 만듭니다. 넓은 화면에서도 미묘하고, 모바일에서는 완전히 읽기 힘듭니다. 수평 스크롤까지 더해지죠. inline 위젯에는 보통 1–2열이면 충분합니다. 세 번째 열은 fullscreen에 남겨 두세요.

실수 №6: 높이 제한과 safe-area를 무시.
내부 스크롤 없이 거대한 목록을 그리고 maxHeight를 고려하지 않아서 버튼이 “화면 바닥 아래”로 내려갑니다. 또는 모바일의 노치 아래로 요소가 숨습니다. 최대 높이와 안전 영역 정보를 사용해 내부 높이와 패딩을 올바르게 분배하세요.

실수 №7: inline과 fullscreen에서 버튼/카드의 불일치.
inline에서는 버튼이 초록색 둥근 모서리, fullscreen에서는 파란색 사각형. 사용자는 하나의 제품이라는 감각을 잃습니다. 기본 버튼과 카드 스타일을 공통 컴포넌트/테마로 빼고 모든 모드에서 재사용하세요.

실수 №8: “작가주의” 글꼴과 장식 과잉.
“예뻐 보이게” 하겠다고 무거운 webfont를 붙이면 ChatGPT와의 시각적 일관성이 깨지고 성능까지 나빠지기도 합니다. 플랫폼 권장사항은 시스템 글꼴과 깔끔한 타이포그래피입니다. 디자이너로서 표현하고 싶다면, 글꼴 혁명보다 아이콘과 마이크로카피를 다듬는 편이 낫습니다.

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION