OpenAI Codex UI 디자인 가이드: Oil UI로 웹사이트, 콘솔, 앱 만들기
OpenAI Codex와 GPT 모델은 상태가 있는 로직, 동기화된 컨트롤, 데이터가 많은 인터페이스에 강점이 있습니다. Oil UI Skill과 함께 사용하면 Codex는 이런 엔지니어링 강점을 절제된 타이포그래피, 명확한 위계, 손맛 있는 상호작용으로 연결합니다. 즉시 라이선스 가격을 계산하는 라이브 서체 테스트부터 장애 토폴로지 콘솔과 390×844 서핑 예보 앱까지 가능합니다.
핵심 요점
- npx skills add oil-oil/oil-ui로 Oil UI를 설치해 Codex가 컴포넌트 코드를 작성하기 전에 시각 위계와 색상 절제를 확립하게 하세요.
- Codex가 잘하는 작동 상태를 활용하세요. 타임라인을 드래그해 로그, 트레이스, 배포 마커를 정렬하는 것처럼 컨트롤이 서로를 어떻게 업데이트하는지 지정하세요.
- 갤러리의 아홉 가지 Orvo 랜딩 페이지나 Atelier Volders, Fonderie Mercier 시리즈처럼 같은 제품 브리프로 서로 다른 시각 방향을 탐색하세요.
- 1440×900 또는 390×844에서 브라우저 스크린샷과 블라인드 서브에이전트 비평으로 모든 상태를 확인해 테두리 난잡함과 잘린 레이블을 없애세요.
npx skills add oil-oil/oil-ui대화형 설치 프로그램에서 Codex / OpenAI Agent 디렉터리를 선택하세요.
Codex가 UI에서 빛나는 부분과 가이드가 필요한 부분
Oil UI 갤러리의 80개가 넘는 작품은 GPT 및 Codex 모델(GPT 6.1 Sol, GPT 6 Luna, GPT 6 Astra)로 만들었습니다. 실제 페이지를 살펴 볼 때, 작동하는 계산과 연동된 상태가 디자인의 핵심인 인터페이스를 Codex가 특히 잘 다룬다는 것을 알 수 있습니다. Fieldwork Type에서는 서체 테스트에 입력하면 굵기, 너비, 장바구니 라이선스가 즉시 업데이트됩니다. Nightwatch에서는 시간 창을 드래그하면 서비스 토폴로지, 배포 마커, 오류 로그가 정렬됩니다. Vesper에서는 인보이스를 필터링해 웹훅 페이로드와 재시도 작업을 열 수 있습니다.
하지만 기본 동작에만 맡기면 Codex는 복잡한 도구를 시끄러운 엔지니어용 디버그 패널로 만들 수 있습니다. 모든 필드를 상자에 넣고 상태 pill을 한 줄에 쌓으며 모든 표 열에 같은 시각적 무게를 주는 식입니다. Oil UI는 밀도 높은 화면을 차분하게 유지할 위계와 요소 제거 규칙을 제공합니다.
| 작품 및 모델 | 형태 | 중심 상호작용 | 뷰포트 및 상태 |
|---|---|---|---|
| Fieldwork Type (GPT 6.1 Sol) | 독립 폰트 파운드리 웹 | 데스크톱/웹/앱 라이선스 가격과 연결된 라이브 서체 테스트 | 1440×900에서 390px까지; 히어로, 확장된 테스트, 라이선스 선택 |
| Nightwatch (GPT 6.1 Sol) | 장애 대응 콘솔 | 시간 범위를 드래그해 토폴로지 경로, 배포, 로그 정렬 | 1440×900; 정상, 진행 중인 장애, 피크 조사, 릴리스 보기 |
| Vesper (GPT 6.1 Sol) | API 사용량 결제 콘솔 | 임계값으로 고객을 필터링하고 실패한 인보이스 타임라인 검사 | 1440×900; 개요 워크스페이스, 예외 상세 드로어, 명령 팔레트 |
| Tide (GPT 6.1 Sol) | 서핑 및 조석 예보 앱 | 타임라인을 조정해 스웰 높이, 바람, 조석 곡선을 함께 업데이트 | 390×844 모바일; 인터랙티브 index.html과 3개 화면의 screens.html |
Codex에서 방향 → 상태 → 스크린샷 순환 실행하기
Codex에 검증되지 않은 여러 화면의 애플리케이션을 한 번에 생성하게 하지 말고 작업을 명확한 확인 지점으로 나누세요.
Oil UI를 설치하고 작업 중심 브리프 전달
npx skills add oil-oil/oil-ui로 Skill을 설치한 다음 사용자, 핵심 객체, 필수 상태, 뷰포트 크기를 설명하세요.
npx skills add oil-oil/oil-ui확정하기 전에 하나의 보드에서 방향 비교
Codex가 실제 제품 문구를 사용해 서로 다른 방향 3~4개를 담은 비교 보드를 만들게 하세요. 하나를 선택한 뒤 탈락한 옵션의 위젯을 선택한 방향에 이어 붙이지 마세요.
URL 매개변수나 다중 화면 보드로 주요 상태 제공
갤러리 패턴(?state=incident 또는 screens.html)을 따라 모든 중요 상태를 헤드리스 브라우저에서 바로 열고 일관되게 캡처할 수 있게 하세요.
100% 및 200% 캡처를 검사한 뒤 시각적 소음 제거
렌더링된 스크린샷을 검토해 중복 테두리를 없애고 어색한 줄 바꿈을 수정하며 주요 행동이 한눈에 드러나는지 확인하세요.
정보 밀도 높은 Codex 프롬프트 템플릿
사용자 행동이 화면에 어떤 영향을 주는지 지정하면 Codex가 훨씬 강력한 인터페이스를 만듭니다. 다음 구조를 자신의 제품에 맞게 바꿔 사용할 수 있습니다.
Oil UI를 사용해 [제품 이름 및 카테고리, 예: 개발자 도구 팀을 위한 API 사용량 결제 및 고객 인보이스 콘솔]을 1440×900 데스크톱 뷰포트에서 디자인하고 구현해 줘.
- 핵심 작업: 구독 플랜과 실시간 사용량을 관리하고, 이번 주기의 청구 금액과 인보이스 예외를 검토하며, 상태와 사용량 임계값으로 고객을 필터링하고, 세부 항목과 결제 타임라인, 웹훅 페이로드를 검사할 수 있게 해 줘.
- 연결된 상호작용: 필터를 업데이트하면 고객 목록과 사용량 추세가 함께 새로고침되고, 예외 인보이스를 열 때 결제 재시도, 할당량 조정, 데이터 추출 작업이 표시되게 해 줘.
- 전달할 상태: 1) 실시간 필터링이 있는 일상 워크스페이스, 2) 복구 작업이 있는 예외 인보이스 상세 보기, 3) 빠른 명령 팔레트. 세 가지 상태를 모두 실제 브라우저 스크린샷으로 확인해 줘.Oil UI 갤러리에서 Vesper를 만드는 데 사용한 브리프를 바탕으로 했습니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Fieldwork Type
독립 폰트 파운드리
독립 폰트 파운드리의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형으로 대응). 첫 화면에는 대표 서체를 배치하고, 방문자가 직접 텍스트를 입력하며 크기, 두께, 너비를 조절할 수 있어야 합니다. 아래에는 패밀리의 웨이트 차트, 문자 세트, 활용 사례와 용도별 라이선스(데스크톱, 웹, 앱)를 배치하고 장바구니에 담을 수 있게 하세요. 서체 테스터와 라이선스 선택 도구가 이 작품의 핵심입니다. 입력에 따라 서체 표본이 바뀌고, 옵션을 고를 때마다 라이선스 가격이 갱신되어야 합니다. 첫 화면, 테스터 패널이 펼쳐진 상태, 라이선스 선택 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Nightwatch
운영 모니터링 및 장애 대응
중규모 플랫폼 팀을 위한 모니터링 및 온콜 도구를 1440×900 영어 인터페이스로 만드세요. 서비스 토폴로지, 지연 시간, 오류율 및 트래픽 차트, 최근 배포, 로그, 트레이스를 제공하고 장애 중에는 알림, 현재 온콜 담당자, 장애 타임라인을 표시하세요. 장애가 전개되는 과정이 핵심입니다. 장애가 발생한 서비스와 영향을 받는 다운스트림 서비스가 토폴로지에서 분명히 보여야 합니다. 시간 범위를 드래그하면 차트, 배포 마커, 로그가 정렬되어 어떤 배포가 문제를 일으켰는지 확인할 수 있어야 합니다. 정상 개요, 알림과 토폴로지의 영향 경로 강조가 있는 장애 진행 상태, 오류 피크에서 로그와 트레이스를 열어 원인 배포를 찾는 상태의 세 가지 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Vesper
API 사용량 과금 콘솔
AI 및 개발자 도구 팀을 위한 API 사용량 과금 및 고객 인보이스 콘솔을 1440×900 데스크톱 뷰포트의 영어 인터페이스로 디자인하세요. 사용자는 구독 플랜과 실시간 API 사용량을 관리하고 이번 주기의 청구 금액과 인보이스 예외를 검토하며 상태와 사용량 임계값으로 고객이나 인보이스를 필터링하고 레코드를 열어 세부 항목, 결제 및 Webhook 타임라인, 이벤트 페이로드를 확인할 수 있어야 합니다. 결제 재시도, 할당량 조정, 인보이스 다운로드를 포함하세요. 일상 작업 공간(수익 및 사용량 추세, 고객 또는 인보이스 목록, 실시간 필터링), 예외 인보이스 상세(사용량 분해, 상태 타임라인, 복구 동작), 빠른 명령 팔레트의 세 가지 핵심 상태를 구현하세요. 오프라인에서 실행 가능한 `index.html`을 전달하고 1440×900, DPR=2로 `shots/desktop.png`, `shots/state-1.png`, `shots/state-2.png`를 캡처하세요.
작품과 프롬프트 살펴 보기 →
Tide
서핑 및 조석 예보 앱
서퍼를 위한 서핑 및 조석 예보 앱을 만드세요(390×844). 저장한 서핑 스폿 목록과 각 스폿의 오늘 및 향후 7일 파고, 주기, 풍향 및 풍속, 조석 곡선, 가장 좋은 시간대 추천을 제공합니다. 조석과 조건은 시간에 따라 바뀌므로 데이터 시각화가 핵심인 작품입니다. 타임라인을 드래그하면 파도, 바람, 조석이 함께 갱신되어야 합니다. 스폿 목록, 개별 스폿 상세, 타임라인을 특정 순간으로 드래그하는 상태를 디자인하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →OpenAI Codex에서 Oil UI Pro 사용하기
Codex로 10가지 전문 워크스페이스 원형(목록-상세, 캔버스-인스펙터, 타임라인, 노드 그래프 등)을 사용하거나 기존 프로덕션 코드베이스를 개선하거나 9/10을 목표로 여러 차례 블라인드 리뷰를 진행하고 싶다면 Oil UI Pro를 사용하세요.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Orvo 페이지 아홉 개처럼 같은 제품의 Codex 작품이 여러 개 있는 이유는 무엇인가요?
이 시리즈는 완전히 같은 브리프가 실제로 서로 다른 디자인 방향을 만들 수 있음을 보여 줍니다. 아홉 개의 Orvo 페이지는 모두 같은 제품 사실과 $0 / $24.99 / $34.99 가격을 공유하지만 Launch Garden, Tandem, Coastal Workshop, Open Creative Studio는 각각 다른 편집적·공간적 접근을 취합니다.
Codex가 데스크톱 웹페이지를 좁은 모바일 화면에 억지로 끼워 넣은 듯한 앱을 만들지 않게 하려면 어떻게 해야 하나요?
390×844 뷰포트를 지정하고 인터랙티브 index.html과 핵심 화면 3~5개를 나란히 보여 주는 screens.html을 모두 요청하세요. Oil UI는 엄지손가락이 닿는 범위, 화면당 하나의 집중된 작업, 네이티브 모바일 전환을 중심으로 디자인하도록 Codex를 안내합니다.
Codex의 다크 모드에서 Oil UI는 모든 요소가 네온처럼 되지 않게 어떻게 처리하나요?
Oil UI는 야간 운전(Yantu)이나 24/7 대기실(Nightwatch)에는 어두운 표면을 사용하는 등 물리적 맥락에 표면 밝기를 맞춥니다. 채도 높은 강조색은 활성 경로, 경고, 핵심 컨트롤에만 사용합니다.
Oil UI Pro를 설치하면 오픈소스 Skill을 제거해야 하나요?
네. Oil UI Pro에는 전체 오픈소스 방법과 고급 워크플로가 포함됩니다. Pro만 설치해 두면 Skill이 중복 실행되는 것을 막을 수 있습니다.