GPT 이미지 2.5 UI 프롬프트: 핸드오프 후에도 살아남는 화면 구축

유용한 UI 프롬프트는 제품 사양과 같습니다. 캔버스, 계층 구조, 실제 콘텐츠, 구성 요소, 상태, 반응 규칙 및 승인 확인의 이름을 지정합니다. 시각적 스타일은 이러한 결정 이후에 나옵니다. 이 순서는 GPT Image 2.5에 디자이너가 검토하고 개발자가 해석할 수 있는 모형을 생성하기에 충분한 구조를 제공합니다.

이미지3 홈페이지에서 시작하여 GPT 이미지 2.5 Flare 작업공간을 열고, 아래 메시지를 테스트하는 동안 GPT 이미지 2.5 모델 페이지을 근처에 두세요. Flare는 빠른 반복을 위한 실용적인 첫 번째 단계입니다. Sunburst는 이후의 충실도가 높은 검토 프레임을 위한 옵션입니다. 그 차이를 보편적인 벤치마크로 취급하기보다는 자신의 화면에 대해 두 가지를 모두 테스트하십시오.

위의 이미지와 짧은 비디오는 이 워크플로의 편집 삽화입니다. 이는 벤치마크 출력이나 배송된 제품의 스크린샷이 아닙니다.

빠른 답변: 화면 뒤의 시스템에 메시지를 표시합니다.

"현대적인 재무 대시보드 만들기"로 시작하지 마십시오. 그 요청으로 모델은 제품, 데이터, 탐색 및 현대의 정의를 발명하게 됩니다. 대신 화면 계약을 제공하세요.

제품: 소규모 소프트웨어 회사의 구독 분석.
사용자 작업: 월별 수익 감소 원인을 30초 이내에 찾아보세요.
캔버스: 데스크톱 웹 앱, 1440 x 1024, 콘텐츠 너비 1200.
계층 구조: 페이지 제목, 날짜 범위, 4개의 요약 지표, 추세 차트, 변경 표.
탐색: 개요가 선택된 왼쪽 레일; 아래의 청구, 고객 및 설정.
EXACT COPY: DATA 블록에 제공된 레이블과 값만 사용하십시오.
구성 요소: 미터법 카드, 분할된 날짜 제어, 선형 차트, 정렬 가능한 테이블, 상태 칩.
상태: 작은 상태 시트에 눈에 보이는 로딩 패턴과 빈 테이블 변형을 포함합니다.
스타일: 차분한 B2B 제품 UI, 중립적인 배경, 파란색 액센트, 간결한 간격.
피해야 할 사항: 고안된 로고, 가짜 평가, 장식용 유리 효과, 읽을 수 없는 작은 텍스트.
출력: 하나의 기본 화면과 좁은 구성 요소 상태 스트립.

이 프롬프트를 통해 중요한 결정을 검사할 수 있습니다. 차트가 페이지를 지배하는 경우 계층 구조를 변경할 수 있습니다. 빈 상태가 누락된 경우 직접 요청할 수 있습니다. 기분 전용 프롬프트를 사용하면 수리할 핸들이 줄어듭니다.

매력적인 UI 모형이 핸드오프에서 실패하는 이유

생성된 화면은 해당 동작을 정의하지 않은 상태로 유지하면서 완료된 것처럼 보일 수 있습니다. 탐색에는 데스크톱의 경우 5개, 모바일의 경우 7개 목적지가 포함될 수 있습니다. 카드에 성공 상태가 표시될 수 있지만 로드나 오류 사례는 표시되지 않습니다. 데이터 테이블은 누구도 제공하지 않은 그럴듯한 숫자를 사용할 수 있습니다. 이러한 격차는 구현 중에 제품 결정이 되며 해결하는 데 시간이 더 걸리고 비용이 더 많이 듭니다.

이미지도 평평한 인공물입니다. 구성 요소 이름, 토큰, 중단점, 의미 구조, 키보드 순서 또는 데이터 계약을 전달하지 않습니다. 시각적 제안으로 간주하십시오. 핸드오프 패킷은 픽셀에 보이지 않는 규칙을 명시해야 합니다.

모형을 사용하여 시각적 질문에 답하세요. 정보 순서가 적합한가요? 주요 동작이 분명합니까? 밀도가 높은 지역이 숨을 쉴 수 있습니까? 동작에 대한 서면 요구 사항 사용: 데이터가 로드되는 동안 무슨 일이 발생합니까? 768픽셀 아래에서 사라지는 열은 무엇입니까? 확인 텍스트는 어디에 표시되나요? 색상 없이도 접근 가능한 것은 무엇입니까?

