GPT Image 2 실습: 사양을 정리한 프롬프트로 앱/웹 UI 디자인 만들기: 모바일, SaaS, 랜딩 페이지

Codex 교재이며 H3Max의 실제 측정 결과가 아닙니다. 표지의 스마트폰은 April 23・1/3 완료 버전입니다. 주 예시는 September 29・0/3입니다. 데스크톱 문안도 제시된 문구의 문자 그대로의 결과가 아니며, free는 가상의 Today 표기입니다.

정적인 UI 이미지를 검증하려면 이미지 외부에 기대값이 필요합니다. '보기 좋다'라는 평가와 '지정된 내용을 충족한다'라는 평가를 분리합니다.

여기서는 Today라는 가상의 태스크 앱을 사용하여 모바일, SaaS 대시보드, 랜딩 페이지를 각각 완전한 프롬프트로 만듭니다. 자동 테스트나 코드 생성이 아니라, 저장된 이미지를 육안으로 확인하는 절차입니다.

모바일의 고정 날짜는 Tuesday, 29 September이고, 선택일은 Tue 29입니다. 다음 세 가지 태스크는 모두 미완료로 합니다.

Read 10 pages — Personal · 20 min
Walk for 20 minutes — Health · 20 min
Plan tomorrow — Planning · 10 min

진행 기대값은 0 of 3 complete와 0%입니다. 세 개의 원형 체크는 비어 있고, 링에 완료 색상의 구간이 없습니다. 내비게이션은 Today, Projects, Calendar, Profile의 네 항목으로 구성되며, Today를 선택합니다.

Today의 세 화면 사양과 확인 방법을 참조할 때도 이미지 전시 변종을 이 기대값에 섞지 않도록 합니다. 모두 예시 데이터이며 실제 이용 기록이 아닙니다.

Codex의 정적 설계 교재입니다. 다른 완료 상태와 데스크톱 문안을 포함합니다. 치수는 설계 제안이며, 구현에서 추출된 값이나 편집 가능한 부품이 아닙니다.

명시된 UI 사양으로부터 이미지 후보를 만드는 화면에서 Text to Image, GPT Image 2, 9:16, 1K를 선택합니다. 2026년 10월 2일 확인에서는 9:16, 16:9, 1K/2K/4K와 JPEG 출력이 보입니다. JPEG 외의 것을 선택할 수 있다고 가정하지 않고, 전송 전 크레딧도 확인합니다.

Create one complete static mobile UI concept for the fictional Today app.
Use a flat 9:16 portrait canvas. No device frame or surrounding scene.
Cream background, charcoal text, white task cards, deep-teal accents,
...

Codex에 의한 주 예시 교재로, H3Max의 실제 측정 결과가 아닙니다. 여기가 9월 29일・0/3입니다. 조작부는 이미지이며, WebP 교재는 다른 출력 형식을 증명하지 않습니다.

제목, 진행 상황, 날짜, 태스크, 주 조작, 내비게이션 순서로 읽을 수 있는지 확인합니다. Add task의 강조와 섹션 선택의 강조는 별개입니다.

16:9로 변경합니다. 상세한 표나 그래프를 요구한다면, 표시해야 할 값도 미리 제공합니다.

Create one static 16:9 desktop SaaS dashboard for fictional Today.
Use cream surfaces, charcoal text, white panels, and deep-teal accents.
Sidebar: Overview, Projects, Calendar, Files. Select Overview.
...

모든 제로 값은 표시용 가상 설정입니다. 과거의 실적도 미래 예측도 아닙니다. 행 수와 개요 3/0/3, 그래프의 레이블과 값을 대조합니다.

Create one static 16:9 desktop landing page for the fictional Today app.
Use warm ivory surfaces, charcoal text, deep-teal accents,
and restrained readable typography.
...

같은 색 배합을 사용하더라도 정보 구조까지 동일하게 할 필요는 없습니다. 작은 글자를 확인하기 위해 각 화면을 별도로 출력하고, 여러 화면이 포함된 커버만으로 판단하지 마십시오.

문자열, 요소 수, 상태 관계, 배치를 각각 봅니다. 세 개의 빈 체크와 제로 진행 상황이 일치해야 하고, 날짜와 선택도 일치해야 합니다. 한 건 완료를 채택한다면 완료 태스크가 하나 필요하지만, 이번 주 예시는 아닙니다.

두 번째 레이블만 변경할 경우, Image to Image로 전환하거나 기준 이미지를 첨부하여 변경할 부분을 한정적으로 요청하는 진입점에서 저장된 후보를 첨부합니다.

Correct only the second task label to Walk for 20 minutes.
Preserve Health · 20 min, the other copy, three empty checkboxes,
0 of 3 complete, 0%, the empty progress ring, Tuesday 29 selection,
...

제한 지시는 영역 고정의 보장이 아닙니다. 전체를 비교하여 회귀가 있으면 기준으로 되돌립니다. 문자의 문제는 외부의 실제 텍스트로, 구조의 문제는 네이티브 요소의 재구축으로 전환합니다. 해상도 증가만으로는 잘못된 상태가 고쳐지지 않습니다.

선택한 JPEG에 프롬프트, 문안, 상태 및 미해결 사항을 첨부합니다. 이미지 로딩만으로는 레이어, 컴포넌트, 코드가 되지 않습니다. 구현에 사용되는 폰트의 허가, 반응형(responsive), 키보드 조작, 대비(contrast), 실제 인터랙션은 별도로 검증해야 합니다.