01.
์ฌ์ฉ์ ์นํ์
์ถ๊ฐ ์ํ ํ์ด์ง
โ์์ ๋ก์ด ์น ๊ตฌ์ถโ ์ด๋ผ๋ ๋ณธ๋์ ๋ชฉํ
์๋ํ๋ ์ค๋ ์ด์ฐฝ๊ธฐ๋ถํฐ ์ฝํ ์ธ ๊ด๋ฆฌ์ ํ์ ์ ์ ๋ํด ์์ต๋๋ค. ์ด๊ธฐ์๋ ๊ณ ์ ๋ ๋ ์ด์์๊ณผ ์ ํ๋ ์ปค์คํฐ๋ง์ด์ง ์ต์ ์ผ๋ก ์์ํ์ง๋ง, ์ฌ์ฉ์์ ์๊ตฌ์ ๋ฐ๋ผ ์ง์์ ์ผ๋ก ๋ฐ์ ํด์์ต๋๋ค. ๊ทธ ์ค์์๋ ๋ธ๋ก ํ ๋ง๋ ์๋ํ๋ ์ค์ ์ค์ํ ์งํ ์ค ํ๋์ ๋๋ค. ๋ธ๋ก ํ ๋ง๋ ์๋ํ๋ ์ค ์ฌ์ฉ์์๊ฒ ๋์ฑ ์ ์ฐํ๊ณ ์ง๊ด์ ์ธ ์น์ฌ์ดํธ ๊ตฌ์ถ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ๊ธฐ์กด ํ ๋ง์์๋ PHP ์ฝ๋๋ฅผ ์์ ํ๊ฑฐ๋ ํ ๋ง ํ์ผ์ ์ง์ ํธ์งํด์ผ ํ๋ ์์ ๋ค์ด ๋ธ๋ก ํ ๋ง์์๋ ๊ฐ๋จํ ๋๋๊ทธ ์ค ๋๋กญ ๋ฐฉ์์ผ๋ก ํด๊ฒฐ๋ฉ๋๋ค. ์ด๋ ์ฝ๋ฉ ์ง์์ด ์์ด๋ ๋๊ตฌ๋ ์ฝ๊ฒ ์์ ๋ง์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ํด์ฃผ๋ฉฐ, ์ฌ์ฉ์ ์นํ์ ์ธ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
๋ํ ๋ธ๋ก ํ ๋ง๋ โ์ฌ์ดํธ ์ ์ฒด ํธ์ง(Full Site Editing)โ ๊ธฐ๋ฅ์ ํตํด ํค๋, ํธํฐ, ํ์ด์ง ์ฝํ ์ธ ๋ฑ ์น์ฌ์ดํธ์ ๋ชจ๋ ์์ญ์ ํ๋์ ํตํฉ๋ ์ธํฐํ์ด์ค์์ ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ก ์ธํด ์๋ํ๋ ์ค ์ฌ์ฉ์๋ ๋ ์ด์ ํ ๋ง์ ์ ํ์ ์ฝ๋งค์ด์ง ์๊ณ , ์์ ์ ์ฐฝ์๋ ฅ์ ๋ฐํํด ์น์ฌ์ดํธ์ ๋ชจ๋ ๋ถ๋ถ์ ์์ ๋กญ๊ฒ ๋์์ธํ ์ ์์ต๋๋ค.
๊ฒฐ๊ตญ, ๋ธ๋ก ํ ๋ง๋ ์๋ํ๋ ์ค๊ฐ โ์์ ๋ก์ด ์น ๊ตฌ์ถโ์ด๋ผ๋ ๋ณธ๋์ ๋ชฉํ๋ฅผ ๋ ํจ๊ณผ์ ์ผ๋ก ๋ฌ์ฑํ ์ ์๊ฒ ํ๋ฉฐ, ๊ฐ์ธ ๋ธ๋ก๊ฑฐ๋ถํฐ ๋ํ ๊ธฐ์ ๊น์ง ๋ชจ๋ ์ฌ์ฉ์๊ฐ ๋น ๋ฅด๊ณ ํจ์จ์ ์ผ๋ก ์์ ๋ง์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๋ธ๋ก ํ ๋ง๋ฅผ ์ฑํํ๋ ๊ฒ์ ๋จ์ํ ์ ํ์ด ์๋, ์๋ํ๋ ์ค์ ๋ฏธ๋์ ๋ฐ๋ง์ถฐ ๋๊ฐ๋ ํ์ฐ์ ์ธ ๋ณํ์ ๋๋ค.
ํ์ด์ง๋ก ์ฌ์ฉํ ๋ช๊ฐ์ง ์ํ์ ์ค๋นํด๋ดค์ด์.
ํจํด์ ์กฐํฉํด์ ๋์ฑ ๋ฉ์ง ํ์ด์ง๋ฅผ ๋ง๋ค์ด ๋ณด์ธ์.
02.
700 ์ฌ๊ฐ์
ํด๋ฆญ ํ๋ฒ์ผ๋ก ์๋ฆ๋ค์ด ๋์์ธ
๋์์ธ ์ ๋ฌธ๊ฐ๊ฐ ๋ง๋ค์ด๋ธ 1,000๊ฐ ์ด์์ ๋์์ธ ํจํด์ ์ฌ์ฉํด์ ๋ช๋ถ์์ ๋์์ธ์ ๋๋ฑ ๋ง๋ค์ด ๋ผ ์ ์์ต๋๋ค. ์ด์ ์ปจํ ์ธ ์๋ง ์ง์คํ์ธ์. ๋์์ธ์ ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค. ์ ๋ชฉ, ๊ตฌ๋ถ์ , ์ด๋ฏธ์ง, ์ฌ๋ผ์ด๋ ๋ฑ ํ์ํ ์์์ ๋ง๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ๊ตฌ๋ถ๋์ด ๋ค์ํ ์ปจํ ์ธ ์ ์ฝ๊ฒ ๋์์ธ์ ์์ฑํ ์ ์๋๋ก ์ ์๋์์ต๋๋ค.















๋์์ธ ์ ๋ฌธ๊ฐ๊ฐ ๋ง๋ค์ด๋ธ 1,000๊ฐ ์ด์์ ๋์์ธ ํจํด์ ์ฌ์ฉํด์ ๋ช๋ถ์์ ๋์์ธ๋์์ธ ๋ธ๋ก ํจํด๋ง ๋ง๋ค๊ณ ์๊ฐํ์๋ฉด ์ญ์ญํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ฝ์ด ๋ธ๋ก์ ์คํ์ผ์ 300๊ฐ ์ด์ ์ ์ํด์ ์ธ์ ์ด๋๋๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค. ๋ฐ์ค ๊ทธ๋ฆผ์, ํํ ๋ณํ, ์ ๋๋ฉ์ด์ ๋ฑ ์ฌ๋ฌ๋ถ์ด ์๊ฐํ๋ ์น์ฌ์ดํธ๋ฅผ ์ ์ํ๋ ์์ ๋๋ถ๋ถ์ด ์ ์๋์ด ์์ผ๋ฉฐ ํธ๋ฆฌํ๊ฒ ๊ด๋ฆฌํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
03.
๋ชจ๋ ํ ๋ง๋ฅผ
ํ ๋ง๊ฐ ์ง๊ฒน๋ค๋ฉด ๋ค๋ฅธ ํ ๋ง๋ก ์ฑ! ๋ฐ๊ฟ๋ณด์ธ์.
ํฌ๋ก์ฐํ๋ค๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ํ๋ฌ๊ทธ์ธ์ ์ง์ ์ ์ํฉ๋๋ค. ๋ฐ๋ผ์ ํ ๋ง์ ์ฌ์ฉํ์ง ์๋ ๋ฌด์๋ฏธํ ํ๋ฌ๊ทธ์ธ์ ์ ์ํ์ง ์์ผ๋ฉฐ, ์ค์ ๋ก ์น์ฌ์ดํธ์ ์ฌ์ฉ๋ ๋งํ ํ๋ฌ๊ทธ์ธ๋ง ๊ฐ๋ณ๊ฒ ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ๊ฐ๋ฒผ์ด ์ฝ๋๋ฅผ ์๋ํฉ๋๋ค. ํ์ ์ฐฝ์ ๊ฒฝ์ฐ๋ ๋ค์ํ ๋ธ๋ก ์ค ํ๋์ ํด๋นํ์ง๋ง, ํ์ ์ฐฝ์ ํน๋ณํ ๊ธฐ๋ฅ์ด๋ผ๊ณ ์๊ฐํ์๋ ๋ถ๋ค๋ ๊ณ์๊ธฐ ๋๋ฌธ์ ๋ณ๋๋ก ์๊ฐํฉ๋๋ค.













