Webix ๋ฆฌ๋ทฐ 2024: ์ตœ๊ณ ์˜ JavaScript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ํ”„๋ ˆ์ž„์›Œํฌ์ธ๊ฐ€์š”?

Webix JavaScript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฒ€ํ† 

์ „๋ฐ˜์ ์ธ ํ‰๊ฒฐ

Webix๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ HTML5 ๋ฐ CSS/JS ์ปจํŠธ๋กค์„ ์‚ฌ์šฉํ•˜์—ฌ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์•ฑ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์—ฌ ์›น ๊ฐœ๋ฐœ ์†๋„๋ฅผ ๋†’์ด๋Š” JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. Webix๋Š” ์›น์‚ฌ์ดํŠธ ๋˜๋Š” ์•ฑ์„ ์œ„ํ•œ ๋ฐ˜์‘ํ˜• ์†Œ์žฌ ๋””์ž์ธ ์Šคํ‚จ์„ ํฌํ•จํ•˜์—ฌ 99๊ฐœ ์ด์ƒ์˜ ์œ„์ ฏ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!
8.5

10์—์„œ

์žฅ์ 

  • ๋น ๋ฅด๊ณ  ํฌ๊ด„์ ์ธ
  • ์†์‰ฌ์šด ํƒ€์‚ฌ ํ†ตํ•ฉ
  • ๋ฉ€ํ‹ฐ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋Šฅ
  • ๋ชจ๋“  ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์ฝœ๋ฐฑ: ๋กœ๋“œ, ์ •๋ ฌ ๋“ฑ
  • ๋ฌด๋ฃŒ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ
  • ํ‚ค๋ณด๋“œ ํƒ์ƒ‰

๋‹จ์ 

  • ๊ฐ€๊ฒฉ์ด ์ข€ ๋น„์‹ธ์š”
  • ํฌ๊ด„์ ์ธ ๋ฌธ์„œ๊ฐ€ ๋ถ€์กฑํ•จ
  • Java ํ”„๋ ˆ์ž„์›Œํฌ์šฉ ํ†ตํ•ฉ ์ƒ˜ํ”Œ์ด ๋” ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

ํ‰๊ฐ€:

๊ฐ€๊ฒฉ: $ 449

ํŽธ๊ฒฌ ์—†๋Š” Webix ๋ฆฌ๋ทฐ 2024์„ ์ฐพ๊ณ  ๊ณ„์‹ญ๋‹ˆ๊นŒ? ์ข‹์Šต๋‹ˆ๋‹ค! ๋‚ด๊ฐ€ ๋„์™€์ค„๊ฒŒ.

JavaScript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€ ์ „ํ˜€ ์ž‘์„ฑํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Webix๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด์ œ JavaScript ํ•œ ์ค„๋„ ์ž‘์„ฑํ•  ํ•„์š” ์—†์ด ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์›น ์•ฑ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

Webix๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์›น ์•ฑ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์ตœ๊ณ ์˜ JS ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๋ฐ˜์‘ํ˜• ์›น ์œ„์ ฏ, ๊ณ ์„ฑ๋Šฅ, ๊ฒฝ๋Ÿ‰ ์ฝ”๋“œ ๋ฐ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ํ˜ธํ™˜์„ฑ ๋งˆ์ผ€ํŒ…์„ ๊ฐ–์ถ˜ HTML5 JavaScript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์›น ์•ฑ ๊ตฌ์ถ•์ด ๊ทธ ์–ด๋Š ๋•Œ๋ณด๋‹ค ์‰ฌ์›Œ์กŒ์Šต๋‹ˆ๋‹ค! ์ด ์ œํ’ˆ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋”ฉ ์ž‘์—…์ด ์ค„์–ด๋“ค๊ณ  ์ข‹์•„ํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊ธธ ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์ด ๋Š˜์–ด๋‚ฉ๋‹ˆ๋‹ค.

2013 ๋…„์— ์„ค๋ฆฝ ๋œ, ์›จ๋น…์Šค ๊ณ ๊ธ‰์Šค๋Ÿฝ๊ณ  ๊ด‘๋ฒ”์œ„ํ•œ ์˜จ๋ผ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌt ๋ฐ HTML5 ๋„๊ตฌ ์„ค๊ณ„ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ณ ํ’ˆ์งˆ์˜ ์›น ์ œํ’ˆ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์˜ค๋Š˜, ์›จ๋น…์Šค ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค JavaScript/HTML5 ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‹œ์žฅ์—์„œ๋Š” ์ฝ”๋”์™€ ๊ฐœ๋ฐœ์ž ๋…ํŠนํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” ์ฐจํŠธ, ๋ณด๊ณ ์„œ, ํ”ผ๋ฒ—, ๋ณต์žกํ•œ ๋„๊ตฌ ๋ฐ ๊ธฐํƒ€๋ฅผ ํฌํ•จํ•œ ๋น… ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๋‹ค์–‘ํ•œ ์œ„์ ฏ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” ๊ณผ ํŠธ๋ฆฌํ…Œ์ด๋ธ” ์œ„์ ฏ. Webix๋Š” XB์— ์˜ํ•ด ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์†Œํ”„ํŠธ์›จ์–ด ํšŒ์‚ฌ๋Š” ๊ด‘๋ฒ”์œ„ํ•œ UX/UI๋ฅผ ๊ฐ–์ถ˜ ๋งž์ถคํ˜• ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์†”๋ฃจ์…˜์˜ ์ „์ฃผ๊ธฐ ๊ฐœ๋ฐœ ํšŒ์‚ฌ์ž…๋‹ˆ๋‹ค.

์›น๋น…์Šค ๊ฒ€ํ† 

๊ฒฐ๋ก  ์„ ๊ฒฐ์ œ: Webix๋Š” ๋‹ค์–‘ํ•˜๊ณ  ๊ฐ•๋ ฅํ•œ ์˜จ๋ผ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, JavaScript์™€ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ํ›Œ๋ฅญํ•œ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. ์†Œ๊ทœ๋ชจ ๋˜๋Š” ๋Œ€๊ทœ๋ชจ ์˜จ๋ผ์ธ ๋น„์ฆˆ๋‹ˆ์Šค์ธ ๊ฒฝ์šฐ Webix๋Š” ๋ชจ๋“  ์œ ํ˜•์˜ ๋น„์ฆˆ๋‹ˆ์Šค์— ์ ํ•ฉํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ธํ„ฐํŽ˜์ด์Šค์ด๋ฉฐ Webix Jet Library๋Š” SPA ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์‚ฌ์šฉ์„ฑ ๊ฒฝํ—˜์„ ๋งค์šฐ ์‚ฌ์šฉ์ž ์นœํ™”์ ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ณ ๊ฐ ์„œ๋น„์Šค ํŒ€์€ ํ›Œ๋ฅญํ•œ ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋Š” ์•ˆ์ •์ ์ด๊ณ  ๋ฒ„๊ทธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„๊ณผ ๋…ธ๋ ฅ์„ ์ ˆ์•ฝํ•˜์„ธ์š”. ์ง€๊ธˆ Webix ์„œ๋น„์Šค๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”.

Webix-๋ฆฌ๋ทฐ

์ฐจ๋ก€

Webix ๋ฆฌ๋ทฐ 2024(์žฅ๋‹จ์ ): ์ƒ์„ธ ๋ถ„์„

webix ๋ฆฌ๋ทฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

ํ’ˆ์งˆ๊ณผ ์‹ ๋ขฐ์„ฑ!

์„ฑ๋Šฅ๊ณผ ํ’ˆ์งˆ์— ๋Œ€ํ•œ ์‹ ๋ขฐ์„ฑ ์ธก๋ฉด์—์„œ, ์›จ๋น…์Šค ๊ณ ๊ธ‰ ์„ฑ๋Šฅ ์ง€ํ–ฅ ๋„๊ตฌ ๊ฐœ๋ฐœ ๋ถ„์•ผ์—์„œ 5๋…„ ์ด์ƒ์˜ ์‹œ์žฅ ๊ฒฝํ—˜์„ ๋ณด์œ ํ•œ ๊ณ ๋„๋กœ ์ˆ™๋ จ๋œ ์ „๋ฌธ๊ฐ€๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ HTML5 ์ „์„ธ๊ณ„ ๊ฐœ๋ฐœ์ž๋“ค. ์ด ํšŒ์‚ฌ๋Š” ๋˜ํ•œ ISO27001 ๋ฐ ISO9001 ์ธ์ฆ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.                                                                                                     

๊ฐœ๋ฐœ ๋„๊ตฌ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ JavaScript๋กœ ๋ทฐ์˜ JSON ๊ตฌ์„ฑ์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋ฉฐ ์‹ฌ์˜คํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋ถ„์„์„ ํ†ตํ•ด ํ•ต์‹ฌ ์†”๋ฃจ์…˜์„ ์ž‘์—…ํ•˜๊ณ  ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

์ œ๊ณต๋˜๋Š” ์„œ๋น„์Šค

