ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL์€ ๊ฐœ๋ฐœ์ž๊ฐ€ API์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ํšจ์œจ์ ์ด๊ณ  ์ •ํ™•ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ ์ฟผ๋ฆฌ ์–ธ์–ด ๋ฐ ๋Ÿฐํƒ€์ž„์ž…๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ์—”๋“œ ์ปจํ…์ŠคํŠธ์—์„œ GraphQL์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ •ํ™•ํ•˜๊ฒŒ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ค‘๋ณต์ด ์ค„์–ด๋“ค๊ณ  ์‘๋‹ต ์‹œ๊ฐ„์ด ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL์€ ํ”„๋ŸฐํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ๊ธด๋ฐ€ํ•œ ํ˜‘์—…์„ ์ง€์›ํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๊ณ„๊ฐ€ ๋ฐœ์ „ํ•จ์— ๋”ฐ๋ผ ์ฟผ๋ฆฌ ๊ตฌ์กฐ์™€ ๋ฐ์ดํ„ฐ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์กฐ์ •ํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ„์†Œํ™”ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค.

๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถ•์„ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ no-code ํ”Œ๋žซํผ AppMaster ๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL์„ ์ฑ„ํƒํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋ฐ์ดํ„ฐ๋ฅผ ์›ํ™œํ•˜๊ฒŒ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ AppMaster ์˜ ์‹œ๊ฐ์  ๋„๊ตฌ์™€ ์ƒ์„ฑ๋œ ์†Œ์Šค ์ฝ”๋“œ๋Š” ๊ณ ๊ฐ์ด ๊ธฐ์ˆ  ๋ถ€์ฑ„๋ฅผ ์ œ๊ฑฐํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ€์†ํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

๊ธฐ์กด REST API ์›์น™๊ณผ ๋‹ฌ๋ฆฌ GraphQL์€ ๋ณ€ํ™”ํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋น ๋ฅด๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์—ฐํ•˜๊ณ  ๋™์ ์ธ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ๋„์ž…ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ณ„ ๋ฐ์ดํ„ฐ ์กฐ๊ฐ์„ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ endpoints ์— ์˜์กดํ•˜๋Š” ๋Œ€์‹  ๊ฐœ๋ฐœ์ž๋Š” ๋‹จ์ผ endpoint ํ†ตํ•ด ํ•„์š”ํ•œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ์— ์•ก์„ธ์Šคํ•˜์—ฌ ์ฟผ๋ฆฌ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ์ „๋ฐ˜์ ์ธ ๋ณต์žก์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ƒˆ๋กœ ๋ฐœ๊ฒฌ๋œ ์œ ์—ฐ์„ฑ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ์—ฌ๋Ÿฌ API ์š”์ฒญ์„ ๋™์‹œ์— ์ˆ˜ํ–‰ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ „๋ฐ˜์ ์ธ ์„ฑ๋Šฅ๊ณผ ์‘๋‹ต์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL์€ ์ด ๊ธฐ์ˆ ์„ ์ ๊ทน์ ์œผ๋กœ ์œ ์ง€ํ•˜๊ณ  ํ™๋ณดํ•˜๋Š” Facebook๊ณผ ๊ฐ™์€ ์œ ๋ช… ๊ธฐ์ˆ  ํšŒ์‚ฌ๋“ค ์‚ฌ์ด์—์„œ ๋„๋ฆฌ ์ฑ„ํƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. State of JavaScript 2020 ์„ค๋ฌธ์กฐ์‚ฌ์— ๋”ฐ๋ฅด๋ฉด ๊ฐœ๋ฐœ์ž์˜ 64.9%๊ฐ€ ์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ์—์„œ GraphQL์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋ณด๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ์ƒํƒœ๊ณ„๊ฐ€ ์ด ๋™์  ์ฟผ๋ฆฌ ์–ธ์–ด๋กœ ํฌ๊ฒŒ ์ „ํ™˜๋˜์—ˆ์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋˜ํ•œ Frontend GraphQL์„ ํ•ด๋‹น ๊ธฐ์ˆ ์— ํ†ตํ•ฉํ•œ GatsbyJS ๋ฐ Apollo Client๋ฅผ ํฌํ•จํ•œ ์˜คํ”ˆ ์†Œ์Šค ์›น ๊ฐœ๋ฐœ ํ”Œ๋žซํผ์—์„œ๋„ ์ฑ„ํƒ์ด ์ธ๊ธฐ๋ฅผ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.

