OPEN_GRID 1.5.2 — 테마 27종 · 타이포그래피 · 헤더 모양

OPEN_GRID 1.5.2를 올렸습니다. 직전 릴리스노트가 1.4.0(2026-07-17)이라, 그 뒤에 나온 1.5.0 · 1.5.1 · 1.5.2 세 판을 한 번에 적습니다. 큰 변화는 1.5.0에 들어 있고, 뒤의 두 판은 주석만 고친 판입니다.

바뀐 것은 크게 셋입니다. 내장 테마가 15종에서 27종이 됐고, 서체와 표의 머리(헤더) 모양을 따로 고를 수 있게 됐습니다. 이 둘이 더해져 그리드의 외관은 서로 안 섞이는 여섯 축이 됐습니다.

이번 판에 들어간 것

더한 것	사용법	안 쓸 때
테마 27종 (기존 15 + 신규 12)	grid.setTheme('graphite') + open-grid-themes.css	지금 쓰던 색 그대로입니다
타이포그래피 — 서체·자간·숫자 모양	applyTypography(el, 'ledger') + open-grid/typography.css	앱 용량이 안 늘어납니다
헤더 모양 — 띠·세로 구분선·밑줄	applyHeader(el, 'rule') + open-grid/header.css	앱 용량이 안 늘어납니다

세 가지 모두 새로 더한 것입니다. 1.4.0에서 올려도 코드를 고칠 곳은 없습니다.

외관 여섯 축

OPEN_GRID는 외관을 한 덩어리로 다루지 않습니다. 색을 바꿔도 모양은 그대로고, 모양을 바꿔도 색은 그대로입니다. 그래서 축을 마음대로 곱해 쓸 수 있습니다. 이번에 그 축이 넷에서 여섯이 됐습니다.

축	정하는 것	API	속성	내장
색	배경·글자·상태색	setTheme · setThemeVar	data-og-theme	27종
형태	모서리 반경·테두리 굵기와 종류	setSkin · setSkinVar	data-og-skin	6종 — flat·material·rounded·sharp·high-contrast·stitch
밀도	행 높이·글자 크기	setDensity	data-og-density	5종 — compact·comfortable·spacious·gallery·compact-touch
질감	바탕에 까는 결	setTexture	data-og-texture	3종 — linen·paper-grain·graph
타이포그래피 (신규)	서체·굵기·자간·숫자 모양	applyTypography	data-og-typography	8종
헤더 (신규)	헤더의 형태	applyHeader	data-og-header	5종

grid.setTheme('graphite');     // 색   — 표의 틀(헤더·바탕·줄무늬·선)이 무채색
grid.setSkin('sharp');         // 형태 — 직각 모서리
grid.setDensity('compact');    // 밀도 — 좁은 행
applyTypography(el, 'ledger'); // 서체 — 자릿수가 맞는 숫자 + 사선 0
applyHeader(el, 'rule');       // 헤더 — 배경 띠 없이 아래 선 하나

축끼리 값이 섞이는 것은 등록할 때 막습니다. 타이포그래피 프리셋에 색 토큰을 넣거나, 헤더 프리셋에 --og-header-bg(이름은 헤더로 시작하지만 색 축 것입니다)를 넣으면 그 자리에서 에러를 던집니다.

이름이 겹치는 것이 둘 있습니다. stitch와 high-contrast는 테마 이름이면서 형태 이름이기도 합니다. 아래에서 두 이름이 나오면 어느 축인지 함께 보세요 — setTheme()에 넣으면 색이, setSkin()에 넣으면 모양이 바뀝니다.

테마 27종

기존 15종에 12종을 더했습니다. 새 12종은 색 취향이 아니라 화면의 조건을 기준으로 만들었습니다. 밝은 쪽 6종, 어두운 쪽 6종입니다.

새 12종을 하나씩 렌더한 화면입니다. 같은 표·같은 데이터에 테마 이름만 갈아 끼웠습니다. 각 카드 아래에 실제로 잰 대비 값이 함께 찍혀 있습니다. 그림을 누르면 크게 볼 수 있습니다.