webix UI ๋ฆฌ๋ทฐ webix UI ๋ฆฌ๋ทฐ

์ฐฝ์ž‘์ž ์›จ๋น…์Šค ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ณ ์œ ํ•œ UI๋ฅผ ๋” ์ข‹๊ณ  ๋” ๋น ๋ฅด๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๊ธฐ ์œ„ํ•ด ์ตœ์„ ์„ ๋‹คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์˜ ์„œ๋น„์Šค์™€ ๋„๊ตฌ๋Š” ์ „ ์„ธ๊ณ„ ์ˆ˜๋ฐฑ ๊ฐœ์˜ ํšŒ์‚ฌ์™€ ์กฐ์ง์—์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋Š” ๋ชจ๋“  ๊ทœ๋ชจ ๋˜๋Š” ํ‹ˆ์ƒˆ ์‹œ์žฅ์˜ ๋น„์ฆˆ๋‹ˆ์Šค์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ์—์„œ ์ค‘์†Œ๊ธฐ์—… Fortune 500๋Œ€ ๊ธฐ์—…์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ Webix UI ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์ œํ’ˆ ๋ฐ ๋‚ด๋ถ€ ์›น ๋ฆฌ์†Œ์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ๋ชจ๋‘ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ด ํšŒ์‚ฌ๋Š” ํ‰๊ท  5๋…„ ์ด์ƒ์˜ ๋งˆ์ผ€ํŒ… ๊ฒฝํ—˜์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํ˜„์žฌ 50๋ช… ์ด์ƒ์˜ ๊ฐœ๋ฐœ์ž๋ฅผ ์ง€์›ํ•˜๊ณ  30๊ฐœ ์ด์ƒ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง€์›ํ•œ ๊ธฐ๋ก์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋“ค ์„œ๋น„์Šค๋Š” 65๊ฐœ ์ด์ƒ์˜ ๊ตญ๊ฐ€์— ๊ฑธ์ณ ์žˆ์œผ๋ฉฐ ๋›ฐ์–ด๋‚œ ๊ณ ๊ฐ ์„œ๋น„์Šค ์ง€์›์œผ๋กœ 70%๋ผ๋Š” ์ธ์ƒ์ ์ธ ๊ณ ๊ฐ ์œ ์ง€์œจ์„ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค.

์›จ๋น…์Šค ์„œ๋น„์Šค๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ ๋ฐ ํ™œ๋™์— ๋„๋ฆฌ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋งž์ถคํ˜• ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ

  •       ๋‹ค์–‘ํ•œ ์‚ฐ์—… ๋ถ„์•ผ๋ฅผ ์œ„ํ•œ ์ตœ๊ณ  ์ˆ˜์ค€์˜ ์›น ์•ฑ ๋งž์ถคํ˜• ๊ฐœ๋ฐœ
  •       ์•ฑ ํ˜„๋Œ€ํ™” ๋ฐ ๋ ˆ๊ฑฐ์‹œ ์‹œ์Šคํ…œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
  •       ๋ฐ์ดํ„ฐ๋ฅผ ํ…Œ์ด๋ธ”, Gantts, ์ฐจํŠธ, ๋‹ค์ด์–ด๊ทธ๋žจ์œผ๋กœ ๋ Œ๋”๋ง
  •       ๋งž์ถคํ˜• ์ง€์› ๋ฐ ์œ ์ง€ ๊ด€๋ฆฌ

Webix ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ ๊ฐœ๋ฐœ

  •       ์ฒ˜์Œ๋ถ€ํ„ฐ Webix๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์•ฑ ๊ฐœ๋ฐœ
  •       Webix ์œ„์ ฏ ์‚ฌ์šฉ์ž ์ •์˜
  •       Webix ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ธฐ์กด ์•ฑ์— ํ†ตํ•ฉ
  •       Webix๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ ๊ฐ ์•ฑ์˜ UI ๊ฐœ์„  ๋ฐ ์•ฑ ํ˜„๋Œ€ํ™” ๊ฐ€๋Šฅ

์ •๋ณด ๊ธฐ์ˆ  ์ง์› ์ฆ์›

  •       ์ˆ™๋ จ๋œ ์›น ๊ฐœ๋ฐœ์ž์˜ ์ฆ๊ฐ•
  •       QAํŒ€ ๋ณด๊ฐ•

์„œ๋น„์Šค ๋ผ์ธ

Webix๋Š” ํ˜„์žฌ ๋‹ค์Œ ์„œ๋น„์Šค ๋ผ์ธ์— ๋Œ€ํ•œ ์ „๋ฌธ ์ง€์‹์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  •       ๋งž์ถคํ˜• ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ
  •       Webix ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ ๊ฐœ๋ฐœ
  •       ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ฐ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ๋ชจ๋ฐ”์ผ ๊ฐœ๋ฐœ
  •       UX/UI ๊ฐœ๋ฐœ ๋ฐ ๋””์ž์ธ
  •       ๊ฐœ๋ฐœ์ž/QA ๋ฐ ํŒ€ ๊ฐ•ํ™”
  •       ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์•ฑ ํ˜„๋Œ€ํ™”

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

Webix๋Š” ๊ฐ•๋ ฅํ•œ 100๊ฐœ๊ฐ€ ๋„˜๋Š” UI ์œ„์ ฏ๊ณผ ํ’๋ถ€ํ•œ ๊ธฐ๋Šฅ์˜ JavaScript CSS/HTML5 ์ปจํŠธ๋กค์„ ๊ฐ–์ถ˜ ์›น ์•ฑ ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. 

  •       . NET
  •       React JS
  •       WebRTC๊ฐ€
  •       ๋งˆ๋ฆฌ์˜ค๋„คํŠธ JS
  •       PHP
  •       ๋…ธ๋“œ JS

์›น๋น…์Šค ์ œํŠธ

webix JS ๋ฆฌ๋ทฐWebix์˜ ๋งˆ์ดํฌ๋กœํ”„๋ ˆ์ž„์›Œํฌ, ์›น๋น…์Šค ์ œํŠธ ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜, ํŠนํžˆ ๋Œ€๋Ÿ‰์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‰ฝ๊ฒŒ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. UI์˜ ๋‹ค์–‘ํ•œ ๋ถ€๋ถ„์„ ๊ฒฐํ•ฉํ•˜๊ณ  ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Webix Jet์˜ ๋„์›€์œผ๋กœ ์ตœ์†Œํ•œ์˜ ์ฝ”๋“œ ๊ณต๊ฐ„์œผ๋กœ ์™„๋ฒฝํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ณ  ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Webix Jet์—์„œ๋Š” ์ฝ”๋“œ์™€ UI๊ฐ€ ๋ณ„๋„์˜ ๋ชจ๋“ˆ๋กœ ๋‚˜๋ˆ„์–ด์ง‘๋‹ˆ๋‹ค. ์•ฑ ์ „์ฒด์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” JavaScript ํด๋ž˜์Šค๊ฐ€ ๊ฐ ๋ชจ๋“ˆ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋งค์šฐ ๋ณต์žกํ•œ UI๋ผ๋„ ๋ณ„๋„๋กœ ์‚ฌ์šฉํ•˜๊ณ  ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ๋ณ„๋„์˜ ์„น์…˜์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹จ์ผ ํŽ˜์ด์ง€ ์•ฑ์„ ์‰ฝ๊ฒŒ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ์›นํŒฉ ๊ธฐ๋ฐ˜ ๋„๊ตฌ ์ฒด์ธ์„ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ES6 ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ JS ์ฝ”๋“œ, CSS ์Šคํƒ€์ผ์šฉ LESS/SASS๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Webpack์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž ์ •์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ํฌํ•จํ•˜๊ณ  ๋ฒˆ๋“ค๋งํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. plugin์—์Šค. ๋ฉ”๋‰ด ์ƒ์„ฑ, ํ˜„์ง€ํ™”, ์•ก์„ธ์Šค ์ œ์–ด, ์•Œ๋ฆผ ๋ฐ ์Šคํ‚จ ์ ์šฉ์€ ์ฆ๊ฑฐ์šด ์ผ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Webix Jet ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์•ฑ์˜ ์—ฌ๋Ÿฌ ์ง„์ž…์ ์—์„œ ์ฝ”๋“œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ๊ตฌ์„ฑํ•˜๊ณ  ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์žฅ์น˜ ๋ฐ˜์‘ํ˜• ์•ฑ์—๋„ ํ›Œ๋ฅญํ•œ ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ์•ฑ ๋นŒ๋“œ ๋ฐ์Šคํฌํ†ฑ ๋ฐ ํ„ฐ์น˜ ์žฅ์น˜ ๋ชจ๋‘์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์žฅ์น˜์— ๋Œ€ํ•ด ์ •์˜ํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

DataTable ์œ„์ ฏ

