오토레이아웃의 시작 (feat. Apple)
2023년 현재, 피그마는 한국은 물론이고 전 세계적으로 많은 디자이너들에게 사랑받는 툴이 되었습니다.
피그마가 이렇게까지 성장할 수 있었던 이유중 하나를 꼽자면 단연코 오토레이아웃을 들 수 있는데요.
한국에서 피그마가 상당히 대중화 되었음에도 불구하고, 아직 오토레이아웃을 어려워 하시는 분들이 많은 많은 것 같습니다.
<피그마의 모든것 - 오토레이아웃 편>에서는 오토레이아웃을 소개하고, 우리가 왜 오토레이아웃을 써야 하는지 알아볼 예정인데요.
먼저 오토레이아웃의 등장 배경부터 알아볼까요?
오토레이아웃의 시작
최초의 4인치 스크린 아이폰 - iPhone 5오토레이아웃의 역사는 2012년 9월 발매된 아이폰 5와 함께 시작하게 됩니다.
이전 세대의 아이폰들은 모두 3.5인치의 스크린을 가지고 있었지만, 아이폰 5는 조금 더 넓어진 4인치 스크린을 가지고 출시가 되었어요. 아이폰 시리즈 최초로 기기간 사이즈가 달라지게 된 것이죠.
이렇게 스크린의 크기가 커지면서 개발자들은 기존의 화면에서 동작하던 앱들이 4인치 화면에서도 동일하게 동작할 수 있는 솔루션이 필요했는데 그것이 바로 애플의 오토레이아웃 입니다.
Apple - 오토레이아웃 가이드 문서iOS 6에서 처음 소개된 오토레이아웃은 개발자들을 위한 개념이었어요.
어떤 요소의 위치와 크기를 제약조건(Constraints)이라는 개념을 통해서 동적으로 지정할 수 있었죠.
스크린의 너비가 넓어지면서 개체의 위치가 자동으로 조정되는 모습제약조건(Constraints)을 설정하면 위 이미지처럼 스크린이 옆으로 늘어나도 빨간색 개체 항상 오른쪽으로부터 일정한 간격을 유지하도록 만들 수 있습니다.
덕분에 스크린의 사이즈가 달라질 때 마다 그 화면에 맞도록 코드를 일일이 설정하는 수고로움이 줄어들었죠.
이렇게 애플의 오토레이아웃은 다양한 스크린의 크기에 동적으로 반응하는 화면을 만들기 위해 시작된 개념입니다.
스택뷰 (StackView)
Stackview아마 피그마에 익숙하신 분들은 위에서 설명한 내용이 오토레이아웃보다는 프레임의 제약조건(Constraints)에 더 가깝다고 느끼셨을 거에요.
맞습니다. 사실 위에서 소개한 애플의 오토레이아웃은 반응형으로 동작하는 화면을 만들기 위한 시작점에 불과해요.
애플은 오토레이아웃을 더욱 발전시킨 스택뷰(StackView)라는 개념을 새롭게 내놓습니다.
기존의 오토레이아웃은 요소 하나하나에 제약조건을 설정할 수 있었다면, 스택뷰는 인터페이스 요소간의 간격과 방향, 배열등을 설정할 수 있었죠.
어때요. 좀 더 익숙한 기능이지 않나요?
이렇게 우리가 지금 편리하게 사용하고 있는 오토레이아웃은 기술이 발전함에 따라 스크린의 크기가 다양해 지면서, 그 다양한 스크린에 대응하기 위한 솔루션으로써 함께 발전해 온 기술이에요.
피그마를 가르치다 보면 이런 질문들을 종종 받습니다.
"오토레이아웃을 꼭 사용해야 하나요?"
"그냥 프레임로 만드는거랑 무슨 차이에요?"
디자이너들은 일반적으로 360px, 375px, 390px등 하나의 정해진 사이즈에서 화면을 그립니다.
하지만 경험이 부족하다면 다양한 디바이스 사이즈를 고려해야 한다는 사실조차 모르는 경우가 있어요.
그래서 동적으로 반응하는 디자인 자체에 대해 필요성을 못느끼는 경우도 많은 것 같습니다.
물론 디자인 하는 방법에 대한 정답은 없습니다만, 저는 다음과 같은 이유로 오토레이아웃의 사용을 권장하고 있어요.
(숙련도에 따라 차이가 있을 수 있습니다.)
초기 디자인 단계에서 빠른 설계 및 테스트가 가능
다양한 사이즈 및 환경에 대응하기 편리함
컴포넌트의 유지보수가 용이함
전반적으로 구조적인 설계를 쉽게 할 수 있음
마치며.
이번 글에서는 오토레이아웃을 사용해야 하는 이유를 그 탄생 배경과 함께 살펴보았습니다.
사실 이번에 다룬 주제는 제가 피그마의 오토레이아웃이 발전해온 과정을 탐색하면서 발견한 내용인데요.
개발을 오래 하신 분들은 이미 알고 계신 이야기일지도 모르지만, 저에게는 굉장히 흥미로운 주제로 느껴졌기때문에 본격적으로 오토레이아웃을 다루기 전에 먼저 소개시켜 드리고 싶었던 이야기랍니다!
Config 2023 이후에는 피그마의 오토레이아웃이 발전해온 과정과 기능들을 살펴 보면서 오토레이아웃에 대해 심층적으로 탐구해 보도록 하겠습니다.
감사합니다 :)
