OPEN_GRID v0.3.1 릴리즈 노트

2026년 6월 18일 · 릴리즈 노트 · OPEN_GRID

v0.3.0이 데모 사이트와 개발 가이드를 갖추는 릴리즈였다면, v0.3.1은 그리드를 실제 페이지에 임베드해도 깨지지 않게 다듬는 데 집중한 안정화 릴리즈입니다. WordPress 글에 그리드를 넣었더니 헤더가 깨지는 문제를 추적하다가, 임의의 호스트 환경에서도 일관되게 렌더되도록 코어에 격리 경계를 넣었습니다. 더불어 작은 신규 기능 2종(툴팁·줄바꿈)을 추가했습니다.

✨ 주요 변경사항

🛡 호스트 CSS 격리 — 임베드 안정성

그리드를 WordPress 글 등 임의의 호스트 페이지에 임베드할 때, 호스트 테마의 CSS가 그리드 내부(특히 헤더)로 흘러들어와 레이아웃과 색상이 깨지던 문제를 코어에서 차단했습니다. 헤더는 실제 <table>/<th>라 호스트의 table·th 스타일에 노출되는 반면, 본문 셀은 <div>라 영향이 없었던 것이 원인이었습니다.

• 헤더 레이아웃 격리 — 호스트의 line-height, table{margin}, th{border} 침범으로 행 높이·열 정렬이 어긋나던 문제 수정
• 헤더 색상 격리 — 호스트의 .entry-content th{background;color} 같은 높은 우선순위 규칙이 헤더를 다른 색으로 덮어쓰던 문제 수정 (테마 색 정상 표시)
• WordPress 전역 스타일 대응 — :where([style*="border-color"]){border-style:solid} 가 헤더 좌·우·상에 굵은 선을 만들던 문제 수정 (전 테마 동일 적용)
• 컨텍스트 메뉴 위치 — 호스트의 transform 조상 아래에서도 우클릭 메뉴가 마우스 좌표에 정확히 표시되도록 수정 (그리드 너비를 넓혀도 어긋나지 않음)

💬 신규 — 셀 툴팁

셀에 마우스를 올리면 내용을 말풍선(native title)으로 보여줍니다. 잘린 셀 내용을 확인할 때 유용합니다.

// 컬럼별 툴팁 — 문자열 또는 (값, 행) 함수
{ field: 'name', header: '이름', tooltip: (v, row) => `${v} (사번 ${row.id})` }

// 모든 셀에 자동 툴팁 — 그리드 옵션
new OpenGrid(el, { columns, tooltips: true });

↵ 신규 — 셀 줄바꿈

긴 텍스트를 한 줄로 자르지 않고 여러 줄로 표시합니다. 가상 스크롤은 고정 행 높이를 쓰므로 rowHeight를 함께 키워 사용합니다.

const grid = new OpenGrid(el, {
  columns: [{ field: 'memo', header: '비고', width: 360, wrap: true }],
  rowHeight: 64,   // 줄바꿈 줄 수에 맞게 행 높이 확대
});

데모 사이트 셀 & 편집 → 줄바꿈 & 툴팁에서 직접 토글하며 확인할 수 있습니다.

📦 다운로드

npm 레지스트리에도 open-grid@0.3.2로 발행되었습니다. CDN: https://unpkg.com/open-grid@0.3.2/dist/open-grid.js

🔄 v0.3.0 → v0.3.1

🗺 다음 계획 (v0.4.0)

• Shadow DOM 임베드 모드 검토 (완전 격리 옵션)
• 가변 행 높이(auto row height) 지원으로 줄바꿈 자동화
• 실 프로젝트 적용 사례 정리

OPEN_GRID는 MIT 라이선스 오픈소스입니다.