Search
Duplicate

UI μš”μ†Œ

μ›Ήμ‚¬μ΄νŠΈ UI μš”μ†Œ 리슀트 (싀무 μš©μ–΄)

λ„€λΉ„κ²Œμ΄μ…˜ / 메뉴 κ΄€λ ¨

μš©μ–΄
μ„€λͺ…
GNB (Global Navigation Bar)
μ‚¬μ΄νŠΈ μ΅œμƒλ‹¨μ˜ μ „μ—­ 메뉴. 메인 μΉ΄ν…Œκ³ λ¦¬.
LNB (Local Navigation Bar)
μ„Ήμ…˜ λ‚΄λΆ€μ—μ„œ μ“°λŠ” 둜컬 메뉴. 보톡 쒌츑 메뉴.
SNB (Side Navigation Bar)
μ‚¬μ΄λ“œμ— μœ„μΉ˜ν•œ 메뉴. LNB와 같은 의미둜 쓰이기도 함.
FNB (Footer Navigation Bar)
ν•˜λ‹¨μ— μžˆλŠ” 메뉴 링크듀.
Breadcrumb (λΈŒλ ˆλ“œν¬λŸΌ)
ν˜„μž¬ μœ„μΉ˜ ν‘œμ‹œ: ν™ˆ > μΉ΄ν…Œκ³ λ¦¬ > νŽ˜μ΄μ§€.
Tab Menu (νƒ­ 메뉴)
ν•œ ν™”λ©΄μ—μ„œ λ‚΄μš© μ „ν™˜ν•˜λŠ” νƒ­ ꡬ쑰.

μœ ν‹Έλ¦¬ν‹° μ˜μ—­ (UTILΒ·Utility Area)

μš©μ–΄
μ„€λͺ…
Util Menu (μœ ν‹Έ 메뉴)
둜그인/νšŒμ›κ°€μž…/λ§ˆμ΄νŽ˜μ΄μ§€/고객센터 λ“± 상단 보쑰 메뉴.
Search Bar
검색창.
Language Switcher
λ‹€κ΅­μ–΄ μ „ν™˜ UI.
Profile Dropdown
ν”„λ‘œν•„ 클릭 μ‹œ λ‚˜νƒ€λ‚˜λŠ” 메뉴.

λ ˆμ΄μ•„μ›ƒ μš”μ†Œ

μš©μ–΄
μ„€λͺ…
Header
μ΅œμƒλ‹¨ μ˜μ—­. 둜고 + GNB + μœ ν‹Έ 메뉴 포함.
Footer
μ΅œν•˜λ‹¨ μ˜μ—­. νšŒμ‚¬ 정보, FNB λ“±.
Sidebar
쒌/우츑 κ³ μ • 메뉴 λ˜λŠ” 정보 μ˜μ—­.
Hero Section
메인 λΉ„μ£Όμ–Ό(큰 λ°°λ„ˆ).
Content Area (컨텐츠 μ˜μ—­)
λ³Έλ¬Έ μ˜μ—­.
Card UI
λ°•μŠ€ ν˜•νƒœμ˜ 정보(μƒν’ˆμΉ΄λ“œ, κ²Œμ‹œκΈ€μΉ΄λ“œ λ“±).
Grid / Column Layout
κ·Έλ¦¬λ“œ 기반 μ½˜ν…μΈ  배치.

λ²„νŠΌ & μΈν„°λž™μ…˜ μš”μ†Œ

μš©μ–΄
μ„€λͺ…
CTA (Call To Action)
μ£Όμš” 행동 λ²„νŠΌ (예: β€œμ§€κΈˆ 신청”).
Floating Button
μŠ€ν¬λ‘€μƒλ‹¨/챗봇/λΉ λ₯Έλ©”뉴 같은 λ– μžˆλŠ” λ²„νŠΌ.
Dropdown Menu
클릭/ν˜Έλ²„λ‘œ νŽΌμ³μ§€λŠ” 메뉴.
Toggle Switch
ON/OFF UI.
Accordion
펼치기/μ ‘κΈ° 메뉴.
Modal / Popup
λ ˆμ΄μ–΄ νŒμ—… μ°½.
Tooltip
μš”μ†Œ μ„€λͺ… μž‘μ€ 말풍선.

