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

ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“œ๋Š” ๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€ Part1

์ด์ œ ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์„ ์›น ํŽ˜์ด์ง€๋กœ ๋‚˜ํƒ€๋‚ธ๋‹ค! ์˜ค์ง ํŒŒ์ด์ฌ๋งŒ์„ ์ด์šฉํ•ด ๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด๋ณผ ์ˆ˜ ์žˆ์–ด์š”. ๋ฐ์ดํ„ฐ ๋ถ„์„, ๋จธ์‹ ๋Ÿฌ๋‹ ๋“ฑ ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“  ๊ฒฐ๊ณผ๋ฌผ์„ ์›น ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” Interactive DashBoard๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ์ž…๋‹ˆ๋‹ค!

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ๋ฐ์ดํ„ฐ ๋ถ„์„] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Plotly

  • Dash

  • Callback ํ•จ์ˆ˜

  • ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“ค์–ด๋ณด๋Š” ๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€

  • ์ด์ œ ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์„ ์›น์œผ๋กœ ๋‚˜ํƒ€๋‚ธ๋‹ค!

HTML, CSS, JS ์—†์ด
์˜ค์ง ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“œ๋Š” ์›น ํŽ˜์ด์ง€! ๐Ÿ–ฅ๏ธ

์ด์ œ๋Š” ๋‚˜์˜ ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์„ ์›น ํŽ˜์ด์ง€์œผ๋กœ ๋‚˜ํƒ€๋‚ธ๋‹ค! ๐Ÿ˜Ž

 

 

'ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“œ๋Š” ๋‚˜๋งŒ์˜ ์›นํŽ˜์ด์ง€ Part1'๊ฐ•์˜์— ๋ชฉ์ ? ๐Ÿ˜Ž

 

1. ์ง€๊ธˆ๊นŒ์ง€ ํŒŒ์ด์ฌ์„ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ๋ถ„์„, ๋จธ์‹ ๋Ÿฌ๋‹ ๋“ฑ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ฝ”๋“œ ํ•™์Šต๋งŒ ํ–ˆ๋‹ค๋ฉด, ์ด์ œ๋Š” ๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚˜ํƒ€๋‚ด๊ณ , ํ•˜๋‚˜์˜ ๋„๊ตฌ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํŒŒ์ด์ฌ ์ฝ”๋“œ๋ฅผ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค!

2. ๋‹จ์ˆœํžˆ ์ž์‹ ๋งŒ์˜ ํŒŒ์ด์ฌ ์ฝ”๋“œ ๊ฒฐ๊ณผ๋ฅผ ์›น(Web)์— ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์— ๊ทธ์น˜์ง€ ์•Š๊ณ  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ , ์ˆ˜์ •๋œ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค์‹œ ์›น์œผ๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค!

3. ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๋‹ค์‹œ ์ถœ๋ ฅํ•˜๋Š”๋ฐ ์ฝ”๋“œ ์‹คํ–‰์„ ์ค‘์ง€ํ•˜๊ณ , ํŒŒ๋ผ๋ฏธํ„ฐ ์ˆ˜์ • ํ›„, ๋‹ค์‹œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฒˆ์žกํ•œ ํ–‰์œ„๋Š” ์ด์ œ ๊ทธ๋งŒ!

4. ํŒŒ์ด์ฌ๋งŒ์œผ๋กœ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋ฉด ์ฝ”๋“œ ์‹คํ–‰ ์ค‘์ง€ ๋ฐ ์ฝ”๋“œ ์ˆ˜์ • ์—†์ด ์˜ค๋กœ์ง€ ์›นํŽ˜์ด์ง€์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ ์ˆ˜์ • ๋ฐ ์ˆ˜์ •๋œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ”๋กœ๋ฐ”๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

5. ๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ๊ทธ๋ฆฌ๊ณ  ์›นํŽ˜์ด์ง€๋ฅผ ํ†ตํ•ด ์–ด๋–ค ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ž…๋ ฅ๋ฐ›์„์ง€ ๋“ฑ '๋ณด์—ฌ์ฃผ๊ธฐ'์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๋ฏ€๋กœ์จ ๋‚จ๋“ค๊ณผ๋Š” ์ฐจ๋ณ„ํ™”๋œ ํŒŒ์ด์ฌ ์ฝ”๋“œ ์‹ค๋ ฅ์„ ๊ฐ–์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

 

ํŒŒ์ด์ฌ๋งŒ์œผ๋กœ Interactive Web Page๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ปค๋ฆฌํ˜๋Ÿผ ๐Ÿ˜Ž

