Android

Compose Visuals

The ultimate interactive reference catalog for Jetpack Compose UI.

Accessibility

๋ชจ๋‘๋ฅผ ์œ„ํ•œ ์•ฑ์„ ์ง€ํ–ฅํ•ฉ๋‹ˆ๋‹ค. TalkBack ์ง€์›์„ ์œ„ํ•œ ์‹œ๋งจํ‹ฑ ์ •๋ณด์™€ ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์ตœ์ ํ™” ๋“ฑ ์ ‘๊ทผ์„ฑ ํ‘œ์ค€์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

3 Components

Animation & Motion

์„ ์–ธํ˜• ์„ ์–ธ ๋ฐฉ์‹์œผ๋กœ ๋ณต์žกํ•œ ๋ชจ์…˜์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ƒํƒœ ์ „ํ™˜์— ๋”ฐ๋ฅธ ๋ถ€๋“œ๋Ÿฌ์šด ์ „์ด์™€ ๋ฌผ๋ฆฌ ๊ธฐ๋ฐ˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

14 Components

AppBars & Navigation

์•ฑ์˜ ์ „์—ญ ๋„ค๋น„๊ฒŒ์ด์…˜๊ณผ ์ •์ฒด์„ฑ์„ ํ™•๋ฆฝํ•ฉ๋‹ˆ๋‹ค. ์ƒ๋‹จ ์•ฑ๋ฐ”๋ถ€ํ„ฐ ํ•˜๋‹จ ๋‚ด๋น„๊ฒŒ์ด์…˜, ๋“œ๋กœ์–ด ๋“ฑ ํ‘œ์ค€ํ™”๋œ ํƒ์ƒ‰ ๋ชจํ˜•์„ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค.

8 Components

Badges & Tooltips

์ •๋ณด์˜ ๋ณด์กฐ์ ์ธ ๊ฐ•์กฐ(Badge)์™€ ์ƒ์„ธ ์„ค๋ช…์˜ ํŒ์—…(Tooltip)์„ ํ†ตํ•ด ์ธ์ง€ ํŽธ์˜์„ฑ์„ ๊ฐœ์„ ํ•˜๋Š” ๋„๊ตฌ๋“ค์ž…๋‹ˆ๋‹ค.

4 Components

Buttons & Actions

Material 3 ๋””์ž์ธ ๊ฐ€์ด๋“œ๋ฅผ ์ค€์ˆ˜ํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฒ„ํŠผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์˜ ํ•ต์‹ฌ์ธ ์•ก์…˜ ์œ„๊ณ„๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

15 Components

Canvas & Graphics

์ €์ˆ˜์ค€ DrawScope๋ฅผ ์ง์ ‘ ์ œ์–ดํ•˜์—ฌ ๊ณ ๋„๋กœ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋œ 2D ๊ทธ๋ž˜ํ”ฝ๊ณผ ๋ฌผ๋ฆฌ์  ๋“œ๋กœ์ž‰์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

8 Components

Dialogs & Menus

์‚ฌ์šฉ์ž์˜ ์ฆ‰๊ฐ์ ์ธ ๋Œ€์‘์„ ์š”ํ•˜๊ฑฐ๋‚˜ ๋ณด์กฐ ์ •๋ณด๋ฅผ ๋ณ„๋„ ๋ ˆ์ด์–ด๋กœ ๋…ธ์ถœํ•˜๋Š” ์˜ค๋ฒ„๋ ˆ์ด ์ปดํฌ๋„ŒํŠธ๊ตฐ์ž…๋‹ˆ๋‹ค.

8 Components

Effects & Lifecycle

์ปดํฌ์ง€์…˜ ์ƒ๋ช…์ฃผ๊ธฐ ๋‚ด์—์„œ ์•ˆ์ „ํ•˜๊ฒŒ ์‹คํ–‰๋˜๋Š” ๋ถ€์ˆ˜ ํšจ๊ณผ ๊ด€๋ฆฌ ๋กœ์ง์ž…๋‹ˆ๋‹ค. ์ฝ”๋ฃจํ‹ด ์‹คํ–‰๊ณผ ์ž์› ํ•ด์ œ๋ฅผ ์„ ์–ธ์ ์œผ๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

4 Components

Gestures

๋ฌผ๋ฆฌ์  ํ„ฐ์น˜ ์ž…๋ ฅ์„ ํŒŒ์•…ํ•˜์—ฌ ๊ณ ์ฐจ์›์  ์ƒํ˜ธ์ž‘์šฉ์œผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํƒญ, ๋“œ๋ž˜๊ทธ, ๋‹ค์ค‘ ํ„ฐ์น˜ ์ถ”์  ๊ธฐ์ˆ ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

4 Components

Images & Icons

์ด๋ฏธ์ง€ ๋ฆฌ์†Œ์Šค์˜ ํ‘œํ˜„๊ณผ ์ œ์–ด๋ฅผ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ๋กœ๋”ฉ๋ถ€ํ„ฐ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ ์ฒ˜๋ฆฌ๊นŒ์ง€ ํฌ๊ด„์ ์ธ ์‹œ๊ฐ ์ž์‚ฐ ํ™œ์šฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

6 Components

Indicators & Toggles

์‹œ์Šคํ…œ ์ƒํƒœ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ํฌ์ฐฉํ•˜๋Š” ๋„๊ตฌ๋“ค์ž…๋‹ˆ๋‹ค. ์ง„ํ–‰ ์ƒํ™ฉ ํ‘œ์‹œ๋ถ€ํ„ฐ ๋‹ค์–‘ํ•œ ์ƒํƒœ ์ „์ด ์ œ์–ด๊นŒ์ง€ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

