์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ ์‹ค๋ฌด ๋์žฅ๋‚ด๊ธฐ [์—ญ๋Ÿ‰ ๊ฐ•ํ™”ํŽธ]

์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ JS, CSS ๋…ธํ•˜์šฐ๋ฅผ ์•„๋‚Œ์—†์ด ๊ณต๊ฐœํ•ฉ๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, ์›น ํผ๋ธ”๋ฆฌ์‹ฑ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ
๋ฐฐ์›Œ์š”!

  • Vanilla JS ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ ๋…ธํ•˜์šฐ

  • CSS 3D, ์• ๋‹ˆ๋ฉ”์ด์…˜, ํŠธ๋žœ์Šคํผ, ํŠธ๋žœ์ง€์…˜

  • ์ƒ์‚ฐ์„ฑ์ด ๋†’์•„์ง€๋Š” TweenMax ์‚ฌ์šฉ๋ฒ•

  • StageResize , ๋ฐ˜์‘ํ˜• ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ

  • Mobile Touch ๋ฐ orientation(๊ธฐ์šธ๊ธฐ) ํ™œ์šฉ

์›น ์ธํ„ฐ๋ž™์…˜, ๋” ์‰ฝ๊ณ  + ๋” ์ฐฝ์˜์ ์œผ๋กœ! ๐Ÿ’Ž

๋‚ด ์†์œผ๋กœ ๋งŒ๋“œ๋Š” ํŠธ๋ Œ๋””ํ•œ UX.

๋‹จ์ˆœ ์„œ๋น„์Šค ๊ตฌํ˜„์„ ๋„˜์–ด ํŠธ๋ Œ๋””ํ•œ UX๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ํƒ„ํƒ„ํ•œ ๊ธฐ๋ณธ๊ธฐ๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ํŠน์ • ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์˜์กดํ•˜์ง€ ์•Š๊ณ  ์ˆœ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Vanilla JS) ๋งŒ์œผ๋กœ ํ•ด์™ธ ์œ ๋ช…์‚ฌ์ดํŠธ์˜ ํŠธ๋ Œ๋””ํ•œ UX๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TweenMax๋ฅผ ์ด์šฉํ•œ ํ™”๋ คํ•œ ๋ชจ์…˜๋ถ€ํ„ฐ ์Šคํฌ๋กค ์ด๋ฒคํŠธ, ๋ฐ˜์‘ํ˜•, ๋ชจ๋ฐ”์ผ ํ„ฐ์น˜๊นŒ์ง€ 15๋…„๊ฐ„์˜ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ ๋…ธํ•˜์šฐ๋ฅผ ์•„๋‚Œ์—†์ด ๋‹ด์•˜์Šต๋‹ˆ๋‹ค. (์งง๊ณ  ๊ตต๊ฒŒ!)

 

 


๋ˆ„๊ตฌ๋‚˜ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‚˜์š”? 

์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น ๋ชจ์…˜,
ํ˜ผ์ž์„œ๋„ ์ž˜ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„๊นŒ์š”?

โ€œ๋””์ž์ด๋„ˆ, ๊ธฐํš์ž๊ฐ€ ์–ด๋ ค์šด ํšจ๊ณผ๋ฅผ ์›ํ•ด์š”...โ€
โ€œ์•„์ด๋””์–ด๋Š” ์žˆ๋Š”๋ฐ ๊ตฌํ˜„์ด ์–ด๋ ค์›Œ์š”โ€
โ€œ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ณต๋ถ€๋Š” ํ–ˆ๋Š”๋ฐ ํ™œ์šฉ์„ ๋ชปํ•ด์š”โ€
โ€œ๋ณต๋ถ™ํ•ด์„œ ์‚ฌ์šฉ์€ ํ•˜๋Š”๋ฐ ์‘์šฉ์„ ๋ชปํ•˜๊ฒ ์–ด์š”โ€
โ€œํผ๋ธ”๋ฆฌ์…”์˜ ๋ฒฝ์„ ๊นจ๊ณ  ์—ฐ๋ด‰์„ ์˜ฌ๋ฆฌ๊ณ  ์‹ถ์–ด์š”โ€