XNUMXD๋ดํƒˆ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” (DataGrid) ์œ„์ ฏ์€ ๋ฏธ๋ฆฌ ์ •์˜๋œ 5๊ฐœ์˜ ์Šคํ‚จ์œผ๋กœ ํ‘œํ˜„๋˜๋Š” Webix UI ์‹œ์Šคํ…œ์˜ ์ตœ์ƒ์œ„ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋Š” ๋‘ ๊ฐ€์ง€ ๋ณ€ํ˜•์ด ์žˆ์Šต๋‹ˆ๋‹ค. GNU GPLv3 ๋ผ์ด์„ผ์Šค์— ๋”ฐ๋ผ Webix Standard๋ฅผ ๋ฌด๋ฃŒ ์˜คํ”ˆ ์†Œ์Šค UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ •์‹ ๋ฒ„์ „ ์•ก์„ธ์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ƒ์—… ํ—ˆ๊ฐ€์ฆ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Webix_UI_JavaScript_library_Facebook ๋ฆฌ๋ทฐ

์›จ๋น…์Šค UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ณ ํšจ์œจ ๋ฐ ์‚ฌ์šฉ์ž ์ •์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•˜๋Š” ๋ฐ ์ค‘์ ์„ ๋‘๊ณ  ๋น„์ฆˆ๋‹ˆ์Šค ๋Œ€์•ˆ ๋ฐ ์†”๋ฃจ์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด Salesforce์˜ CRM ๋Œ€์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŽธ์ง‘ ๊ฐ€๋Šฅํ•œ ํ…Œ์ด๋ธ” JavaScript๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›ํ™œํ•œ ๋ฐ์ดํ„ฐ ์ž…๋ ฅ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์•„๋ฌด ์…€์ด๋‚˜ ๋ˆ„๋ฅด๋ฉด ๋‚ด์šฉ์„ ํŽธ์ง‘ํ•˜๋‹ค ์ž…๋ ฅ ์˜์—ญ์— ์ƒˆ๋กœ์šด ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ฑฐ๋‚˜ ๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก์—์„œ ํ•ญ๋ชฉ์„ ์„ ํƒํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ด ๋จธ๋ฆฌ๊ธ€์„ ํ•œ ๋ฒˆ๋งŒ ํด๋ฆญํ•˜๋ฉด ํ…Œ์ด๋ธ” ๊ฐœ์ฒด๋ฅผ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠน์ • ์ •๋ ฌ ๋™์ž‘์˜ ๊ฒฝ์šฐ DataTable ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ด ๋จธ๋ฆฌ๊ธ€์— ๋‚ด์žฅ๋œ ํ•„ํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ…Œ์ด๋ธ” ๊ฐœ์ฒด๋ฅผ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠน์ • ์ƒ˜ํ”Œ๋ง ํŒจํ„ด์˜ ๊ฒฝ์šฐ DataTable ํ•„ํ„ฐ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŠน์ • ์œ„์น˜๋กœ ๋Œ์–ด์„œ ์„ ์˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 'order' ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ํŒจ๋„ ํ…Œ๋‘๋ฆฌ์—์„œ ๊ฐœ์ฒด๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TreeTable ์œ„์ ฏ

webix ๋ฐ๋ชจ ํŠœํ† ๋ฆฌ์–ผ webix ๋ฐ๋ชจ ํŠœํ† ๋ฆฌ์–ผ

XNUMXD๋ดํƒˆ์˜ Webix JavaScript ํŠธ๋ฆฌํ…Œ์ด๋ธ” ๋Š” DataGrid ์š”์†Œ์— ์ค‘์ ์„ ๋‘๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ŠคํŒŒํฌ๋ผ์ธ, ํด๋ฆฝ๋ณด๋“œ ๋„์›€๋ง, ์ •๊ตํ•œ ํ•„ํ„ฐ ๋“ฑ์„ ํฌํ•จํ•œ ๋ชจ๋“  ํŠน์ง•๊ณผ ํŠน์„ฑ์„ ๊ฐ–์ถ”๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Webix TreeTable ์š”์†Œ๋Š” rowspan, colspan ๋ฐ ๊ทธ๋ฆฌ๋“œ ๊ทธ๋ฃนํ™”์™€ ๊ฐ™์ด DataGrid์—์„œ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ๊ทธ๋ฃนํ™”์™€ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ํ†ตํ•ฉํ•ฉ๋‹ˆ๋‹ค.

ํ–‰๊ณผ ์—ด์˜ ๊ฒฝ์šฐ ์œ„์ ฏ์€ ๋ณ„๋„์˜ ์ฒ ์ €ํ•œ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ์ •๊ตํ•จ, ๋ชจ๋“  ์—ฌ๋ฐฑ์˜ ๋„ˆ๋น„ ๋ณ€๊ฒฝ ๋ฐ ์ˆ˜์ง ํ—ค๋” ์ƒ์„ฑ ๊ฐ€๋Šฅ์„ฑ์„ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค.

ํŠธ๋ฆฌ ํ…Œ์ด๋ธ”์€ ๊ทธ๋ฆฌ๋“œ ์กฐ์ž‘์˜ ์ „์ฒด ์ŠคํŽ™ํŠธ๋Ÿผ์„ ์ด‰์ง„ํ•ฉ๋‹ˆ๋‹ค. ์ž…๋ ฅ ๋„๋ฉ”์ธ์— ์ƒˆ๋กœ์šด ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ฑฐ๋‚˜ ๋” ๋‚˜์€ ์œ ์šฉ์„ฑ์„ ์œ„ํ•ด ํ™•์ธ๋ž€์ด ์ œ๊ณต๋  ์ˆ˜ ์žˆ๋Š” ๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก์—์„œ ๋Œ€์•ˆ์„ ์„ ํƒํ•˜์—ฌ ํ•ด๋‹น ๋‚ด์šฉ์„ ์‰ฝ๊ฒŒ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด JavaScript ํŠธ๋ฆฌ ํ…Œ์ด๋ธ” ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ถ”๊ฐ€ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์ •๋ณด๋ฅผ PDF, PNG ๋ฐ Excel ๋ฌธ์„œ๋กœ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ๋‚ด๋ณด๋‚ด๊ธฐ ๋Œ€์•ˆ์„ ํ†ตํ•ฉํ•˜์—ฌ ํ›„์† ํ…Œ์ด๋ธ” ๋ชจ์–‘์„ ์„ค๋ช…ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐœ์ฒด ์„ ํƒ ์™ธ์—๋„ TreeGrid ์š”์†Œ์˜ ํ™•์ธ๋ž€์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์€ ํŽธ์ง‘ํ•˜๊ฑฐ๋‚˜ ์ œ๊ฑฐํ•˜๋ ค๋Š” ๋‹ค์–‘ํ•œ ๊ฐœ์ฒด๋ฅผ ํ•œ ๋ฒˆ์— ์„ ํƒํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ํŠธ๋ฆฌ ํ…Œ์ด๋ธ”์€ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ํ•„ํ„ฐ๋ง์„ ์ด‰์ง„ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด์žฅ ํ•„ํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž ์ •์˜ ํ•„ํ„ฐ๋ฅผ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒจ๋„์— ์ œ์ถœ๋œ ์ •๋ณด์˜ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ํ•„์ˆ˜ ์—ด์— ๋Œ€ํ•ด ์•ก์„ธ์Šค ๊ฐ€๋Šฅํ•œ ํ•„ํ„ฐ ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Webix ๋ผ์ด์„ผ์Šค ๋ฐ ๊ฐ€๊ฒฉ

Webix๋Š” ํ˜„์žฌ ๊ณ ๊ฐ์ด ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์ž˜ ์ •๋ฆฌ๋œ 4๊ฐ€์ง€ ํŒจํ‚ค์ง€ ๋ผ์ธ์—…์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๊ฒฉํ‘œ๋„ ๋งค์šฐ ํ•ฉ๋ฆฌ์ ์ด๋ฏ€๋กœ Webix๋Š” ๋งค์šฐ ๋น„์šฉ ํšจ์œจ์ ์ธ ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

๊ฐœ์ธ ๋ผ์ด์„ ์Šค

Webix-๊ฐœ์ธ-๋ผ์ด์„ผ์Šค-๊ฐ€๊ฒฉ

๋‹จ์ผ ํ”„๋กœ์ ํŠธ ๋˜๋Š” MVP๋ฅผ ์ž‘์—…ํ•˜๋Š” ํ•œ ๋ช…์˜ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€๊ฒฉ : $ 449

  •       ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ
  •       ํ•œ ๋ช…์˜ ๊ฐœ๋ฐœ์ž
  •       XNUMX๋…„ ๊ฐ„์˜ ์—…๋ฐ์ดํŠธ ๋ฐ ์ง€์›
  •       ํฌ๋กœ์Šค ํ”Œ๋žซํผ์šฉ Webix UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  •       ์˜๊ตฌ ์ƒ์—…์šฉ ๋ผ์ด์„ผ์Šค
  •       ๊ธฐ๋ณธ ์ง€์›

๋ณต์žกํ•œ ์œ„์ ฏ: (์„ ํƒ ์‚ฌํ•ญ)

  •       ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ ($329)
  •       ํ”ผ๋ฒ— ($99)
  •       ์Šค์ผ€์ค„๋Ÿฌ ($329)
  •       ํŒŒ์ผ ๊ด€๋ฆฌ์ž($99)
  •       ์นธ๋ฐ˜ ($99)

