๐Ÿ‘ฉโ€๐Ÿ’ป ๋‚˜์˜ ํฌํŠธํด๋ฆฌ์˜ค ํ”„๋กœ์ ํŠธ

bbio3oยท2021๋…„ 1์›” 30์ผ
105

โœจ Projects

๋ชฉ๋ก ๋ณด๊ธฐ
4/4
post-thumbnail

๐Ÿ” Project Overview

โœจ ์•„๋ž˜ ๋งํฌ์—์„œ ํ”„๋กœ์ ํŠธ ๋ฐ๋ชจ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
minzy.studio

awwwards ์‚ฌ์ดํŠธ๋ฅผ ๋ณด๋‹ค๋ณด๋ฉด, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•˜๊ณ  ์ฐฝ์˜์ ์ธ ์›น ๋””์ž์ธ๋“ค์ด ๋งŽ๋‹ค. ํ˜น์‹œ awwwards๋ผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ๋ชจ๋ฅธ๋‹ค๋ฉด, ํ•œ๋ฒˆ ์ฐธ๊ณ ํ•ด ๋ณด๊ธธ ๋ฐ”๋ž€๋‹ค!
awwwards

์•„๋ž˜๋Š” ์‹œ๊ฐ„์ด ๋‚œ๋‹ค๋ฉด ํ•œ๋ฒˆ ์ฐธ๊ณ ํ•ด๋ณผ๋งŒํ•œ 2021 ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ
2021 ์›น๋””์ž์ธ ํŠธ๋ Œ๋“œ

ํฌํŠธํด๋ฆฌ์˜ค ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์ƒํ•˜๋ฉด์„œ ๋‚จ๋“ค์ด ๋‹คํ•˜๋Š” ํŽ˜์ด์ง€๋Š” ๋งŒ๋“ค๊ณ  ์‹ถ์ง€ ์•Š์•˜๊ณ ,

awwwards ๊ฐ™์€ ๊ณณ์—์„œ ๋“ฑ์žฅํ•˜๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ์›น ๊ตฌํ˜„๋„ ๊ณต๋ถ€ํ• ๊ฒธ ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜๋“ค์ด ๋“ค์–ด๊ฐ„ ๋น„์Šทํ•œ ๋Š๋‚Œ์€ ์‚ฌ์ดํŠธ๋“ค์„ ์ฐพ์•„ ๋ ˆํผ๋Ÿฐ์Šค๋กœ ํด๋ก ํ•ด๋ณด๊ธฐ๋กœ ๊ฒฐ์‹ฌํ–ˆ๋‹ค!
๋””์ž์ธ๋ ˆํผ๋Ÿฐ์Šค1
๋””์ž์ธ๋ ˆํผ๋Ÿฐ์Šค2

๊ฐ€๋Šฅํ•œ ํ•œ ๋ˆˆ์— ๋“ค์–ด์˜ค๋Š” single ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑํ•˜๋ ค๊ณ  ํ–ˆ๊ณ , navbar๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์„น์…˜์œผ๋กœ ๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ•˜๊ณ 

์ •์  ํŽ˜์ด์ง€ ์ƒ์„ฑ์„ ์œ„ํ•ด ๊ฐœ์ธ ๋น„๋ฅผ ์„ ํƒํ•˜์˜€๊ณ , styling์€ styled-components๋ฅผ ์ ์šฉ, ๋ฐฐํฌ๋Š” ์ •์  ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ์šฉ๋„์˜ heroku๋ณด๋‹ค ๋น ๋ฅด๋‹ค๊ณ  ๋Š๊ผˆ๋˜ netlify๋ฅผ ์ด์šฉํ•˜์˜€๋‹ค.
heroku์™€ netlify ๋ชจ๋‘ AWS ์ฒ˜๋Ÿผ ํ•œ๊ตญ์— ์„œ๋ฒ„๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ธ๊ฑด์ง€ ๋Š๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ๋‹ค์Œ ํ”„๋กœ์ ํŠธ๋Š” ๊ผญ AWS๋กœ ๋ฐฐํฌํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.

์‚ฌ์šฉ๊ธฐ์ˆ 

  • HTML5 / CSS3
  • JavaScript(ES6+)
  • Gatsby, React
  • GSAP
  • Styled-components