화면 계약의 7개 필드

모든 프로덕션 지향 UI 프롬프트는 7개 필드를 다루어야 합니다. 한 페이지의 텍스트에 들어갈 수 있습니다.

콘텐츠를 별도의 블록으로 작성합니다. 모델이 필러를 발명할 수 있다면 어디에서 만들어졌는지 말해주세요. 모든 라벨이 통제된다면 모든 라벨을 인용하세요. 확인된 숫자를 제공하지 않는 한 차트의 품질을 유지하세요. 현실적으로 보이는 차트는 여전히 사실에 근거한 주장을 합니다.

콘텐츠 정책
홈, 여행, 저장됨, 프로필과 같은 탐색 라벨을 정확하게 사용하세요.
다음 페이지 제목을 정확하게 사용하세요. 다음 여행을 계획하세요.
다음 샘플 카드를 사용하세요: 해안 탈출, 도시 탐험가, 산길.
가격, 평점, 리뷰 수, 배지, 목적지 또는 홍보 문구를 추가하지 마세요.
텍스트 영역이 지정되지 않은 경우 텍스트를 만드는 대신 공백으로 두십시오.

다음 결정으로 Flare 또는 Sunburst를 선택하세요

모델 선택은 귀하가 내려야 하는 결정을 따라야 합니다. 화면 순서, 구성요소 크기, 밀도, 탐색, 반응형 구조 등 레이아웃이 이동하는 동안 Flare를 사용하세요. 대부분의 초기 초안은 폐기되어야 하기 때문에 더 빠른 반복이 중요합니다.

화면 계약이 확정된 후 Sunburst를 사용해 보세요. 자세한 검토 프레임이 도움이 될 것입니다. 여기에는 세련된 프레젠테이션 이미지, 미묘한 시각적 방향 또는 면밀한 검사가 필요한 어려운 편집이 포함될 수 있습니다. 시각적 충실도가 높다고 해서 불완전한 제품 요구 사항이 해결되는 것은 아닙니다. 모호한 Sunburst 프롬프트도 여전히 모호한 화면을 생성할 수 있습니다.

AI 이미지 생성기은 더 넓은 진입점을 제공하는 반면, GPT 이미지 2 프롬프트 라이브러리은 UI 작업 이외의 프롬프트 구조를 비교하려는 경우에 유용합니다. 다른 팀원이 생성 컨텍스트를 재현할 수 있도록 선택한 모델과 품질 설정을 핸드오프 메모에 보관하세요.

모바일 온보딩 프롬프트

온보딩에는 유한한 작업이 필요합니다. 이 예는 신규 사용자가 화면을 마케팅 캐러셀로 전환하지 않고도 달력을 연결하고 알림 시간을 선택하는 데 도움이 됩니다.

캘린더 도우미를 위한 3화면 모바일 온보딩 흐름을 만듭니다.

캔버스
- 나란히 표시된 390 x 844 크기의 iPhone과 유사한 아트보드 3개.
- 안전한 지역을 존중하세요. 하나의 일관된 8포인트 간격 시스템을 사용합니다.

화면 1: 연결
- 제목: "캘린더 연결"
- 보조선: "기존 이벤트를 변경하지 않고 오픈 시간을 확인하세요."
- 기본 버튼: "캘린더 연결"
- 보조 텍스트 링크: "지금은 아님"

화면 2: 선택
- 제목: "언제 알려드릴까요?"
- 세 가지 라디오 옵션: 10분 전, 30분 전, 1시간 전.
- 30분 전을 선택하세요.

화면 3: 준비됨
- 제목: "준비됐어요"
- 두 가지 이벤트가 포함된 간단한 샘플 안건을 보여줍니다.
- 기본 버튼: "내 하루 열기"

시스템 규칙
- 세 화면 모두에서 버튼 위치를 안정적으로 유지하세요.
- 하나의 일러스트레이션 스타일과 하나의 아이콘 패밀리를 사용하세요.
- 진행 상황을 1/3, 2/3, 3/3로 표시합니다.
- 사용후기, 가격, 그라데이션, 로고 또는 추가 설정 단계가 없습니다.