์ €๋„ ๋””์ž์ธ๊ณผ ์ถœ์‹ ์˜ ๊ฐœ๋ฐœ ๋น„์ „๊ณต์ž์ž…๋‹ˆ๋‹ค. ๊ธฐ์ดˆ๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒŒ ์•„๋‹Œ, ์•„์˜ˆ ๊ธฐ์ดˆ๊ฐ€ ์—†์ด ๊ฐœ๋ฐœ์— ๋›ฐ์–ด๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณ ํ†ต์Šค๋Ÿฌ์šธ ์ •๋„๋กœ ํž˜๋“ค์—ˆ๋˜ ๊ฒฝํ—˜์ด ์žˆ์–ด์„œ ์–ด๋–ค ๊ฒŒ ์–ด๋ ค์šด์ง€, ์–ด๋–ค ๋ถ€๋ถ„์—์„œ ๋ง‰ํžˆ๋Š”์ง€๋ฅผ ์ž˜ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹œ์— โ€˜์ด๋Ÿฐ ๊ฐ•์˜๊ฐ€ ์žˆ์—ˆ์œผ๋ฉด ์ •๋ง ์ข‹์•˜๊ฒ ๋‹คโ€™๋Š” ์‹ฌ์ •์œผ๋กœ ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. 

  • ํ˜„์—…์—์„œ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋Š” ์–ด๋ ค์šด ์ƒํ™ฉ์„ ์‰ฝ๊ฒŒ ํ’€์–ด๋‚˜๊ฐ€๋Š” ๋…ธํ•˜์šฐ๋ฅผ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.
  • ํƒ„ํƒ„ํ•œ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ฐฝ์˜์ ์ธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์–ด ์—ฐ๋ด‰์„ ์˜ฌ๋ฆฌ์„ธ์š”!
์ƒ˜ํ”Œ ํฌํŠธํด๋ฆฌ์˜ค 1 (๋ณด๋Ÿฌ๊ฐ€๊ธฐ)
์ƒ˜ํ”Œ ํฌํŠธํด๋ฆฌ์˜ค 2 (๋ณด๋Ÿฌ๊ฐ€๊ธฐ)
์™ธ๋ถ€ ๊ฐ•์—ฐ ์˜์ƒ

๊ฐ•์˜ ํŠน์ง•

์‹ค์ œ ํ˜„์—…์— ๊ฐ€๊นŒ์šด
์‹ค์ „ํ˜• ์˜ˆ์ œ

์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ธฐ๋ณธ์›๋ฆฌ
๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ๋กœ ์„ค๋ช…

์ง€๋ฃจํ•œ ์ด๋ก  ๋Œ€์‹ 
์‹ค์ „์œผ๋กœ ์งํ–‰

์†Œ์Šค ์ œ๊ณต!
ํ•จ๊ป˜ ๋ณด๋ฉฐ ์ˆ˜์—… ์ง„ํ–‰


ํ•™์Šต ๋‚ด์šฉ ๋ง›๋ณด๊ธฐ

Section.1

  • ๋ณ€์ˆ˜, ๋žœ๋ค, if ๋ฌธ, timer ๋“ฑ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ํ™œ์šฉ 
  • ์ดˆ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณด๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ฒŒ์ž„

Section.2

  • ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์ œ์ž‘์‹œ ์•„์ฃผ ์ค‘์š”ํ•œ ํŽ˜์ด์ง• ๊ฐœ๋… ์ตํžˆ๊ธฐ
  • ๊ฐ™์€ ์Šคํฌ๋ฆฝํŠธ์— ์Šคํƒ€์ผ์„ ๋ฐ”๊พธ๋ฉด์„œ ์™„์ „ ๋‹ค๋ฅธ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ
  • ๋ชจ๋ฐ”์ผ ํ„ฐ์น˜ ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•œ ์Šค์™€์ดํ”„ ๊ธฐ๋Šฅ ๊ตฌํ˜„

Section.3

  • ๋ณ„~์ด ์Ÿ์•„์ง€~๋Š” ์ฝ”๋”ฉ์ผ๋ ˆ๋ธ ํŽ˜์ด์ง€ ์ œ์ž‘
  • ๋ณ„ ์ด๋ฏธ์ง€ ๋‘์žฅ์œผ๋กœ ํ•˜๋Š” ๊ฐ„๋‹จํ•œ ํŽ˜๋Ÿด๋ ‰์Šค ํšจ๊ณผ
  • TweenMax, scrollTo ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ด์šฉํ•œ ์ซ€์ซ€ํ•œ ํ™”๋ฉด ์ด๋™
  • ํ”Œ๋Ÿฌ๊ทธ์ธ ์—†์ด ์ˆœ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ ๋ฒ„์ „๊ณผ ๋น„๊ต

Section.4

  • ๋ณธ๊ฒฉ์ ์ธ TweenMax ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์„ค๋ช…
  • ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ stageResize ํ™œ์šฉ
  • ํŠธ์œˆ๋งฅ์Šค๋ฅผ ์ด์šฉํ•œ ์ž…์ฒด์ ์ธ ๋žœ๋ค ์นด๋“œ ๋ชจ์…˜ 

Section.5

  • ์œ„์—์„œ ๋ฐฐ์šด ํŽ˜์ด์ง• ์Šคํฌ๋ฆฝํŠธ ์‘์šฉ
  • ๋‹ค์–‘ํ•˜๊ฒŒ ํ™œ์šฉ ๊ฐ€๋Šฅํ•œ TweenMax ๋žœ๋ค ๋ชจ์…˜ ์ œ์ž‘ 

Section.6

  • 3D ์ž…์ฒด ์นด๋“œ
  • transform, translateZ ์†์„ฑ์„ ์ด์šฉํ•œ ์ž…์ฒด์ ์ธ ํ‘œํ˜„
  • ๋ชจ๋ฐ”์ผ ๊ธฐ์šธ๊ธฐ๋ฅผ ์ด์šฉํ•œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ


