๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

๐Ÿ ์ฝ”๋“œ ์‹คํ–‰

์˜คํ”ˆ WebUI๋Š” ์ฑ„ํŒ… ์ธํ„ฐํŽ˜์ด์Šค ๋‚ด์—์„œ ๊ฐ•๋ ฅํ•œ ์ฝ”๋“œ ์‹คํ–‰ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ ํ”Œ๋žซํผ์„ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๊ณ ๋„ ์•„์ด๋””์–ด๋ฅผ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๊ฒฐ๊ณผ๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ํŠน์ง•โ€‹

  • Python ์ฝ”๋“œ ์‹คํ–‰: Pyodide๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ Python ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉฐ, pandas์™€ matplotlib ๊ฐ™์€ ์ธ๊ธฐ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์ • ์—†์ด ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

  • MermaidJS ๋ Œ๋”๋ง: MermaidJS ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฑ„ํŒ…์—์„œ ์ž๋™์œผ๋กœ ๋ Œ๋”๋ง๋˜๋Š” ํ”Œ๋กœ์šฐ์ฐจํŠธ, ๋‹ค์ด์–ด๊ทธ๋žจ ๋ฐ ๊ธฐํƒ€ ์‹œ๊ฐ์  ํ‘œํ˜„์„ ์ƒ์„ฑํ•˜๊ณ  ์‹œ๊ฐํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์•„ํ‹ฐํŒฉํŠธ: HTML ์›น์‚ฌ์ดํŠธ, SVG ๊ทธ๋ž˜ํ”ฝ ๋ฐ JavaScript ์‹œ๊ฐํ™”์™€ ๊ฐ™์€ ํ’๋ถ€ํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ์ง์ ‘ ์ƒ์„ฑํ•˜๊ณ  ์ฑ„ํŒ… ๋‚ด์—์„œ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์‹คํ–‰ ๊ธฐ๋Šฅ์€ ๋Œ€ํ™”๋ฅผ ๊ตฌํ˜„์œผ๋กœ ์—ฐ๊ฒฐํ•˜์—ฌ ์•„์ด๋””์–ด๋ฅผ ํƒ๊ตฌํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„์„ํ•˜๋ฉฐ AI ๋ชจ๋ธ๊ณผ์˜ ์ฑ„ํŒ…์—์„œ ์‹œ๊ฐ์  ์ฝ˜ํ…์ธ ๋ฅผ ๋งค๋„๋Ÿฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.