Panic Attack Helper ๐Ÿšจ ๐Ÿ†˜ -์ค‘๊ฐ„์ ๊ฒ€

banginaยท2020๋…„ 9์›” 12์ผ
2

ํ”„๋กœ์ ํŠธ

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

(์ดˆ์ดˆ์ดˆ๋ฏธ๋‹ˆ) ํ† ์ดํ”„๋กœ์ ํŠธ ๊ฒฝ๊ณผ๋ณด๊ณ 

Panic Attack Helper?

: ๊ณตํ™ฉ์ƒํƒœ๊ฐ€ ์™”์„ ๋•Œ, ๋˜๋Š” ์‹ฌ์‹ ์•ˆ์ •์ด ํ•„์š”ํ•  ๋•Œ Relax ๐Ÿ’†โ€ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์›น์•ฑ

์‚ฌ์šฉ๋œ ๊ธฐ์ˆ 

  • HTML5
  • CSS3
  • Javascript(ES6+)
  • ๋!(SVG์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ๊ทน ํ™œ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ™ƒ )

์ฃผ์š” ๊ธฐ๋Šฅ

  • ๐Ÿšจ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ฐ”๋กœ ํ˜ธํก ๊ฐ€์ด๋“œ ์‹œ์ž‘. (๋ฒ„ํŠผ ๋””์ž์ธ์ค‘)
  • ํ˜ธํก ๊ฐ€์ด๋“œ : ์†๋„ ์กฐ์ ˆ ๊ฐ€๋Šฅ(slower/faster), ์ˆจ์‰ฌ๊ธฐ ์‹œ๊ฐํ™” (์™„๋ฃŒ)
  • ๊ธ€๊ท€ ์ œ๊ณต : ๋ถˆ์•ˆํ•จ ์ž ์žฌ์šฐ๋Š” ๊ธ€๊ท€ ๋ณด์—ฌ์คŒ. (์™„๋ฃŒ/๊ธ€๊ท€ ์ถ”๊ฐ€ ์˜ˆ์ •)
  • ๋๋งˆ์น˜๋ฉด ์นญ์ฐฌ๊ณผ ์šฉ๊ธฐ ๋ฉ˜ํŠธ (You are a surviver!) (Yet)
  • ์ •์‹ ๊ฑด๊ฐ• ํ•ซ๋ผ์ธ ๋ฒˆํ˜ธ ์•„๋ž˜ ์ œ๊ณต (Yet)

๐Ÿ“Œ ์ด์Šˆ?
+)์†๋„ ์กฐ์ ˆ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ circle ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์—ฐ๊ฒฐ๋˜์ง€ ์•Š๊ณ  ๋Š๊น€ โžก ํ•ด๊ฒฐ๋ฐฉ๋ฒ• ์ฐพ์•„๋ณด๊ธฐ
+)In, Out ๋ฉ˜ํŠธ ๋ถ„๋ฆฌํ•˜๊ณ  duration์„ 1/2๋กœ ์กฐ์ ˆํ•˜์—ฌ circle ์• ๋‹ˆ๋ฉ”์ด์…˜ ํ•œ ์‹ธ์ดํด ์•ˆ์— ๋‘˜๋‹ค ํฌํ•จ๋˜๋„๋ก ์ ์šฉ

์–ด๋””๊นŒ์ง€ ๋๋ƒ๋ฉด์š”,,

ํฌ๊ธฐ๊ฐ€ ํฐ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ณ  ์žˆ์–ด์„œใ… ใ…  ์•ฝ๊ฐ„ ํž˜์ด ํ›„๋‹ฌ๋ฆฌ๋Š”๊ฐ€ ํ•˜๋˜ ์ฐจ์— ๋ฆฌํ”„๋ ˆ์‹œ๋˜๋Š” ์žฌ๋ฐŒ๋Š” ์ดˆ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ... ์ชผ๊ธˆ๋งŒ ๋” ์†๋ด์„œ ๋งˆ๋ฌด๋ฆฌ ํ•  ์˜ˆ์ •!

Reference

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

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