레이어 모델과 z-index

이번에는 레이어 모델입니다.

레이어는 단순히 “위아래 순서”만 뜻하지 않습니다. 이름, 부모 관계, 잠금, 숨김, 선택 가능성까지 담는 편집기 상태입니다. 레이어 패널에서 하나를 위로 올리면 화면 순서도 바뀌고, hit testing 순서도 바뀌어야 합니다.

레이어는 UI 목록이 아니라 모델입니다.

렌더링 순서와 선택 순서

renderOrder = depth-first tree order + z policy
hitOrder = reverse(renderOrder)
visible(node) = node.visible && visible(parent)

레이어 패널은 DOM 목록이 아니라 편집기 모델입니다. render order는 화면 순서를 만들고, hit order는 그 반대로 선택 후보를 검사합니다.

화면에서 위에 보이는 요소가 먼저 선택되어야 하므로 hit test는 보통 렌더링 순서의 반대로 검사합니다.

DOM 기반 구현에서는 모델의 layer order를 DOM child order나 z-index에 명시적으로 반영합니다. 둘 중 무엇을 쓰든 중요한 건 모델과 렌더링 결과가 같은 정책을 공유하는 것입니다.

잠긴 레이어는 화면에는 보이지만 선택 후보에서는 제외할 수 있습니다. 숨겨진 레이어는 렌더링과 선택 모두에서 제외합니다.

locked: render yes, hit test no
hidden: render no, hit test no

이 차이를 명확히 해야 사용자가 레이어 패널에서 기대한 대로 동작합니다.

데모에서는 레이어 순서를 바꾸고 hit testing 순서가 같이 바뀌는지 확인합니다.

오늘의 핵심은 레이어 패널 조작을 DOM 조작이 아니라 모델 변경 명령으로 보는 것입니다. 그래야 undo/redo, 저장, 협업이 같은 레이어 id를 기준으로 연결됩니다.