피그마의 절대 위치
Absolute position 적용에 대해서
피그마는 업데이트가 빠르고, 아이콘을 정말 세심하게 사용하기 때문에 신규 기능이 있어도 못 보고 지나가는 경우가 있습니다.
그런 기능 중 하나가 Absolute position 입니다. 확인해보니... 2022년 5월쯤 업데이트 되었네요.
Absolute position
가끔씩 레이어의 원래 아이콘 주위에 꺽쇠가 표시되는 경우가 있는데, 이 과녁같은 꺽쇠가 걸린 레이어는 오토 레이아웃이 적용되지 않습니다. 이 아이콘이 절대 위치(Absolute position)가 적용된 레이어입니다.
다양한 레이어에 '절대 위치'를 적용할 수 있는데, 이게 자동으로 이루어지기 때문에 처음에 매우 당황하게 될 수 있습니다.
디자인에서는 위치를 고정하는 장치에 불과하지만, Dev Mode로 들어가면, 다른 규칙이 적용되기 때문에 프론트엔드 팀과 잘 상의해서 사용하면, 편리합니다.
또 UI 컴포넌트 디자인에서 오토 레이아웃을 조금 더 편리하게 쓸 수 있고, 실제 개발되는 모습에 가깝게 쓸 수 있다는 장점이 있습니다.
공식 도움말에서도 절대 위치를 적용하는 예로 아이콘의 뱃지나 노티피케이션 표시를 들고 있습니다. 정렬된 디자인에서 예외를 두고 싶거나 고정해야 하는 배너 같은 요소가 있을 때 사용할 수 있습니다.
절대 위치가 당황스러운 이유는 피그마의 자동 기능 때문인데, 객체를 프레임에 넣고, 프레임에 오토 레이아웃에 적용하면 보기 어렵습니다. 대신 빠르게 작업하기 위해 레이어를 여러 개 선택하고 프레임을 만들지 않은 채로 오토 레이아웃을 적용하면, 규칙에서 벗어난 레이어 혹은 객체를 자동으로 절대 위치로 만듭니다.
오토 레이아웃이 각 레이어 혹은 객체의 여백을 자동으로 적용하는 것과 같습니다.
이 때의 Z-index는 피그마 레이어 패널에서 아래쪽에 있을 수록 높게 설정됩니다. Dev mode를 확인하지 않는 경우는 알기 어렵기 때문에 참조하면 좋습니다.
절대 위치를 제거하려면, 레이어 패널의 반대편, 패널에 아주 작은 아이콘이 새로 생겨 있습니다. 이 아이콘을 누르면, 절대 위치가 제거 되면서 자동 정렬의 효과를 받습니다.
그래서 절대 위치를 적용하려면, 이 과정을 잘 알고 디자인 작업을 진행하면 좋습니다.
절대 위치는 오토 레이아웃이 적용된 프레임 내의 객체에만 적용할 수 있습니다.
대단한 기능은 아니지만, 정해진 컨테이너의 영역에 걸칠 수 있으면서 오토 레이아웃의 편리함을 누릴 수 있기 때문에 여기저기에 많이 적용해 보고 싶어질 수 있습니다.
