DESIGN SYSTEM

디자인 시스템 정본

v2 · 2026 . 10 . 15

N02~N07 실제 화면에서 추출한 기준입니다. 새 화면과 수정은 이 페이지의 부품을 그대로 복사해서 씁니다. 여기에 없는 모양은 만들지 않습니다.

확정 규칙

01테마 — 스플래시 · 홈 · 박스오픈은 다크(.gorae), 그 외 전부 라이트(.sea)

02프레임 393×852 · 좌우 여백 20px · 섹션 간격 14px

03서체 — 글은 KoPub 돋움, 숫자 · 가격 · 포인트는 Galmuri11

04글자 크기는 아래 8단계만 사용. 11.5 · 12.5 · 13.5 · 15.5 · 17은 가까운 단계로

05상품 썸네일 — 흰 판 #fff + 이미지 86% contain. 다크 · 라이트 공통, 색 판 금지

06하단메뉴 — 5a 정본 그대로 복사 (홈 · 각종소식 · 박스구매 · 포인트샵 · MY인벤)

07집중 흐름(결제 · 장바구니 · 선물)은 하단메뉴 · 전역 아이콘 없이 뒤로가기 + 제목만

08단위 — 상품 가격 "원", 포인트 "P". ₩ 쓰지 않음

09충전 유도 CTA · 문구 금지 · 제한 표기는 "최근 24시간 누적 5개"

10명칭은 기획 보드 261001 기준 — 포인트 · 포인트샵 · MY인벤 · 합성존 · 각종소식 · 환급 · 상품복구

글자 크기 8단계

201,840,000원Galmuri 700 · 금액 강조

18고래 박스 출시돋움 800 · 히어로 제목

15당첨 소식돋움 700 · 섹션 제목 · 버튼

14[세이코] 스퀘어 오토매틱 워치돋움 700 · 카드 제목 · 상품명

13배송 신청 후 등기로 받을 수 있습니다.돋움 400 · 본문 · 행 라벨

12보유 상품을 모아 상위 등급에 도전돋움 400 · 보조 설명

112026 . 08 . 18 · 3분 전돋움 · 메타 · 배지 · 하단메뉴

10NEW · 보냄돋움 700 · 작은 배지만

색 · 라이트 (.sea)

sea-haze#F2F9FC 화면 바탕

sea-card#FFFFFF 카드

sea-shallow#E3F0F8 구분선 · 비활성

sea-line#CBDFEC 테두리

sea-ink#12325E 제목 · 값

sea-mid#4A6B99 본문

sea-label#7F9BC2 메타

sea-current#2E7FF2 주 버튼 · 레어

sea-treasure#E8A81C 로또 · 포인트

sea-jelly#7A56E0 에픽

sea-alert#E04B42 경고 · 불가

sea-pearl#FFF3D6 로또 배지 바탕

색 · 다크 (.gorae)

gorae-abyss#0B2149 화면 바탕

gorae-deep#163465 면

gorae-tide#23498C 테두리

gorae-foam#F2F7FF 글자

gorae-mist#C4D9F5 본문

gorae-dusk#7F9BD0 메타

gorae-current#2E7FF2 주 버튼

gorae-treasure#F2B23A 로또 · 강조

gorae-jelly#8A66E8 에픽

gorae-alert#E8564E 알림 숫자

qb-card-bg반투명 카드

간격

좌우 여백20

섹션 · 카드 사이14

카드 안쪽16

홈 섹션 사이28

정보 행 높이44

하단 CTA 바12 20 8

모서리

카드 · 주 버튼14

행 · 보조 버튼 · 썸네일12

세그먼트 버튼10

배지6

칩 · 알약999

그림자

카드inset 0 0 0 1px rgba(18,50,94,.06), 0 6px 16px rgba(18,50,94,.06)

주 버튼0 8px 18px rgba(46,127,242,.32)

썸네일 테두리inset 0 0 0 1px rgba(18,50,94,.08)

COMPONENTS

부품

화면에 쓰는 모양은 여기서 그대로 복사합니다. 번호(C-01~)로 지칭하면 됩니다.

C-01상단바 · 라이트서브화면 기본

C-02상단바 · 하늘 헤더MY인벤 · 선물 · 마이 계열, 첫 카드가 24px 겹침

C-03상단바 · 홈 다크포인트 · 강조 버튼(택1) · 알림함 · 마이페이지

12,450 P

합성

C-04하단메뉴 · 5a 정본활성 탭만 파란 막대 + 마스코트, 나머지 회색

C-05상품 썸네일흰 판 + 86% · 크기 4단계

S 48

M 68

L 96

S 48

M 68

다크 화면도 흰 판 그대로

히어로(상세 상단)는 XL 168 · 모서리 16. 박스 아트(상어 · 고래 박스)도 같은 흰 판 규칙.

C-06카드 · 섹션 제목 · 상품 행라이트

등급별 구성 상품 더보기

로또 순금 24K 골드바 10g 1,840,000원

에픽 [세이코] 스퀘어 오토매틱 워치 890,000원

C-07카드 · 섹션 제목 · 당첨 행다크

당첨 소식 더보기

낚시왕고래 님 당첨 순금 24K 골드바 10g 1,840,000원 3분 전

심해러버 님 당첨 [젠틀몬스터] 스퀘어 선글라스 320,000원 25분 전

C-08정보 행 · 배지 · 상태 칩

주문 번호G260818-0412

보낸 시각2026 . 08 . 18 14:22

상태수령 대기

로또 에픽 레어 진행 중 완료 불가

C-09버튼 · 하단 CTA 바흰 판 없음, 화면 바탕 위에 바로

단독 · 54 / 14 구매하기

비활성 + 사유 선물 보내기 최종 확인에 체크하면 보낼 수 있어요

2버튼 · 52 / 12 · 보조 왼쪽, 주 오른쪽

닫기 문의하기

C-10세그먼트 · 선택 · 체크

실물 모바일 티켓

낚시왕고래

박스요정

위 내용을 확인했습니다

C-11경고 · 안내 블록경고는 화면당 1개

보낸 뒤에는 취소할 수 없어요

보내는 즉시 내 MY인벤에서 사라집니다.

장바구니는 마지막 변경 후 24시간이 지나면 비워집니다.

C-12팝업딤 위 중앙 · 2버튼

환급할까요? 환급한 상품은 상품복구로만 되돌릴 수 있어요.

취소 환급하기

CHARACTER

캐릭터 디자인

바다 생물 마스코트 9종. 등급 아바타 · 프로필 · 이벤트 일러스트에 공통으로 사용합니다.

고래 Whale

돌고래 Dolphin

바다거북 Sea Turtle

문어 Octopus

해파리 Jellyfish

복어 Pufferfish

흰동가리 Clownfish

해마 Seahorse

아기상어 Baby Shark

GRADE

등급별 배지

최근 3개월 총 결제 금액 기준 9단계 회원 등급. 브론즈에서 얼티미트까지 육각 배지로 표현합니다.

브론즈 Bronze

실버 Silver

골드 Gold

로즈 Rose

프리미엄 Premium

엘리트 Elite

엑스퍼트 Expert

챔피언 Champion

얼티미트 Ultimate