โจ ์๋ ๋งํฌ์์ ํ๋ก์ ํธ ๋ฐ๋ชจ ํ์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.
minzy.studio
awwwards ์ฌ์ดํธ๋ฅผ ๋ณด๋ค๋ณด๋ฉด, ์ธํฐ๋ํฐ๋ธํ๊ณ ์ฐฝ์์ ์ธ ์น ๋์์ธ๋ค์ด ๋ง๋ค. ํน์ awwwards๋ผ๋ ์ฌ์ดํธ๋ฅผ ๋ชจ๋ฅธ๋ค๋ฉด, ํ๋ฒ ์ฐธ๊ณ ํด ๋ณด๊ธธ ๋ฐ๋๋ค!
awwwards
์๋๋ ์๊ฐ์ด ๋๋ค๋ฉด ํ๋ฒ ์ฐธ๊ณ ํด๋ณผ๋งํ 2021 ์น ๋์์ธ ํธ๋ ๋
2021 ์น๋์์ธ ํธ๋ ๋
ํฌํธํด๋ฆฌ์ค ๋ ์ด์์์ ๊ตฌ์ํ๋ฉด์ ๋จ๋ค์ด ๋คํ๋ ํ์ด์ง๋ ๋ง๋ค๊ณ ์ถ์ง ์์๊ณ ,
awwwards ๊ฐ์ ๊ณณ์์ ๋ฑ์ฅํ๋ ์ธํฐ๋ํฐ๋ธํ ์น ๊ตฌํ๋ ๊ณต๋ถํ ๊ฒธ ์คํฌ๋กค ์ ๋๋ฉ์ด์
๋ค์ด ๋ค์ด๊ฐ ๋น์ทํ ๋๋์ ์ฌ์ดํธ๋ค์ ์ฐพ์ ๋ ํผ๋ฐ์ค๋ก ํด๋ก ํด๋ณด๊ธฐ๋ก ๊ฒฐ์ฌํ๋ค!
๋์์ธ๋ ํผ๋ฐ์ค1
๋์์ธ๋ ํผ๋ฐ์ค2
๊ฐ๋ฅํ ํ ๋์ ๋ค์ด์ค๋ single ํ์ด์ง๋ก ๊ตฌ์ฑํ๋ ค๊ณ ํ๊ณ , navbar๋ฅผ ํด๋ฆญํ๋ฉด ํด๋น ์น์ ์ผ๋ก ๊ฐ ์ ์๋๋ก ๊ตฌํํ๊ณ
์ ์ ํ์ด์ง ์์ฑ์ ์ํด ๊ฐ์ธ ๋น๋ฅผ ์ ํํ์๊ณ , styling์ styled-components๋ฅผ ์ ์ฉ, ๋ฐฐํฌ๋ ์ ์ ์น์ฌ์ดํธ๋ฅผ ๋ฐฐํฌํ๋ ์ฉ๋์ heroku๋ณด๋ค ๋น ๋ฅด๋ค๊ณ ๋๊ผ๋ netlify๋ฅผ ์ด์ฉํ์๋ค.
heroku์ netlify ๋ชจ๋ AWS ์ฒ๋ผ ํ๊ตญ์ ์๋ฒ๊ฐ ์๊ธฐ ๋๋ฌธ์ธ๊ฑด์ง ๋๋ฆฐ ๋ถ๋ถ์ด ์์ด์ ๋ค์ ํ๋ก์ ํธ๋ ๊ผญ AWS๋ก ๋ฐฐํฌํด๋ณผ ์์ ์ด๋ค.
scrollIntoView๋ฅผ ์ด์ฉํ์ฌ ํด๋ฆญํ๋ฉด ํด๋น ์น์
์ผ๋ก ์ด๋ ๊ฐ๋ฅํฉ๋๋ค.
๋ฐ์คํฌํ, ์์ดํจ๋, ๋ชจ๋ฐ์ผ ์์ผ๋ก ๋ฐ์ํ ์น์ ๊ตฌํํ์์ต๋๋ค.
๋ฆฌํฉํ ๋ง ๊ณผ์ ์์ ์ฝ๋๋ฅผ ๋ถ๋ฆฌํ๊ณ ๋ฏธ๋์ด ํ์ผ์ ์์ถํ์ฌ ๋นจ๊ฐ์ ๊ฒฝ๊ณ ํ์๊ฐ ๋ด๋ 40์ ๋์ ํ์ด์ง๋ฅผ ์ด๋ก์ ์์ ๊ถ์ ๋ค ์ ์๋ 97์ ์ผ๋ก ํฅ์ ์์ผฐ๋ค!!!
(๋นจ๊ฐ์์ผ๋ก ๊ฒฝ๊ณ ๋ฅผ ๋ณด์ฌ์ฃผ๋ 40์ ๋์ ์คํฌ๋ฆฐ์ท์ ์ฐพ์๋ดค๋๋ฐ ์๋ค..์ถฉ๊ฒฉ ๋ฐ์์ ์ ์ฐ์๋..?๐ฅบ ์๋๋ 97์ ์ผ๋ก ํฅ์๋ PageSpeed Insights ์บก์ณํ๋ฉด์ด๋ค.)
ํ์ด์ง ์ฑ๋ฅ ์ฒดํฌ ๋งํฌ
๋ฆฌํฉํ ๋ง์ ํ๋ฉด์ ๋ ์ผ ๊ธฐ์ ์ ์ค๋ฌด์ ์ผํ๋ ์น๊ตฌ์๊ฒ ์์ฑ๋ ํฌํธํด๋ฆฌ์ค ์ปจํ์ ๋ฐ๊ธฐ ์ํด ๋ ์ผ ์๊ฐ์ ๋ง์ถฐ ์๋ฒฝ๊น์ง ๊นจ์๊ณ ๋ฆฌํฉํ ๋ง์ด ์ ๋์ ์ผ๋ก ํ์ํด์ ์์ฒญ ๋ฌผ์ด๋ณด๊ณ .. ์ง์ง ์ธ๋ฉด์ ๋ฆฌํฉํ ๋งํ๋ค..ํ..๐ญ
์ฌ์ค ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ด์ผ ํ ๊ณณ์ด ์์ด์ ๊ต์ฅํ ๋น ๋ฅธ ์๊ฐ๋ด(3-4์ผ ๋ด)๋ก ๋ชจ๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์ด๋ด์ผ ํ๊ธฐ๋ ํ๊ณ , ์ ์ ์ธ ์น์ฌ์ดํธ๋๊น ๊ธ๋ฐฉ ๋ง๋ค๊ฒ ์ง~!๋ผ๊ณ ์๊ฐํ ๋์ ์ค๋ง์ ๋ผ์ ๋ฆฌ๊ฒ ํํํ๋ค..
๋ด๊ฐ ์ฒ์ ์๊ฐ์์ด ์๊ฐ์ ์ซ๊ฒจ ๋ง๋ ์ฝ๋๋ค์ ๊ตฌํ์ ๋์์ง๋ง, ์คํ๊ฒํฐ ์ฒ๋ผ ๊ผฌ์ฌ๐ ์ฒซ ๋๋ฉ๋ ๋๋ฆฌ๊ณ ์ปดํฌ๋ํธ ๋ถ๋ฆฌ๊ฐ ๋์ง ์์ ๋ค ๋ฏ์ด ๊ณ ์ณ์ผํ๋..
์ด์ ๋๋ก ์๊ฐ์ ์ซ๊ธฐ๋ฉด์ ์ฝ๋ฉ์ ํด๋ณธ ์ ์ ์ฒ์์ด๋ผ ์๋ฌด ์๊ฐ๋ ์ํ๊ณ ์ฝ๋๋ฅผ ์งฐ๋๋ ์คํ๋ ค ๋ฆฌํฉํ ๋ง ํ ๋ ๋๋ฌด ํ๋ค์๊ธฐ์ ์ข์ ๊ตํ์ ์ป์ ์ ์์๋ค..์๊ฐํ๊ณ ๋ง๋ค๊ธฐ..๐ง
์์๊ณ ๋ฉ์ง ๊ฒฐ๊ณผ๋ฌผ์ ๊ตฌํํ๋ ๊ฒ๋ ์ค์ํ๋ค๊ณ ๋ณผ ์ ์์ง๋ง,
์ด๋ฐ ์์ ํ๋ก์ ํธ์์๋ ๊ฒฐ๊ณผ์ ์ผ๋ก๋ ์ปดํจํฐ์ ์ธ ์ฌ๊ณ , ํจ์จ์ ์ธ ์ฝ๋๋ฅผ ์ง๋ ๊ฒ์ด ์ค์ํ๋ค๋ ์ ์ ๋๊ผ๋ค.
๋ง์ด ๋ฐฐ์ฐ๊ณ ์ต์ํด์ ธ์ ์ฒ์ ๋ถํฐ ์ ์งค ์์๋ ํผํผํ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ๋ค..
๋์์ด๋๊ฐ ์๋ฌด๋ฆฌ ์ด๋ ค์ด ๋์์ธ์ ์๊ตฌํ๋๋ผ๋ ๊ผญ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์๊ฐ ์ฌ์ด ์ฝ๋๋ก ๊ตฌํํด๋ด๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ต๋๋ค!๐ฅบ
ํ๋ ์ธ๋ค์ผ์ ์์ง์์ ๊ด์ฐฎ์ผ๋, ์ํ์ ๋ํ ์ด๋ฏธ์ง ์ฆ ์ธ๋ค์ผ ์ด๋ฏธ์ง๋ฅผ ํ๊ฑฐ๋ ํ๋ ์์ง์์ ๋์ ๊ฑฐ์ฌ๋ฆฌ๋ค์. ๋์๋ ์ํ๊ณ . ์ฐธ๊ณ ์ฌ์ดํธ๋ฅผ ๋ณด๋ฉด ๋ง์คํฌ ๋ด ์ค๋ธ์ ํธ๋ง ์คํฌ๋กค ๋ฐ์์ ํ๊ฑฐ๋ ์ํ ์ด๋์ ๋ํ ๋ชจ์ ๋ง ์ฃผ๊ณ , ๋ณดํต์ skew๋ ๋ง์ด๋ค ํผํฉ๋๋ค.
์ ๋๋ฐ ์ง๋ ธ๋น//// ๋๋ฐ ,,!!! ์ง์ง ๋ฉ์ ธ์!! ์ ์ค๋ ฅ ์ด์ฉ .. ๋๊ธฐ์
ํํ์ด์ง ๋ณด๋ค ๋ ๋์ ๊ฒ ๊ฐ์ต๋๋ค. ์ด๋ ๊ฒ ๊น์ง ํ๋๋ฐ ์ผ๋ง๋ ๋
ธ๋ ฅํ์๊ณ ๊ณต๋ถ ํ์
จ์์ง ..
(์๊ทน ๋ฐ๊ณ ๊ฐ๋๋ค. )
๋๋ฌด ๋ฉ์ง๋ค์! ์ต๊ทผ ํฌํธํด๋ฆฌ์ค ํ ํ๋ฆฟ์ ๋ณด๊ณ ์๋๋ฐ minzy.studio ์ฐธ๊ณ ํด๋๋ ๊น์?!
์ธ๋ค์ผ ๋ณด๊ณ ํ๋ ค์ ๋ค์ด์์ด์ ใ uใ
์ฒซ ํ๋๋ชจ์์ ์ง๋๋ค๋๋ ๊ธ๋ค์ด
์์ ์ ํ ์ก์๋๋๊ฒ ๋๋ฌด ๋ฉ์ ธ์!!