캔버스 보드 대규모 개선 — 정렬 단축키부터 앵커 변형까지

무한 캔버스 보드(옵시디언 JSON Canvas 호환)를 한 번 더 크게 손봤다. 정렬 버그를 잡고, 일러스트레이터식 앵커 편집·정렬을 넣고, 투명도를 "껍데기"와 "내용"으로 쪼개고, 방문자도 노드를 만질 수 있게 했다. 빌드 도구 없이 바닐라 JS 세 파일로 굴러가고, Playwright 헤드리스 스모크 테스트로 전 기능을 검증했다.

정렬을 제대로

가장 먼저 묵은 버그를 잡았다. 그룹을 정렬하면 그룹 테두리만 움직이고 안의 카드들은 제자리에 남는 문제가 있었다. 원인은 그룹을 먼저 옮긴 뒤에 자식을 수집한 탓 — 멀리 점프하면 옮겨진 사각형 밖으로 자식이 빠져 수집이 실패했다. 자식을 이동 전에 모으도록 바꾸니 그룹이 통째로 깔끔하게 움직인다.

정렬 단축키도 붙였다. 2개 이상 선택한 상태에서 Q(위) U(아래) L(왼쪽) R(오른쪽) H(세로중앙) C(가로중앙). 선택이 없으면 L은 기존대로 원 도구로 떨어진다.

하얀 화살표 — 여러 오브젝트의 변을 한 번에

가장 공들인 부분이다. 직접선택(하얀 화살표) 도구로 여러 오브젝트에 걸쳐 모서리·앵커를 드래그로 묶어 선택하고, 그 점들만 정렬할 수 있다. 예를 들어 내용에 맞춰 들쭉날쭉해진 카드 10개를 왼쪽 정렬한 뒤, 오른쪽 모서리만 쭉 드래그해서 R 을 누르면 오른쪽 끝이 한 줄로 맞아 너비가 통일된다.

선택한 앵커는 드래그나 방향키로 직접 옮겨 형태를 변형한다. 선택된 꼭지점과 거기 붙은 선분만 따라 움직이고, 선택하지 않은 앵커는 그대로 있는다. 박스는 모서리를 잡아 변을 리사이즈하고, 패스는 점을 옮겨 모양을 바꾼다.

노드를 다루는 손맛

• 접기/펼치기: 긴 카드는 우상단 버튼이나 F 키로 접는다(접힘 높이 132px). 펼쳐서 카드가 그룹 밖으로 삐져나가도 소속은 유지되도록 그룹 멤버십 판정 기준을 상단 쪽 점으로 바꿨다.
• Shift 이동 제약: 노드를 끌 때 Shift를 누르면 수평·수직·45° 대각선으로만 움직인다.
• 휠 = 스크롤, Ctrl/⌘ + 휠 = 확대/축소: 맥 트랙패드 두 손가락 스크롤·핀치와 자연스럽게 맞물린다.
• 파일 이름 변경: 업로드한 파일 노드의 표시 이름을 패널에서 바로 고친다.

투명도를 둘로 — 껍데기와 내용

투명도 슬라이더를 하나로 두니 카드 배경을 흐리면 글자까지 같이 흐려졌다. 그래서 노드(배경·테두리) 와 내용(글자·이미지) 을 따로 조절하도록 나눴다. 껍데기 투명도는 배경·테두리 색의 알파만 낮추고, 내용 투명도는 콘텐츠 요소에만 걸린다. 아래 보드의 파란 카드는 껍데기만 35%, 노란 카드는 내용만 45%다.

속성 패널 재디자인 + 사용방법 모달

자주 쓰는 패널이라 가독성을 손봤다. 폭을 넓히고, 스와치·아이콘·버튼·입력칸 크기를 28px 기준으로 통일했다. 그룹도 이제 이름·글자크기·면색·선색·글자색을 모두 편집한다.

바닥에 떠 있던 "사용방법"은 상단 메뉴바 버튼으로 옮기고, 누르면 가운데 모달로 띄운다.

다크 모드도 그대로 따라온다.

어떻게 만들었나

• 무빌드 바닐라 JS 3파일: canvas.js(코어 — 노드·엣지·선택·정렬·렌더), canvas-vector.js(벡터/펜툴 확장 — 패스·앵커·인스펙터), canvas-crop.js(이미지 크롭). 번들러 없이 <script> 세 줄.
• 권한 분리: 관리자는 편집·저장, 방문자는 노드 클릭·F 접기·드래그 이동까지 되지만 모두 비영구다(새로고침하면 관리자 배치로 복원). 더블클릭은 텍스트 복사만, 편집은 막았다.
• 검증: Playwright 헤드리스로 그룹 정렬·단축키·접기·앵커 변형·투명도 분리·방문자 조작·모달까지 39개 스모크 테스트를 짜서 전부 통과시켰다. 손으로 클릭해 확인하는 대신, 바꿀 때마다 돌려 회귀를 잡는다.

기능을 더하는 일은 결국 "지우는 만큼 더하는" 일이었다. 슬라이더 하나를 둘로 쪼개고, 정렬 한 줄을 단축키로 바꾸고, 떠 있던 버튼을 메뉴로 넣는 — 작은 결정들이 손맛을 만든다.