Search
๐Ÿฆด

loading & Skeleton UI

loading & UI๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

์‚ฌ์šฉ์ž๊ฐ€ ์ดํƒˆํ•˜์ง€ ์•Š๊ฒŒ๋” ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๋Šฅ๋™์ ์œผ๋กœ ์ฐธ์—ฌํ•˜๋Š” ์›นํŽ˜์ด์ง€์™€ ๊ฒฝํ—˜์„ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด

์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

loading ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ skeleton UI๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Skeleton UI

์Šคํ”ผ๋„ˆ์™€ ๋กœ๋”๋Š” ์ „ํ†ต์ ์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋“œํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฐ๋‹ค๋Š” ๊ฒƒ์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ํ›Œ๋ฅญํ•˜์ง€๋งŒ, ์ ์ฐจ ๋น ๋ฅด๊ฒŒ ๋Œ€์ฒด๋˜๊ณ  ์žˆ๋Š”๋ฐ์š”. Skeleton UI๋Š” ๋Œ€๊ธฐ ์‹œ๊ฐ„์ด ์•„๋‹Œ ์ง„ํ–‰ ์ƒํ™ฉ์— ์ดˆ์ ์„ ๋งž์ถ”๊ณ  ๋กœ๋”ฉ ์‹œ๊ฐ„์˜ ๋ถˆ๋งŒ์„ ์ค„์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด ๋กœ๋” UI๋ฅผ ๋Œ€์ฒดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค
UX์ ์ธ ๊ด€์ ์—์„œ๋Š” ์‚ฌ์šฉ์ž๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ํŽ˜์ด์ง€์— ๋กœ๋“œ๋˜๋Š” ๋™์•ˆ ๊ณ„์† ์ฐธ์—ฌํ•ด์•ผ ์ดํƒˆ๋ฅ ์ด ๋‚ฎ์•„์ง„๋‹ค๊ณ  ๋ด…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ธฐ์กด์˜ ์Šคํ”ผ๋„ˆ๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ๋กœ๋“œ๋˜๊ธฐ ์ „์— ์‚ฌ์šฉ์ž๋ฅผ ์ฐธ์—ฌ์‹œํ‚ค๋Š” ์•„์ด๋””์–ด๋Š” ํ›Œ๋ฅญํ•œ UI์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์šฉ์ž๋Š” ์‹œ๊ณ„์ฒ˜๋Ÿผ ๋Œ๊ณ  ์žˆ๋Š” ๋”๋ฏธ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์Šคํ”ผ๋„ˆ๋ฅผ ์ณ๋‹ค๋ณด๋Š”๋ฐ ์ง€๋ฃจํ•จ์„ ๋Š๊ผˆ๋Š”๋ฐ์š”. ์ด๋Š” ๋” ๋‚˜์€ UI์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์œผ๋กœ ์ด์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋‹จ์ˆœํžˆ ๋Œ€๊ธฐ๋งŒ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ชฉํ‘œ๋ฅผ ํ–ฅํ•ด ๋‚˜์•„๊ฐ€๊ณ  ์žˆ์Œ์„ ๋ณด์—ฌ์ค˜์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋ฌด์ž‘์ • ๊ธฐ๋‹ค๋ฆฌ๋Š” ์‹ ํ˜ธ๋“ฑ๋ณด๋‹ค๋Š” ๋‚จ์€ ์‹œ๊ฐ„์„ ์•Œ๋ ค์ฃผ๋Š” ์‹ ํ˜ธ๋“ฑ์ด ๋œ ์ง€๋ฃจํ•œ ๊ฒƒ์ฒ˜๋Ÿผ์š”.
์œ ํŠœ๋ธŒ ์›น์‚ฌ์ดํŠธ์— ์ ‘๊ทผํ•˜๋ฉด ์ดˆ๊ธฐ์— ์œ ํŠœ๋ธŒ ์˜์ƒ์ด ๋กœ๋”ฉ๋˜๊ธฐ ์ „์— ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์„ ๋ณธ ์ ์ด ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ”ํžˆ skeleton UI๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์–ด๋–ค ํ˜•ํƒœ๋กœ, ๋ฐ์ดํ„ฐ์™€ ํ™”๋ฉด์ด ๊ทธ๋ ค์งˆ ๊ฒƒ์ธ์ง€ ๋ณด์—ฌ์ฃผ๋Š” Skeleton UI๋Š” ๋”ฐ๋กœ Component๋ฅผ ๋งŒ๋“ค์–ด ๊ด€๋ฆฌํ•  ๋งŒํผ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š”๋ฐ์š”. ์š”์ฆ˜ ๋งŽ์€ ์›น์‚ฌ์ดํŠธ์—์„œ ์ง€๋ฃจํ•œ ๋Œ€๊ธฐ ์‹œ๊ฐ„์„ ์ค„์ด๊ธฐ ์œ„ํ•ด Skeleton UI๋ฅผ ์ด์šฉํ•˜๊ณ , ์ผ๋ฐ˜์ ์œผ๋กœ ํฐ์ƒ‰ ๋ฐฐ๊ฒฝ๊ณผ ๋ฐ˜์ง์ด๋Š” CSS ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
์•„๋ž˜์˜ ํŽ˜์ด์Šค๋ถ ํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ๋‘ ํ™”๋ฉด ๋ชจ๋‘ ์‹ค์ œ ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋“œํ•˜์ง€ ์•Š์•˜์ง€๋งŒ, Skeleton UI๊ฐ€ ๋ฐ˜์˜๋œ ํ™”๋ฉด์ด ๋” ํ’๋ถ€ํ•ด ๋ณด์ด๊ณ  ๋ฐ˜์‘์ด ๋” ์ข‹์•„ ๋ณด์ด๋Š” ๋ฐ˜๋ฉด ๋นˆ ํŽ˜์ด์ง€๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋Š๋ฆฌ๊ฒŒ ๋ณด์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ์ฝ˜ํ…์ธ ๋Š” ๋™์ผํ•œ ์†๋„๋กœ ๋กœ๋“œ๋˜์ง€๋งŒ, Skeleton UI ํ™”๋ฉด์€ ๋ณด๋‹ค ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ๊ฒƒ์€ Skeleton์€ ๊ฐ€๋Šฅํ•œ ์ฝ˜ํ…์ธ ์™€ ๊ฐ™์•„์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๋‹ค๋ฅธ ํ˜•ํƒœ์˜ Skeleton์„ ๋ณด์—ฌ์ฃผ๋‹ค๊ฐ€, ๋‹ค๋ฅธ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋ฉด ์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ๋Š” ๋‹นํ™ฉํ•  ์ˆ˜๋„ ์žˆ๊ฑฐ๋“ ์š”.
๋ฌผ๋ก  Skeleton UI๋„ ๋งŒ๋Šฅ์ธ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์ค‘์š”ํ•œ ๊ฒƒ์€ ๋‚ด๊ฐ€ ๋งŒ๋“œ๋Š” ์„œ๋น„์Šค์—์„œ ์–ด๋–ค UI๊ฐ€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์—์„œ ๋” ์ข‹์„์ง€ ๊ณ ๋ฏผํ•ด๋ณด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋•Œ๋กœ๋Š” ๋‹จ์ˆœํ•œ ๋กœ๋”ฉ๋ฐ”๊ฐ€ ๋” ์˜๋ฏธ ์žˆ์„ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์ •๋ฆฌ

โ€ข
Skeleton UI๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋‹จ์ˆœ ๊ธฐ๋‹ค๋ฆผ์ด ์•„๋‹ˆ๋ผ ์‚ฌ์šฉ์ž๊ฐ€ ์ฝ˜ํ…์ธ  ๋กœ๋“œํ•˜๋Š” ์‹œ๊ฐ„๋™์•ˆ ๋ชฉํ‘œ๋กœ ํ–ฅํ•ด ๋‚˜์•„๊ฐ€๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ฃผ๋Š” ๊ฒฝํ—˜์ด๋‹ค.

์ฐธ๊ณ  ๋งํฌ