테마	바탕	쓰임새
graphite	밝음	상태색·조건부 서식이 많은 화면. 표의 틀을 전부 무채색으로 두어 색이 데이터에만 남습니다
graphite-dark	어두움	graphite의 어두운 짝. 쓰임새는 같습니다
high-contrast	밝음	눈이 잘 안 보이는 분, 나이 드신 분. 본문·헤더·선택한 행 대비 7:1 이상(WCAG AAA)
high-contrast-dark	어두움	밝은 화면을 오래 못 보는 분에게도 7:1
washi	밝음	하루 종일 띄워 두는 화면. 파란빛을 줄인 종이 색 바탕
plain	밝음	범례를 안 읽는 사람이 보는 화면. 상태색을 누구나 아는 색(초록=추가, 빨강=삭제)으로 두었습니다
field	밝음	햇빛 아래 태블릿. 색이 씻겨 나가도 밝기 차이는 남게 짰습니다
clinical	밝음	잘못 읽으면 사고가 나는 화면. 상태 3종을 색뿐 아니라 밝기로도 갈랐습니다
blueprint	어두움	도면·설계·CAD 계열
nocturne	어두움	밤에 오래 보는 화면. 어두운 바탕에 따뜻한 호박색을 씌웠습니다
sentinel	어두움	24시간 켜 두는 관제 화면. 값이 오르내릴 때 쓰는 깜빡임 색이 들어 있습니다
ticker	어두움	숫자가 계속 바뀌는 표. 실시간·트레이딩 화면

밝은 테마와 어두운 짝

성격은 그대로 두고 밝기만 뒤집고 싶을 때 쓰는 짝입니다. OS 다크모드 토글에 그대로 물릴 수 있습니다.

default → dark
graphite → graphite-dark
high-contrast → high-contrast-dark

짝은 이 세 쌍뿐입니다. slate·executive·blueprint·nocturne·sentinel·ticker는 처음부터 어두운 화면 전용이라 대응하는 밝은 판이 없고, 나머지 밝은 테마에도 어두운 짝이 없습니다. 짝이 필요하면 위 세 쌍 중 하나로 갈아타거나 직접 만드셔야 합니다.

접근성 실측

새 12종은 아래 기준을 전부 통과합니다. 기존 15종은 15종 모두 최소 한 항목에서 미달입니다. 새 테마를 만들면서 같은 기준으로 기존 테마를 다시 재다가 알게 된 사실이라, 숨기지 않고 적습니다.

미달 항목	해당 테마와 잰 값	기준
포커스 테두리가 선택한 행 위에서 사라짐 — 11종	ocean·forest·sunset·purple·rose·teal·indigo·amber·crimson은 1.00(포커스 색과 선택한 행 배경이 완전히 같은 색) · stitch 1.55 · slate 2.90	3:1 이상
삭제한 행이 opacity:0.75로 흐려진 뒤 AA 미달 — 9종	crimson 3.32 · forest 3.42 · dark 3.79 · slate 3.84 · default·purple·teal·indigo 3.87 · amber 3.89	4.5:1 이상
상태 3종이 밝기로 안 갈림 — 13종	stitch ΔL* 0.3 · sunset·teal·modern 0.4 · default·purple·indigo·amber 0.6 · ocean 1.5 · rose·crimson 2.3 · executive 2.4 · forest 2.6	ΔL* 3 이상

잰 값이 화면에서 무슨 뜻인지 두 줄로 적습니다.

• 포커스 테두리 1.00은 키보드로 쓰는 사람이 선택한 행 위에서 자기 위치를 잃는다는 뜻입니다. 마우스로만 쓰면 안 보이는 결함입니다.
• 상태 ΔL* 0.4는 추가·수정·삭제한 행이 빨강과 초록을 잘 구분 못 하는 분에게는 사실상 같은 회색이라는 뜻입니다. 색만 다르고 밝기가 같기 때문입니다.

기존 15종은 고치지 않았습니다. 색을 바꾸면 이미 그 테마로 돌고 있는 화면이 전부 같이 바뀌기 때문입니다. 하위호환을 앞에 뒀습니다. 잰 값은 위 표에 그대로 있습니다. 접근성이 요건인 화면이라면 high-contrast를 포함한 새 12종 안에서 고르세요.

타이포그래피 축

표에 이런 금액이 있다고 하겠습니다.

1,234,567
  890,123
   45,678

보통 서체에서는 1이 8보다 좁습니다. 그래서 오른쪽 정렬을 해도 자릿수가 위아래로 안 맞고, 백만 원과 십만 원이 눈으로는 비슷해 보입니다. 스크롤하며 훑다가 자리를 하나 잘못 세면 금액을 열 배로 잘못 읽습니다. 고정폭 숫자(tabular-nums)를 켜면 자릿수가 세로로 맞습니다. 이것은 취향이 아니라 정확성 문제라, 서체를 장식이 아니라 축으로 다룹니다.

