UI Exploration · feno-canvas
FENO AI Quota — 카드 UI 시안 2종 비교
오너 핵심 질의(
“어디에 얼마나 남았고, 지금 써도 되나”
)를 188px 좁은 모바일 컬럼에서도 줄바꿈 붕괴 없이 0.5초 내에 판독하도록 설계된 두 가지 접근법을 비교합니다.
1. 모바일 뷰포트 검증
360px Frame (카드 너비 ~336px)
Direction A
Compact HUD / Runway Pill — 수평 런웨이 바와 즉시 상태 태그로 0.5초 판독 최적화
원형 게이지를 생략하여 수직 높이를 대폭 줄이고 좁은 화면에서도 텍스트 깨짐 없는 즉시 가독성 확보.
C
Claude 1
정상
7.0%
6일 19h 후 리셋
주간 한도
+0.6%p 여유
5시간 즉시 한도
— (미측정)
X
Codex 1
Spark 차단
15.0%
5일 16h 후 리셋
Main 주간
-7.2%p 여유
🚨 Spark 주간
100% (차단)
Spark 5h
0% (0.0% 기준)
K
Kimi 1
정상
23.9%
17일 15h 후 리셋
월간 한도
-16.1%p 여유
5시간 한도
0% (8.1% 기준)
D
DeepSeek
주의
$9.77
잔액 차감형
이번 달 사용 $6.19
오늘 사용 $0.00
Direction B
Split Arc Matrix / Gauge & Lane Stack — 아크 미터와 서브레인 카드 스택 분리
HUD형보다 수직 높이를 조금 더 차지하지만, 각 레인별 시각적 게이지 볼륨감과 서브레인 독립성 제공.
X
Codex 1
Spark 한도소진
15%
주간
5일 16h
후 리셋
Main 주간
15% (-7.2%p)
🚨 Spark 주간 100%
사용불가
Spark 5h
0%
C
Claude 1
정상
7.0%
주간
6일 19h
후 리셋
주간 한도
7% (+0.6%p)
5시간 세션
— (미측정)
2. 데스크톱 뷰포트 검증
1440px Multi-Column Grid
Direction A — Desktop 4-Column Grid
C
Claude 1
정상
7.0%
6일 19h 후 리셋
주간 한도
+0.6%p 여유
5시간 즉시 한도
— (미측정)
X
Codex 1
Spark 차단
15.0%
5일 16h 후 리셋
Main 주간
-7.2%p 여유
🚨 Spark 주간
100% (차단)
Spark 5h
0%
K
Kimi 1
정상
23.9%
17일 15h 후 리셋
월간 한도
-16.1%p 여유
5시간 한도
0%
D
DeepSeek
주의
$9.77
잔액 차감형
이번 달 $6.19
오늘 $0.00
Direction B — Desktop 3-Column Grid
X
Codex 1
Spark 한도소진
15%
주간
5일 16h
후 리셋
Main 주간
15% (-7.2%p)
🚨 Spark 주간 100%
사용불가
Spark 5h
0%
C
Claude 1
정상
7.0%
주간
6일 19h
후 리셋
주간 한도
7% (+0.6%p)
5시간 세션
— (미측정)
K
Kimi 1
정상
23.9%
월간
17일 15h
후 리셋
월간 한도
23.9% (-16.1%p)
5시간 세션
0%