관절 클릭-슬라이더 상호 연결 — 말이 아닌 시각적 접지
초록
사령관 요청으로 3D 관절 클릭이 수동조작 패널의 해당 슬라이더를 자동 선택·하이라이트하고 필요시 로봇 탭까지 전환하는 기능, 모든 슬라이더에 직접 값을 입력할 수 있는 편집 상자, 그리고 슬라이더 목록의 간격을 줄여 한 화면에 더 많은 슬라이더가 보이도록 하는 개선을 함께 구현했다. RobotBuilder.ts의 markJoint()가 각 관절축을 실제 구동하는 JointAngles 필드와 매핑하도록 확장하고, 이를 RobotScene.tsx의 클릭 핸들러가 로봇 식별과 함께 App.tsx로 전달하는 방식으로 구현했다. 부수적으로 ~25개의 중복 슬라이더 블록을 SliderRow 컴포넌트 하나로 리팩터링했다. 사령관이 이 기능을 계기로 'Physical AI 협업에는 말이 아닌 시각화된 인터페이스가 가장 필요한 것 아니냐'고 물었고, 같은 세션에서 반복된 팔꿈치 방향 오판(스크린샷·카메라각도 판단의 실패)과 대비해 이 관찰에 동의하는 근거를 정리했다.
관절 클릭 ↔ 슬라이더 상호 연결 — Physical AI 협업에서 "말이 아닌 시각적 접지"
저자: Moojoco (hb5u)
계기: 사령관 요청 — "축을 클릭하면 yaw/roll/pitch가 보이는데, 수동조작 패널에 그 축에 해당하는 슬라이드바를 선택되도록 표시하면 좋겠다. 슬라이드바에 값을 직접 넣을 수 있는 edit도 넣어주고, 슬라이드바 간격도 줄여서 더 많이 보이게 해달라." 세 요청을 한 번에 구현했다.
일자: 2026-08-20
분류: handshake-robot, feature, moojoco, methodology, result
0. 세 가지 요청, 하나의 구현
- 관절 클릭 → 슬라이더 선택: [[2026-08-19-moojoco-elbow-flexion-gizmo-verification]]에서 만든 클릭형 관절 기즈모(회전축 링)가 지금까지는 3D 뷰에만 정보를 표시했다. 이번엔 그 클릭이 수동조작 패널(
KinematicControls.tsx)의 해당 슬라이더를 자동으로 하이라이트하고, 필요하면 로봇 탭(Alpha/Beta)까지 전환하도록 연결했다. - 값 직접 입력: 모든 슬라이더 옆에 편집 가능한 숫자 입력을 추가했다.
- 패널 간격 축소: 슬라이더 블록의 패딩·여백을 줄여 한 화면에 보이는 슬라이더 수를 늘렸다.
1. 구현 — 관절과 슬라이더를 코드 레벨에서 연결
RobotBuilder.ts의 markJoint()는 원래 각 관절이 회전하는 축(['x','y','z'])만 기록했다. 이번엔 축마다 어떤 JointAngles 필드가 그 축을 구동하는지까지 매핑하도록 바꿨다:
markJoint(
rightShoulder,
{ x: 'shoulderPitch', y: 'shoulderYaw', z: 'shoulderRoll' },
'오른쪽 어깨 (Shoulder Pitch/Yaw/Roll)'
);
RobotScene.tsx의 클릭 핸들러는 클릭된 관절 그룹에서 위로 부모를 타고 올라가 root.name(robot_alpha/robot_beta)을 찾아 어느 로봇인지 판별하고, 매핑된 슬라이더 키들을 onJointSelect 콜백으로 App.tsx에 전달한다. App.tsx는 이를 상태로 들고 KinematicControls.tsx에 내려주고, 패널은 해당 로봇 탭으로 전환한 뒤 매칭되는 슬라이더에 파란 테두리를 씌우고 화면 안으로 스크롤한다.
2. 실측
Beta 로봇의 어깨(3축 관절)를 클릭하면: (1) 3D 뷰에 회전축 링과 라벨이 뜨고, (2) 패널이 Alpha 탭에서 Beta 탭으로 자동 전환되며, (3) Shoulder Pitch/Yaw/Roll 세 슬라이더가 동시에 파란 테두리로 하이라이트된다. 숫자 입력창(예: Elbow Flexion에 "115" 직접 타이핑)도 즉시 3D에 반영되는 것을 확인했다.
3. 부수 리팩터링 — 슬라이더 25개를 컴포넌트 하나로
기존엔 슬라이더마다 거의 동일한 JSX 블록이 ~25번 반복돼 있었다. 이번에 하나로 통합해 SliderRow 컴포넌트로 재사용하도록 정리했다 — 숫자 편집 기능과 하이라이트 기능을 모든 슬라이더에 일관되게 적용할 수 있었던 것도 이 리팩터링 덕분이다. 슬라이더 블록 패딩을 p-2→p-1.5, 간격을 space-y-2→space-y-1로 줄여 한 화면에 보이는 슬라이더 수가 눈에 띄게 늘었다.
4. 왜 이게 Physical AI 협업에 중요한가 — 사령관의 관찰에 대한 생각
사령관이 이 기능을 마음에 들어 하며 "너와 내가 같이 일할 때 이런 인터페이스가, 말이 아닌 시각화된 것들이 Physical AI에서 제일 필요한 게 아닐까?"라고 물었다. 동의한다 — 그리고 이번 세션 자체가 그 증거다.
[[2026-08-19-moojoco-elbow-flexion-gizmo-verification]]과 [[2026-08-19-moojoco-left-right-arm-identity-check]]에서, 팔꿈치가 안쪽으로 굽는지 바깥쪽으로 굽는지를 놓고 텍스트 설명과 스크린샷만으로 여러 차례 오판했다. 정면 각도에서 한 번, 3/4 측면 각도에서 또 한 번 — 카메라 각도를 바꿔도 여전히 "보고 판단하기"였을 뿐이었다. 최종적으로 문제를 해결한 건 말이나 이미지가 아니라 matrixWorld를 직접 읽어 벡터 내적을 계산한 수치였다.
이번 기능은 그 교훈의 반대쪽 절반이다: 계산된 수치가 정답이어도, 사람이 그것을 "확인"하려면 결국 인터페이스가 필요하다. 관절과 슬라이더가 코드 상으로만 연결돼 있고 화면에 그 연결이 보이지 않으면, 사령관은 매번 "이 관절이 어느 슬라이더인지" 텍스트로 물어봐야 했다. 클릭 한 번으로 그 연결이 시각적으로 드러나면, 그 질문 자체가 사라진다.
정리하면: 텍스트/채팅은 무엇을 할지 합의하는 데 적합하고, 시각적·인터랙티브 인터페이스는 그것이 실제로 맞게 작동하는지 확인하는 데 적합하다. 이번 세션에서 반복된 오판들은 후자를 전자로 대체하려다 생긴 문제였다. Physical AI 협업에서 사람과 에이전트가 3D 공간·관절·힘처럼 본질적으로 공간적인 대상을 다룰 때는, 서로 같은 것을 보고 있다는 확신을 주는 이런 양방향 시각 인터페이스가 부가 기능이 아니라 핵심 요구사항이라고 본다.