์ƒ์—…์šฉ ๋ผ์ด์„ผ์Šค 

ํšŒ์‚ฌ ํŒฉ

Webix-์ƒ์—…-๋ผ์ด์„ผ์Šค-๊ฐ€๊ฒฉ

๋‚ด๋ถ€ ํšŒ์‚ฌ ํ”„๋กœ์ ํŠธ ๋˜๋Š” ๋‹จ์ผ ์ƒ์—… ํ”„๋กœ์ ํŠธ์— ์ ํ•ฉ

๊ฐ€๊ฒฉ : $ 2499

  •       ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ
  •       ๊ฐœ๋ฐœ์ž ์ˆ˜ ๋ฌด์ œํ•œ
  •       XNUMX๋…„ ๊ฐ„์˜ ์—…๋ฐ์ดํŠธ ๋ฐ ์ง€์›
  •       Webix UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  •       ์˜๊ตฌ ์ƒ์—…์šฉ ๋ผ์ด์„ผ์Šค
  •       ํ‘œ์ค€ ์ง€์›

๋ณต์žกํ•œ ์œ„์ ฏ: (ํฌํ•จ)

๊ฐœ๋ฐœํŒ€ ํŒฉ

์—ฌ๋Ÿฌ ๊ณ ๊ฐ์„ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋Š” ๊ฐœ๋ฐœ ํšŒ์‚ฌ์— ์ ํ•ฉ

๊ฐ€๊ฒฉ : $ 3999

  •       ๋ฌด์ œํ•œ ํ”„๋กœ์ ํŠธ ์ˆ˜
  •       5๋ช… ์ด์ƒ์˜ ๊ฐœ๋ฐœ์ž
  •       XNUMX๋…„ ๊ฐ„์˜ ์—…๋ฐ์ดํŠธ ๋ฐ ์ง€์›
  •       Webix UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  •       ์˜๊ตฌ ์ƒ์—…์šฉ ๋ผ์ด์„ผ์Šค
  •       ํ‘œ์ค€ ์ง€์›

๋ณต์žกํ•œ ์œ„์ ฏ: (ํฌํ•จ)

์–ธ๋ฆผํŒฉ

์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์™€ ๋Œ€๊ทœ๋ชจ ํŒ€์ด ์žˆ๋Š” ๋Œ€๊ทœ๋ชจ ๊ฐœ๋ฐœ ํšŒ์‚ฌ์— ์ ํ•ฉ

๊ฐ€๊ฒฉ : $ 3999

  •       ๋ฌด์ œํ•œ ํ”„๋กœ์ ํŠธ ์ˆ˜
  •       ๊ฐœ๋ฐœ์ž ์ˆ˜ ๋ฌด์ œํ•œ
  •       XNUMX๋…„ ๊ฐ„์˜ ์—…๋ฐ์ดํŠธ ๋ฐ ์ง€์›
  •       Webix UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  •       ์˜๊ตฌ ์ƒ์—…์šฉ ๋ผ์ด์„ผ์Šค
  •       ํ‘œ์ค€ ์ง€์›

๋ณต์žกํ•œ ์œ„์ ฏ: (ํฌํ•จ)

**๋ชจ๋“  ํ”Œ๋žœ์—๋Š” ์˜๊ตฌ ์ƒ์šฉ ๋ผ์ด์„ผ์Šค์™€ XNUMX๋…„ ์—…๋ฐ์ดํŠธ ๋ฐ ์ง€์›์ด ํ•จ๊ป˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๋ฌด๋ฃŒ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ

์™€๋Š” ๋ณ„๊ฐœ๋กœ ์ œ๊ณต ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์œ ๋ฃŒ ํŒจํ‚ค์ง€, Webix ๋˜ํ•œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณต ๊ณต์‹ ์›น์‚ฌ์ดํŠธ์—์„œ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณต๋˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ถ”๊ฐ€ ๊ธฐ๋ณธ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ. ๋„๊ตฌ๊ฐ€ ์—ด๋ ค์žˆ์Šต๋‹ˆ๋‹ค ๊ฐ€์ž…ํ•ด์•ผ ํ•˜๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ๋ˆ„๊ตฌ๋“ ์ง€ ๋ง์ด์ฃ .

๋ช‡ ๋ฒˆ์˜ ํด๋ฆญ๋งŒ์œผ๋กœ ์›น ์–‘์‹์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ์˜จ๋ผ์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํ•„๋“œ์™€ ๋ ˆ์ด์•„์›ƒ์„ ๊ฒฐ์ •ํ•˜๊ณ  ๋‹จ ๋ช‡ ์ดˆ ๋งŒ์— ์ž๋™์œผ๋กœ ์ฝ”๋“œ ์–‘์‹์„ ์ƒ์„ฑํ•˜์„ธ์š”.

  •     Webix ์ฝ”๋“œ ์กฐ๊ฐ

JS ๋Œ€์‹œ๋ณด๋“œ ํ”„๋กœํ† ํƒ€์ดํ•‘, ๊ฒฐ๊ณผ์˜ ๋น ๋ฅธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ, ์†Œ์…œ ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•œ ํŒ€์› ๋˜๋Š” ๊ณ ๊ฐ๊ณผ์˜ ๊ณต์œ ์— ์œ ์šฉํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

  •     Webix ์Šคํ‚จ ๋นŒ๋”

ํ”„๋ŸฐํŠธ ์—”๋“œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์Šคํƒ€์ผ์„ ์„ค์ •ํ•˜๊ณ  ๋จธํ‹ฐ๋ฆฌ์–ผ, ์ปดํŒฉํŠธ, ํ„ฐ์น˜ ๋“ฑ๊ณผ ๊ฐ™์€ ํ…Œ๋งˆ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ์ž‘์—…ํ•˜๊ธฐ ์œ„ํ•œ ์˜จ๋ผ์ธ ์›น ๋””์ž์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

Webix๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

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

  • ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ๋…ผ๋ฆฌ์ ์ž„

์›จ๋น…์Šค ๋‚ฎ๊ณ  ํŽธ์•ˆํ•œ ํ•™์Šต ๊ณก์„ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ๋ชจ๋“  ์ค‘๊ฐ„ ๋„๊ตฌ์™€ ๋ณต์žกํ•œ ๋„๊ตฌ๋ฅผ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  •  ๋‹ค์–‘ํ•œ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ†ตํ•ฉ

๋“ฑ๋ก๋œ ๊ตฌ๋…์ž๋Š” ๋ณต์žกํ•œ ์œ„์ ฏ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํ”„๋กœ์ ํŠธ๋ฅผ jQuery JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, React, Vue.js, Backbone.js, MVC ํ”„๋ ˆ์ž„์›Œํฌ AngularJS, ํƒ€์‚ฌ UI ํ™•์žฅ๊ณผ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์œ„ํ•œ ๋น ๋ฅธ ์„ฑ๋Šฅ

๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ”, ํŠธ๋ฆฌ, ๋ชฉ๋ก ๋˜๋Š” ๊ธฐํƒ€ ๋ฐ์ดํ„ฐ ํ‘œํ˜„ ๋„๊ตฌ๋ฅผ ์ ‘ํ•˜๋”๋ผ๋„ ํŽ˜์ด์ง• ๋ฐ ๋™์  ๋กœ๋”ฉ์œผ๋กœ ์ธํ•ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋น ๋ฅด๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ € ์ง€์›์œผ๋กœ ์–ด๋””์—์„œ๋‚˜ ์ด๋™ ์ค‘์—๋„ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

Webix๋Š” ์ž‘๋™ํ•˜๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ, ์ด๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜๋˜๋Š” ํ„ฐ์น˜ ์Šคํฌ๋ฆฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ–์ถ˜ ๋ฐ์Šคํฌํ†ฑ, ํƒœ๋ธ”๋ฆฟ, ์Šค๋งˆํŠธํฐ์šฉ HTML5 ์›น ์•ฑ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ˆœ์ˆ˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ

Webix๋Š” HTML5 ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ฆ‰๊ฐ์ ์ธ ์—…๋ฐ์ดํŠธ๋กœ ์ธํ•ด ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋˜๋Š” ๋Œ€ํ™”ํ˜• ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ์œ„ํ•œ ์™„์ „ํ•œ ํด๋ผ์ด์–ธํŠธ ์ธก ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • ํ‘œ์ค€ ์›น ์ ‘๊ทผ์„ฑ

Webix HTML5 UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ ‘๊ทผ์„ฑ ์ง€์›์„ ์ถ”๊ฐ€ํ•˜๊ณ  WAI-ARIA ํ‘œ์ค€์„ ์ถฉ์กฑํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋ณด์กฐ ๊ธฐ์ˆ ์ด ํ•„์š”ํ•œ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ด์ƒ์ ์ž…๋‹ˆ๋‹ค.

  • ๊ฐ„๋‹จํ•œ ์„œ๋ฒ„์ธก ์ƒํ˜ธ์ž‘์šฉ

