Everygen
AI UI 이미지는 위계, 간격과 스타일을 논의하는 자료입니다. 작동하는 버튼이나 실제 데이터에 맞는 레이아웃을 증명하지는 않습니다. 화면 하나와 사용자 작업 하나를 정하고 AI 이미지 생성기로 정지 시안을 탐색하세요. 가상의 예약 화면 예시로 유용한 배치를 찾은 뒤 실제 컴포넌트로 구현하는 과정을 나누겠습니다.
작업 하나와 상태 하나를 고르세요
가상의 예약 화면이라면 가능한 시간 하나를 선택하고 예약 시간을 확인하는 작업을 정할 수 있습니다. 서비스, 날짜, 시간 목록과 가격, 주요 행동에 필요한 정보를 적으세요. 예약 가능한 날짜에 시간이 선택된 상태처럼 한 상태를 고르세요. 대시보드와 가입, 결제를 한 그림에 섞으면 어떤 작업도 명확히 설명하기 어렵습니다.
내용 영역을 명시하세요
예시 지시: '정지 모바일 예약 UI 시안. 명확한 화면 제목, 상단 서비스 요약, 날짜 선택, 작은 시간 목록, 선택 시간 요약과 주요 예약 행동 하나. 넉넉한 간격, 읽히는 대비, 차분한 강조색과 일정한 둥근 조절 요소. 짧은 임시 라벨, 정면 화면, 기기 목업 없음.' 내 작업에 맞춰 영역을 바꾸고 장식보다 의사결정에 필요한 공간을 우선하세요.
작은 시각 규칙을 기록하세요
글꼴의 성격, 간격, 표면 대비, 모서리와 강조색의 역할을 정하세요. 다른 화면을 만들면 같은 규칙을 사용하고 선택과 미선택 상태가 구별되는지 보세요. 생성된 숫자와 라벨은 최종 설명 전에 수정하세요. 다른 앱과 비슷한 그림이 완성된 디자인 시스템이나 적합한 동작을 의미하지는 않습니다.
그림에서 동작을 추측하지 마세요
읽는 순서와 주요 행동을 찾아보세요. 이름이 길거나 예약 가능한 시간이 없을 때도 이해될지 질문할 수 있지만 스크린샷은 그 상태를 증명하지 않습니다. 키보드 포커스와 터치 크기, 화면 읽기 라벨, 오류와 반응형 동작은 실제 구현에서 검증해야 합니다.
실제 요소로 구현하세요
선택한 위계를 내용 구조, 재사용 조절 요소와 반응형 규칙으로 옮기세요. 실제 데이터로 빈 상태, 로딩, 검증과 성공 상태를 만들고 글자는 글자로, 버튼은 버튼으로 구현하세요. 그림 전체를 인터페이스처럼 사용하지 마세요. 휴대폰과 데스크톱에서 검토하고 선택한 이유와 원래 목적을 함께 기록하세요.
UI 시안 전달 전 확인
정지 시안임을 표시하고 해결할 사용자 작업을 설명하세요. 임시 문구, 확정된 디자인과 구현이 필요한 동작을 나누어 기록하세요. 검토자가 버튼이 작동하는지 추측하게 하지 마세요. 제품 요구 사항과 장식을 별도로 보관하세요.
구현 뒤 실제 작업을 보여 줄 때는 제품 화면 녹화 안내를 사용하세요. 주변 브랜드 자료는 브랜드 키트 작업을 참고하세요. 각 자료는 전달 목적과 검토 기준이 다릅니다.
