기능 비하인드: 새로운 (새 탭에서 열림)

Figma의 새 Auto Layout은 수동으로 요소 크기와 간격을 조정하던 작업을 자동화하면서도, CSS Flexbox의 강력함을 그대로 복잡하게 노출하지 않는 방향으로 설계됐다. 핵심 원칙은 “Flexbox의 신중한 부분집합”으로, 코드와 디자인의 정렬을 돕되 누구나 쉽게 이해하고 사용할 수 있게 만드는 것이었다. 새 버전은 사용자 피드백을 바탕으로 유연성과 기능을 확장한 결과다.

수동 리사이징 문제에서 출발한 Auto Layout

• Auto Layout 출시 전에는 버튼의 텍스트가 길어지면 다음 작업을 직접 해야 했다.
  • 버튼 크기 조정
  • 주변 버튼 위치 이동
  • 대화상자 컨테이너 크기 조정
  • 패딩과 간격 재조정
• 이런 수작업은 단순히 번거로운 것을 넘어 반응형 디자인 시스템 구축의 장애물이 됐다.
• Figma 초기 설계에도 프레임 내부 객체를 자동으로 배치하는 아이디어가 있었지만, 제품 출시 당시에는 구현되지 않았다.
• 2018년 Maker Week에서 제품 디렉터 Sho가 초기 아이디어를 다시 프로토타입으로 발전시켰고, 이후 전담 팀이 Auto Layout을 실제 기능으로 구현하기 시작했다.

Flexbox를 참고하되 단순하게 설계

• 팀은 웹 기술인 CSS Flexbox의 강력함과 범용성에서 영감을 얻었다.
• 디자인과 코드 사이의 개념적 일치를 높이려면 Flexbox와 유사한 모델이 유리했다.
• 그러나 사용자가 브라우저와 CSS를 깊이 이해해야 한다면 Figma의 접근성이 떨어질 수 있었다.
• 이에 따라 “Auto Layout은 Flexbox의 신중한 부분집합이어야 한다”는 설계 원칙을 세웠다.
• 이 원칙은 기능을 추가하면서도 설정 항목과 동작 규칙을 불필요하게 복잡하게 만들지 않도록 팀의 의사결정을 이끌었다.

첫 번째 Auto Layout의 핵심 개념

• 프레임에 Auto Layout을 적용하면 내부 요소를 수직 또는 수평으로 배치할 수 있다.
• 요소 사이의 수직·수평 간격을 지정할 수 있다.
• Auto Layout 프레임은 기본적으로 주축 방향에서 내부 컴포넌트 크기에 맞춰 늘어나거나 줄어든다.
• 반대축 방향도 고정 너비 또는 내부 콘텐츠에 맞추는 방식으로 설정할 수 있다.
• 프레임 내부의 각 컴포넌트는 컨테이너 기준으로 개별 정렬할 수 있다.
  • 수직 레이아웃에서는 좌·중앙·우 정렬
  • 수평 레이아웃에서는 상·중앙·하 정렬

HTML 프로토타입과 초기 검증

• Auto Layout 디자이너 Marcin은 처음부터 HTML로 프로토타입을 제작했다.
• 실제 웹 환경과 유사한 프로토타입을 통해 기능의 사용감과 동작을 조기에 확인할 수 있었다.
• 이 과정에서 다음과 같은 세부 동작을 구체화했다.
  • 프레임 핸들의 시각적 장식
  • 객체를 드래그할 때의 동작
  • Auto Layout 프레임의 외곽선 표시
• 초기 프로토타입은 기능 목록을 정하는 데 그치지 않고, 편집기에서 사용자가 기능을 어떻게 인식하고 조작할지 검증하는 역할을 했다.

기능 확장과 사용성 사이의 균형

• 초기 Auto Layout은 접근성과 직관성을 우선해 설계됐다.
• 이후 사용자 피드백을 반영하면서 더 강력하고 유연한 레이아웃 기능을 추가했다.
• 다만 유연성을 높일수록 설정과 예외 상황이 늘어나 사용성이 떨어질 수 있으므로, 기능의 범위를 의도적으로 제한했다.
• 새 버전은 단순한 UI 변경이 아니라, 초기의 단순한 모델을 유지하면서 더 다양한 반응형 레이아웃 요구를 수용하려는 설계 개선이다.

Auto Layout을 설계할 때는 Flexbox처럼 검증된 레이아웃 모델을 참고하되, 사용자가 모든 내부 규칙을 학습하지 않아도 되도록 핵심 개념만 제공하는 것이 중요하다. 또한 실제 편집 환경을 반영한 프로토타입과 사용자 피드백을 통해 기능의 유연성과 조작의 직관성을 함께 검증해야 한다.