🌙 NIGHTFALL UI 전수 리뷰 — 쇼케이스 빌드

windy 7/31 디자인 패스 · ThreeJS 렌더러 기본 · seed 42 · 14화면 129항목 — 항목마다 유지/수정 + 코멘트
0/129 응답

사용법 — 스샷 위 ●번호 핀이나 아래 목록을 클릭하면 해당 컴포넌트가 하이라이트돼요. 각 항목에 유지/수정을 고르고, 수정이면 코멘트를 적어주세요. (유지 상태에서 항목을 다시 클릭하면 메모란이 열려요)

실물 확인: https://nf-pages.pages.dev/nightfall-showcase/?seed=42쇼케이스 빌드(ThreeJS 렌더러 기본, 깨지면 ?gfx=css) 기준이에요. 시드 42로 진행하면 이 스샷과 같은 흐름 · 입력은 브라우저에 자동 저장돼요.

다 되면 상단 📋 답변 복사 → 슬랙/채팅에 붙여넣기. 부분 응답도 복사돼요.

01 데모 팁 모달

첫 진입 시 뜨는 「데모 보는 법」 안내 모달 (뒤는 라이벌 화면).

▶ 라이브로 열기
데모 팁 모달
1
팁 카드 전체 (제목+6수칙 리스트)
#nf-demo-tips .nf-tips-card · “NIGHTFALL — 데모 보는 법 아래 6가지만 지키면 의도된 화면이 나옵니다”
2
서브카피
.nf-tips-sub · “아래 6가지만 지키면 의도된 화면이 나옵니다.”
3
풋노트 (렌더러 폴백·빌드 구분 안내)
.nf-tips-foot · “화면이 깨지면 주소 끝에 ?gfx=css를 붙여 렌더러를 되돌릴 수 있습니다. ”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

02 라이벌 선택

리디자인된 라이벌 카드 — 플레이트 초상·성향 트레이트·인사말·배지.

▶ 라이브로 열기
라이벌 선택
1
전광판 스트립 — 로고
.og-logo · “NIGHTFALL”
2
전광판 스트립 — 대진 표기 ×3
.og-lumi/.og-vs/.og-rivalname · “루미 vs ???”
3
전광판 스트립 — 세트/스코어 ×2
.og-setlbl/.og-score · “SET 1 · GAME 1”
4
플로우 레일 (진행 단계 표시) ×6
.og-flow-rail — 신규 · “코인 토스권리 배분맵 베토밴 2 · 픽 2밴픽1밴 + 3픽블라인드 배치위치 + ”
5
LIVE 필
.og-live-pill · “실시간 모드”
6
헤딩 (아이브로+타이틀+서브) ×3
.og-eyebrow/.og-title/.og-sub · “STUDIO · 오늘의 매치 편성”
7
헤딩 룰 타일 (규칙 요약) ×5
.og-hrt ×4 — 신규 · “오늘의 규칙2승세트 승리 조건BEST OF 3 — 먼저 2게임21명사용 가능 로”
8
라이벌 카드 전체 레이아웃 ×3
.og-rcard ×3 · “폭주형전진 배치왔구나! 한 판 뜨자비앙카Bianca묻지마 딜 폭탄부터 던지고 보”
9
플레이트 초상 연출 (레이+글로우+프린트) ×6
.og-portrait/.og-pl-* — 신규
10
카드 태그 + 인사말 ×6
.og-rcard-tag/.og-rcard-greet — 신규 · “폭주형”
11
카드 이름줄 (한/영) ×6
.og-rcard-name/.og-rcard-en · “비앙카”
12
소개 블러브 ×3
.og-rcard-blurb · “묻지마 딜 폭탄부터 던지고 보는 상대. 손해 계산은 다음 문제.”
13
성향 트레이트 리스트 (키·값·바) ×21
.og-trait ×18 — 신규 (구 필 바 대체) · “코인 권리선공권을 챙김픽 순서를 쥐면 선픽드래프트 템포0.9–2.2초즉답형선호 ”
14
라이벌 배지 열 ×6
.og-rbadge ×4 — 신규 · “전진 배치”
15
카드 CTA ×3
.og-rcard-cta — 신규 · “이 상대와 대결 →”
16
추천 마크
.og-rcard-rec · “추천 상대!”
17
페이즈 pip ×4
.og-pip ×4
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

