Auto Layout: 새로운 기능을 계기로 다시 설계한 속성 패널

Problem

기존 속성 패널에 들어가기 어려웠던 Auto Layout

엔터프라이즈 고객들은 Auto Layout과 관련된 개선을 지속적으로 요청했습니다. 요청을 모아 분석해 보니 콘텐츠에 따른 크기 조절, 패딩과 간격 설정, 레이어 순서 변경 등 Figma에서 익숙하게 사용하던 기능이 많았습니다.

하지만 Auto Layout은 기존 Size, Position, Constraints와 밀접하게 연결된 기능이었습니다. 속성 패널은 약 10년 동안 기능이 추가되며 일관된 디자인 규칙이 부족해진 상태였고, 새로운 기능만 추가하면 사용성이 더 복잡해질 수 있었습니다.

그래서 Auto Layout 도입과 함께 기존 속성 패널도 개선하기로 했습니다.

1. 일관성이 부족한 레이아웃

섹션마다 그리드와 여백, 컨트롤의 정렬 방식이 달랐습니다.

2. 부족한 접근성

색 대비와 클릭 영역이 접근성 기준에 미치지 못했고, 일부 컨트롤에는 호버 피드백도 없었습니다.

3. 익숙하지 않은 Constraints

Figma를 사용하던 사용자가 예상하는 방식과 Constraints의 동작이 달랐습니다.

Design

여러 디자이너의 의견을 하나의 패널로

가장 고민했던 부분은 Figma의 사용 방식을 어디까지 반영할 것인가였습니다. ProtoPie에는 모션을 비롯해 Figma와 일대일로 대응하지 않는 속성이 많았기 때문입니다.

모든 프로덕트 디자이너가 아이디어를 제안하도록 하고, 다양한 방향을 탐색했습니다. 이후 각 제안의 장점을 모아 디자인을 발전시켰고, 다섯 차례 이상의 집중 리뷰를 통해 방향을 좁혀 갔습니다.

Figma와 동일한 기능은 익숙한 위치와 조작 방식을 최대한 반영했습니다. 반면 ProtoPie 고유의 기능은 기존 사용자의 작업 방식까지 고려해 설계했습니다.

속성 패널 전체에 일관된 규칙 적용하기

Auto Layout을 추가하는 데 그치지 않고, 기존 속성 패널의 문제도 함께 해결했습니다.

1. 일관된 그리드

모든 섹션에 동일한 그리드와 여백을 적용했습니다. 정렬 컨트롤은 중요도에 따라 재배치하고 아이콘도 더 쉽게 알아볼 수 있도록 개선했습니다.

Size, Position

2. 접근성 개선

클릭 영역과 색 대비를 WCAG 기준에 맞게 개선하고, 값의 단위를 명확하게 표시했습니다. 호버 상태도 정비해 조작할 수 있는 영역을 쉽게 구분하도록 했습니다.

Origin

3. 익숙한 Constraints

Constraints는 Figma 사용자에게 익숙한 조작 방식을 반영하고, 크기 조절 기능은 별도의 컨트롤로 분리했습니다.

Constraints

그리드와 간격은 재사용할 수 있는 디자인 규칙으로 문서화하고, 속성 패널 전반에 적용했습니다.

Validate

익숙한 방식이 항상 정답은 아니었습니다

Figma 프로토타입으로 일곱 가지 테스트 시나리오를 만들고, Maze를 활용해 내부 참가자들과 사용성을 검증했습니다.

Figma에 익숙한 참가자들은 핵심 과제를 모두 완료했습니다. 하지만 레이어 옵션을 Figma와 비슷한 위치로 옮긴 추가 과제에서는 대부분이 해당 기능을 찾지 못했습니다. 특히 기존 ProtoPie에 익숙한 사용자가 더 어려워했습니다.

이 결과를 바탕으로 레이어 옵션을 기존 위치로 되돌렸습니다. 새로운 사용자에게 익숙한 패턴을 반영하는 것도 중요하지만, 기존 사용자가 쌓아 온 사용 경험을 유지하는 것도 중요하다는 것을 확인했습니다.

문서보다 직접 사용하며 스펙 이해하기

Auto Layout은 여러 속성이 함께 작동하는 기능이어서 문서만으로 모든 동작을 전달하기 어려웠습니다.

개발에 앞서 엔지니어와 QA를 대상으로 네 차례의 실습 세션을 진행했습니다. 실제 오브젝트를 조작하며 동작을 확인했고, 이후에도 QA 과정에서 발생한 질문을 함께 검토했습니다.

덕분에 QA 담당자들이 기능을 이해하고 테스트 케이스를 직접 작성할 수 있었습니다. 모든 케이스를 디자이너가 검토하지 않아도 팀이 독립적으로 검증을 진행할 수 있는 기반을 마련했습니다.

Impact

엔터프라이즈 고객의 높은 사용률

Auto Layout은 2024년 12월 18일 ProtoPie 9.0에 베타로 출시됐습니다(릴리즈 노트). 디자인과 Figma 가져오기를 지원하며, 출시 이후 사용 데이터를 확인했습니다.

2025년 첫 6주 동안 Auto Layout을 사용한 사람들의 평균 세션 시간은 전체 사용자 평균보다 길었습니다. 기능 사용률은 개선을 요청했던 엔터프라이즈 고객에서 가장 높게 나타났습니다.

세션 시간의 차이가 Auto Layout 때문이라고 단정할 수는 없습니다. 기존에 제품을 자주 사용하던 사람들이 새로운 기능을 먼저 사용했을 가능성도 있습니다.

회고

새로운 기능을 도입하면서 기존 사용자의 경험을 어디까지 유지해야 할지 고민한 프로젝트였습니다. Figma의 익숙한 패턴을 반영하되, 사용자 테스트를 통해 ProtoPie에 맞게 조정하는 과정이 중요했습니다.

또한 여러 디자이너의 의견을 하나의 방향으로 모으고, 엔지니어와 QA가 복잡한 기능을 함께 이해하도록 만드는 것도 디자인 리드의 중요한 역할임을 배웠습니다.