์ํฉ์ ๋ง๋ ๋ก๋ฉ ์ ๋๋ฉ์ด์ ์ ์ฉํ๊ธฐ
Medium
๐ ๋ํ ์ผ์ ๊ฐ๊ฒฉ ์๋ฆฌ์ฆ! [๐ซ ์ํฉ ๋ณ ๋ก๋ฉ ์ ๋๋ฉ์ด์ ์ด ํ์ํ ์ด์ ] (๐๊ฐ๋จ ์์ฝ) ๋ฒํผ์ ๋๋ ๋๋ฐ ํ๋ฉด์ ์ด๋ค ๋ณํ๋ ์๋ค๋ฉด ์ฌ์ฉ์๋ ์ด๋ป๊ฒ ๋๋๊น์? ์๋ฌด๋ฐ ๋ฐ์์ด ์๋ ํ๋ฉด์ ๊ณ ์ฅ ๋ ๊ฒ์ฒ๋ผ ๋ณด์ ๋๋ค. ๋ก๋ฉ์ ์ฌ์ฉ์์ ํ๋์ ๋ํ ํผ๋๋ฐฑ์ผ๋ก ๋ค์ ํ๋ฉด์ ๋ถ๋ฌ์ฌ ์ค๋น๋ฅผ ํ๊ณ ์๋ค๋ ์ํฉ์ ์ธ์ง์์ผ์ค๋๋ค. ์ ์ ํ ๋ก๋ฉ ์ ๋๋ฉ์ด์ ์ ํ๋ก๋ํธ์ ์์ฑ๋๋ฅผ ๋์ผ ๋ฟ ์๋๋ผ, ์๋น์ค์ ๋ธ๋๋ฉ์ ๋ด์๋ผ ์ ์์ต๋๋ค. ๐ ๋ก๋ฉ ์ ๋๋ฉ์ด์ ์ ์ข ๋ฅ ๋ก๋ฉ ์ ๋๋ฉ์ด์ ์ ๋งฅ๋ฝ์ ๋ฐ๋ผ ์ ์ฒด ๋ก๋ฉ๊ณผ ๋ถ๋ถ ๋ก๋ฉ์ผ๋ก ๋๋ ์ ์์ต๋๋ค. ์ ์ฒด ๋ก๋ฉ์ ํ๋ฉด ์ ์ฒด์ ์ ์ฉ๋๋ ๋ก๋ฉ์ผ๋ก ์ค์ผ๋ ํค 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
2020๋ 7์ 2์ผ ์คํ 11:55