버전 관리: 피그마 (새 탭에서 열림)
Figma의 Layers 패널에 가로 스크롤을 추가하는 일은 단순한 UI 개선이 아니었다. 계층 구조, 접기·펼치기와 잠금·숨김 상태, 가상화 렌더링, 다양한 텍스트 길이와 다중 스크롤 방향이 서로 얽혀 있었기 때문이다. Figma 팀은 세 가지 프로토타입을 시험하며 사용자의 계층 구조 인식과 작업 맥락을 해치지 않는 방향을 탐색했다.
가로 스크롤이 어려웠던 이유
- Layers 패널은 자주 사용되고 신뢰성이 중요해 작은 동작 변화도 신중해야 했다.
- 레이어는 정적인 목록이 아니라 다음과 같은 상태를 가진다.
- 숨김·잠금
- 계층 접기·펼치기
- 부모·자식 관계
- 성능을 위해 현재 화면에 보이는 레이어만 렌더링하는 가상화가 적용되어 있었다.
- 세로로 스크롤하면 새 레이어가 렌더링되고, 레이어 이름 길이가 달라져 가로 스크롤 영역과 정렬이 복잡해졌다.
- 핵심 목표는 단순히 콘텐츠를 옮기는 것이 아니라 사용자가 현재 계층상의 위치와 “더 볼 내용이 있음”을 계속 이해하도록 하는 것이었다.
- 디자이너 Giorgio Caviglia는 JavaScript, HTML, CSS, React로 직접 프로토타입을 만들어 수천 개 레이어와 다양한 상호작용을 실제로 검증했다.
첫 번째 시도: 화면 왼쪽의 보이지 않는 레이어 표시
- 레이어가 패널의 왼쪽 위나 오른쪽 아래 경계를 벗어나면 해당 위치에 아이콘을 표시하는 대칭형 UI를 실험했다.
- 아이콘을 패널 가장자리에 고정하는 것은 쉬웠지만, 레이어 이름이 스크롤될 때 배경이 일부 요소 아래로 지나가고 다른 텍스트는 가려야 했다.
- 컴포넌트가 위에 놓인 요소의 정확한 위치를 알지 못해 다음 문제가 발생했다.
- 배경이 텍스트를 제대로 덮지 못함
- 레이어 행 구조와 불투명 배경 처리가 충돌함
- 스크롤 상태에 따라 시각적 가림 처리가 달라짐
- 디자인 측면에서도 왼쪽 상단에 레이어 이름의 끝부분이 들쭉날쭉하게 남아 시각적으로 어색했다.
- 결과적으로 대칭성을 유지하려던 해결책이 새로운 문제를 만들었고, 패널 상단의 빈 공간을 어떻게 다룰지 재검토하게 됐다.
두 번째 시도: 선택한 레이어로 자동 스크롤
- 캔버스에서 선택한 레이어가 Layers 패널에 보이지 않으면 해당 레이어가 패널 중앙에 오도록 자동으로 가로 스크롤하는 방식을 실험했다.
- 이론적으로는 편리했지만, 실제 사용에서는 가로와 세로 스크롤이 동시에 발생해 사용자가 현재 위치를 잃었다.
- 특히 깊게 중첩된 레이어를 선택하면 부모 레이어가 화면에서 사라져 계층 구조를 파악하기 어려웠다.
- 사용자는 작업 대상의 이름뿐 아니라 다음 정보도 함께 확인해야 한다.
- 어떤 부모 아래에 있는지
- 계층상 어디에 위치하는지
- 특정 컴포넌트의 일부인지
- 화면을 갑자기 다른 위치로 이동시키는 동작은 Google Maps가 주행 중 지도를 갑자기 다른 장소로 옮기는 것과 비슷한 혼란을 유발했다.
- 도구가 사용자를 돕기보다 현재 작업에 대한 정신적 모델을 깨뜨리는 결과가 되어 채택되지 않았다.
세 번째 시도: 레이어 이름 변경 중 스크롤
- 가로 스크롤 도입으로 레이어 이름을 편집하는 동안 다른 레이어로 스크롤할 때의 동작도 새롭게 정의해야 했다.
- 사용자가 이름 입력 중 다른 레이어를 보기 위해 스크롤하면, 입력 중인 텍스트를 자동으로 새 이름으로 확정하는 방안을 검토했다.
- 그러나 스크롤은 이름 변경을 확정했다는 충분히 강한 신호가 아니었다.
- 이 동작을 채택하면 사용자가 의도하지 않게 레이어 이름을 변경할 위험이 있었다.
- 따라서 스크롤과 편집 확정의 관계를 별도로 설계해야 한다는 점이 드러났다.
실용적인 시사점
- 복잡한 UI에서는 정적인 화면 설계만으로 모든 상태를 예측하기 어렵기 때문에 실제 코드 기반 프로토타이핑이 유용하다.
- 자동 이동은 편리함보다 사용자의 공간적·계층적 맥락 보존을 우선해야 한다.
- 스크롤, 선택, 편집처럼 서로 다른 의도를 가진 동작을 하나의 암묵적 신호로 처리하면 오작동과 혼란이 발생한다.
- 특히 가상화된 계층형 UI에서는 렌더링 구조, 텍스트 가림, 상태 변화까지 함께 고려해야 한다.