03 코인플립

풀 스테이지 리디자인 — 양측 요약 패널+코인 풀+권리 안내+진행 예고.

▶ 라이브로 열기
코인플립
1
플립 스트립 (상단 요약 띠) ×3
.og-flip-strip — 신규 · “SET 1 · GAME 1맵 미정 — 베토 예정비앙카는 선공권을 노려요”
2
양측 사이드 패널 (초상+이름+대사) ×6
.og-flip-side ×2 — 신규 · “루미루미“어… 뒷면이네요. 계산 오차예요!”시리즈SET 1BEST OF 3 · ”
3
사이드 성향 행 리스트 ×14
.og-fs-row ×12 — 신규 · “시리즈SET 1BEST OF 3 · 기본 모드스코어0 – 0남은 최대 3게임이번”
4
사이드 언더 노트 (통계 요약) ×6
.og-fsu-row ×4 — 신규 · “맵 배정 절차 · 4단계밴1루미맵 1장 삭제5장 → 4장다음밴2비앙카맵 1장 삭”
5
코인 비주얼 + 코인 풀 ×3
.og-coin-pool — 신규 · “비앙카”
6
토스 캡션 ×2
.og-fc-cap · “시리즈 맵 풀 5장개울0벽 · 8수역후보골목길4벽 · 2잔해후보공장2벽 · 8벨”
7
권리 안내 (이기면/지면) ×4
.og-fc-rights — 신규 · “이번 토스가 배분하는 것루미 몫픽 순서 선택권비앙카 몫선공 선택권맵 베토 우선권”
8
진행 예고 리스트 (다음 단계 미리보기) ×6
.og-fp-row ×5 — 신규 · “개울0벽 · 8수역후보골목길4벽 · 2잔해후보공장2벽 · 8벨트후보병원4벽 · ”
9
보조 안내 열 (aside) ×10
.og-fa-row ×7 — 신규 · “시리즈 맵 풀 5장개울0벽 · 8수역후보골목길4벽 · 2잔해후보공장2벽 · 8벨”
10
질문 타이틀+서브 ×3
.og-flip-title · “코인 토스 — 비앙카 승… 픽 순서는 루미 몫이번 게임의 픽 순서를 정하세요선픽”
11
선택 버튼 2종 (아이콘 포함) ×4
.og-flip-btn ×2 · “선픽먼저 뽑고 주도권을 가져갑니다선택”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

04 맵 베토

맵 카드에 스탯·구성 바·깊이 추가 + 하단 풋 요약(랭크·룰·풀).

▶ 라이브로 열기
맵 베토
1
베토 헤더 (아이브로+타이틀+노트) ×3
.og-veto-head · “MAP VETO맵 밴 — 마음에 안 드는 맵을 지워요”
2
베토 레일 (단계 표시) ×5
.og-vstep ×4 — 신규 · “밴 1루미밴 2픽 1픽 2”
3
맵 카드 전체 레이아웃 ×5
.og-mapcard ×5 · “개울STREAM수역0벽8특수32개방타일 구성 40칸물에 들어서면 그 턴 이동이 ”
4
맵 미니 프리뷰 (타일 렌더) ×5
.og-mini(-cell ×200)
5
맵 이름줄 (한/영) ×10
.og-map-name/.og-map-en · “개울STREAM”
6
맵 스탯 (수치 3종) ×20
.og-mstat ×15 — 신규 · “0벽8특수32개방”
7
맵 구성 바 (지형 비율) ×10
.og-mcomp-bar — 신규 · “타일 구성 40칸”
8
룰 + 깊이 표기 ×20
.og-map-dep — 신규 · “물에 들어서면 그 턴 이동이 끝나요”
9
라이벌 선호 표시 ×5
.og-map-pref — 신규 · “개방도 4위 · 차폐 8칸”
10
맵 시그니처 라인 ×5
.og-map-sig · “수역”
11
카드 CTA (제외 버튼) ×5
.og-map-cta — 신규 · “이 맵 밴하기 →”
12
풋 요약 (랭크 리스트+룰+풀+스텝) ×7
.og-veto-foot — 신규 · “밴 단계 브리핑비앙카가 무엇을 남기고 싶어 하는지 보고 지울 맵을 고르세요5/5”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

