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° 떨어져 있는 점도 계속 지켜볼 부분입니다.
글꼴을 그대로 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리만 둥글게 굴려 «동글»한 인상을 냈습니다. 글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, 내보낼 때도 그대로 나옵니다.
+
+
+
+
+
+ 색
+ 세 가지만 씁니다
+
+
+
+
+
+
기본 — 검정 #14161A · 흰 바탕
+
+
+
+
+
강조 — 오렌지 #C24A00 · 흰 바탕
+
+
+
+
+
반전 — 흰색 · 오렌지 바탕
+
+
+
흰 바탕에 오렌지로 쓸 때는 밝은 #FF6A00 이 아니라 글자용 #C24A00 을 씁니다 — 밝은 쪽은 흰 바탕에서 2.87:1 이라 획이 날아갑니다. 사진 위에 얹어야 하면 오렌지 바탕을 깔고 흰 워드마크를 올립니다.
+
+
+
+
+ 획 두께
+ 기본은 가운데. 나머지 둘은 필요할 때만
+
+
+
+
+
+
가는 획
+
큰 화면·인쇄물에서 여유 있게 보일 때
+
+
+
+
+
기본
+
헤더를 비롯한 모든 자리의 기본값
+
+
+
+
+
도톰한 획
+
아주 작게 쓰거나 굿즈처럼 두께가 필요할 때
+
+
+
+
+
+
+
+
+ 헤더
+ 심볼 없이 워드마크만
+
+
+
+
+
+
+
+
데스크톱·태블릿 20px, 모바일 18px. 앞에 있던 돋보기 심볼은 뺐습니다 — 워드마크가 이미 이름을 다 말하고, 검색은 히어로와 헤더 아이콘이 따로 맡습니다.
+
+
+
+
+ 앱 아이콘
+ 「서」 한 글자
+
+
+
+
+
+
파비콘·앱 아이콘처럼 정사각 한 칸만 있는 자리에는 워드마크의 첫 글자 「서」를 그대로 떼어 씁니다. 워드마크를 정사각에 욱여넣지 않습니다. 바탕은 오렌지가 기본이고, 검정·연회색은 오렌지를 못 쓰는 자리에서만 씁니다.
+
+
+
+
+ 지켜야 할 것
+
+
+
+
최소 크기는 높이 16px 입니다. 그 아래로는 「린」의 ㄹ 속이 막힙니다.
+
둘레 여백은 글자 높이의 절반 이상 비웁니다.
+
가로세로 비율을 바꾸지 않습니다. 기울이거나 그림자·테두리를 더하지 않습니다.
+
획 두께는 크기에 따라 저절로 얇아지지 않습니다. 아주 작게 쓸 때는 「도톰한 획」으로 바꿉니다.
+
글자를 다시 배열하거나 「서린즈」를 다른 말로 바꿔 같은 모양을 만들지 않습니다.
+
앱 아이콘의 「서」는 워드마크와 같은 좌표에서 떼어 온 것입니다. 따로 다시 그리지 않습니다.
-