UI 디자인 프롬프트 — 화면 시안이 화면마다 어긋나는 이유

무엇이 어려운가

브랜드 색과 글꼴을 줬는데도 화면 세 장을 시키면 세 장이 서로 다릅니다. 색·글꼴·모서리 라운딩은 지켜졌는데 간격과 글자 크기 단계가 화면마다 새로 정해지기 때문입니다. 같은 브랜드인데 화면끼리 어긋나는 것은 대개 이 빈칸에서 옵니다.

또 하나 빠지기 쉬운 것이 화면의 나머지 상태입니다. 잘 된 화면 하나만 그려 달라고 하면 로딩 중·데이터 없음·오류의 세 상태가 설계에서 사라집니다. 실제 제품에서 사용자가 가장 자주 만나는 화면이 그 셋인데도요.

요청에 무엇을 더해야 하는가

1. 토큰 표를 첫 화면에서 확정하게 한다

간격 단위와 타이포 스케일을 첫 화면에서 값으로 확정해 표로 적고, 이후 화면은 그 표의 이름만 인용하라고 요청합니다. 값을 모르면 널리 쓰이는 기준(8pt 배수 간격 등)을 추천받으면 됩니다. 단, 실제 제품의 색상 코드나 로고처럼 나만 아는 값은 추천받지 않습니다. 그건 추천이 아니라 지어내기입니다.

2. 세 가지 상태를 요구 항목으로 박는다

• 로딩 — 무엇이 자리를 잡고 무엇이 기다리는가
• 빈 상태 — 데이터가 없을 때 무엇을 보여 주고 무엇을 하게 하는가
• 오류 — 무엇이 잘못됐고 사용자가 다음에 무엇을 하는가

3. 접근성을 요구 항목으로 지정한다

키보드만으로 조작 가능한지, 스크린리더가 읽을 라벨이 있는지를 요구 항목으로 적습니다. 공공·교육 대상 서비스라면 한국형 웹 콘텐츠 접근성 지침(KWCAG) 같은 기준의 이름을 지목하고 적용 여부를 확인하게 합니다. 기준의 내용을 AI가 단정하게 두지 않는 것이 안전합니다.

완성 지시문의 구성

• 화면 목록 — 어느 화면을 만드는지
• 화면별 구성요소
• 상태별 동작 — 로딩·빈 상태·오류를 화면마다
• 디자인 토큰 — 색·타이포·간격. 첫 화면에서 표로 확정하고 이후 화면은 이름만 인용합니다

화면 구조·상태·토큰은 대상 AI가 세우고, 에셋·이미지·컷신은 생성 엔진이 만드는 것이라 이 지시문은 둘을 함께 갖습니다. 렌더 지시 부분은 다른 미디어 프롬프트와 같은 규칙을 따릅니다. 도구 이름과 플래그 없이 값만 적습니다.

추천할 것과 물어야 할 것의 경계

간격 단위와 타이포 스케일에는 널리 쓰이는 기준이 있으므로 묻지 않고 '[추천: 값 — 이 화면에 그 값이 맞는 이유]' 형태로 냅니다. 근거는 이 요청의 화면 크기와 이용 환경을 보고 새로 씁니다. 반대로 실제 제품의 색상 코드나 로고 파일처럼 사용자만 아는 것은 추천하지 않고 [입력 필요]로 남깁니다. 추천하면 사실을 지어내는 것입니다.

디자인 언어(템플릿)를 골랐으면 면·그림자·대비·모서리·질감을 그 언어대로 일관되게 적용하되, 브랜드의 색·글꼴·라운딩과 충돌하면 브랜드가 이깁니다. 브랜드는 사용자의 사실이고 언어는 연출 선택이기 때문입니다. 고르지 않았으면 지어내지 말고 이 제품에 맞는 언어 하나를 근거와 함께 추천합니다. '[추천: 다크 녹턴 — 야간 이용이 많고 지표를 오래 들여다보는 화면이라 눈부심을 줄인다]'처럼.

직접 쓸 때의 체크리스트

1. 1브랜드에서 확정된 것(색·글꼴·라운딩)과 정하지 않은 것을 갈라 적었는가
2. 2간격·타이포 토큰 표를 요구했는가
3. 3로딩·빈 상태·오류를 화면마다 요구했는가
4. 4키보드 조작과 스크린리더 라벨을 요구했는가
5. 5디자인 언어를 골랐는가 — 안 골랐다면 근거와 함께 추천받고, 브랜드 값과 충돌하면 브랜드가 이기게 했는가