๐ŸŒŸ ๋””ํ…Œ์ผ์˜ ๊ฐ„๊ฒฉ ์‹œ๋ฆฌ์ฆˆ! [๐Ÿ’ซ ์ƒํ™ฉ ๋ณ„ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํ•„์š”ํ•œ ์ด์œ ] (๐Ÿ‘€๊ฐ„๋‹จ ์š”์•ฝ) ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €๋Š”๋ฐ ํ™”๋ฉด์— ์–ด๋–ค ๋ณ€ํ™”๋„ ์—†๋‹ค๋ฉด ์‚ฌ์šฉ์ž๋Š” ์–ด๋–ป๊ฒŒ ๋Š๋‚„๊นŒ์š”? ์•„๋ฌด๋Ÿฐ ๋ฐ˜์‘์ด ์—†๋Š” ํ™”๋ฉด์€ ๊ณ ์žฅ ๋‚œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ๋กœ๋”ฉ์€ ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์œผ๋กœ ๋‹ค์Œ ํ™”๋ฉด์„ ๋ถˆ๋Ÿฌ์˜ฌ ์ค€๋น„๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์ƒํ™ฉ์„ ์ธ์ง€์‹œ์ผœ์ค๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ํ”„๋กœ๋•ํŠธ์˜ ์™„์„ฑ๋„๋ฅผ ๋†’์ผ ๋ฟ ์•„๋‹ˆ๋ผ, ์„œ๋น„์Šค์˜ ๋ธŒ๋žœ๋”ฉ์„ ๋‹ด์•„๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ข…๋ฅ˜ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๋งฅ๋ฝ์— ๋”ฐ๋ผ ์ „์ฒด ๋กœ๋”ฉ๊ณผ ๋ถ€๋ถ„ ๋กœ๋”ฉ์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ๋กœ๋”ฉ์€ ํ™”๋ฉด ์ „์ฒด์— ์ ์šฉ๋˜๋Š” ๋กœ๋”ฉ์œผ๋กœ ์Šค์ผˆ๋ ˆํ†ค UI, ์Šคํ”Œ๋ž˜์‹œ ํ™”๋ฉด ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ€๋ถ„ ๋กœ๋”ฉ์€ ํ™”๋ฉด์—์„œ ์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ์— ์ผ์–ด๋‚˜๋Š” ๋กœ๋”ฉ์ž…๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ๋ฒ„ํŠผ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. โœ“ ์Šค์ผˆ๋ ˆํ†ค UI (Skeleton UI) ์Šค์ผˆ๋ ˆํ†ค UI๋Š” ์‹ค์ œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ Œ๋”๋ง ๋˜๊ธฐ ์ „, ๋ณด์ผ ํ™”๋ฉด์˜ ์œค๊ณฝ์„ ๋จผ์ € ๊ทธ๋ ค์ฃผ๋Š” ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์—๊ฒŒ โ€˜์ด ์ž๋ฆฌ์— ์–ด๋–ค ๊ฒƒ๋“ค์ด ๋ณด์ด๊ฒŒ ๋  ๊ฑฐ์•ผโ€™๋ผ๊ณ  ์•Œ๋ ค์ฃผ๋Š” ํ™”๋ฉด์˜ ์˜ˆ๊ณ ํŽธ์ด๋ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โœ“ ๋ฃจํ”„ ์• ๋‹ˆ๋ฉ”์ด์…˜ (Loop Animation) ๋‹จ์ˆœํ•œ ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๊ฐ€ ๋ฌดํ•œ ๋ฐ˜๋ณต๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ํ–‰๋™์— ๋Œ€ํ•œ ๊ฐ•ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๋ฉฐ, ๋™์ ์ธ ์š”์†Œ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ง€๋ฃจํ•จ์„ ๋Š๋ผ์ง€ ์•Š๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. โœ“ ํ”„๋กœ๊ทธ๋ž˜์Šค ๋ฐ” (Progress Bar) ํ”„๋กœ๊ทธ๋ž˜์Šค ๋ฐ”๋Š” ํ™”๋ฉด ์ƒ๋‹จ์—์„œ ์–‡์€ ๋ฐ” ํ˜•ํƒœ๋กœ ๋กœ๋”ฉ์˜ ์ƒํƒœ๋ฅผ ์ง๊ด€์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด ํ™”๋ฉด์„ ์œ ์ง€ํ•˜๋ฉด์„œ ๋กœ๋”ฉ ์ƒํ™ฉ์„ ์ง๊ด€์ ์œผ๋กœ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ ์–ด๋–ค ์ƒํ™ฉ์—์„œ ์–ด๋–ค ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ์š”? โœ“ ์Šค์ผˆ๋ ˆํ†ค UI (Skeleton UI) - ๋กœ๋”ฉ์ด ์งง๊ฒŒ ๋Š๊ปด์ง€๊ฒŒ ํ•ด์•ผํ•˜๋Š”๊ฐ€? -์ด์ „ ํ™”๋ฉด ์—†์ด ์ƒˆ๋กœ ๊ทธ๋ ค์ง€๋Š” ํ™”๋ฉด์ธ๊ฐ€? -ํ™”๋ฉด์˜ ๋ณ€๋™์ด ์žฆ์ง€ ์•Š์€๊ฐ€? ํ™ˆ ํ™”๋ฉด์€ ์•ฑ์„ ์ผœ๊ณ  ์ฒ˜์Œ ๋งˆ์ฃผํ•˜๋Š” ํ™”๋ฉด์œผ๋กœ ์ค‘์š”๋„๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค. ์ฒซ ๋กœ๋”ฉ ์†๋„๋Š” ์„œ๋น„์Šค์˜ ์ธ์ƒ์„ ์ขŒ์šฐํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ณ€๊ฒฝ์ด ์žฆ์ง€ ์•Š์•„ ์Šค์ผˆ๋ ˆํ†ค UI๋ฅผ ๋งค๋ฒˆ ์ œ์ž‘ํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋ถ€๋‹ด์ด ์ ์Šต๋‹ˆ๋‹ค. ๋กœ๋”ฉ ์ „๊ณผ ํ›„๊ฐ€ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด์–ด์ ธ ์‹ฌ๋ฆฌ์ ์œผ๋กœ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋” ์งง๊ฒŒ ๋Š๊ปด์งˆ ์ˆ˜ ์žˆ๋Š” ์Šค์ผˆ๋ ˆํ†ค UI๋ฅผ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. โœ“ ๋ฃจํ”„ ์• ๋‹ˆ๋ฉ”์ด์…˜ (Loop Animation) ๋ฃจํ”„ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์ „์ฒด ๋กœ๋”ฉ๊ณผ ๋ถ€๋ถ„ ๋กœ๋”ฉ์— ๋ชจ๋‘ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ด๋ฆฌ์–ผํŠธ๋ฆฝ์—์„œ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๋กœ๋”ฉ์— ์Šคํ”ผ๋„ˆ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ๋กœ๋”ฉ์— ์ƒˆ๋กญ๊ฒŒ ์ œ์ž‘ํ•œ ๋งˆ์ด๋ฆฌ์–ผํŠธ๋ฆฝ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์„, ๋ถ€๋ถ„ ๋กœ๋”ฉ์— ์Šคํ”ผ๋„ˆ๋ฅผ ํ™œ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์Šคํ”ผ๋„ˆ -๋ถ€๋ถ„์ ์ธ ๋กœ๋”ฉ์ด ์ผ์–ด๋‚˜๋Š”๊ฐ€? -์‚ฌ์šฉ์ž ์•ก์…˜์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์ด ๊ฐ•ํ•ด์•ผ ํ•˜๋Š”๊ฐ€? (๋กœ๋”ฉ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Œ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ธ์ง€์‹œ์ผœ์•ผ ํ•˜๋Š”๊ฐ€?) ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜ -์ „์ฒด ๋กœ๋”ฉ์ด ์ผ์–ด๋‚˜๋Š”๊ฐ€? -์ด์ „ ํ™”๋ฉด์˜ ์ •๋ณด๊ฐ€ ์œ ์ง€๋˜์–ด์•ผ ํ•˜๋Š”๊ฐ€? ๊ธฐํƒ€ ๋กœ๋”ฉ ํ™”๋ฉด ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ๊ธธ๊ณ , ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ช…ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ํ™”๋ฉด์— ์ปค์Šคํ…€ ํ•œ ๋กœ๋”ฉ ํ™”๋ฉด์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋งˆ๋ฆฌํŠธ์—์„œ๋Š” ์Šคํ”Œ๋ž˜์‹œ, ํ˜ธํ…” ๊ฒ€์ƒ‰, ํ•ญ๊ณต๊ถŒ ๊ฒ€์ƒ‰ ๋กœ๋”ฉ ํ™”๋ฉด ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. -๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ๊ธธ์–ด์ง€๋Š”๊ฐ€? -์‚ฌ์šฉ์ž์—๊ฒŒ ๋ช…ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ์žˆ๋Š”๊ฐ€? (๐Ÿ‘‹์ค‘์š”ํ•œ ์ด์œ ๊ฐ€ ๋ญ”๊ฐ€์š”?) ์Šคํ”Œ๋ž˜์‹œ ํ™”๋ฉด์— ๋Œ€ํ•ด ๋ช‡ ๋ฒˆ ๊ธ€์„ ์ž‘์„ฑํ•œ ์  ์žˆ๋Š”๋ฐ์š”. ์Šคํ”Œ๋ž˜์‹œ์˜ ๊ฐ€์žฅ ํฐ ๋ชฉ์ ์€ ์•ฑ์˜ ์ฃผ์š” ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋”ฉํ•˜๊ธฐ ์œ„ํ•œ ์‹œ๊ฐ„์„ ๋ฒŒ๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ์‹œ๊ฐ์ ์œผ๋กœ ์‚ฌ์šฉ์ž๋ฅผ ์ž ์‹œ ๋จธ๋ฌผ๊ฒŒ ํ•˜๋Š” ์žฅ์น˜์ธ ๊ฒƒ์ด์ฃ . ์ด์ฒ˜๋Ÿผ ์•ฑ์˜ ์‹คํ–‰๋ถ€ํ„ฐ ์ฃผ์š” ํ™”๋ฉด์œผ๋กœ์˜ ์ด๋™, ์กฐ๊ฑด์— ๋”ฐ๋ฅธ ๊ฒ€์ƒ‰ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ณผ์ •์—์„œ ์‚ฌ์šฉ์ž๋Š” '๊ธฐ๋‹ค๋ฆผ'์„ ๋งˆ์ฃผํ•  ์ˆ˜ ๋ฐ–์— ์—†์Šต๋‹ˆ๋‹ค. ๊ตญ๋‚ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ด๋Ÿฐ ๊ธฐ๋‹ค๋ฆผ์€ ์•ฑ์„ ํ‰๊ฐ€ํ•˜๋Š” ์ฃผ์š” ๊ธฐ์ค€์ด ๋˜๊ธฐ๋„ ํ•˜์ฃ . ๊ทธ๋ž˜์„œ ์ด๋ฒˆ ๊ธ€์ด ์ œ๊ฒŒ๋Š” ๋” ์ค‘์š”ํ•˜๊ฒŒ ๋‹ค๊ฐ€์™”์Šต๋‹ˆ๋‹ค. ํ™”๋ฉด์ด๋‚˜ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๊ธฐ์ค€์„ ๋งŒ๋“ค๊ณ , ๊ตฌ์ฒด์ ์ธ ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ธ€์ด ๋งŽ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋‹ค๋ฆผ์˜ ์‹œ๊ฐ„์„ ๊ธ์ •์ ์ธ ๊ฒฝํ—˜์œผ๋กœ ๋ฐ”๊พธ๋Š” ์ด๋Ÿฐ ๋””ํ…Œ์ผ๋“ค์ด ์žˆ๋‹ค๋ฉด, ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ๋Š” ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ธ์‹์ด ์ข‹์•„์งˆ ์ˆ˜ ๋ฐ–์— ์—†์ง€ ์•Š์„๊นŒ์š”? (๐Ÿ’Œํ•จ๊ป˜ ์ฝ์–ด๋ณด์„ธ์š”!) ๋ชจ๋ฐ”์ผ ์•ฑ์—์„œ์˜ โ€˜๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜โ€™ ์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•˜๋ฉด ์ข‹์„๊นŒ? : http://icunow.co.kr/loading-animation/ ์Šคํ”Œ๋ž˜์‹œ ํ™”๋ฉด, ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑํ•˜๋ฉด ์ข‹์„๊นŒ? : https://stib.ee/Z722

