AG Grid 36.1 — 사용자에게는 열 이름 편집을,
AI에게는 정확한 문서를
36 버전에서 시작한 방향이 이어집니다. 최종 사용자에게 그리드 통제권을 더 주고, 개발자와 그들의 AI 코딩 에이전트가 제대로 만들 수 있는 도구를 함께 내놓았습니다.
AG Grid 36.1이 나왔습니다. 이번 릴리스에는 성격이 다른 두 갈래가 들어 있습니다. 하나는 화면을 쓰는 사람에게 더 많은 통제권을 주는 기능이고, 다른 하나는 코드를 쓰는 쪽 — 이제는 사람만이 아닌 — 을 위한 장치입니다.
한눈에
- 열 이름 편집 — 사용자가 UI에서 직접 열·열 그룹 이름을 바꿉니다. 바꾼 이름은 그리드 상태로 저장됩니다.
- Columns 도구 패널 메뉴 확장 — 도구 패널 컨텍스트 메뉴에 항목을 추가하거나 기본 항목을 바꿉니다.
- AI 코딩 스킬
ag-dev— Claude·Codex 같은 에이전트가 AG Grid 코드를 제대로 쓰도록 가르치는 스킬. - 마크다운 문서 — 모든 문서 페이지를 마크다운으로도 제공합니다.
- 품질 개선 — 셀 편집, 필터링, 행 그룹화, 서버 사이드 행 모델 전반의 수정.
사용자가 열 이름을 직접 바꿉니다
열 머리글은 지금까지 개발자가 열 정의로 정하는 값이었습니다. 사용자가 다르게 부르고 싶어지기
전까지는 그것으로 충분했습니다. revenue_usd 대신 "매출(원)"로 보고 싶다거나,
한 화면에 열을 더 넣으려고 이름을 줄이고 싶은 경우입니다.
그때마다 기능 요청이 올라오거나 커스텀 헤더 컴포넌트를 만들어야 했습니다.
36.1부터는 개발자가 편집 가능으로 표시한 열과 열 그룹을 사용자가 UI에서 바로 바꿉니다. 열 메뉴의 Edit Column Name 항목을 쓰거나, Columns 도구 패널에서 해당 열을 오른쪽 클릭하면 됩니다.
바꾼 이름은 Column State와 Grid State에 함께 저장됩니다. 사용자의 다른 그리드 설정과
같이 저장·복원되므로 다음에 들어와도 유지되고, 편집된 이름은 해당 열의
headerValueGetter보다 우선합니다.
열이나 열 그룹을 편집 가능하게 하려면 정의에 headerNameEditable을 설정합니다.
편집기 동작은 columnHeaderEdit 그리드 옵션으로 정합니다. 기본값인 라이브 모드에서는
사용자가 타이핑하는 대로 머리글이 바뀌고, 지연 모드에서는 적용·취소 버튼이 나타나 커밋하기
전까지 아무것도 바뀌지 않습니다.
열 이름 편집은 AG Grid Enterprise 기능입니다. 커뮤니티 버전에서는 쓸 수 없습니다.
Columns 도구 패널 메뉴를 직접 구성합니다
Columns 도구 패널에서 열을 오른쪽 클릭하면 그룹화·집계·피벗 항목이 담긴 컨텍스트 메뉴가 열립니다. 지금까지 이 메뉴는 고정이었습니다. 사용자가 열을 관리하는 그 자리에 자체 동작을 붙이고 싶으면 다른 곳에 따로 만들어야 했습니다.
36.1에서는 이 메뉴를 완전히 바꿀 수 있습니다. 항목을 추가하거나, 기본 항목을 빼거나, 열마다 특정 동작만 남기는 것도 됩니다.
설정 방식은 열 메뉴와 같습니다. 열 단위로는 colDef.columnMenuItems,
그리드 전체 로직은 getColumnMenuItems() 콜백을 씁니다. 이 콜백은
source 값을 받는데, 도구 패널에서 열렸을 때는 'columnsToolPanel'이
넘어옵니다. 콜백 하나로 열 메뉴·Columns 도구 패널·Column Chooser를 각각 다르게
구성할 수 있다는 뜻입니다.
AI 코딩 스킬 ag-dev
여기서부터가 이번 릴리스에서 눈여겨볼 대목입니다.
거대 언어 모델은 수년치 AG Grid 코드를 학습했습니다. 그 안에는 이미 폐기된 API, 사라진 패키지 이름, 오래전 버전의 작성 방식이 잔뜩 섞여 있습니다. 그래서 코딩 에이전트가 지금은 동작하지 않는 그리드 코드를 자신 있게 써 내놓거나, 더 낫게 바뀐 최신 API를 아예 놓치는 일이 생깁니다.
AG Grid가 내놓은 답이 ag-dev입니다. Claude나 Codex 같은 코딩 에이전트가
공식 지침을 따라 AG Grid·AG Charts·AG Studio 코드를 쓰도록 가르치는 스킬입니다.
여기에는 세 가지가 들어 있습니다. 먼저 LLM이 흔히 빠지는 함정을 피하는 규칙입니다. 컨테이너 높이를 빠뜨린다든지, 변경 감지를 발동시키지 않은 채 행 데이터를 제자리에서 수정한다든지 하는 것들입니다. 다음은 디버깅 지침이고, 마지막이 가장 중요합니다. 프로젝트에 설치된 라이브러리의 정확한 버전에 맞는 문서를 가져오는 방법입니다.
스킬 패키지 하나가 AG Grid, AG Charts, AG Studio를 모두 덮습니다. Claude Code나 Codex 같은 도구는 자사 라이브러리를 다루는 계획을 세우거나 코드를 쓸 때 이 스킬을 대체로 알아서 불러옵니다. 설치해 두는 것만으로 결과가 좋아집니다. 다만 자동 호출은 보장된 동작이 아니므로, 복잡한 작업에서는 명시적으로 불러 쓰기를 권합니다.
ag-dev는 AG Grid 36과 함께 나온 버전 마이그레이션 스킬 ag-update와
나란히 제공됩니다. ag-update는 마이그레이션 문서를 읽고 저장소와 대조해
새 버전으로 옮기는 데 필요한 변경 계획을 검토 가능한 형태로 만들어 줍니다.
문서를 마크다운으로도 제공합니다
AG Grid 문서의 모든 페이지가 마크다운 형식으로도 제공됩니다.
이유가 분명합니다. HTML 문서는 사람을 위해 만들어진 것입니다. AI 에이전트가 문서 페이지를 읽으면 정작 필요한 내용과 함께 내비게이션, 스타일, 스크립트가 딸려 옵니다. 컨텍스트를 낭비하고 답을 파묻는 셈입니다.
마크다운 페이지는 HTML 문서와 같은 버전별 내용을 토큰 효율이 좋은 깨끗한 형태로 줍니다.
ag-dev 스킬과 AG Grid MCP 서버가 프로젝트 버전에 맞는 지침을 찾을 때 읽는 것도
이것입니다. 에이전트를 문서 페이지로 직접 보내고 싶다면 이제 렌더링된 사이트를
헤집지 않고도 그렇게 할 수 있습니다.
품질 개선
새 기능과 함께 셀 편집, 필터링, 행 그룹화, 서버 사이드 행 모델을 포함한 여러 기능 전반에 걸쳐 품질 개선이 들어갔습니다. 전체 목록은 AG Grid 변경 로그에서 확인하실 수 있습니다.
미래웹의 관점
- 이번 릴리스의 절반은 사람이 아니라 AI 에이전트를 위한 것입니다. 컴포넌트 벤더가 "우리 문서를 AI가 어떻게 읽는가"를 제품 과제로 다루기 시작했다는 신호입니다.
- 이건 앞선 글에서 짚은 논지와 정확히 맞물립니다. AI가 다루기 좋은 프레임워크의 조건 가운데 하나가 문서 구조였는데, AG Grid는 그것을 마크다운 제공과 버전 매칭으로 답했습니다.
- 국내 팀에 실질적인 부분은
ag-dev입니다. AI로 그리드 코드를 짜다가 없는 API를 불러오는 문제를 겪고 계셨다면, 스킬 설치만으로 상당 부분 줄어듭니다. - 열 이름 편집은 엔터프라이즈 라이센스 기능입니다. 현업이 열 이름을 직접 바꾸고 싶어 하는 요구가 있었다면 이제 커스텀 개발 없이 해결됩니다.
AG Grid Enterprise 라이센스 구성과 버전 업그레이드 검토는 국내 공급사인 미래웹으로 문의해 주십시오.
이 글은 AG Grid 공식 블로그 게시물 What's New in AG Grid 36.1 (James Swinton-Bland · Kiril Matev)을 미래웹 주식회사가 한국어로 옮긴 것입니다. 「미래웹의 관점」 항목은 원문에 없는 미래웹의 해설입니다. 이미지와 시연 영상은 AG Grid 원본을 그대로 사용했으며 저작권은 AG Grid Ltd. 에 있습니다.