(์ž์„ธํ•œ ์ปค๋ฆฌํ˜๋Ÿผ ๋ฐ Project ํ™•์ธ์€ Intro๊ฐ•์˜๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!)

Setion1. Plotly

- Web Page์— Graph๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ํŒŒ์ด์ฌ ๋ชจ๋“ˆ์„ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค
Setion2. Dash

- ํŒŒ์ด์ฌ ๋งŒ์œผ๋กœ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ชจ๋“ˆ์ธ 'Dash'๋ฅผ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค
Setion3. Callback Function

- ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๊ฒ€์ƒ‰์—”์ง„์ฒ˜๋Ÿผ! ์›น ํŽ˜์ด์ง€์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ž…๋ ฅ๋ฐ›๊ณ , ๊ฒฐ๊ณผ๋ฌผ์„ ์ฝ”๋“œ
  ์ˆ˜์ •์—†์ด ๋ฐ”๋กœ๋ฐ”๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ Callback ๊ธฐ๋Šฅ์„
  ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค
Section4. Project

- ๊ตญ๋‚ด์— ์ƒ์žฅ๋œ ์ฝ”์Šคํ”ผ & ์ฝ”์Šค๋‹ฅ ๊ธฐ์—…๋“ค์˜ ์„นํ„ฐ๋ฅผ ๋ถ„๋ฅ˜ํ•˜๊ณ , ๊ฐ™์€ ์„นํ„ฐ ๋‚ด์—์„œ ๊ธฐ์—…๋“ค
์˜ ์ฃผ๊ฐ€๋ฅผ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค

 

๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€ ์ œ์ž‘,
ํŒŒ์ด์ฌ๋งŒ์œผ๋กœ ๊ฐ€๋Šฅํ•ด์š”! ๐Ÿ˜Ž

ํŒŒ์ด์ฌ์„ ํ™œ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ ๋ถ„์„, ๋จธ์‹ ๋Ÿฌ๋‹ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด ๋ณด์‹  ๊ฒฝํ—˜์ด ์žˆ์œผ์‹ ๊ฐ€์š”? ๊ทธ๋ ‡๋‹ค๋ฉด ์ด์ œ๋Š” ๋‹ค์–‘ํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ๊ณ ๋ฏผํ•  ์ฐจ๋ก€์ž…๋‹ˆ๋‹ค. ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์„ ๊ฐœ๋ฐœํ™˜๊ฒฝ(Spyder, Jupyter Notebook, PyCharm)์ด ์•„๋‹Œ ์›น์—์„œ ํ‘œํ˜„ํ•ด ๋ณด์„ธ์š”!

๋ณธ ๊ฐ•์˜์—์„  HTML/CSS/JS ์ง€์‹ ์—†์ด ์˜ค์ง ํŒŒ์ด์ฌ๋งŒ์„ ์ด์šฉํ•ด ๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. ์›น ํŽ˜์ด์ง€์— ๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ์ถœ๋ ฅํ•˜๊ณ  ํ™•์ธ ๋ฐ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” Interactive Web Page๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์š”.

๊ฐ•์˜์—์„œ๋Š” ๊ฐ Section์˜ ์ฝ”๋“œ ๋‚ด์šฉ์„ Jupyter Notebook ํŒŒ์ผ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ ์ œ๊ณตํ•˜๋Š” Jupyter Notebook ๋งค๋‰ด์–ผ์„ ์ฐธ๊ณ ํ•˜๋ฉด์„œ ๊ฐ•์˜๋ฅผ ์‰ฝ๊ฒŒ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™†โ€โ™€๏ธ

ํŒ๋‹ค์Šค(Pandas)๋ฅผ ํ™œ์šฉํ•ด ๋ฐ์ดํ„ฐ ๋ถ„์„์„ ํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„

๋ณธ๊ฒฉ์ ์ธ ์›น ๊ณต๋ถ€ ์ „์— ๋‚˜๋งŒ์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

ํŒŒ์ด์ฌ์œผ๋กœ ๋ฐ์ดํ„ฐ ๋ถ„์„, ๋จธ์‹ ๋Ÿฌ๋‹ ๋“ฑ์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด๋ณด์‹  ๋ถ„

๊ฐ•์˜๋ฅผ ๋“ค์€ ํ›„ ์—ฌ๋Ÿฌ๋ถ„์€

โœ… ํŒŒ์ด์ฌ์œผ๋กœ ๋งŒ๋“  ๊ฒฐ๊ณผ๋ฅผ Web Page์— ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

