Design System
디시인사이드의 디자인 시스템이에요.
현재 서비스에 쓰이는 컴포넌트를 바탕으로 만들었어요.
브랜드와 사용자 경험을 일관되게 지키기 위한 기준이에요.
Color
static
라이트와 다크 모드에서 같은 색상을 유지해야 할 때 사용합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| black | #000000 | #000000 | common/0 / common/0 | |
| white | #ffffff | #ffffff | common/100 / common/100 |
primary
디시인사이드를 대표하는 네이비로, 주요 동작과 선택된 상태를 강조할 때 사용합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| normal | #3C46A0 | #3C46A0 | navy/700 / navy/700 | |
| strong | #29367c | #4b58a7 | navy/800 / navy/600 | |
| heavy | #1d2761 | #3C46A0 | navy/900 / navy/700 |
gallery
갤러리 유형별 고유 색상을 적용해 각 갤러리를 구분합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| major-normal | #3C46A0 | #3C46A0 | navy/700 / navy/700 | |
| major-line | #29367c | #4b58a7 | navy/800 / navy/600 | |
| minor-normal | #ff9900 | #ff9900 | orange/500 / orange/500 | |
| minor-line | #ff7e00 | #ffac00 | orange/600 / orange/400 | |
| mini-normal | #6f6dd9 | #6f6dd9 | violet/500 / violet/500 | |
| mini-line | #4f4dc6 | #8d8be4 | violet/600 / violet/400 | |
| person-normal | #4fbe17 | #37a541 | green/500 / green/700 | |
| person-line | #2fa40e | #4fbe17 | green/600 / green/500 | |
| hot-normal | #f03c23 | #f03c23 | redOrange/500 / redOrange/500 | |
| hot-line | #d31902 | #f15c41 | redOrange/600 / redOrange/400 |
label
텍스트의 중요도와 상태에 따라 명도를 구분해 정보의 위계를 표현합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| alternative | #858588 | #a0a1a5 | neutral/53 / neutral/64 | |
| assistive | #c7c8c9 | #74767b | neutral/78 / neutral/47 | |
| disable | #dfdfe0 | #2f3033 | neutral/88 / neutral/19 | |
| neutral | #47484c | #c7c8c9 | neutral/29 / neutral/78 | |
| normal | #171719 | #f7f7f8 | neutral/9 / neutral/97 | |
| strong | #000000 | #ffffff | common/0 / common/100 |
background
화면의 기본 바탕과 카드, 팝업처럼 구분이 필요한 영역에 사용합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| elevated-alternative | #f7f7f8 | #212225 | neutral/97 / neutral/14 | |
| elevated-normal | #ffffff | #1b1c1e | common/100 / neutral/11 | |
| normal-alternative | #f7f7f8 | #141415 | neutral/97 / neutral/8 | |
| normal-normal | #ffffff | #0f0f10 | common/100 / neutral/6 |
interaction
버튼이나 입력 요소를 누르거나 사용할 수 없을 때의 상태를 색상으로 전달합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| disable | #f4f4f5 | #2e2f33 | neutral/96 / neutral/20 | |
| inactive | #989ba2 | #5a5c63 | neutral/62 / neutral/37 |
line
화면 안의 영역을 나누거나 요소 사이의 경계를 표시할 때 사용합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| normal-alternative | #f4f4f5 | #2e2f32 | neutral/96 / neutral/23 | |
| normal-neutral | #e8e8ea | #323439 | neutral/91 / neutral/21 | |
| normal-normal | #e0e0e2 | #36383c | neutral/89 / neutral/22 | |
| solid-alternative | #f4f4f5 | #2e2f33 | neutral/96 / neutral/20 | |
| solid-neutral | #eaebec | #333438 | neutral/92 / neutral/25 | |
| solid-normal | #e1e2e4 | #37383c | neutral/90 / neutral/24 |
status
완료, 주의, 오류처럼 상황에 담긴 의미를 색상으로 전달합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| cautionary | #ffac00 | #ffcf66 | orange/400 / orange/300 | |
| negative | #d53f47 | #de5e67 | red/500 / red/400 | |
| positive | #4fbe17 | #6cd42b | green/500 / green/400 |
accent
주요 색상 외에 강조가 필요한 영역에 사용하며, 배경과 텍스트 색상을 함께 구성합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| background-navy | #4b58a7 | #8692d5 | navy/600 / navy/400 | |
| background-violet | #6f6dd9 | #b4b3ef | violet/500 / violet/300 | |
| background-cyan | #00a1cb | #66d4ea | cyan/500 / cyan/300 | |
| background-green | #4fbe17 | #37a541 | green/500 / green/700 | |
| background-orange | #ff9900 | #ff9900 | orange/500 / orange/500 | |
| background-red | #d53f47 | #ec8d95 | red/500 / red/300 | |
| foreground-navy | #3C46A0 | #8692d5 | navy/700 / navy/400 | |
| foreground-violet | #4f4dc6 | #8d8be4 | violet/600 / violet/400 | |
| foreground-cyan | #117d97 | #2cbcdd | cyan/600 / cyan/400 | |
| foreground-green | #2fa40e | #6cd42b | green/600 / green/400 | |
| foreground-orange | #ff7e00 | #ffac00 | orange/600 / orange/400 | |
| foreground-red | #b82e35 | #de5e67 | red/600 / red/400 | |
| background-redOrange | #f03c23 | #f69079 | redOrange/500 / redOrange/300 | |
| foreground-redOrange | #d31902 | #f15c41 | redOrange/600 / redOrange/400 |
inverse
주변 화면과 밝기를 반전시켜 토스트 같은 안내 요소를 강조합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| background | #1b1c1e | #36383c | neutral/11 / neutral/22 | |
| label | #f7f7f8 | #f7f7f8 | neutral/97 / neutral/97 | |
| primary | #5064c3 | #b1b9e7 | navy/500 / navy/300 |
fill
선택된 요소나 콘텐츠가 채워질 영역을 옅은 배경으로 표현합니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| alternative | #f8f8f8 | #252729 | neutral/98 / neutral/15 | |
| normal | #f4f4f5 | #2e2f32 | neutral/96 / neutral/23 | |
| strong | #e8e8ea | #323439 | neutral/91 / neutral/21 |
material
모달이나 바텀 시트 뒤의 배경을 어둡게 처리해 열린 화면에 집중하도록 돕습니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| dimmer | #868687 | #000000 | neutral/54 / common/0 |
component
특정 컴포넌트에서만 쓰는 색입니다.
| 색 | 토큰 | Light | Dark | Atomic (Light / Dark) |
|---|---|---|---|---|
| button/line-fill | #ffffff | #0f0f10 | common/100 / neutral/6 | |
| button/line-fill-pressed | #f4f4f5 | #2e2f32 | neutral/96 / neutral/23 | |
| button/line-label | #29367c | #8692d5 | navy/800 / navy/400 | |
| button/line-stroke | #29367c | #8692d5 | navy/800 / navy/400 | |
| comment/reply-bg | #f7f7f8 | #1b1c1e | neutral/97 / neutral/11 |
Atomic
용도별 색상의 기준이 되는 팔레트로, 각 색상을 밝기 단계에 따라 정리했습니다.
주요 색상
주요 색상을 일곱 가지 계열로 나누어 구성했습니다.
navy
브랜드 메인 컬러는 #3C46A0입니다.
300
#b1b9e7
400
#8692d5
500
#5064c3
600
#4b58a7
700
#3C46A0
800
#29367c
900
#1d2761
cyan
보조 색상입니다.
300
#66d4ea
400
#2cbcdd
500
#00a1cb
600
#117d97
700
#0b5d74
green
인물 갤러리와 긍정 상태에 사용합니다.
300
#95e05c
400
#6cd42b
500
#4fbe17
600
#2fa40e
700
#37a541
orange
마이너 갤러리에 사용합니다.
300
#ffcf66
400
#ffac00
500
#ff9900
600
#ff7e00
700
#c26f0a
800
#954f09
redOrange
흥한 갤러리에 사용합니다.
300
#f69079
400
#f15c41
500
#f03c23
600
#d31902
700
#a21907
red
부정 상태와 순위 강조에 사용합니다.
300
#ec8d95
400
#de5e67
500
#d53f47
600
#b82e35
700
#912226
violet
미니 갤러리에 사용합니다.
300
#b4b3ef
400
#8d8be4
500
#6f6dd9
600
#4f4dc6
700
#3230ab
기본 무채색
배경, 텍스트, 구분선에 필요한 밝기를 선택할 수 있도록 무채색을 단계별로 구성했습니다.
c0
#000000
c100
#ffffff
6
#0f0f10
8
#141415
9
#171719
11
#1b1c1e
14
#212225
15
#252729
19
#2f3033
20
#2e2f33
21
#323439
22
#36383c
23
#2e2f32
24
#37383c
25
#333438
28
#444549
29
#47484c
37
#5a5c63
38
#5e5e63
47
#74767b
53
#858588
54
#868687
62
#989ba2
64
#a0a1a5
69
#aeafb4
78
#c7c8c9
88
#dfdfe0
89
#e0e0e2
90
#e1e2e4
91
#e8e8ea
92
#eaebec
96
#f4f4f5
97
#f7f7f8
98
#f8f8f8
모드별 색상 적용
같은 역할의 색상도 라이트와 다크 모드에 맞는 밝기로 적용합니다.
Typography
서비스 UI는 Pretendard를 먼저 쓰고, 쓸 수 없는 환경에서는 기기의 시스템 글꼴로 대체합니다.
UI 글꼴
| 항목 | 기준 |
|---|---|
| 글꼴 | Pretendard를 먼저 씁니다. 쓸 수 없으면 macOS와 iOS는 Apple SD Gothic Neo, Windows는 맑은 고딕, Android는 시스템 기본 서체(Noto Sans CJK)로 대체합니다. |
타이포그래피 가이드는 재정의가 필요합니다.
Iconography
화면의 동작과 상태를 시각적으로 전달하는 아이콘을 제공합니다.
기본 UI 아이콘
검색, 이동, 닫기처럼 여러 화면에서 반복되는 동작에 사용합니다.
| 항목 | 값 |
|---|---|
| 크기 | 20 × 20 |
| 선 두께 | 1.5 |
| 끝과 꺾임 | round cap, round join |
| 기본 색 | label/neutral |
ui/chevR
ui/chevL
ui/chevU
ui/chevD
ui/x
ui/plus
ui/check
ui/search
ui/ext
ui/menu
ui/back
ui/home
ui/star
ui/pen
ui/bell
ui/user
ui/more
ui/img
ui/video
ui/smile
ui/vote
ui/spark
ui/refresh
ui/reply
ui/alert
색상
아이콘을 사용할 화면의 모드에 맞춰 색상을 선택합니다.
아이콘 분류
필요한 아이콘은 Media Kit에서 용도별로 찾을 수 있습니다.
Components
기존 서비스 형태를 바탕으로 제작된 컴포넌트입니다.
각 항목에서 크기와 상태별 예시를 확인할 수 있습니다.
Buttons
사용자가 실행할 수 있는 동작을 안내하고, 중요도에 따라 버튼의 형태를 구분합니다.
Button
사용자가 실행할 동작을 안내하는 기본 버튼입니다.
동작의 중요도에 따라 네 가지 형태 중 하나를 고릅니다.
취소
등록
구성
Button은 영역을 잡는 Container와 동작을 알려 주는 Label로 구성됩니다.
버튼
1
2
- Container
- Label
속성
Variant
Primary, Line, Neutral, Text 네 가지입니다.
배경과 선의 대비가 강할수록 눈에 먼저 띕니다.
버튼
Primary
버튼
Line
버튼
Neutral
버튼
Text
Size
L 48, M 40, S 32 세 가지입니다.
모바일 하단 고정 버튼처럼 크게 눌러야 하는 곳은 L, 일반 화면은 M, 좁은 영역은 S를 씁니다.
버튼
L 48
버튼
M 40
버튼
S 32
State
Default, Pressed, Disabled 세 가지 상태가 있습니다.
DefaultPressedDisabledPrimary버튼버튼버튼Line버튼버튼버튼Neutral버튼버튼버튼Text버튼버튼버튼
위계
버튼이 눈에 띄는 정도는 배경과 선의 대비로 정해집니다.
한 화면에서 강조하려는 정도에 맞춰 Variant를 고릅니다.
| 강조 | Variant | 한 영역 안 개수 | 용도 |
|---|---|---|---|
| 높음 | Primary | 1개 | 화면이나 영역의 유일한 주행동 |
| 중간 | Line | 1개 | Primary가 이미 있을 때 두 번째 행동 |
| 중간 | Neutral | 여러 개 | 주행동이 아닌 일반 행동 |
| 낮음 | Text | 여러 개 | 더보기, 취소처럼 가벼운 보조 행동 |
스펙
크기
| Size | 높이 | 글자 크기 | 좌우 여백 |
|---|---|---|---|
| L | 48 | 15 | 16 |
| M | 40 | 14 | 16 |
| S | 32 | 13 | 12 |
모든 크기 공통 : 라운드 0, 그림자 0, 글자 굵기 700. Text는 좌우 여백 8입니다.
색
| Variant | 상태 | 배경 | 글자 | 선 |
|---|---|---|---|---|
| Primary | Default | primary/normal | common/100 | 없음 |
| Pressed | primary/strong | common/100 | 없음 | |
| Disabled | interaction/disable | label/assistive | 없음 | |
| Line | Default | button/line-fill | button/line-label | button/line-stroke |
| Pressed | button/line-fill-pressed | button/line-label | button/line-stroke | |
| Disabled | background/normal-normal | label/assistive | line/normal-normal | |
| Neutral | Default | background/normal-normal | label/normal | line/normal-normal |
| Pressed | fill/strong | label/normal | line/normal-normal | |
| Disabled | background/normal-normal | label/assistive | line/normal-normal | |
| Text | Default | 없음 | accent/foreground-navy | 없음 |
| Pressed | 없음 | primary/strong | 없음 | |
| Disabled | 없음 | label/assistive | 없음 |
IconButton
동작을 아이콘으로 표현해 공간을 간결하게 활용할 때 사용합니다.
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 누르는 영역. 40, 32, 28 정사각형 |
| 2 | Icon | 동작을 나타내는 아이콘 |
속성
- Variant : Line, Ghost
- Size : 40, 32, 28
- State : Default, Pressed, Disabled
DefaultPressedDisabledLine, 40Line, 32Line, 28Ghost, 40Ghost, 32Ghost, 28
18 variants, 페이저 화살표, 닫기, 더보기에 씁니다
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 글자 | label/neutral |
| Container | Pressed | 배경 | fill/normal |
| Container | Disabled | 글자 | label/assistive |
Inputs & Controls
사용자가 정보를 입력하거나 필요한 항목을 선택할 수 있도록 돕습니다.
TextField
텍스트를 입력받고, 입력 과정의 포커스, 오류, 비활성 상태를 함께 안내합니다.
내용을 입력해 주세요
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 입력 영역과 테두리 |
| 2 | 입력 문구 | 입력한 값 또는 안내 문구 |
| 3 | 보조 아이콘 | 지우기처럼 입력을 돕는 아이콘. 필요할 때만 |
| 4 | 도움말 | 오류를 안내하는 문구. Error일 때만 |
속성
- State : Default, Focus, Filled, Error, Disabled
- Size : L 48, M 40
내용을 입력해 주세요
Default, L 48
입력한 내용
Focus, L 48
입력한 내용
Filled, L 48
입력한 내용
닉네임은 2자 이상이어야 해요
Error, L 48
내용을 입력해 주세요
Disabled, L 48
내용을 입력해 주세요
Default, M 40
입력한 내용
Focus, M 40
입력한 내용
Filled, M 40
입력한 내용
닉네임은 2자 이상이어야 해요
Error, M 40
내용을 입력해 주세요
Disabled, M 40
10 variants
스펙
크기
| 크기 |
|---|
| L 48 |
| M 40 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| Container | Default | 글자 | label/normal |
| Container | Focus | 선 | accent/foreground-navy |
| Container | Error | 선 | status/negative |
| Container | Disabled | 배경 | fill/normal |
| Container | Disabled | 글자 | label/assistive |
| Container | Disabled | 선 | line/normal-alternative |
| 안내 문구 | Default | 글자 | label/assistive |
| 보조 아이콘 | Default | 글자 | label/alternative |
| 도움말 | Default | 글자 | status/negative |
SearchBar
검색어를 입력해 원하는 갤러리나 콘텐츠를 찾을 때 사용합니다.
갤러리 & 통합검색
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 입력 영역 | 검색어를 입력하는 칸 |
| 2 | 검색 버튼 | 검색을 실행하는 버튼 |
| 3 | 지우기 아이콘 | 입력한 검색어를 지움. Filled일 때만 |
속성
- Platform : Touch, PC
- State : Default, Focus, Filled
갤러리 & 통합검색
Touch, Default
갤러리 & 통합검색
Touch, Focus
주식
Touch, Filled
갤러리 & 통합검색
PC, Default
갤러리 & 통합검색
PC, Focus
주식
PC, Filled
6 variants, 라운드 0
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 전체 | Default | 배경 | background/normal-normal |
| 전체 | Default | 선 | primary/normal |
| 입력 영역 | Focus | 선 | primary/normal |
| 전체 | Default | 배경 | primary/normal |
Checkbox
여러 선택지 중 필요한 항목을 동시에 선택할 수 있습니다.
실시간 베스트
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 상자 | 선택 여부를 보여 주는 네모 |
| 2 | 체크 | 선택했을 때 나타나는 표시 |
| 3 | 라벨 | 선택지 문구 |
속성
- State : On, Off, Disabled
- Color : Navy, Red, Yellow
실시간 베스트
On, Navy
실시간 베스트
On, Red
실시간 베스트
On, Yellow
실시간 베스트
Off, Navy
실시간 베스트
Disabled, Navy
5 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 라벨 | Default | 선 | line/normal-normal |
| 라벨 | Default | 배경 | background/normal-normal |
| 상자 | On | 배경 | primary/normal |
| 상자 | Red, On | 배경 | status/negative |
| 상자 | Yellow, On | 배경 | accent/background-orange |
| 라벨 | Disabled | 글자 | label/assistive |
| 상자 | Disabled | 배경 | fill/normal |
| 상자 | Disabled | 선 | line/normal-alternative |
Radio
여러 선택지 중 하나만 선택해야 하는 경우에 사용합니다.
최다 조회
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 원 | 선택 여부를 보여 주는 동그라미 |
| 2 | 라벨 | 선택지 문구 |
속성
- State : Off, On, Disabled
최다 조회
Off
최다 조회
On
최다 조회
Disabled
3 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 라벨 | Default | 선 | line/normal-normal |
| 라벨 | Default | 배경 | background/normal-normal |
| 원 | On | 선 | primary/strong |
| 라벨 | Disabled | 글자 | label/assistive |
| 원 | Disabled | 배경 | fill/normal |
| 원 | Disabled | 선 | line/normal-alternative |
Toggle
설정을 켜거나 끄고 변경 결과를 바로 적용하는 경우에 사용합니다.
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 트랙 | 켜짐과 꺼짐을 색으로 보여 주는 바탕 |
| 2 | 손잡이 | 상태에 따라 좌우로 움직이는 원 |
속성
- State : Off, On, Disabled
Off
On
Disabled
3 variants, 라운드 20
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 트랙 | Off | 배경 | #D3D4D7 (다크 interaction/inactive) |
| 트랙 | On | 배경 | primary/normal (다크 #5B67C7) |
| 손잡이 | 전체 | 배경 | common/100 |
| 전체 | Disabled | 투명도 | 60% |
Select
선택지를 접힌 목록으로 제공하고, 목록을 펼쳐 필요한 항목을 고를 수 있습니다.
선택해 주세요
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 선택 영역과 테두리 |
| 2 | 선택값 | 고른 항목 또는 안내 문구 |
| 3 | 펼침 아이콘 | 목록을 열고 닫는 화살표 |
| 4 | 목록 | 펼쳤을 때 나타나는 선택지. Open일 때만 |
속성
- State : Default, Selected, Open, Disabled
선택해 주세요
Default
최다 조회
Selected
최다 조회
Open
최다 조회
Disabled
4 variants, 라운드 0
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| 펼침 아이콘 | Default | 글자 | label/neutral |
| Container | Open | 선 | primary/normal |
| Container | Disabled | 글자 | label/assistive |
| Container | Disabled | 배경 | fill/normal |
Navigation
화면이나 콘텐츠 사이를 이동하고, 원하는 보기 방식으로 전환할 수 있도록 돕습니다.
Tab
같은 화면 안에서 분류된 콘텐츠를 전환할 때 사용합니다.
실시간 베스트
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 라벨 | 탭 이름 |
| 2 | 선택 표시선 | 선택된 탭 아래 2px 선. On일 때만 |
| 3 | 링크 아이콘 | 다른 화면으로 이동하는 탭 표시. Link일 때만 |
속성
- State : On, Off, Link
- Size : L 48, M 44
- Platform : 모바일, PC
OnOffLinkL 48, 모바일실시간 베스트실시간 베스트실시간 베스트M 44, PC실시간 베스트실시간 베스트실시간 베스트
6 variants
스펙
크기
| 크기 | 쓰는 곳 |
|---|---|
| L 48 | 모바일 |
| M 44 | PC |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 라벨 | Default | 글자 | label/alternative |
| 라벨 | Default | 배경 | background/normal-normal |
| 라벨 | On | 글자 | label/normal |
| 라벨 | On | 선 | primary/strong |
Segment
관련된 선택지를 나란히 배치해 정렬이나 보기 방식을 전환합니다.
최신랭킹
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 칸을 묶는 외곽선 |
| 2 | 칸 | 각 선택지 |
| 3 | 선택된 칸 | 현재 고른 선택지 |
속성
- 칸 수 : 2칸, 3칸
- Color : Navy, Green
- Size : L 36, M 28
- Platform : 모바일, PC
2칸3칸Navy, L 36, 모바일최신랭킹조회추천댓글Navy, M 28, PC최신랭킹조회추천댓글Green, L 36, 모바일최신랭킹조회추천댓글Green, M 28, PC최신랭킹조회추천댓글
8 variants
스펙
크기
| 크기 | 쓰는 곳 |
|---|---|
| L 36 | 모바일 |
| M 28 | PC |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 선 | line/normal-normal |
| 칸 | Default | 배경 | background/normal-normal |
| 칸 | Default | 글자 | label/alternative |
| 칸 | Default | 선 | line/normal-normal |
| 칸 | On | 배경 | primary/normal |
Chip
키워드나 최근 방문 항목을 간결하게 보여주고, 선택하거나 삭제할 수 있습니다.
주식갤
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 칩 영역과 테두리 |
| 2 | 라벨 | 키워드나 갤러리 이름 |
| 3 | 삭제 아이콘 | 칩을 지움. Removable일 때만 |
| 4 | 숫자 | 새 글 수 같은 숫자. Badge일 때만 |
속성
- Type : Default, Selected, Removable, Badge
- Size : L 32, M 26
- Platform : 모바일, PC
DefaultSelectedRemovableBadgeL 32, 모바일주식갤주식갤주식갤주식갤+12M 26, PC주식갤주식갤주식갤주식갤+12
8 variants, 라운드 0 (pill 금지)
스펙
크기
| 크기 | 쓰는 곳 |
|---|---|
| L 32 | 모바일 |
| M 26 | PC |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 글자 | label/normal |
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| Container | On | 배경 | primary/normal |
| 삭제 아이콘 | Default | 글자 | label/alternative |
| 숫자 | Default | 글자 | status/negative |
Pager
이전, 다음 또는 페이지 번호로 목록을 이동합니다.
1 / 10
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 화살표 | 이전과 다음으로 이동하는 버튼 |
| 2 | 페이지 표시 | 현재와 전체 페이지(Compact) 또는 페이지 번호(Numbered) |
속성
- Type : Compact, Numbered
- Size : L 36, M 28, S 24
- Platform : 모바일, PC, 카드
1 / 10
Compact, L 36, 모바일
1 / 10
Compact, M 28, PC
1 / 10
Compact, S 24, 카드
12345…10
Numbered, L 36, 모바일
12345…10
Numbered, M 28, PC
12345…10
Numbered, S 24, 카드
6 variants
스펙
크기
| 크기 | 쓰는 곳 |
|---|---|
| L 36 | 모바일 |
| M 28 | PC |
| S 24 | 카드 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 전체 | Default | 글자 | label/normal |
| 전체 | On | 글자 | accent/foreground-navy |
| 전체 | 생략 | 글자 | label/assistive |
| 전체 | Default | 선 | line/normal-normal |
| 화살표 | Default | 글자 | label/neutral |
| 화살표 | Default | 배경 | background/normal-normal |
| 화살표 | Default | 선 | line/normal-normal |
TopBar
화면 제목과 주요 동작을 상단에 표시합니다.
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 왼쪽 영역 | 로고 또는 뒤로가기 |
| 2 | 가운데 영역 | 화면 제목 또는 검색창 |
| 3 | 오른쪽 영역 | 주요 동작 아이콘 |
속성
- Type : Home, Page, Search
- Size : Touch 375×56, PC 1200×64
Home, Touch 375×56
Page, Touch 375×56
Search, Touch 375×56
Home, PC 1200×64
Page, PC 1200×64
6 variants, PC는 폭을 줄여 보여 줍니다
스펙
크기
| 크기 |
|---|
| Touch 375×56 |
| PC 1200×64 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
BottomTabBar
앱의 주요 화면을 이동하는 하단 메뉴입니다.
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 탭 항목 | 아이콘과 라벨로 된 메뉴 5개 |
| 2 | 선택 표시 | 현재 화면의 탭을 남색으로 표시 |
속성
- Active : 홈, 즐겨찾기, 글쓰기, 알림, 마이
홈
즐겨찾기
글쓰기
알림
마이
5 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| 탭 항목 | Default | 글자 | label/alternative |
| 탭 항목 | On | 글자 | accent/foreground-navy |
Lists & Cards
게시글, 댓글, 순위, 카드의 표시 예시입니다.
ListRow
게시글의 제목과 정보를 목록으로 표시합니다.
메타는 갤러리명 Bold, 작성자, 시간과 조회수 순으로 흐려지고, 갤러리명은 여러 갤러리 글이 섞이는 목록에서만 넣습니다.
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리[47]
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 제목 | 게시글 제목 |
| 2 | 댓글 수 | 제목 옆 숫자 |
| 3 | 정보 | 갤러리명, 작성자, 시간, 조회수 |
| 4 | 썸네일 | 대표 이미지. Thumb일 때만 |
| 5 | 배지 | 공지 같은 유형 표시. Notice일 때만 |
속성
- Type : Text, Thumb, Notice, Read
- Size : PC 848×52, PC 848×64 (썸네일 64×40), Touch 375×72, Touch 375×80 (썸네일 72×48)
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리[47]
Text, PC 848×52
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리[47]
Thumb, PC 848×64 (썸네일 64×40)
공지갤러리 이용 안내와 운영 원칙을 확인해 주세요
Notice, PC
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리[47]
Read, PC
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리 [47]주식갤ㅇㅇ12:41조회 3,071
Text, Touch 375×72
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리 [47]주식갤ㅇㅇ12:41조회 3,071
Thumb, Touch 375×80 (썸네일 72×48)
8 variants, PC는 폭을 줄여 보여 줍니다
스펙
크기
| 크기 |
|---|
| PC 848×52 |
| PC 848×64 (썸네일 64×40) |
| Touch 375×72 |
| Touch 375×80 (썸네일 72×48) |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-alternative |
| Container | Default | 글자 | label/neutral |
| Container | Default | 글자 | status/negative |
| Container | Default | 글자 | label/alternative |
| Container | Default | 배경 | fill/strong |
RankRow
순위와 등락, 갤러리 정보를 표시합니다.
1주식 갤러리1,204
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 순위 | 갤러리 유형 색으로 칠한 번호 |
| 2 | 갤러리명 | 순위에 오른 갤러리 |
| 3 | 등락 | 순위가 오르고 내린 정도 |
| 4 | 수치 | 보조 정보 |
속성
- Rank : Top, Normal
- Trend : Up, Down, Same
- Gallery : Major, Minor, Mini, Person
1주식 갤러리1,204
Top, Up, Major
1주식 갤러리1,204
Top, Up, Minor
1주식 갤러리1,204
Top, Up, Mini
1주식 갤러리1,204
Top, Up, Person
2주식 갤러리1,204
Top, Down, Major
2주식 갤러리1,204
Top, Down, Minor
2주식 갤러리1,204
Top, Down, Mini
2주식 갤러리1,204
Top, Down, Person
3주식 갤러리1,204
Top, Same, Major
3주식 갤러리1,204
Top, Same, Minor
3주식 갤러리1,204
Top, Same, Mini
3주식 갤러리1,204
Top, Same, Person
4주식 갤러리1,204
Normal, Up, Major
4주식 갤러리1,204
Normal, Up, Minor
4주식 갤러리1,204
Normal, Up, Mini
4주식 갤러리1,204
Normal, Up, Person
5주식 갤러리1,204
Normal, Down, Major
5주식 갤러리1,204
Normal, Down, Minor
5주식 갤러리1,204
Normal, Down, Mini
5주식 갤러리1,204
Normal, Down, Person
6주식 갤러리1,204
Normal, Same, Major
6주식 갤러리1,204
Normal, Same, Minor
6주식 갤러리1,204
Normal, Same, Mini
6주식 갤러리1,204
Normal, Same, Person
24 variants, 실북갤, 흥한갤, 신설갤 카드에서 함께 씁니다
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| Container | Major | 배경 | gallery/major-normal |
| Container | Minor | 배경 | gallery/minor-normal |
| Container | Mini | 배경 | gallery/mini-normal |
| Container | Person | 배경 | gallery/person-normal |
| Container | Default | 글자 | label/normal |
| Container | Up | 글자 | status/negative |
| Container | Down | 글자 | accent/foreground-navy |
| Container | Same | 글자 | label/alternative |
| Container | Default | 글자 | label/alternative |
SectionHeader
영역의 제목과 더보기 동작을 표시합니다.
실북갤실시간 북적 갤러리
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 제목 | 영역 이름 |
| 2 | 부제목 | 제목을 풀어 쓴 설명 |
| 3 | 더보기 | 전체 목록으로 이동. More일 때만 |
| 4 | 강조선 | 아래 2px 선. Strong일 때만 |
속성
- Type : Plain, More, Strong
- Size : PC 320×48, Touch 375×52
실북갤실시간 북적 갤러리
Plain, PC 320×48
실북갤실시간 북적 갤러리더보기
More, PC 320×48
실북갤실시간 북적 갤러리더보기
Strong, PC 320×48
실북갤실시간 북적 갤러리
Plain, Touch 375×52
실북갤실시간 북적 갤러리더보기
More, Touch 375×52
실북갤실시간 북적 갤러리더보기
Strong, Touch 375×52
6 variants, 카드와 모바일 섹션에서 함께 씁니다
스펙
크기
| 크기 |
|---|
| PC 320×48 |
| Touch 375×52 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 글자 | label/alternative |
CommentItem
댓글과 답글, 작성자 정보를 표시합니다.
답글은 들여쓰기 대신 └ 아이콘(16, accent/foreground-navy)으로 표시하고 한 단계까지만 둡니다.
댓글에는 추천과 비추천이 없습니다.
정의로아(118.235)12:41룸메가 이 글 보면 어떡하나답글 3삭제
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 닉네임 | 작성자 이름 |
| 2 | IP | 유동 작성자의 IP 앞자리 |
| 3 | 시간 | 작성 시간 |
| 4 | 본문 | 댓글 내용 |
| 5 | 하단 동작 | 답글 수, 삭제 |
| 6 | 답글 아이콘 | 답글 앞의 꺾쇠. 답글일 때만 |
속성
- Type : Comment, Reply, Best, Deleting
- Platform : PC 600, Touch 375
정의로아(118.235)12:41룸메가 이 글 보면 어떡하나답글 3삭제
Comment
정의로아(118.235)12:41룸메가 이 글 보면 어떡하나답글 3삭제
Reply
BEST정의로아(118.235)12:41룸메가 이 글 보면 어떡하나답글 3삭제
Best
정의로아(118.235)12:41룸메가 이 글 보면 어떡하나답글 3삭제
비밀번호확인
Deleting — 삭제를 눌러 CommentDeleteBar가 펼쳐진 상태
8 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-alternative |
| Container | Default | 글자 | accent/foreground-navy |
| Container | Default | 글자 | label/alternative |
| 하단 동작 | Default | 글자 | label/neutral |
CommentDeleteBar
비밀번호를 입력해 댓글을 삭제합니다.
비밀번호확인
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 비밀번호 입력 | 댓글 비밀번호를 넣는 칸 |
| 2 | 확인 버튼 | 삭제를 실행 |
| 3 | 닫기 | 삭제를 취소 |
| 4 | 도움말 | 비밀번호가 틀렸을 때 안내. Error일 때만 |
속성
- Size : PC 320×56, Touch 343×56
- State : Default, Focus, Error
비밀번호확인
PC 320×56, Default
••••확인
PC 320×56, Focus
••••확인
비밀번호가 맞지 않아요. 다시 입력해 주세요
PC 320×56, Error
비밀번호확인
Touch 343×56, Default
••••확인
Touch 343×56, Focus
••••확인
비밀번호가 맞지 않아요. 다시 입력해 주세요
Touch 343×56, Error
6 variants
스펙
크기
| 크기 |
|---|
| PC 320×56 |
| Touch 343×56 |
ThumbCard
썸네일과 게시글 정보를 함께 표시합니다.
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리주식갤[47]
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 썸네일 | 대표 이미지 |
| 2 | 제목 | 게시글 제목 |
| 3 | 정보 | 갤러리명과 댓글 수 |
속성
- Size : PC 200×130, Touch 160×104
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리주식갤[47]
PC 200×130
"120만 원 준다더니 돌연 취소" 2026 추석 상여금 논란 정리주식갤[47]
Touch 160×104
2 variants
스펙
크기
| 크기 |
|---|
| PC 200×130 |
| Touch 160×104 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| 전체 | Default | 배경 | fill/strong |
| 전체 | Default | 선 | line/normal-normal |
| 전체 | Default | 글자 | label/alternative |
Badge
게시글의 유형과 상태를 짧게 표시합니다.
채움형이 기본이고, 광고와 콘텐츠를 구분하는 AD만 선형입니다.
한 행에 최대 2개까지 붙입니다.
공지 NEW HOT BEST AD 갤러리 마이너 미니 인물 흥한
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | Container | 채움 또는 외곽선 바탕 |
| 2 | 라벨 | 유형을 나타내는 짧은 문구 |
속성
- Type : 공지, NEW, HOT, BEST, AD, 갤러리, 마이너, 미니, 인물, 흥한
공지 NEW HOT BEST AD 갤러리 마이너 미니 인물 흥한
10 types
10 variants
Feedback & Overlays
진행 중인 작업과 처리 결과를 알리고, 필요한 다음 동작을 안내합니다.
Toast
화면의 흐름을 유지하면서 처리 결과나 짧은 안내를 전달합니다.
댓글을 남겼어요
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 상태 아이콘 | 성공과 실패 표시. Positive, Negative일 때만 |
| 2 | 문구 | 처리 결과 안내 |
| 3 | 동작 | 되돌리기 같은 버튼. 선택 |
속성
- Status : Neutral, Positive, Negative
- Action : 없음, 있음
댓글을 남겼어요
Neutral, Action 없음
댓글을 남겼어요
Positive, Action 없음
댓글을 남겼어요
Negative, Action 없음
댓글을 남겼어요보기
Neutral, Action 있음
댓글을 남겼어요보기
Positive, Action 있음
5 variants, 3초 뒤 사라집니다
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | inverse/background |
| Container | Default | 글자 | inverse/label |
| 상태 아이콘 | Positive | 글자 | status/positive |
| 상태 아이콘 | Negative | 글자 | status/negative |
Dialog
중요한 안내나 사용자 확인이 필요할 때 사용합니다.
제목은 한 문장, 본문은 최대 한 문장입니다.
확정 버튼은 일어날 행동의 동사(삭제, 나가기, 로그인)로 쓰고 "확인"은 쓰지 않습니다.
버튼 높이는 Touch 48, PC 40입니다.
삭제된 글이에요작성자가 글을 지웠어요.목록으로
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 제목 | 한 문장 |
| 2 | 본문 | 최대 한 문장 |
| 3 | 버튼 | 1개 또는 2개 |
속성
- Buttons : 버튼 1개, 버튼 2개
- Size : Touch 311, PC 400
삭제된 글이에요작성자가 글을 지웠어요.목록으로
버튼 1개, Touch 311
이 글을 삭제할까요?댓글도 함께 지워져요.취소삭제
버튼 2개, Touch 311
삭제된 글이에요작성자가 글을 지웠어요.목록으로
버튼 1개, PC 400
이 글을 삭제할까요?댓글도 함께 지워져요.취소삭제
버튼 2개, PC 400
4 variants
스펙
크기
| 크기 |
|---|
| Touch 311 |
| PC 400 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/elevated-normal |
| 본문 | Default | 글자 | label/alternative |
BottomSheet
현재 화면을 유지한 채 아래에서 선택 항목이나 추가 정보를 제공합니다.
더보기공유하기스크랩신고하기차단하기
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 헤더 | 제목과 닫기 |
| 2 | 항목 | 선택할 수 있는 메뉴나 선택지 |
속성
- Type : Menu — 더보기, Select — 단일 선택
더보기공유하기스크랩신고하기차단하기
Menu — 더보기
정렬 기준최신순최다 조회최다 추천최다 댓글
Select — 단일 선택
2 variants, 라운드 0
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/elevated-normal |
| Container | Default | 선 | line/normal-alternative |
| 항목 | Negative | 글자 | status/negative |
| 항목 | On | 글자 | accent/foreground-navy |
NoticeBar
새 글을 알리고 목록 갱신을 안내합니다.
새 베스트 글 5개가 올라왔어요 지금 보기
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 문구 | 새 글 수를 강조한 안내 |
| 2 | 동작 | 지금 보기 또는 새로고침 |
속성
- Type : PC 848×32, Touch 343×40, Refresh
새 베스트 글 5개가 올라왔어요 지금 보기
PC 848×32
새 베스트 글 5개가 올라왔어요 지금 보기
Touch 343×40
새 베스트 글 5개가 올라왔어요 지금 보기
Refresh
3 variants, PC는 폭을 줄여 보여 줍니다
스펙
크기
| 크기 |
|---|
| PC 848×32 |
| Touch 343×40 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | primary/normal |
| Container | Default | 글자 | label/normal |
| 강조 문구 | Default | 글자 | accent/foreground-navy |
EmptyState
내용이 없거나 결과를 표시할 수 없을 때 원인보다 다음 행동을 안내합니다.
버튼이 하나면 세 유형 모두 Primary이고, 버튼만으로 다음 행동이 분명하면 안내 문구는 뺍니다.
NoResult는 범위를 넓혀 찾는 버튼을 줍니다.
아직 글이 없어요글쓰기
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 아이콘 | 상황을 나타내는 아이콘 |
| 2 | 제목 | 지금 상태 |
| 3 | 설명 | 다음 행동 안내 |
| 4 | 버튼 | 다음 행동. 선택 |
속성
- Type : Empty, NoResult, Error
아직 글이 없어요글쓰기
Empty
'롤체 덱' 게시글이 없어요제목만 검색했어요제목과 내용으로 찾기
NoResult
불러오지 못했어요다시 시도
Error
6 variants, Empty=pen, NoResult=search, Error=alert
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/elevated-normal |
| Container | Default | 글자 | label/assistive |
| Container | Default | 글자 | label/alternative |
Skeleton
콘텐츠가 표시될 자리를 미리 보여주어 데이터를 불러오는 상태를 안내합니다.
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 바 | 글줄 자리 |
| 2 | 사각형 | 썸네일 자리 |
속성
- Type : List, Thumb, Card
List
Thumb
Card
3 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 배경 | fill/normal |
Composer
게시글과 댓글 작성에 사용하는 요소입니다.
WriteToolbar
사진, 동영상 등 작성 도구를 제공합니다.
0 / 2,000
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 도구 아이콘 | 사진, 동영상 같은 작성 도구 |
| 2 | 글자 수 | 입력한 글자 수 |
속성
- Platform : Touch 375×48, PC 848×48
0 / 2,000
Touch 375×48
0 / 2,000
PC 848×48
2 variants, PC는 폭을 줄여 보여 줍니다
스펙
크기
| 크기 |
|---|
| Touch 375×48 |
| PC 848×48 |
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| 글자 수 | Default | 글자 | label/alternative |
BottomActionBar
목록 화면 하단에 글쓰기와 맨 위로를 고정해 표시합니다.
게시글 상세의 하단은 CommentInput이고,
Touch 글쓰기의 등록은 TopBar 오른쪽에 둡니다.
BottomTabBar와 함께 쓰지 않습니다.
글쓰기
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 글쓰기 | 새 글 작성으로 이동 |
| 2 | 맨 위로 | 목록 맨 위로 이동 |
속성
- Type : List — 글쓰기 + 맨 위로
글쓰기
List — 글쓰기 + 맨 위로
1 variant
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
CommentInput
댓글을 입력하고 등록합니다.
게시글 상세에서는 화면 아래에 고정되고 키보드를 따라 올라갑니다.
답글을 누르면 입력칸 위에 대상 띠가 붙고, 입력칸에 "@닉네임"을 글자로 넣지 않습니다.
댓글을 남겨 보세요등록
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 입력창 | 댓글을 쓰는 칸 |
| 2 | 등록 버튼 | 입력하면 활성 |
| 3 | 답글 대상 띠 | 누구에게 답글을 다는지 표시. Reply일 때만 |
속성
- State : Default — 등록 비활성, Focus, Typing — 등록 활성, Reply — 답글 대상 띠 36
댓글을 남겨 보세요등록
Default — 등록 비활성
댓글을 남겨 보세요등록
Focus
이건 진짜 정리 잘했다등록
Typing — 등록 활성
정의로아에게 답글답글을 남겨 보세요등록
Reply — 답글 대상 띠 36, × 로 취소
4 variants, 위에 1px 선
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/normal-normal |
| Container | Default | 선 | line/normal-normal |
| 답글 대상 띠 | Default | 글자 | label/neutral |
| 답글 대상 띠 | Default | 배경 | background/normal-alternative |
| 답글 대상 띠 | Default | 선 | line/normal-normal |
| 대상 닉네임 | Default | 글자 | label/normal |
| 닫기 아이콘 | Default | 글자 | label/alternative |
WriteEntryPopover
글을 작성할 갤러리를 선택합니다.
어디에 쓸까요?최근 방문주식갤연갤야구갤또는갤러리 검색
구성
| 번호 | 요소 | 설명 |
|---|---|---|
| 1 | 라벨 | 영역 이름 |
| 2 | 최근 갤러리 | 최근에 글을 쓴 갤러리. Recent = Yes일 때만 |
| 3 | 갤러리 선택 | 글을 쓸 갤러리 고르기 |
속성
- Recent : Yes, No
어디에 쓸까요?최근 방문주식갤연갤야구갤또는갤러리 검색
Recent = Yes
어디에 쓸까요?갤러리 검색
Recent = No
2 variants
스펙
색
| 요소 | 상태 | 속성 | 토큰 |
|---|---|---|---|
| Container | Default | 배경 | background/elevated-normal |
| 라벨 | Default | 글자 | label/alternative |
기본 남색 #3C46A0
블랙 #000000
화이트 #FFFFFF
다운로드
로고 에셋 키트
마스터 로고부터 이메일과 소셜 채널까지, 용도에 맞는 크기로 준비했습니다.
사용 규칙
- 최소 여백은 로고 높이의 절반을 확보합니다.
- 웹 최소 크기는 높이 16px입니다.
- 남색 로고가 기본입니다.
배경이 어두울 때는 화이트, 단색 인쇄처럼 남색을 쓸 수 없을 때는 블랙을 씁니다.
그림자나 외곽선은 넣지 않습니다. - 기울이거나 늘리지 않고, 자체 제작한 변형 로고는 사용하지 않습니다.
Icons
아이콘을 용도별로 찾거나 이름으로 검색하고, SVG 파일로 내려받을 수 있습니다.
아이콘을 누르면 SVG 파일 하나가 저장됩니다.