Panic Attack Helper ๐Ÿšจ ๋ฏธ๋‹ˆ ํ”Œ์  ์™„๋ฃŒ

banginaยท2020๋…„ 9์›” 20์ผ
4

ํ”„๋กœ์ ํŠธ

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

Javascript๋กœ ๊ฐ„๋‹จํ•œ ๋ช…์ƒ์•ฑ ๋งŒ๋“œ๋Š” ํŠœํ† ๋ฆฌ์–ผ ๋ณด๋‹ค๊ฐ€ ๊ธ‰ ๋ฝ๋ฟŒ ๋ฐ›์•„์„œ ๋งŒ๋“  ์ดˆ๋ฏธ๋‹ˆ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜~~! ์‹ฌ์‹ฌํ•  ๋•Œ๋งˆ๋‹ค ์กฐ๊ธˆ์”ฉ ํ•˜๋‹ค๋ณด๋‹ˆ ์‹œ์ž‘ํ•œ์ง€ 2์ฃผ๋งŒ์— ๋“œ๋””์–ด ๋งˆ์นจํ‘œ๋ฅผ ์ฐ๊ฒŒ๋๋‹ค!
๋””ํ…Œ์ผ์— ์กฐ๊ธˆ์”ฉ ์•„์‰ฌ์šด ๋ถ€๋ถ„์ด ์—ฌ์ „ํžˆ ๋‚จ์•„์žˆ์ง€๋งŒ, ์žฌ๋ฏธ๋กœ ๋š๋”ฑ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค์–ด๋ณด๋ ค๊ณ  ์‹œ์ž‘ํ•œ ๊ฒƒ์ด๋‹ˆ ์ง‘์ฐฉ ๊ณ ๋งŒํ•˜๊ณ  ์—ฌ๊ธฐ์„œ ๋งˆ๋ฌด๋ฆฌ ์ง€์œผ๋ ค๊ณ  ํ•œ๋‹ค ๐Ÿ˜‡

๐Ÿ’ก ๋ฐฐ์šด ์ 

  • ๋™์‹œ์— ์—ฌ๋Ÿฌ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์€ ์œ„ํ—˜ํ•˜๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜ ์”นํž™ ํ˜„์ƒ
  • ์ž์—ฐ์Šค๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ„ํ•ด์„œ๋Š” requestAnimationFrame(์ดํ•˜ raf)์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ์ด๋ฒˆ ์•„์ดํ…œ์— ์ ์šฉํ•˜๊ธฐ ์ƒ๊ฐ๋ณด๋‹ค ์–ด๋ ค์›Œ์„œ ์ผ๋‹จ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ•„์ˆ˜์ ์ธ ๋ถ€๋ถ„์—๋งŒ ์ ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ ˆ์ถฉ)
  • Chrome์—์„œ audio autoplay๋ฅผ ๋ง‰์•„๋†“์€ ๊ฒƒ์€ ์•Œ๊ณ ๋Š” ์žˆ์—ˆ์ง€๋งŒ ์–ด๋– ํ•œ ์šฐํšŒ์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ๋„ autoplay๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์—†์Œ์„ ๊นจ๋‹ฌ์•˜๋‹ค. JS, iframe ๋ชจ๋‘ ์‚ฌ์šฉํ•ด๋ณด์•˜์ง€๋งŒ ๊ตฌ๊ธ€์—์„œ ์•„์ฃผ ์ฒ ํ†ต๋ฐฉ์–ด๋ฅผ ํ•ด๋†“์€ ๋•์— autoplay๋ฅผ ํฌ๊ธฐ๐Ÿ˜” ํ•˜๊ณ  play/mute ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

๐Ÿง ์•„์‰ฌ์šด ์ 

  • ํ˜ธํก ๊ฐ€์ด๋“œ ์• ๋‹ˆ๋ฉ”์ด์…˜(๋™๊ทธ๋ผ๋ฏธ)์˜ ์†๋„๊ฐ€ ์กฐ์ ˆ๋˜๋ฉด ์›์˜ ํฌ๊ธฐ๊ฐ€ ๊ธฐ์กด ์‚ฌ์ด์ฆˆ๋กœ ๋‹ค์‹œ ๋Œ์•„์˜ค๋ฉด์„œ ํŠ€๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค. ์ด๊ฑธ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด.. raf์„ ์‚ฌ์šฉํ•˜๊ณ  timestamp๋ฅผ ์ด์šฉํ•ด์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง„ํ–‰์œจ์„ ๊ตฌํ•˜๊ณ  ๊ฑฐ๊ธฐ์„œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋‹ค์‹œ ์‹œ์ž‘๋˜๋„๋ก ํ•ด์•ผํ•˜๋Š”๋ฐ(์•„๋งˆ๋„?) ์•„์ง raf ๊ฐœ๋…/์‚ฌ์šฉ์ด ์ต์ˆ™์น˜ ์•Š์•„์„œ ์—„๋‘๋ฅผ ๋ชป ๋ƒˆ๋‹ค. ๋‹ค๋ฅธ ํ•  ๊ฒƒ๋„ ์Œ“์—ฌ์žˆ๊ณ  ๐Ÿ˜„ raf๋Š” ์ถ”ํ›„ ์กฐ๊ธˆ์”ฉ ๊ณต๋ถ€ํ•ด์„œ ํ™œ์šฉํ•ด๋ณด๊ณ  ๋‹ค์‹œ ์ ์šฉํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๐Ÿ‘€ ํ•œ๋ฒˆ ๊ตฌ๊ฒฝํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด

Panic Attack Helper ๐Ÿšจ

์ง€๋‚˜๊ฐ€๋‹ค๊ฐ€ ์ด ๊ธ€์„ ์ฝ๊ฒŒ๋˜์‹  ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ณ ์ˆ˜๋‹˜์ด ๊ณ„์‹œ๋‹ค๋ฉด ํ•œ ๋ง์”€ ํ•ด์ฃผ์‹œ๋ฉด ๊ณ ๋ง™๊ฒ ์Šต๋‹ˆ๋‹ค ๐ŸŒ
์•„๋‹ˆ๋ฉด ์ข‹์•„์š”๋‚˜ ๊ทธ๋ƒฅ ๋Œ“๊ธ€๋„ ์–ธ์ œ๋“ ์ง€ ํ™˜์˜์ž…๋‹ˆ๋‹ค!!

profile
๐Ÿฅจ UX, Graphic์— ๊ด€์‹ฌ์ด ๋งŽ์€ ์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž. ์ด๋ชจ์ง€ Lover ๐Ÿ’˜

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

comment-user-thumbnail
2020๋…„ 9์›” 24์ผ

ํ— ๋ฒŒ์จ์™„์„ฑ?!

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