μž…λ ₯/폼 μš”μ†Œ

μš©μ–΄
μ„€λͺ…
Input Field
ν…μŠ€νŠΈ μž…λ ₯μ°½.
Select Box
μ˜΅μ…˜ 선택 λ“œλ‘­λ‹€μš΄.
Radio Button
단일 선택.
Checkbox
닀쀑 선택.
Textarea
κΈ΄ κΈ€ μž…λ ₯μ°½.
Stepper
μˆ˜λŸ‰ 쑰절( + / - ).

μƒνƒœ/정보 μš”μ†Œ

μš©μ–΄
μ„€λͺ…
Badge
μ‹ μƒν’ˆ, 할인, μ•Œλ¦Ό 개수 λ“± ν‘œμ‹œ.
Chip
νƒœκ·Έ ν˜•νƒœμ˜ μž‘μ€ UI.
Snackbar / Toast
짧게 λ‚˜νƒ€λ‚˜λŠ” μ•Œλ¦Ό λ©”μ‹œμ§€.
Loader / Spinner
λ‘œλ”© UI.
Progress Bar
진행λ₯  ν‘œμ‹œ.
Pagination
νŽ˜μ΄μ§€ 이동 UI (<< < 1 2 3 > >>).

기타 ν”ν•œ UI μš”μ†Œ

μš©μ–΄
μ„€λͺ…
Carousel / Slider
이미지/μ½˜ν…μΈ  λ„˜κΈ°λŠ” μŠ¬λΌμ΄λ”.
Mega Menu
GNB ν•˜μœ„μ— 큰 μ˜μ—­μœΌλ‘œ νŽΌμ³μ§€λŠ” 메뉴.
Banner
ν”„λ‘œλͺ¨μ…˜/곡지 λ“± μ΄λ―Έμ§€ν˜• μ˜μ—­.
Tag Cloud
νƒœκ·Έ λͺ¨μŒ UI.
Table
ν‘œ ν˜•νƒœ.

UI μš”μ†Œ