출력을 시퀀스로 검토합니다. 화면 2와 3에서는 뒤로 탐색이 가능해야 합니다. 선택한 알림 값에는 표시되는 선택 상태가 필요합니다. 최종 화면에서는 프롬프트에서 정의한 적이 없는 새로운 권한 요청을 소개해서는 안 됩니다.

SaaS 대시보드 프롬프트

대시보드 프롬프트에는 위젯 목록뿐만 아니라 질문도 필요합니다. 아래 사용자 작업에 따라 페이지 계층 구조가 결정됩니다.

지원 운영 책임자를 위한 데스크톱 SaaS 대시보드를 디자인합니다.
사용자는 오늘의 백로그를 발생시킨 티켓 카테고리를 식별해야 합니다.

레이아웃
- 240픽셀 왼쪽 탐색 레일이 있는 1440 x 1024 캔버스.
- 헤더: "지원 개요", 현지 날짜, 팀 선택기.
- 첫 번째 행: 시작됨, 대기 중, 오늘 해결됨, 중앙값 첫 번째 응답.
- 주요 지역 : 왼쪽은 시간별 잔고 차트, 오른쪽은 카테고리 테이블입니다.
- 하단 영역: 소유자 및 연령이 포함된 가장 오래된 공개 티켓 5개.

데이터
184를 엽니다. 대기 36; 오늘 해결됨 92; 첫 번째 응답 중앙값 18분
카테고리: 청구 71, 로그인 48, 39세대, 수출 26.
백분율이나 추세 주장을 추가하지 마십시오.

상호작용 신호
- 청구 행이 선택되고 시간별 차트가 필터링됩니다.
- 차트 위에 하나의 눈에 보이는 "필터 지우기" 컨트롤이 나타납니다.
- 정렬 표시는 백로그 열에만 나타납니다.

스타일
컴팩트한 작업 UI, 회백색 캔버스, 진한 잉크 텍스트, 파란색 선택 강조.
장식적인 일러스트레이션, 대형 카드, 유리 효과, 가짜 알림을 피하세요.

데이터 블록과 비교하여 모든 숫자를 확인하십시오. 그런 다음 선택한 Billing 행과 필터링된 차트를 색상에만 의존하지 않고 이해할 수 있는지 물어보세요. 관계가 모호한 경우 아이콘, 라벨 또는 테두리 처리를 추가하세요.

가격 페이지 프롬프트

시각적 강조가 자동으로 제안을 변경하는 경우 가격 책정 페이지가 실패합니다. 계획 이름, 가격, 포함 항목, 제외 항목 및 CTA 라벨을 제어합니다.

팀 메모 작성 앱에 대한 반응형 가격 페이지를 만듭니다.

계획
무료: $0, 3개 프로젝트, 1GB 스토리지, 커뮤니티 지원. CTA: "무료로 시작하세요".
팀: 월별 회원당 $12, 무제한 프로젝트, 50GB 저장 공간, 이메일 지원.
CTA: "팀 평가판 시작". 이 계획을 "가장 많이 선택됨"으로 표시하세요.
비즈니스: 회원당 월 $28, SSO, 감사 로그, 우선 지원.
CTA: "영업팀에 문의하세요."

데스크탑
- 1440픽셀 캔버스, 3개의 동일한 계획 열, 팀 중심.
- 월별 청구서를 먼 바닥글이 아닌 가격 옆에 배치하세요.

모바일
- 390픽셀 캔버스, 무료, 팀, 비즈니스 스택 플랜.
- 수평 캐러셀 없이 모든 가격과 CTA를 눈에 띄게 유지하세요.

규칙
- 할인, 연간 가격, 보증, 고객 수 또는 기능을 만들어내지 마십시오.
- 포함된 항목에만 체크 표시를 사용하세요. 제외 항목을 일반 텍스트로 작성합니다.
- 가격을 높이지 않고도 팀에 더 강한 경계 대비를 제공합니다.

생성 후 계획을 한 줄씩 비교하십시오. 제외 항목이 누락되었거나 할인을 조작한 경우 페이지가 신뢰할 만한 것처럼 보이더라도 제품 오류입니다. 생성된 타이포그래피를 프로덕션 아트워크로 처리하는 대신 정확한 가격 텍스트를 코드로 다시 작성하세요.

비어 있음, 로드 중 및 오류 상태 프롬프트

참조 화면에 안정적인 구성 요소 시스템이 포함된 후 상태를 생성합니다. 레이아웃이 상태 간에 이동하지 않도록 동일한 컨테이너 크기를 재사용합니다.

