이 문서는 「브루니 키우기: 바랜 섬」의 화면을 만드는 사람이 같은 판단을 내리도록 하는 기준입니다. 색과 크기는 숫자로, 화면 배치는 「주 버튼 하나 · 핵심 정보 · 참고 그림」으로, 온보딩과 과금 화면은 단계와 금지 목록으로 적었습니다.
값은 모두 UI 바이블(uiux-bible.md)에서 왔고, 표는 생성기가 바이블에서 직접 읽어 만듭니다. 이 문서가 새로 정한 것은 온보딩 문구 개정(06장)·튜토리얼 뒤 단계·안내 미션 순서·다크패턴 금지 목록의 화면 적용(08장)·접근성 세부(09장)입니다.
용어는 바뀐 것으로 씁니다주인 지적(2026-10-14 「다음판이나 이런 것도 … 별로인 거 같으면 다 바꿔야 해」)에 따라 이 문서의 화면 이름과 문구는 UI 바이블 5장 확정 용어입니다 — 판 → 스테이지(1-8), 사냥 → 모험, 붓 → 물감, 물감 방울 → 열매, 별가루 → 모집 도장, 인연 → 우정, 홍·녹·청·황·묵 → 빨강·초록·파랑·노랑·보라. 데이터 id(brush·drop·stardust·s###)는 그대로입니다. 전체 대조는 용어 개정안에 있습니다.
원칙은 다섯 개입니다. 화면 하나를 그릴 때 이 다섯을 순서대로 대 보고, 둘이 부딪히면 아래 우선순위로 정합니다.
#
원칙
뜻
지키는 방법
근거
P1
엄지는 아래, 정보는 위
자주 누르는 것은 화면 아래 1/3, 읽기만 하는 것은 위
주 버튼·항아리·받기는 y ≥ 840. 재화 막대·설정·우편처럼 드물게 누르거나 잘못 누르면 안 되는 것은 위. 결제로 이어지는 버튼은 아래 탭과 24px 이상 띄움
한 손 49%·받쳐 쥐기 36%(Hoober 2013, ux.md §1) · 홈 아래 55% 가 조작부(legend-of-slime/06 · seven-knights-idle/05)
P2
한 화면에 주인공 행동 하나
화면마다 「지금 누를 것」은 주 버튼(청록) 한 개
주 버튼은 화면당 1개. 둘 이상 같은 무게가 필요하면 둘 다 보조 버튼으로. 홈은 항아리가 주인공이고, 스테이지 도전은 보조 무게
키우기 3종 홈의 「다음 할 일」 카드 하나(legend-of-slime/06 · seven-knights-idle/05 · cookierun-crumble/01)
P3
색만으로 말하지 않는다
색 + 모양 + 글자 셋 중 둘 이상
속성 = 색 칩 + 상징 아이콘(불씨·새순·물방울·번개·초승달 — 5-1) + 이름. 등급 = 틀 색 + 글자(R·SR·SSR). 판정 = 사각 배지(judge.* — 속성색과 다른 값) + 낱말(충분·아슬·부족). warn(#D93A3F) 색은 얻을 것(점)·경고에만 — 속성 빨강(#F07A6A)과 다른 값이다
속성 색 글자는 크림 위 4.5:1 미달(ux.md §4) · WCAG 1.4.1
P4
그림책 스티커 결
UI 는 SVG 캐릭터와 같은 선·면을 쓰되, 캐릭터보다 조용하다
외곽선 #3a2a33(검정 아님), 납작한 채움, 번짐 없는 아래 그림자, 둥근 모서리. UI 면은 크림·흰색, 채도 높은 색은 캐릭터·속성·보상에 양보
gen_svg.py 1~6행(LINE #3a2a33, W 4) · bruni_v2.py
P5
정직한 과금 화면
사게 만들지 말고 고르게 한다
「결제/취소」「광고 보고 받기/괜찮아요」 같은 크기·같은 모양(채움만 다름) · 원화 가격 · 확률 버튼은 구매 버튼과 같은 화면 · 상품 팝업은 「7일간 보지 않기」 · 빨간 점을 판매·광고 권유에 쓰지 않음 · 죄책감 문구 금지
부딪히면 P5 → P3 → P1 → P2 → P4법·접근성이 먼저, 꾸밈이 마지막입니다. 예를 들어 광고 팝업에서 「괜찮아요」를 작게 해 주 버튼을 하나로 보이게 하고 싶어도(P2) 같은 크기 규칙(P5)이 이깁니다. 속성 색으로 글자를 칠하면 예쁘더라도(P4) 크림 위 대비 미달(P3)이 이깁니다.
bruni03
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
01 / Principles — Evidence
원칙의 근거 그림과 금지 짝
P1·P2 는 키우기 장르 홈 화면의 공통 배치에서 왔습니다. 아래 두 장은 화면 위쪽을 자동 전투에, 아래쪽을 조작부에 쓰고, 그 사이에 「다음 할 일」 카드를 한 장 둡니다. 우리는 이 구조를 가져오되, 조작부의 주인공을 강화 목록이 아니라 물감 항아리 하나로 좁힙니다.
레전드 오브 슬라임 06 · LoadComplete Co., Ltd 수집 2026-10-14 · App Store · 원본 위 45% 자동 전투 · 아래 강화 목록 · 그 사이 안내 미션 띠(「Claim Rewards · Enhance HP」). 옆줄 아이콘 거의 전부에 점이 켜진 것은 따라 하지 않습니다세븐나이츠 키우기 05 · Netmarble Corporation 수집 2026-10-14 · App Store · 원본 재화를 아래 탭 바로 위에 둔 예외 배치. 상시 안내 미션 「[가이드-220]」 카드, 한정 아이콘 아래 남은 시간쿠키런: 크럼블 01 · Devsisters Corp. 수집 2026-10-14 · App Store · 원본 안내 미션 「아무 돌파력 10레벨 올리기 10/10」 · 「스테이지 84-14」 장-순번 표기버섯커 키우기 04 · JOY MOBILE NETWORK PTE. LTD. 수집 2026-10-14 · App Store · 원본 뽑기 램프가 홈 전투 화면 아래 엄지 영역에 붙어 있다 — 우리 물감 항아리 자리의 근거
원칙별로 하지 않는 것
원칙
하지 않는 것
대신
P1
「받기」를 팝업 위쪽에 두기 · 결제 버튼을 아래 탭 바로 위에 붙이기
받기는 y ≥ 840 · 결제 버튼과 아래 탭 사이 24px 이상
P2
한 화면에 청록 버튼 둘
둘 다 필요하면 둘 다 보조 버튼으로(D06 스킬 탭은 주 버튼이 없습니다)
P3
속성 색 글자 · 빨강/초록만으로 판정 표시
속성 칩 + 상징 아이콘 + 이름 · 판정 배지에 「충분」「아슬」「부족」
P4
번짐 그림자 · 검정 외곽선 · 그러데이션 남발
번짐 0 그림자 · <code>#3a2a33</code> 외곽선 · 그러데이션은 SSR 카드에만
P5
작은 회색 「닫기」 · 판매 빨간 점 · 「평생」 · 죄책감 문구
같은 크기 버튼 · NEW 꼬리표 · 범위 문장 · 「괜찮아요」
bruni04
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
02 / Tokens — Color 1
색 — 바탕 · 면 · 글자
모든 색은 이 칩이 기준입니다. 칩 위 글자색은 생성기가 대비가 큰 쪽(자두 #3A2A33 또는 흰색)을 골라 칠했습니다. 칩 아래 숫자는 바이블의 대비 값입니다.
바탕 · 면 · 글자
bg.base
#FFF7EF
bg.sunken
#F7F1E6
surface
#FFFFFF
surface.dim
#ECE6E9 · 글자 #3a2a33 10.94
surface.night
#0B2947 · 흰 글자 14.76
line
#3A2A33
text.main
#3A2A33 · bg.base 12.70 · 흰 13.47 · bg.sunken 11.98
상태 효과 아이콘 바탕 — 버프 둥근 바탕 ▲ · 디버프 각진 바탕 ▼(색 + 모양). 위 그림은 버프 text.main, 디버프 흰색
그림 5.18 / 6.84
faded
#C3C0C6
잠긴 칸·미보유 동료(빛바램 표현 — 회색 + 50% 채도)
위 글자 7.49
bruni07
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
02 / Tokens — Contrast check
대비 다시 계산
바이블의 대비 값을 이 생성기 안에서 WCAG 2.x 상대 휘도 공식으로 다시 계산했습니다. 같은 표를 두 번 옮겨 적는 것은 검증이 아니라서, 색 값만 가져와 숫자를 새로 냈습니다. 허용 오차는 ±0.02 입니다.
쌍
글자 / 바탕
바이블
재계산
판정
본문 글자 / 크림
#3A2A33 / #FFF7EF
12.70
12.70
일치
보조 글자 / 크림
#7A6870 / #FFF7EF
4.90
4.90
일치
보조 글자 / 비활성 면
#7A6870 / #ECE6E9
4.22
4.22
일치
흰 글자 / 남색 탭
#FFFFFF / #0B2947
14.76
14.76
일치
지금 탭 글자 / 남색
#FFD166 / #0B2947
10.24
10.24
일치
꺼진 탭 글자 / 남색
#9FB3C8 / #0B2947
6.86
6.86
일치
글자 / 청록 주 버튼
#3A2A33 / #2BB3A3
5.18
5.18
일치
청록 글자 / 크림(금지)
#2BB3A3 / #FFF7EF
2.45
2.45
일치
글자 / 받기 노랑
#3A2A33 / #FFCF4A
9.16
9.16
일치
글자 / 빨강 속성
#3A2A33 / #F07A6A
4.94
4.94
일치
글자 / 초록 속성
#3A2A33 / #4FD18B
6.94
6.94
일치
글자 / 파랑 속성
#3A2A33 / #5AA9E6
5.29
5.29
일치
글자 / 노랑 속성
#3A2A33 / #F5C84C
8.50
8.50
일치
글자 / 보라 속성
#3A2A33 / #A98AF0
4.86
4.86
일치
흰 글자 / 경고 점
#FFFFFF / #D93A3F
4.54
4.54
일치
경고 글자 / 크림
#B8352F / #FFF7EF
5.52
5.52
일치
흰 글자 / 절전 바탕
#FFFFFF / #0B0910
19.80
19.80
일치
글자 / SR 보라
#3A2A33 / #B48CFF
5.22
5.22
일치
글자 / 판정 충분
#3A2A33 / #9ED9B5
8.37
8.37
일치
글자 / 판정 아슬
#3A2A33 / #F2E2A0
10.37
10.37
일치
글자 / 판정 부족
#3A2A33 / #F2B8A8
7.82
7.82
일치
그림 / 버프 바탕
#3A2A33 / #2BB3A3
5.18
5.18
일치
흰 그림 / 디버프 바탕
#FFFFFF / #7A4E5C
6.84
6.84
일치
결과 — 23쌍 중 어긋남 0기준은 본문 4.5:1, 큰 글자·아이콘·테두리 3:1 입니다(WCAG 1.4.3 · 1.4.11, ux.md [U4]). 「보조 글자 / 비활성 면」 4.22 는 본문 기준 미달이라 바이블대로 큰 글자(굵게 28px 이상)에만 씁니다. 청록은 크림 위 2.45 라 글자색으로 쓰지 않습니다.
bruni08
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
02 / Tokens — Type
글자 — 글꼴과 8단계
견본은 화면 폭 360 기준(720 캔버스의 절반)으로 그렸습니다 — 폰에서 보이는 실제 크기와 비슷합니다. 제목·버튼 글자는 Jua(굵기 하나 — 「굵게」를 주지 않습니다), 본문과 모든 숫자는 Pretendard(숫자는 Bold + tnum)입니다. 둘 다 SIL OFL 이고, 갈무리(픽셀 글꼴)는 쓰지 않습니다.
t.caption 24px · 12sp2:15:07 남음
t.body 28px · 14sp보상 칩을 누르면 얻는 곳이 보여요
t.long 32px · 16sp할매가 준 항아리야. 물감을 부으면 장비가 돼.
t.label 28px · 14sp도전 ▶ 1-8
t.title.s 32px · 16sp방치 보상
t.title 40px · 20sp동료
t.num 36px · 18sp1.23만
t.display 56px · 28sp승리!
단계
px(720)
360dp 기기
줄 간격
쓰는 곳
t.caption
24
12sp
1.25
꼬리표·시간·각주(최소값 — 이보다 작게 쓰지 않는다)
t.body
28
14sp
1.5
목록·설명·버튼 보조 줄
t.long
32
16sp
1.6
이야기 대화창·도움말·법정 고지
t.label
28 Jua(보통 — 굵기 하나)
14sp
1.25
버튼 글자·탭 글자
t.title.s
32 Jua
16sp
1.25
팝업 제목·카드 제목
t.title
40 Jua
20sp
1.2
화면 제목
t.num
36 Pretendard Bold(700) + tnum
18sp
1.0
재화·전투력·가격(가격 버튼 안 숫자 포함). 작은 숫자(비용 칩·n/n)는 같은 글꼴 24·28
opentype_features = { tnum: 1 }(스크립트 키는 TextServerManager.get_primary_interface().name_to_tag("tnum")). 가격 버튼은 Button 글자 대신 HBox(Jua 라벨 + NumLabel)
▶ 표시
아이콘 ico_sys_play 24
Jua 에 U+25B6 글리프가 없습니다(2026-10-14 Jua-Regular.ttf cmap 확인) — 글자로 넣으면 대체 글꼴로 튑니다
「보스 도전 ▶ 8-50」은 들어가는가Jua 32 로 재면(▶ 는 아이콘 28) 231px · ×1.15 261 · ×1.3 292 입니다. B01 도전 버튼(288, 안쪽 256)에는 ×1.0 만 들어갑니다. ×1.15 부터는 「보스」를 버튼 왼쪽 위 꼬리표로 빼고 버튼 글자를 「도전 ▶ 8-50」(192 · 213)으로 씁니다. 스테이지는 장마다 30~50개라 가장 긴 표기가 「8-50」입니다(stages.json — 1~3장 30 · 4~7장 40 · 8장 50). 글자 폭은 Google Fonts 배포 Jua-Regular.ttf 의 hmtx 를 파이썬으로 읽어 계산했습니다(2026-10-14).
bruni09
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
02 / Tokens — Space, Radius, Shadow
간격 · 모서리 · 그림자 · 외곽선
간격 — 4 의 배수만
sp.1 4
sp.2 8
sp.3 12
sp.4 16
sp.5 24
sp.6 32
sp.7 48
sp.8 64
토큰
px
쓰는 곳
sp.1~sp.8
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
4 의 배수만 쓴다
margin.screen
24
화면 좌우 바깥 여백(명세 x=24 와 같다)
margin.popup
48
팝업 좌우(팝업 폭 624)
gap.touch
16
누를 것 사이 최소 간격(360dp 에서 8dp — WCAG 2.5.8 간격 예외, ux.md §2)
touch.min
96×96
누르는 영역 최소(48dp — Android 48dp [U2]). 그림이 작아도 누르는 영역은 96. 목록 행 높이도 96 이상
h.topbar
96
재화 막대(2026-10-14 88 → 96 — 막대 안 누를 것이 96 이 되게). 알약은 보이는 면 52 + 누름 영역 96(막대 높이 전체, 위아래 22 투명). 「+」는 따로 누르지 않고 빛구슬 알약 전체가 누름 영역
h.header
96
하위 전체 화면 머리줄 — 왼쪽 「←」 96×96 · 가운데 화면 이름 t.title · 오른쪽 「?」 96×96
h.tabbar
120
아래 탭(5칸 × 144)
h.btn.l / m / s
120 / 96 / 96(폭만 좁음)
큰 버튼(도전·10회) / 보통 / 작은
모서리 · 그림자 · 외곽선 실물
r.s
12px
r.m
20px
r.l
28px
r.xl
36px
r.pill
999px
shadow.btn
아래 6 · 번짐 0 · 25%
shadow.pressed
아래 2 + 본체 4 내려앉음
shadow.popup
아래 12 · 번짐 0 · 18%
hilite
위 30% 흰 35% 타원
토큰
값
쓰는 곳
r.s
12
꼬리표·작은 배지
r.m
20
버튼·칩·목록 행
r.l
28
카드
r.xl
36
팝업 패널
r.pill
999
재화 알약·속성 칩·진행 막대
shadow.btn
아래로 6px, 번짐 0, #3A2A33 25%
버튼·카드. 번짐 없는 그림자 — SVG 의 납작한 면과 맞춘다
shadow.pressed
아래로 2px + 본체 4px 내려앉음
눌림 상태(명세의 90% 축소 대신 — 결이 「도장 찍힘」이 된다)
shadow.popup
아래로 12px, 번짐 0, 18%
팝업 패널
stroke.l
4 #3A2A33
팝업·카드·버튼 테두리(SVG 캐릭터 W=4 와 같다)
stroke.m
3
칩·배지·막대
stroke.s
2
48px 이하 아이콘의 외곽선·속 선(면이 있는 아이콘)
stroke.icon
3
선 자체가 그림인 48 시스템 글리프(ico_sys_* — ✕ ← ▾ ✓ …). 2 면 360dp 기기에서 1dp 라 글리프가 가늘어 안 읽힌다
hilite
위쪽 30% 흰색 35% 타원
버튼·보석 아이콘 윗면 반사(bruni_v2.py 머리 반사 opacity .35 와 같다)
왜 번짐 없는 그림자인가캐릭터 SVG 는 납작한 채움과 자두색 외곽선으로 된 「스티커」입니다(gen_svg.py LINE #3a2a33, W 4). UI 가 흐릿한 그림자를 쓰면 캐릭터만 종이 위에 붙은 것처럼 겉돕니다. 눌림도 크기를 90%로 줄이는 대신 4px 내려앉혀 「도장 찍힘」처럼 보이게 합니다.
bruni10
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
02 / Tokens — Vertical extension
세로 확장 규칙 — 안전 영역과 늘어나는 구역
세로가 긴 기기(20:9 → 720×1600)에서는 keep_width 가 화면을 아래로 늘립니다. 그 남는 높이를 어느 구역이 먹는지, 노치·제스처 막대 자리를 어떻게 빼는지를 정한 규칙입니다(UI 바이블 2-5). 화면 명세서 common 「안전 영역」 줄을 UI 쪽으로 받아 온 것입니다.
var safe := DisplayServer.get_display_safe_area() # 화면 픽셀
var win := DisplayServer.window_get_size()
var k := 720.0 / win.x # 화면 픽셀 → 캔버스
inset_top = safe.position.y * k
inset_bottom = (win.y - safe.end.y) * k
E = H - inset_top - inset_bottom - 1280 # 늘어나는 구역이 먹는 높이
층
무엇
세로 위치(기준 좌표 y 는 1280 캔버스 · 안전 영역 안)
바탕
화면 바탕 · 전투·이야기 배경 · 팝업 dim · 남색 몰입 바탕
0 ~ H 전체 — 안전 영역 밖(노치 뒤·제스처 막대 뒤)까지 칠한다
위 앵커
재화 막대 96 · 머리줄 96 · 화면 안 탭 줄 · B06 위 띠
inset_top + y
늘어나는 구역
아래 표 — 화면마다 하나
위끝 inset_top + y, 높이 h + E
아래 앵커
아래 탭 120 · 아래 행동 줄(주 버튼) · B06 조작 줄·초상·전투 기록 · 안내 미션 카드부터 아래(B01)
H − inset_bottom − (1280 − y)
팝업
패널은 늘리지 않는다
세로 가운데 = inset_top + (H − inset_top − inset_bottom) ÷ 2
화면 시안(시안 문서)의 마크업을 그대로 가져와 위 규칙으로 늘린 뒤 헤드리스 크롬으로 찍었습니다(uiux/gen/tall_shots.py, 배율 2 → 720×1600 PNG). 위 64(상태 표시줄)·아래 48(제스처 막대)은 가정값이라 빗금으로 표시했고, 청록 점선이 늘어난 구역(+208)입니다. 전투 화면의 전투 기록 줄은 아래 앵커라 제스처 막대 위에 남습니다.
B01 모험(홈) · 720×1600B02 방치 보상 · 720×1600B06 전투 · 720×1600C04 브루니 · 720×1600D01 동료 목록 · 720×1600D02 동료 상세 · 720×1600E01 모집 · 720×1600E04 모집 결과 · 720×1600I01 상점 · 720×1600
시안이 바뀌면 다시 찍습니다이 그림은 찍은 때의 시안 마크업을 따릅니다. 시안 문서가 고쳐지면 python3 game-design/uiux/gen/tall_shots.py 를 다시 돌립니다. 실기기 안전 영역 값은 아직 재지 않았습니다(10장 열린 문제).
bruni12
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
03 / Components — Buttons
버튼 상태 견본
상태 이름은 보통 · 눌림 · 비활성 · 빛남 · 선택 · 잠김 여섯으로 고정합니다. 비활성 버튼도 누를 수 있고, 누르면 이유 토스트(「골드가 모자라요」)를 띄웁니다 — 왜 안 되는지 모르는 회색 버튼을 만들지 않습니다.
주 버튼 cmp_btn_primary
도전 ▶ 1-8
보통
도전 ▶ 1-8
눌림
도전 ▶ 1-8
비활성
도전 ▶ 1-8
빛남
보조 버튼 cmp_btn_secondary
취소
보통
취소
눌림
판매
비활성
받기 버튼 cmp_btn_reward
모두 받기
보통
모두 받기
눌림
받기
빛남
받았어요
비활성
광고 변형
▶ 2배로 받기 (1/1)
남은 횟수
▶ 내일 04:00에 채워져요
다 씀 — 숨기지 않음
광고 없이 받기
광고 생략권 보유
결제 팝업 버튼 줄(P5)
취소
보조 — 같은 크기
결제 4,400원
주
빛남은 「할 수 있는 일이 있음」빛남 고리는 accent.reward 1.2초 숨쉬기입니다. 화면당 빛나는 것은 하나만 둡니다 — 여러 개가 빛나면 알림 점 남발과 같은 문제가 됩니다. 「움직임 줄이기」를 켜면 숨쉬기 대신 고정 고리입니다.
bruni13
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
03 / Components — Cards, Chips, Dots
카드 · 칩 · 꼬리표 · 점 · 막대 견본
카드 cmp_card
도토 SR
보통
도토 SR
선택
아직 못 만났어요 얻는 곳 ›
미보유
속성 칩(원형) · 등급 배지(사각) — 모양으로 나눕니다
빨강
초록
파랑
노랑
보라
R동료
SR동료
SSR동료
영웅장비 4
전설장비 5
신화장비 6
꼬리표 · 판정 배지
NEW새것
한정 2:15:07기간
확률형법정
리더편성
충분아슬부족판정 배지
알림 점 · 진행 막대 · 토스트
우편점
우편3숫자 점(만료 임박)
방치 막대 72%
가득 찼어요
모집 도장 132/200 · bar.stamp
물감이 모자라요 · 얻는 곳 ›
토스트 2.5초 → X02
안내 미션 카드 cmp_guide_card (신설)
항아리 30번 열기
18/30가기
SR(보라 띠)과 보라 속성은 색이 가깝습니다. 그래서 등급은 사각 띠 + 글자, 속성은 원형 칩 + 아이콘으로 모양부터 다르게 둡니다(P3).
bruni14
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
03 / Components — Spec 1
공통 부품 28종 — 생김과 규칙 (1)
부품 id 는 코드·에셋 이름과 같습니다. 화면 명세에서 새 부품이 필요하면 여기서 먼저 정의하고 쓰입니다.
id
부품
생김
상태
규칙
cmp_topbar
재화 막대
높이 96, bg.base. 왼쪽 브루니 초상 64(SVG)·Lv·전투력(누름 영역 0~240 × 96 → C04), 오른쪽 재화 알약 3개(골드 · 빛구슬「+」 · 화면별 세 번째) — 알약은 보이는 면 52(y 22~74) + 누름 영역 96(막대 높이 전체)
보통 · 값 변화(숫자 0.4초 굴림 + 늘면 초록 「+n」 떠오름) · 눌림
하위 화면에도 남는다(princess-connect/03·05). 하위 화면은 아래 머리줄(h.header 96)에 「← 화면 이름」을 둔다(D02 만 머리줄 없이 막대 왼쪽이 「← 동료」). 세 번째 알약은 아래 「화면별 세 번째 알약」 표. 골드·빛구슬 알약을 누르면 X02(얻는 곳), 빛구슬은 I01 빛구슬 탭
cmp_tabbar
아래 탭
높이 120, surface.night, 5칸 144 — 모험 · 브루니 · 동료 · 모집 · 상점
보통(아이콘 text.onNight.off) · 선택(아이콘 위로 8px + text.onNight.on + 크림 반달 받침) · 잠김(자물쇠 + 「스테이지 1-5에서 열려요」 토스트) · 점
탭 루트 화면(B01·C04·D01·E01·I01)에만. 그 밖 전체 화면은 탭을 숨기고 뒤로
cmp_btn_primary
주 버튼
accent.primary 면 + stroke.l + shadow.btn, 글자 t.label
보통 · 눌림 · 비활성(surface.dim·text.sub) · 빛남(테두리 바깥 accent.reward 고리 1.2초 숨쉬기)
화면당 1개(P2)
cmp_btn_secondary
보조 버튼
surface 면 + stroke.l
보통 · 눌림 · 비활성 · 재화 부족
「취소」「괜찮아요」「판매」. 결제·광고 팝업에서는 주 버튼과 같은 크기(P5). 값이 다른 두 결제 버튼(1회/10회)은 둘 다 보조, 같은 채움 — 비싼 쪽만 주 버튼으로 채우지 않는다(uiux 08장 2.2)
(변형)
가격 버튼
보조 버튼 면 + 가운데 원화 가격 t.num(Pretendard Bold tnum) — 빛구슬 값이면 ico_cur_gem 32 + 수 + 아래 줄 「보유 1,230」 t.caption
보통 · 눌림 · 비활성(「품절」·「내일 04:00」)
카드가 여럿인 화면(I01 · H02 · I05)의 가격 버튼. 카드마다 같은 무게라 주 버튼(청록)을 쓰지 않는다(P2). 누르면 I02 구매 확인
cmp_btn_reward
받기 버튼
accent.reward 면 + stroke.l
보통 · 눌림 · 빛남 · 비활성(「받았어요」)
「받기」「모두 받기」 전용. 팝업 아래쪽(P1)
(변형)
광고 버튼
보조 또는 받기 버튼 앞에 ▶ 아이콘 + 「(1/2)」 남은 횟수
다 쓰면 숨기지 않고 비활성 + 「내일 04:00에 채워져요」
생략권 보유자는 「광고 없이 받기」로 바뀐다(「바로 받기」는 쓰지 않는다 — 5-1 #72·#78)
cmp_card
카드
surface + stroke.l + r.l + shadow.btn
보통 · 선택(accent.primary.soft 바탕 + 청록 4px) · 잠김(faded + 자물쇠 + 열리는 조건) · 미보유(faded 면 + 회색 실루엣 + 「아직 못 만났어요」 + 「얻는 곳 ›」 → X02, 얻는 배너 이름)
동료 카드는 아래 등급 띠 + 왼쪽 위 속성 칩 + ★ 줄. 미보유 카드에 동료 조각 수(「12/30」)를 띄우지 않는다 — growth.json 에 조각으로 동료를 얻는 규칙이 없다(동료 조각은 중복분 승급 재료 — star 표 shards). 조각 소환을 넣으려면 growth.json 규칙부터 정한다
cmp_popup
팝업
폭 624, surface + r.xl + shadow.popup. 위 제목 띠(surface.night 높이 88, 흰 t.title.s) → 내용 → 아래 버튼 줄. 오른쪽 위 ✕(96 누름 영역), 필요하면 왼쪽 위 「?」
열림 0.12초 0.9→1.0 · 닫기 금지형(✕ 없음)
최대 2겹(명세 common). 바깥 누르면 닫힘(닫기 금지형 제외). 구조는 cookierun-crumble/03 · survivor-io/02
기간 한정은 아이콘 아래에 남은 시간(seven-knights-idle/05 · cookierun-crumble/01). 라벨·아이콘과 겹치지 않는다 — 칸 오른쪽 위 모서리에 걸고, 글자 상자와 겹치면 글자를 12 내린다(화면 시안 E01 「픽업」 · B01 「무료 1」. 결과 카드처럼 그림이 칸을 채우면 꼬리표를 아래 글자 칸으로 옮긴다)
cmp_guide_card
안내 미션 카드
홈 전투 화면 아래 폭 672 높이 112(y 632~744): 「안내」 꼬리표 + 과제 문구 + n/n 막대 + 보상 칩 96 + 오른쪽 「가기」/「받기」 104×96
진행 중 · 받을 것 있음(받기 버튼 + 빛남)
키우기 3종 공통(patterns.md §3 빈 곳 1). 튜토리얼 뒤 길잡이. 해금 안 된 과제는 건너뛰고 다음 과제를 보인다(기획서 06장)
cmp_judge
판정 배지
숫자 옆 사각 배지 높이 40 r.s(judge.* 면 + stroke.m + 「충분」「아슬」「부족」)
—
전투력 숫자는 늘 text.main(ux.md §4). 원형 속성 칩과 모양·색 둘 다 다르다
cmp_sheet
아래 시트
아래에서 올라오는 패널(높이 최대 70%), 위 손잡이
—
동료·장비·유물 상세 미리보기. 팝업 2겹 제한에 세지 않는다(전체 화면 위 1겹)
cmp_coach
튜토리얼 안내
4겹: ① 강조 구멍(fxu_highlight 셰이더 — 강조 구역 둘레 8px 밝은 테두리, 나머지 dim) ② 브루니 초상 128(SVG, 말풍선 쪽 끝) ③ 말풍선 frm_bubble(폭 최대 512, t.body 28, 2줄까지, 꼬리가 초상을 가리킴) ④ 손가락 ico_tut_hand 96(구멍 가운데에서 오른쪽 아래 24, 0.8초 누르기 반복)
강제(구멍만 누름 · 뒤로 키 무시) · 안내만(아무 곳이나 누르면 넘어감) · 시스템 문구(초상 없이 말풍선만)
말풍선은 강조 구멍 반대쪽 절반(구멍이 y < 640 이면 아래, 아니면 위). 구멍과 말풍선이 겹치면 말풍선을 옮긴다. 「움직임 줄이기」면 손가락은 멈춘 그림
cmp_confirm
2겹 확인 팝업
cmp_popup 축소형 — 폭 624 높이 408 고정: 제목 띠(질문 한 줄) → 무엇을 잃는지 t.body → 버튼 줄(왼 되돌릴 수 없는 쪽 보조 · 오른 안전한 쪽 주, 같은 크기 280×96)
보통 · 위험(왼쪽 버튼 글자 warn.text + 3초 뒤 활성 — K02 계정 삭제만)
아래 팝업 위 2겹째(최대 2겹). 바깥 눌러도 닫히지 않는다. A04 「이 저장으로 할까요?」· B07 「정말 포기할까요?」· K02 「계정을 지울까요?」. 좌표는 layout.json extra cmp_confirm
cmp_check
체크 상자
상자 48(stroke.m, r.s) + 오른쪽 글자 t.body, 행 전체가 누름 영역(높이 96)
꺼짐 · 켜짐(청록 면 + 흰 ✓) · 비활성 · 필수 꼬리표
기본은 꺼짐(미리 켜지 않는다 — 다크패턴 1.2). A02 · A05 「오늘 다시 보지 않기」· X01 「7일간 보지 않기」· C03
cmp_switch
스위치
길이 96 × 높이 48 알약 + 손잡이 40, 오른쪽 끝에 놓고 행 전체가 누름 영역(96)
꺼짐(surface.dim) · 켜짐(accent.primary) · 비활성
바로 적용되는 설정(K01 소리·알림·움직임 줄이기, C03 자동 장착). 켜짐/꺼짐 글자를 옆에 같이(「켜짐」) — 색만으로 말하지 않는다
cmp_slider
슬라이더
막대 높이 16 + 손잡이 48, 누름 영역 높이 96 · 양끝 아이콘 48
보통 · 끄는 중(손잡이 1.2배) · 비활성
K01 소리 크기 3줄. 값을 숫자로 옆에(「70」). 0 이면 음소거 아이콘
cmp_dropdown
고르기 상자
높이 96, surface + stroke.m + r.m, 글자 t.body + 오른쪽 ▾
보통 · 끝(최소 1 에서 −, 최대에서 + 비활성 + 이유 토스트) · 길게 누름(0.1초마다 1)
J08 정수 합성 · I05·H02 수량 고르기. 수량 칸을 누르면 숫자 키패드
cmp_dialog
대화창
아래 폭 672 높이 280, surface + stroke.l, 왼쪽 위 이름표(남색)
글자 나오는 중 · 다 나옴(▼ 깜빡임) · 선택지(세로 버튼 96, 보조 버튼 모양)
본문 t.long
bruni16
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
03 / Components — Forms & overlay
폼 컨트롤 · 튜토리얼 · 2겹 확인 · 재화 알약
에셋 목록에만 있던 체크·스위치·슬라이더·고르기 상자·세그먼트·수량 −/+ 를 부품으로 올리고, 튜토리얼 안내(cmp_coach)와 2겹 확인 팝업(cmp_confirm)을 새로 정했습니다. 모두 행 전체 또는 칸 하나가 96이고, 기본값을 미리 켜지 않습니다. 상태·크기는 위 부품 표에 있습니다.
폼 컨트롤
7일간 보지 않기
cmp_check 꺼짐(기본)
✓(필수) 이용약관
켜짐 · 행 전체 96
소리 꺼짐
cmp_switch
효과음 켜짐
켜짐 낱말 같이
배경음 70
cmp_slider
역할 ▾
cmp_dropdown → 아래 시트
보통어려움
cmp_segment
−7+최대
cmp_stepper 96 · 간격 16
튜토리얼 · 2겹 확인 · 가격 버튼
항아리브항아리를 톡 눌러 봐요
cmp_coach — 구멍 · 초상 · 말풍선 · 손가락
정말 포기할까요?이번 전투 보상은 받지 않아요.포기하기계속하기
cmp_confirm 2겹째 · 같은 크기
9,900원
가격 변형 — 보조 면 + t.num
화면별 세 번째 재화 알약
골드 · 빛구슬은 모든 화면에 같고, 세 번째 알약만 화면 문맥을 따릅니다. 상점 화면은 그 상점의 주화가 세 번째입니다. 알약은 보이는 면 52 · 누름 영역 96(재화 막대 높이 전체)입니다.
화면
세 번째 알약
이유
B01 모험(홈) · B04 지도 · B05 파티 편성 · C01·C02·C03(홈 위 팝업)
물감
항아리를 여는 재화
C04 브루니 · C05 장비 강화 · C06 장비 제작
강화석
장비 강화·제작 재료(5-2 유지 용어)
C08 유물
유물 가루
유물 레벨업 재료
D01 동료 목록 · D02 동료 상세 · D08 동료 이야기 목록
열매
동료 레벨업 재료
E01 모집
모집권
1회 모집에 먼저 쓴다
F01 이야기
물감
탭 문맥이 없어 홈 값을 따른다
G01 원정 · G03 주간 토벌 · G04 시련의 등대
던전 열쇠
원정 입장 재화
H01 이벤트 · H02 이벤트 상점
이벤트 주화
그 상점 돈(5-3 「○○ 주화」)
I01 상점
모집권 · 원정 탭을 고르면 원정 주화
탭 문맥
I04 정기권·성장 패스 · I06 결제 내역
(없음 — 알약 2개)
유료 빛구슬 잔액을 화면 본문에 따로 보인다
I05 원정 상점
원정 주화
그 상점 돈
J01 미션 · J03 우편함 · J07 가방 · K01 설정 · K02 계정·저장
물감
홈 값을 따른다
bruni17
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
04 / Navigation — Frames & Tabs
공통 틀과 아래 탭
화면은 네 가지 틀 중 하나에 들어갑니다. 탭 루트 다섯 화면에만 아래 탭이 있고, 하위 화면은 탭을 숨기고 왼쪽 위 「← 이름」으로 돌아갑니다. 점선은 엄지 영역 경계(y 840)입니다.
탭 루트하위 화면팝업
종류
틀
탭 루트 전체 화면 (B01·C04·D01·E01·I01)
위 재화 막대 96 → 내용(늘어나는 구역 하나 — 2-5) → 아래 탭 120
하위 전체 화면
위 재화 막대 96 → 머리줄 96(「←」 96×96 · 화면 이름 · 「?」 96×96) → 내용 → 아래 행동 줄(주 버튼). 탭 없음. D02 만 머리줄 없이 막대 왼쪽이 「← 동료」(그림 영역을 넓게)
팝업
폭 624 · x 48. 제목 띠 → 내용 → 아래 버튼 줄(오른쪽이 주 버튼, 같은 높이 96~120). 2겹째 확인은 cmp_confirm
탭(D03~D07)
D02 「탭 내용」(y 616~1160 — layout.json) 안에서 바뀐다. 탭마다 「지금 → 다음」 미리보기 + 필요 재료 칩 + 주 버튼 하나
몰입 화면 (A01·A02·B06·E03·E04·F02·K04)
재화 막대·아래 탭 없음. 바탕은 안전 영역 밖까지(2-5)
아래 탭 5칸과 딸린 화면
탭
루트
딸린 화면
모험
B01 모험(홈)
B02 방치 보상 · B03 즉시 보상 · B04 지도 · B05 파티 편성 · B06 전투 · C01 항아리 결과 · 홈 옆줄 아이콘 8개(왼 미션 J01 · 출석 J02 · 우편 J03 · 이벤트 H01 / 오른 이야기 F01 · 원정 G01 · 꾸러미 I01 · 설정 K01)
브루니
C04 브루니
C05 장비 강화 · C06 장비 제작 · C07 색 바꾸기 · C08 유물 · J07 가방(메뉴 칸 「가방」) · C02 항아리 정보 · C03 자동 판매
동료
D01 동료 목록
D02 동료 상세 → D03~D07 탭 · D08 동료 이야기 목록
모집
E01 모집
E02 확률 정보 · E03 연출 · E04 결과 · E05 도장 교환 · E06 모집 기록
상점
I01 상점
I02 구매 확인 · I03 결제 결과 · I04 정기권·성장 패스 · I05 원정 상점 · I06 결제 내역
bruni18
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
04 / Navigation — Flows 1
흐름도 — 첫 실행 · 매일 · 성장 루프
첫 실행
A01 부팅로고 · 걷는 브루니
화면 누름
A02 약관 동의필수 2 · 선택 1
다음
F02 이야기 1화3장면 이하(제안)
F02 1화 끝
T02
B01 모험(홈)항아리 강조
1회 열기
C01 항아리 결과장착
매일 들어올 때
A01 부팅방치 시간 계산
자동
A05 공지오늘 다시 보지 않기
닫기
B02 방치 보상받기 · ▶ 2배
B02 받기
닫기
J02 출석오늘 칸 받기
닫기
B01 모험(홈)안내 미션 카드
성장 루프 — 브루니
B01 항아리물감 1 → 장비 1
결과
C01 비교 카드장착 · 판매
장착
C04 브루니강화 칸 점
C04 장비 칸
강화
C05 장비 강화+7 → +8
강해짐
B04 지도도전 ▶ 1-8
도전과 실패
B04 지도추천 전투력 · 판정
도전
B06 전투필살 게이지
끝
B08 전투 결과승리 / 실패
B08 실패「전투력이 1,200 모자라요」
바로가기 3
C04 · D03 · B05장비 · 레벨업 · 편성
다시
B06 전투
실패는 막다른 길이 아닙니다전투 결과(B08)의 실패 화면은 원인 한 줄과 성장 바로가기 카드 셋(장비 · 레벨업 · 편성)을 줍니다. 「졌어요」로 끝나는 화면은 만들지 않습니다.
bruni19
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
04 / Navigation — Flows 2
흐름도 — 수집 루프 · 결제 · 광고
수집 루프 — 동료
E01 모집1회 · 10회 · 확률
모집
E03 연출넘기기 0.5초 뒤
끝
E04 결과NEW · 동료 조각 +n(화면 「도토 조각 +n」)
E04 확인
새 동료
D01 동료 목록새 동료 점
카드
D02 동료 상세레벨업 · 승급 · 우정
결제
I01 상점원화 가격 · 확률형 꼬리표
상품
I02 구매 확인결제 · 취소 같은 크기
결제
I03 결제 결과성공 · 지연 · 실패
광고 보상
광고 자리 6곳▶ 버튼 + 남은 횟수
누름
J05 광고 보상 확인보고 받기 · 괜찮아요
다 봄
J04 보상 획득약속한 보상 그대로
돈이 걸린 길은 늘 한 번 멈춥니다결제는 I02, 광고는 J05 를 반드시 지납니다. 두 화면 모두 거절 버튼이 승인 버튼과 같은 크기입니다(P5). 튜토리얼 안에는 이 두 길로 들어가는 강조가 없습니다.
bruni20
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
04 / Navigation — Map 1
화면 이동 지도 (1/3)
화면 명세서(screens.json)의 버튼 이동을 세어 만든 표입니다. 화면 65개 사이에 이동이 124개 있습니다. 탭 루트 다섯은 「아래 탭」에서도 들어옵니다. 「들어오는 곳」이 비어 있는 화면은 버튼이 아닌 길(부팅·팝업 줄·시스템)로 열리는 화면입니다: A03, K05, K06. * 표는 UI 바이블이 더한 길 3개입니다 — B01 물감 0 광고 → J05 · I05 광고 새로고침 → J05 · C04 메뉴 「가방」 → J07(screens.json 반영은 바이블 9장 ⑭). 이로써 J05 로 들어오는 곳이 광고 자리 6곳(B01 · B02 · B03 · E01 · G02 · I05)과 맞습니다.
화면 명세(screens.json, 2026-10-13 버전)의 구역 좌표는 터치 88 · 재화 막대 88 · 머리줄 80 기준이었습니다. UI 바이블이 터치 최소를 96, 재화 막대를 96 으로 올렸으므로 65화면 422개 구역을 다시 계산해 game-design/uiux/data/layout.json 에 남겼습니다(생성기 uiux/gen/layout.py). Godot 로 옮길 때는 명세 좌표가 아니라 이 파일의 new 값을 씁니다. 아래 각 묶음 쪽의 화면 칸에 같은 값이 붙어 있습니다.
규칙
내용
R1
재화 막대 88 → 96 (h.topbar)
R2
머리줄 80 → 96 (h.header)
R3
버튼 높이·폭 < 96 → 96 (touch.min)
R4
화면 안 탭 높이 < 96 → 96 (cmp_tabs)
R5
팝업 패널 x 48 · 폭 624 (margin.popup), 안 구역은 같은 비율
R6
늘어난 만큼 아래 구역을 민다 — 원래 간격 유지, 누를 것끼리 16 이상(gap.touch)
R7
전체 화면은 늘어나는 구역(flex) 하나가 밀린 만큼 줄어든다 — 위·아래 앵커는 제자리
R8
팝업 패널은 늘어난 만큼 위아래로 반씩
R9
모든 값 4 의 배수
R10
시안 8개 좌표가 정한 값은 시안을 따른다
검사 결과 — 96 미만 버튼 57개를 고쳤고 남은 문제 0개생성기가 끝에서 화면마다 다시 셉니다: 누를 것(버튼·화면 안 탭)의 높이·폭 96 이상 · 화면 밖으로 나간 구역 · 누를 것끼리 겹침 · 누를 것 사이 간격 16 미만. 시안 8개(B01 · B02 · B06 · D01 · D02/D03 · E01 · E04 · I01)는 시안이 정한 좌표를 우선했습니다(R10). 구역 이름은 명세 키 그대로이고, 확정 용어로 바뀐 이름은 괄호에 명세 이름을 남겼습니다.
bruni24
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — A Boot / Account
A · 부팅·계정 (5화면)
첫 실행은 A01 → A02 → F02(이야기 1화)로 곧장 들어갑니다. 계정 선택·닉네임 입력이 없습니다 — 버섯커 키우기도 닉네임이 자동이라 바로 튜토리얼로 들어갑니다(ux.md §7, [U16] 2024-02-04). 공지(A05)는 부팅 팝업 줄의 첫 칸이고, 상품 팝업을 이 줄에 넣더라도 「7일간 보지 않기」가 붙습니다.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
A01
부팅 scr_boot
로고 위 1/3, 가운데 걷는 브루니(SVG), 아래 진행 막대+문구. 누를 곳은 화면 전체 하나
명세(screens.json) 배치로 확정: 맨 위 「모두 동의해요」 행(y 240) → 동의 행 96 × 3(필수 꼬리표 2·선택 1, cmp_check, 미리 켜지 않음) → 안내 상자 → 맨 아래 「시작할게요」 주(필수 전엔 비활성 + 이유 토스트). 바꾼 이유: 「모두 동의」를 개별 행 위에 두면 「한 번에 켜고 → 아래에서 무엇이 켜졌는지 확인」 순서로 읽히고, 시작 버튼과 떨어져 있어 「모두 동의」를 시작으로 잘못 누르지 않는다. 버튼 글자는 다음 일(1화 시작)을 말하는 「시작할게요」. 좌표는 layout.json A02
레퍼런스 그림 없음이 묶음의 본화면은 이 기획서를 쓸 때 본 1차 수집분에 없습니다(patterns.md §0 — 스토어 스크린샷은 상점·미션·출석·우편·설정 화면을 거의 싣지 않습니다). 배치는 규정(08장)과 공통 부품 규칙으로 정했고, 2차 수집에서 채운 화면(I01 상점 · J01 미션 · J02 출석 등)은 레퍼런스 보드 「화면 유형별」 쪽에 있습니다.
bruni25
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — B Adventure / Battle
B · 모험·전투 (8화면)
가장 오래 머무는 화면 묶음입니다. 홈(B01)은 위 45% 자동 전투 · 아래 55% 조작부로 나누고, 아래 1/3 가운데를 물감 항아리에 줍니다(P1·P2). 스테이지 도전은 보조 무게로 둡니다 — 항아리를 열어 강해진 뒤에 도전하는 순서가 키우기 루프의 결입니다.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
B01
모험 (홈) (사냥) scr_home
위 45% 자동 전투(재화 막대 아래 「1-7 · 웨이브 2/3」 정보 띠 64 + 「지도」 칩 96), 옆줄 아이콘 8개 — 왼쪽 미션·출석·우편·이벤트 / 오른쪽 이야기·원정·꾸러미·설정(96, 간격 16, 점). 옆줄 아이콘은 받침 없이 그림 56 + 글자이고, 전장 유닛은 x 124~596 안에서만 움직여 옆줄에 가리지 않는다(legend-of-slime/06 도 아이콘이 전장 안 하늘 쪽에 받침 없이 떠 있고 유닛은 가운데 땅 띠를 걷는다). 가방은 홈에 없고 C04 메뉴 칸에 있다. 전투 바로 아래 안내 미션 카드 112(신설). 그 아래 방치 상자 · 즉시 보상 · 「도전 ▶ 1-8」(+판정 배지). 아래 1/3 가운데 물감 항아리(주인공, 400×264) + 좌 「자동」 우 「판매」. 물감 0 상태: 항아리 위에 「▶ 물감 +30 (5/5)」 광고 버튼(보조 + 광고 변형, 256×96 — 광고 자리 ad_brush)이 겹쳐 나오고, 누르면 J05. 5회를 다 쓰면 숨기지 않고 비활성 「내일 04:00 에 채워져요」. 「보스 도전 ▶ 8-50」은 Jua 32 에서 231px(×1.15 261 · ×1.3 292, 2026-10-14 Jua-Regular.ttf 글자 폭 계산, ▶ 는 아이콘 28)이라 288 버튼 안쪽 256 에 ×1.0 만 들어간다 — ×1.15 부터는 「보스」를 버튼 왼쪽 위 꼬리표로 빼고 글자는 「도전 ▶ 8-50」(192 · 213). 참고 legend-of-slime/06 · seven-knights-idle/05 · cookierun-crumble/01 · bussukeo/04
위 장 칩 줄 + 「어려움」 토글. 세로 스크롤 길 위 노드 「1-8」, 보스 노드 크게 + 보스 이름. 지금 위치에 브루니 SVG. 아래 「도전」 주 버튼 + 추천 전투력·판정 배지. 아래 가운데 별/보물 진행(battle-cats/01 · cookierun-kingdom/19)
위 띠 「1-8 · 웨이브 2/3 · 0:43」 + 보스 체력. 가운데 전장. 아래 엄지 영역에 초상 5칸(120×200, 간격 16 · 좌우 28 — (720 − margin.screen 24×2 − gap.touch 16×4) ÷ 5 = 121.6 → 120. 1차 시안 144×210 × 5 = 720 은 간격이 0 이라 필살 수동 때 옆 칸을 누른다. 필살 게이지 가득 → 빛남). 초상 위 줄에 배속 · 필살 자동 · Ⅱ. 맨 아래 전투 기록 2줄(아래 앵커 — 안전 영역 안에 두어 제스처 막대와 겹치지 않는다, 2-5). 참고 princess-connect/07 · cookierun-kingdom/07
레전드 오브 슬라임 06 · LoadComplete Co., Ltd 수집 2026-10-14 · App Store · 원본 위 45% 자동 전투 · 아래 강화 목록 · 그 사이 안내 미션 띠(「Claim Rewards · Enhance HP」). 옆줄 아이콘 거의 전부에 점이 켜진 것은 따라 하지 않습니다세븐나이츠 키우기 05 · Netmarble Corporation 수집 2026-10-14 · App Store · 원본 재화를 아래 탭 바로 위에 둔 예외 배치. 상시 안내 미션 「[가이드-220]」 카드, 한정 아이콘 아래 남은 시간쿠키런: 크럼블 01 · Devsisters Corp. 수집 2026-10-14 · App Store · 원본 안내 미션 「아무 돌파력 10레벨 올리기 10/10」 · 「스테이지 84-14」 장-순번 표기버섯커 키우기 04 · JOY MOBILE NETWORK PTE. LTD. 수집 2026-10-14 · App Store · 원본 뽑기 램프가 홈 전투 화면 아래 엄지 영역에 붙어 있다 — 우리 물감 항아리 자리의 근거쿠키런: 크럼블 03 · Devsisters Corp. 수집 2026-10-14 · App Store · 원본 방치 보상 팝업: 제목 띠 → 현재 스테이지 9-7 + 「9-11 도달 시 보상 증가」 → 보상 4칸 → 경과/상한 → 받기냥코 대전쟁 01 · ponos corporation 수집 2026-10-14 · App Store · 원본 지도 아래 가운데 별 진행과 단계 보물상자, 오른쪽 아래 큰 출격 버튼
bruni26
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — C Bruni / Gear
C · 브루니 (8화면)
브루니 한 명의 장비·색·유물을 다루는 묶음입니다. 모든 화면이 「지금 → 다음」 비교를 먼저 보이고 주 버튼을 하나 둡니다. 장비 등급은 틀 색 + 글자, 능력치 차이는 ▲▼ 기호 + 색으로 나타냅니다(P3).
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
C01
항아리 결과 scr_pot_result
좌우 비교 카드(지금 ↔ 새 장비), 능력치 차이 ▲▼(색 + 기호). 아래 「장착」 「판매」 같은 크기, 더 좋은 쪽에 빛남만
개정 좌표 x·y·w·h (720×1280, 계산)어둡게 0·0·720·1280패널(명세 「판」) 48·260·624·760 ← 40·260·640·760새 장비 88·300·264·420 ← 80·300·270·420장착 중 368·300·264·420 ← 370·300·270·420차이 88·728·544·80 ← 80·730·560·80판매 88·840·264·112 ← 80·840·270·110장착 368·840·264·112 ← 370·840·270·110
C02
항아리 정보 scr_pot_level
레벨 + 경험치 막대. 등급 확률표 7행 × (지금 · 다음 레벨) 2열 — 사용 화면 표시. 아래 「레벨업」
가운데 브루니 SVG(지금 속성 몸색) + 발밑 그림자, 좌우 장비 칸 3개씩(96 + 등급 틀 + +강화 수치). 위 Lv·전투력, 능력치 접이 목록, 아래 메뉴 칸 5개(강화 · 제작 · 색 바꾸기 · 유물 · 가방 — 각 124×152, 가방 → J07). 강화 가능 칸은 칸 오른쪽 위 ▲ 꼬리표(점 아님 — 4-3)
5색 원형 칩 한 줄 + 상성 그림(아이콘만 — 불씨·새순·물방울·번개·초승달 칩을 화살표로 잇는다). 문구는 색 이름으로 「빨강 → 초록 → 파랑 → 빨강, 노랑 ↔ 보라 서로 강해요」(원소 이름 「불·물」을 화면에 쓰지 않는다). 미리보기 브루니 몸색이 즉시 바뀜. 「바꾸기」
개정 좌표 x·y·w·h (720×1280, 계산)어둡게 0·0·720·1280패널(명세 「판」) 48·260·624·760 ← 40·260·640·760색 고리 128·300·468·400 ← 120·300·480·400미리보기 88·712·544·140 ← 80·710·560·140바꾸기 164·880·392·100 ← 160·880·400·100
C08
유물 scr_relic
위 보유 효과 합계 고정. 격자 4열(미보유 faded). 누르면 아래 시트 + 「레벨업」(유물 가루)
세븐나이츠 키우기 09 · Netmarble Corporation 수집 2026-10-14 · App Store · 원본 가운데 미리보기 + 능력치 증감 — C07 색 바꾸기에서 몸색이 즉시 바뀌는 미리보기와 같은 구조냥코 대전쟁 03 · ponos corporation 수집 2026-10-14 · App Store · 원본 상세: 가운데 캐릭터 + 아래 설명 상자, 좌우 화살표로 넘김(D02 ◀ ▶ 와도 같습니다)
bruni27
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — D Companions
D · 동료 (8화면)
수집 루프의 끝입니다. 목록(D01)은 4열 격자, 상세(D02)는 위 반 그림 · 아래 반 탭입니다. 탭 다섯(D03~D07)은 같은 틀 — 「지금 → 다음」 미리보기 + 재료 칩 + 주 버튼 하나 — 을 공유합니다.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
D01
동료 목록 scr_roster
필터 칩 줄(속성·역할·등급) + 정렬 + 「보유만」. 카드 격자 4열 156×224(그림 칸 112 고정 · 비율 유지 contain, ★ · Lv · 등급 띠 40 은 카드 아래에서부터 고정 자리로 쌓아 띠가 카드 밖으로 밀리지 않는다 + 속성 칩). 그림이 없거나 못 읽으면 속성색 원 + 첫 글자. 보유 수 「10/15」의 분모는 그 시점 공개된 동료 수다 — 출시 W0 = 15, W5 공개 뒤 53. characters.json 전체 60 을 쓰지 않는다(공개 전 동료가 분모에 들어가면 영영 못 채운다). 미보유는 faded + 회색 실루엣 + 「아직 못 만났어요」 + 「얻는 곳 ›」(누르면 X02 — 그 동료가 나오는 배너). 조각 수는 띄우지 않는다(cmp_card 미보유). 필터 줄은 속성 칩 5 × 96 + 간격 16 + 「보유만」, 다음 줄에 「역할 ▾」「등급 ▾」「정렬 ▾」(cmp_dropdown). 참고 seven-knights-idle/02 · princess-connect/05
세븐나이츠 키우기 02 · Netmarble Corporation 수집 2026-10-14 · App Store · 원본 동료 목록: 「보유 영웅만 표시」 체크 + 정렬 + 5열 격자, 카드에 별·Lv·조각 n/4프린세스 커넥트! Re:Dive 05 · Kakao Games Corp. 수집 2026-10-14 · App Store · 원본 동료 목록 3열 + 위 필터 탭. 하위 화면에도 재화 막대가 남고 왼쪽 위가 「뒤로 + 이름」
bruni28
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — E Recruit
E · 모집 (6화면)
돈과 직접 닿는 화면이라 P5 가 가장 먼저 적용됩니다. 확률 버튼은 모집 버튼과 같은 화면 · 같은 높이(96)이고, 1회·10회는 같은 크기로 나란히 둡니다. 새 배너는 빨간 점 대신 「NEW」 꼬리표입니다.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
E01
모집 scr_recruit
배너 탭 줄(첫걸음 · 픽업 · 상시 · 색 축제 · 광고) — 새 배너는 점 대신 「NEW」 꼬리표. 배너 그림 432(화면 명세 520 에서 줄임 — 520 이면 1280 안에 아래가 다 안 들어간다, 화면 시안 E01. 재화 막대가 96 이 되며 440 → 432). 그 아래 확률 · 기록 · 「모집 도장 132/200」 버튼 한 줄(「모집 도장」은 줄이지 않는다 — 5-1 #16)(전부 높이 96, 도장 막대 bar.stamp). 보장 문구. 「1회」 「10회」 같은 크기 나란히(120), 둘 다 보조 버튼 · 같은 채움 · 주 버튼 없음(비싼 10회만 청록으로 채우면 uiux 08장 2.2 잘못된 계층구조). 재화가 모자란 버튼만 「재화 부족」 상태(3장). 법정 문구 3문장은 t.body(캡션 크기로 줄이지 않는다) — 폭 640 에서 4줄, 상자 높이(위아래 여백 16 포함) ×1.0 184 · ×1.15 209 · ×1.3 234. 글자를 키우면 늘어난 만큼 배너가 줄어든다(×1.15 432 · ×1.3 400) — 픽업 동료 얼굴·이름·남은 기간은 배너 위 400 안에 둔다. 참고 capybara-go/03
1회 = 카드 하나 크게. 10회 = 2×5 격자, SSR 금빛·새 동료 「NEW」·중복은 「도토 조각 +n」(동료 조각). 아래 「한 번 더 10회」 보조 · 「확인」 주 — 빛구슬이 모자라면 「한 번 더」는 「재화 부족」(3장). 「NEW」는 모집 전 보유 목록에 없던 동료에만
개정 좌표 x·y·w·h (720×1280, 시안 좌표 + 계산)배경 0·0·720·1280카드 24·204·672·640 ← 24·120·672·760모집 도장(명세 「별가루」) 24·868·672·96 ← 24·900·672·60한 번 더 24·1000·324·120 ← 24·1000·330·120확인 372·1000·324·120 ← 366·1000·330·120
E05
모집 도장 교환 (별가루 교환) scr_stardust
「모집 도장 200개를 모으면 원하는 동료 1명」 + 막대. 고를 동료 격자. 「교환」(200 미만 비활성)
쿠키런: 킹덤 10 · Devsisters Corp. 수집 2026-10-14 · App Store · 원본 이벤트: 진행형 칸에 체크, 잠긴 칸 조건 문구, 남은 시간 02:21:52
bruni32
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — I Shop
I · 상점 (6화면)
상점 본화면은 레퍼런스 수집본에 없습니다(patterns.md §0). 그래서 배치는 규정에서 거꾸로 짰습니다 — 원화 가격, 같은 크기의 결제·취소, 결제 버튼 바로 위 청약철회 한 줄, 「확률형」 꼬리표.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
I01
상점 scr_shop
위 탭(추천 · 빛구슬 · 꾸러미 · 정기권 · 일반 · 원정). 「추천」 탭은 지금 받을 수 있는 무료 것만 — 즉시 보상 무료 · 한 달 정기권 오늘분 · 성장 패스 받을 칸 · ▶ 광고 보고 받기(유료 상품은 빛구슬 · 꾸러미 · 정기권 · 일반 탭에만, uiux 08장 2.4). 상품 카드 2열 — 이름 · 구성 칩 · 남은 기간(실제 종료 시각) · 가격 버튼 = 보조 버튼(흰 면 + t.num 원화 가격)(cmp_btn_secondary 가격 변형 — 카드가 여럿이라 주 버튼 청록을 쓰지 않는다, P2). 「확률형」 꼬리표. 아래 「결제 내역 · 청약철회 안내 ›」
개정 좌표 x·y·w·h (720×1280, 시안 좌표 + 계산)재화 막대 0·0·720·96 ← 0·0·720·88탭 0·96·720·96 ← 0·88·720·90상품 목록 24·204·672·876 ← 24·190·672·900하단 안내 24·1088·672·64 ← 24·1100·672·50아래 탭 0·1160·720·120
I02
구매 확인 scr_purchase
구성 목록 → 원화 가격 → 결제 버튼 바로 위 청약철회 한 줄 → 「결제」 주 · 「취소」 보조 같은 크기. 체크박스 미리 선택 없음
성공(보상 칩) / 지연(「우편함으로 보내 드려요」) / 실패(이유 + 문의). 주 버튼 「확인」
개정 좌표 x·y·w·h (720×1280, 계산)어둡게 0·0·720·1280패널(명세 「판」) 48·376·624·528 ← 60·380·600·520상태 그림 256·416·208·160 ← 260·420·200·160문구 88·596·540·160 ← 100·600·520·160버튼 152·788·416·96 ← 160·790·400·90
I04
정기권·성장 패스 scr_pass
위 한 달 정기권 카드(남은 일수 · 오늘 받기 · 다음 결제일·금액). 아래 성장 패스 두 줄(무료/유료) 가로 스크롤 + 「모두 받기」. 광고 생략권 카드(범위 문장)
개정 좌표 x·y·w·h (720×1280, 계산)재화 막대 0·0·720·96 ← 0·0·720·88머리줄 0·96·720·96 ← 0·88·720·80정기권 24·200·672·220 ← 24·176·672·220패스 머리 24·432·672·88 ← 24·410·672·90패스 칸 24·536·672·496 ← 24·510·672·520모두 받기 24·1040·328·100 ← 24·1040·330·100패스 구매 368·1040·328·100 ← 366·1040·330·100
I05
원정 상점 scr_seal_shop
위 원정 주화 잔액 + 새로고침 남은 시간. 고정 6 + 무작위 6 격자. 맨 아래 새로고침 줄 두 칸 같은 크기 — 왼 「▶ 새로고침 (2/2)」 광고(ad_shop → J05) · 오른 「새로고침」(무료 1 → 다 쓰면 빛구슬 30 + 「보유 n」). 수량은 cmp_stepper
레퍼런스 그림 없음이 묶음의 본화면은 이 기획서를 쓸 때 본 1차 수집분에 없습니다(patterns.md §0 — 스토어 스크린샷은 상점·미션·출석·우편·설정 화면을 거의 싣지 않습니다). 배치는 규정(08장)과 공통 부품 규칙으로 정했고, 2차 수집에서 채운 화면(I01 상점 · J01 미션 · J02 출석 등)은 레퍼런스 보드 「화면 유형별」 쪽에 있습니다.
bruni33
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — J Rewards / Inbox
J · 보상·소식 (8화면)
미션·출석·우편·보상 획득·광고 확인·새 기능 열림·가방이 모인 묶음입니다. 「받기」류는 늘 화면 아래쪽(P1), 광고 확인은 두 버튼 같은 크기(P5), 새 기능 열림은 한 번에 하나(4-4)입니다.
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
J01
미션 scr_mission
위 탭(일일 · 주간 · 업적), 활동 점수 상자 막대, 목록 행(과제 · n/n · 보상 칩 · 가기/받기). 아래 고정 「모두 받기」
레퍼런스 그림 없음이 묶음의 본화면은 이 기획서를 쓸 때 본 1차 수집분에 없습니다(patterns.md §0 — 스토어 스크린샷은 상점·미션·출석·우편·설정 화면을 거의 싣지 않습니다). 배치는 규정(08장)과 공통 부품 규칙으로 정했고, 2차 수집에서 채운 화면(I01 상점 · J01 미션 · J02 출석 등)은 레퍼런스 보드 「화면 유형별」 쪽에 있습니다.
bruni34
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — K Settings / System
K · 설정·기타 (6화면)
설정에 접근성 항목(글자 크기 3단 · 움직임 줄이기)과 알림 분리(정보 / 이벤트·상품)를 둡니다. 계정 삭제는 설정에서 두 번 안에 닿습니다(공정위 가이드라인 3.1 취소·탈퇴 방해).
no
화면
배치 원칙 — 주 버튼 · 핵심 정보 · 참고
K01
설정 scr_settings
묶음 목록 행: 소리 · 알림(정보 / 이벤트·상품 따로) · 전투 · 화면(글자 크기 3단 · 움직임 줄이기) · 계정 · 고객 지원
레퍼런스 그림 없음이 묶음의 본화면은 이 기획서를 쓸 때 본 1차 수집분에 없습니다(patterns.md §0 — 스토어 스크린샷은 상점·미션·출석·우편·설정 화면을 거의 싣지 않습니다). 배치는 규정(08장)과 공통 부품 규칙으로 정했고, 2차 수집에서 채운 화면(I01 상점 · J01 미션 · J02 출석 등)은 레퍼런스 보드 「화면 유형별」 쪽에 있습니다.
bruni35
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — X Support
X · 보조 화면 (상품 팝업 · 얻는 곳 · 2겹 확인)
문서가 요구하는데 화면 명세(screens.json 65개)에 id 가 없던 것입니다. 상품 팝업(4-4 「7일간 보지 않기」)과 재화 부족 공통의 「얻는 곳」 팝업을 보조 화면 X01 · X02 로, A04 · B07 · K02 의 두 번째 확인을 공용 부품 cmp_confirm 으로 두었습니다. 좌표는 uiux/data/layout_extra.json 입니다.
no
화면
배치 원칙 · 좌표
X01
상품 팝업(부팅 팝업 줄) scr_offer
공지(A05) 다음 칸에서 하루 1번까지. 튜토리얼 동안은 띄우지 않는다. 제목 띠 → 상품 그림 → 구성 칩 → 원화 가격 · 실제 종료 시각 → 「7일간 보지 않기」(cmp_check, 꺼짐 기본) → 「괜찮아요」 보조 · 「상점에서 보기」 주 같은 크기. 결제로 바로 가지 않고 I01 그 카드로 간다(결제는 늘 I02). 거절한 상품은 7일간 배너로만
들어오는 곳 — 부팅 팝업 줄 — 공지(A05) 다음 칸. 튜토리얼(T01~T17) 동안은 띄우지 않는다어둡게 0·0·720·1280 cmp_popup — dim 60%패널 48·220·624·840 cmp_popup 폭 624제목 띠 48·220·624·88 surface.night 88 + t.title.s닫기 576·216·96·96 ✕ 96 — 닫기 금지형 아님상품 그림 96·332·528·256 그림 + 「확률형」 꼬리표(해당 상품만)구성 96·604·528·112 cmp_chip_reward — 누르면 이름·얻는 곳가격·기간 96·728·528·64 원화 가격 t.num + 실제 종료 시각(4-4)7일간 보지 않기 96·808·528·96 cmp_check — 꺼짐이 기본(미리 켜지 않음). 켜고 닫으면 7일간 이 상품은 배너로만닫기 버튼 72·936·280·96 cmp_btn_secondary — 오른쪽과 같은 크기(P5)상점에서 보기 368·936·280·96 cmp_btn_primary — 결제로 바로 가지 않고 I01 그 카드로. 결제는 늘 I02 를 지난다
X02
얻는 곳(획득처) 팝업 scr_source
재화 부족 토스트의 「얻는 곳」·보상/비용 칩 누름·D01 미보유 카드에서 열린다(screens.json common 「재화 부족 공통」). 제목 「○○을 얻는 곳」 → 보유/필요 → 얻는 곳 행 96(cmp_row — 아이콘 · 이름 · 「가기」). 잠긴 곳은 자물쇠 + 「스테이지 1-15 에서 열려요」, 「가기」 없음. 판매 상품(꾸러미)은 맨 아래 행에만, 점·빛남 없이. 주 버튼 없음
들어오는 곳 — 재화·재료 부족 토스트의 「얻는 곳」 · 보상 칩·비용 칩 누름 · D01 미보유 카드 「얻는 곳 ›」 (screens.json common 「재화 부족 공통」)어둡게 0·0·720·1280 2겹째가 될 수 있다 — 아래가 팝업이면 그 위 1겹(최대 2겹)패널 48·340·624·600 cmp_popup제목 띠 48·340·624·88 「○○을 얻는 곳」닫기 576·336·96·96 ✕ 96보유 96·444·528·56 t.num — 모자란 쪽만 warn.text얻는 곳 목록 72·512·576·336 cmp_row — 아이콘 64 · 이름 · 「가기」 보조 104×96. 잠긴 곳은 자물쇠 + 「스테이지 1-15 에서 열려요」, 「가기」 없음확인 200·868·320·96 cmp_btn_secondary — 이 팝업엔 주 버튼이 없다(고를 것이 목록 행이라)
cmp_confirm
2겹 확인 팝업(공용) ui/popup_confirm2
A04 저장 고르기 확인 · B07 포기 확인 · K02 계정 삭제 확인 — 아래 팝업 위 2겹째
들어오는 곳 — A04 저장 고르기 확인 · B07 포기 확인 · K02 계정 삭제 확인 — 아래 팝업 위 2겹째어둡게 0·0·720·1280 아래 팝업까지 덮는다패널 48·436·624·408 cmp_confirm — 높이 408 고정, 바깥 눌러도 닫히지 않음제목 띠 48·436·624·88 질문형 한 줄문구 96·548·528·152 t.body — 무엇을 잃는지 한 줄 이상되돌릴 수 없음 쪽 72·724·280·96 cmp_btn_secondary — 왼쪽. K02 는 글자 warn.text + 3초 뒤 활성안전한 쪽 368·724·280·96 cmp_btn_primary — 오른쪽(팝업 버튼 줄 규칙). 두 버튼 같은 크기
bruni36
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — Touch fixes 1
96 미만 버튼 57개 — 고친 값 (1/2)
명세에서 kind = btn 인데 높이나 폭이 96 미만이던 버튼입니다. 왼쪽이 명세 좌표, 오른쪽이 개정 좌표(x·y·w·h)입니다.
화면
버튼
명세 글자
명세
개정
이유
A02
이용약관
☐ (필수) 이용약관 보기 ›
40·360·640·90
40·360·640·96
R3 높이 96
A02
개인정보
☐ (필수) 개인정보 처리방침 보기 ›
40·460·640·90
40·472·640·96
R3 높이 96
A02
알림
☐ (선택) 방치 가득·이벤트 알림 받기
40·560·640·90
40·584·640·96
R3 높이 96
A03
스토어로
스토어에서 업데이트
160·740·400·90
136·736·444·96
R3 높이 96 · R5 가로 ×1.11
A05
오늘 그만
☐ 오늘 다시 보지 않기
80·960·280·80
88·960·272·96
R3 높이 96 · R5 가로 ×0.97
A05
닫기
닫기
380·960·260·80
380·960·252·96
R3 높이 96 · R5 가로 ×0.97
B03
무료
무료로 받기 (1/1)
100·650·520·80
88·624·540·96
R3 높이 96 · R5 가로 ×1.04
B03
광고
▶ 광고 보고 받기 (2/2)
100·745·520·80
88·736·540·96
R3 높이 96 · R5 가로 ×1.04
B03
빛구슬
빛구슬 50 으로 받기 (0/3)
100·840·520·80
88·848·540·96
R3 높이 96 · R5 가로 ×1.04
B04
난이도
보통 | 어려움
520·268·180·64
520·304·180·96
R3 높이 96
B04
편성
편성
24·1070·200·80
24·1056·200·96
R3 높이 96
B04
도전
도전 ▶
240·1070·456·80
240·1056·456·96
R3 높이 96
B05
추천
추천 편성
24·1090·220·64
24·1056·220·96
R3 높이 96
B05
저장
저장
476·1090·220·64
476·1056·220·96
R3 높이 96
B06
배속
×1 / ×2
24·880·120·70
24·880·120·96
시안 B06
B06
자동 필살
필살 자동
160·880·160·70
160·880·200·96
시안 B06
B06
일시정지
Ⅱ
576·880·120·70
576·880·120·96
시안 B06
B07
계속
계속하기
160·540·400·90
100·528·520·96
R3 높이 96 · R5 가로 ×1.30
B07
다시
처음부터
160·645·400·90
100·640·520·96
R3 높이 96 · R5 가로 ×1.30
B07
포기
그만두기
160·750·400·90
100·756·520·96
R3 높이 96 · R5 가로 ×1.30
C02
아이템별
아이템별 확률 보기 ›
80·750·560·60
88·736·544·96
R3 높이 96 · R5 가로 ×0.97
C05
모두
6칸 고르게 강화
24·1080·672·70
24·1056·672·96
R3 높이 96
C08
강화
강화 (중복 1 · 숫돌 10 · 골드)
160·1070·400·80
160·1056·400·96
R3 높이 96
D01
정렬
정렬: 전투력 ▾
24·180·420·60
360·216·256·96
시안 D01 — 2줄째(역할·등급 고르기 상자 다음)
D01
보유 토글
미보유도 보기
456·180·240·60
584·104·112·96
시안 D01 — 1줄째 오른쪽 끝
D01
편성
편성으로
24·1090·672·60
24·1048·672·96
시안 D01 — 아래 탭과 16 띄움
D02
넘기기
◀ 이전 동료 | 다음 동료 ▶
0·1080·720·70
0·1176·720·96
시안 D02 — 아래 탭이 없어진 자리
E01
확률
확률
24·730·200·64
24·636·200·96
시안 E01
E01
기록
기록
240·730·200·64
240·636·200·96
시안 E01
bruni37
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
05 / Screens — Touch fixes 2
96 미만 버튼 57개 — 고친 값 (2/2)
화면
버튼
명세 글자
명세
개정
이유
E01
모집 도장
별가루 132/200
456·730·240·64
456·636·240·96
시안 E01 — 「도장 132/200」
E03
건너뛰기
건너뛰기 ▶▶
520·40·180·80
520·40·180·96
R3 높이 96
E06
닫기
닫기
240·1040·240·90
248·1036·220·96
R3 높이 96 · R5 가로 ×0.92
F03
닫기
닫기
240·1100·240·80
248·1092·220·96
R3 높이 96 · R5 가로 ×0.92
G04
도전
도전
160·1080·400·70
160·1056·400·96
R3 높이 96
I03
버튼
우편함으로 / 확인
160·790·400·90
152·788·416·96
R3 높이 96 · R5 가로 ×1.04
I06
문의
결제 문의하기
160·1090·400·70
160·1064·400·96
R3 높이 96
J01
모두 받기
모두 받기
160·1060·400·90
160·1052·400·96
R3 높이 96
J03
모두 받기
모두 수령 (보상 탭만)
160·1060·400·90
160·1052·400·96
R3 높이 96
J04
확인
확인
160·770·400·90
152·764·416·96
R3 높이 96 · R5 가로 ×1.04
J07
버튼
사용 · 판매 · 일괄 판매 · 합성
24·1090·672·70
24·1064·672·96
R3 높이 96
J08
닫기
✕
592·160·88·88
576·140·96·96
cmp_popup ✕ 96 — 패널 오른쪽 위
J08
빼기
−
80·780·88·88
88·792·96·96
cmp_stepper — − · 수량 · + · 최대 한 줄, 간격 16
J08
더하기
+
432·780·88·88
432·792·96·96
cmp_stepper
J08
최대
최대
532·780·108·88
544·792·128·96
cmp_stepper — 패널 안쪽 끝(672)까지
K01
언어
언어: 한국어
24·696·672·70
24·720·672·96
R3 높이 96
K02
탈퇴
계정 삭제
24·1040·672·90
24·1032·672·96
R3 높이 96
K06
예
그만하기
160·670·190·90
100·668·248·96
R3 높이 96 · R5 가로 ×1.30
K06
아니요
계속
370·670·190·90
372·668·248·96
R3 높이 96 · R5 가로 ×1.30
D03
+1
+1
48·960·190·90
24·1048·416·112
시안 D02 — 「레벨업」 주 버튼(길게 누르면 연속). +10 은 길게 누르기로 합침
D03
+10
+10
255·960·190·90
삭제
시안 D02 — 「레벨업」 길게 누르기로 합침(구역 삭제)
D03
최대
할 수 있는 만큼
462·960·210·90
456·1048·240·112
시안 D02 — 「최대로」 보조
D04
무지개
☐ 모자란 2개를 무지개 조각으로
48·830·624·80
48·848·624·96
R3 높이 96 · D02 탭 칸 이동 +16
D04
승급
승급
160·980·400·80
160·1012·400·96
R3 높이 96 · D02 탭 칸 이동 +16
D05
각성
각성
48·975·300·88
48·992·300·96
R3 높이 96 · D02 탭 칸 이동 +16
D05
정수 만들기
정수 만들기 ›
372·975·300·88
372·992·300·96
R3 높이 96 · D02 탭 칸 이동 +16
D06
강화
강화
160·990·400·70
160·1008·400·96
R3 높이 96 · D02 탭 칸 이동 +16
D07
주기
선물하기
160·1000·400·60
160·1016·400·96
R3 높이 96 · D02 탭 칸 이동 +16
bruni38
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
06 / Onboarding — Rules
첫 30분 — 목표와 규칙
첫 30분의 목표는 두 루프를 한 바퀴씩 돌게 하는 것입니다 — 성장 루프(항아리 → 장착 → 도전)와 수집 루프(모집 → 편성 → 레벨업). 설명을 앞에 몰아 보여 주지 않고, 그 행동을 처음 하는 순간에 한 줄로 알립니다(NN/g 2020-06-21, ux.md [U15]).
온보딩 규칙
규칙
값
근거
강제 단계 말풍선
한 줄 20자 안팎
UI 바이블 4-4 · ux.md §7
덧말
그 행동을 처음 할 때 맥락 도움말로(예: 첫 「판매」 때 「약한 장비는 팔면 골드가 돼요」)
NN/g [U15]
새 기능 열림(J06)
한 번에 한 장. 두 기능이 같은 스테이지에서 열려도 사이에 전투 한 번
UI 바이블 4-4
상품 팝업
튜토리얼 안에서는 없음. 상점은 1-5에 열리지만 강조하지 않습니다
UI 바이블 4-4 · ux.md §7
잠긴 기능
숨기지 않고 자물쇠 + 「스테이지 1-5에서 열려요」
patterns.md §1 · cmp_tabbar
건너뛰기
T07 이후 설정 › 「튜토리얼 건너뛰기」 — 보상은 그대로
screens.json tutorial_rules
강제 단계 강조
강조 구역 둘레 8px 밝은 테두리 + 손가락 0.8초 주기, 말풍선은 강조 구역 반대쪽, 나머지는 dim
screens.json tutorial_rules
말하는 이
브루니 초상 + 말풍선(브루니 말투). 시스템 문구는 해요체
screens.json tutorial_rules
시간은 추정입니다T01~T17 「약 12분」은 스테이지당 30~60초를 가정한 명세서 값입니다. U01 이후는 순서만 정했고 몇 분째인지는 모릅니다. 출시 전 테스트에서 단계별 도달 시각과 이탈을 이벤트 로그로 재서 바꿉니다.
bruni39
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
06 / Onboarding — Tutorial 1
튜토리얼 T01~T09 — 개정 문구
위 줄(취소선)이 지금 명세의 말풍선, 아래 굵은 줄이 바꾼 말풍선입니다. 괄호 속 글자 수는 생성기가 띄어쓰기와 「브루니:」를 빼고 센 값입니다(「바꾼 이유」 칸에는 글자 수를 손으로 적지 않습니다). 20자를 넘는 말풍선: 없음.
단계
시작 조건
화면
말풍선
방식
바꾼 이유
T01
약관 동의 끝
F02 이야기 보기
1장 1화 「초록곶의 아침」 재생(넘기기 가능) (1장 1화 「초록곶의 아침」)
넘기기만
장면 수를 3장면 이하로 줄이거나 1화 중간에 항아리 한 번을 끼운다(내부 판단 — 첫 탭에서 손맛)
T02
1화 끝
B01 모험
브루니: 할매가 준 항아리야. 붓으로 톡 치면 물감이 굳어서 장비가 돼! 항아리를 톡 눌러 봐요 (26자 → 9자)
강제
붓 → 물감. 「붓으로 톡 치면 물감이 굳어서 장비가 돼」(28자)의 원리 설명은 C01 첫 결과 화면의 한 줄로 옮깁니다
T03
첫 장비
C01 항아리 결과
브루니: 무기가 생겼어! 끼워 볼까? 무기가 생겼어! 장착해 볼까? (12자 → 13자)
강제
브루니 말투 유지. 「끼워 볼까?」의 「끼다」는 반지·장갑에 쓰는 동사라 무기에는 어색해서, 버튼 이름과 같은 「장착」으로 맞췄습니다
T04
장착 끝
B01 모험
4번 더 열어 봐요. 약한 장비는 팔아서 골드로 바꿔요. 4번 더 열어 봐요 (23자 → 7자)
강제
판매 설명은 첫 「판매」 누름 때 맥락 도움말 「약한 장비는 팔면 골드가 돼요」로 옮겼습니다
T05
항아리 5회
B01 모험
브루니: 저 언덕까지 가 보자. 길에 바랜것이 있어. 저 언덕까지 가 보자! (18자 → 9자)
강제
「다음 판 도전」 → 「도전 ▶ 1-1」, 「바랜것」 낱말 삭제(잿빛 무리는 전투 화면에서 처음 보입니다)
세 기능 묶음 → 즉시 보상 하나만. 배속·이벤트는 아래 U01·U02 로 나눕니다. 보상 빛구슬 100 은 그대로
1-8 에 열리는 항아리 레벨업T14(1-7)와 T16(1-9) 사이, 1-8 클리어에 물감 항아리 레벨업이 열립니다(screens.json unlock). J06 없이 홈 항아리의 레벨 꼬리표만 1회 빛냅니다 — 튜토리얼 흐름을 끊지 않으려는 것입니다.
bruni41
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
06 / Onboarding — After tutorial
튜토리얼 뒤 — 12분부터 30분까지
지금 명세는 T17(1-10 클리어)에서 즉시 보상·배속·이벤트를 한 장에 열고 끝납니다. 세 개를 한 팝업에 넣으면 셋 다 기억하지 못하므로(ux.md §7) 나눠서 열고, 그 뒤 해금(screens.json unlock)을 아래 순서로 하나씩 엽니다.
단계
시작 조건
화면
보이는 것
규칙
U01
T17 뒤 첫 전투(B06) 시작
B06
배속 버튼 테두리 빛남 1회 + 말풍선 「눌러서 2배로 빨라져요」
J06 을 띄우지 않습니다 — 전투 중이라 팝업은 흐름을 끊습니다
U02
U01 뒤 홈(B01) 복귀
J06 → H01
J06 「이벤트가 열렸어요」 한 장 → 「가 보기」면 H01
이벤트 상점·상품 팝업은 같이 띄우지 않습니다
U03
홈 안내 미션 카드 시작
B01
cmp_guide_card 가 길잡이를 맡는다(아래 표 「안내 미션 첫 10개」)
카드는 하나만. 다 받으면 다음 과제로 즉시 바뀝니다
U04
브루니 Lv7
C04 → C05
브루니 탭 점 + C04 강화 가능 칸 빛남 1회
J06 없음 — 이미 아는 화면 안의 새 버튼은 맥락 강조로 충분합니다
U05
1-13 클리어(1장 5화)
J06 → D07
J06 「동료에게 선물을 줄 수 있어요」 → 선물 1번 손가락 안내
한 번에 하나. J06 설명은 「무엇이 열렸다」가 아니라 「무엇을 할 수 있다」로(4-4 · J06 한 줄 설명)
U06
1-15 클리어
J06 → G01 → G02
J06 「원정이 열렸어요」 → 골드 동굴 입장 손가락 안내
원정 알림 점은 첫 진입 뒤 끈다(4-3)
U07
1-20 클리어
D04 · C03
승급 탭 빛남 1회. 같은 시점에 열리는 「항아리 자동 열기」는 다음 홈 복귀 때 따로 자동 버튼 빛남 1회
두 기능이 같은 스테이지에서 열려도 J06 은 하나씩, 사이에 전투 한 번
U08
1-25 클리어
G02
열매 숲 탭에 「NEW」 꼬리표만
J06 없음 — 이미 연 화면(G02)의 새 탭입니다
T17 1-10즉시 보상 열림
다음 전투
U01 배속맥락 강조
홈 복귀
U02 이벤트J06 한 장
U03 안내 미션길잡이 시작
Lv7
U04 장비 강화점 + 빛남
1-13 · 1-15
U05 우정 · U06 원정J06 하나씩
bruni42
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
06 / Onboarding — Guide missions
안내 미션 카드 — 첫 10개
튜토리얼이 끝난 뒤 길잡이는 홈의 안내 미션 카드 한 장이 맡습니다(키우기 3종 공통 — legend-of-slime/06 · seven-knights-idle/05 · cookierun-crumble/01). 「가기」는 screens.json mission_go 이동표를 그대로 씁니다. 순서는 성장(1·2·3·5) → 방치(4·8) → 새 기능(6·7·10) → 다음 고비(9)를 번갈아 두어 한 가지만 반복하지 않게 했습니다. 1번을 1-15 로 둔 까닭은 6번(선물, 1-13 해금)과 7번(골드 동굴, 1-15 해금)이 1번만 깨면 열려 있게 하려는 것입니다.
#
과제(화면 문구)
미션 종류
「가기」 이동
1
스테이지 1-15 깨기
stage_clear
B04 지도 — 최고 다음 스테이지 선택된 채로
2
항아리 30번 열기
pot_open
B01 — 항아리 강조 1회
3
아무 동료 Lv10 만들기
unit_lvup
D01 — 레벨 정렬
4
방치 보상 받기
idle_claim
B02
5
장비 +1 강화하기
gear_enh
C05 — 가장 낮은 칸 선택
6
동료에게 선물 1번 주기
gift
D01 — 우정 정렬
7
골드 동굴 1번 들어가기
dungeon
G01
8
즉시 보상 1번 받기
quick_idle
B03
9
스테이지 1-20 깨기
stage_clear
B04
10
동료 승급 1번 하기
unit_star5 계열
D01 — ★ 정렬
해금 안 된 과제는 건너뜁니다카드는 열린 과제 가운데 번호가 가장 앞선 것을 보입니다. 잠긴 기능을 가리키는 과제는 건너뛰고, 열리는 순간 그 과제로 돌아옵니다 — 「가기」가 자물쇠 토스트로 끝나는 일을 막습니다. 아래 표는 과제마다 열리는 조건과, 앞 과제가 보장하는 최고 스테이지를 맞대 본 것입니다.
#
과제
열리는 조건(screens.json unlock)
앞 과제까지 보장
판정
메모
1
스테이지 1-15 깨기
시작(스테이지 도전)
1-10(튜토리얼 끝)
열림
—
2
항아리 30번 열기
시작
1-10
열림
—
3
아무 동료 Lv10
1-3(동료 레벨업)
1-10
열림
—
4
방치 보상 받기
시작
1-10
열림
—
5
장비 +1 강화
브루니 Lv7
1-15(#1)
미확인
브루니 Lv7 도달 스테이지는 economy_sim.json 에 시간별 값이 없어 모른다(첫날 끝 중앙값 Lv16 · 스테이지 19 — f2p day1, 2026-10-14 출력). 못 열렸으면 건너뛰기 규칙
6
선물 1번
1-13(우정·선물)
1-15(#1)
열림
예전 순서(1번 = 1-12)에서는 잠긴 채였다
7
골드 동굴 1번
1-15(원정·골드 동굴)
1-15(#1)
열림
예전 순서에서는 잠긴 채였다
8
즉시 보상 1번
1-10(즉시 보상)
1-10
열림
—
9
스테이지 1-20 깨기
시작
1-15
열림
—
10
승급 1번
1-20(승급)
1-20(#9)
열림
—
보상 숫자는 이 문서가 정하지 않습니다보상량은 game-design/data/missions.json 과 경제 명세가 기준입니다. 이 표는 순서와 이동만 정합니다. 카드는 한 번에 하나만 보이고, 받으면 즉시 다음 과제로 바뀝니다.
쿠키런: 크럼블 01 · Devsisters Corp. 수집 2026-10-14 · App Store · 원본 안내 미션 「아무 돌파력 10레벨 올리기 10/10」 · 「스테이지 84-14」 장-순번 표기
bruni43
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
07 / Red dots
알림 점 규칙
빨간 점은 「지금 누르면 3초 안에 얻을 것이 있다」는 한 가지 뜻입니다. 판매·광고·새 배너에는 쓰지 않습니다. 점이 늘 켜져 있으면 정말 받을 것이 있을 때도 누르지 않게 됩니다(NN/g 2024-01-17, ux.md [U11]).
자리
켬 조건 — 확정
바뀐 것
모험 탭 · 방치 상자
누적 ≥ 상한 90%
유지
미션 · 출석 · 우편 · 이벤트 · 이야기
명세 그대로
유지
원정
열쇠 ≥ 1 또는 토벌 남음 — 첫 진입 뒤 끄고 타일에 「남은 열쇠 n」만
하루 종일 켜짐 방지
브루니 탭
강화 비용이 처음으로 충분해진 순간 1회 → 탭에 들어가면 끔(그 뒤는 C04 칸의 ▲ 꼬리표로만) · 새 색 열림 · (자동 장착을 끈 사람만) 더 좋은 장비
방치형이라 골드가 계속 쌓여 「강화 가능 칸」은 하루 종일 켜진다 — 운영 규칙 ③·⑤(기획서 07장)와 부딪혀 1회로 줄였다. 항아리 열 때마다 깜빡임도 막는다
동료 탭
승급 가능 · 각성 가능 · 새 동료
유지
모집 탭
모집 도장 ≥ 200(교환 가능 = 확정 보상)만
「새 배너」 → 배너 「NEW」 꼬리표, 「광고 무료 모집 남음」 → 빼기, 「모집권 ≥ 1」 → 빼기 — 모집권 보유는 확률형 뽑기를 쓰라는 권유라 「3초 안에 해결되는 얻을 것」이 아니다. 보유는 E01 「1회 모집」 버튼 아래 「보유 3」으로만 알린다(P5 · 운영 규칙 ①④ · ux.md §5)
상점 탭
정기권 오늘분 · 무료 상품 · 패스 받을 칸
유지
운영 규칙
#
규칙
예
①
점은 3초 안에 해결되는 것에만
미션 받기 · 출석 · 우편 받기 · 승급 가능
②
숫자 점은 놓치면 손해인 것에만
우편 만료 1일 전 「3」
③
하루 종일 켜질 조건은 첫 진입 뒤 끄고 꼬리표로 넘김
원정 → 타일 「남은 열쇠 2」 · 브루니 탭 강화 가능 → 처음 1회만, 뒤는 C04 칸 ▲
④
판매·광고·뽑기 권유는 점 대신 꼬리표·표기
새 배너 → 「NEW」 · 한정 상품 → 「한정 2:15:07」 · 모집권 보유 → E01 「1회 모집」 아래 「보유 3」
⑤
QA: 평범한 하루 30분 동안 동시에 켜진 점 4개 이하
내부 목표값(외부 근거 없음 — ux.md §5)
「평범한 하루」 표본 — 동시에 켜진 점 3개(상한 4)
자리
상태
이유
모험 탭 · 방치 상자
꺼짐
방금 B02 에서 받았다(90% 미만)
미션
켜짐
받을 일일 미션 보상
출석
꺼짐
접속 흐름에서 J02 를 받고 왔다(04장 「매일 들어올 때」)
우편
켜짐
운영 우편 1통
이벤트 · 이야기
꺼짐
새 이벤트 첫 진입 뒤 · 안 본 화 없음
원정
꺼짐
첫 진입 뒤 끔(4-3)
브루니 탭
꺼짐
강화 비용이 처음 충분해진 순간은 이미 지났다 — C04 칸 ▲ 꼬리표만
동료 탭
켜짐
승급 가능 1명
모집 탭
꺼짐
도장 132/200
상점 탭
꺼짐
정기권 없음 · 무료 상품 받음
명세서(screens.json) 원래 조건 — 대조용
자리
원래 켬 조건
사냥 탭 · 방치 상자
방치 누적 ≥ 상한의 90%
미션
받을 보상 1개 이상
출석
오늘 칸 안 받음
우편
안 받은 우편 1개 이상(만료 1일 전이면 숫자)
이벤트
받을 이벤트 미션 보상 · 새 이벤트 시작 후 미진입
이야기
열렸는데 안 본 본편 화 · 개인 이야기 화
원정
남은 던전 열쇠 ≥ 1 또는 주간 토벌 남은 횟수 ≥ 1
브루니 탭
더 좋은 장비가 가방에 있음 · 강화 가능한 칸(재료 충분) · 새 색 해금
동료 탭
승급 가능 · 각성 가능 · 새 동료(안 연 카드)
모집 탭
모집권 ≥ 1 · 광고 무료 모집 남음 · 별가루 ≥ 200 · 새 배너
상점 탭
정기권 오늘분 미수령 · 무료 상품 · 성장 패스 받을 칸
bruni44
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
08 / Monetization — Dark patterns
과금 화면 — 다크패턴 13유형 금지
과금 화면의 원칙은 P5 한 줄입니다 — 사게 만들지 말고 고르게 한다. 근거는 공정거래위원회가 2026-10-06 배포한 「다크패턴 방지를 위한 온라인 인터페이스 운영 가이드라인」(2026.9. 작성, 4개 범주 13개 유형)입니다. 가이드라인 자체는 구속력이 없지만, 근거 조문(전자상거래법 제13조·제21조·제21조의2, 시행령 제20조의2·제27조의2)은 과태료 1천만~2천만원 이하 대상입니다(ux.md §6-1, [U8]).
다크패턴 13유형 — 우리 화면에서 금지하는 방식
범주
유형
흔한 모습
우리 화면 규칙
편취형
1.1 숨은갱신
정기권 가격을 바꾸면서 동의 없이 다음 결제에 반영
한 달 정기권(I04)이 자동 갱신이면 다음 결제일·금액을 카드에 늘 적습니다. 가격을 바꿀 때는 30일 전 동의·고지(시행령 제20조의2). 해지는 스토어 구독 관리로 한 번에 가는 버튼을 둡니다
편취형
1.2 순차공개 가격책정
목록엔 싼 값, 결제 단계에서 값이 늘어남
I01 상품 카드의 원화 가격 = I02 결제 금액. 스토어 결제라 추가 요금이 없으므로 다른 숫자가 나올 자리가 없습니다
오도형
2.1 특정옵션 사전선택
「함께 사기」·선택 동의 체크를 미리 켜 둠
I02 와 A02(약관 선택 항목)에 미리 켜진 체크 없음
오도형
2.2 잘못된 계층구조
「사기」는 크게, 「닫기」는 작은 회색 글자
결제/취소 · 광고 보고 받기/괜찮아요 · 1회/10회 모두 같은 크기·모양, 채움만 다름(P5)
오도형
2.3 거짓 할인
실제로 판 적 없는 원가로 「80% 할인」
「~% 이득」은 같은 빛구슬 단가를 기준으로만 씁니다. 기준 단가 상품이 실제로 상점에 있어야 합니다
오도형
2.4 거짓 추천
인기·추천 표시를 근거 없이 붙임
「추천」 탭은 「지금 받을 수 있는 무료·정기권 오늘분」 같은 규칙으로만 채웁니다. 「인기 1위」 표시는 쓰지 않습니다
오도형
2.5 유인 판매
싼 상품으로 끌고 품절시켜 비싼 상품으로 유도
광고하는 상품은 기간 안에 늘 살 수 있습니다. 수량 제한이면 남은 수량을 카드에 적습니다
오도형
2.6 위장 광고
광고를 게임 보상 안내처럼 보이게 함
광고 버튼에는 늘 ▶ 아이콘과 「광고」 낱말. J05 에서 광고임을 먼저 말합니다
오도형
2.7 속임수 질문
「구매를 취소하지 않으시겠어요?」 같은 이중 부정
질문은 긍정형 한 문장, 버튼 글자는 동사(「결제」「취소」)
방해형
3.1 취소·탈퇴 방해
계정 삭제를 깊이 숨김
설정(K01) → 계정·저장(K02) → 「계정 삭제」 — 두 번 안에 닿습니다
방해형
3.2 숨겨진 정보
「평생 광고 없음」인데 실제로는 일부만
광고 생략권에 「평생」 금지 — 범위 문장 한 가지만: 「광고 자리 6곳(하루 최대 14회)의 보상을 광고 없이 바로 받아요 · 하루 횟수는 그대로예요 · 계정에 남아요 · 서비스가 끝날 때까지」
방해형
3.3 가격비교 방해
꾸러미마다 단위가 달라 비교 불가
빛구슬을 쓰는 버튼 아래 보유량, 상점 빛구슬 값 옆 원화 환산을 작게
압박형
4.1 반복간섭
거절한 상품 팝업을 매번 다시 띄움
상품 팝업은 「7일간 보지 않기」 필수, 거절한 상품은 7일간 배너로만(시행령 제27조의2). 튜토리얼 안에서는 상품 팝업 없음
bruni45
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
08 / Monetization — Game bans
과금 화면 — 게임 고유 금지 8가지
가이드라인 13유형 밖에서, 수집형·방치형 게임이 자주 밟는 것들입니다. 스토어 정책과 광고 정책이 근거입니다.
금지
흔한 모습
대신 / 근거
죄책감 문구(confirmshaming)
「아니요, 보상을 포기할래요」 같은 거절 버튼 글자
거절 버튼은 「괜찮아요」「취소」. AdMob 보상형 정책의 오도 문구 금지([U17])
판매용 빨간 점
새 배너·광고 무료 모집·모집권 보유·상품에 빨간 점
점은 3초 안에 해결되는 얻을 것에만(4-3). 새 배너는 「NEW」 꼬리표, 모집권 보유는 E01 「1회 모집」 아래 「보유 3」
거짓 긴급성
끝난 「한정」 상품을 같은 구성으로 곧바로 재등록
남은 시간 꼬리표 = 실제 종료 시각. 재판매는 구성·이름을 바꾸고 「한정」을 붙이지 않습니다
확률 개별 누락
등급 합계만 보이고 동료별 확률이 없음
E02 는 동료·아이템마다 한 줄. 위반 사례의 약 51% 가 개별 확률 누락(monetization-law L8)
확률 버튼 멀리 두기
확률을 설정 깊은 곳에
E01 의 확률 버튼은 모집 버튼과 같은 화면 · 같은 높이 96
알림 켜면 보상
「푸시 켜면 빛구슬」
금지 — App Store 5.1.1([U12]). 판촉 알림은 정보 알림과 따로 켭니다
별점 남기면 보상
「리뷰 쓰면 빛구슬」
금지 — App Store 3.2.2(x)([U12])
광고 강제
전면 광고·끄지 못하는 광고
보상형만, 늘 J05 동의 뒤. 광고 자리 6곳 · 하루 합계 14회 상한(bible 9-4 · shop.json ad_slots)
카피바라 GO 03 · HABBY PTE. LTD. 수집 2026-10-14 · App Store · 원본 뽑기: 광고 무료(3/3) · 1회 · 10회 세 버튼이 한 줄. 우리는 광고 모집을 배너 탭 하나로 둔다(점 없음)
capybara-go/03 에서 가져오지 않은 것광고 무료 버튼을 1회·10회와 같은 줄에 두고 점을 붙이는 배치입니다. 우리는 광고 모집을 배너 탭 하나로 두고 점을 켜지 않습니다(4-3). 1회·10회를 같은 크기로 나란히 둔 것만 가져옵니다.
bruni46
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
08 / Monetization — Checklist
과금 화면 체크리스트 — 화면별
출시 전 검수 때 화면마다 이 줄을 하나씩 확인합니다. 하나라도 빠지면 그 화면은 통과가 아닙니다.
화면
있어야 하는 것
I01 상점
상품 카드에 이름 · 구성 칩 · 원화 가격 · 남은 기간(실제 종료 시각)/남은 수량. 확률형 상품은 「확률형」 꼬리표. 아래 「결제 내역 · 청약철회 안내 ›」
I02 구매 확인
구성 목록 → 원화 가격 → 결제 버튼 바로 위 청약철회 한 줄(전자상거래법 제17조 ⑥) → 「결제」 주 · 「취소」 보조 같은 크기. 미리 켜진 체크 없음
I03 결제 결과
성공(보상 칩) · 지연(「우편함으로 보내 드려요」) · 실패(이유 + 문의). 실패를 성공처럼 보이지 않게 색이 아닌 문장으로 먼저 말합니다
I04 정기권·패스
남은 일수 · 오늘 받기 · 다음 결제일·금액. 광고 생략권 카드는 범위 문장 「광고 자리 6곳(하루 최대 14회)의 보상을 광고 없이 바로 받아요 · 하루 횟수는 그대로예요 · 계정에 남아요 · 서비스가 끝날 때까지」
I06 결제 내역
유료 빛구슬 잔액 · 결제 목록 · 청약철회 안내 문단 t.long
E01 모집
확률 버튼 높이 96 · 1회/10회 같은 크기 · 법정 문구 3줄 t.body(캡션 크기로 줄이지 않는다)
B03 즉시 보상
무료 · ▶ 광고 · 빛구슬 50 세 칸. 빛구슬 버튼 아래 「보유 1,230」
J05 광고 보상 확인
받을 보상 칩 · 「짧은 광고를 보면 받아요」 · 오늘 남은 횟수 · 같은 크기 두 버튼 · 실패 문구(횟수 안 깎음)
광고 보상 — AdMob 보상형 정책을 화면으로
정책(요지)
우리 화면
분명한 동의 뒤에만 보여 줌
광고 자리 버튼 → J05 확인 → 광고. 바로 재생 없음
할 행동과 받을 보상을 명확히
J05 에 보상 칩 · 「짧은 광고를 보면 받아요」 · 오늘 남은 횟수
건너뛰거나 닫을 수 있음
J05 「괜찮아요」 같은 크기. 광고 자체의 닫기는 광고망 규칙
오도 문구·아이콘 금지
죄책감 문구 금지 · ▶ 아이콘과 「광고」 낱말
무작위 보상이면 전부 공개
광고 모집도 일반 모집과 같은 확률표(bible 9-4)
다 보면 반드시 지급
실패 시 「지금은 광고를 불러올 수 없어요. 잠시 뒤 다시 해 주세요.」 + 횟수 안 깎음
근거: Google AdMob 「Policies for ad units that offer rewards」(ux.md [U17], 2026-10-14 열람) · App Store 심사 지침 4.5.4([U12]).
bruni47
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
08 / Monetization — Ad slots
광고 자리 6곳 — 어디에 어떤 모양으로
보상형 광고는 아래 6자리에서만 나옵니다(shop.json ad_slots · bible 9-4). 하루 횟수를 모두 더하면 14회입니다. 모든 자리는 같은 규칙을 따릅니다 — 보조 버튼(또는 받기 버튼)에 ▶ 아이콘과 남은 횟수 「(n/n)」, 누르면 J05 확인, 다 쓰면 숨기지 않고 비활성 「내일 04:00 에 채워져요」. 빨간 점은 달지 않습니다(4-3).
자리 id
이름
화면
버튼 위치
남은 횟수 표시
다 쓴 상태
하루
ad_idle2x
방치 보상 2배
B02 방치 보상
버튼 줄 오른쪽 — 「받기」와 같은 크기 280×120
「▶ 2배로 받기 (1/1)」
「내일 04:00 에 채워져요」 비활성(숨기지 않음)
1
ad_quick
즉시 보상 추가
B03 즉시 보상
세 칸 가운데 — 무료 · ▶ 광고 · 빛구슬
「▶ 광고 (2/2)」
같음
2
ad_recruit
광고 모집
E01 모집 — 「광고」 배너 탭
배너 탭을 골랐을 때만 1회 버튼 자리. 1회·10회 줄에 넣지 않는다
「▶ 1회 모집 (1/1)」
같음 + 탭에 점 없음
1
ad_brush
물감 받기
B01 모험(홈) — 물감 0 상태
항아리 위에 겹쳐 256×96(보조 + 광고 변형). 물감이 1 이상이면 사라진다
「▶ 물감 +30 (5/5)」
같음 — 그 뒤 물감 0 이면 토스트 「물감이 모자라요」 + 「얻는 곳」(X02)
5
ad_dungeon
던전 추가 입장
G02 일일 던전 입장
「입장」 · 「소탕」 옆 보조 버튼 — 무료 입장을 다 쓴 뒤
「▶ 한 번 더 (3/3)」
같음
3
ad_shop
원정 상점 새로고침
I05 원정 상점
맨 아래 새로고침 줄 왼쪽 328×100(오른쪽 무료·빛구슬 새로고침과 같은 크기)
「▶ 새로고침 (2/2)」
같음
2
광고 생략권 범위 문장 — 한 가지만 씁니다「광고 자리 6곳(하루 최대 14회)의 보상을 광고 없이 바로 받아요 · 하루 횟수는 그대로예요 · 계정에 남아요 · 서비스가 끝날 때까지」. 자리 수(6)와 하루 횟수(14)를 나눠 적습니다. shop.json no_ads.effect 의 「보상형 광고 14자리」는 횟수를 자리로 잘못 적은 것이라, 메인에 고침을 제안했습니다(UI 바이블 9장 ⑫). 바이블 4-4 · 08장 다크패턴 3.2 줄 · I04 체크리스트가 같은 문장을 씁니다.
bruni48
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
09 / Accessibility
접근성
접근성 설정은 설정(K01) › 화면 묶음에 둡니다. 기본값만으로도 아래 기준을 넘게 만들고, 설정은 더 필요한 사람을 위한 것입니다.
항목
값
어떻게
근거
글자 크기 3단
K01 화면 › 글자 크기: 보통 ×1.0 · 크게 ×1.15 · 아주 크게 ×1.3
×1.3 에서 라벨이 안 잘리게 칸을 잡습니다. 시안 검수 때 세 단계로 다 찍어 봅니다
Apple Dynamic Type 권장([U1]) · WCAG 1.4.12([U6])
최소 글자
24px(360dp 기기 12sp). 그보다 작은 글자 없음
t.caption 이 바닥값
Apple 최소 11pt([U1]) · Material bodySmall 12sp([U3])
줄 간격
본문 1.5 · 긴 글 1.6 · 한 줄 라벨 1.25
한글 받침 때문에 1.5 쪽을 택합니다
WCAG 1.4.12([U6]) · Material 비율 1.43~1.5([U3])
대비
본문 4.5:1 · 큰 글자·아이콘·테두리 3:1
2장 토큰 표의 계산값을 쓰고, 새 색을 넣을 땐 같은 공식으로 계산해 표에 더합니다. 청록은 글자색 금지(크림 위 2.45)
WCAG 1.4.3 · 1.4.11([U4])
색약
색 + 모양 + 글자 셋 중 둘 이상(P3)
속성 = 칩 색 + 상징 아이콘 + 이름 · 등급 = 띠 색 + 글자 · 판정 = 배지 색 + 낱말 · 능력치 = ▲▼ + 색
WCAG 1.4.1
누르는 영역
96×96 이상, 사이 16px
그림이 작아도 영역은 96. 목록 행 높이 96 이상
Android 48dp([U2]) · WCAG 2.5.8([U7])
움직임 줄이기
K01 화면 › 움직임 줄이기
화면 전환 밀기·팝업 확대 → 페이드만. 빛남 숨쉬기·떠오르는 숫자 끔. 모집 연출(E03)은 정지 카드 한 장으로
screens.json common 「화면 전환」
깜빡임
1초에 3번 넘게 번쩍이는 효과 없음
필살 컷인·SSR 연출의 흰 번쩍임은 1회. 알림 점 맥박(fxu_dot_pulse)은 1.2초 주기
WCAG 2.3.1(이번 조사에서 원문 열람 안 함 — 기준 이름만 적는다)
한 손
주 버튼·받기는 y ≥ 840
결제로 이어지는 버튼은 아래 탭과 24px 이상 떨어집니다
Hoober 2013([U9])
소리 없이도
소리로만 알리는 정보 없음
필살 준비·보스 등장은 소리 + 초상 빛남/띠 글자를 같이 씁니다
내부 판단(외부 근거 없음)
읽는 속도
자동 넘김은 기본 꺼짐
이야기 자동 넘김(F02)은 켜야 동작하고 속도 3단. 튜토리얼 말풍선은 시간으로 사라지지 않습니다
내부 판단(외부 근거 없음)
언어
어절 단위 줄바꿈
Godot autowrap_mode = WORD — 「항아/리야」처럼 끊지 않습니다
W3C klreq([U10])
bruni49
bruni · 브루니 키우기: 바랜 섬UI/UX 기획서
09 / Accessibility — Samples
접근성 견본 — 글자 3단 · 색 없이 읽기
글자 크기 3단(본문 t.body, 360 폭 기준)
보상 칩을 누르면 얻는 곳이 보여요보통 ×1.0
보상 칩을 누르면 얻는 곳이 보여요크게 ×1.15
보상 칩을 누르면 얻는 곳이 보여요아주 크게 ×1.3
색을 빼도 읽히는가
공격력1,240▲ 120
색 + ▲ 기호
방어력860▼ 40
색 + ▼ 기호
추천12,000아슬
숫자는 늘 본문색
공격력1,240▲ 120
색 + ▲ 기호
방어력860▼ 40
색 + ▼ 기호
추천12,000아슬
숫자는 늘 본문색
아래 줄은 같은 견본을 흑백으로 바꾼 것입니다(CSS grayscale). 색이 사라져도 ▲▼ 기호와 「아슬」 낱말로 뜻이 남아야 합니다.
움직임 줄이기를 켜면화면 전환 밀기·팝업 확대 → 페이드만 · 빛남 숨쉬기 → 고정 고리 · 떠오르는 「+n」 숫자 끔 · 모집 연출(E03) → 정지 카드 한 장. 소리와 진동은 따로 끕니다.