05 밴픽 — 밴 단계

로스터 카드에 스탯 추가(ATK-0 수정건), 밴 플레이트·팀 요약·드래프트 맵 신설.

▶ 라이브로 열기
밴픽 — 밴 단계
1
드래프트 헤딩 (타이틀+오더 표기) ×3
.og-draft-heading · “BAN & PICK루미 밴 — 금지할 캐릭터를 골라요 (1/3)”
2
배지 + 턴 칩 ×2
.og-draft-badges · “1세트 · 골목길”
3
CTA 안내줄
.og-draft-cta · “밴 확정 →”
4
단계 스텝 표시 ×7
.og-dstep ×7 — 신규 · “B”
5
로스터 그리드 (21킷)
.og-roster · “브루저현우HP16SPD3RNG2밴 후보암살자유키HP12SPD7RNG2밴 후보원거”
6
킷 카드 (일러+이름+아크+스탯) ×21
.og-pcard ×21 — og-pc-stats 신규 (ATK-0 표기 수정) · “브루저현우HP16SPD3RNG2밴 후보”
7
밴/픽 슬롯 컬럼 ×8
.og-draft-slot ×6 · “1다음 픽2대기3대기”
8
밴 플레이트 (밴 마크+이름) ×4
.og-banplate ×2 — 신규 · “BAN대기”
9
컬럼 헤드 (칩+카운트) ×4
.og-col-head · “루미0/3”
10
팀 요약 패널 (양측 스탯+칩) ×4
.og-teamsum ×2 — 신규 · “루미 팀 합계0명HP 합0최고 속도—최대 사거리—구성 대기”
11
드래프트 맵 카드 (확정 맵 표시) ×2
.og-draft-map — 신규 · “이번 게임 맵골목길잔해 칸은 이동력 2를 소모해요”
12
킷 상세 헤더 (버스트+이름+아크) ×4
.og-detail-head · “유키암살자후열 처치 / 접근+처형”
13
킷 상세 블러브
.og-d-blurb · “후열 처치 / 접근+처형”
14
상세 스탯 4종 ×5
.og-bstat ×4 · “HP12속도7행동 순서사거리2돌진 1칸마나5시작 3 · 회복 2”
15
패시브 박스
.og-passive · “패시브Perfect Fit · 유키는 공개 단추 4개로 시작합니다. Q/E/R이”
16
스킬박스 4액션 그리드 ⚠ 최근 개선 대상 ×4
.og-skillbox ×4 — 즉시 툴팁·헤더 1줄·본문 2줄+말줄임 (소형창 <600px 별도 설계 플래그) · “평타머리부터 발끝까지사거리 1 · ⬧1인접 적에게 피해 1과 2라운드 둔화를 줍”
17
스킬 칩 줄 ×3
.og-skillchips · “사거리 1 · ⬧1”
18
라이벌 행 (초상+상태)
.og-rival-row — 신규 · “BAN대기1다음 픽2대기3대기”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

06 밴픽 — 픽 단계

픽 진행 상태. 공통 컴포넌트 코멘트는 05 화면에.

▶ 라이브로 열기
밴픽 — 픽 단계
1
픽/밴 상태 태그 (카드 위) ×2
.og-pc-tag · “루미 밴”
2
밴 플레이트 일러 반영 상태 ×2
.og-ban-illust
3
채워진 슬롯 (픽 반영 상태) ×6
.og-draft-slot · “1다음 픽”
4
턴 표시 칩 (픽 차례)
.og-draft-chip · “1세트 · 골목길”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