같은 표에 프리셋만 갈아 끼운 화면입니다. 카드 위쪽에 그 프리셋이 실제로 건 CSS 변수 값이 그대로 찍혀 있고, 아래쪽에 자릿수·닮은 글자·한글 영문 섞임을 견주는 줄이 있습니다. 그림을 누르면 크게 볼 수 있습니다.

프리셋	쓰임새	특징
default	플러그인을 안 썼거나 껐을 때	속성을 아예 안 붙입니다 — 화면이 1px도 안 바뀝니다
ui	일반 업무 화면. 못 정하겠으면 이것	tabular-nums
ledger	경리·결산·전표	slashed-zero(0에 사선), 숫자만 따로 고정폭 서체
terminal	로그 뷰어·SQL 결과·설정 편집기	전부 고정폭
dense-scan	한 화면에 최대한 많은 행	밀도 축을 읽어, 작을수록 자간을 벌리고 굵힙니다
humanist	하루 종일 들여다보는 화면	글자 폭이 넓고, 헤더 서체를 본문과 나눕니다
hangul-first	한글이 대부분인 표	한글 우선 서체를 앞에 둡니다
cjk-doc	한·일·중이 섞인 표	lang별로 한자 모양을 갈라 그립니다

import { applyTypography } from 'open-grid/typography';
import 'open-grid/typography.css';

// 그리드가 만든 컨테이너 요소에 걸어야 전부 걸립니다
const el = document.querySelector('#container .og-container');
const { warnings } = applyTypography(el, 'ledger');
if (warnings.length) console.warn(warnings);

여기서 알아 둘 것이 셋입니다.

• 웹폰트를 내려받지 않습니다. 프리셋에 @font-face 선언도 CDN 링크도 없습니다. 시스템에 이미 있는 서체만 골라 쓰고, 없으면 다음 후보로 내려갑니다. 그래서 기기마다 실제로 쓰이는 서체가 다릅니다. 프리셋이 보장하는 것은 「어떤 서체」가 아니라 「어떤 성질」(고정폭·고정폭 숫자·자간 정책)입니다.
• grid.setTypography()는 없습니다. 그 메서드를 코어에 넣으면 코어가 455~580바이트(gzip) 늘어납니다. 안 쓰는 사람까지 그만큼을 받게 하지 않으려고 별도 함수로 두었습니다. applyTypography(el, id)로 쓰세요.
• 그리드 인스턴스를 넘기면 반쪽만 걸립니다. applyTypography(grid, id)는 CSS 변수만 주입하고 data-og-typography 속성은 안 붙입니다. 밀도 연동 크기 보정과 cjk-doc의 한자 모양 분기가 빠집니다. 그 사실은 warnings에 담겨 돌아옵니다.

헤더 축

지금까지 헤더는 모양이 하나뿐이었습니다. 테마 27종이 색만 갈아끼울 뿐, 「배경이 꽉 찬 헤더」라는 형태는 어느 테마에서도 같았습니다. 이번에 그 형태를 여섯 번째 축으로 갈라냈습니다.

프리셋	보이는 모습	고를 때
default	지금 쓰는 화면 그대로입니다. 헤더에 띠가 있고, 열 사이 세로 구분선이 있고, 얇은 밑줄이 있습니다	아무것도 안 골랐을 때
rule	헤더 배경을 안 칠하고 아래 선 하나로 세웁니다	표가 낡아 보이는 원인이 꽉 찬 배경일 때
quiet	헤더 배경은 두고 열 사이 세로 구분선만 걷습니다	열이 많아 세로선이 시끄러울 때
band	헤더 배경에 굵은 밑줄을 얹습니다	멀리서 보는 화면, 눈이 잘 안 보이는 분이 쓰는 화면
pill	정렬 중인 열만 둥근 배지로 보입니다	지금 무엇으로 정렬돼 있는지가 중요한 화면

import { applyHeader } from 'open-grid/header';
import 'open-grid/header.css';

applyHeader(document.querySelector('.og-container'), 'rule');

이 축에는 색이 없습니다. 형태 토큰 8개뿐이고, open-grid/header.css 안에 hex 값이 하나도 없습니다. 헤더에 쓰는 색은 전부 테마 토큰에서 var()로 끌어옵니다. 그래서 헤더 모양을 바꿔도 색이 안 틀어지고, 테마를 바꾸면 헤더 프리셋도 따라 바뀝니다.