승인된 프로젝트 목록 화면을 시각적 참조로 사용하여 상태 시트를 만듭니다.

동일한 720 x 420 콘텐츠 패널의 네 가지 버전을 표시합니다.
1. DEFAULT: 이름, 소유자, 상태 및 업데이트 날짜가 포함된 세 개의 프로젝트 행.
2. 로딩: 가짜 단어나 숫자가 없는 세 개의 중립 뼈대 행.
3. EMPTY: 제목 "아직 프로젝트 없음", 한 문장, "프로젝트 만들기" 버튼.
4. 오류: 제목 "프로젝트를 로드할 수 없습니다.", 메시지 "연결을 확인하고 다시 시도하십시오.",
   기본 버튼 "재시도", 보조 텍스트 링크 "상태 보기".

보존하다
패널 크기, 제목 위치, 열 정렬, 배경, 테두리, 반경,
문자 크기, 간격 및 동작 배치.

접근성 단서
색상만으로 오류나 로드 상태를 전달하지 마세요.
재시도 및 프로젝트 생성 시 포커스 윤곽선을 계속 표시합니다.
아이콘 안에 설명만 넣지 마세요.

위 그림은 이 가이드에 대해 작성된 QA 참조입니다. 생산 구성 요소 라이브러리가 아닌 검사할 범주를 표시합니다.

반응형 모바일 및 데스크톱 프롬프트

서로 관련되지 않은 두 개의 아트보드는 반응형 동작을 정의하지 않습니다. 먼저 불변성을 명시한 다음 허용되는 변환을 나열하십시오.

동일한 여행 계획 제품에 대해 페어링된 모바일 및 데스크톱 화면을 만듭니다.

불변성
- 동일 콘텐츠 순서: 검색, 카테고리 필터, 추천 여행, 남은 여행.
- 두 캔버스 모두에 동일한 카드 제목과 대상이 있습니다.
- 동일한 파란색 액센트, 이미지 처리, 유형군 및 카드 반경.
- 검색은 두 너비 모두에서 기본 작업입니다.

390픽셀의 모바일
- 홈, 검색, 저장됨, 프로필을 포함한 하단 탐색.
- 16픽셀 페이지 패딩이 포함된 1열 여행 카드입니다.
- 카테고리 칩은 한 줄에서 가로로 스크롤됩니다.

1440픽셀의 데스크탑
- 여행, 탐색, 저장됨, 프로필을 통한 상위 탐색.
- 1200픽셀 콘텐츠 영역 내의 3열 여행 그리드입니다.
- 검색 필드는 헤더에 위치합니다. 카테고리 칩은 그리드 위에 위치합니다.

하지 마십시오
카드 사본을 변경하고, 목적지를 추가하고, 검색 동작을 숨기거나, 별도의 시각적 테마를 만드세요.

이 짝을 이루는 프롬프트는 의도적으로 차이를 만듭니다. 핸드오프 중에 각 변환을 규칙으로 전환합니다. 하단 탐색은 데스크톱 중단점에서 상단 탐색이 됩니다. 카드 목록이 1열에서 3열로 변경됩니다. 검색 컨트롤은 이동하지만 동일한 작업과 레이블을 유지합니다.

설정 및 권한 프롬프트

설정 페이지에는 모형이 시스템 동작을 이해하는지 여부가 표시됩니다. 결과에 따라 제어를 그룹화하고 실수로 실행되는 파괴적인 작업을 어렵게 만듭니다.

공유 작업 공간에 대한 데스크탑 설정 페이지를 디자인합니다.

섹션
프로필: 이름, 역할, 프로필 이미지 작업.
알림: 이메일 요약 선택, 제품 업데이트 스위치, 언급 알림 스위치.
보안: 활성 세션 링크, 비밀번호 변경 버튼, 2단계 상태.
작업 공간 위험 구역: 작업 공간 나가기 버튼.

행동 단서
- 편집 후 프로필 옆에 저장된 상태를 표시합니다.
- 필드가 변경되지 않은 경우 비활성화된 저장 버튼을 표시합니다.
- 텍스트 라벨을 사용하여 스위치에 뚜렷한 켜짐 및 꺼짐 상태를 제공합니다.
- 설명 문구와 함께 별도의 위험 구역에 "작업 공간 나가기"를 배치하십시오.
- 동일한 메인 화면에 파괴적인 확인 모달을 표시하지 않습니다.

