Figma가 오토 레이아웃(Auto Layout)에 수직 wrap 기능을 추가했습니다. 여러 열로 구성된 레이아웃이 콘텐츠가 추가되거나 삭제돼도 반응형으로 유지됩니다.
오토 레이아웃은 Figma의 핵심 기능 중 하나로, 이번 업데이트는 그중에서도 실무자들이 오랫동안 요청해온 기능으로 꼽힙니다.
기존 문제 — 다들 겪었던 '가짜 반응형'
콘텐츠 양이 예상보다 많아지면 프레임 밖으로 내용이 넘치거나, 레이아웃이 깨지는 경우가 많았습니다. 이를 수동으로 다시 조정해야 하는 번거로움이 있었습니다.
특히 카드형 리스트나 태그 모음처럼 항목 개수가 유동적인 컴포넌트에서는, 항목이 늘어날 때마다 프레임 크기나 열 구성을 다시 잡아야 했습니다. 그동안은 오토 레이아웃을 중첩해서 쌓거나 플러그인을 동원해 우회하는 방식으로 이 문제를 해결해온 팀이 많았는데, 이는 파일 구조를 복잡하게 만들고 유지보수를 어렵게 만드는 대표적인 원인이었습니다.
무엇이 달라지나
이제 넘치는 콘텐츠는 프레임 밖으로 밀려나는 대신 자동으로 새로운 열로 넘어갑니다. 가로 wrap이 기존에 지원되던 것처럼, 세로 방향으로도 동일한 방식이 적용된 것입니다.
열의 개수와 너비를 미리 설정해두면, 콘텐츠 양에 따라 알아서 열이 늘어나거나 줄어듭니다. 카드형 리스트, 태그 모음, 갤러리처럼 항목 개수가 유동적인 컴포넌트에 특히 유용합니다.
실무 적용
디자인 시스템에서 반복적으로 쓰이는 카드·태그 컴포넌트에 수직 wrap을 적용해두면, 콘텐츠 길이가 바뀔 때마다 레이아웃을 다시 잡는 수작업을 줄일 수 있습니다.
실제 데이터가 얼마나 들어올지 예측하기 어려운 대시보드나 목록형 화면을 디자인할 때, 미리 이 기능을 적용해두면 이후 개발 단계에서의 예외 처리 논의도 줄어들 수 있습니다. 특히 개발자와의 핸드오프 과정에서 '데이터가 많아지면 레이아웃이 어떻게 되나요?'라는 질문에 프로토타입으로 바로 답할 수 있다는 점이 실무적으로 큰 차이를 만듭니다.
Q. 피그마 오토레이아웃 수직 wrap은 무엇인가요?
A. 여러 열로 구성된 레이아웃에서 콘텐츠가 넘칠 때 프레임 밖으로 밀려나는 대신 자동으로 새로운 열로 넘어가게 해주는 기능입니다.
Q. 어떤 컴포넌트에 유용한가요?
A. 카드형 리스트, 태그 모음, 갤러리처럼 항목 개수가 유동적인 컴포넌트에 특히 유용합니다.
Q. 이 기능이 도입되기 전에는 어떻게 해결했나요?
A. 오토 레이아웃을 중첩해서 쌓거나 플러그인을 동원하는 방식으로 우회해왔는데, 이는 파일 구조를 복잡하게 만드는 문제가 있었습니다.