Foundation(토큰)·Icons(707개)·Components(47개 컴포넌트)를 한 화면에서 봅니다. Foundation은
tokens/*.json을 그대로 렌더한 값(=tokens-gallery.html과 같은 소스)이고, Icons는
icons/inline.py의 색상 처리로 icons/svg/*.svg를 그대로 인라인했습니다. Components의
Overview·Props는 각 spec.md에서 기계적으로 그대로 추출했습니다. 시각 샘플은
tokens/index.css에 실제로 존재하는 컴포넌트 전용 토큰이 있는 경우에만 그 토큰으로
렌더했고, 없는 컴포넌트는 토큰을 지어내지 않고 "구조형 컴포넌트"로 표시했습니다.
icons/inline.py의 색상 처리 그대로(본체=currentColor 상속, 구조색·브랜드색은 원본 유지) 707개를 전부 인라인했습니다.
commerce 142
acrylic_goods
bottle
bracelet
candy
certificate_merit
checklist_form
icon_acrylic-goods
icon_acrylic_keyring
icon_actual_image_output_horizontal
icon_actual_image_output_vertical-type
icon_advertisement
icon_ai_presentation
icon_ai_promo
icon_ai_sns
icon_air_signboard
icon_all
icon_appstore
icon_apron
icon_banner_horizontal
icon_banner_vertical
icon_billboard
icon_book_cover
icon_booklet_vertical
icon_box_tape
icon_brochure_catalog
icon_business_card
icon_calendar_s
icon_cardnews
icon_clothing
icon_coaster
icon_cocktail_napkin
icon_color_envelope
icon_coloring_book
icon_courier_box
icon_cup_carrier
icon_cup_holder
icon_desk_calendar
icon_detail_Page
icon_diary
icon_digital_business_card
icon_disposable_wipes
icon_double_cup
icon_employee_id_card
icon_employee_id_card-1
icon_event_popup
icon_fan
icon_fancy_banner
icon_flag
icon_foot_mat
icon_formed_paper_ncr_paper
icon_guidance_sticker
icon_hangtag
icon_hat
icon_holder
icon_honeycomb_board_banner
icon_hot_pack
icon_ice_cup
icon_infographic
icon_instagram
icon_instagram_fill
icon_interior_sticker
icon_kakaotalk
icon_kakaotalk_business
icon_leaflet
icon_leaflet_folded
icon_led_light_panel
icon_linkedin
icon_magnet_flyer
icon_magnetic_opener
icon_magnetic_sheet_for_car
icon_masking_tape
icon_memo_paper
icon_mms_photo_text
icon_mouse_pad
icon_mug_cup
icon_name_board
icon_naverblog
icon_packaging_bag
icon_papar_magnet_flyer
icon_paper_container
icon_paper_cup
icon_paper_placement
icon_paper_shopping_bag
icon_paper_sun_hat
icon_pen
icon_phone_accessories
icon_picnic_mat
icon_plastic_bag
icon_plate_sticker
icon_playstore
icon_pop
icon_post_card
icon_postcard_envelope
icon_poster
icon_producthunt
icon_promotional_logo
icon_shape_laeflet
icon_shoulder_sash
icon_sign_board
icon_snapchat
icon_stamp
icon_stand
icon_sticker
icon_storefront_sign
icon_ticket
icon_tiktok
icon_toothbrush_sterilizer
icon_transparent_poster_horizontal
icon_transparent_poster_vertical
icon_twitch
icon_twitter
icon_umbrella
icon_usb_card
icon_vest
icon_video
icon_vk
icon_wall_calendar
icon_wallpapers
icon_web_banner
icon_web_poster
icon_wet_tissue
icon_whatsapp
icon_wind_banner
icon_wobbler
kakao
mirror
pin_button
plaques
plastic_film
school_supplies
small_appliances
stainless_cup
strap
string_pouch
toothbrush_set
towel
trophy
tumbler
wedding_goods
wedding_post_card
wrapping_sticker
writing_instruments
direction 43
icon_arrow_down
icon_arrow_down_2px
icon_arrow_down_left
icon_arrow_down_left_2px
icon_arrow_left
icon_arrow_left_2px
icon_arrow_right
icon_arrow_right_2px
icon_arrow_up
icon_arrow_up_2px
icon_arrow_up_right
icon_caret_down
icon_caret_left
icon_caret_right
icon_caret_up
icon_chevron_double_down
icon_chevron_double_left
icon_chevron_double_right
icon_chevron_double_up
icon_chevron_down
icon_chevron_down_2px
icon_chevron_left
icon_chevron_left_2px
icon_chevron_right
icon_chevron_right_2px
icon_chevron_up
icon_chevron_up_2px
icon_enter
icon_maximum
icon_minimize
icon_move
icon_pivot
icon_redo
icon_repeat_all
icon_repeat_all_off
icon_replace
icon_return
icon_rotate
icon_shuffle
icon_sync
icon_undo
icon_upper
topdown
editorCommon 79
icon_ai_tools
icon_ai_tools_filled
icon_align_bottom
icon_align_center_horizontal
icon_align_center_vertical
icon_align_left
icon_align_right
icon_align_stretch_horizontal
icon_align_stretch_vertical
icon_align_top
icon_banned
icon_circle_dot
icon_circle_filled_dot
icon_clipboard
icon_clock
icon_copy
icon_corner_rounding
icon_credit
icon_crop
icon_delete
icon_delete_filled
icon_dotShape
icon_drop
icon_drop_half_fill
icon_duplicate
icon_edit
icon_edit_underline
icon_element
icon_erase_area
icon_eye
icon_eye_off
icon_eyedropper
icon_font_recommentaion
icon_group
icon_image
icon_image_add
icon_image_dismount
icon_image_lock
icon_inpainting
icon_layer
icon_layer_backward
icon_layer_bring_to_front
icon_layer_forward
icon_layer_send_to_back
icon_lock
icon_lock_edit
icon_lock_filled
icon_lock_open
icon_lock_open2
icon_lock_open_text
icon_lock_text
icon_lock_text_attention_sign-_filled
icon_lock_text_filled
icon_magic_pen
icon_magic_pen_filled
icon_magic_pen_gradient
icon_magic_wand
icon_mosaic
icon_outpainting
icon_paging
icon_paint_bucket
icon_paint_roller
icon_playBackSpeed
icon_random
icon_reflect_horizontal
icon_reflect_vertical
icon_refresh
icon_remove_bg
icon_remove_bg_dot
icon_select_multiple_elements
icon_shadow
icon_square_filled_dot
icon_star_filled_dot
icon_stroke
icon_text_vertical_write
icon_transparency
icon_triangle_filled_dot
icon_ungroup
icon_upscale
editorEdit 89
clapperboard
cloud_edit
cloud_save
color_filter
icon_Prohibited
icon_Slash
icon_add
icon_add_2px
icon_add_circle
icon_brush
icon_camera
icon_cart
icon_check_circle
icon_check_circle_filled
icon_close
icon_close_circle
icon_cloud_upload
icon_code
icon_comment
icon_comment_content_filled
icon_comment_filled
icon_comment_hide
icon_comment_more_filled
icon_comment_new
icon_comment_question_filled
icon_comment_warning_filled
icon_crown
icon_crown_gold
icon_diagonal
icon_download
icon_grid
icon_hand
icon_heart
icon_heart_filled
icon_history
icon_home
icon_home_filled
icon_information_circle
icon_information_circle_2px
icon_information_circle_filled
icon_information_circle_filled_2px
icon_laboratory
icon_launch
icon_link
icon_main_menu
icon_memo
icon_memo_edit
icon_menu
icon_more_4_horizontal
icon_more_4_vertical
icon_more_horizontal
icon_more_horizontal_2px
icon_more_vertical
icon_more_vertical_2px
icon_pencil_ruler
icon_pencil_ruler_setting
icon_question_circle
icon_question_circle_2px
icon_question_circle_filled
icon_question_circle_filled_2px
icon_save
icon_screen_fit
icon_scroll
icon_send
icon_send_filled
icon_share
icon_slide_show
icon_star
icon_star_filled
icon_stop_circle
icon_student
icon_subtract
icon_subtract_2px
icon_subtract_circle
icon_thumb_down
icon_thumb_down_filled
icon_thumb_up
icon_thumb_up_filled
icon_upload
icon_url
icon_warning_alt
icon_warning_alt_2px
icon_warning_alt_filled
icon_warning_alt_filled_2px
icon_warning_circle
icon_warning_circle_2px
icon_warning_circle_filled
icon_warning_circle_filled_2px
save_complete
editorElements 134
icon_all_radius
icon_animation
icon_arched
icon_area_chart
icon_circle
icon_circle_2px
icon_circle_filled
icon_circular
icon_combo_chart
icon_confetti
icon_count
icon_dash_horizon
icon_dash_vertical
icon_doughnut_chart
icon_element_crop
icon_enlargement
icon_fade
icon_fill
icon_fit
icon_gap_horizontal
icon_gap_vertical
icon_horizontal_bar_chart
icon_legend_bottom
icon_legend_left
icon_legend_off
icon_legend_right
icon_legend_top
icon_letter_spacing
icon_line_chart
icon_list_bullet
icon_list_number
icon_padding
icon_padding_bottom
icon_padding_horizontal
icon_padding_left
icon_padding_right
icon_padding_top
icon_padding_vertical
icon_pause
icon_pie_chart
icon_play
icon_presentation
icon_radial
icon_radius_bottom_left
icon_radius_bottom_right
icon_radius_top_left
icon_radius_top_right
icon_scissors
icon_semicircle
icon_slide
icon_square_filled
icon_table_border_all
icon_table_border_bottom
icon_table_border_cross
icon_table_border_down_diagonal
icon_table_border_inner_horizontal
icon_table_border_inner_vertical
icon_table_border_left
icon_table_border_none
icon_table_border_outer
icon_table_border_right
icon_table_border_top
icon_table_border_up_diagonal
icon_table_cell_merge
icon_table_cell_split
icon_table_column_add_left
icon_table_column_add_right
icon_table_column_delete_right
icon_table_column_equally
icon_table_column_move_left
icon_table_column_move_right
icon_table_row_add_bottom
icon_table_row_add_top
icon_table_row_delete_bottom
icon_table_row_equally
icon_table_row_move_down
icon_table_row_move_up
icon_template
icon_test_scale
icon_text
icon_text_align_bottom
icon_text_align_center
icon_text_align_justify
icon_text_align_left
icon_text_align_middle_center
icon_text_align_right
icon_text_align_top
icon_text_background_color
icon_text_background_color_none
icon_text_background_color_none-3
icon_text_background_color_none2
icon_text_bold
icon_text_change_case
icon_text_color
icon_text_color_none
icon_text_color_none2
icon_text_curve_in
icon_text_curve_out
icon_text_height
icon_text_indent
icon_text_italic
icon_text_line_spacing
icon_text_outdent
icon_text_outline
icon_text_spell_check
icon_text_strikethrough
icon_text_style_off
icon_text_styles
icon_text_subscript
icon_text_superscript
icon_text_underline
icon_text_vertical_align_left
icon_text_vertical_align_middle_center
icon_text_vertical_align_right
icon_text_width
icon_text_write_down
icon_trend_chart
icon_triangle_filled
icon_unfold
icon_uppercase
icon_vertical_bar_chart
icon_volume_down
icon_volume_off
icon_volume_up
icon_wipe
list_vertical_bullet
list_vertical_number
text_align_vertical_justify
text_vertical_align_bottom
text_vertical_align_center
text_vertical_align_top
text_vertical_indent
text_vertical_line_spacing
text_vertical_outdent
misc 64
Icon_tour
create_design
document_new
icon_-process
icon_90angle
icon_account
icon_add_circle_filled
icon_add_square_filled
icon_ai
icon_album_twotone
icon_arrow_horizontal
icon_arrow_table_down
icon_arrow_table_top
icon_arrow_vertical
icon_arrow_vertical_reduction
icon_beginner
icon_bookmark
icon_bookmark_outline
icon_bug
icon_camera_twotone
icon_cap
icon_cell_image
icon_change
icon_comment_feedback
icon_comment_more
icon_comment_pencil
icon_comparison
icon_coupon_percent_filled
icon_creator_twotone
icon_customerService_message
icon_customerService_null
icon_double_quotes
icon_free
icon_gift
icon_go_to_parent
icon_guide
icon_handle
icon_handle_2px
icon_help_filled
icon_image_broken
icon_image_chage
icon_image_chage_square
icon_image_chage_square2
icon_image_search
icon_inline_image
icon_inpainting_filled
icon_line
icon_move_dash
icon_music_note
icon_outline
icon_page
icon_pdf
icon_project
icon_recently
icon_restore
icon_select
icon_setting_fill
icon_smallcircle_filled
icon_symbol
icon_truck_filled
icon_versus
neweditor
subtitle
subtitle_fill
print 9
icon_3d
icon_3d_ar
icon_document_enhanced
icon_image_fail
icon_order
icon_order_copy
icon_truck
icon_warning_alt_filled_color
icon_warning_alt_filled_color_outline
tabMenu 32
icon_ai_robot
icon_ai_robot_twotone
icon_ai_tools_twotone
icon_background
icon_background_twotone
icon_box
icon_box_twotone
icon_brand_twotone
icon_chart_twotone
icon_cloud-off-outline_topBar
icon_cloud_upload_twotone
icon_color_palette_twotone
icon_crown_gold_topBar
icon_crown_silver_topBar
icon_data_twotone
icon_element_2_twotone
icon_heart_twotone
icon_image_twotone
icon_main_menu_topBar
icon_music_note_twotone
icon_play_circle_twotone
icon_qr_code_twotone
icon_redo_topBar
icon_save_topBar
icon_slide_show_topBar
icon_student_topBar
icon_template_twotone
icon_text_3_twotone
icon_undo_topBar
icon_upload_topBar
icon_warning_alt_topBar
save_complete_topBar
workspace 91
icon_Power
icon_approval_check
icon_approval_request
icon_approval_setting
icon_barcode
icon_brand
icon_calendar
icon_categories
icon_community
icon_company
icon_copyright
icon_coupon
icon_coupon_bleedline
icon_coupon_percent
icon_credit_card
icon_credit_card_cvc
icon_dashboard
icon_dataSetting
icon_devices
icon_devices_off
icon_document
icon_document_add
icon_document_blank
icon_document_check
icon_document_check_clock
icon_document_clock
icon_document_code
icon_document_etc
icon_document_zip
icon_drive
icon_drive_filled
icon_editBarcode
icon_exit
icon_folder
icon_folder_add
icon_folder_filled
icon_folder_move
icon_folder_off
icon_folder_subtract
icon_folder_upload
icon_hashtag
icon_hdmi
icon_inbox
icon_input
icon_interlock
icon_key
icon_keyboard
icon_keyboard_down
icon_lightbulb
icon_lightbulb_off
icon_list
icon_list_check
icon_location
icon_mail
icon_megaphone
icon_mobile
icon_monitor
icon_moon
icon_my_dashboard
icon_my_dashboard_filled
icon_notification
icon_payment_-options_won
icon_people
icon_people_filled
icon_people_setting
icon_people_team
icon_people_team_setting
icon_person
icon_person_add
icon_person_arrow_left
icon_person_check
icon_person_filled
icon_person_off
icon_person_setting
icon_printer
icon_printer_filled
icon_setting
icon_share_drive
icon_share_drive_filled
icon_share_folder
icon_share_folder_filled
icon_smallReplace
icon_smile
icon_specialCharacter
icon_sun
icon_symborMark
icon_tag
icon_template_add
icon_template_move
icon_work_complete
icon_workspace
사용처별 24
icon_adjustment
icon_adjustment_2
icon_ai_search
icon_check
icon_check_2px
icon_checkbox
icon_checkbox_checked_filled
icon_checkbox_indeterminate_filled
icon_facebook
icon_filter
icon_naver_blog
icon_pinterest
icon_radio_button
icon_radio_button_checked
icon_rectangle_horizontal
icon_rectangle_horizontal_long
icon_rectangle_horizontal_search
icon_rectangle_transform
icon_rectangle_vertical
icon_rectangle_vertical_long
icon_rectangle_vertical_search
icon_search
icon_square
icon_youtube
Components
Accordion
components/Accordion/spec.md
펼쳐진 상태의 본문 영역입니다.
목록 항목을 접고/펼치는 아코디언. 헤더(listName + chevron)와 펼침 영역으로 구성된다. - 현행 세트: `mds-accordion` 심볼 16종(node `1586:2540`~`1586:2630`). - Legacy: Example 프레임에 `(V1) Accordion` 표기(node `3650:80871`)와 `mds-accordion` 데모 인스턴스가 있으나, 명세 대상은 현행 심볼 세트다. V1 표기는 비권장(deprecated)으로만 남긴다.
Props
prop
값
type
basic | switch
open
true | false
paddingBottom
true | false
chevron
left | right
Audio Thumbnail
components/Audio-Thumbnail/spec.md
▶
0:32
오디오 파일의 썸네일·재생 상태를 표현하는 컴포넌트. 3개 하위 세트로 구성된다.
Props
prop
값
sub-type
prop
audioThumbnail
`type`
audioThumbnail
`state`
audioThumbnail
`moreButton`
audioContents
`type`
audioContents
`size`
audioContents
`shape`
audioContents
`state`
uploadAudioThumbnail
`type`
uploadAudioThumbnail
`state`
uploadAudioThumbnail
`playing`
uploadAudioThumbnail
`moreButton`
Avatar
components/Avatar/spec.md
JH
MC
사용자/개체를 나타내는 프로필 이미지 요소. 이미지·이니셜(letters)·아이콘·빈 상태를 원형/사각형으로 표시하며, 배지(text/icon)·잠금 상태를 겹쳐 표현한다.
Props
prop
값
type
text | image | empty
state
default | textBadge | iconBadge | lock
shape
circle | square (base: round | square)
size
XXS | S | M | L (base 추가 XL)
variant (base)
icon | letters | image
color (base)
neutral | cyan | charteuse | magenta | purple | red | orange | yellow | green | blue | image
primary | blue | green | yellow | red | purple | neutral | neutralDeep
type
text | textOnly | iconOnly | iconOnly (hug) | dot
size
2XS | XS | S | M
shape
circle | square
outline
false | true
variants (thumbnail)
Play | PlayTime | Credit | Total | Page | Pro | Free
Banner
components/Banner/spec.md
ℹ
안내 배너
배너의 보조 설명 텍스트입니다.
!
경고 배너
주의가 필요한 상태를 알립니다.
MDS의 인라인 알림(배너) 컴포넌트. 제목(title)·본문(sub)·아이콘·액션을 담아 페이지 안에서 상태성 메시지를 노출한다. 하나의 컴포넌트 세트(`mds-banner`, node `1588:59904`)에 240개 variant 심볼이 들어 있으며, 5개 축(type × hierarchy × align × widthType × size)의 데카르트 곱으로 구성된다. `Example` 프레임(3650:81163)에는 "(V1) Banner" 텍스트(3650:81169 계열)와 다크 컨테이너 데모(`mds-banner` 인스턴스 3650:81215, 3650:81252)가 있으나, 실제 published 세트는 `mds-banner`(1588:59904) 하나뿐이다.
Props
prop
값
type
normal | warning | success | info | error | accent
hierarchy
medium | mediumWithBorder | strong | weak | weakWithBorder
align
left | center
widthType
fill | hug
size
M | S
Button
components/Button/spec.md
MDS의 기본 액션 버튼. 4개의 하위 형태(sub-type)를 하나의 컴포넌트 세트로 묶는다.
primary | neutral | neutralInverse | neutralLight | black | white | negative
color (text 추가)
+ neutralToPrimary | neutralLightToNeutral
color (elevated)
black | neutral | neutralInverse | white
size
2XS | XS | S | M | L | XL
size (text)
XS | M | L | XL
shape
square | round
underlined
none | always | onlyHover
shadow
none | onlyHover | always
loading
false | true
label/width
hug | fill
leftIcon/rightIcon(sideItem)
on/off
Carousel
components/Carousel/spec.md
구조형 컴포넌트
여러 항목을 좌우로 넘겨보는 슬라이더형 컴포넌트 — 실제 동작에 캔버스/드래그 로직이 필요해 정적 시각 샘플로 표현하지 않음.
썸네일을 가로/세로/정사각 형태로 나열하고 좌우(또는 상하) 스크롤하는 캐러셀. prev/next 네비게이션 버튼과 "more" 어포던스를 옵션으로 가진다.
Props
prop
값
shape (n-shape)
vertical | square | horizontal
prev
on | off
next
on | off
uniform
on | off
showScrollBar
false
height
M(vertical) | S(square·horizontal)
itemGap
M
more (n-more)
false | true
carouselButton.type
prev | next
Checkbox
components/Checkbox/spec.md
선택 입력 컨트롤. 메인 컴포넌트 `🟢 checkBox` (node `673:47273`)와 박스 시각형태를 정의하는 `checkBox_base` (node `645:47191`), 정보버튼 결합형 `🟣 checkBoxWithInfoButton` (node `3007:48855`)으로 구성. elevation 컨텍스트(default / elevation01 / elevation02) 프레임에서 배경 위 표현을 검증.
Props
prop
값
background
true | false
size
S | M
checked
false | true
indeterminate
false | true
disabled
false | true
readOnly
false | true
error
false | true
shape (base 박스)
square | round
overflowHidden (base)
false | true
widthType (infoButton형)
hug | fill
Chip
components/Chip/spec.md
텍스트 칩선택된 칩★ 아이콘 칩
MDS의 칩 컴포넌트. 현행 세트는 2개의 하위 형태(sub-type)로 구성된다. 레거시(deprecated, 별도 항목화 안 함): `mds-textChip`(1585:5021), `mds-specialCharactersChip`(1586:14468), `mds-iconChip`(1585:5182), `mds-inputChip`(1585:5583). 실험 프레임 `chip시도중`(3228:5103)도 제외.
콘텐츠 위에 겹쳐 배경을 어둡게(또는 밝게) 덮는 오버레이/스크림(scrim). 모달·시트·팝오버 등이 떠 있을 때 뒤 배경을 가려 초점을 모으는 용도. - 주 컴포넌트: `p-mds-dimmed` (node `1585:19503`). 단일 프레임형이며 variant 심볼 매트릭스가 아니라 **토큰(color × level)** 으로 표현을 전환한다. - 작업중(WIP) 소스: `작업중` 섹션 내 `dimmed` (node `10:29355`).
Props
prop
값
color
black | neutral | neutralInverse | white
level
medium | light
Divider
components/Divider/spec.md
구분선 위 텍스트
구분선 아래 텍스트
콘텐츠를 구분하는 선(구분자). 가로/세로 방향을 지원하며, 선 위에 텍스트 라벨을 넣을 수 있다.
Props
prop
값
direction
horizontal | vertical
color
neutral
paddingSize
none | XS | S | SM | M | ML | L
paddingPosition (horizontal)
none | top | middle | bottom
paddingPosition (vertical)
none | left | middle | right
borderWidth
default
textLabel
true | false
labelPosition (horizontal)
none | center | left | right
labelPosition (vertical)
none | center | top | bottom
Dropdown
components/Dropdown/spec.md
옵션 A
옵션 B
옵션 C
선택형 필드 컴포넌트. 현재 published 형태는 `pd-dropwdownField`(node `1585:23188`)이며, 값을 선택해 표시/취소하는 select 필드다. 하위에 LEGACY 프레임 `mds-dropdown`(node `1586:1593`)이 함께 존재하나 deprecated로 본 spec은 현재형만 기술한다.
전용 색상 토큰이 확인되지 않아 임의 렌더를 만들지 않음(일반 Button과 달리 그래픽 소재가 필요).
그래픽(썸네일/이미지) 또는 아이콘을 크게 배치하고 하단에 라벨을 붙이는 세로형 선택 버튼. 갤러리·툴 팔레트·카테고리 선택 등에 쓰인다. 단일 컴포넌트 `mds-graphicButton`에 다차원 variant가 들어 있다.
Props
prop
값
n-type
graphic | icon
buttonSize
M | L
graphicSize
S | M | L
state
enabled | n-hover | selected | disabled
labelOverflow
newLine | ellipsis
labelSize
M (단일 관측)
density
comfortable | n-loose
Header
components/Header/spec.md
구조형 컴포넌트
페이지 최상단 구조 영역 — 이 프로젝트 tokens/index.css에 Header 전용 프리픽스가 없어 임의 레이아웃을 지어내지 않음.
팝오버·바텀시트·모달 등의 상단에 놓이는 헤더 영역. 좌측 back 버튼, 우측 close 버튼, 가운데 타이틀로 구성된다. 타이틀이 길 때의 처리(말줄임 / 줄바꿈)를 속성으로 갖는다. 근거: `pd-popoverHeader` (3929:88726) 하위 8개 심볼.
Props
prop
값
type
basic | back | close | backAndClose
textOverFlow
ellipsis | newLine
Help text
components/Help-text/spec.md
일반 도움말 텍스트입니다.
오류가 발생했습니다.
정상적으로 처리됐습니다.
입력 필드·폼 요소 하단에 보조 설명이나 검증 메시지를 표시하는 인라인 텍스트. 아이콘(sideIcon) + 텍스트 구성.
Props
prop
값
variant
normal | error | positive | info | accent
size
S | M
sideIcon
on/off (아이콘 슬롯)
Input
components/Input/spec.md
플레이스홀더 텍스트
포커스 상태
에러 상태 값
텍스트 입력 필드. 여러 하위 형태(sub-type)를 한 페이지에 묶은 컴포넌트 세트. 레거시: `p-mds-colorInput`(408:33571) 등 `mds-`/`p-mds-` 접두 프레임은 구버전 흔적 — 신규 사용 금지. Example에 "(V3) Input"로 현행 표기.
leading icon, prefix, suffix, startArea, endArea, floating label, deleteButton
InputTextArea
components/InputTextArea/spec.md
여러 줄 입력이 가능한 텍스트 영역입니다. 내용이 길어지면 이 영역이 늘어납니다.
MDS의 여러 줄 텍스트 입력(textarea) 컴포넌트. published 세트는 `mds-inputTextArea` 컴포넌트(`1585:15532`, section `3659:91825`)이며, Example 프레임(`3659:91752`)의 컨테이너가 이 컴포넌트를 인스턴스(`3659:91788`, `3659:91806`)로 소비한다. 문자 수 카운터·리사이즈 핸들을 부속으로 갖는다. > deprecated / 작업중 (section `작업중` `3659:91824`): `🟡 textArea_base`(`631:35229`), `⚪️ textArea`(`638:44274`), 구 `textAreaSection`(`631:18485`), 구 `characterCounter`(`631:18825`). 이들은 "작업중" 섹션에 있는 초안 세트로 published 아님. 구 심볼은 `size=M|L, heightType=fixed|hug|hug (maxM)` 및 `variants=hug|fill & fixed` 축을 썼다. 신규 소비 시 사용하지 않음.
MDS의 라벨(태그/칩) 컴포넌트. 텍스트를 감싸 상태·분류를 시각화하며, 좌우에 아이콘 또는 버튼(닫기 등)을 붙일 수 있다. 하나의 컴포넌트 세트(`🟣 label`, node `489:29493`)와 밀도·계층·크기용 base 세트(`label_base`, node `489:29318`)로 구성된다.
오버레이+다이얼로그 조합형 컴포넌트 — 페이지 전체를 가리는 상호작용이라 이 목록형 쇼케이스에 넣지 않음.
MDS의 모달 컴포넌트 세트. 본체 모달과 이를 구성하는 하위 파츠(header, paragraph, bottom action bar) 및 레거시 confirm 모달을 하나의 페이지로 묶는다.
Props
prop
값
size
S | M
align
center | left
showGraphic
false | true
showBanner
false | true
showCheckBox
false | true
size
M | S
showBack
false | true
showClose
false | true
type
single | double
widthType
hug | fill | minWidth (160)
direction
horizontal | vertical
align
center | right
contentsOverFlow
false | true
type (legacy)
basic | danger
Number input
components/Number-input/spec.md
구조형 컴포넌트
숫자 입력 전용 스테퍼 — 전용 색상 토큰이 확인되지 않아 임의 렌더를 만들지 않음.
숫자 전용 입력 컴포넌트. 통화·단위(unit) 접두/접미 표기, floating label, clear 버튼, 증감 컨트롤(chevron up/down)을 갖춘다. 라벨 배치 방식에 따라 5개의 하위 형태(sub-type)를 하나의 컴포넌트 세트로 묶는다. 부속 요소: - `unit` (507:14296): 단위 표기 심볼 세트. `input area` 앞/뒤에 놓이는 `$`(접두)·단위(접미) 텍스트.
진행률을 가로 막대로 표시하는 비상호작용 인디케이터. 값(n-range)에 따라 채움 폭이 달라지며, `colorChange` 타입은 진행 구간에 따라 색이 바뀐다. 단일 세트 `mds-progressBar`(1586:27241)가 현행이며, Example 프레임(3659:89440)의 "(V1) ProgressBar" 라벨은 레거시 데모 표기로 별도 컴포넌트가 아니다.
Props
prop
값
type
basic | colorChange
n-range
0 | 25 | 50 | 75 | 100
size
M | L
Promotion banner
components/Promotion-banner/spec.md
Pro로 업그레이드
더 많은 기능을 사용해보세요.
프로모션/안내용 배너. 좌측 그래픽 아이콘(원형 영역) + 타이틀·서브텍스트 + 우측 화살표로 구성된다. 색상 테마 6종으로 맥락(브랜드/정보/성공/주의/경고/강조)을 표현한다. `Example` 프레임의 "(V1) Promotion Banner"(node `3650:81276`)는 레거시 데모 라벨이며 별도 컴포넌트가 아니다.
Props
prop
값
color
primary | yellow | green | blue | orange | purple
titleOverFlow
hug | newLine | ellipsis
subOverFlow
hug | twoLines
size
M
Radio
components/Radio/spec.md
MDS의 단일 선택 라디오 버튼. 2개의 하위 형태(sub-type)를 하나의 컴포넌트 세트로 묶는다.
Props
prop
값
background
background | ghost
state
unselected | selected
n-label
false | true
disabled
false | true
size
M | L
labelClickable
true | false
Rating
components/Rating/spec.md
구조형 컴포넌트
spec.md 자체가 "Figma에 아직 컴포넌트로 구축되지 않은 플레이스홀더 상태"라고 명시함 — 실물이 없어 만들 근거가 없음.
Rating 페이지에는 **published된 컴포넌트 세트나 variant 심볼이 존재하지 않는다.** 페이지 캔버스(`408:33562`) 직속 자식은 이미지 목업 1개(`rounded-rectangle "image 1"`, node `1265:23110`, 706×383)뿐이다. 즉 Rating은 Figma에서 **아직 컴포넌트로 구축되지 않은 플레이스홀더 상태**다. (근거: node 408:33562 metadata — variant/symbol 부재, 이미지 1개만 존재)
Props
해당 없음
Ratio/Horizontal
components/Ratio__Horizontal/spec.md
구조형 컴포넌트
AI 도구 비율 선택 아이콘 등에 쓰이는 내부 유틸리티 심볼 — 단독 시각 샘플의 의미가 낮음.
가로형 종횡비 플레이스홀더. 썸네일·이미지 영역의 비율을 잡을 때 쓰는 레이아웃 보조 컴포넌트. 실제 UI에 노출되는 컴포넌트가 아니라 레이아웃 규격을 고정하기 위한 스펙용 프레임이다. published variant **17개**.
AI 도구 비율 선택 아이콘 등에 쓰이는 내부 유틸리티 심볼 — 단독 시각 샘플의 의미가 낮음.
세로형 종횡비 플레이스홀더. 가로형과 쌍을 이룬다. 실제 UI에 노출되는 컴포넌트가 아니라 레이아웃 규격을 고정하기 위한 스펙용 프레임이다. published variant **2개**.
Props
prop
값
Ratio
`1:1` | `1:2`
ScrollView
components/ScrollView/spec.md
항목 1
항목 2
항목 3
항목 4
항목 5
콘텐츠 영역의 스크롤바(thumb + scroll area). 세로 스크롤바를 굵기(barSize)와 여백(paddingSize)으로 조절한다. Example 라벨은 `(V2) Scroll View` (node `3659:89568`).
Props
prop
값
barSize
medium | thin
paddingSize
none | S | M | ML | L
Search
components/Search/spec.md
구조형 컴포넌트
검색 입력+결과 리스트 조합형 — 전용 토큰이 확인되지 않아 임의 렌더를 만들지 않음.
검색 입력 필드 컴포넌트. Input 컨테이너 토큰(`c/input/*`)과 아이콘 버튼 토큰(`c/iconButton/*`)을 재사용한다. 텍스트 입력, 검색/클리어 아이콘, 필터 토글, 이전(prev) 버튼을 조합한다. 페이지 구조상 본체 세트는 `mds-search` 하나이며, `작업중` 섹션(3659:90436) 안에 이전 형태 2종이 WIP/deprecated로 남아 있다.
Props
prop
값
size
M | L
n-typing
false | true
state
default | n-hover | focused | disabled
showFilter
true | false
n-filterState
default | selected | application
showPrevButton
false | true
widthType
fill
backgroundType
ghost
SelectMode
components/SelectMode/spec.md
✓카드 1
카드 2
선택 가능한 카드/행 형태의 선택 모드 컴포넌트. 좌측 체크박스(내부적으로 checkBox 컴포넌트 합성)와 콘텐츠 영역으로 구성되며, 다중/단일 선택 UI의 항목으로 쓰인다. 컨테이너 폭 312, 높이 80(node 1588:24860 기준).
Props
prop
값
type
selectMode | default
size
M
select
true | false
Slider
components/Slider/spec.md
값의 범위 안에서 값을 선택·조절하는 트랙+핸들 컨트롤. 현재(V2) 컴포넌트는 트랙 본체(`slider`, node `1265:56845`)와 핸들(`sliderHandle`, node `1265:29961`) 두 심볼 세트로 구성된다. - 예시 배치는 `Example` 프레임(3659:90462) 안에서 두 개의 dark container에 `slider` 인스턴스(3659:90578, 3659:90584)로 사용됨. 라벨 `(V2) Slider`(3659:90464)로 현재 버전이 V2임을 명시. - 레거시: `p-mds-slider` 프레임(node `3683:94902`)이 캔버스에 존재하나 내용이 비어 있는 V1("mds-" 접두) 자리표시자이며 **deprecated**. 본 스펙은 현행 V2만 기술한다.
Slider + 숫자 입력 조합형 — 결합 규칙이 spec.md에 별도 명시돼 있지 않아 Slider 샘플과 중복 임의 조합을 만들지 않음.
슬라이더와 숫자 입력(numberInput)을 결합한 복합 컴포넌트. 상단에 라벨 + 숫자 입력 필드, 하단에 슬라이더 트랙을 배치해 동일 값을 두 방식으로 조작·표시한다. - 프레임명 접두어가 `mds-` 인 레거시(V1) 표기이나, 이 페이지에는 이 프레임만 published 되어 있어 현행으로 취급한다. 예시 텍스트에는 "(V2) Slider With Input"(node 3659:90799)으로 표기됨 — V2 컴포넌트로 사용. 별도 V1 프레임(다른 스케일)은 이 페이지에 없음(근거: canvas 3659:90793 하위 프레임 목록).
Props
prop
값
disabled
false | true
Snackbar
components/Snackbar/spec.md
✓변경사항이 저장되었습니다.
화면에 일시적으로 떠서 동작 결과·상태를 알리는 토스트형 알림. 어두운 배경(`defaultInverse`) 위 밝은 텍스트가 기본. 동작(스티키 메모 근거 202:19165, 526:19586): 기본 duration 5초 자동 소멸, `closeButton=ON`이면 사용자가 닫거나 상태 해결까지 유지, `selectedMode` 시 이전과 달리 포함 기능만 작동.
Props
prop
값
widthType
hug | fill & fixed
variant
text | text & action | text & longer action
lined
1 (default) | 2 (custom)
closeButton
false | true
size
default
startItem type
checkBox | icon | contents
iconVariant type
normal | loading | accent | error | warning | success | info
endItem Property 1
commButton | 3buttonSet
thumbnail type
squere | ver | hori
Spinner
components/Spinner/spec.md
로딩·대기 상태를 나타내는 원형 회전 인디케이터. 두 개의 독립 축(size, color)만 가지며 상태 축은 없다(항상 회전). 대표 심볼 `🟢 spinner`(node `1:4626`), 크기 데모 `spinner/base`(node `1:4600`).
Props
prop
값
size
XS | S | M | L | XL
color
primary | neutral | negative | neutralInverse | white | black
Swatch
components/Swatch/spec.md
구조형 컴포넌트
색상 스와치 그리드 — 전용 토큰이 확인되지 않아 임의 색상으로 렌더하지 않음.
색상 견본(스와치) 버튼. 색상 팔레트/색상 선택 UI에서 개별 색 칩을 표현한다. 색 채우기(color), 투명(transparent), 색 추가 버튼(addColor) 3형태를 가진다. `mds-swatch` 세트 48개 심볼(node 1586:21143~1586:21266).
MDS의 토글 스위치. on/off 두 상태를 즉시 전환하는 이진 컨트롤이다. 하나의 variant 세트(`🟢 switch`)와 크기 정의용 내부 base 프레임(`switch_base`)으로 구성된다. - 예시 프레임 `Example` (3650:79772), 인터랙션 확인 프레임 (3650:79916)에 실제 인스턴스가 배치되어 있음. - 헤더 텍스트가 `(V3) Switch` (3650:79774)로, 현재 스펙은 V3 기준이다.
Props
prop
값
selected
false | true
disabled
false | true
size
S | M | L
Tab
components/Tab/spec.md
전체
진행중
완료
MDS의 탭 컴포넌트. 개별 탭 항목(`tabItem`)과 이를 묶는 컨테이너(`tab`)의 두 하위 형태로 구성된다. Example(node `3659:91149`)에서 컨테이너를 인스턴스로 소비하는 방식을 보여준다.
Props
prop
값
state
active | inactive | n-hover | disabled
size
S | M | L
inactiveBottomLine
true | false
widthType
hug | fill
textOverFlow
ellipsis | newline
n-number
2 | 3 | 4 | custom(~12)
widthType
hug | fill
inactiveBottomLine
true | false
textOverFlow
ellipsis | newLine
Size
S | M | L
contentsClip
true | false
Thumbnail
components/Thumbnail/spec.md
▶
콘텐츠(이미지·템플릿·파일·오디오 등) 미리보기 카드. 여러 하위 형태를 한 페이지에 묶은 대형 합성 컴포넌트(총 291 심볼).
XS | S | M | L | XL | 2XL | 3XL | 4XL | 5XL | 6XL | 7XL | 8XL | 9XL
type
default | img | noImg | photo | play | collection | element | elements | 2
img
none | element | photoB | photoR | photoW
select / selected
false | true
showCheckBox
false | true
border
false | true
widthType
fixed
padding
none | S | M
labelSize
S | M
background
surface | transparent
device
PC | tablet
premium
none | gold | sliver
premiumBadge / thumbnailBadgeLeft / manager
off | on
n-elevatedButton size
2XS | S
비율무시(원문)
false | true
fill
false | true
Thumbnail Folder
components/Thumbnail-Folder/spec.md
🗂
폴더 이름
폴더를 표현하는 썸네일 카드. 두 개의 sub-type으로 구성된다. 현행 세트는 `mds-thumbnailFolder`/`pd-folderSelectMode`이며, Example 프레임의 `(V1) Thumbnail Folder`(3683:94802)는 데모 라벨이다(별도 컴포넌트 아님).
Props
prop
값
type
newFolder | normal
size
M
disabled(상태축)
n-default | n-hover | n-pressed | disabled
type
folder
state
default | hover | pressed | selected | disabled
Tooltip
components/Tooltip/spec.md
이것은 툴팁 문구입니다
마우스 오버·포커스 시 요소에 부가 정보를 띄우는 팝오버형 도움말. 방향 화살표(arrow)를 가진 말풍선이 기본 형태다. 여러 하위 형태(sub-type)를 하나의 컴포넌트 세트로 묶는다.
Props
prop
값
color
neutral | neutralInverse | primary | negative | black