default를 겨냥한 규칙은 CSS에 한 줄도 없습니다.

하나 더 있습니다. header.css를 부르면 stitch 스킨의 점선이 헤더 칸까지 닿습니다. 안 부르면 헤더 칸만 실선으로 남습니다 — 이전부터 있던 결함입니다.

함께 고친 것

• 행 hover 막대와 로딩 표시가 테마를 안 따라오던 문제. :root 안에서 --og-row-accent-color: var(--og-primary)로 선언하면 그 자리에서 값이 굳습니다. 그래서 테마가 뒤에서 --og-primary를 바꿔도 안 따라옵니다. 그 결과 행 hover 왼쪽 막대와 로딩 표시가 27종 전부에서 같은 파랑이었습니다. .og-container에서 다시 선언해 고쳤고, 이 한 건으로 13종이 대비 미달에서 통과로 올라갑니다. 기본 테마는 값이 같아 화면이 안 바뀝니다.
• 행번호 열 글자색과 여러 border-radius 리터럴을 토큰으로. 폴백 값을 지금 값 그대로 두어서 기본 화면은 안 바뀝니다. 대신 sharp 스킨을 골랐을 때 그동안 안 각지던 자리가 실제로 각집니다.
• 테마 3종 제거 — ledger·daylight·ocean-dark. 만드는 도중에만 있던 것이라 한 번도 배포된 적이 없습니다. 최종 명단에서 각각 plain·field·high-contrast-dark로 대체됐습니다. 쓰시던 것이 없어진 게 아닙니다.
• ocean의 어두운 짝 표기 삭제. 1.4.0 메타에 ocean-dark를 가리키는 표기가 있었는데 그 이름의 CSS는 만들어진 적이 없습니다. 그 짝으로 바꾸면 색이 하나도 안 걸린 그리드가 나왔습니다. 되던 것을 뺀 게 아니라, 처음부터 없던 것을 지웠습니다.
• API 문서에 새 플러그인 두 개가 나옵니다. open-grid/typography와 open-grid/header가 문서 진입점에 없어 빠져 있었습니다. 주석은 한국어·영어·일본어·중국어 네 가지로 달려 있습니다.

알아 둘 것

되는 것만 된다고 적습니다.

• 기존 테마 15종은 접근성 실측에서 미달이 있습니다. 전부 통과한 것은 새 12종뿐입니다. 잰 값은 위 「접근성 실측」 표에 있습니다.
• 질감은 아직 화면에 안 칠해집니다. setTexture('linen')은 속성과 토큰을 실제로 겁니다(개발자 도구에서 보입니다). 그런데 그 토큰을 배경으로 칠하는 CSS가 아직 없어서 결이 안 보입니다. 언제 칠하게 할지는 정해지지 않았습니다.
• 밀도를 바꿔도 보통 모드의 행 높이는 안 바뀝니다. setDensity()는 --og-row-height를 실제로 갈아끼웁니다(compact 28px · comfortable 36px · spacious 40px). 그런데 지금 그 값을 읽는 CSS는 자동 높이 모드(.og-autoheight)뿐이고, 보통 모드의 행 높이는 그리드를 만들 때 준 rowHeight 옵션이 정합니다. 밀도에서 실제로 따라 움직이는 것은 글자 크기입니다. 아직 안 고쳤습니다.
• 헤더 모양은 CSS 없이는 거의 안 바뀝니다. open-grid/header.css를 안 부르면 data-og-header 속성만 붙고 화면은 그대로입니다. 그리고 applyHeader(grid, id)처럼 그리드 인스턴스를 넘기는 경로는 형태 토큰만 주입합니다 — 프리셋 규칙이 거의 전부 data-og-header 속성이 붙어야 걸리는 것이라 이 경로로는 화면이 사실상 안 바뀝니다. 그 사실은 warnings로 돌아옵니다. 완전히 걸려면 컨테이너 요소(.og-container)를 직접 넘기세요.
• 어두운 짝이 있는 테마는 세 쌍뿐입니다. default·graphite·high-contrast 세 쌍 말고는 짝이 없습니다.
• 테마 CSS를 안 부르면 어느 이름을 넣어도 색이 안 바뀝니다. open-grid-base.css에는 default 색만 들어 있습니다. 27종은 open-grid-themes.css에 있습니다.
• 테마 CSS에는 아직 짧은 import 경로가 없습니다. 패키지의 exports에 open-grid/typography.css와 open-grid/header.css는 있는데 테마 CSS는 빠져 있습니다. 지금은 node_modules/open-grid/dist/open-grid-themes.css 파일을 <link>로 걸거나 빌드에 복사해 쓰셔야 합니다.
• 타이포그래피는 유닛 테스트로 확인할 수 없는 부분이 있습니다. 테스트 환경에는 서체가 하나도 없어서, 후보 서체 가운데 실제로 어느 것이 쓰이는지·tabular-nums가 실제 글자에 먹는지는 브라우저에서 눈으로 보셔야 합니다.

