2026-04-10

MCP(Model Context Protocol) μ„œλ²„λ₯Ό NestJS둜 κ΅¬ν˜„ν•΄μ„œ AI μ±„νŒ…μ°½ μ•ˆμ— μΈν„°λž™ν‹°λΈŒ UIλ₯Ό λ„μš°λŠ” λ°©μ‹μ΄μ—μš”

πŸ’‘ ν•œμ€„ μš”μ•½|MCP(Model Context Protocol) μ„œλ²„λ₯Ό NestJS둜 κ΅¬ν˜„ν•΄μ„œ AI μ±„νŒ…μ°½ μ•ˆμ— μΈν„°λž™ν‹°λΈŒ UIλ₯Ό λ„μš°λŠ” λ°©μ‹μ΄μ—μš”.

ChatGPT와 Claude μ•ˆμ—μ„œ React 앱을 직접 λ Œλ”λ§ν•˜λŠ” μƒˆλ‘œμš΄ μ•„ν‚€ν…μ²˜κ°€ μ œμ•ˆλμ–΄μš”.

MCP(Model Context Protocol) μ„œλ²„λ₯Ό NestJS둜 κ΅¬ν˜„ν•΄μ„œ AI μ±„νŒ…μ°½ μ•ˆμ— μΈν„°λž™ν‹°λΈŒ UIλ₯Ό λ„μš°λŠ” λ°©μ‹μ΄μ—μš”. ui:// λ¦¬μ†ŒμŠ€λ‘œ index.html을 μ „λ‹¬ν•˜λ©΄ iframe μ•ˆμ—μ„œ React 앱이 λŒμ•„κ°€κ±°λ“ μš”.

κΈ°μ‘΄ λ°©μ‹μ˜ λ¬Έμ œλŠ” "Toggle Tax"λΌλŠ” κ°œλ…μœΌλ‘œ μ„€λͺ…λΌμš”. 2022λ…„ ν•˜λ²„λ“œ λΉ„μ¦ˆλ‹ˆμŠ€ 리뷰 연ꡬ에 λ”°λ₯΄λ©΄ 평균 직μž₯인은 ν•˜λ£¨ 1,200번 앱을 μ „ν™˜ν•˜κ³ , μ—°κ°„ μƒμ‚°μ„±μ˜ 9%λ₯Ό 여기에 μŸμ•„λΆ“λŠ”λ‹€κ³  ν•΄μš”. AIκ°€ "이 링크 ν΄λ¦­ν•˜μ„Έμš”"라고 μ•ˆλ‚΄ν•˜λŠ” μˆœκ°„ μ‚¬μš©μžλŠ” λ§₯락을 μžƒκ³  μ΄νƒˆν•˜λŠ” κ±°μ˜ˆμš”.

AI μ—μ΄μ „νŠΈκ°€ λ‹¨μˆœ ν…μŠ€νŠΈ 닡변을 λ„˜μ–΄ λ³΅μž‘ν•œ UIκΉŒμ§€ 직접 μ„œλΉ™ν•˜λŠ” "에이전틱 UI" μ‹œλŒ€κ°€ κ°€κΉŒμ›Œμ§€κ³  μžˆλ‹€λŠ” μ‹ ν˜Έμ˜ˆμš”.

이 글이 μ–΄λ• λ‚˜μš”?