์‚ฌ์šฉ์ž๋Š” Java, PHP, .NET ๋“ฑ์„ ์œ„ํ•œ ์†”๋ฃจ์…˜์„ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ชจ๋“  ๋ฐฑ์—”๋“œ ๊ธฐ์ˆ ์€ JavaScript UI ํ”„๋ ˆ์ž„์›Œํฌ์™€ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋งค์šฐ ์œ ์—ฐํ•œ

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

Webix ๋ธ”๋กœ๊ทธ์—์„œ ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”!

Webix๋Š” Webix์—์„œ ์ œ๊ณตํ•˜๋Š” ๋„๊ตฌ ๋ฐ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ ์ง๋ฉดํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์†Œํ•œ ๋ฌธ์ œ์— ๋Œ€ํ•ด ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œํ•˜๋Š” ๊ณ ๊ฐ์„ ๋•๊ธฐ ์œ„ํ•ด ์„ ๋ณ„๋œ ๊ณ ํ’ˆ์งˆ ๊ธฐ์‚ฌ์™€ ๊ฐ€์ด๋“œ๊ฐ€ ํฌํ•จ๋œ ๋งค์šฐ ์œ ์ตํ•œ ๋ธ”๋กœ๊ทธ ์„น์…˜์„ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ณ ๋„๋กœ ์ˆ™๋ จ๋˜๊ณ  ์ง€์‹์ด ํ’๋ถ€ํ•œ ๊ธฐ์ˆ  ์ž‘๊ฐ€๊ฐ€ ํ›Œ๋ฅญํ•œ ๊ณ ๊ฐ ์„œ๋น„์Šค ํŒ€๊ณผ ํ•จ๊ป˜ Webix ๊ธฐ๋ฐ˜ ๋น„์ฆˆ๋‹ˆ์Šค ์›น ์†”๋ฃจ์…˜์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๋ธ”๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ณ ํ’ˆ์งˆ ๊ณ ๊ฐ ์ง€์›!

webix ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฆฌ๋ทฐ ์˜จ๋ผ์ธ webix ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฆฌ๋ทฐ ์˜จ๋ผ์ธ

Webix ๋ธ”๋กœ๊ทธ๋ฅผ ํ†ตํ•ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋ฉด ์ฆ‰์‹œ ์ง€์› ํŒ€์— ๋ฌธ์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Webix๋Š” ์ˆ˜๋…„๊ฐ„ ํšจ์œจ์ ์ธ ์ž‘์—…์„ ํ†ตํ•ด ์–ป์€ ์‹ฌ์˜คํ•œ ๊ฒฝํ—˜์„ ๊ท€ํ•˜์™€ ๊ณต์œ ํ•  ์ค€๋น„๊ฐ€ ๋˜์–ด ์žˆ๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ๋Œ€์‘๋ ฅ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ์„ฑ๊ณผ ์ง€ํ–ฅ์ ์ธ ๊ณ ๊ฐ ์„œ๋น„์Šค ํŒ€์„ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋“ค์€ ์›น ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  Webix ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ธฐ์กด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ†ตํ•ฉํ•˜๋Š” ๋ฐ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๋ฌธ์ œ์— ๋Œ€ํ•ด XNUMX์‹œ๊ฐ„ ๋‚ด๋‚ด ๊ธฐ๊บผ์ด ๋„์›€์„ ๋“œ๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Webix 6์—์„œ 8.1๋กœ

_Webix_from_6_to_8_1_by_Webix_Review์˜_์ง„ํ™”_

์ถœ์ฒ˜ ~ Medium.com

Webix ๋Œ€์•ˆ

์‹ ์šฉ ๊ฑฐ๋ž˜ - ์Šฌ๋žœํŠธ.co

Webix์— ๋Œ€ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์งˆ๋ฌธ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋ชจ๋“  ์งˆ๋ฌธ์— ๋‹ต๋ณ€ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ Webix UI ๊ธฐ๋Šฅ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Webix UI์˜ ๋Œ€์•ˆ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Webix ํŠœํ† ๋ฆฌ์–ผ์€ ๊ทธ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์žˆ๋‚˜์š”?

Webix UI ์ง€์› ์˜ต์…˜์€ ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?

Webix๋Š” ๋ฌด๋ฃŒ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๊นŒ?

Webix UI Library ๊ธฐ๋ณธ ํ”Œ๋žœ ๋น„์šฉ์€ ์–ผ๋งˆ์ธ๊ฐ€์š”?

Webix๋Š” ๋ฌด๋ฃŒ ํ”Œ๋žœ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๊นŒ?

๋ณต์žกํ•œ Webix ์œ„์ ฏ์ด๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๋ˆ„๊ฐ€ Webix๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๊นŒ?

Webix๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

ํŠน์ง•: Webix๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹จ ๋ช‡ ์ค„์˜ JavaScript๋งŒ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ณ  ์•„๋ฆ„๋‹ค์šด ์›น ์•ฑ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTML5 ๋ฐ CSS3 ์›น์‚ฌ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ตœ๊ณ ์˜ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.

์žฅ์ : Webix๋Š” ๊ฐ€๋ณ๊ณ  ๋น ๋ฆ…๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๊ณ  ๋ชจ๋“  ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜๋˜๋ฉฐ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋ฐ ์กฐ์ž‘์„ ์œ„ํ•œ ํ’๋ถ€ํ•œ API๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์žฅ์ : ๋” ์ด์ƒ ๊ณ ์„ฑ๋Šฅ ์•ฑ์ด๋‚˜ ๋ฉ€ํ‹ฐ ํ”Œ๋žซํผ ์•ฑ ์ฝ”๋”ฉ์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์–ธ์–ด ํ•™์Šต์ด๋‚˜ ๋ณต์žกํ•œ ๋„๊ตฌ ์—†์ด ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž์‹ ๋งŒ์˜ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ๋™์ผํ•œ ์•ฑ์—์„œ ์—ฌ๋Ÿฌ ์–ธ์–ด(JavaScript, PHP)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•˜๊ณ  ์•ฑ์„ SEO ์นœํ™”์ ์œผ๋กœ ๋งŒ๋“œ์„ธ์š”.

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

๐Ÿ‘‰Webix UI๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

Webix๋Š” CSS3 ๋ฐ HTML5 ํ˜ธํ™˜ ๋ฐ์Šคํฌํ†ฑ ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ JavaScript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํŽธ์ง‘, ์‹œ๊ฐํ™”, ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ, ๋ ˆ์ด์•„์›ƒ ๊ตฌ์ถ• ๋ฐ ์—…๋กœ๋“œ๋ฅผ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•œ UI ๋ฉ€ํ‹ฐ ์œ„์ ฏ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘‰Webix UI ๊ธฐ๋Šฅ์—๋Š” ์–ด๋–ค ๊ฒƒ์ด ์žˆ๋‚˜์š”?

Webix UI ๊ธฐ๋Šฅ์€ ์›น ์ ‘๊ทผ์„ฑ, ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์ง€์›, Javascript ํ”„๋ ˆ์ž„์›Œํฌ ํ†ตํ•ฉ, ์•ฝ 100๊ฐœ์˜ ์œ„์ ฏ, ๋›ฐ์–ด๋‚œ ํ™•์žฅ์„ฑ ๋“ฑ์ž…๋‹ˆ๋‹ค.

๐Ÿ‘‰Webix UI ์ง€์› ์˜ต์…˜์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์ปค๋ฎค๋‹ˆํ‹ฐ, FAQ, ์›น ์„ธ๋ฏธ๋‚˜, ์ด๋ฉ”์ผ, ๋ผ์ด๋ธŒ ์ฑ„ํŒ…, ์†Œ์…œ ๋ฏธ๋””์–ด ๋“ฑโ€ฆ

๐Ÿ‘‰Webix UI์˜ ๋Œ€์•ˆ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Sencha, DHTMLX, ์ง„ํ–‰ ๊ฒ€๋„ UI

๐Ÿ‘‰Webix๋Š” ๋ฌด๋ฃŒ ํ”Œ๋žœ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๊นŒ?

์•„๋‹ˆ์š”, Webix๋Š” ๋ฌด๋ฃŒ ์š”๊ธˆ์ œ๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ JavaScript ๋Œ€์‹œ๋ณด๋“œ์™€ ํ•จ๊ป˜ Webix Apps ๋ฐ๋ชจ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰Webix JavaScript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐ€๊ฒฉ ๊ณ„ํš์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Webix์˜ ๊ธฐ๋ณธ ๊ณ„ํš์€ $349๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ ์ˆ˜์™€ ๊ฐœ๋ฐœ์ž ์ง€์›์— ๋”ฐ๋ผ ์ตœ๋Œ€ $9499๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๊ฐ€๊ฒฉ ๊ณ„ํš์ด ์ด์–ด์ง‘๋‹ˆ๋‹ค.

๐Ÿ‘‰Webix ํŠœํ† ๋ฆฌ์–ผ์„ ์‹œ๋„ํ•ด ๋ณผ ๊ฐ€์น˜๊ฐ€ ์žˆ๋‚˜์š”?

