전적 화면을 자기 계정처럼 꾸밀 수 있게 했다. 프로필 층에 배경 사진이 깔리고,
「프로필 카드 보기」로 열면 원본 비율 배너 + 프로필 한 장이 된다.
프로필 카드
- 닫힌 상태는 지금 높이 그대로다(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
세 플랫폼이 공유하는 에러 코드 맵의 문장을 딱딱한 합니다체에서 해요체로
바꿨다. 화면 문구는 실제로 쓰는 말로만 쓴다는 기준에 맞춘 것이다.
- SYS_001 "일시적인 시스템 오류가 발생했습니다." → "일시적인 오류가 생겼어요."
- AUTH_003 "해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다."
→ "이 메뉴나 기능을 이용할 권한이 없어요."
- VAL_001 의 "(필수값 누락 또는 형식 오류)" 는 개발자 말이라 문장으로 풀었다.
- main.ts 의 Rate Limit 응답도 같은 문장을 쓰고 있어 "요청이 너무 많아요" 로
함께 고쳤다.
SSOT 3개 파일(backend 필터 · frontend ErrorCodeLexicon · flutter ErrorLexicon)과
규칙 문서, 그리고 문구를 인용하던 화면·테스트를 함께 갱신했다.
frontend lint · type-check · 테스트 11개 통과. flutter analyze 에서
error_lexicon.dart 는 문제 없음. backend 는 node_modules 가 비어 있어
로컬에서 lint/test 를 돌리지 못했다(문자열 리터럴만 변경).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
.design/surinz 홈 아트보드를 프런트엔드로 옮긴다.
디자인 토큰
- assets/styles/tokens.css: 아트보드의 색·치수·라운드를 CSS 변수로 정리.
화면 코드에서는 여기 없는 값을 새로 만들지 않는다
- index.html: Pretendard 한글 동적 서브셋 연결
레이아웃
- AppHeader: 히어로가 화면 밖으로 나가면 돋보기와 그림자를 켠다. 모바일 서랍
- SearchHero / SearchSheet: 데스크톱 640px 카드, 모바일 전체 화면
- AppFooter
섹션 일곱
이벤트(스크롤 스냅) · 검색 랭킹 · 게임 랭킹 · 커뮤니티 · 서든어택 소식 ·
서린즈 소식 · 지금 방송 중. 게임 랭킹은 데스크톱에서 세 갈래를 나란히,
태블릿 이하에서는 useMediaQuery 로 갈래 세그먼트 하나씩으로 바꾼다.
랭크전은 티어 이미지와 RP 를 한 칸에 붙여 둔다.
섹션별 상태
useSectionResource 가 섹션마다 로딩·성공·비어있음·실패를 따로 들고,
SectionBoundary 가 분기한다. 한 섹션이 실패해도 그 섹션만 다시 부른다.
실패 문구는 화면에서 짓지 않고 useApi 의 에러 코드 맵에서 가져온다 —
이를 위해 resolveErrorMessage 를 export 하고, 요청 단위 silentError 를
더해 섹션 실패가 전역 알림을 띄우지 않게 했다.
백엔드에 홈 API 가 없어 mocks/home.fixtures.ts 로 화면을 먼저 세운다.
연동은 composables/useHome.ts 의 로더 일곱 개만 바꾸면 된다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DNo7LSAWohdk6vpEhmtqLY
홈 확정안과 디자인 시스템을 아트보드로 정리한다. 후보 셋(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