Sencha AI Coding Companion을 소개합니다 —
더 빠른 Ext JS 개발을 위한 AI 어시스턴트
Sencha가 Ext JS 전용 AI 코딩 어시스턴트를 내놓았습니다. 범용 챗봇과 다른 점은 학습한 자료가 Ext JS 문서와 커뮤니티 사례라는 것입니다.
Ext JS로 개발해 보신 분이라면 익숙한 장면이 있습니다. 컴포넌트 레이아웃이 뜻대로 안 잡혀 문서를 열고, 어느 config가 어디에 들어가는지 기억이 안 나 API 문서를 몇 페이지씩 넘기고, 결국 검색창으로 갑니다. 만드는 시간보다 찾는 시간이 길어지는 순간입니다.
Sencha가 그 시간을 겨냥한 도구를 내놓았습니다. Sencha AI Coding Companion 입니다. Ext JS 개발만을 위해 만든 AI 어시스턴트로, 레이아웃 문제를 디버깅할 때든 설정을 찾을 때든 바로 답을 줍니다.
왜 만들었나
목적은 분명합니다. 문서를 읽어야 할 것에서 바로 쓸 수 있는 코드로 바꿔 주는 것입니다. 복잡함에 발이 묶이지 않고 만들던 것을 계속 만들게 하는 데 초점이 있습니다.
할 수 있는 일은 네 가지로 정리됩니다.
- 몇 초 만에 뼈대를 세웁니다 — 코드 조각, 시작 템플릿, 컴포넌트 전체를 만들어 냅니다.
- 말로 설명하면 UI가 나옵니다 — Classic인지 Modern 툴킷인지 같은 맥락을 함께 알려 주면 그에 맞는 코드를 씁니다.
- API를 바로 이해합니다 — 문서를 뒤지는 대신 질문합니다.
- 디버깅을 돕습니다 — 뭔가 깨졌을 때 맥락에 맞는 도움을 받습니다.
범용 챗봇과 무엇이 다른가
요즘 AI 챗봇은 어디에나 있습니다. 그런데 대부분은 범용이거나, 맥락이 제한적이거나, Sencha 문서를 깊이 학습하지 않았습니다. 이 어시스턴트는 Ext JS와 Sencha 프레임워크, 공식 문서, 커뮤니티의 모범 사례를 학습했다는 점이 다릅니다.
실제로 쓰는 방식은 이렇습니다. Grid를 어떻게 설정하는지 알고 싶을 때 여러 페이지를
넘기는 대신 그냥 묻습니다. 검증이 붙은 폼 패널이 필요하면 예제 코드를 그 자리에서
만들어 줍니다. Ext.form.Panel과 Ext.form.field.Text를 조합하고
allowBlank, minLength 같은 내장 검증을 적용한 코드가 나옵니다.
MVVM이나 클래스 시스템처럼 개념 설명이 필요한 것도 정리해서 알려 주고, 원인을 짚기 어려운 레이아웃 문제는 디버깅 순서를 따라가며 안내합니다.
개발자들이 좋아하는 지점
- 맥락을 반영한 답 — 반응형 레이아웃이든 스토어 필터링이든 데이터 바인딩이든, 묻는 상황에 맞춰 답이 나옵니다.
- 바로 쓰는 코드 — 대부분의 답에 Ext JS 코드가 딸려 나와 복사해서 고쳐 쓰면 됩니다.
- 학습 도구로도 쓰임 — 개념을 설명하고 모범 사례를 권하며, 신입 개발자에게 Ext JS의 MVC/MVVM 구조를 안내합니다.
- 계속 갱신됨 — Idera AI 엔지니어링 팀이 제품 로드맵에 맞춰 함께 발전시킵니다.
앞으로
지금은 Ext JS 문서에서 시작한 단계입니다. 다음 갱신에서는 Sencha Cmd, ExtGen, Themer, Architect, IDE 플러그인, GXT, Sencha Test, Inspector, Rapid Ext JS, ReExt 등 다른 제품 문서까지 확장할 예정이고, 새 개발자를 위한 맞춤 학습 경로도 준비 중입니다.
쓰는 법
설치할 것이 없습니다. Sencha 문서 사이트에서 Ext JS로 들어가 Ask Sencha AI를 누르고 물어보면 됩니다. 컴포넌트, 아키텍처, 이벤트, 테마 — Ext JS에 관한 것이라면 무엇이든 답합니다. 무료로 쓸 수 있습니다.
AI가 개발자를 대신하지는 않습니다. 다만 검색에 쓰던 시간을 만드는 데 돌려줍니다.
자주 묻는 질문
어떤 도구인가요?
Ext JS 코드를 더 빠르게 쓰고, 디버깅하고, 다듬도록 돕는 AI 개발 어시스턴트입니다.
어떻게 개발 속도를 높이나요?
반복적인 코딩 작업을 자동화하고, 문법을 제안하고, 컴포넌트를 만들어 주고, 문제 해결을 바로 돕습니다.
초보자와 숙련자 모두에게 쓸모가 있나요?
그렇습니다. 초보자는 Ext JS의 코딩 방식을 빠르게 익히고, 숙련자는 작업 속도를 얻습니다.
기존 프로젝트에 붙일 수 있나요?
기존 Ext JS 환경과 함께 쓸 수 있고, 지금의 작업 흐름을 바꾸지 않습니다.
미래웹의 관점
- 이 도구가 겨냥하는 것은 Ext JS의 학습 곡선입니다. 국내 도입 검토에서 가장 자주 나오는 우려가 "쓸 줄 아는 개발자를 구하기 어렵다"인데, 실제로는 자바스크립트 기본기가 있는 개발자가 Ext JS 방식을 익히는 데 걸리는 시간이 문제였습니다. 그 시간을 줄여 주는 장치입니다.
- 범용 AI에 Ext JS 코드를 물었을 때 겪는 문제와 대비됩니다. 학습 데이터에 옛 버전 코드와 폐기된 API가 섞여 있어 지금은 동작하지 않는 코드가 자신 있게 나옵니다. 공식 문서를 근거로 답하는 도구는 그 위험이 낮습니다. AG Grid도 같은 문제를 같은 방식으로 풀었습니다.
- 다만 이것은 문서 사이트에서 쓰는 웹 도구입니다. AG Grid의 ag-dev 처럼 에디터의 코딩 에이전트에 붙는 형태는 아닙니다. 사내 개발 환경에 AI를 붙이는 일은 별개의 과제로 봐야 합니다.
- 망분리 환경에서는 외부 AI 서비스 접속 자체가 막히는 경우가 많습니다. 도입 전에 사내 정책부터 확인하시는 편이 좋습니다.
Ext JS 라이센스 구성과 개발자 교육은 국내 총판인 미래웹으로 문의해 주십시오. 사내 AI 활용 교육도 함께 진행합니다.
이 글은 Sencha 공식 블로그 게시물 Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development 를 미래웹 주식회사가 한국어로 옮긴 것입니다. 「미래웹의 관점」 항목은 원문에 없는 미래웹의 해설입니다. 이미지는 Sencha 원본을 그대로 사용했으며 저작권은 Sencha / Idera, Inc. 에 있습니다.