GraphQL์˜ ์‹ค์‹œ๊ฐ„ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋Š” ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚œ ๋Œ€ํ™”ํ˜• ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. GraphQL์„ React, Angular ๋ฐ Vue.js์™€ ๊ฐ™์€ ์—…๊ณ„ ํ‘œ์ค€ ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๊ฒฐํ•ฉํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž๋Š” ์‚ฌ์šฉ์ž ์ฐธ์—ฌ๋ฅผ ์œ ๋„ํ•˜๊ณ  ํŠน๋ณ„ํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์กฐ์„ฑํ•˜๋Š” ์ตœ์ฒจ๋‹จ ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

AppMaster ์˜ no-code ํ”Œ๋žซํผ์€ Frontend GraphQL๊ณผ์˜ ์›ํ™œํ•œ ํ†ตํ•ฉ์„ ํ†ตํ•ฉํ•˜์—ฌ ์‹œ๋ฏผ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ตœ์ฒจ๋‹จ ์ฟผ๋ฆฌ ์–ธ์–ด ๊ธฐ์ˆ ์˜ ํž˜์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•จ์œผ๋กœ์จ ์ด๋Ÿฌํ•œ ์ด์ ์„ ๋”์šฑ ํ™•์žฅํ•ฉ๋‹ˆ๋‹ค. AppMaster ์‚ฌ์šฉ์ž๋Š” drag-and-drop ๊ตฌ์„ฑ ์š”์†Œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ์šฉ ์‹œ๊ฐ์  ๋น„์ฆˆ๋‹ˆ์Šค ํ”„๋กœ์„ธ์Šค ๋””์ž์ด๋„ˆ, ์ž๋™ ์ƒ์„ฑ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ผ๋ฐ˜์ ์œผ๋กœ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ๊ณผ ๊ด€๋ จ๋œ ๊ฐ€ํŒŒ๋ฅธ ํ•™์Šต ๊ณก์„  ์—†์ด ์˜ํ–ฅ๋ ฅ ์žˆ๋Š” ์†Œํ”„ํŠธ์›จ์–ด ์†”๋ฃจ์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ AppMaster ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ Vue3 ํ”„๋ ˆ์ž„์›Œํฌ, Android์šฉ Kotlin ๋ฐ Jetpack Compose iOS ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ SwiftUI ์™€ ๊ฐ™์€ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ณ ๊ฐ์ด ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL๊ณผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ†ตํ•ฉ๋˜๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ํ˜„๋Œ€์ ์ด๋ฉฐ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ์™€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

Frontend GraphQL๊ณผ AppMaster ์˜ ์‹œ๊ฐ์  ๊ฐœ๋ฐœ ํ”Œ๋žซํผ์˜ ๊ฒฐํ•ฉ์€ ์›น, ๋ชจ๋ฐ”์ผ ๋ฐ ๋ฐฑ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ค๊ณ„ ๋ฐ ๋ฐฐํฌ์— ์žˆ์–ด ๋น„๊ตํ•  ์ˆ˜ ์—†๋Š” ์œ ์—ฐ์„ฑ, ์†๋„, ์ ์‘์„ฑ ๋ฐ ํ™•์žฅ์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ์ˆ ์€ ํ•จ๊ป˜ ์ž‘๋™ํ•˜์—ฌ ํฌ๊ด„์ ์ด๊ณ  ํšจ์œจ์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜์—ฌ ํ”„๋กœ์„ธ์Šค๋ฅผ 10๋ฐฐ ๋” ๋น ๋ฅด๊ฒŒ, 3๋ฐฐ ๋” ๋น„์šฉ ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“ค๊ณ  ์ค‘์†Œ๊ธฐ์—…์—์„œ ๋Œ€๊ธฐ์—…์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๊ณ ๊ฐ์ด ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ, ํ”„๋ŸฐํŠธ์—”๋“œ GraphQL์€ ์ตœ์ ํ™”๋œ ๋ฐ์ดํ„ฐ ์ฟผ๋ฆฌ, ์›ํ™œํ•œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ, ํ”„๋ŸฐํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ํ–ฅ์ƒ๋œ ํ˜‘์—…์„ ์ œ๊ณตํ•˜๋Š” ํ˜„๋Œ€ ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๊ท€์ค‘ํ•œ ๋ฆฌ์†Œ์Šค์ž…๋‹ˆ๋‹ค. Frontend GraphQL์„ AppMaster ์˜ no-code ํ”Œ๋žซํผ๊ณผ ํ†ตํ•ฉํ•จ์œผ๋กœ์จ ๋ชจ๋“  ๊ทœ๋ชจ์˜ ๊ธฐ์—…์€ ์ด๋Ÿฌํ•œ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๋””์ง€ํ„ธ ํ˜์‹ ์„ ์ฃผ๋„ํ•˜๊ณ  ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ƒˆ๋กœ์šด ์ฐจ์›์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋ฉฐ ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ• ๋ฐ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.