10 Components

Input & TextField

์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ˆ˜์ง‘ํ•˜๋Š” ์ƒํ˜ธ์ž‘์šฉ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. Material3 ์Šคํƒ€์ผ์˜ ํ…์ŠคํŠธ ํ•„๋“œ์™€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ, ํ‚ค๋ณด๋“œ ์˜ต์…˜์„ ์ฒด๊ณ„์ ์œผ๋กœ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.

12 Components

Interoperability

์ „ํ†ต์ ์ธ XML View ์‹œ์Šคํ…œ๊ณผ ์ตœ์‹  Compose UI ๊ฐ„์˜ ์™„๋ฒฝํ•œ ๊ฐ€๊ต ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์–‘๋ฐฉํ–ฅ ํ˜ธ์ŠคํŒ… ํŒจํ„ด์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

3 Components

Layout Alignments

๊ตฌ์„ฑ ์š”์†Œ์˜ ๋ฌผ๋ฆฌ์  ๋ฐฐ์น˜๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ทผ๊ฐ„์ด ๋˜๋Š” ๋ ˆ์ด์•„์›ƒ ๋กœ์ง์ž…๋‹ˆ๋‹ค. Row, Column, Box๋ฅผ ํ†ตํ•ด ํ™”๋ฉด์˜ ์งˆ์„œ๋ฅผ ์„ธ์šฐ๊ณ  ์ปค์Šคํ…€ ๋ฐฐ์น˜๋ฅผ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

12 Components

Lists & Grids

๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ์…‹์„ ํšจ์œจ์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ์ง€์—ฐ(Lazy) ์ฒ˜๋ฆฌ ๋ฐฉ์‹์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๋ฌดํ•œ ์Šคํฌ๋กค๋ถ€ํ„ฐ ๋ณต์žกํ•œ ๊ฒฉ์ž ๋ฐฐ์น˜๊นŒ์ง€ ์„ฑ๋Šฅ ์ค‘์‹ฌ์˜ ๋ชฉ๋ก์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.

15 Components

M3 Chips & Lists

Material 3 ์นฉ์˜ ๋ฐฐ๋ฆฌ์—์ด์…˜์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์„ ํƒ, ์ž…๋ ฅ ์บก์Šํ™”, ํ•„ํ„ฐ๋ง ๋“ฑ ์ฝคํŒฉํŠธํ•œ ์ •๋ณด ๋…ธ์ถœ์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

4 Components

Modifiers

์ปดํฌ์ €๋ธ”์˜ ๋ ˆ์ด์•„์›ƒ, ์™ธ๊ด€, ๋™์ž‘์„ ์„ ์–ธ์ ์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ํ•ต์‹ฌ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ฒด์ด๋‹์„ ํ†ตํ•ด ํฌ๊ธฐ, ์—ฌ๋ฐฑ, ์ƒํ˜ธ์ž‘์šฉ ๋ฐฉ์‹์„ ์œ ์—ฐํ•˜๊ฒŒ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค.

23 Components

Pagers & Carousels

์Šค์™€์ดํ”„ ๊ธฐ๋ฐ˜์˜ ์ˆ˜ํ‰/์ˆ˜์ง ์นด๋“œ ํƒ์ƒ‰ UI๋ฅผ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์—ฐ๋™๊ณผ ๋ถ€๋“œ๋Ÿฌ์šด ์ธ๋””์ผ€์ดํ„ฐ ์ƒํ˜ธ์ž‘์šฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

4 Components

Pickers & Date

ํ‘œ์ค€ํ™”๋œ ๋‚ ์งœ์™€ ์‹œ๊ฐ„ ์„ ํƒ UI์ž…๋‹ˆ๋‹ค. ์ง๊ด€์ ์ธ ์บ˜๋ฆฐ๋” ๋“œ๋กœ์ž‰๊ณผ ๋‹ค์ด์–ผ ์‹œ๊ณ„ ๋ฐฉ์‹์˜ ์ •๋ฐ€ํ•œ ์„ ํƒ ํ™˜๊ฒฝ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

3 Components

Surfaces & Sheets

UI์˜ ์‹œ๊ฐ์  ํ† ๋Œ€๊ฐ€ ๋˜๋Š” ์ปจํ…Œ์ด๋„ˆ ์˜์—ญ์ž…๋‹ˆ๋‹ค. ๋ฐฐ๊ฒฝ์ƒ‰(Surface), ์œ„๊ณ„(Elevation), ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋‹ฌ(Sheet)์„ ํ†ตํ•œ ๊ณต๊ฐ„ ํ™•์žฅ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

8 Components

Text & Typography

์„ ์–ธํ˜• UI์˜ ๊ทผ๊ฐ„์ธ ํ…์ŠคํŠธ ๋ Œ๋”๋ง ์‹œ์Šคํ…œ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์ถœ๋ ฅ๋ถ€ํ„ฐ ์ •๊ตํ•œ ์Šคํƒ€์ผ๋ง, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ๊ทœ์น™ ์ œ์–ด๊นŒ์ง€ ํฌ๊ด„์ ์ธ ํ…์ŠคํŠธ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.

15 Components

Window Insets

์•ฑ์˜ ์บ”๋ฒ„์Šค ๋„ˆ๋จธ ์‹œ์Šคํ…œ ์˜์—ญ๊ณผ์˜ ๊ณต์กด์„ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ƒํƒœ๋ฐ”, ๋„ค๋น„๊ฒŒ์ด์…˜๋ฐ”, ํ‚ค๋ณด๋“œ ์˜์—ญ๊ณผ์˜ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

4 Components