ํ์ ์ฐฝ์ ๊ฐ๋จํ๊ฒ ํ ๊ธ ๊ธฐ๋ฅ์ ํ์ฉํด์ ๋นํ์ฑํ ํ ์ ์์ผ๋ฉฐ, ๋ด๋ถ์ ๋ค์ด๊ฐ๋ ๋ชจ๋ ๋์์ธ์ ์ง์ ์ ์ผ๋ก ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋๋ก ์ค๊ณ๋์ด ์์ต๋๋ค. ์ด ๋ชจ๋ ๊ธฐ๋ฅ๋ค์ ๋น์ฐํ ๋ธ๋ก ํ ๋ง๋ฅผ ๋ฐํ์ผ๋ก ํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์๋ํ๋์ค์ ๋ชจ๋ ๋ธ๋ก ๊ธฐ๋ฅ๋ค์ ํ์ฉํด์ ์๋ฆ๋ค์ด ํ์ ์ฐฝ์ ์ง์ ๊พธ๋ฐ ์ ์์ต๋๋ค. ์ด ํ ๋ง์์ ์ฌ์ฉ๋ ํ์ ์ฐฝ๋ ์ด ๋ธ๋ก์ผ๋ก ๋ง๋ ๊ธฐ๋ฅ์ ๋๋ค.
04.
ํ ๋ง ์คํ์ผ
์น์ฌ์ดํธ์ ํฌ๊ธฐ, ์์, ํฐํธ๋ฅผ ๋ณ๊ฒฝ
ํฌ๋ก์ฐํ๋ค๋ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํ๋ ๊ธฐ๋ฅ ์ธ์๋ ์น์ฌ์ดํธ์ ํฌ๊ธฐ, ๊ธ๋ก๋ฒ ์ฌ๋ฐฑ, ํฐํธ CDN ์ค์ , ์น์ฌ์ดํธ ์์ ๋ฑ ๋ค์ํ ์ค์ ์ ๋ณ๊ฒฝํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ํน์๋ผ๋ ์ ๋ชป ์ค์ ํ๋ค๋ฉด, ์ด๊ธฐ ๊ฐ์ผ๋ก ๋๋ฆด ์ ์๋ ๋ฆฌ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋ง ํธํ๊ฒ ์ผ๋ง๋ ์ง ๋ณ๊ฒฝ์ ํด๋ณด๊ณ ๋ง์์ ๋๋ ๋ชจ์ต์ผ๋ก ์ด์ํ ์ ์์ต๋๋ค.
์ด ๊ธฐ๋ฅ์ ๊ฐ ํ ๋ง๋ณ๋ก ๋ค๋ฅธ ์ค์ ๊ฐ์ ๊ฐ์ง๊ณ ์๊ธฐ ๋๋ฌธ์ ๊ทธ์ ๋ง๊ฒ ์กฐ๊ธ์ฉ ์์ ํ๋ฉด์ ๊ฐ์ฅ ๋ง์์ ๋๋ ๋ ์ด์์์ ์ ํํ์ค ์ ์์ต๋๋ค. ๋ํ Primary, Secondary, Base, Contrast ์์์ ๊ฐ๋จํ ๋ณ๊ฒฝํด์ ๊ฐ์กฐ๋๋ ์๊ณผ ๋ฐฐ๊ฒฝ์, ์ ๊ฒฝ์์ ์ํ์๋๋๋ก ์ค์ ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์์ ํ ๋ค๋ฅธ ์ฌ์ดํธ๋ฅผ ๊ตฌ์ฑํ ์๋ ์์ต๋๋ค.
05.
์์ฒด ์ ์๋
์ง์ ๊ฐ๋ฐ๋ 99%์ ํ๋ฌ๊ทธ์ธ
ํฌ๋ก์ฐํ๋ค๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ํ๋ฌ๊ทธ์ธ์ ์ง์ ์ ์ํฉ๋๋ค. ๋ฐ๋ผ์ ํ ๋ง์ ์ฌ์ฉํ์ง ์๋ ๋ฌด์๋ฏธํ ํ๋ฌ๊ทธ์ธ์ ์ ์ํ์ง ์์ผ๋ฉฐ, ์ค์ ๋ก ์น์ฌ์ดํธ์ ์ฌ์ฉ๋ ๋งํ ํ๋ฌ๊ทธ์ธ๋ง ๊ฐ๋ณ๊ฒ ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ๊ฐ๋ฒผ์ด ์ฝ๋๋ฅผ ์๋ํฉ๋๋ค. ํ์ ์ฐฝ์ ๊ฒฝ์ฐ๋ ๋ค์ํ ๋ธ๋ก ์ค ํ๋์ ํด๋นํ์ง๋ง, ํ์ ์ฐฝ์ ํน๋ณํ ๊ธฐ๋ฅ์ด๋ผ๊ณ ์๊ฐํ์๋ ๋ถ๋ค๋ ๊ณ์๊ธฐ ๋๋ฌธ์ ๋ณ๋๋ก ์๊ฐํฉ๋๋ค.