์˜ˆ, Webix ํŠœํ† ๋ฆฌ์–ผ์„ ์‚ฌ์šฉํ•ด Webix์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์˜ ์•ฑ์„ ๋งˆ์Šคํ„ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์ ์˜ ๊ฒฐ๊ณผ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ฌ์ธต์ ์ธ ํŠœํ† ๋ฆฌ์–ผ์ด ํ•จ๊ป˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

์›น๋น…์Šค ๊ฒ€ํ†  2024 : ๊ฒฐ๋ก 

์›จ๋น…์Šค ํ•™์Šต ๊ณก์„ ์ด ๋‚ฎ๊ณ  ์‹œ์ž‘ํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์–‘์„ฑ๊ณผ ์œ ์—ฐ์„ฑ์„ ๊ณ ๋ คํ•˜๋ฉด Webix๋Š” ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ด‘๋ฒ”์œ„ํ•œ API ์นœํ™”์  ์œ„์ ฏ์œผ๋กœ ๊ตฌ์„ฑ๋œ ํฌ๊ด„์ ์ธ UI ๊ตฌ์„ฑ ์š”์†Œ ์„ธํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  ๊ฐœ๋ฐœ์€ HTML ์—†์ด JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด IDE์—์„œ ์™„์ „ํ•œ ์œ ํ˜• ๊ฒ€์‚ฌ ๋ฐ IntelliSense๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŠนํžˆ, Webix Jet Library๋Š” SPA ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ˆ„๊ตฌ๋‚˜ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค! 

Webix ๊ณ ๊ฐ ์„œ๋น„์Šค ํŒ€์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ณ ๊ฐ์—๊ฒŒ ํ›Œ๋ฅญํ•œ ์ง€์›์„ ์ œ๊ณตํ•˜๋ฉฐ ๊ณ ๊ฐ ์„œ๋น„์Šค ํŒ€์€ ํฌ๋Ÿผ์ด๋‚˜ ์ด๋ฉ”์ผ์„ ํ†ตํ•ด ๊ท€ํ•˜๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ชจ๋“  ์งˆ๋ฌธ์— ๋งค์šฐ ์‹ ์†ํ•˜๊ฒŒ ๋‹ต๋ณ€ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋Š” ๋ฒ„๊ทธ๊ฐ€ ์—†๊ณ  ์•ˆ์ •์ ์ด๋ฉฐ ๊ฐ€์žฅ ๋ณต์žกํ•œ GUI๋„ ์‰ฝ๊ฒŒ ํšจ๊ณผ์ ์œผ๋กœ ์‹คํ–‰ํ•˜๊ณ  ๋›ฐ์–ด๋‚œ ๋””์ž์ธ, ๋›ฐ์–ด๋‚œ ๋ฐ˜์‘ํ˜• ์†Œ์žฌ ์Šคํ‚จ ๋ฐ ์•„์ด์ฝ˜ ํŒฉ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋งŒํผ ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ ๋„๊ตฌ๋Š” ์ƒ๋‹นํžˆ ๋ฐœ์ „๋˜์—ˆ์œผ๋ฉฐ ์ •๊ธฐ์ ์œผ๋กœ ์ž์ฃผ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

๋ชจ๋‘ ๋ชจ๋‘, ์›จ๋น…์Šค JavaScript ๋ฐ HTML ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฆ๊ฒจ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์˜จ๋ผ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ณด์œ ํ•œ ๊ธฐ์—…์ž…๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ข‹์€ ์ ์€ Webix๊ฐ€ ์†Œ๊ทœ๋ชจ, ์ค‘๊ฐ„ ๊ทœ๋ชจ ๋˜๋Š” ๋Œ€๊ทœ๋ชจ์˜ ๋ชจ๋“  ๊ทœ๋ชจ์˜ ์˜จ๋ผ์ธ ๋น„์ฆˆ๋‹ˆ์Šค์— ์ ํ•ฉํ•ด ๋ณด์ธ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค!

๋‹น์‹ ์€ ๊ทธ๋“ค์„ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ํŽ˜์ด์Šค๋ถ, ํŠธ์œ„ํ„ฐ & ๋งํฌ๋“œ์ธ ์—…๋ฐ์ดํŠธ๋œ ๊ธฐ๋Šฅ, ํ• ์ธ ๋ฐ ๊ฐ€๊ฒฉ์„ ๊ณ„์†ํ•ด์„œ ๋ฐ›์•„๋ณด์„ธ์š”.

์ž๊ฒฉ์„ ๊ฐ–์ถ˜ ํŒ€, ์ง€๊ธˆ๊นŒ์ง€์˜ ์—ฌ์ • ๋ฐ ์„ฑ๊ณผ๋ฅผ ์‚ดํŽด๋ณด๋ ค๋ฉด Webix๋ฅผ ํ™•์ธํ•˜์„ธ์š”. ํšŒ์‚ฌ ์†Œ๊ฐœ ํŽ˜์ด์ง€.

Javascript UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฐœ์š” โ€“ Webix v.6.3

์ง€ํ…๋“œ๋ผ ๋ฐ”์Šค์™€๋‹ˆ
์ด ์ž‘์„ฑ์ž๋Š” BloggersIdeas.com์—์„œ ํ™•์ธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Jitendra Vaswani๋Š” ๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ… ์‹ค๋ฌด์ž์ด์ž ์ „ ์„ธ๊ณ„๋ฅผ ์—ฌํ–‰ํ•˜๋ฉด์„œ ๋””์ง€ํ„ธ ์œ ๋ชฉ๋ฏผ ๋ผ์ดํ”„์Šคํƒ€์ผ์„ ์ˆ˜์šฉํ•œ ์œ ๋ช…ํ•œ ๊ตญ์ œ ๊ธฐ์กฐ ์—ฐ์„ค์ž์ž…๋‹ˆ๋‹ค. ๊ทธ๋Š” ๋‘ ๊ฐœ์˜ ์„ฑ๊ณต์ ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ์„ค๋ฆฝํ–ˆ์Šต๋‹ˆ๋‹ค. BloggerIdeas.com & ๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ… ๋Œ€ํ–‰์‚ฌ DigiExe ๊ทธ ์ค‘ ๊ทธ์˜ ์„ฑ๊ณต ์‚ฌ๋ก€๋Š” "Inside A Hustler's Brain: In Pursuit of Financial Freedom"(์ „ ์„ธ๊ณ„์ ์œผ๋กœ 20,000๋ถ€ ํŒ๋งค)์„ ์ง‘ํ•„ํ•˜๊ณ  "Growth Hacking Book 2์˜ ๊ตญ์ œ ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ ์ž‘๊ฐ€"์— ๊ธฐ๊ณ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ™•๋Œ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Jitendra๋Š” ๋Œ€๋ฅ™ ์ „์ฒด์— ๊ฑธ์ณ ๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ… ๋ถ„์•ผ์˜ 10000๋ช… ์ด์ƒ์˜ ์ „๋ฌธ๊ฐ€๋ฅผ ์œ„ํ•œ ์›Œํฌ์ˆ์„ ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ถ๊ทน์ ์œผ๋กœ ์‚ฌ๋žŒ๋“ค์ด ์˜จ๋ผ์ธ์—์„œ ๊ฟˆ์˜ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•จ์œผ๋กœ์จ ์˜ํ–ฅ๋ ฅ ์žˆ๋Š” ๋ณ€ํ™”๋ฅผ ์ฐฝ์ถœํ•˜๋ ค๋Š” ์˜๋„๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Jitendra Vaswani๋Š” ๋‹ค์Œ์„ ํฌํ•จํ•˜๋Š” ์ธ์ƒ์ ์ธ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๊ฐ–์ถ˜ ๊ฐ•๋ ฅํ•œ ํˆฌ์ž์ž์ž…๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€์Šคํ…Œ์ด์…˜. ๊ทธ์˜ ํˆฌ์ž์— ๋Œ€ํ•ด ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๋ฉด ๋‹ค์Œ์—์„œ ๊ทธ๋ฅผ ์ฐพ์•„๋ณด์„ธ์š”. ๋งํฌ๋“œ ์ธ, ํŠธ์œ„ํ„ฐ, & ํŽ˜์ด์Šค๋ถ.

์ œํœด์‚ฌ ๊ณต๊ฐœ: ์™„์ „ํ•œ ํˆฌ๋ช…์„ฑ - ๋‹น์‚ฌ ์›น์‚ฌ์ดํŠธ์˜ ์ผ๋ถ€ ๋งํฌ๋Š” ์ œํœด์‚ฌ ๋งํฌ์ž…๋‹ˆ๋‹ค. ๊ท€ํ•˜๊ฐ€ ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ๋งคํ•˜๋ฉด ์ถ”๊ฐ€ ๋น„์šฉ ์—†์ด ์ปค๋ฏธ์…˜์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(์•„๋ฌด๊ฒƒ๋„ ์—†์Šต๋‹ˆ๋‹ค!).

