전적 화면을 자기 계정처럼 꾸밀 수 있게 했다. 프로필 층에 배경 사진이 깔리고,
「프로필 카드 보기」로 열면 원본 비율 배너 + 프로필 한 장이 된다.
프로필 카드
- 닫힌 상태는 지금 높이 그대로다(132px). 배경을 넣지 않은 사람은 옅은 색면 그대로.
- 열면 1440 폭에 16:9 원본이라 810px. 사진 위쪽 462px 가 드러나고, 아래 348px
받침 위에 기본 · 티어 · 간단 스탯(승률 · 킬뎃 · 헤드샷 · 경기당 딜량 · 주무기)이
한 장으로 모인다. 값은 전부 왼쪽 레일 「최근 동향」과 같은 값이라 따로 세지 않는다.
- 받침은 «세로» 방향이다. 가로 스크림은 왼쪽이 밝은 사진에만 들어, 오른쪽이 밝은
사진에서 티어와 갱신 캡션이 무너진다. 얇은 띠에서는 글자를 지키려면 사진을
덮어야 하고, 그래서 카드를 여는 쪽이 답이다.
신고와 소유 인증
- 배경은 누구나 볼 수 있다. 그래서 남의 카드에는 신고가 붙는다. 사진 오른쪽 위
한 자리를 주인과 남이 나눠 쓴다 — 내 화면이면 「배경 고르기」, 남의 화면이면 「신고」.
- 신고는 카드 «안»에서만 닿는다. 배경이 문제인지 판단하려면 배경을 봐야 한다.
- 둘째 줄 끝에 소유 인증 알약을 뒀다 — 「내 계정」 또는 「밤하늘 님이 연동한 계정」.
첫 줄(닉네임 · 계급)은 게임 안의 정체라 건드리지 않았다.
오른쪽 컨트롤 정리
- 「12분 전에 불러왔어요」를 갱신 버튼 아래에서 왼쪽 인라인으로 옮겼다. 아래에
매달리면 그 덩어리만 66px 이 되어 옆 42px 버튼과 줄이 맞지 않는다.
- 한 상태에 보조 버튼은 하나. 보조는 주 동작과 같은 42px, 면만 없는 급으로 통일했다.
- 첫 조회에는 「프로필 카드 보기」를 두지 않는다 — 아직 열 카드가 없다.
문구 · 데이터
- 「동향 스탯」을 「최근 동향」으로 바꿨다.
- 클랜별 전적에서 소속 기간을 뺐다. 언제부터 언제까지 어느 클랜이었는지는 넥슨에서
알 수 없다. 한 줄이 이름 · 판수 · 승률 셋뿐이라 행 높이를 38px 로 맞췄다.
기본 요소에 올려야 할 값
- 어두운 면 위의 승/패 — 승 #7BA4FF · 패 #F0857C (흰 바탕용과 색상각은 같다)
- 어두운 면 위의 크기 막대 — 바탕 rgba(255,255,255,0.20) · 먹 #FFFFFF
- 보조 버튼 42px 두 벌 (흰 바탕용 · 어두운 면용)
빌드
make-bg-directions.mjs 가 프로필 층을 만들어 Main · Maps 에 적고, 카드 상태
아트보드 셋(내 전적 · 남의 전적 · 신고)을 낸다. 셋은 프로필 층 아래 본문을
Main.dc.html 에서 그대로 잘라 쓴다 — 사본을 두면 기본 시안과 어긋난다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TG44xZZ39K8vEz418bX4K2
전적 검색 결과 화면을 아트보드 넷으로 그렸다 — 종합(데스크톱 1440) · 로딩 ·
맵 탭 · 상태 화면 넷(없는 닉네임 · 첫 조회 · 갱신 중 · 실패).
화면 얼개
- 프로필 헤더(계급 · 클랜 · 마지막 플레이 · 솔로/파티 랭크전 티어 · 갱신)
- 화면 갈래 탭 — 종합 / 맵
- 왼쪽 300px 레일: 동향 스탯 · 랭크전 시즌 · 랭크·클랜 성적 ·
같이 한 유저 · 자주 만난 상대
- 오른쪽: 최근 폼(20판 스트립 + 구간 비교) · 경기 기록(펼치면 팀 스코어보드)
정한 것
- 승/패 색은 파랑 #2A5FCC / 빨강 #C4453D. 초록은 이 화면에서 쓰지 않아
랭킹의 등락 초록과 뜻이 겹치지 않는다.
- 킬뎃은 킬 ÷ (킬 + 데스) 를 백분율로 적는다(최댓값 100%).
- 딜량은 어디서든 수치다. 집계 자리는 「경기당 딜량」.
- 기준은 셋 — 맵은 전체 경기, 같이 한 유저는 최근 100경기, 나머지는 20경기.
동향 스탯은 넥슨이 주는 값이라 기준을 적지 않는다.
빌드
templates-record/ 를 build-record.mjs 로 빌드해 record/ 에 아트보드를 만든다.
홈 캔버스(build.mjs · fonts/mini)와 폰트 서브셋을 공유하지 않는다 — 전적 화면이
쓰는 글자만 담아 아트보드 하나당 115KB 로 유지한다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
전적 화면에서 승/패를 가르려고 정한 파랑을 기본 요소 아트보드의 「의미」 색에
올렸다. 이제 의미 색은 셋이다 — 상승 #12805C · 하락 #C4453D · 승리 #2A5FCC.
승리 파랑은 승패에만 쓰고, 상승·하락은 그대로 초록·빨강이다.
같은 빌드에 두 가지가 더 들어갔다.
- 실패 블록의 SYS_001 문구가 해요체로 바뀌었다(Blocks · States 아트보드).
- 「생겼어요」의 「겼」이 폰트 서브셋에 없어 서브셋을 다시 만들고 아트보드
10개를 재빌드했다. 그래서 열 파일이 모두 바뀌어 있다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
홈 확정안과 디자인 시스템을 아트보드로 정리한다. 후보 셋(HomeA/B/C)은
확정안 Main 으로 합치고 지운다.
디자인 시스템 페이지
- Logo: 워드마크를 글꼴 대신 획으로 그려 내보내기에서도 모양이 유지된다
- Brand: 탄피 오렌지 확정. 면 #FF6A00(흰 글자) / 글자 #C24A00 로 값이 갈린다
- Foundations: 홈에서 굳어진 글자 아홉 단계·색·컴포넌트·치수
- Blocks: 실패 · 비어 있음 블록 규격과 섹션별 문구
홈 페이지
- Main: 검색 히어로를 최상단으로, 그 아래 균등 3열 밀도 그리드
- Loading / States: 스켈레톤과 섹션별로 섞인 네 가지 상태
- Search: 헤더 돋보기 + 검색 시트
- Tablet(768) / Mobile(390): 기준점 두 개로 2열 · 1열 전환
랭크전 랭킹에 티어 이미지 자리를 추가한다. 티어와 RP 는 한 몸으로 읽혀야
해서 한 칸(72px)에 묶고 그 안에서만 4px 로 붙였다. 계급·티어·클랜 표장을
막대/육각/방패로 갈라 한 줄에 놓여도 구분된다.
Pretendard 는 아트보드가 실제로 쓰는 글자만 서브셋(fonts/mini)해
아트보드마다 복사되는 용량을 줄인다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DNo7LSAWohdk6vpEhmtqLY
ttipo