UI μš”μ†Œ
이름
ν…μŠ€νŠΈ
λ²„νŠΌ (Button)
Open
기본적인 UI μš”μ†Œλ‘œ, μƒν˜Έμž‘μš©μ„ μœ„ν•œ 클릭 κ°€λŠ₯ν•œ μš”μ†Œμž…λ‹ˆλ‹€.
ν…μŠ€νŠΈ μž…λ ₯ ν•„λ“œ (Text Input Field)
Open
μ‚¬μš©μž μž…λ ₯을 λ°›κΈ° μœ„ν•œ 기본적인 ν•„λ“œμž…λ‹ˆλ‹€.
μ²΄ν¬λ°•μŠ€ (Checkbox)
Open
μ—¬λŸ¬ μ˜΅μ…˜ 쀑 닀쀑 선택이 ν•„μš”ν•œ 경우 μ‚¬μš©ν•©λ‹ˆλ‹€.
λΌλ””μ˜€ λ²„νŠΌ (Radio Button)
Open
단일 μ˜΅μ…˜ 선택을 μ œκ³΅ν•˜λŠ” UI μš”μ†Œμž…λ‹ˆλ‹€.
ν…μŠ€νŠΈ μ˜μ—­ (Text Area)
Open
μ—¬λŸ¬ μ€„μ˜ ν…μŠ€νŠΈ μž…λ ₯을 μ§€μ›ν•˜λŠ” ν•„λ“œμž…λ‹ˆλ‹€.
λ“œλ‘­λ‹€μš΄ 메뉴 (Dropdown Menu)
Open
μ˜΅μ…˜μ„ 숨기고 클릭 μ‹œ νŽΌμ³μ§€λŠ” λ©”λ‰΄μž…λ‹ˆλ‹€.
μŠ€ν”Όλ„ˆ (Spinner)
Open
λ‘œλ”© μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄κ±°λ‚˜ κ°’ 쑰정에 μ‚¬μš©ν•©λ‹ˆλ‹€.
μŠ¬λΌμ΄λ” (Slider)
Open
값을 μ‘°μ •ν•  수 μžˆλŠ” λ“œλž˜κ·Έ κ°€λŠ₯ν•œ μ»¨νŠΈλ‘€μž…λ‹ˆλ‹€.
λͺ¨λ‹¬ (Modal)
Open
μΆ”κ°€ 정보λ₯Ό ν‘œμ‹œν•˜λŠ” νŒμ—… μ°½μž…λ‹ˆλ‹€.
ν† κΈ€ μŠ€μœ„μΉ˜ (Toggle Switch)
Open
두 μƒνƒœ κ°„μ˜ μ „ν™˜μ„ λ‚˜νƒ€λ‚΄λŠ” μŠ€μœ„μΉ˜μž…λ‹ˆλ‹€.
νƒ­ (Tabs)
Open
μ—¬λŸ¬ μ½˜ν…μΈ λ₯Ό νƒ­μœΌλ‘œ κ΅¬λΆ„ν•˜μ—¬ ν‘œμ‹œν•˜λŠ” μš”μ†Œμž…λ‹ˆλ‹€.
μ• λ“œμ˜¨ (Accordion)
Open
클릭 μ‹œ νŽΌμ³μ§€λŠ” μ½˜ν…μΈ  μ˜μ—­μž…λ‹ˆλ‹€.
ν”„λ‘œκ·Έλ ˆμŠ€ λ°” (Progress Bar)
Open
μž‘μ—… 진행 μƒνƒœλ₯Ό μ‹œκ°μ μœΌλ‘œ λ‚˜νƒ€λ‚΄λŠ” λ°”μž…λ‹ˆλ‹€.
배지 (Badge)
Open
μ•„μ΄μ½˜ μ˜†μ— μΆ”κ°€ μ •λ³΄λ‚˜ μ•Œλ¦Όμ„ ν‘œμ‹œν•©λ‹ˆλ‹€.
μ•„μ΄μ½˜ (Icon)
Open
μ‹œκ°μ  ν‘œν˜„μ„ μœ„ν•œ μž‘μ€ κ·Έλž˜ν”½μž…λ‹ˆλ‹€.
이미지 가러리 (Image Gallery)
Open
이미지λ₯Ό κ·Έλ¦¬λ“œ λ˜λŠ” μŠ¬λΌμ΄λ“œ ν˜•νƒœλ‘œ λ³΄μ—¬μ£ΌλŠ” κ΅¬μ„±μž…λ‹ˆλ‹€.
λŒ“κΈ€ (Comment)
Open
μ‚¬μš©μž ν”Όλ“œλ°±μ΄λ‚˜ μƒν˜Έμž‘μš©μ„ μœ„ν•œ μ˜μ—­μž…λ‹ˆλ‹€.
λ„€λΉ„κ²Œμ΄μ…˜ λ°” (Navigation Bar)
Open
μ›Ήμ‚¬μ΄νŠΈμ˜ 링크λ₯Ό ν¬ν•¨ν•˜λŠ” λ©”λ‰΄μž…λ‹ˆλ‹€.
μΉ΄λ“œ (Card)
Open
μ½˜ν…μΈ λ₯Ό λ‹΄λŠ” μ»¨ν…Œμ΄λ„ˆμž…λ‹ˆλ‹€.
λ°°λ„ˆ (Banner)
Open
상단에 κ³ μ •λœ κ΄‘κ³ λ‚˜ λ©”μ‹œμ§€μž…λ‹ˆλ‹€.
일정 (Calendar)
Open
λ‚ μ§œ 선택 λ˜λŠ” ν‘œμ‹œλ₯Ό μœ„ν•œ μΈν„°νŽ˜μ΄μŠ€μž…λ‹ˆλ‹€.
데이터 ν…Œμ΄λΈ” (Data Table)
Open
데이터λ₯Ό ν–‰κ³Ό μ—΄λ‘œ μ •λ¦¬ν•˜μ—¬ ν‘œμ‹œν•˜λŠ” μš”μ†Œμž…λ‹ˆλ‹€.