07 블라인드 셋업 — 배치 전

라이벌 레일·보드 밴드·고스트 프리뷰·진행 바·체크리스트 신설.

▶ 라이브로 열기
블라인드 셋업 — 배치 전
1
셋업 헤딩 + LIVE 배지 ×2
.og-setup-heading · “BLIND SETUP배치 & 전술 설정”
2
플로우 스텝 줄
.og-setup-steps — 신규 · “유닛 배치0/3 · 파란 칸전술 선택0/3 · 칩 하나씩확정매치 시작”
3
좌측 라이벌 레일 (초상+픽 목록+팁) ×3
.og-setup-rail — 신규 · “상대 읽기비앙카하트메이지HP 9 · 속도 6사거리 3 · 돌진 3칼라스페셜HP ”
4
보드 밴드 (맵 이름+룰) ×3
.og-setup-band — 신규 · “골목길잔해 칸은 이동력 2를 소모해요15칸루미 배치 구역15칸비앙카 구역 (비공”
5
배치 보드 (타일+고스트 프리뷰) ×16
.og-su-cell ×40 — og-su-ghost 신규 · “???????????????”
6
보드 레전드
.og-board-legend — 신규 · “루미 배치 구역비앙카 구역 (비공개)벽잔해”
7
유닛 카드 (버스트+이름+포지션+스탯+전술) ×3
.og-su-card ×3 — og-su-stats 신규 · “유키암살자파란 칸에 내려놓기HP12속도7이동2사거리2점멸지진포스 필드무효화치유의”
8
전술 선택 칩 (+힌트) ×21
.og-su-tac ×18 · “점멸”
9
배치 진행 바 ×2
.og-su-progress — 신규 · “커밋 진행0/3”
10
체크리스트 ×4
.og-setup-check — 신규 · “출전 전 체크3명 모두 파란 칸에 배치 0/33명 모두 전술 선택 0/3비앙카 ”
11
셋업 CTA 버튼 ×3
.og-setup-cta .og-btn · “추천 배치확정 · 매치 시작”
12
상태 칩
.og-setup-chip · “루미: “여기 숨으면 절대 모르지~ (이미 들킴)””
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

08 블라인드 셋업 — 배치 완료

배치 완료 상태 — 보드 위 스프라이트+받침.

▶ 라이브로 열기
블라인드 셋업 — 배치 완료
1
보드 위 유닛 스프라이트+받침 ×6
.og-su-sprite/.og-su-base ×3
2
완료 상태 CTA (시작 버튼) ×2
.og-btn · “추천 배치”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

09 매치 — ThreeJS 스테이지 (기본 뷰)

7/31 패스의 핵심 — ThreeJS 렌더러 기본 전환 + 로스터 카드 사이드 신설.

▶ 라이브로 열기
매치 — ThreeJS 스테이지 (기본 뷰)
1
스테이지 전체 (배경+타일+AO) ×3
.m-stage — ThreeJS 기본 (?gfx=css 폴백) · “✦유키12아야11리오11하트9칼라13재키13ABCDEFGH1234512/12유키”
2
타일 데칼 (이동범위·위협 가독성) ×105
.m-decal ×65 — 신규 (오버레이 가독성 패스)
3
컨트롤 존 표시
.m-czones — 신규
4
유닛 빌보드 (아크릴+이름표) ×18
.m-vunit — .m-uname 이름표 신규 (다운 유닛 가독성)
5
버브(행동 예고) 표시 ×3
.m-verbs — 신규
6
미니맵 (헤더+키+풋)
.m-mini — mini-key/mini-foot 신규 · “택티컬 뷰클릭: 평면 뷰로아군적현재 턴골목길잔해는 이동력 2!”
7
스코어 패널 (헤드+바+풋) ×2
.m-score-bars — 신규 · “루미선공ROUND1/19선공비앙카실시간생존33HP3435마나96하트, 플랜저라운”
8
로스터 카드 사이드 (6유닛 HP/마나) ×8
.m-rc ×6 — 신규 (양측 로스터 상시 표시) · “유키A112/12아야A211/11리오A311/13”
9
캐스트 티커
.m-ticker · “하트, 플랜저라운드 1 시작매치 시작! 신중하게 한 수 한 수 둬볼게요~”
10
턴 순서 트레이 (+다음 표시) ×2
.m-order — ord-next 신규 · “이니셔티브R2”
11
우측 버튼 열 (오버레이·AUTO·사운드) ×3
.m-right-btns · “채팅 오버레이 켜기”
12
미션 패널
.m-mission · “오늘의 미션0/3부활 성공시키기진행 중궁극기로 한 방 먹이기진행 중10라운드 안”
13
캐스트 카드 (버스트+코스트+브리프) ×3
.m-cc-cost 신규 — 툴팁 brief v2 카피 창구
14
하단 독 — 대기 상태 (who+로그+다음 예고) ×3
.m-dock-log — 신규 (플레이어 카피 정리) · “진행 중아야 행동 중하트, 플랜저라운드 1 시작매치 시작! 신중하게 한 수 한 ”
15
캐스터 포트레이트+네임플레이트 ×4
.m-nameplate — 신규 · “상자 뒤에 숨은 거 다 보이거든요?루미3명”
16
알림 토스트
.m-notify — 신규 · “상대 차례…하트플랜저”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

10 매치 — 액션 선택 상태

유닛 액팅 상태 — 액션 키 상세·이동 플레이트·독 액티브.

▶ 라이브로 열기
매치 — 액션 선택 상태
1
액션 키 (아이콘+코스트+메타+이유) ×8
.m-key ×6 — key-why 신규 · “Q2연발대상 없음2”
2
이동 플레이트 + 마커 ×8
.m-moveplate — 신규
3
독 — 액티브 상태 (HP/마나/오브/MP) ×3
.m-dock-hp/.m-dock-mana · “11/11”
4
셀 하이라이트 필 ×80
.m-fill ×37
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

11 매치 — 평면(택티컬) 뷰

플랫 토글 — 레전드·사이드·유닛 HP바 추가.

▶ 라이브로 열기
매치 — 평면(택티컬) 뷰
1
플랫 프레임+룰+축 표기 ×4
.m-flat — flat-ax 신규 · “골목길 — 잔해는 이동력 2!ABCDEFGH1234512/12유키11/11아야1”
2
플랫 그리드 셀 ×40
.m-flat-cell ×40
3
플랫 유닛 (스프라이트+HP바+이름) ×18
.m-flat-hpbar/.m-flat-nm — 신규 · “12/12유키”
4
플랫 레전드 + 사이드 ×2
.m-flat-legend — 신규 · “지면바닥벽특수 지형폐쇄 구역마크이동사거리대상위협 (모든 적)이동 ∩ 위협위험 (”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

12 매치 — 채팅 오버레이 (방송 크롬)

방송 목업 크롬 — 시청자 수·카테고리·팔로우 버튼 추가.

▶ 라이브로 열기
매치 — 채팅 오버레이 (방송 크롬)
1
크롬 상단 바 (로고+검색+포인트) ×3
.m-chrome-top · “LLUMI LIVE홈탐색팔로잉커뮤니티스트리머 · 게임 검색/123,456,789”
2
채팅 헤더 + 시청자 수 ×2
.m-ch-viewers — 신규 · “실시간 채팅12,840”
3
랭크 + 도네 카드 ×2
.m-dono-card · “1새벽두시32,0002치즈볼18,5003핑크비앙9,200”
4
채팅 라인 (아바타+말풍선) ×5
.m-chatline ×5 · “루루비콘팽팽하다;; 한 수가 갈라”
5
채팅 입력줄 (+전송) ×3
.m-ch-input · “메시지 보내기...채팅”
6
하단 방송자 바 (아바타+체크+카테고리+타이틀+팔로우) ×3
.m-ch-cats/.m-ch-follow — 신규 · “루미_LUMI전략 시뮬NIGHTFALL한국어【NIGHTFALL】 비앙카 꺾고 잘”
7
LIVE 배지 + 프레임 ×2
.m-chrome-live
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

13 게임 결과

리디자인 — 스코어보드 밴드·6유닛 그리드(HP/탈리)·브래킷·가이드.

▶ 라이브로 열기
게임 결과
1
결과 상단 스코어보드 밴드 (양측+미드) ×2
.og-res-top — 신규 · “루미총 피해3마무리0다운0생존0/3GAME 1 스코어보드골목길6라운드피어리스 6”
2
승패 타이틀 (+아이브로)
.og-big · “패배!”
3
스코어 줄 (pips) ×3
.og-score-pips · “0 – 1”
4
결과 그리드 — 6유닛 (스프라이트+HP바+탈리) ×7
.og-result-unit ×6 — hpbar/tally 신규 · “루미생존 0/3유키암살자전사K.O.피해0마무리0다운0아야원거리전사K.O.피해0마”
5
생존 라벨 컬럼 ×2
.og-rescol ×2 — 신규 · “루미생존 0/3유키암살자전사K.O.피해0마무리0다운0아야원거리전사K.O.피해0마”
6
MVP 박스 (레이 연출+선정 이유) ×2
.og-mvp — mvp-why 신규 · “MVP · 비앙카하트메이지피해20마무리0다운3선정 기준 · 피해 + 다운×2 +”
7
라이벌 멘트 (타운트)
.og-taunt · “비앙카: “역시 닥치고 딜이 국룰이지””
8
브래킷 (경기 리캡 미니맵) ×4
.og-brk ×3 — 신규 · “GAME 16라운드골목길패GAME 2공장진행GAME 3연구소미실시”
9
다음 경기 안내
.og-rfoot-next — 신규 · “다음공장라운드 시작 시 벨트가 1칸 밀어내요”
10
가이드 타일
.og-res-guide — 신규 · “다음 단계15명사용 가능 로스터6명이번 세트 잠금1밴+3픽드래프트 · 그다음 블”
11
결과 액션 버튼 ×2
.og-result-actions · “다음 게임 — 드래프트”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트

14 시리즈 종료

Bo3 종료 — 상단 브래킷 요약·사이드 풀·게임 바 그래프.

▶ 라이브로 열기
시리즈 종료
1
콘페티 연출 ×13
.og-confetti ×13
2
시리즈 상단 요약 (브래킷+합계) ×3
.og-series-top — 신규 · “SET 1 브래킷GAME 16라운드골목길MVP 하트패GAME 26라운드공장MVP”
3
사이드 풀 (양측 카드+블러브) ×11
.og-serieside ×2 — 신규 · “시리즈 기록세트SET 1치른 게임2최종 스코어0 – 2피어리스 소모12명남은 로”
4
센터 타이틀+스코어+카피 ×3
.og-series-score · “시리즈 패배!”
5
타운트
.og-taunt · “비앙카: “역시 닥치고 딜이 국룰이지””
6
풋 게임 바 그래프 ×3
.og-sfg-row — 신규 · “시리즈 총계12치른 라운드6최장 게임15루미 총 피해56비앙카 총 피해0루미 마”
7
가이드
.og-se-guide — 신규 · “같은 상대 재대결SET 2 시작 · 코인 토스부터 다시피어리스 초기화 — 로스터”
8
종료 액션 버튼 ×2
.og-btn ×2 · “같은 상대 재대결”
이 화면 기타 의견
목록에 없는 요소·레이아웃·모션 등 자유 코멘트
🧾 총평 / 우선순위
전체 인상, 가장 먼저 고치고 싶은 것 순서 등
복사됐어요!