๊ตฌํ˜„์‚ฌํ•ญ

  • ํด๋ฆญ์œผ๋กœ ์ž๋™ scroll์ด ๊ฐ€๋Šฅํ•œ navbar
  • GSAP์˜ scrollTrigger์„ ์ด์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜
  • parallax, skew ์• ๋‹ˆ๋ฉ”์ด์…˜
  • mobile first ๋ฐ˜์‘ํ˜• ์›น

โœจ Navbar ์„น์…˜์ด๋™ ์ž๋™ ์Šคํฌ๋กค


scrollIntoView๋ฅผ ์ด์šฉํ•˜์—ฌ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์„น์…˜์œผ๋กœ ์ด๋™ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


โœจ Gsap์„ ์ด์šฉํ•œ scrollTrigger ํ…์ŠคํŠธ ์• ๋‹ˆ๋ฉ”์ด์…˜


โœจ scrollTrigger skew, parallax ์ด๋ฏธ์ง€ ์• ๋‹ˆ๋ฉ”์ด์…˜


โœจ About section ์–ธ์–ด ์Šค์œ„์น˜


โœจ ๋ฐ˜์‘ํ˜• ์›น


๋ฐ์Šคํฌํƒ‘, ์•„์ดํŒจ๋“œ, ๋ชจ๋ฐ”์ผ ์ˆœ์œผ๋กœ ๋ฐ˜์‘ํ˜• ์›น์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.



๐ŸŒฟ ํ›„๊ธฐ

๐Ÿ ํŽ˜์ด์ง€ ์ฒซ ๋กœ๋”ฉ ์Šคํ”ผ๋“œ ์„ฑ๋Šฅ ํ–ฅ์ƒ, ์„ฑ๋Šฅ ์ตœ์ ํ™”

๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •์—์„œ ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ  ๋ฏธ๋””์–ด ํŒŒ์ผ์„ ์••์ถ•ํ•˜์—ฌ ๋นจ๊ฐ„์ƒ‰ ๊ฒฝ๊ณ  ํ‘œ์‹œ๊ฐ€ ๋–ด๋˜ 40์  ๋Œ€์˜ ํŽ˜์ด์ง€๋ฅผ ์ดˆ๋ก์ƒ‰ ์•ˆ์ •๊ถŒ์— ๋“ค ์ˆ˜ ์žˆ๋Š” 97์ ์œผ๋กœ ํ–ฅ์ƒ ์‹œ์ผฐ๋‹ค!!!
(๋นจ๊ฐ„์ƒ‰์œผ๋กœ ๊ฒฝ๊ณ ๋ฅผ ๋ณด์—ฌ์ฃผ๋˜ 40์ ๋Œ€์˜ ์Šคํฌ๋ฆฐ์ƒท์€ ์ฐพ์•„๋ดค๋Š”๋ฐ ์—†๋‹ค..์ถฉ๊ฒฉ ๋ฐ›์•„์„œ ์•ˆ ์ฐ์—ˆ๋‚˜..?๐Ÿฅบ ์•„๋ž˜๋Š” 97์ ์œผ๋กœ ํ–ฅ์ƒ๋œ PageSpeed Insights ์บก์ณํ™”๋ฉด์ด๋‹ค.)
ํŽ˜์ด์ง€ ์„ฑ๋Šฅ ์ฒดํฌ ๋งํฌ

๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๋ฉด์„œ ๋…์ผ ๊ธฐ์—…์˜ ์‹ค๋ฌด์— ์ผํ•˜๋Š” ์นœ๊ตฌ์—๊ฒŒ ์™„์„ฑ๋œ ํฌํŠธํด๋ฆฌ์˜ค ์ปจํŽŒ์„ ๋ฐ›๊ธฐ ์œ„ํ•ด ๋…์ผ ์‹œ๊ฐ„์— ๋งž์ถฐ ์ƒˆ๋ฒฝ๊นŒ์ง€ ๊นจ์žˆ๊ณ  ๋ฆฌํŒฉํ† ๋ง์ด ์ ˆ๋Œ€์ ์œผ๋กœ ํ•„์š”ํ•ด์„œ ์—„์ฒญ ๋ฌผ์–ด๋ณด๊ณ .. ์ง„์งœ ์šธ๋ฉด์„œ ๋ฆฌํŒฉํ† ๋งํ–ˆ๋‹ค..ํ•˜..๐Ÿ˜ญ

