Figma는 레이어 패널의 깊은 계층 구조에서 발생하는 가독성 문제를 해결하기 위해 세 가지 가로 스크롤 방식을 탐색했습니다. 단순히 기술적인 구현을 넘어, 사용자가 레이어의 맥락을 잃지 않으면서도 긴 이름을 쉽게 읽을 수 있도록 하는 최적의 UX를 찾는 것이 핵심이었습니다. 최종적으로 Figma는 성능과 사용성을 모두 잡기 위해 구조적 아이콘은 고정하고 텍스트만 유연하게 반응하는 정교한 인터랙션 방식을 채택했습니다.

단순 가로 스크롤의 한계와 초기 탐색

가장 직관적인 방법인 overflow-x: auto를 적용했을 때, 레이어 이름이 길어질수록 왼쪽의 계층 구조 아이콘(눈 아이콘, 잠금 아이콘 등)이 화면 밖으로 사라지는 문제가 발생했습니다.
사용자가 레이어 이름을 확인하기 위해 오른쪽으로 스크롤하면 해당 레이어의 현재 상태를 파악하거나 제어할 수 없게 되어, 도구로서의 사용성이 크게 저하되었습니다.
또한, 단순히 가로 스크롤바를 추가하는 것만으로는 수천 개의 레이어가 중첩된 복잡한 디자인 파일에서의 성능 최적화 문제를 완벽히 해결하기 어려웠습니다.

가변형 레이아웃과 호버 인터랙션 시도

레이어 패널의 전체 폭을 고정하지 않고 내용물에 따라 가변적으로 늘어나는 방식을 검토했으나, 이는 캔버스 영역을 침범하여 디자인 작업 공간을 좁게 만드는 부작용이 있었습니다.
마우스 커서를 올렸을 때만 레이어 이름이 확장되는 방식도 고려되었지만, 빈번한 레이아웃 시프트(Layout Shift)로 인해 시각적 피로도가 증가하고 의도치 않은 클릭 실수를 유발하는 한계가 있었습니다.
이 과정에서 Figma 팀은 '맥락 유지(Context Preservation)'와 '가독성 확보'라는 두 마리 토끼를 잡기 위한 더 정밀한 엔지니어링 접근이 필요함을 확인했습니다.

스티키 요소와 가변 인덴트를 활용한 최종 솔루션

Figma는 레이어의 계층 관계를 나타내는 인덴트(들여쓰기) 가이드라인과 주요 제어 아이콘을 왼쪽에 고정(Sticky)하는 하이브리드 방식을 채택했습니다.
사용자가 가로로 스크롤할 때, 레이어 이름 텍스트는 유연하게 움직이지만 해당 레이어가 속한 부모 계층의 위치 정보와 상태 아이콘은 화면 왼쪽 끝에 머물도록 설계했습니다.
이를 위해 복잡한 가상 리스트(Virtual List) 환경 내에서 스크롤 오프셋을 계산하고, 수천 개의 돔(DOM) 요소가 실시간으로 반응하면서도 60fps의 부드러운 성능을 유지하도록 렌더링 로직을 최적화했습니다.

복잡한 계층 구조를 다루는 소프트웨어라면 표준 스크롤 기능에 의존하기보다 정보의 우선순위를 정의하는 것이 중요합니다. Figma의 사례처럼 사용자가 항상 확인해야 하는 '제어 요소'와 필요할 때만 확인하는 '상세 이름'을 분리하여 설계하면, 한정된 UI 공간 내에서 정보 밀도를 효과적으로 관리할 수 있습니다.