전적 검색 결과 화면을 아트보드 넷으로 그렸다 — 종합(데스크톱 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