์‚ฌ์‹ค ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋‚ด์•ผ ํ•  ๊ณณ์ด ์žˆ์–ด์„œ ๊ต‰์žฅํžˆ ๋น ๋ฅธ ์‹œ๊ฐ„๋‚ด(3-4์ผ ๋‚ด)๋กœ ๋ชจ๋“  ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด๋‚ด์•ผ ํ–ˆ๊ธฐ๋„ ํ–ˆ๊ณ , ์ •์ ์ธ ์›น์‚ฌ์ดํŠธ๋‹ˆ๊นŒ ๊ธˆ๋ฐฉ ๋งŒ๋“ค๊ฒ ์ง€~!๋ผ๊ณ  ์ƒ๊ฐํ•œ ๋‚˜์˜ ์˜ค๋งŒ์— ๋ผˆ์ €๋ฆฌ๊ฒŒ ํ›„ํšŒํ–ˆ๋‹ค..

๋‚ด๊ฐ€ ์ฒ˜์Œ ์ƒ๊ฐ์—†์ด ์‹œ๊ฐ„์— ์ซ“๊ฒจ ๋งŒ๋“  ์ฝ”๋“œ๋“ค์€ ๊ตฌํ˜„์€ ๋˜์—ˆ์ง€๋งŒ, ์ŠคํŒŒ๊ฒŒํ‹ฐ ์ฒ˜๋Ÿผ ๊ผฌ์—ฌ๐Ÿ ์ฒซ ๋žœ๋”ฉ๋„ ๋Š๋ฆฌ๊ณ  ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š์•„ ๋‹ค ๋œฏ์–ด ๊ณ ์ณ์•ผํ•˜๋Š”..

์ด์ •๋„๋กœ ์‹œ๊ฐ„์— ์ซ“๊ธฐ๋ฉด์„œ ์ฝ”๋”ฉ์„ ํ•ด๋ณธ ์ ์€ ์ฒ˜์Œ์ด๋ผ ์•„๋ฌด ์ƒ๊ฐ๋„ ์•ˆํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์งฐ๋”๋‹ˆ ์˜คํžˆ๋ ค ๋ฆฌํŒฉํ† ๋ง ํ•  ๋•Œ ๋„ˆ๋ฌด ํž˜๋“ค์—ˆ๊ธฐ์— ์ข‹์€ ๊ตํ›ˆ์„ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค..์ƒ๊ฐํ•˜๊ณ  ๋งŒ๋“ค๊ธฐ..๐Ÿง 

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

๋””์ž์ด๋„ˆ๊ฐ€ ์•„๋ฌด๋ฆฌ ์–ด๋ ค์šด ๋””์ž์ธ์„ ์š”๊ตฌํ•˜๋”๋ผ๋„ ๊ผญ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์šด ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•ด๋‚ด๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ ์‹ถ์Šต๋‹ˆ๋‹ค!๐Ÿฅบ

profile
๊ทธ๋ฆผ๋„ ๊ทธ๋ฆฌ๋Š” ๊ฐœ๋ฐœ์ž ๐ŸŽจ๐Ÿ‘ฉโ€๐Ÿ’ป

29๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 2์›” 3์ผ

์ธ๋„ค์ผ ๋ณด๊ณ  ํ™€๋ ค์„œ ๋“ค์–ด์™”์–ด์š” ใ…Žuใ…Ž
์ฒซ ํŒŒ๋„๋ชจ์–‘์— ์ง€๋‚˜๋‹ค๋‹ˆ๋Š” ๊ธ€๋“ค์ด
์‹œ์„ ์„ ํ™• ์žก์•„๋„๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋ฉ‹์ ธ์š”!!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 4์ผ

๊ทผ์‚ฌํ•ฉ๋‹ˆ๋‹ค.. !!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 7์ผ

์šฐ์™€ ์ •๋ง ๋ฉ‹์žˆ์–ด์š”!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 19์ผ

๋Œ€๋‹จํ•˜์‹ญ๋‹ˆ๋‹ค.. :) ๋งŽ์ด ์ฐธ๊ณ ํ•˜๊ณ  ๊ฐ‘๋‹ˆ๋‹ค!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 22์ผ

