화면 시안이 화면마다 어긋나는 이유

무엇이 어려운가

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

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

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

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

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

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

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

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

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

직접 쓸 때의 체크리스트

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