์ƒํ™ฉ์— ๋งž๋Š” ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ ์šฉํ•˜๊ธฐ

Medium

์ƒํ™ฉ์— ๋งž๋Š” ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ ์šฉํ•˜๊ธฐ

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2020๋…„ 7์›” 2์ผ ์˜คํ›„ 11:55

๋Œ“๊ธ€ 0




๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

1

์กฐํ˜„์šฑ ํŽ˜์ด์›Œ์น˜ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

์Šคํƒ€ํŠธ์—…์—์„œ ์„ฑ์žฅํ•œ๋‹ค๋Š” ์ฃผ๋‹ˆ์–ด์˜ ์ฐฉ๊ฐ

2

ํ•œ๊ธฐ์šฉ UpZen ์ฐฝ์—…์ž ๋Œ€ํ‘œ

์ฝ”๋“œ ๊ฐ€๋…์„ฑ๊ณผ ๋นผ๊ธฐ์˜ ๋ฏธํ•™

3

K๋ฆฌ๊ทธ ํ”„๋กœ๊ทธ๋ž˜๋จธ ์ปคํ”ผํ•œ์ž” ๊ฐœ๋ฐœ์ž

๋‹ค์‹œ ๊ณต๋ถ€ํ•œ๋‹ค๋ฉด ํƒ‘๋‹ค์šด ๋ฐฉ์‹์œผ๋กœ

4

๋‹ฌ๋ ˆ ๋ธ”๋กœ๊ทธ ์“ฐ๋Š” ๊ฐœ๋ฐœ์ž โœ๏ธ

ํ—ฌ๋กœ Bun ๐ŸฅŸ eBook ์ถœ๊ฐ„ ์†Œ์‹ ๐Ÿ“จ

5

์žฅํ™์„ ์ŠคํŽ˜์ด์Šค์˜ค๋””ํ‹ฐ ๋ถ€๋Œ€ํ‘œ/CPO

< ๋‹น์‹ ์„ ํŒ”๊ณ  ์‹ถ๋‹ค๋ฉด, ํ‰์†Œ์— ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ๋‹ด๊ฒจ๋ผ >

์ถ”์ฒœ ํ”„๋กœํ•„