Web Component · Edu

<iso-layers>

학년이나 단계처럼 위아래 순서가 있는 판을 쌓고, 판마다 항목 블록을 올립니다. 한 층을 펼치면 위 층들이 들려 올라가 안쪽 블록이 가려지지 않습니다.

가상 예시 데이터이며 외부로 전송되지 않습니다. 학년·단원별 통계 예시입니다.

예시: 학년별 수학 성취기준 층 구조

판을 클릭하면 해당 층이 펼쳐지고(open), 다시 클릭하면 접힙니다. 키보드 화살표 키(위/아래: 층, 좌/우: 항목)로 자유롭게 탐색할 수 있습니다.

층 펼침과 키보드 내비게이션

iso-layers는 수직 위계와 항목별 세부 수치를 동시에 표현할 수 있는 최적의 구조를 제공합니다.

부드러운 판 들림 (GPU 가속): 층이 펼쳐질 때 레이아웃을 다시 계산하지 않고 CSS translate로 위쪽 판들을 들어 올리므로 60fps 이상의 부드러운 애니메이션이 유지됩니다.
로빙 탭인덱스 (Roving tabindex): 화살표 위/아래 키로 층간을 오가고, 좌/우 키로 층 내 단원 항목들을 차례로 이동하며 포커스된 항목의 층이 자동으로 펼쳐집니다.
측면 판 라벨: 각 층의 판 우측에 학년/단계 이름 라벨이 깔끔하게 정렬되어 항상 노출됩니다.

속성

속성	형식	의미
`data`	JSON 배열	층들의 배열(`Layer[]`). 잘못된 형식이면 오류 문구를 표시합니다
`open`	정수 (0 이상)	현재 펼쳐진 층의 0-based 인덱스. 지정하지 않거나 유효하지 않으면 모든 층이 기본 높이로 닫힘
`max`	숫자	축척 최댓값. 생략 시 전체 항목 중 최댓값
`unit`	숫자(px)	기본 등각 단위(`--iso-u`). 기본 24
`height-units`	숫자	최댓값일 때의 블록 높이 단위. 기본 5
`label`	문자열	접근성 캡션(`aria-label` 및 숨김 표 `caption`)
`renderer`	`css` \| `svg` \| `auto`	렌더링 방식. 기본 `auto`

data 항목 (Layer)

키	형식	의미
`k`	문자열 · 필수	층 이름 (예: "3학년", "초급")
`items`	배열 · 필수	해당 층에 올라갈 항목 객체들의 배열

items 세부 항목

키	형식	의미
`k`	문자열 · 필수	항목 이름 (예: 단원명)
`v`	0 이상 숫자 · 필수	항목의 측정값 (예: 성취도%)
`c`	CSS 색 · 선택	항목 블록 색상

이벤트

판 또는 항목 블록을 누르거나 키보드로 선택하면 iso-select가 발생합니다. 판을 클릭한 경우 index: -1이 전달되어 해당 층의 펼침 상태가 토글됩니다.

document.querySelector("iso-layers").addEventListener("iso-select", (e) => {
  const { layer, index, item } = e.detail;
  if (index < 0) {
    console.log(`${layer}번 층 토글: ${item.k}`);
  } else {
    console.log(`${layer}번 층의 ${index}번 항목: ${item.k} (${item.v})`);
  }
});

빈 상태와 오류

데이터가 비어 있거나 올바르지 않으면 안내 메시지가 표시됩니다.

장면 전체는 role="group"을 가지며 전달된 label이 적용됩니다.
각 층 판은 aria-expanded="true|false" 속성을 통해 펼침 상태를 보조 기술에 명확히 알립니다.
화살표 키로 층과 항목을 자연스럽게 탐색할 수 있는 키보드 접근성을 제공합니다.
층, 항목, 값을 구조화한 숨김 표(.iso-sr-only)가 기본 생성되어 스크린 리더에서 읽을 수 있습니다.