레이아웃
1440 x 1024, 240픽셀 왼쪽 레일, 720픽셀 설정 열, 넉넉한 섹션 간격.
마케팅 랜딩페이지가 아닌 일반 제품 UI를 사용하세요.

추측하지 않고 각 컨트롤의 기능을 설명하도록 검토자에게 요청하세요. 스위치에 레이블이 없거나, 저장된 상태에 지속 시간이 없거나, 위험 작업이 일반 탐색 링크처럼 보이는 경우 시각적인 부분을 수정해야 하며 요구 사항에 더 자세한 내용이 필요합니다.

화면을 잃지 않고 한 지역을 수리하세요

유용한 편집 프롬프트는 하나의 결함, 하나의 영역, 교체 및 불변 항목을 지정합니다. 색상 재설계 및 레이아웃 변경과 타이포그래피 수정을 혼합하지 마십시오.

데스크톱 대시보드의 헤더만 편집하세요.
페이지 제목 "지원 개요"를 정확히 "지원 개요"로 바꾸세요.
제목을 한 줄로 유지하고 현재 위치, 활자 크기, 두께 및 색상을 유지합니다.
날짜, 팀 선택기, 탐색 레일, 측정항목, 차트, 표, 간격을 유지합니다.
배경, 테두리 및 기타 눈에 보이는 모든 단어.
새로운 라벨이나 아이콘을 추가하지 마세요.

편집할 때마다 전체 출력을 검사합니다. 모델이 두 가지 측정항목도 변경한 경우 수정된 제목은 도움이 되지 않습니다. 부수적인 변경사항이 나타나면 가장 깨끗한 이전 버전으로 돌아가서 편집 요청 범위를 더 좁힙니다. 이후 화면의 시각적 일관성을 위해 브랜드 스타일 참조 워크플로우에서는 ID, 팔레트, 조명 및 구성 규칙을 고정된 상태로 유지하는 방법을 설명합니다. 조밀한 시각적 계층 구조의 경우 인포그래픽 프롬프트 워크플로우을 사용하세요.

개발자 핸드오프 패킷 빌드

최종 모형은 전체 패킷이 아닌 핸드오프 패킷의 한 항목입니다. 승인된 화면을 첨부하고 픽셀이 전달할 수 없는 결정을 기록하세요.

1. 각 화면과 해당 사용자 작업의 이름을 지정합니다.
2. 승인된 정확한 사본과 샘플 데이터를 나열하십시오. 모든 자리 표시자를 표시하십시오.
3. 반복되는 시각적 부분을 제안된 구성 요소에 매핑합니다.
4. 간격, 유형, 색상, 반경 및 고도 토큰을 구현 값으로 기록합니다.
5. 로드, 비어 있음, 오류, 비활성화, 성공 및 권한 상태를 정의합니다.
6. 중단점 규칙을 불변 및 변환으로 지정합니다.
7. 키보드, 초점, 레이블, 대비, 대상 크기, 움직임 감소 및 오류 복구 검사를 추가합니다.
8. 코드가 자동으로 답변하도록 하는 대신 해결되지 않은 제품 질문을 소유자에게 나열하십시오.

개발자는 불가능한 기하학적 구조, 접근하기 어려운 상호 작용 및 플랫폼 규칙을 자유롭게 수정할 수 있어야 합니다. 모형은 의도를 확립합니다. 작동 중인 소프트웨어를 재정의하지 않습니다.

구현 전 화면 감사

4개의 리뷰 패스를 사용하세요. 먼저, 보이는 모든 단어와 숫자를 승인된 콘텐츠 블록과 비교하세요. 둘째, 기본 사용자 작업을 추적하고 계층 구조와 작업이 이를 지원하는지 확인합니다. 셋째, 상태와 반응하는 동작을 검사합니다. 넷째, 이미지로 표현할 수 없는 세부사항은 핸드오프 패킷을 확인하세요.

전체 해상도에서는 철자법, 일관성 없는 간격, 왜곡된 아이콘, 우발적인 중복, 조작된 데이터를 찾아보세요. 390픽셀에서 제목, 기본 작업 및 상태 메시지를 계속 읽을 수 있는지 확인하세요. 프레젠테이션 크기에서만 작동하는 디자인은 구현할 준비가 되지 않았습니다.

