캔버스 그룹을 하나의 오브젝트로 — 정확한 멤버십과 더블클릭 격리 편집

오늘 한 일

icenovel.com의 캔버스(생각을 카드와 화살표로 펼치는 무한 보드)에서 그룹 동작을 세 가지 손봤다.

1. 그룹을 어디서 잡든 하나의 오브젝트처럼 움직이게 — 단, 만들 때 지정한 멤버만 정확히.
2. 그룹을 더블클릭하면 그 안으로 들어가 바깥은 흐려지고 그룹 내부만 편집한다(일러스트레이터·Figma의 격리 모드).
3. 게스트 권한 정리 — 내보내기는 관리자만, 방문자는 보기 전용.

"지정한 것만" 정확히 — 위치 기반에서 명시적 멤버십으로

먼저 "그룹 안 카드를 잡으면 그룹 전체가 따라온다"를 구현했다. 그런데 직접 써보니 엉뚱한 게 딸려왔다.

원인은 그룹의 소속을 위치로 판정하고 있었던 것이다. 그룹 사각형(프레임) 안에 들어와 있기만 하면 무엇이든 멤버로 취급했다. 그래서 프레임 위에 우연히 겹쳐 있던 무관한 카드까지 같이 끌려왔다.

"지정한 것만 정확하게 움직이고 싶다"가 핵심인데, 위치 기반으로는 불가능했다. 그래서 멤버십을 명시적으로 저장하도록 바꿨다. 그룹을 만들 때 선택한 노드에만 소속을 기록하고, 그 멤버만 함께 움직인다. 프레임 안에 우연히 들어온 다른 카드는 건드리지 않고, 겹친 다른 그룹끼리도 서로 영향이 없다.

원래는 옵시디언 JSON Canvas 포맷과의 호환을 위해 위치 기반을 고집했는데, 이번엔 정확함을 호환성보다 앞에 뒀다. 기존에 만들어 둔 캔버스는 처음 열 때 현재 위치 기준으로 소속을 한 번 굳혀, 그대로 동작한다.

더블클릭으로 그룹 안에 들어가기 (격리 편집)

그룹이 한 덩어리가 되면, 그 안의 카드 하나만 고치고 싶을 때가 문제다. 그래서 격리(isolation) 편집을 넣었다.

• 그룹을 더블클릭 → 그 그룹 안으로 진입. 바깥의 모든 것은 흐려지고 클릭도 되지 않는다. 그룹 안 카드만 편집된다.
• 빈 곳을 더블클릭하거나 Esc → 한 단계 밖으로. 중첩된 그룹이면 단계별로 드나든다.
• 상단에 지금 어느 그룹 안에 있는지 보여주는 안내 바와 나가기(✕) 버튼.
• 그룹 이름은 라벨 글자를 더블클릭해 바꾼다.

복사·붙여넣기·복제·삭제도 새 규칙에 맞췄다. 그룹을 복사하면 멤버가 함께 따라오고, 그룹을 지우면 한 덩어리로 지워진다.

게스트는 보기 전용으로

• .canvas 내보내기는 관리자 전용으로 옮겼다(방문자에게는 버튼이 보이지 않는다).
• 방문자는 보기 전용이다. 카드를 드래그하면 화면만 움직이고(팬), 내용은 바뀌지 않는다.

검증

브라우저 자동화(Playwright)로 실제 동작을 하나씩 확인했다. 그룹째 이동, 프레임 안 무관 노드가 안 따라오는지, 그룹을 만들 때 사이에 낀 카드가 안 섞이는지, 격리 진입·이탈, 기존 캔버스 호환, 게스트 보기 전용까지 모두 통과했다.

이 무한 캔버스는 데스크톱 앱 ICE Canvas로도 따로 옮겨 뒀는데, 본가인 홈페이지 쪽 편집 경험도 이렇게 조금씩 더 손에 익게 다듬어 간다.