From 049bc5e2cf6dcd3e64ba1b3c5ce504b6e9181550 Mon Sep 17 00:00:00 2001 From: TtiPo Date: Sat, 5 Sep 2026 16:42:54 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=9C=EB=A6=B0=EC=A6=88=20=ED=99=88?= =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=BA=94=EB=B2=84=EC=8A=A4=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 홈 확정안과 디자인 시스템을 아트보드로 정리한다. 후보 셋(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) Claude-Session: https://claude.ai/code/session_01DNo7LSAWohdk6vpEhmtqLY --- .design/surinz/Blocks.dc.html | 173 ++++++ .design/surinz/Brand.dc.html | 321 ++++++++++ .design/surinz/Foundations.dc.html | 345 +++++++++++ .design/surinz/HomeA.dc.html | 337 ----------- .design/surinz/HomeB.dc.html | 549 ----------------- .design/surinz/HomeC.dc.html | 307 ---------- .design/surinz/Loading.dc.html | 556 ++++++++++++++++++ .design/surinz/Logo.dc.html | 175 ++++++ .design/surinz/Main.dc.html | 86 +-- .design/surinz/Mobile.dc.html | 374 ++++++++++++ .design/surinz/Search.dc.html | 258 ++++++++ .design/surinz/States.dc.html | 459 +++++++++++++++ .design/surinz/Tablet.dc.html | 393 +++++++++++++ .design/surinz/apply-logo.mjs | 117 ++++ .../surinz/assets/20260903074208.jpg | Bin .design/surinz/build.mjs | 34 +- .design/surinz/canvas.json | 168 +++++- .../fonts/mini/Pretendard-Bold.mini.woff2 | Bin 0 -> 54508 bytes .../fonts/mini/Pretendard-Regular.mini.woff2 | Bin 0 -> 54124 bytes .../fonts/mini/Pretendard-SemiBold.mini.woff2 | Bin 0 -> 54152 bytes .design/surinz/fonts/mini/charset.txt | 1 + .design/surinz/make-subset.mjs | 46 ++ .design/surinz/surinz-home.html | 6 +- .design/surinz/templates/Blocks.dc.html | 171 ++++++ .design/surinz/templates/Brand.dc.html | 319 ++++++++++ .design/surinz/templates/Foundations.dc.html | 343 +++++++++++ .design/surinz/templates/HomeA.dc.html | 335 ----------- .design/surinz/templates/HomeB.dc.html | 547 ----------------- .design/surinz/templates/HomeC.dc.html | 305 ---------- .design/surinz/templates/Loading.dc.html | 554 +++++++++++++++++ .design/surinz/templates/Logo.dc.html | 173 ++++++ .design/surinz/templates/Main.dc.html | 80 +-- .design/surinz/templates/Mobile.dc.html | 372 ++++++++++++ .design/surinz/templates/Search.dc.html | 256 ++++++++ .design/surinz/templates/States.dc.html | 457 ++++++++++++++ .design/surinz/templates/Tablet.dc.html | 391 ++++++++++++ 36 files changed, 6509 insertions(+), 2499 deletions(-) create mode 100644 .design/surinz/Blocks.dc.html create mode 100644 .design/surinz/Brand.dc.html create mode 100644 .design/surinz/Foundations.dc.html delete mode 100644 .design/surinz/HomeA.dc.html delete mode 100644 .design/surinz/HomeB.dc.html delete mode 100644 .design/surinz/HomeC.dc.html create mode 100644 .design/surinz/Loading.dc.html create mode 100644 .design/surinz/Logo.dc.html create mode 100644 .design/surinz/Mobile.dc.html create mode 100644 .design/surinz/Search.dc.html create mode 100644 .design/surinz/States.dc.html create mode 100644 .design/surinz/Tablet.dc.html create mode 100644 .design/surinz/apply-logo.mjs rename 20260903074208.jpg => .design/surinz/assets/20260903074208.jpg (100%) create mode 100644 .design/surinz/fonts/mini/Pretendard-Bold.mini.woff2 create mode 100644 .design/surinz/fonts/mini/Pretendard-Regular.mini.woff2 create mode 100644 .design/surinz/fonts/mini/Pretendard-SemiBold.mini.woff2 create mode 100644 .design/surinz/fonts/mini/charset.txt create mode 100644 .design/surinz/make-subset.mjs create mode 100644 .design/surinz/templates/Blocks.dc.html create mode 100644 .design/surinz/templates/Brand.dc.html create mode 100644 .design/surinz/templates/Foundations.dc.html delete mode 100644 .design/surinz/templates/HomeA.dc.html delete mode 100644 .design/surinz/templates/HomeB.dc.html delete mode 100644 .design/surinz/templates/HomeC.dc.html create mode 100644 .design/surinz/templates/Loading.dc.html create mode 100644 .design/surinz/templates/Logo.dc.html create mode 100644 .design/surinz/templates/Mobile.dc.html create mode 100644 .design/surinz/templates/Search.dc.html create mode 100644 .design/surinz/templates/States.dc.html create mode 100644 .design/surinz/templates/Tablet.dc.html diff --git a/.design/surinz/Blocks.dc.html b/.design/surinz/Blocks.dc.html new file mode 100644 index 0000000..e903c05 --- /dev/null +++ b/.design/surinz/Blocks.dc.html @@ -0,0 +1,173 @@ + + + + + + + + + + + + +
+ +