๋Œ“๊ธ€ (5)

  1. ๋‚˜๋Š” webix๊ฐ€ ๋ชจ๋“  ๋ฉด์—์„œ ์™„๋ฒฝํ•œ ๋„๊ตฌ๋ผ๊ณ  ๋งํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. webix์˜ ์ƒˆ ๋ฒ„์ „์ด๋ผ๋„ ์‚ฌ์šฉ์ด ๊ฐ„ํŽธํ•˜๋‹ค๊ณ  ํ•ด์„œ ๋‹จ์ˆœ์„ฑ ์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ์ถ”์ฒœํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํฌ๊ณ  ์ž‘์€ ํ”„๋กœ์ ํŠธ์— ์ ํ•ฉํ•˜๊ณ , ๋‹ค๋ฅธ ํ”Œ๋žซํผ๊ณผ์˜ ์—ฐ๊ฒฐ์„ฑ์ด ํ›Œ๋ฅญํ•˜๊ณ , ๊ตฌ์„ฑ ์š”์†Œ์— ์—„์ง€ ์†๊ฐ€๋ฝ์ด ์žˆ๊ณ , ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํ‚จ์ด ๋งŽ๊ณ , ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ธํ„ฐํŽ˜์ด์Šค์ž…๋‹ˆ๋‹ค. ๋‹จ ํ•œ ๋ช…์˜ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๊ฐ€๊ฒฉ์€ ๋น„์‹ธ์ง€๋งŒ ํ•œ ํ‘ผ๋„ ์•„๊น์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๋งค๋ ฅ์ ์ธ ์œ„์ ฏ์ด ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  2. ์ €๋Š” ์‹ค์ œ๋กœ Webix ์‹œํ—˜ ๋ณ€ํ˜•์„ ์‚ฌ์šฉํ•ด ์™”์œผ๋ฉฐ ์„œ๋ฅ˜ ์ž‘์—…๋„ ์„ค๋ช…๋˜์–ด ์žˆ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ๊ฐ„๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ํ•ญ๋ชฉ์„ ์„ ์–ธํ•ด์•ผ ํ•˜๋Š” ๋‹จ์ˆœ์„ฑ์„ ์ข‹์•„ํ•˜๋ฉฐ Webix๋Š” ๋‚ด UI์ธ HTML์„ ์ž‘์„ฑํ•˜๋Š” ๋งˆ๋ฒ•์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์†Œํ”„ํŠธ์›จ์–ด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ํ›Œ๋ฅญํ•œ ํ•ญ๋ชฉ์ž…๋‹ˆ๋‹ค. ๋ฐœ๊ฒฌ ๊ณก์„ ์€ ๋งค์šฐ ์‰ฌ์šฐ๋ฉฐ Form Builder๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ”„๋กœํ† ํƒ€์ž…์„ ์ฒด๊ณ„์ ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์ฃผ๊ฑฐ์šฉ ๊ฑด๋ฌผ๊ณผ ๋™์ผํ•œ ๊ธฐ์ˆ ์„ ๊ณต์œ ํ•˜๋ฏ€๋กœ ํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ  ๋‹ค๋ฅธ ๋ถ€๋ถ„์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๋Š” ํ•œ ๋ฐ”๋žŒ์ด ๋ถˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์งˆ๋ฌธ์„ ํ–ˆ์„ ๋•Œ ํ† ๋ก  ํฌ๋Ÿผ์˜ ์ง€์›์€ ํ›Œ๋ฅญํ–ˆ๊ณ  ์ œ๊ฐ€ ํ•˜๊ณ  ์žˆ๋Š” ์ฝ”๋”ฉ์— ๋Œ€ํ•ด ๊ณง ๋„์›€์ด ๋  ํ”ผ๋“œ๋ฐฑ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฝ”๋”ฉ์ด ์ด์ „์— ์‹ค์ œ๋กœ ๋ณธ ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ œ๊ณต๋˜๋Š” ํ•ญ๋ชฉ์˜ ์ผ๋ถ€๋กœ ํ™•์‹คํžˆ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์„ฑ๊ณต ๋’ค์—๋Š” ํ™˜์ƒ์ ์ธ ๋งˆ์Œ์ด ์žˆ์Œ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์šฉ์ด์„ฑ ์ž‘๋™ํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹ ์†ํ•˜๊ฒŒ ์ƒ์„ฑํ•˜๋Š” ์†๋„ ํฌ๋Ÿผ ์ง€์› ๊ฐ์ฒด ์„ ์–ธ์  ์ฝ”๋”ฉ ๋‚ด์žฅ๋œ ์ฐจํŠธ ํ”„๋ ˆ์ž„์›Œํฌ ์ „๋ฌธ ์œ„์ ฏ ๋‚ด์žฅ๋œ ๋ณด๊ณ  ๊ธฐ๋Šฅ PDF, EXCEL ๋“ฑ์œผ๋กœ ๋‚ด๋ณด๋‚ด๊ธฐ ๊ธฐ๋Šฅ
    Webix๋Š” ์•ฑ์„ ๋น ๋ฅด๊ฒŒ ์ƒ์„ฑํ•˜๊ณ  ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ค์ง€ ์•Š๊ณ  ์‚ฌ๋ฌผ ์ง€ํ–ฅ์ ์ด๋ฉฐ ๋งค์šฐ ์ข‹์€ ๋ฌธ์„œ๊ฐ€ ์žˆ๊ณ  ์˜จ๋ผ์ธ ํฌ๋Ÿผ ๊ฒ€์ƒ‰์ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

  3. Webix๋กœ ๊ตฌ์ถ•ํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์ฃผ๋กœ ์ •๋ณด ์ˆ˜์ง‘, ์—…๋ฐ์ดํŠธ/์‚ญ์ œ/์‹œ๊ฐํ™”, ๋ฐ์ดํ„ฐ ์†Œ์Šค ์ €์žฅ, ๋‹ค์–‘ํ•œ ํ˜•์‹์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ/๋‚ด๋ณด๋‚ด๊ธฐ, ํŠน์ • ํŒŒ์ดํ”„๋กœ ์ „๋‹ฌ ๋“ฑ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
    ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ณ ๊ฐ์„ ์œ„ํ•ด ์นœ์ˆ™ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ธํ„ฐ๋„ท ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋ ค๋ฉด Javascript์˜ ๊ณ ๊ธ‰ UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ๋ช‡ ๋…„ ์ „์— Adobe FLex๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ  ๊ทธ๋‹ค์Œ์—๋Š” Google GWT์™€ 2014 Sencha Ext Js๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ Syncfusion UI JS์™€ Telerik Kendo UI๋ฅผ ํ‰๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Webix UI ๋ถ€๋ถ„์„ ๋งŒ๋‚ฌ์„ ๋•Œ ์ฃผ๋กœ ์ œ๊ณต๋˜๋Š” ๋ถ€๋ถ„์ด ๋งŽ๊ณ  ํ’ˆ์งˆ์ด ์šฐ์ˆ˜ํ•˜๋ฉฐ ๋Œ€๋ถ€๋ถ„ ์›น ์•ฑ์˜ ๋กœ๋”ฉ ์‹œ๊ฐ„๊ณผ ๊ฑฐ๋Œ€ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ธํŠธ๋ผ๋„ท์ด๋‚˜ ์›น ๊ตฌํ˜„์— ๋น„ํ•ด ๋งค์šฐ ์งง๊ธฐ ๋•Œ๋ฌธ์— ์ฑ„ํƒํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ UI Js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋งŒ๋“  ๊ฒƒ๊ณผ ๋˜‘๊ฐ™์€ ์ธํ„ฐ๋„ท ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ๋””์ž์ด๋„ˆ๊ฐ€ jquery๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ ํ•™์Šต ๊ณก์„ ์€ ์ •๋ง ํŽธ์•ˆํ•˜๊ณ  ์ฃผ๋กœ ์งง์Šต๋‹ˆ๋‹ค. ๋ฌธ์„œ๋Š” ๋งค์šฐ ํ’๋ถ€ํ•˜๋ฉฐ ๊ธฐ์ˆ  ์ง€์›๋„ ๋งค์šฐ ๋ฐ˜์‘์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋˜ ๋ฌด์—‡์„ ๋ฌผ์–ด๋ณผ ๊ฒƒ์ธ๊ฐ€? ๋•Œ๋กœ๋Š” ๋‚ด๊ฐ€ ์˜จ๋ผ์ธ ๋ฌธ์„œ์—์„œ ์›ํ•˜๋Š” ๋‚ด์šฉ์„ ์ฐพ๋Š” ๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ œ๊ณต๋œ ์ผ๋ถ€ ์˜ˆ๋Š” ์‚ฌ์†Œํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ์—๋Š” Javascript๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๋ฐฑ์—”๋“œ์—๋Š” Java EE๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

  4. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ์ตœ๊ณ ์˜ JS ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” 4๋…„ ๋„˜๊ฒŒ Webix๋ฅผ ์‚ฌ์šฉํ•ด ์™”์œผ๋ฉฐ ํ”„๋ ˆ์ž„์›Œํฌ, ๋งŽ์€ ๋‚ด์žฅ ๊ธฐ๋Šฅ ๋ฐ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ตœ์‹  ํ”Œ๋žซํผ์— ๋งค์šฐ ๋งŒ์กฑํ•ฉ๋‹ˆ๋‹ค. โ€“ ์ง€์›์€ Webix์— ๊ด€ํ•œ ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ํŒ€์€ ๋งค์šฐ ๋„์›€์ด ๋˜๊ณ  ๋น ๋ฅด๊ฒŒ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์—ฌ๋Ÿฌ JS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋Š”๋ฐ Webix๊ฐ€ ๊ฐ€์žฅ ๋›ฐ์–ด๋‚œ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์Šคํƒ€์ผ๋ง์ด ๋‹จ์ ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ์ •๊ธฐ์ ์œผ๋กœ ๊ณ„์† ์ถœ์‹œ๋ฉ๋‹ˆ๋‹ค.

  5. Webix๋Š” ์˜ค๋Š˜๋‚  ์„ธ๊ณ„ ์ตœ๊ณ ์˜ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
    ์‚ฌ๋ฌด์šฉ ๊ฒ‰์˜ท
    ์ €๋Š” ์ง€๊ธˆ๊นŒ์ง€ Webix๊ฐ€ ์™„๋ฒฝํ•˜๊ฒŒ ์‹คํ–‰๋˜์—ˆ์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›น ์•ฑ์œผ๋กœ ์‹คํ˜„ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์˜ ๊ฒฝ๊ณ„๋ฅผ ๋„“ํžˆ๋Š” Webix๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฌ๊ณ  ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ”„๋กœํ† ํƒ€์ž…์„ ์ œ์ž‘ํ•ด ์™”์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ExtJS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „๋ฌธ์ ์ธ ์›น ์„ฑ์žฅ ๊ณ„์•ฝ์„ ๋งŽ์ด ์ˆ˜ํ–‰ํ–ˆ์œผ๋ฉฐ 1์œ„์™€ 2์œ„ ์ž๋ฆฌ๊ฐ€ ExtJS์™€ Webix ๊ฐ„์˜ ์‹ธ์›€์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉฐ ํ–ฅํ›„ ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•ด Webix๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์ถ”์ง„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Webix๋Š” ๋ชจ๋“  ๋ฉด์—์„œ ์ •๋ง ํ˜ธ์˜์ ์œผ๋กœ ๋น„๊ต๋˜๋ฉฐ ๋งŽ์€ ๋ฉด์—์„œ ์ด๋ฅผ ๋Šฅ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Webix๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ์ƒํ˜ธ ์ž‘์šฉ์ด ๋งค์šฐ ๊ธ์ •์ ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ๋“ค์€ ๋งค์šฐ ์‹ค์šฉ์ ์ด๊ณ  ์ฆ๊ฒ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์†”์งํžˆ ์ฃผ๋ณ€์˜ ๋‹ค์–‘ํ•œ ๊ฒฝ์Ÿ ์ œํ’ˆ๊ณผ ๋Œ€์กฐ์ ์ž…๋‹ˆ๋‹ค. Webix๋Š” ์—ฌ๋Ÿฌ๋ถ„์˜ ์†์— ์—„์ฒญ๋‚œ ํž˜์„ ๋ถ€์—ฌํ•˜๊ณ  ๋งค์šฐ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ์ด๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋จธ๋ฆฌ๋ฅผ ๋น„ํ‹€์–ด ๋Œ๋ฆฌ๋Š” ๊ฒƒ์€ ์ •๋ง ๊ฐ„๋‹จํ•˜๊ณ  ์›ํ•˜๋Š” ๋Œ€๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ๋„ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. Webix๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ํ•„์š”ํ•œ ๋Œ€๋กœ ์ž‘๋™ํ•˜๊ณ  ๋ชจ๋“  ๋ฉด์—์„œ ์ž˜ ๊ณ ๋ ค๋˜์–ด ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค ๋•Œ๋ฌธ์— ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๊ฒฝ์šฐ๊ฐ€ ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋งค์šฐ ๋ณต์žกํ•œ ์ž‘์—…์ด Webix๋ฅผ ์„ ํƒํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ๋ณด๋‹ค ์ ˆ๋ฐ˜ ์ •๋„๋งŒ ์ง„ํ–‰๋˜์—ˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์œผ๋ฉฐ ExtJS๋ฅผ ์ œ์™ธํ•˜๊ณ  ์‹œ์žฅ์— ํ™•์‹คํžˆ ๋‹ค๋ฅธ ์ œํ’ˆ์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์‹ค์šฉ์ ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋–ค ์ข…๋ฅ˜์˜ ์ธํ„ฐ๋„ท ๋ฐœ์ „ ํ”„๋กœ์ ํŠธ์—๋„ Webix๋ฅผ ์ถฉ๋ถ„ํžˆ ์ถ”์ฒœํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ๊ฒฐ๋ก ์ž…๋‹ˆ๋‹ค!
    ์žฅ์ 
    Webix๊ฐ€ ์ฝ”๋“œ ์ค‘์‹ฌ ๊ฐœ๋ฐœ ๋ฒ„์ „์„ ์ œ๊ณตํ•œ๋‹ค๋Š” ์ ์ด ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ถ”๊ฐ€์ ์ธ ๋งˆํฌ์—… ์ค‘์‹ฌ ์ ‘๊ทผ ๋ฐฉ์‹๋ณด๋‹ค ์ด๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” Webix๊ฐ€ ์ œ๊ณตํ•˜๋Š” API๊ฐ€ ํ•ฉ๋ฆฌ์ ์ด๊ณ  ์ผ๊ด€๋˜๋ฉฐ ํ•ฉ๋ฆฌ์ ์ด๋ผ๋Š” ์ ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ๋ถ€ํ’ˆ์— ๋Œ€ํ•ด์„œ๋„ ์–ด๋–ค ์†์„ฑ/๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•œ์ง€ ์ถ”์ •ํ•˜๋Š” ๊ฒƒ์€ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. Webix๊ฐ€ ์ตœ์‹  UI๋ฅผ ๊ตฌ์ถ•ํ•˜๋ ค๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์œ„์ ฏ๊ณผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณตํ•œ๋‹ค๋Š” ์ ์ด ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค. Webix์˜ ์„ฑ๋Šฅ์€ ๋ˆ„๊ตฌ์—๊ฒŒ๋„ ๋’ค์ง€์ง€ ์•Š์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ UI์˜ ๋ฌด๊ฒŒ์˜ ๋ณต์žก์„ฑ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ •๊ธฐ์ ์œผ๋กœ ์„ฑ๋Šฅ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. Webix๋Š” ๊ฝค ์ข‹์€ ๋น„์šฉ ๋ชจ๋ธ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ๋‹จ์ผ ์ƒ์ ๊ณผ ์†Œ๊ทœ๋ชจ ์ƒ์ ์˜ ๊ฒฝ์šฐ ๋น„์šฉ์ด ๋” ์ €๋ ดํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋น„์šฉ์„ ๋‹ค๋ฅธ ์œ ์‚ฌํ•œ ํ•ญ๋ชฉ๊ณผ ๋น„๊ตํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๋ฉด ์‹ค์ œ๋กœ Webix๊ฐ€ ์‹ค์ œ๋กœ ์ƒ๋‹นํžˆ ๊ฒฝ์ œ์ ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Webix์˜ ๋น„์šฉ ๋Œ€๋น„ ์ด์ต ๋น„์œจ์€ ๋งค์šฐ ์šฐ์ˆ˜ํ•ฉ๋‹ˆ๋‹ค. ์˜์‹ฌ์˜ ์—ฌ์ง€๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค!
    ๋‹จ์ 
    Webix๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ์Šคํƒ€์ผ์ด ๋” ์ข‹์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ ํ•ด๋‹น ๋””์ž์ธ์„ ์กฐ์ •ํ•˜๋Š” ๊ธฐ๋Šฅ๋„ ์กฐ๊ธˆ ๋” ์ข‹์•„์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ตฌ์ƒ์˜ ๊ฑฐ์˜ ๋ชจ๋“  ํ•ญ๋ชฉ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฌธ์„œ๋„ ์กฐ๊ธˆ ๋” ๋‚˜์•„์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ํ˜€ ์—ด์•…ํ•˜์ง€ ์•Š๊ณ  ์ œ๊ฐ€ ์‚ฌ์šฉํ•ด ๋ณธ ๋‹ค๋ฅธ ๋งŽ์€ ์ œํ’ˆ๋ณด๋‹ค ํ›จ์”ฌ ๋‚ซ์ง€๋งŒ, ํ•„์š”ํ•œ ์„ธ๋ถ€ ์‚ฌํ•ญ์„ ์ •ํ™•ํžˆ ํŒŒ์•…ํ•˜๋Š” ๊ฒƒ์ด ์ข…์ข… ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ํŠนํžˆ API ๋ฌธ์„œ๋Š” ์•ฝ๊ฐ„์˜ ๊ตฌ์กฐ ์กฐ์ •์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

์ฝ”๋ฉ˜ํŠธ ๋‚จ๊น€