오토 레이아웃 (새 탭에서 열림)
피그마의 새로운 오토 레이아웃은 디자이너가 캔버스 위에서 더 직관적으로 레이아웃을 조작할 수 있도록 사용자 경험을 근본적으로 재설계하는 데 집중했습니다. 속성 패널에 의존하던 기존 방식에서 벗어나 캔버스 내 직접 컨트롤과 시각적 피드백을 강화하여 디자인 프로세스의 속도와 몰입감을 높였습니다. 이를 통해 디자인 도구의 편리함과 프론트엔드 코드 수준의 정교한 레이아웃 제어 사이의 간극을 성공적으로 좁혔습니다. ### 캔버스 내 직접 조작(On-canvas Controls)을 통한 직관성 강화 * 속성 패널을 일일이 찾아가지 않고도 캔버스 위에서 패딩(Padding)과 간격(Spacing)을 직접 드래그하여 조절할 수 있는 인터랙티브 핸들을 도입했습니다. * 사용자가 마우스를 올렸을 때만 관련 컨트롤이 나타나도록 설계하여 캔버스의 시각적 복잡도를 최소화하고 디자인 작업 자체에 집중할 수 있게 했습니다. * 정확한 수치 입력이 필요한 경우를 위해 핸들을 클릭하면 즉시 입력창이 뜨는 하이브리드 인터페이스를 구축하여 정밀함과 속도를 동시에 잡았습니다. ### 개발 환경과의 정렬을 위한 기능 확장 * 그동안 오토 레이아웃에서 불가능했던 '음수 간격(Negative Spacing)'을 지원하여, 요소들이 자연스럽게 겹치는 스택 디자인을 오토 레이아웃 환경 내에서 유지할 수 있게 했습니다. * 프레임 내 특정 요소를 자유롭게 배치할 수 있는 '절대 위치(Absolute Position)' 기능을 추가하여, CSS의 `position: absolute`와 동일한 논리를 디자인 도구에 구현했습니다. * 개별 요소의 정렬(Alignment)과 분포(Distribution) 옵션을 시각적으로 시뮬레이션할 수 있는 컨트롤러를 제공하여 레이아웃의 변화를 실시간으로 체감하게 했습니다. ### 복잡한 구조를 지탱하는 성능 및 사용성 개선 * 수많은 중첩(Nesting)이 발생하는 오토 레이아웃의 특성을 고려하여, 복잡한 레이어 구조에서도 성능 저하 없이 매끄럽게 작동하도록 렌더링 엔진을 최적화했습니다. * 요소들의 쌓임 순서(Canvas Stacking)를 변경할 수 있는 옵션을 추가하여, 첫 번째 요소가 위로 올지 마지막 요소가 위로 올지 디자이너가 직접 결정할 수 있도록 세밀한 제어권을 부여했습니다. * 텍스트 베이스라인 정렬 기능을 고도화하여 서로 다른 크기의 폰트나 아이콘이 섞여 있는 경우에도 시각적인 정렬을 완벽하게 맞출 수 있도록 개선했습니다. 디자이너는 이제 툴의 기술적 제약 때문에 레이아웃을 수동으로 수정할 필요가 없으며, 실제 제품이 구현되는 논리와 동일한 방식으로 디자인을 구성할 수 있습니다. 새로운 오토 레이아웃의 기능을 적극적으로 활용하여 디자인 시스템의 유연성을 높이고, 개발자와의 소통 과정에서 발생할 수 있는 레이아웃 구현 오차를 사전에 방지하는 것을 권장합니다.