번들 크기

축 둘이 늘었지만 코어는 안 늘었습니다. 둘 다 본체와 떨어진 파일이라, 안 쓰면 브라우저가 그 파일을 아예 안 받아 갑니다.

산출물	이전	지금	받는 사람
ES 코어 청크	102,232	102,232 (증감 0)	전원
open-grid-base.css	13,927	15,240 (+1,313)	전원
open-grid-themes.css	11,390	18,214 (+6,824)	테마 CSS를 부른 사람
open-grid-header.js	—	4,099 (신규)	open-grid/header를 import 한 사람
open-grid-header.css	—	10,252 (신규)	헤더 CSS를 부른 사람
open-grid-typography.js	—	3,583 (신규)	open-grid/typography를 import 한 사람

단위는 바이트, gzip 기준입니다. 코어 청크는 저장소의 크기 검사가 재는 값과 같습니다.

번들 크기 검사는 지금 JS만 재고 CSS는 안 잽니다. 위 CSS 증감은 그 검사가 아니라 따로 잰 값입니다.

1.5.1과 1.5.2

두 판은 주석만 고친 판입니다. 발행 파일의 설계 주석에 내부에서만 쓰던 표기가 남은 채로 나갔습니다. 그것을 걷어냈습니다. 코드·값·동작은 한 글자도 안 바뀌었습니다 — 해당 파일에서 주석을 걷어내고 비교하면 이전 판과 완전히 같습니다.

1.5.1에서 한 번 걷어냈는데 1.5.2가 또 필요했던 이유를 적어 둡니다. 1.5.1에서 쓴 「바꿔 쓸 말」 목록이 일부 형태만 담고 있었고, 발행 뒤 검사도 같은 목록을 썼습니다. 그래서 검사가 자기 자신을 통과시켰습니다. 지금은 목록이 검사 스크립트 한 곳에 있고, 소스와 빌드 산출물을 함께 봅니다.

이번 판은 유닛 테스트 159파일 1,793건이 통과한 상태에서 냈습니다(건너뛴 것 2건).

올리는 방법

npm install open-grid@1.5.2

1.4.0에서 올릴 때 고칠 코드는 없습니다. 타이포그래피와 헤더를 안 쓰면 화면도 그대로입니다. 지운 테마 3종은 배포된 적이 없어 조치가 필요 없습니다.

타이포그래피와 헤더를 쓰시려면 CSS를 함께 부르세요.

<link rel="stylesheet" href="dist/open-grid-base.css">
<link rel="stylesheet" href="dist/open-grid-themes.css">      <!-- 테마 27종 -->
<link rel="stylesheet" href="dist/open-grid-typography.css">  <!-- 타이포그래피 -->
<link rel="stylesheet" href="dist/open-grid-header.css">      <!-- 헤더 -->

빌드 도구가 없어도 됩니다. 둘 다 속성 하나가 전부라 HTML에 직접 써도 똑같이 동작합니다.

<div id="grid" data-og-theme="graphite" data-og-typography="ledger" data-og-header="rule"></div>

데모와 가이드

글로만 고르기는 어렵습니다. 눌러 보실 수 있게 데모와 가이드를 함께 올렸습니다.

• 데모 · 헤더 축 — 프리셋 5종을 눌러 바꾸면서, 헤더 모양을 바꿔도 색이 안 바뀌는 것을 화면에서 재 보는 데모
• 데모 · 테마 27종 — 27종을 밝은/어두운으로 갈라 놓고 어느 업무에 어느 테마인지 함께 적은 데모
• 데모 · 외관 매트릭스 — 여섯 축을 하나씩 바꿔 가며, 손대지 않은 축의 잰 값이 안 변하는 것을 표로 보여 주는 데모
• 가이드 — 헤더 축과 테마를 고르는 표, 안 맞는 경우까지 가이드에서 보실 수 있습니다