3D 데이터를 2D 도식에 얹을 때 좌표가 어긋나던 문제 — 테두리 중심 정렬

• 3D 뷰어의 구조 데이터를 2D 도식으로 옮기고 그 위에 연결선을 얹는 기능

증상

• 연결선이 엉뚱한 곳을 가리킴 — 같은 구성요소인데 두 레이어에서 위치가 어긋남
• 라벨이 바깥으로 튀지 않는 구조에서는 우연히 맞아 정상으로 보였음

원인

세 가지가 겹쳐 있었음.

• 좌표 기준이 서로 다름 — 연결선 위치를 계산하는 비표시 레이어는 요소 위치에 배율을 곱해 좌표를 만들고, 화면에 보이는 그림은 외부 라이브러리가 자기 방식으로 다시 배치. 원점과 간격이 불일치
• 라벨 때문에 중심이 어긋남 — 두 레이어를 각자의 테두리 사각형 중심으로 포갰는데, 실제 그림은 라벨 글자가 바깥으로 삐져나와 사각형이 더 크고 한쪽으로 치우침. 중심을 맞출수록 오히려 틀어짐
• viewBox 때문에 픽셀 이동이 안 통함 — 그림 SVG가 화면 픽셀과 별개인 자체 좌표 격자를 씀. 픽셀 단위로 옮겨도 안쪽 좌표는 그대로

조치

• 중심 기준을 '첫 연결선 하나'에서 두 레이어 각각의 전체 테두리 사각형 중심으로 변경
• 두 중심의 차이만큼 그림을 옮기고 축소 배율을 함께 적용
• 크기 측정 API가 SVG 내부 좌표 기준과 화면 픽셀 기준으로 나뉘어 값이 다름을 확인하고 같은 좌표계로 통일

남는 한계

• 어긋남은 크게 줄었으나 라벨·viewBox라는 근본 원인은 그대로
• 두 좌표계가 애초에 다른 이상 포개서 맞추는 방식에는 한계가 있음
• 근본 해결은 외부 그림을 걷어내고 좌표 레이어가 이미 가진 정보로 직접 그려 좌표계를 하나로 두는 것 — 팀에 제안했고 현재 구현은 중심 정렬 방식