์›น์—์„œ ๋ฐ”๋กœ ๋ณด๊ธฐ ํด๋ฆญ


 

ํ‰๊ท  ๋ณ„์  4.9โ˜… 
์ฝ”๋”ฉ์ผ๋ ˆ๋ธ ์‹ ๊ทœ ๊ฐ•์˜.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
์ˆ˜๊ฐ•ํ‰์œผ๋กœ ๋‚จ๊ฒจ์ฃผ์‹  ๋‹ค์–‘ํ•œ ์˜๊ฒฌ๋“ค์„
์ด๋ฒˆ ๊ฐ•์˜์— ๋ฐ˜์˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ง€๋‚œ ๊ฐ•์˜ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ

์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์Šคํ‚ฌ!

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?

์ €๋„ ๋น„์ „๊ณต์ž์ž…๋‹ˆ๋‹ค ^^ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ๋งŒ ์žˆ์œผ๋ฉด ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

Q. ๊ฐ•์˜๋ฅผ ๋“ฃ๊ธฐ ์ „ ์ค€๋น„ํ•ด์•ผ ํ•  ๊ฒƒ์ด ์žˆ๋‚˜์š”?

HTML, CSS ๊ธฐ์ดˆ๋Š” ์•Œ๊ณ  ๋“ค์œผ์‹œ๋Š”๋ฉด ํŽธํ•ฉ๋‹ˆ๋‹ค. (CSS ์ „์ฒด ์ฝ”๋“œ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค ^^)

Q. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JavaScript)๋ฅผ ์ž˜ ๋ชจ๋ฅด๋Š”๋ฐ ๊ดœ์ฐฎ์„๊นŒ์š”?

๋ณ€์ˆ˜, ๋ฐฐ์—ด, ํ•จ์ˆ˜ ๋“ฑ ๊ธฐ์ดˆ์ ์ธ ๊ฐœ๋…๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
์ง„ํ–‰ํ•˜๋‹ค ๋ชจ๋ฅด์‹œ๋Š” ๊ฒƒ์€ ์งˆ๋ฌธ ๊ฒŒ์‹œํŒ์„ ํ†ตํ•ด ์งˆ๋ฌธํ•ด ์ฃผ์„ธ์š”!

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

  • ์˜์ƒ ํ•˜๋‹จ์˜ โ€˜์ˆ˜์—…๋…ธํŠธโ€™๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”. ์˜์ƒ์—์„œ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ์„ค๋ช…ํ•ด ๋†“์•˜์Šต๋‹ˆ๋‹ค.
  • ECMA 2015(ES6) ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์™„์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์„น์…˜ 0 - ์ˆ˜์—… 3์—์„œ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œํ•ด์ฃผ์„ธ์š”.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ทจ์ค€์ƒ, ๋””์ž์ด๋„ˆ, ํผ๋ธ”๋ฆฌ์…”, ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž

  • ํ•ด์™ธ ์‚ฌ์ดํŠธ์ฒ˜๋Ÿผ ์ฐฝ์˜์ ์ธ ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • JS๋ฅผ ๋ณต๋ถ™ํ•ด์„œ ์‚ฌ์šฉ์€ ํ•˜๋Š”๋ฐ ์‘์šฉ์ด ํž˜๋“  ๋ถ„

  • ๋‹จ์ˆœ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ๊ฐ์„ฑ์„ ๊ฐ€๋ฏธํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML, CSS ๊ธฐ๋ณธ์ง€์‹

์•ˆ๋…•ํ•˜์„ธ์š”
์ฝ”๋”ฉ์ผ๋ ˆ๋ธ์ž…๋‹ˆ๋‹ค.

์ˆ˜๊ฐ•์ƒ ์ˆ˜

3,221

์ˆ˜๊ฐ•ํ‰ ์ˆ˜

214

๊ฐ•์˜ ํ‰์ 

4.7

๊ฐ•์˜ ์ˆ˜

3

15๋…„ ์ด์ƒ ์—ฌ๋Ÿฌ ๊ธฐ์—…๊ณผ ์–ธ๋ก ์‚ฌ์—์„œ front-end ๊ฐœ๋ฐœ ๋ฐ

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์‚ฌ์ดํŠธ ์ œ์ž‘์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

์ €์™€ ํ•จ๊ป˜ ๊นƒํ„ธ์ฒ˜๋Ÿผ ๊ฐ€๋ฒผ์šด ์ฝ”๋”ฉ ํ•จ๊ป˜ ํ•ด๋ณด์‹œ์ฃ !

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

47๊ฐœ โˆ™ (5์‹œ๊ฐ„ 33๋ถ„)

์ˆ˜์—… ์ž๋ฃŒ

๊ฐ€ ์ œ๊ณต๋˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

์›” โ‚ฉ17,600

5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

โ‚ฉ88,000