ํŒŒ๋„ ์ธ๋„ค์ผ์˜ ์›€์ง์ž„์€ ๊ดœ์ฐฎ์œผ๋‚˜, ์ž‘ํ’ˆ์— ๋Œ€ํ•œ ์ด๋ฏธ์ง€ ์ฆ‰ ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋ฅผ ํ‹€๊ฑฐ๋‚˜ ํ•˜๋Š” ์›€์ง์ž„์€ ๋ˆˆ์— ๊ฑฐ์Šฌ๋ฆฌ๋„ค์š”. ๋ˆˆ์—๋„ ์•„ํ”„๊ณ . ์ฐธ๊ณ  ์‚ฌ์ดํŠธ๋ฅผ ๋ณด๋ฉด ๋งˆ์Šคํฌ ๋‚ด ์˜ค๋ธŒ์ ํŠธ๋งŒ ์Šคํฌ๋กค ๋ฐ˜์‘์„ ํ•˜๊ฑฐ๋‚˜ ์ƒํ•˜ ์ด๋™์— ๋Œ€ํ•œ ๋ชจ์…˜๋งŒ ์ฃผ๊ณ , ๋ณดํ†ต์€ skew๋Š” ๋งŽ์ด๋“ค ํ”ผํ•ฉ๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 24์ผ

์™€ ๋Œ€๋ฐ• ์ง€๋ ธ๋‹น//// ๋Œ€๋ฐ• ,,!!! ์ง„์งœ ๋ฉ‹์ ธ์š”!! ์™€ ์‹ค๋ ฅ ์–ด์ฉ” .. ๋Œ€๊ธฐ์—… ํ™ˆํŽ˜์ด์ง€ ๋ณด๋‹ค ๋” ๋‚˜์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๊นŒ์ง€ ํ•˜๋Š”๋ฐ ์–ผ๋งˆ๋‚˜ ๋…ธ๋ ฅํ•˜์‹œ๊ณ  ๊ณต๋ถ€ ํ•˜์…จ์„์ง€ ..
(์ž๊ทน ๋ฐ›๊ณ  ๊ฐ‘๋‹ˆ๋‹ค. )

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 24์ผ

๋„ˆ๋ฌด ๋ฉ‹์ง€๋„ค์š”! ์ตœ๊ทผ ํฌํŠธํด๋ฆฌ์˜ค ํ…œํ”Œ๋ฆฟ์„ ๋ณด๊ณ  ์žˆ๋Š”๋ฐ minzy.studio ์ฐธ๊ณ ํ•ด๋„๋ ๊นŒ์š”?!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 24์ผ

์ž˜๋ณด๊ณ  ๊ฐ€์š”~
๊ฐ™์€ ์ผ์„ ํ•˜๊ณ  ์žˆ๋Š” FE ๊ฐœ๋ฐœ์ž๋กœ์จ ์ข‹์€ ๊ฒฐ๊ณผ์žˆ๊ธฐ๋ฅผ ๊ธฐ์› ํ•ฉ๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 25์ผ

์ •๋ง ๋ฉ‹์žˆ์œผ์…”์š” !!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 2์›” 26์ผ

Vercel์€ ํ•œ๊ตญ ์„œ๋ฒ„ ์žˆ๋Š”๊ฑธ๋กœ ์••๋‹ˆ๋‹ค

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 3์›” 3์ผ

์˜ˆ์ •์ด๋‹ค.

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 3์›” 4์ผ

์ธ๋„ค์ผ์— ์ด๋Œ๋ ค ๋“ค์–ด์™”๋Š”๋ฐ, ๋„˜ ๋ฉ‹์ง„ ์‚ฌ์ดํŠธ๋“ค ์ž˜ ๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹น
์ข‹์€ ์ •๋ณด ๋งŽ์ด ์˜ฌ๋ ค์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ด์š”!! !๐Ÿ’š

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 3์›” 9์ผ

๋„ˆ๋ฌด ๋ฉ‹์žˆ์–ด์š”! ํ˜น์‹œ ๋…ํ•™์œผ๋กœ ํ•˜์‹ ๊ฑด๊ฐ€์š”? ๊ธฐ๊ฐ„์€ ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ ธ๋‚˜์š”??

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 3์›” 10์ผ

๋‚˜์ค‘์— ๋ฆฌํŒฉํ† ๋ง ํ•˜๋˜ ํŒ๊ฐ™์€๊ฒƒ๋„ ์ ์–ด์ฃผ์„ธ์—ฌ

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 3์›” 15์ผ

๋Œ€๋‹จํ•˜์„ธ์š” ๋ฉ‹์ง„๊ธ€ ์ฝ๊ณ  ๊ฐ‘๋‹ˆ๋‹ค !

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 6์›” 2์ผ

PageSpeed Insights ์‚ฌ์ดํŠธ๋Š” ์ฒ˜์Œ ์•Œ์•˜๋„ค์š” ใ…Žใ…Ž
์ž˜ ๋ณด๊ณ  ๊ฐ€์š” ~

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