인터페이스가 접근 가능하거나 사용 가능하거나 기술적으로 실현 가능하다는 증거로 모형을 사용하지 마십시오. 이러한 주장에는 프로토타입, 코드, 사용자 또는 자동화된 테스트가 필요합니다. 생성된 UI는 토론할 수 있을 만큼 제품 결정을 눈에 띄게 만드는 빠른 제안으로서 가장 강력합니다.

재사용 가능한 최종 프롬프트

아래 템플릿은 시각적 장식에 앞서 제품 요구 사항을 유지합니다. 적용되지 않는 필드를 제거하되 형용사로 바꾸지는 마십시오.

[제품]에 대한 [모바일/데스크톱/반응형 쌍] UI를 만듭니다.

사용자 작업
[사용자가 완료해야 하는 작업 중 하나입니다.]

캔버스
[정확한 크기, 콘텐츠 너비, 안전 영역, 그리드 및 외부 패딩.]

정보 순서
1. [첫 번째 지역 및 목적]
2. [제2지역 및 그 목적]
3. [제3지역 및 그 목적]

정확한 내용
[승인된 탐색, 제목, 라벨, 값, 메시지 및 CTA 사본.]
이 블록 외부에 텍스트나 데이터를 작성하지 마십시오.

구성품
[명명된 컨트롤, 카드, 테이블, 탐색, 차트, 양식 및 반복 패턴.]

상태
[기본값, 마우스 오버, 포커스, 로드 중, 비어 있음, 오류, 비활성화됨, 성공, 권한]

대응 규칙
보존: [내용, 순서, 동작 및 시각 시스템 불변성].
변환: [각 너비에서 허용되는 탐색, 열, 줄 바꿈, 숨기기 또는 재정렬].

시각적 방향
[특정 제품 스타일, 유형 역할, 팔레트 역할, 밀도, 테두리 및 이미지.]

품질 확인
허위로 만든 로고, 데이터, 기능, 사용후기, 배지, 워터마크, 읽을 수 없는 마이크로카피,
일관되지 않은 구성 요소 스타일 또는 색상 전용 상태 신호.

GPT 이미지 2.5 Flare 작업공간에서 템플릿을 실행하세요. 다른 이미지 워크플로를 비교하려면 이미지3 홈페이지으로 돌아가고, GPT 이미지 2.5 모델 페이지를 사용하여 차세대 경로를 선택하세요. 당첨 메시지, 수락 이미지, 수리 내역, 서면 인계 규칙을 함께 보관하세요. 이 패킷은 생성된 화면을 검토 가능한 제품 결정으로 바꾸는 것입니다.

자주 묻는 질문

UI 모형에는 어떤 GPT Image 2.5 모델을 사용해야 합니까?

레이아웃과 콘텐츠가 계속 변경되는 경우 Flare로 시작하세요. 충실도가 높은 검토 프레임으로 결정이 변경될 수 있는 경우 Sunburst를 테스트하세요. 결과는 실제 작업 부하에 따라 달라지므로 모델과 설정을 기록해 두십시오.

GPT Image 2.5는 프로덕션에 바로 사용할 수 있는 UI 코드를 생성할 수 있나요?

아니요. 출력은 구성 요소 트리나 동작 사양이 아닌 시각적 참조입니다. 코드로 인터페이스를 구축하고 서면 승인 기준에 대해 테스트합니다.

UI 모형에서 텍스트를 정확하게 유지하려면 어떻게 해야 하나요?

정확한 사본을 제공하고, 화면당 텍스트 양을 줄이고, 모든 라벨과 번호를 검사하세요. 이미지의 나머지 부분을 유지하면서 한 번에 하나의 텍스트 영역을 복구합니다.

모바일 및 데스크톱 버전에 대한 메시지를 어떻게 표시해야 하나요?

두 캔버스 너비를 모두 지정하십시오. 중단점에 걸쳐 변경될 수 있는 탐색, 그리드 및 래핑 규칙에서 고정 콘텐츠와 작업을 분리하세요.

하나의 이미지에 모든 앱 상태를 생성해야 하나요?

먼저 하나의 참조 화면을 안정화하십시오. 그런 다음 크기, 유형, 간격, 색상 및 컨트롤을 재사용하는 컴팩트 상태 시트를 요청하세요.

세련된 모형이 접근성을 입증하나요?

아니요. 구현된 인터페이스에서 의미 체계, 키보드 순서, 포커스, 레이블, 대비, 대상 크기, 동작 기본 설정 및 오류 복구를 확인하세요.