ํ์ ์ฐฝ์ ๊ฐ๋จํ๊ฒ ํ ๊ธ ๊ธฐ๋ฅ์ ํ์ฉํด์ ๋นํ์ฑํ ํ ์ ์์ผ๋ฉฐ, ๋ด๋ถ์ ๋ค์ด๊ฐ๋ ๋ชจ๋ ๋์์ธ์ ์ง์ ์ ์ผ๋ก ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋๋ก ์ค๊ณ๋์ด ์์ต๋๋ค. ์ด ๋ชจ๋ ๊ธฐ๋ฅ๋ค์ ๋น์ฐํ ๋ธ๋ก ํ ๋ง๋ฅผ ๋ฐํ์ผ๋ก ํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์๋ํ๋์ค์ ๋ชจ๋ ๋ธ๋ก ๊ธฐ๋ฅ๋ค์ ํ์ฉํด์ ์๋ฆ๋ค์ด ํ์ ์ฐฝ์ ์ง์ ๊พธ๋ฐ ์ ์์ต๋๋ค. ์ด ํ ๋ง์์ ์ฌ์ฉ๋ ํ์ ์ฐฝ๋ ์ด ๋ธ๋ก์ผ๋ก ๋ง๋ ๊ธฐ๋ฅ์ ๋๋ค.
06.
ํ์ดํฌ๊ทธ๋ผํผ
๋ฏธ๋๋ฉ๋ฆฌ์ฆ๊ณผ ํ์ดํฌ๊ทธ๋ผํผ์ ์กฐํฉ
ํฌ๋ก์ฐํ๋ค๋ ํ๋์ ์ธ ๋์์ธ์ ์ถ๊ตฌํ์ง๋ง, ๋ง์ ์ฌ์ฉ์๋ค์ด ์๊ตฌํ๋ ๋ธ๋ก์ ๋ํ ์๊ตฌ๋ฅผ ํด์ํด๋๋ฆฌ๊ณ ์ ๋ ธ๋ ฅํ๊ณ ์์ต๋๋ค. ์๋์ ์๊ฐํด๋๋ฆฌ๋ ํ์ดํฌ๊ทธ๋ผํผ์ ๋์์ด ๋๋ ์ ๋๋ฉ์ด์ ๋ธ๋ก๋ค์ด ๊ทธ ์ค ์ผ๋ถ์ด๋ฉฐ, ์์ผ๋ก๋ ์ฌ์ฉ์๋ค์ด ์ํ๋ ๋ธ๋ก์ด ์๋ค๋ฉด ๋์์์ด ๊ฐ๋ฐ์ ํด์ ์ ๋ณด์ผ ์์ ์ ๋๋ค.
๋ง์คํฌ ํ ์คํธ
ํ์ดํ ๋ธ๋ก, ๋ง์คํฌ ๋ธ๋ก, ๋งํดํ๊ทธ ๋ธ๋ก์ ๊ฐ๊ฐ์ ์คํ์ผ์ ๋ณ๋๋ก ์ค์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๊ฐ๊ณ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ํ์ด๋ฐ ๋๋ ์๋, ํ๋ฉด์ ์์๋๋ง ๋ณด์ฌ์ฃผ๊ฑฐ๋, ๊ทธ๊ฒ์ ๋ฐ๋ณตํ ์๋ ์์ต๋๋ค. ๋ง์ฐ์ค ์ปค์๋ฅผ ๋ณด์ฌ์ฃผ๊ฑฐ๋ ๋ ์ ์์ผ๋ฉฐ, ๊ธ์๊ฐ ์ญ์ ๋๋ ํ์ด๋ฐ๋ ์ค์ ํ ์ ์์ต๋๋ค. ease ๊ธฐ๋ฅ์ cubic ๊ฐ์ ๋ณตํฉ์ ์ธ ํ์ด๋ฐ์ ์ ๊ณตํ๋ฉฐ, ๋งํดํ๊ทธ ๋ธ๋ก์ ๊ธ์๊ฐ ํ๋ฌ๊ฐ๋ ์๊ฐ์ ์ค์ ํ ์ ์๋๋ก ์ ์๋์์ต๋๋ค. ์ด ๋ชจ๋ ๋ธ๋ก์ด ํฌ๋ก์ฐํ๋ค์ ํฌํจ๋์ด ์์ต๋๋ค.
07.
์ง๋์ ๊ด๊ณ
๊ฐ๋จํ ์ฝ๋๋ฅผ ์ ๋ ฅํ ์ ์๋ ์ปค์คํ ๋ธ๋ก
์ด ๋ ๋ธ๋ก์ ์น์ฌ์ดํธ์ ์ธ๋ถ ์ฝ๋๋ฅผ ์ ๋ ฅํ ๋ ํ์ฉํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๊ด๊ณ ๋ฅผ ๋ด๋๋ค๋๊ฐ, ์ธ๋ถ ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์ ํ๋ค๋๊ฐ ํ๋ ๊ธฐ๋ฅ์ผ๋ก ํ์ฉํ ์ ์์ต๋๋ค. ๊ตฌ๊ธ ์ ๋์ผ์ค๋ฅผ ๋ฃ๊ฑฐ๋ ํน์ ๋ค์ด๋ฒ ์ง๋๋ฅผ ๋ฃ๊ธฐ๋ ํฉ๋๋ค. ๊ด๊ณ ๋ถ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ฃ์ ์๋ ์๊ณ , ๋ค๋ฅธ ์ฌ์ดํธ๋ฅผ ํ๋ณดํ๋ ๋ฐฐ๋๋ฅผ ์ฝ์ ํ ์๋ ์์ต๋๋ค.
๊ฐ์ฅ ๋ณดํธ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ตฌ๊ธ ์ง๋์ ๋ชจ์ต์ ๋๋ค. API๋ฅผ ์ด์ฉํ์ง ์๊ณ ๊ฐ๋จํ๊ฒ IFRAME ์ผ๋ก ์ ๊ณตํ๋ฉด์ ์ฌ์ฉ์ ํธ์์ฑ์ ๋์์ต๋๋ค. ๋ณต์กํ ์ฝ๋๋ฅผ ์ฝ์ ํด์ผ ํ ๋๋ ํ์ฉํ ์ ์์ง๋ง ๋ธ๋ก ํ ๋ง๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ง์ ์์ ์ฝ๋๋ฅผ ์ ์ฅํ๋๊ฒ์ ๊ถ์ฅํ์ง๋ ์์ผ๋ ๊ธฐ๋ณธ์ ์ธ ์ฝ๋๋ง ์ฝ์ ํ์๋๊ฒ ์ข๊ฒ ์ต๋๋ค.
08.
์ ํ๋ธ ์์
์๋ฆ๋ค์ด ์ ํ๋ธ ์์์ ๋ฐฐ๊ฒฝ์ผ๋ก ํ์ฉ
์ด ๋ธ๋ก์ ์ ํ๋ธ ์์์ ๋ฐฐ๊ฒฝ์ผ๋ก ํ์ฉํ ์ ์๋ ๋ธ๋ก์ ๋๋ค. API๊ฐ ์๋ Iframe์ ํ์ฉํ๊ธฐ ๋๋ฌธ์ ๊ธฐ์ ์ ์ธ ์ถ๊ฐ ์์ ์ด ํ์ํ์ง ์์ต๋๋ค. ๋ํ ๋ฐ์ํ ์ฝ๋๋ฅผ ์ง์ํ๋๋ก ์ค๊ณ ํ๊ณ , ํ์ฌ์ด์ฆ๊ฐ ๋ ์ ์๋ ์ฝ๋ ํธ๋ฆญ๋ ์ผ๋ถ ๊ตฌํ๋์์ต๋๋ค. ์์์๊ฐ, ์ข ๋ฃ์๊ฐ ์ค์ ๋ฐ ํ์ฌ์ด์ฆ๋ก์ ๋ณํ์ ๋ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๋ํ ํ๋ฉด์ ๋น์จ์ ์ ํํ ์ ์๋ ์ต์ ์ ํตํด์ ์ํ๋ ๋ชจ์ต์ผ๋ก ์ ํ๋ธ ์์์ ๋ฐฐ๊ฒฝ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
์ต ์๋จ์ ์์์ผ๋ก ํ์ธํ ์ ์์ต๋๋ค โ
09.
๊ตฌ๊ธ ๋ฉํ ๋ฆฌ์ผ
๊ตฌ๊ธ ๋ฉํ ๋ฆฌ์ผ ์์ด์ฝ์ ์์ฝ๊ฒ ์ค์
Hellopanda ํ ๋ง๋ ์์ด์ฝ ํฐํธ๋ฅผ ๊ตฌ๊ธ ๋ฉํ ๋ฆฌ์ผ ์์ด์ฝ์ ์ฑํํ์ต๋๋ค. ๊ฐ์ฅ ์ ๋ขฐ๊ฐ ๊ฐ๋ ๊ตฌ๊ธ ์๋น์ค ์ค ํ๋์ ๋๋ค. ๋ฉํ ๋ฆฌ์ผ ์ฌ๋ณผ์ ๋ค์ํ ๋์์ธ ๋ณํ์ด ํฌํจ๋ ๋จ์ผ ๊ธ๊ผด ํ์ผ์ 3,271๊ฐ ์ด์์ ๊ธ๋ฆฌํ๋ฅผ ํตํฉํ ์ต์ ์์ด์ฝ์ ๋๋ค. ๊ธฐํธ๋ ์ธ ๊ฐ์ง ์คํ์ผ๊ณผ ๋ค ๊ฐ์ง ์กฐ์ ๊ฐ๋ฅํ ๊ฐ๋ณ ๊ธ๊ผด ์คํ์ผ(์ฑ์ฐ๊ธฐ, ๋ฌด๊ฒ, ๋ฑ๊ธ ๋ฐ ๊ดํ ํฌ๊ธฐ)๋ก ์ ๊ณต๋ฉ๋๋ค.
CDN ์ผ๋ก css๋ฅผ ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ ๊ตฌ๊ธ์ ์๋ฒ ์ํ์ ๋ฐ๋ผ ์๋ ์ฐจ์ด๊ฐ ์์ ์ ์๊ฒ ์ผ๋ ์๋์ ๋ง์ด ์ฐ๋ ํฐํธ๋ผ ์ฌ์ฉ์ ์ปดํจํฐ์ ์บ์ฑ ๋์ด ์์ ํ๋ฅ ์ด ๋์ ์๋๋ฉด์์๋ ์ด๋ค CDN ๋ณด๋ค ๋น ๋ฅผ ๊ฒ ๊ฐ์ต๋๋ค. ์ฌ์ฉ์ค์ธ ์ต์ ์ Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0 ์ ๋๋ค. ๋ฒ์ ์ ๋ฐ๋ผ ์์ด์ฝ์ด ๋์ค์ง ์์ ์ ์์ผ๋ ๊ทธ๋ฐ ๊ฒฝ์ฐ๋ ๊ฑฐ์ ์๋ค๊ณ ๋ณด๋๊ฒ ์ข์ต๋๋ค.
10.
๋ค์ํ ๋์์ธ์
์์น๋ฅผ ํํํ๊ณ ์ถ์ ๋ ๊ฐ๋จํ ํ์ฉ
์ด ๋ธ๋ก์ ๊ฐ์ธ์ ์ผ๋ก ์ ์ฐฉ์ด ๋ง์ด ๊ฐ๋ฅ ํ๋ก๊ทธ๋์ค ๋ฐ ๋ธ๋ก ์ ๋๋ค. ๋ง๋ํ, ์ํ ๋๊ฐ์ง์ ํ๋ก๊ทธ๋์ค๋ฐ๋ฅผ ์ง์ํฉ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ด ๋ธ๋ก์ 3๊ฐ์ง์ ์์ญ์ด ์๋๋ฐ ํ ์คํธ, ๊ฐ, ๋ฐฐ๊ฒฝ ์ด ๋ธ๋ก ์ธ๊ฐ์ ๋์์ธ์ ๋ชจ๋ ๋ณ๋๋ก ์ค์ ํ ์ ์์ต๋๋ค. ์๋ ๋ณด์ฌ๋๋ฆฌ๋ ๋์์ธ์ ๊ทธ ์ค ๋ช๊ฐ์ง์ด๋ฉฐ, ์๋ฐฑ, ์์ฒ๊ฐ์ง ์ด์์ ๋์์ธ์ ๋ง๋ค์ด๋ผ ์ ์๋ ํ์ฅ์ฑ์ด ๋ฐ์ด๋ ๋ธ๋ก์ ๋๋ค. ๋ชจ๋ ๋ณด์ฌ๋๋ฆฌ๊ณ ์ถ์๋ฐ ๊ทธ๋ด ์ ์๋๊ฒ ์์ฌ์ธ ๋ฐ๋ฆ์ ๋๋ค.
metus ultrices
metus ultrices
metus ultrices
Excellent
Good
Average
Below Average
Poor
ํ๋ก๊ทธ๋์ค๋ฐ๋ ๋ชจ๋ ์์ญ์ด SVG๋ก ๊ตฌ์ฑ๋๋ฉฐ, ๋ธ๋ก ํ ๋ง์ ์ค์ ์ผ๋ก ๋ฐ์ํ๋๋ก ์ค๊ณ ๋์์ต๋๋ค. ๋๋ฌธ์ ํ๋ฉด์ด ์ปค์ง๊ฑฐ๋ ์์์ ธ๋ ๋ชจ์ต์ ๊ทธ๋๋ก ์ ์งํ์ฌ ๋์์ธ์ ํด์น์ง ์๋ ๋ฐฑํฐํ ๋์์ธ์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.
11.
๊ณ ๊ธ ์ฌ์ฉ์๋ฅผ ์ํ
๋์์ด๋๋ค์ด ์ข์ํ๋ ํ ๊ธํ ๋ธ๋ก
์ด ๋ธ๋ก์ ๋ธ๋กํ ๋ง์ ๋จ์ ์ ๋ณด์ํ ์ ์๋ ๋ช๊ฐ ์๋๋ position ์ ์ค์ ํ ์ ์๋ ๋ธ๋ก์ ๋๋ค. Block ํ์ ์ผ๋ก ์ค์ ์ ํ ์ ์์ง๋ง ํ ๊ธ ์ปจํ ์ธ ํน์ฑ์ ํฌ์ง์ ์ ์ค์ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์๋ ๋์์ธ์ Footer ์์ ์์ฃผ ์์ฉ๋๋ ํจ๋ฐ๋ฆฌ์ฌ์ดํธ๋ก ์ด๋ํ ์ ์๋ ํ ๊ธ ๋ธ๋ก ์ด๋ฉฐ, ๊ฐ๋จํ ์์์ผ ์ ์์ต๋๋ค.
์ด ๋ธ๋ก์ ๋ฉ๋ด๋ฅผ ๊ตฌ์ฑํ ์๋ ์์ผ๋ฉฐ, ๋๋๋ก Tooltip์ ์ญํ ์ ์ํํ๊ธฐ๋ ํฉ๋๋ค. ์๋์ ํ์ฅ์ฑ์ด ๋์ ๋ธ๋ก์ธ ๋งํผ ๋์์ด๋๋ค์ด ๋๋ฌด๋ ์ข์ํ ์ ๋ฐ์ ์๋ ์ปค์คํ ๋ธ๋ก์ ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฉ์ธ ์ปจํ ์ธ , ์ค๋ฒ๋ ์ด ์ปจํ ์ธ ๋์์ญ์ผ๋ก ๋๋์ด์ ธ ์์ผ๋ฉฐ, ํฌ์ง์ ์ด ์ค์ ๋ ๊ฒฝ์ฐ ๋ซ๊ธฐ ๋ฒํผ์ ํจ๊ป ์ ๊ณตํฉ๋๋ค. ( ์ญ์ ํ์ ๋ ๊ด์ฐฎ์์ ) ๊ทธ๋ฆฌ๊ณ ์ค๋ฒ๋ ์ด์ ๋ฐฉํฅ์ ์ค์ ํ ์ ์๋ ์ต์ ๊ณผ ์ ๋๋ฉ์ด์ ์ ์ค์ ํ ์ ์๋ ์ต์ ๋ ํจ๊ป ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋ค์ํ ๋์์ธ์ผ๋ก ํ์ฉํ ์ ์์ต๋๋ค. ํฌ๋ก์ฐํ๋ค ํ ๋ง์์๋ ๋ช๊ฐ์ง ํ ๋ง๋ ์ด ๋ธ๋ก์ ์ด์ฉํด์ ์๋จ์ ํฐ ๋ฉ๋ด๋ฅผ ๊ตฌ์ฑํ์ต๋๋ค.
๋ง์ฐ์ค ์ค๋ฒ, ๋ง์ฐ์ค ํด๋ฆญ ๋ฑ ์ธํฐ๋ ์ ์ ์ ํํ ์ ์๊ณ , Fade In, Slide up, Zoom in ๋ฑ ๋ค์ํ ํธ๋์ง์ ํจ๊ณผ๋ฅผ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋์์ด๋ ๋ถ๋ค์ด ํ์ฉํ์๋ฉด ๊น์ง ๋๋ ๋งํผ์ ํจ๊ณผ๋ฅผ ๋ผ ์ ์์ต๋๋ค.
12.
ํ์ฅํ๋
ํ์ฅ์ฑ์ด ๋ฌด๊ถ๋ฌด์งํ ์์ฝ๋์ธ
์ด ๋ธ๋ก์ ๋ง์ ์ปจํ ์ธ ๋ฅผ ์จ๊ฒจ์ ์น์ ๋ณ๋ก ๋ณด์ฌ์ค ์ ์๋ ์์ฝ๋์ธ ๋ธ๋ก ์ ๋๋ค. ๊ณ ์ ๋ ์คํ์ผ์ด ์๋ ๋ชจ๋ ๋ธ๋ก ๋์์ธ์ ํ์ฉํ ์ ์๋ ๋ธ๋ก์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. QNA, ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ์ธ์๋ ์ ํ ์๊ฐ์๋ ํ์ฉ๋ ์ ์๋ ๋ง๋ฅํ ๋ธ๋ก์ ๋๋ค. ์ด๋ค ์ปจํ ์ธ ๋ ์ง ์์ ๋กญ๊ฒ ํ์ฉํ ์ ์์ต๋๋ค.
Q
๊ธฐ์ ์ ์ฃผ์ ํน์ง์ ๋ฌด์์ธ๊ฐ์?
A
ํ ํฌ ๊ธฐ์ ์ ์ฃผ๋ก ์ํํธ์จ์ด, ํ๋์จ์ด, ์ธ๊ณต์ง๋ฅ, ํด๋ผ์ฐ๋ ์ปดํจํ , ๋ฐ์ดํฐ ๋ถ์ ๋ฑ ๊ธฐ์ ์ค์ฌ์ ์ ํ๊ณผ ์๋น์ค๋ฅผ ๊ฐ๋ฐ, ํ๋งคํ๊ฑฐ๋ ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ด์ํ๋ ๊ธฐ์ ์ ๋๋ค. ๊ธฐ์ ํ์ ๊ณผ ์ฐ๊ตฌ๊ฐ๋ฐ์ ๋ง์ ์์์ ํฌ์ํ๋ ๊ฒ์ด ํน์ง์ ๋๋ค. ๋น์ฆ๋์ค์ ๋ฐ๋ก ์ ์ฉ ๊ฐ๋ฅํ ํด๋ผ์ฐ๋ ์๋น์ค ๋น์ฆ๋์ค์ ๊ธฐ๋ฐ์ด ๋๋ ์ธํ๋ผ๋ถํฐ ๊ณ ๊ฐ์ด ํ์๋ก ํ๋ ๋ค์ํ ๊ธฐ์ ์ ํด๋ผ์ฐ๋ ์๋น์ค๋ก ์ ๊ณตํฉ๋๋ค.
Q
ํ ํฌ ๊ธฐ์ ๋ค์ ์ด๋ป๊ฒ ์์ต์ ์ฐฝ์ถํ๋์?
A
ํ ํฌ ๊ธฐ์ ์ ์์ต ๋ชจ๋ธ์ ๋ค์ํฉ๋๋ค. ์ํํธ์จ์ด๋ ์๋น์ค์ ๋ํ ๊ตฌ๋ ๋ชจ๋ธ, ์ ํ ํ๋งค, ๊ด๊ณ ์์ต, ๋ฐ์ดํฐ ๋ถ์ ์๋น์ค, ํ๋ซํผ ์์๋ฃ ๋ฑ ๋ค์ํ ๋ฐฉ์์ผ๋ก ์์ต์ ์ฐฝ์ถํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, SaaS(Software as a Service) ๋ชจ๋ธ์ ํตํด ์ ๊ธฐ ๊ตฌ๋ ๋ฃ๋ฅผ ๋ฐ๊ฑฐ๋, ํ๋์จ์ด ํ๋งค๋ก ์ง์ ์์ต์ ์ฌ๋ฆด ์๋ ์์ต๋๋ค.
Q
ํ ํฌ ๊ธฐ์ ์์ ์ค์ํ ๊ธฐ์ ํธ๋ ๋๋ ๋ฌด์์ธ๊ฐ์?
A
ํ์ฌ ํ ํฌ ๊ธฐ์ ์์ ์ฃผ๋ชฉ๋ฐ๋ ๊ธฐ์ ํธ๋ ๋๋ก๋ ์ธ๊ณต์ง๋ฅ(AI)๊ณผ ๋จธ์ ๋ฌ๋, ๋น ๋ฐ์ดํฐ, ํด๋ผ์ฐ๋ ์ปดํจํ , ์ฌ๋ฌผ์ธํฐ๋ท(IoT), 5G ํต์ , ๋ธ๋ก์ฒด์ธ, ๊ทธ๋ฆฌ๊ณ ํํ ์ปดํจํ ๋ฑ์ด ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ๋ค์ ๊ธฐ์ ์ ์ ํ ๋ฐ ์๋น์ค ํ์ ์ ๊ฐ์ํํ๋ฉฐ, ์์ฅ์์์ ๊ฒฝ์๋ ฅ์ ๋์ด๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค.
Q
ํ ํฌ ๊ธฐ์ ์ ์ด๋ค ๋ฐฉ์์ผ๋ก ์ธ์ฌ๋ฅผ ์ฑ์ฉํ๊ณ ๊ด๋ฆฌํ๋์. ์๋ ค์ฃผ์ธ์.
A
ํ ํฌ ๊ธฐ์ ์ ์ฐ์ํ ๊ธฐ์ ๋ ฅ์ ๊ฐ์ง ์ธ์ฌ๋ฅผ ํ๋ณดํ๊ธฐ ์ํด ๋งค์ฐ ๊ฒฝ์์ ์ธ ์ฑ์ฉ ์ ๋ต์ ์ฌ์ฉํฉ๋๋ค. ํนํ ๊ฐ๋ฐ์, ๋ฐ์ดํฐ ๊ณผํ์, ์์ง๋์ด์ ๊ฐ์ ๊ธฐ์ ์ง๊ตฐ์ ์ธ์ฌ๋ฅผ ์ฑ์ฉํ๋๋ฐ ์ง์คํ๋ฉฐ, ์ ์ฐํ ๊ทผ๋ฌด ํ๊ฒฝ, ๋์ ์ฐ๋ด, ์คํก์ต์ ๋ฑ ๋งค๋ ฅ์ ์ธ ๋ณด์ ์ฒด๊ณ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ํ, ํ์ ์ ์ธ ๊ธฐ์ ๋ฌธํ์ ์ง์์ ์ธ ํ์ต ๊ธฐํ๋ฅผ ํตํด ์ง์๋ค์ ์ฑ์ฅ์ ์ง์ํฉ๋๋ค.
Q
ํ ํฌ ๊ธฐ์ ๋ค์ด ์ง๋ฉดํ๋ ์ฃผ์ ๋์ ๊ณผ์ ๋ ๋ฌด์์ธ๊ฐ์?
A
ํ ํฌ ๊ธฐ์ ๋ค์ด ์ง๋ฉดํ๋ ์ฃผ์ ๋์ ๊ณผ์ ๋ก๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ๊ธฐ์ ํ๊ฒฝ์ ์ ์ํ๋ ๊ฒ, ์ฌ์ด๋ฒ ๋ณด์ ๋ฌธ์ , ๋ฐ์ดํฐ ํ๋ผ์ด๋ฒ์ ๋ฐ ๊ท์ ์ค์, ๊ทธ๋ฆฌ๊ณ ๊ธ๋ก๋ฒ ๊ฒฝ์์ด ์์ต๋๋ค. ํนํ ๋ฐ์ดํฐ ๋ณดํธ์ ๊ด๋ จ๋ ๋ฒ์ ๊ท์ ๋ค์ด ๊ฐํ๋จ์ ๋ฐ๋ผ, ๊ฐ๊ตญ์ ๋ฒ๋ฅ ์ ์ค์ํ๋ ๊ฒ์ด ํฐ ๊ณผ์ ๊ฐ ๋๊ณ ์์ต๋๋ค.
Q
ํ ๋ง๋ฅผ ๊ตฌ๋งคํ๋ฉด ๋ชจ๋ ํ ๋ง๋ฅผ ์ฌ์ฉํ ์ ์๋์?
A
ํ ํฌ ๊ธฐ์ ๋ค์ด ์ง๋ฉดํ๋ ์ฃผ์ ๋์ ๊ณผ์ ๋ก๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ๊ธฐ์ ํ๊ฒฝ์ ์ ์ํ๋ ๊ฒ, ์ฌ์ด๋ฒ ๋ณด์ ๋ฌธ์ , ๋ฐ์ดํฐ ํ๋ผ์ด๋ฒ์ ๋ฐ ๊ท์ ์ค์, ๊ทธ๋ฆฌ๊ณ ๊ธ๋ก๋ฒ ๊ฒฝ์์ด ์์ต๋๋ค. ํนํ ๋ฐ์ดํฐ ๋ณดํธ์ ๊ด๋ จ๋ ๋ฒ์ ๊ท์ ๋ค์ด ๊ฐํ๋จ์ ๋ฐ๋ผ, ๊ฐ๊ตญ์ ๋ฒ๋ฅ ์ ์ค์ํ๋ ๊ฒ์ด ํฐ ๊ณผ์ ๊ฐ ๋๊ณ ์์ต๋๋ค.
์์ฝ๋์ธ ๋ธ๋ก์ ๋จ์ผ ๋ธ๋ก, ๋ค์ค ๋ธ๋ก์ผ๋ก ์ด๋ฆด ์ ์์ผ๋ฉฐ ์ด๋ฆฐ ์ํ๋ก ์์ํ ์ ์์ต๋๋ค. ๋ํ ์ ๋๋ฉ์ด์ ์ ์๋๋ฅผ ์ค์ ํ ์ ์์ด์ ๋ค์ํ๊ฒ ํ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. ๋ํ ๊ฐ ์์ฝ๋์ธ ์์ดํ ์ ํ ๊ธ ์์ด์ฝ์ ๋ณํ์ํ๋ฅผ ์ค์ ํ ์ ์์ผ๋ฉฐ, ๋ง์ฐ์ค ์ค๋ฒ, ํ์ฑํ ๋ฑ ์ํ์ ๋ฐ๋ฅธ ์์ ๋์์ธ๋ ์์ธํ๊ฒ ์ค์ ์ด ๊ฐ๋ฅํฉ๋๋ค.
์ด ๋ธ๋ก์ ์ ๋ง ๋ค์ํ ๋ถ์ผ์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ๋ถ์ ์ฐฝ์์ ์ธ ์๊ฐ์ด ์ด๋ ค ์๋ค๋ฉด ์ ๋ง ๋ฌด๊ถ๋ฌด์งํ ๋์์ธ์ผ๋ก ์ค์ ํ ์ ์๋ ์ ์ฐธ๊ณ ํ์๊ธธ ๋ฐ๋๋๋ค. ์๋์ค์ค !
13.
๊ธฐ๋ณธ์ ๊ธฐ๋ณธ
๊ฐ๋จํ๊ฒ ์ค์ ์ด ๊ฐ๋ฅํ ํญ ๋ฉ๋ด
์ด ๋ธ๋ก์ ์น์ฌ์ดํธ์์ ๊ฐ์ฅ ํํ๊ฒ ์ฌ์ฉ๋๋ ๋ฉ๋ด์ค์ ํ๋์ธ ํญ ๋ฉ๋ด ๋ธ๋ก ์ ๋๋ค. ํญ ๋ฒํผ๊ณผ ์ปจํ ์ธ ์์ญ์ ์์น๋ ์์ ๋กญ๊ฒ ๊ตฌ์ฑํ์ค ์ ์๋๋ก ๋ธ๋ก ํ ๋ง์์ ์์ ๋กญ๊ฒ ๊ตฌ์ฑ์ด ๊ฐ๋ฅํฉ๋๋ค. ํน์ ๋์์ธ์ ๊ท์๋์ง ์๋ ์์ ๋ง์ ํญ ๋ฉ๋ด๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋ฐ์ํ์ผ๋ก ๊ตฌ์ฑํ ์๋ ์๊ณ , ๋จ์ํ๊ฒ๋ ๊ฐ๋ฅํฉ๋๋ค.
๋ ๋์ ๊ฐ์น
์ ํด๋ชฐ, ์ค๋งํธ์คํ ์ด ์ํ์ ์์ฝ๊ฒ ์ฐพ๋ ๊ตญ๋ด ์ต๋ ์ผํ๊ฒ์ ํ๋ซํผ
์ฌ๋ฐ๋ฅธ ๊ด๊ณ ํ์ฑ
๊ฒฝ์์ ์ถ์งํ๋ ํต์ฌ ๋ถ์๋ก, ๋ดโง์ธ๋ถ ์ดํด๊ด๊ณ์์ ์์ํ๋ฅผ ํฌํจํ ์ ์ฌ์ ๊ณผ์ ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
๋ฆฌ์คํฌ ๊ด๋ฆฌ
๋ฐฉ๋ํ ๋์ ์ ์ฒด์ ๋์งํธ ํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ํ ์ ์๋ ๋ ์์ ๊ธฐ์ ์ ๋ด์ฌํํ๊ณ ์์ต๋๋ค.
๊ฒฝ์ 7๋ ์ ๋ต
์๋น์ค ๋ก๋ด, ์์จ์ฃผํ, AR ๋ฑ ๋ค์ํ ์๋น์ค์ ํ์ฉํ ์ ์์ต๋๋ค.
๋ํ ํญ ๋ฉ๋ด์ ๋ง์ฐ์ค ์ค๋ฒ, ํ์ฑํ ์ํ์ ๋์์ธ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๋ง ๋ค์ํ ๋ชจ์ต์ผ๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค. ๋ชจ๋ ๊ฒ์ ์ฌ๋ฌ๋ถ์ ์์๋ ฅ์ ๋ฐ๋ผ ์ฒ์ฐจ๋ง๋ณ์ ๋์์ธ์ด ํ์ด๋๋๋ก ๋์ด ์์ต๋๋ค.
14.
๋ ๋ง์ ๊ธฐ๋ฅ
ํฌ๋ก์ฐํ๋ค ํ ๋ง๋ ์ด๊ฒ ๋์ด ์๋๋๋ค.
์ด ํ์ด์ง ํ๋๋ก ๋ชจ๋ ๊ธฐ๋ฅ์ ์๊ฐํ ์ ์์ ์ ๋๋ก ๋ค์ํ ๊ธฐ๋ฅ๋ค์ด ์์ต๋๋ค.
Hellopanda ํ ๋ง๋ ํ์ด์ง ๋์์ธ, ํฌ์คํ ์ ์ต์ ํ๋ ํ ๋ง ์ ๋๋ค. 1,000์ฌ๊ฐ๊ฐ ๋๋ ํจํด์ผ๋ก ์์ ๋กญ๊ฒ ์์๋ค์ ๋์์ธํ ์ ์์ผ๋ฉฐ ์์ฝ๊ฒ ํจํด์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ๋ํ ์ฝ์ด ๋ธ๋ก์ ์คํ์ผ์ ํ์ฅํด์ ๋์ฑ ์์ธํ ๋์์ธ ์ค์ ๊น์ง ํ ์ ์๋๋ก ์ ์๋์์ต๋๋ค. ์๋ํ๋์ค์ ๋ธ๋ก ํ ๋ง๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ์๋์์ผ๋ฉฐ, ๋ธ๋ก ํ ๋ง๋ ์ฐจ์ธ๋ ์น ์ ์ ๋ฐฉ์์์ ๋์ํ๊ณ ๊ทธ์ ๋ฐ๋ฅธ ๊ฐ๋ฐ์ ํจ๊ป ์ด์ด๋๊ฐ ๊ฒ ์ ๋๋ค.
์ฐ๋ฆฌ ํ ๋ง ๊ฐ๋ฐ์๋ค์ 20๋ ์ด์์ ๋ฐฑ, ํ๋ก ํธ์๋ ๊ฒฝ๋ ฅ์ ๊ฐ์ง ์ ๋ฌธ๊ฐ ์ค์ ์ ๋ฌธ๊ฐ ์ ๋๋ค. ์๋ํ๋์ค๋ฅผ ๋ง๋๋ฉด์ ๋ ๊ฐ๋ฅผ ๋ฌ๊ณ ๋ ๋ฉ์ง๊ณ ๋ ๊ฐ๋ ฅํ ๋์์ธ ํด์ ์ ์ํ๊ณ ์์ผ๋ฉฐ Hellopanda ํ ๋ง๋ ๋์ฑ ๋ ๋ฐ์ ํด ๋๊ฐ ๊ฒ์ ๋๋ค.
Hellopanda ํ ๋ง๋ ๋ชจ๋ ์ฝ๋๊ฐ ๋ฐ์ํ์ผ๋ก ์ ์๋์ด ์์ต๋๋ค. ์๋ํ๋์ค์ ๊ธฐ๋ณธ์ ์ธ ์์คํ ์ ํค์น์ง ์๋ ์ ์ผ๋ก ๊ฐ๋ฐ๋์์ผ๋ฉฐ, ์กฐ๊ธ ๋ ์ธ๋ถํ๋ ๋ฐ์ํ ์ฝ๋๋ค์ ์ง์ํ๊ณ ์์ต๋๋ค. 1600px, 1400px, 1280px, 800px, 600px ์ ๊ธฐ์ค์ผ๋ก ๊ฐ์ฅ ์๋ฒฝํ ๋ฐ์ํ ์ฝ๋๋ฅผ ์ฌ๋ฌ๋ถ๋ค์๊ฒ ๊ฒฝํ์์ผ ๋๋ฆด ๊ฒ ์ ๋๋ค.
๋์ผ๋ก ์ ํฌ๋ ํ ๋ง ๊ฐ๋ฐ์ ์ฌ๊ธฐ์ ๋ฉ์ถ์ง ์๊ณ ์ง์์ ์ผ๋ก ๋ ํธ๋ฆฌํ ์ ๋์จ ๊ธฐ๋ฅ๋ค์ ์ ์ํ ์์ ์ ๋๋ค. ํ์ด์ง ์์ฑ์ ์์ฝ๊ฒ ํ๋๊ฒ์ ์ฃผ์์ ์ ๋์ด ํค๋, ํธํฐ, ํจ๋, ์ฌ์ด๋๋ฐ ๋ฑ์ ์์ฝ๊ฒ ๋ณ๊ฒฝํ ์ ์๋ ํจํด ์ญ์ ๊ฐ๋ฐ ์์ ์ ๋๋ค. ์ด์ ํ ๋ง๋ ํ๋๋ง ์์ผ๋ฉด ๋ฉ๋๋ค. Hellopanda ํ ๋ง๊ฐ ์ฌ๋ฌ๋ถ์ ์๋ํ๋์ค๋ฅผ ๋์ฑ ์ฆ๊ฒ๊ฒ ๋ง๋ค์ด ์ค ๊ฒ ์ ๋๋ค.
์ฝ์ด ๋ธ๋ก์ ๋ํ ์ถ๊ฐ ์คํ์ผ ์ ์
๊ธ์ด์ด, ํ๊ทธ, ์นดํ ๊ณ ๋ฆฌ, ๋ ์ง, ๋ฌธ๋จ, ๋ชฉ๋ก, ์ด๋ฏธ์ง, ์ปค๋ฒ, ์ฟผ๋ฆฌ ๋ฑ ๊ฑฐ์ ๋๋ถ๋ถ์ ์ฝ์ด ๋ธ๋ก์ ๋ํ ์ปค์คํ ์คํ์ผ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ธฐ๋ฅ์ ์๋ํ๋์ค์ ๊ธฐ๋ณธ ์คํ์ผ๊ณผ ๊ฒฐํฉํด์ ๊ฐ๋ ฅํ๊ณ ๋ค์ํ ๋์์ธ ์ค์ ์ ํ ์ ์๋๋ก ๋์ต๋๋ค. ์ฌ์ง์ด ๋ฌธ๋จ ๋๋๊ธฐ๋ ๋์์ธ์ ํ ์ ์๋๋ก ๊ผผ๊ผผํ๊ฒ ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ๋๋์ง ์๋์?
๋ฐ์ค ๊ทธ๋ฆผ์ ์คํ์ผ ์ค์ ( Box Shadow Style )
๊ทธ๋ฃนํ ๋ธ๋ก์์๋ ๋ฐ์ค ๊ทธ๋ฆผ์ ์คํ์ผ์ ์ ๊ณตํฉ๋๋ค. ์์น๋ฅผ ์์ธํ๊ฒ ์ค์ ํ ์ ์๋๋ก ๋์ด ์์ผ๋ฉฐ, ์ถ์ฒํ๋ ๊ทธ๋ฆผ์ ์คํ์ผ๋ ํจ๊ป ์ ๊ณตํ๊ณ ์์ต๋๋ค. ์ธ, ๋ด๋ถ, X – Y ์ถ, ๋ฒ์ง, ํฌ๊ธฐ ๋ฑ ๋ฐ์ค ๊ทธ๋ฆผ์์ ์์ธํ ์ค์ ์ ์ปจํธ๋กค ํด ๋ณด์ธ์.
ํํ ๋ณํ ์คํ์ผ ์ค์ ( Transform Style )
์ด ๊ธฐ๋ฅ์ ๋ง๊ฐํฉ๋๋ค. ์์์ ํํ๋ฅผ ๋ณํํ ์ ์๋ Transform ์์ฑ์ ์ปจํธ๋กค ํ๋๋ก ์ ์๋์ด ์์ต๋๋ค. ํ์ (Rotate), ํฌ๊ธฐ (Scale X, Y), ๋คํ๊ธฐ (Skew X, Y), ์์น % (Translate X, Y) ๋ค๊ฐ์ง ์์ฑ์ ์์ธํ๊ฒ ์ค์ ํ ์ ์์ผ๋ฉฐ, ์์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก % ๋จ์๋ก ์ค์ ์ด ๊ฐ๋ฅํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ค์ํ๊ฑด PC, TABLET, MOBILE ์์ ์ด ์์ฑ์ด ๋ฌธ์ ๊ฐ ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ, ์ํ๋ ๋๋ฐ์ด์ค ์์๋ง ํํ๋ฅผ ๋ณํํ๋ ์ต์ ์ ์ ๊ณตํด์ ์์ฃผ ํธ์ํ๊ฒ ๋์์ธ UI ์์ ์ ํ ์ ์๋๋ก ๋์ด ์์ต๋๋ค.
์๋ฆฌ๋จผํธ ์ ๋๋ฉ์ด์ ( Element Animation )
์ด ๊ธฐ๋ฅ์ ๋ง๊ฐํฉ๋๋ค. ์์์ ํํ๋ฅผ ๋ณํํ ์ ์๋ Transform ์์ฑ์ ์ปจํธ๋กค ํ๋๋ก ์ ์๋์ด ์์ต๋๋ค. ํ์ (Rotate), ํฌ๊ธฐ (Scale X, Y), ๋คํ๊ธฐ (Skew X, Y), ์์น % (Translate X, Y) ๋ค๊ฐ์ง ์์ฑ์ ์์ธํ๊ฒ ์ค์ ํ ์ ์์ผ๋ฉฐ, ์์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก % ๋จ์๋ก ์ค์ ์ด ๊ฐ๋ฅํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ค์ํ๊ฑด PC, TABLET, MOBILE ์์ ์ด ์์ฑ์ด ๋ฌธ์ ๊ฐ ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ, ์ํ๋ ๋๋ฐ์ด์ค ์์๋ง ํํ๋ฅผ ๋ณํํ๋ ์ต์ ์ ์ ๊ณตํด์ ์์ฃผ ํธ์ํ๊ฒ ๋์์ธ UI ์์ ์ ํ ์ ์๋๋ก ๋์ด ์์ต๋๋ค.
ํฌ๋ช ๋ ์ค์ ( Opacity Style )
๋๋ถ๋ถ์ ์์์ ํฌ๋ช ๋๋ฅผ ์ค์ ํ ์ ์๋ ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ํฌ๋ช ๋๋ ์์น๋ก ์ง์ ํ ์๋ ์์ง๋ง ์ถ์ฒํ๋ ํฌ๋ช ๋๋ฅผ ๋จ๊ณ๋ณ๋ก ์ง์ ํด์ ์ข ๋ ์์ฝ๊ฒ ์์๋ค์ ํฌ๋ช ๋๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ํ์ง๋ง ํฌ๋ช ๋์ธ ๋งํผ ๋๋ฌด ๋ง์ด ์ฐ๋ฉด ์๋๊ฒ ์ฃ ?
๋๋กญ์บก ์คํ์ผ ์ค์ ( DropCap Style )
์๋ํ๋์ค๋ ๊ธฐ๋ณธ์ ์ธ ๋๋กญ์บก ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค. ํ์ง๋ง ๊ทธ ์ค์ ์ด ์กฐ๊ธ ๋ถ์กฑํด์ ์ปค์คํ ํ ์ ์๋ ์คํ์ผ์ ์ถ๊ฐํ์ต๋๋ค. ๋๋กญ์บก์ ๋๋ฌธ์, ์๋ฌธ์, ๊ธ์์ ํฌ๊ธฐ, ๊ธ์์ ๋๊ป ๊น์ง ์์ธํ๊ฒ ์ค์ ํ ์ ์์ผ๋ฉฐ, ์ด ๊ธฐ๋ฅ์ ํฌ์คํ ์ ๋ง์ด ํ์๋ ๋ถ๋ค๊ป ๋งค์ฐ ์ ์ฉํ ๊ธฐ๋ฅ์ด ๋ ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋ค.
์คํฌ๋กค ์ ๋๋ฉ์ด์ ( Scroll Animation )
์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ( AOS ) ์ ๊ฒฐํฉํด์ ์ฌ์ฉ์๊ฐ ์์ฝ๊ฒ ํ๋ฉด ์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ ์ค์ ํ ์ ์๋๋ก ์ ์๋์์ต๋๋ค. ๋ฐ๋ ํ์, ์ฌ์ ๋ฐ๋ณต ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ ๋ฐ๋ ๋๋ ์ด, ๋ฐ๋ ์๊ฐ, ๋ฐ๋ ์์ ์ ์ปจํธ๋กค ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ํ๋ ๋์์ธ์ ๋ง๋๋๋ฐ ํฐ ๋์์ด ๋ ๊ฒ ์ ๋๋ค. ํนํ One Page Website ํน์ Page ๋ฅผ ์ ์ํ ๋ ์ ๋ง 5๋ถ๋ง์ ์ปจํ ์ธ ๋ฅผ ๋ง๋ค์ด๋ด๋ ๋ง๋ฒ์ ๊ฒฝํํ๊ฒ ๋ ๊ฒ์ ๋๋ค.
๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ปจํธ๋กค ( Media Query )
๋ค์ ์์ํ ์ ์๋ ๊ธฐ๋ฅ์ผ์ง๋ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์ด ๊ธฐ๋ฅ์ pc, mobile, tablet ์ ํ๊ฒฝ์์ ๋ณด์ด๊ณ ์ถ์ ํ๊ฒฝ๋ง ์ ํํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค. ์ธ์์๋ ๋ค์ํ ๋์์ธ์ด ์กด์ฌํ๋ฏ๋ก ์ด ๊ธฐ๋ฅ์ด ํน๋ณํ ํ์ํ์ ๋ถ์ด ์์ ์ ์๋ค๊ณ ์๊ฐํ์ต๋๋ค. ์ฌ์ค ์ด ํ ๋ง๋ ๋ช๋ช ์์ญ์ ์ด ๊ธฐ๋ฅ์ด ์ ์ฉ๋์ด ์์ต๋๋ค. ๋ชจ๋ฐ์ผ์์ ๊ฐ๋ก, ์ธ๋ก, ํจ๋ฉ์ ์ด๊ธฐํ ํ๊ฑฐ๋ ๋ชจ๋ฐ์ผ์์๋ง ๊ฐ๋ก๋ฅผ ์ต๋๋ก ํค์ฐ๋ ์ต์ ๋ ์ถ๊ฐ ๋์ด ์์ต๋๋ค.
์ถ๊ฐ ์คํ์ผ ( Padding, Margin, Border, Gap )
์๋ํ๋์ค์ ๋ช๊ฐ์ง ๋ธ๋ก์๋ ํจ๋ฉ์ด๋ ๋ง์ง, ๋ณด๋๊ฐ ํ์ํ ๊ฒฝ์ฐ๊ฐ ์๋๋ฐ ๊ธฐ๋ณธ ์ค์ ์๋ ํฌํจ๋์ด ์์ง ์์์ ๋ถํธํ ๊ฒฝ์ฐ๊ฐ ์ข ์ข ์์ต๋๋ค. ์๋ํ๋์ค๊ฐ ์ ๋ฐ์ดํธ ๋๋ฉด์ ์ด ๊ธฐ๋ฅ์ด ์์ฒด์ ์ผ๋ก ์ถ๊ฐ๋ ์ ์๊ฒ ์ง๋ง ๊ทธ ์ ๊น์ง๋ ์ฆ๊ฒ๊ฒ ์ฌ์ฉํ ์ ์๋ ๊ธฐ๋ฅ์ด ๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋์์ธ์ ๊ทธ๋ ๊ฒ ์ฌ์ธํ๋๊น์.




