결과물 눈 훈련
같은 기능, 다른 화면 — 고를 수 있어야 한다
첫 화면(히어로) 중 어느 쪽이 더 신뢰 가나요?
같은 ‘일정 관리 앱’ 소개라도, 배치·여백·버튼 수만 달라도 느낌이 갈립니다.
AI 기본 레이아웃
- 제목·부제·배지·버튼이 한 화면에 다 들어감
- 카드마다 아이콘·그라데이션 남발
- 무엇을 누르면 되는지 한눈에 안 보임
한 메시지 · 한 CTA
- 한 줄 약속만 크게
- 보조 설명은 짧게
- 주요 행동 버튼 하나 (가입/시작)
에이전트에게 이렇게
히어로는 한 문장 약속 + 보조 한 줄 + 주요 CTA 1개만. 그라데이션 카드 그리드·배지 나열 금지. 여백을 넉넉히.
대시보드 중 어느 쪽이 더 ‘쓸 수 있을 것 같나요’?
숫자 카드는 같아도, 밀도·위계·색 사용이 다르면 전문성이 달라 보입니다.
정보 폭격
- KPI 카드 8개 이상 한 줄
- 색이 의미 없이 다채
- 어디부터 읽어야 할지 모름
위계 있는 요약
- 위: 핵심 숫자 3~4개
- 아래: 추이 차트 또는 목록 하나
- 강조색은 상승/위험 등 의미에만
에이전트에게 이렇게
대시보드는 상단 KPI 최대 4개, 본문은 차트 또는 테이블 중 하나만 크게. 장식용 색 금지, 상태색만.
가입/입력 폼 중 어느 쪽이 더 완주하기 쉽나요?
필드를 줄이고 단계를 나누는 쪽이 바이브 앱 전환율에 유리한 경우가 많습니다.
한 장에 전부
- 스크롤이 길어짐
- 에러 위치가 흩어짐
- 모바일에서 포기하기 쉬움
단계·필수만
- 1단계: 이메일/이름 등 최소
- 라벨 위·힌트·에러가 입력 바로 아래
- 선택 항목은 나중 단계
에이전트에게 이렇게
폼은 한 화면에 필수 필드 최대 4개. 라벨 위, 에러는 필드 바로 아래. 선택 항목은 다음 단계로.
메뉴 중 어느 쪽이 더 찾기 쉽나요?
항목이 많을수록 ‘전부 넣기’보다 그룹·우선순위가 중요합니다.
메뉴 과밀
- 같은 가중치로 나열
- 모바일에서 햄버거 속 미로
- 현재 위치 표시 없음
핵심 5개 이하
- 주 탐색 4~5개
- 학습/시작 등 CTA는 오른쪽
- 현재 페이지 강조
에이전트에게 이렇게
헤더 주 메뉴는 5개 이하. 우측에는 로그인 또는 주요 CTA 하나. 현재 경로 시각 강조.
빈 목록 화면 중 어느 쪽이 다음 행동을 만드나요?
데이터 없을 때도 ‘화면’입니다. 안내 + 다음 행동 한 가지가 핵심입니다.
빈 박스만
- 다음 행동이 없음
- 영어 기본 문구
- 사용자가 멈춤
안내 + 첫 행동
- 왜 비었는지 한 줄
- 버튼 하나로 시작
- 예시/샘플 링크 선택
에이전트에게 이렇게
빈 상태는 한글 한 줄 설명 + 주요 행동 버튼 1개. No data 영어 기본 문구 금지.
같은 기능, 톤만 다릅니다. 서비스 성격에 맞는 쪽은?
‘예쁜지’보다 ‘이 서비스다운지’가 중요합니다. 고른 톤을 DESIGN.md로 고정하세요.
네온·다크 게임 감성
- 젊고 강한 인상
- 공공·행정 앱엔 부적합할 수 있음
- 장식 과하면 피로
모노톤 + 강조 1색
- 루프공방·업무 도구에 잘 맞음
- 가독성 우선
- 에이전트가 유지하기 쉬움
에이전트에게 이렇게
모노톤 회색 스케일 + primary 강조색 1개. 네온 글로우·과한 그라데이션 금지. Pretendard 계열.