실패 · 비어 있음 블록

+

섹션마다 따로 채우기 때문에 한 섹션이 실패하거나 비어도 나머지는 그대로 보입니다. 두 상태 모두 섹션 본문 자리를 그대로 차지해서, 늦게 도착한 섹션 때문에 페이지가 밀리지 않습니다.

+ +
+ +
+
+ 실패 + 모든 섹션 공통 +
+
+ +

일시적인 시스템 오류가 발생했습니다.
잠시 후 다시 시도해 주세요.

+ +
+
+ +
+
+ 비어 있음 + 섹션마다 문구가 다름 (커뮤니티 예시) +
+
+ +

아직 올라온 글이 없어요

+ + 첫 글 쓰러 가기 +
+
+ + +
+
두 블록의 공통 규격
+
    +
  • 바탕 #FAFBFC · 테두리 1px #EDEFF2 · 라운드 16px. 섹션 본문이 있어야 할 높이를 min-height 로 그대로 채웁니다.
    • +
  • 아이콘은 44px 원형(#F2F4F7) 안에 22px 선 아이콘(#9BA1A9). 색으로 경고를 주지 않습니다 — 브랜드 오렌지도, 빨강도 쓰지 않습니다.
    • +
  • 본문 14px #5B6169, 보조 문구 13px #9BA1A9, 가운데 정렬, 최대 20rem 에서 줄바꿈.
    • +
  • 실패에는 「다시 시도」 버튼(36px · 흰 바탕 · 1px #D6DAE0 테두리)이 항상 붙습니다. 비어 있음에는 갈 곳이 있을 때만 글자 링크를 붙입니다.
    • +
  • 실패 문구는 에러 코드 맵의 SYS_001 문장을 그대로 씁니다. 서버가 다른 코드를 내려주면 그 코드의 문장으로 바뀝니다 — 화면에서 문구를 새로 짓지 않습니다.
    • +
  • 한 섹션이 실패해도 그 섹션만 다시 부릅니다. 페이지 전체를 새로 고치게 하지 않습니다.
    • +
+
+ +
+ +
+
섹션별 비어 있음 문구
+

«데이터가 없습니다» 같은 한 문장으로 묶지 않았습니다. 비어 있는 이유가 섹션마다 다르고, 다음에 할 일도 다릅니다.

+
+
+ 섹션문구보조 문구액션 +
+
+
+ + 이벤트 +
+ 진행 중인 이벤트가 없어요 + 새 이벤트가 열리면 알려 드릴게요 + 없음 +
+
+
+ + 검색 랭킹 +
+ 아직 집계된 검색이 없어요 + 검색이 쌓이면 순위가 나타납니다 + 없음 +
+
+
+ + 게임 랭킹 +
+ 이번 시즌 랭킹이 아직 열리지 않았어요 + — + 지난 시즌 보기 +
+
+
+ + 커뮤니티 +
+ 아직 올라온 글이 없어요 + — + 첫 글 쓰러 가기 +
+
+
+ + 소식 (서든어택 · 서린즈) +
+ 등록된 소식이 없어요 + — + 없음 +
+
+
+ + 지금 방송 중 +
+ 지금 방송 중인 채널이 없어요 + 방송이 시작되면 여기에 표시됩니다 + 없음 +
+
+
+ +
+ + + diff --git a/.design/surinz/Brand.dc.html b/.design/surinz/Brand.dc.html new file mode 100644 index 0000000..35a228e --- /dev/null +++ b/.design/surinz/Brand.dc.html @@ -0,0 +1,321 @@ + + + + + + + + + + + + +
+ +

브랜드 컬러 — 탄피 오렌지

+

D안으로 확정했습니다. 면 위에는 흰 글자·아이콘을 얹고, 흰 바탕 위 글자는 진한 변형을 씁니다 — 면과 글자가 서로 다른 값을 쓰는 색이라 아래 네 값으로 정리했습니다. 후보 넷은 나중에 되돌아볼 수 있게 그대로 남겨 뒀습니다.

+ +
+
+
면 — 주 버튼 · 강조 면
+
#FF6A00
+
그 위 글자·아이콘은 흰색 · 2.87 : 1
+
+
+
면 누름 · hover
+
#D95A00
+
면색보다 한 단 어둡게
+
+
+
글자 — 「신규」 · 링크
+
#C24A00
+
흰 바탕 위 4.91 : 1
+
+
+
글자 hover
+
#A03C00
+
흰 바탕 위 6.69 : 1
+
+
+ +
+
+
이미 잡혀 있는 색
+
+ 상승 #12805C + 하락 #C4453D +
+
+
+
+
계속 지켜볼 것
+

면 위 흰 글자는 2.87:1 로 권고치 아래입니다. 밝기를 살리는 쪽을 택한 결과이고, 버튼 글자를 키우거나 굵게 하면 체감은 나아집니다. 나중에 통과선을 맞춰야 하면 면색을 #CE5400(4.29:1) · #C24A00(4.91:1) 쪽으로 한 단씩 내리는 자리가 있습니다.
글자용 #C24A00 과 하락 빨강 #C4453D 은 색상환에서 18° 떨어져 있습니다. 두 색이 같은 줄에 놓이는 화면이 생기면 하락 색을 더 차갑게 옮기는 편이 낫습니다.

+
+
+ +
+ +
+ +
+
+ #0B5FFF +
+
+
+ + 면 누름 · 글자 hover +
+ #0A4ACC +
+
+
+ +
+
+ A + 코발트 블루 + 지금 색을 정돈한 안 +
+
+ oklch(55.2% 0.248 262) + 면 위 글자 대비 5.13 : 1 +
+

전적·기록 사이트에서 기대되는 색입니다. 상승 초록·하락 빨강과 색상환에서 멀리 떨어져 있어 랭킹 표에서 헷갈릴 일이 없습니다.

+

걸리는 점 — 가장 흔합니다. 다른 전적 사이트, SNS 파랑과 한 덩어리로 읽혀서 기억에 남지 않습니다.

+
+ +
+
+ +
+ 찾아보기 +
+ 전적 자세히 보기 +
+ +
+
+
+ 9월 정기점검 안내 + 신규 +
+ 09.02 +
+
+ 1 + + 무명연대장 + 2 +
+
+
+ +
+ +
+ +
+
+ #4F39E0 +
+
+
+ + 면 누름 · 글자 hover +
+ #402DB8 +
+
+
+ +
+
+ B + 인디고 바이올렛 + 대비가 가장 넉넉한 안 +
+
+ oklch(48.8% 0.237 279) + 면 위 글자 대비 7.01 : 1 +
+

파랑에서 한 뼘 옮겨 앉아 다른 전적 사이트와 겹치지 않습니다. 흰 바탕 대비가 7:1 이라 작은 「신규」 글자도 또렷합니다.

+

걸리는 점 — 보라 계열이라 밀리터리 FPS 라는 소재와는 거리가 있습니다. 게임보다 서비스·툴 인상이 먼저 옵니다.

+
+ +
+
+ +
+ 찾아보기 +
+ 전적 자세히 보기 +
+ +
+
+
+ 9월 정기점검 안내 + 신규 +
+ 09.02 +
+
+ 1 + + 무명연대장 + 2 +
+
+
+ +
+ +
+ +
+
+ #007A87 +
+
+
+ + 면 누름 · 글자 hover +
+ #00616B +
+
+
+ +
+
+ C + 딥 틸 + 가장 차분한 안 +
+
+ oklch(53.0% 0.091 208) + 면 위 글자 대비 5.08 : 1 +
+

채도가 낮아 숫자가 빽빽한 화면에서 색이 먼저 튀지 않습니다. 오래 들여다보는 화면에 맞습니다.

+

걸리는 점 — 상승 초록(#12805C)과 계열이 가깝습니다. 브랜드 색과 상승 표시가 한 화면에 있으면 구분이 약해집니다.

+
+ +
+
+ +
+ 찾아보기 +
+ 전적 자세히 보기 +
+ +
+
+
+ 9월 정기점검 안내 + 신규 +
+ 09.02 +
+
+ 1 + + 무명연대장 + 2 +
+
+
+ +
+ +
+ +
+
+ #FF6A00 +
+
+
+ + 면 누름 +
+ #D95A00 +
+
+ + 글자 +
+ #C24A00 +
+
+ + 글자 hover +
+ #A03C00 +
+
+
+ +
+
+ D + 탄피 오렌지 + 선택 +
+
+ oklch(70.1% 0.201 45) + 면 위 글자 대비 2.87 : 1 +
+

네 후보 중 유일한 따뜻한 색이고, 총기·탄피 쪽 연상이 자연스럽습니다. 전적 사이트 사이에서 확실히 구분됩니다.

+

걸리는 점 — 면 위 흰 글자는 2.87:1 로 권고치(4.5:1)에 못 미칩니다. 밝기를 살리는 쪽을 택한 결과이고, 흰 바탕 위 글자는 진한 변형(#C24A00, 4.91:1)을 따로 씁니다 — 면과 글자가 서로 다른 값입니다. 하락 빨강과 색상환에서 18° 떨어져 있는 점도 계속 지켜볼 부분입니다.

+
+ +
+
+ +
+ 찾아보기 +
+ 전적 자세히 보기 +
+ +
+
+
+ 9월 정기점검 안내 + 신규 +
+ 09.02 +
+
+ 1 + + 무명연대장 + 2 +
+
+
+ +
+
+ +
+ + + diff --git a/.design/surinz/Foundations.dc.html b/.design/surinz/Foundations.dc.html new file mode 100644 index 0000000..51633b7 --- /dev/null +++ b/.design/surinz/Foundations.dc.html @@ -0,0 +1,345 @@ + + + + + + + + + + + + +
+ +

기본 요소

+

홈 화면을 그리면서 실제로 굳어진 값만 모았습니다. 여기 없는 크기·색은 새로 만든 것이니, 필요하면 여기에 먼저 추가하고 화면에 씁니다.

+ +
+ +
+
+ 글자 + Pretendard · 400 / 500 / 600 / 700 네 굵기만 +
+
+
+ 히어로 제목 + 2.125rem · 34px · 700 + 누구의 전적이 궁금하세요? +
+
+ 아트보드 제목 + 1.75rem · 28px · 700 + 브랜드 컬러 +
+
+ 섹션 제목 + 1.125rem · 18px · 700 + 게임 랭킹 +
+
+ 본문 · 목록 제목 + 0.9375rem · 15px · 400 + 9월 정기점검 안내 +
+
+ 강조 본문 + 0.9375rem · 15px · 600 + 달빛조각사 +
+
+ 보조 설명 + 0.875rem · 14px · 400 + 닉네임만 알려주시면 정리해 드릴게요 +
+
+ 날짜 · 부가 수치 + 0.8125rem · 13px · 400 + 09.02 · 1,204명 +
+
+ 표 머리 · 라벨 + 0.75rem · 12px · 500 + 순위 · 닉네임 · 등락 +
+
+ 「신규」 표기 + 0.6875rem · 11px · 700 + 신규 +
+
+

숫자는 자리가 흔들리지 않도록 tabular-nums 를 켭니다. 자간은 제목이 클수록 좁힙니다(-0.045em ~ -0.015em). 로고는 글꼴이 아니라 그린 도형입니다.

+
+ +
+
+ 치수 + 반복해서 쓰는 값 +
+
+ +
+ 라운드 — 알약(탭·버튼·칩) + 999px +
+ +
+ 라운드 — 큰 카드 · 배너 + 24 / 20 / 18px +
+ +
+ 라운드 — 보통 카드 · 상태 블록 + 16 / 14px +
+ +
+ 라운드 — 작은 타일 · 썸네일 + 12 / 10 / 8px +
+ +
+ 표 행 높이 — 데스크톱 + 46px +
+ +
+ 표 행 높이 — 모바일 + 52px +
+ +
+ 표 머리 높이 + 32 ~ 34px +
+ +
+ 섹션 사이 — 데스크톱 + 40px +
+ +
+ 섹션 사이 — 모바일 + 32px +
+ +
+ 그리드 좌우 여백 — 1440 / 768 / 390 + 40 / 24 / 20px +
+ +
+ 누를 수 있는 것의 최소 크기(모바일) + 44px +
+ +
+ 본문 최소 크기 + 12px +
+
+
+
+ +
+
+ 색 + 이 밖의 색은 쓰지 않습니다 +
+
+
+
브랜드
+
+
+ 면 + #FF6A00 +
+
+ 면 누름 + #D95A00 +
+
+ 글자 + #C24A00 +
+
+ 글자 hover + #A03C00 +
+
+
+
+
글자
+
+
+ 본문 + #14161A +
+
+ 보조 + #5B6169 +
+
+ 흐린 보조 + #7A828C +
+
+ 가장 흐린 + #9BA1A9 +
+
+ 비활성 + #C9CDD3 +
+
+
+
+
선
+
+
+ 진한 선 + #E4E8ED +
+
+ 보통 선 + #EDEFF2 +
+
+ 옅은 행 구분 + #F3F5F7 +
+
+
+
+
면
+
+
+ 기본 + #FFFFFF +
+
+ 한 겹 아래 + #FAFBFC +
+
+ 카드·탭 + #F5F6F8 +
+
+ 버튼 바탕 + #F2F4F7 +
+
+ 자리표시 + #EDEFF2 +
+
+
+
+
의미
+
+
+ 상승 + #12805C +
+
+ 하락 + #C4453D +
+
+
+
+

브랜드 색은 면이냐 글자냐에 따라 값이 갈립니다 — 면에는 #FF6A00 에 흰 글자, 흰 바탕 위 글자에는 #C24A00. 상승·하락은 의미가 정해진 색이라 다른 뜻으로 쓰지 않습니다.

+
+ +
+
+ 컴포넌트 + 화면마다 같은 모양으로 씁니다 +
+
+ +
+
탭 — 필터를 고를 때
+
통합시즌클랜
+
세그먼트 — 갈래를 고를 때
+
계급랭크전클랜
+

층위가 다르므로 모양도 다릅니다. 알약 탭을 두 줄로 쌓지 않습니다.

+
+ +
+
버튼
+
+ + + +
+
글자 링크
+
+ 더 보기 + 전적 자세히 보기 +
+

한 화면에 주 버튼(오렌지)은 하나입니다. 「더 보기」는 브랜드 색을 쓰지 않습니다.

+
+ +
+
표 한 줄
+
+ #유저등락 +
+
+ 1 + + 달빛조각사 + 2 +
+
+ 2 + + 칼든햄스터 + – +
+
+
+ 9월 정기점검 안내신규 +
+ 09.02 +
+

등락은 ▲n / ▼n / – 셋뿐입니다. 「신규」는 배경 없는 글자입니다.

+
+
+
+ +
+ + + diff --git a/.design/surinz/HomeA.dc.html b/.design/surinz/HomeA.dc.html deleted file mode 100644 index c9090dc..0000000 --- a/.design/surinz/HomeA.dc.html +++ /dev/null @@ -1,337 +0,0 @@ - - - - - - - - - - - - -
- -
-
-
- -
- 서린즈 -
- -
- -
- - -
-

누구의 전적이 궁금하세요?

-

닉네임만 알려주시면 최근 경기부터 자주 쓰는 무기까지 정리해 드릴게요.

-
- - 닉네임을 입력해 보세요 - -
-
- 최근에 찾아봤어요 - 달빛조각사 - 칼든햄스터 - 새벽두시 -
-
- - -
-
-

이벤트

-
- 전체 보기 -
- - -
- 서든 페스티벌 같이 갈래? -
- -
- 시즌 이벤트 - - 서든 페스티벌 같이 갈래? - 9월 1일 ~ 9월 30일 -
- - - - - - 1 / 5 - - -
-
- - -
-
-
-

게임 랭킹

-
- 전체 - 폭파미션 - 팀 데스매치 - 클랜전 -
-
- 전체 보기 -
- -
- 순위유저 - 승률 - K/D - 헤드샷 - 판수 -
- -
- 1 -
달빛조각사병장 3호봉
- 78.4% - 2.14 - 41.2% - 1,284 -
-
- 2 -
칼든햄스터소위 1호봉
- 74.9% - 1.96 - 38.7% - 2,041 -
-
- 3 -
새벽두시병장 1호봉
- 71.2% - 1.88 - 44.1% - 986 -
-
- 4 -
무명연대장중사 2호봉
- 69.5% - 1.74 - 33.9% - 3,102 -
-
- 5 -
한밤의저격수상사 1호봉
- 68.1% - 1.71 - 47.3% - 742 -
-
- 6 -
조용한총잡이병장 2호봉
- 66.7% - 1.68 - 36.4% - 1,530 -
- - -
- -
-
-

검색 랭킹

-
- 18:20 기준 -
-
- 순위닉네임변동 -
-
- 1달빛조각사 - 2 -
-
- 2칼든햄스터 - 1 -
-
- 3새벽두시 - 4 -
-
- 4무명연대장 - -
-
- 5한밤의저격수 - 3 -
-
- 6조용한총잡이 - 2 -
-
- 7야간부대장 - -
-
- 8헤드샷장인 - 5 -
-
-
- - -
-
-
-

서든어택 소식

더 보기 -
-
- 공지사항업데이트 -
-
-
9월 정기점검 안내 (09.04 02:00~08:00)09.02
-
비매너 이용자 제재 결과 안내09.01
-
가을 시즌 랭크전 일정 공지08.29
-
신규 맵 컨테이너 야드 추가08.28
-
AK-47 반동 수치 조정 안내08.26
-
-
- -
-
-

서린즈 소식

더 보기 -
-
- 공지사항업데이트 -
-
-
맵별 승률 통계를 새로 열었어요09.03
-
전적 갱신 속도가 두 배 빨라졌어요09.01
-
즐겨찾기한 유저 알림 기능 추가08.30
-
8월 서버 점검 결과 보고08.27
-
커뮤니티 이용 규칙을 정리했어요08.24
-
-
-
- - -
-
-

지금 방송 중

- 시청자 2,924명 -
전체 보기 -
-
-
-
-
삼보급 스나 연습
-
LIVE달빛조각사 · 1,204명
-
-
-
-
클랜전 정기 리그 중계
-
LIVE무명연대 · 862명
-
-
-
-
초보 탈출 폭파미션 강의
-
LIVE새벽두시 · 517명
-
-
-
-
시청자 참여 한 판
-
LIVE한밤의저격수 · 341명
-
-
-
- - -
-
-

커뮤니티

-
- 인기최신클립공략클랜원 모집 -
-
전체 보기 -
- -
-
-
달빛조각사312
-
-
-
-
칼든햄스터274
-
- -
-

폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.

-
-
- - 새벽두시 - - 198 -
-
- - -
-
- -
-
무명연대장163
-
-
- - -
- -
- 서린즈이용약관개인정보 처리방침문의하기 -
넥슨 공개 API 기반 · 서든어택 비공식 서비스 -
-
- - - diff --git a/.design/surinz/HomeB.dc.html b/.design/surinz/HomeB.dc.html deleted file mode 100644 index 67814c2..0000000 --- a/.design/surinz/HomeB.dc.html +++ /dev/null @@ -1,549 +0,0 @@ - - - - - - - - - - - - -
- - -
-
-
- - - - -
- 서린즈 -
- - - -
-
- - - - - 닉네임 검색 -
-
- - -
- - -
- - - - - -
-
- - - - - 궁금한 닉네임을 입력해 보세요 - -
- - -
- -
-
-

서든어택 소식

-
- 더 보기 -
-
- 공지사항 - 업데이트 -
-
-
- - 9월 정기점검 안내 - 09.02 -
-
- - 비매너 이용자 제재 결과 - 09.01 -
-
- - 가을 시즌 랭크전 일정 - 08.29 -
-
- - 신규 맵 컨테이너 야드 추가 - 08.28 -
-
- - AK-47 반동 수치 조정 - 08.26 -
-
-
- -
-
-

서린즈 소식

-
- 더 보기 -
-
- 공지사항 - 업데이트 -
-
-
- - 맵별 승률 통계를 열었어요 - 09.03 -
-
- - 전적 갱신이 두 배 빨라졌어요 - 09.01 -
-
- - 즐겨찾기 알림 기능 추가 - 08.30 -
-
- - 8월 서버 점검 결과 보고 - 08.27 -
-
- - 커뮤니티 이용 규칙 정리 - 08.24 -
-
-
-
- - -
-

커뮤니티

-
- 인기 - 최신 - 클립 - 공략 -
-
- -
- -
-
- -
-
달빛조각사
-
병장 3호봉 · 12분 전
-
- -
- -
- -
- - - -
- -
- -
좋아요 312개
-

- 달빛조각사 - 제3보급창고 마지막 라운드 1대4 역전했어요. 각도만 잘 잡으면 아직 됩니다. -

-
댓글 24개 모두 보기
-
- - -
-
- -
-
칼든햄스터
-
소위 1호봉 · 48분 전
-
- -
- -

웨어하우스 스나 자리 세 군데만 외우면 됩니다. 컨테이너 위, 이층 창문, 그리고 리스폰 바로 옆 기둥. 나머지는 다 걸립니다.

- -
- - - -
- -
- -
좋아요 274개
-
댓글 18개 모두 보기
-
- - -
-
- -
-
새벽두시
-
병장 1호봉 · 2시간 전
-
- -
- -
-
- -
-
0:24
-
- -
- - - -
- -
- -
좋아요 198개
-

- 새벽두시 - 크로스카운터 1대3 클러치. 소리만 듣고 돌았습니다. -

-
댓글 31개 모두 보기
-
- - -
- - - -
- - -
- 서린즈 - 이용약관 - 개인정보 처리방침 - 문의하기 -
- 넥슨 공개 API 기반 · 서든어택 비공식 서비스 -
-
- - - diff --git a/.design/surinz/HomeC.dc.html b/.design/surinz/HomeC.dc.html deleted file mode 100644 index 654f781..0000000 --- a/.design/surinz/HomeC.dc.html +++ /dev/null @@ -1,307 +0,0 @@ - - - - - - - - - - - - -
- - - - - -
- -
-
- - 닉네임을 입력해 보세요 -
-
- - - - -
- -
- - -
-

이벤트

전체 보기 -
- - -
- 서든 페스티벌 같이 갈래? -
- -
- 시즌 이벤트 - - 서든 페스티벌 같이 갈래? - 9월 1일 ~ 9월 30일 -
- - - - - - 1 / 5 - - -
- - -
- -
- -
-

게임 랭킹

-
- 전체폭파미션팀 데스매치 -
-
전체 보기 -
- -
- 순위유저 - 승률 - K/D - 판수 -
- -
- 1 -
달빛조각사병장 3호봉
- 78.4% - 2.14 - 1,284 -
-
- 2 -
칼든햄스터소위 1호봉
- 74.9% - 1.96 - 2,041 -
-
- 3 -
새벽두시병장 1호봉
- 71.2% - 1.88 - 986 -
-
- 4 -
무명연대장중사 2호봉
- 69.5% - 1.74 - 3,102 -
-
- 5 -
한밤의저격수상사 1호봉
- 68.1% - 1.71 - 742 -
-
- 6 -
조용한총잡이병장 2호봉
- 66.7% - 1.68 - 1,530 -
- - - - -
-
-

서든어택 소식

더 보기
-
공지사항업데이트
-
-
9월 정기점검 안내09.02
-
비매너 이용자 제재 결과09.01
-
가을 시즌 랭크전 일정08.29
-
신규 맵 컨테이너 야드 추가08.28
-
AK-47 반동 수치 조정08.26
-
-
- -
-

서린즈 소식

더 보기
-
공지사항업데이트
-
-
맵별 승률 통계를 열었어요09.03
-
전적 갱신이 두 배 빨라졌어요09.01
-
즐겨찾기 알림 기능 추가08.30
-
8월 서버 점검 결과 보고08.27
-
커뮤니티 이용 규칙 정리08.24
-
-
-
- - -
-

커뮤니티

-
- 인기최신클립 -
-
전체 보기 -
- -
-
-
달빛조각사312
-
-
-
-
칼든햄스터274
-
- -
-

폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.

-
-
- - 새벽두시 - - 198 -
-
-
-
- - - -
-
- -
- 서린즈이용약관개인정보 처리방침문의하기 -
넥슨 공개 API 기반 · 서든어택 비공식 서비스 -
-
-
- - - diff --git a/.design/surinz/Loading.dc.html b/.design/surinz/Loading.dc.html new file mode 100644 index 0000000..f4ec058 --- /dev/null +++ b/.design/surinz/Loading.dc.html @@ -0,0 +1,556 @@ + + + + + + + + + + + + +
+ + +
+
+ +
+ + + +
+ + +
+ + +
+
+

누구의 전적이 궁금하세요?

+

닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.

+ +
+ + 닉네임을 입력해 보세요 + +
+ +
+ 최근에 찾아봤어요 + + + + +
+
+
+ + +
+ + +
+
+

이벤트

전체 보기 +
+ + +
+ + + + +
+ + + + + + + + +
+
+ + +
+
+

검색 랭킹

+
+
+ 순위닉네임변동 +
+
+ 1 + + +
+
+ 2 + + +
+
+ 3 + + +
+
+ 4 + + +
+
+ 5 + + +
+
+ 6 + + +
+
+ 7 + + +
+
+ 8 + + +
+
+ 9 + + +
+
+ + +
+
+

게임 랭킹

+ 매일 오전 8시 갱신 +
전체 보기 +
+ +
+ +
+
계급 랭킹
+
+ 통합시즌 +
+
+ #유저 + 등락 +
+
+ 1 + + + +
+
+ 2 + + + +
+
+ 3 + + + +
+
+ 4 + + + +
+
+ 5 + + + +
+
+ 6 + + + +
+
+ 7 + + + +
+
+ 8 + + + +
+
+ 9 + + + +
+
+ 10 + + + +
+
+ +
+
랭크전 랭킹
+
+ 솔로파티클랜 +
+
+ #유저 + RP + 등락 +
+
+ 1 + + + + +
+
+ 2 + + + + +
+
+ 3 + + + + +
+
+ 4 + + + + +
+
+ 5 + + + + +
+
+ 6 + + + + +
+
+ 7 + + + + +
+
+ 8 + + + + +
+
+ 9 + + + + +
+
+ 10 + + + + +
+
+ +
+
클랜 랭킹
+
+ 공식일반 +
+
+ #클랜 + 등락 +
+
+ 1 + + + +
+
+ 2 + + + +
+
+ 3 + + + +
+
+ 4 + + + +
+
+ 5 + + + +
+
+ 6 + + + +
+
+ 7 + + + +
+
+ 8 + + + +
+
+ 9 + + + +
+
+ 10 + + + +
+
+
+ + +
+ +
+ +
+ 1 + 2 + 3 + 4 + 5 + … + 10 +
+ +
+
+ + +
+
+

커뮤니티

전체 보기 +
+
인기최신클립
+
+ + +
+ + + +
+
+
+ +
+
+ +
+
+

서든어택 소식

더 보기 +
+
공지사항업데이트
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+

서린즈 소식

더 보기 +
+
공지사항업데이트
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+

지금 방송 중

전체 보기 +
+
+ + +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ + + diff --git a/.design/surinz/Logo.dc.html b/.design/surinz/Logo.dc.html new file mode 100644 index 0000000..918c3ba --- /dev/null +++ b/.design/surinz/Logo.dc.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + +
+ +

서린즈 로고

+

글꼴을 그대로 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리만 둥글게 굴려 «동글»한 인상을 냈습니다. 글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, 내보낼 때도 그대로 나옵니다.

+ +
+ +
+
+ 색 + 세 가지만 씁니다 +
+
+ +
+
+
기본 — 검정 #14161A · 흰 바탕
+
+ +
+
+
강조 — 오렌지 #C24A00 · 흰 바탕
+
+ +
+
+
반전 — 흰색 · 오렌지 바탕
+
+
+

흰 바탕에 오렌지로 쓸 때는 밝은 #FF6A00 이 아니라 글자용 #C24A00 을 씁니다 — 밝은 쪽은 흰 바탕에서 2.87:1 이라 획이 날아갑니다. 사진 위에 얹어야 하면 오렌지 바탕을 깔고 흰 워드마크를 올립니다.

+
+ +
+
+ 획 두께 + 기본은 가운데. 나머지 둘은 필요할 때만 +
+
+ +
+
+
가는 획
+
큰 화면·인쇄물에서 여유 있게 보일 때
+
+ +
+
+
기본
+
헤더를 비롯한 모든 자리의 기본값
+
+ +
+
+
도톰한 획
+
아주 작게 쓰거나 굿즈처럼 두께가 필요할 때
+
+
+
+ +
+ +
+
+ 헤더 + 심볼 없이 워드마크만 +
+
+
+
+
+
+
+

데스크톱·태블릿 20px, 모바일 18px. 앞에 있던 돋보기 심볼은 뺐습니다 — 워드마크가 이미 이름을 다 말하고, 검색은 히어로와 헤더 아이콘이 따로 맡습니다.

+
+ +
+
+ 앱 아이콘 + 「서」 한 글자 +
+
+
+
+
+

파비콘·앱 아이콘처럼 정사각 한 칸만 있는 자리에는 워드마크의 첫 글자 「서」를 그대로 떼어 씁니다. 워드마크를 정사각에 욱여넣지 않습니다. 바탕은 오렌지가 기본이고, 검정·연회색은 오렌지를 못 쓰는 자리에서만 씁니다.

+
+ +
+
+ 지켜야 할 것 + +
+
    +
  • 최소 크기는 높이 16px 입니다. 그 아래로는 「린」의 ㄹ 속이 막힙니다.
    • +
  • 둘레 여백은 글자 높이의 절반 이상 비웁니다.
    • +
  • 가로세로 비율을 바꾸지 않습니다. 기울이거나 그림자·테두리를 더하지 않습니다.
    • +
  • 획 두께는 크기에 따라 저절로 얇아지지 않습니다. 아주 작게 쓸 때는 「도톰한 획」으로 바꿉니다.
    • +
  • 글자를 다시 배열하거나 「서린즈」를 다른 말로 바꿔 같은 모양을 만들지 않습니다.
    • +
  • 앱 아이콘의 「서」는 워드마크와 같은 좌표에서 떼어 온 것입니다. 따로 다시 그리지 않습니다.
    • +
+
+
+ +
+
+ 헤더에 얹은 모습 + 데스크톱과 모바일 +
+
+
+ +
+ +
+
+
+ + + +
+
+
+ +
+ + + diff --git a/.design/surinz/Main.dc.html b/.design/surinz/Main.dc.html index 0181d4e..3ae46ed 100644 --- a/.design/surinz/Main.dc.html +++ b/.design/surinz/Main.dc.html @@ -8,9 +8,9 @@ @@ -39,10 +42,7 @@
-
- -
- 서린즈 +