โœ… ์ž์‹ ๋งŒ์˜ Interactvie Web Page๋ฅผ ๋งŒ๋“ค๊ณ , ์ฝ”๋“œ ์ •์ง€ ์—†์ด ์ˆ˜์ •๋œ ๋ณ€์ˆ˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋ฐ”๋กœ๋ฐ”๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ… ์ฝ”๋“œ ์ž‘์„ฑ์— ์žˆ์–ด ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๊ฒฐ๊ณผ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ๊ณ ๋ฏผํ•˜๋Š” ๋Šฅ๋ ฅ์„ ํ‚ค์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.


Q&A ๐Ÿ’ฌ

Q. HTML/CSS/JS ํ˜น์€ ์›น์— ๋Œ€ํ•œ ์ง€์‹์ด ์—†์–ด๋„ ์ˆ˜๊ฐ•์ด ๊ฐ€๋Šฅํ• ๊นŒ์š”?

๋„ค! ํ•ด๋‹น ๊ฐ•์˜๋Š” ์˜ค์ง ํŒŒ์ด์ฌ๋งŒ์œผ๋กœ ์ˆ˜์—…์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. 

Q. ํŒŒ์ด์ฌ์€ ์–ด๋Š ์ •๋„๊นŒ์ง€ ๋‹ค๋ฃฐ ์ค„ ์•Œ์•„์•ผ ํ• ๊นŒ์š”?

Pandas๋ฅผ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ๋ถ„์„์„ ํ•ด๋ณด์…จ๋˜ ๋ถ„๋“ค์ด๋ผ๋ฉด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค! ๋ฌผ๋ก  Pandas๊ฐ€ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํ•„์ˆ˜ ์ง€์‹์€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ๋„ Pandas๋ฅผ ์ œ์‹œํ•œ ์ด์œ ๋Š” ํ•ด๋‹น ๊ฐ•์˜ Project์—์„œ ๋ฐ์ดํ„ฐ ๋ถ„์„์„ ์œ„ํ•ด Pandas๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Q. Basic ์ดํ›„ Advanced ๊ฐ•์ขŒ๋„ ์žˆ์„๊นŒ์š”?

๋„ค! ์šฐ์„  Basic ๊ฐœ๊ฐ• ํ›„ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ๋ฐ˜์‘ ๋ฐ ์š”๊ตฌ์‚ฌํ•ญ์„ ํ† ๋Œ€๋กœ Advanced ๊ฐ•์˜๋ฅผ ๊ธฐํšํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. Basic ๊ฐ•์˜์—์„œ๋Š” ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฌผ์„ ์›น ํŽ˜์ด์ง€์—์„œ ํ‘œํ˜„ํ•˜๊ณ  Callback ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•œ Interactive Web Page๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์ •๋„๊นŒ์ง€๋งŒ ์ง„ํ–‰์ด ๋ฉ๋‹ˆ๋‹ค!


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

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

  • ์˜ค์ง ํŒŒ์ด์ฌ๋งŒ์œผ๋กœ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์ˆ˜๊ฐ•์ƒ

  • ์ด์ œ๋Š” ํŒŒ์ด์ฌ ๊ฒฐ๊ณผ๋ฅผ IDE(Spyder, JupyterNotebook, PyCharm)์ด ์•„๋‹Œ ์›น ํŽ˜์ด์ง€๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์€ ์ˆ˜๊ฐ•์ƒ

  • Interactive Web Page๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ์ˆ˜๊ฐ•์ƒ

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

  • ํŒŒ์ด์ฌ

  • Pandas

์•ˆ๋…•ํ•˜์„ธ์š”
Suit & Coffee์ž…๋‹ˆ๋‹ค.

140

๋ช…

์ˆ˜๊ฐ•์ƒ

9

๊ฐœ

์ˆ˜๊ฐ•ํ‰

26

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ŠˆํŠธ์™€ ์ปคํ”ผ๋ฅผ ์ข‹์•„ํ•˜๋Š” ์ง์žฅ์ธ Suit&Coffee ์ž…๋‹ˆ๋‹ค

ํ˜„์žฌ ๊ธˆ์œต๊ถŒ์—์„œ ๋ฐ์ดํ„ฐ ๋ถ„์„ ๋ฐ ์ž๊ธˆ์šด์šฉ์„ ์ฃผ ์—…๋ฌด๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ๋ถ„์„์„ ํ•˜๋ฉด์„œ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„๋“ค์„ ๊ฐ•์˜๋กœ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ €์˜ ๊ฒฝํ—˜๋“ค์ด ๋„์›€์ด ๋˜๊ธธ ๋ฐ”๋ผ๋ฉฐ ์—ด์‹ฌํžˆ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

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

์ „์ฒด

43๊ฐœ โˆ™ (6์‹œ๊ฐ„ 12๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

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