피그마에서 보기에는 완벽하고 깔끔했던 디자인을 실제 개발자에게 넘겼는데, 정작 웹 브라우저나 모바일 화면에 구현된 결과물을 보면 버튼이 이상하게 늘어나거나 아이콘이 화면 밖으로 튕겨 나가는 현상을 목격하게 된다.
디자이너 입장에서는 "분명 제대로 만들어서 전달했는데 왜 개발된 화면은 다를까?" 싶고, 개발자 입장에서는 "디자인 파일의 기준선이 잡혀 있지 않아 화면 크기가 바뀔 때 유연하게 대응할 수 없다"고 난감해한다.
이런 협업 오차와 화면 깨짐 현상이 발생하는 핵심 원인은 바로 피그마의 '레이아웃 제약(Constraints)' 설정을 이해하지 못했기 때문이다.
정적인 도화지 위에 요소를 올려두기만 하는 것을 넘어, 화면 해상도가 달라질 때 요소들이 어느 방향으로 고정되거나 늘어나야 하는지 뼈대를 잡아주는 Constraints의 원리를 알아보자.
디자인 캔버스에 프레임(Frame)을 만들고 그 안에 버튼이나 아이콘을 넣으면, 우측 패널에 Constraints(제약 조건)라는 설정 상자가 활성화된다.
Constraints는 말 그대로 '부모 프레임의 크기가 늘어나거나 줄어들 때, 자식 요소가 부모의 어느 테두리를 기준으로 위치와 크기를 유지할 것인가'를 결정하는 고정용 나사 역할을 한다.
기본적으로 피그마의 모든 요소는 [Left - Top](왼쪽 상단 고정)으로 자동 설정되어 있다. 즉, 부모 프레임의 크기를 늘려도 내부 요소들은 꿋꿋하게 왼쪽 위 구석을 기준으로 위치를 유지한다는 뜻이다.
이 기본값을 이해하지 못하면 화면을 모바일용에서 태블릿용으로 늘릴 때, 오른쪽 끝에 있어야 할 '닫기(X)' 버튼이나 '상세보기' 링크가 반응하지 않고 화면 중앙이나 왼쪽에 어정쩡하게 남아 있게 된다.
실무에서 가장 빈번하게 쓰이는 4가지 Constraints 조합을 기억해두면 화면 깨짐을 완벽히 방지할 수 있다.
첫째, 오른쪽 고정 [Right - Top]이다. 상단 네비게이션 바의 '프로필 아이콘'이나 '알림 종 모양', 카드 우측 상단의 '더보기(⋮)' 버튼처럼 화면이 우측으로 아무리 넓어져도 항상 오른쪽 구석 자리를 지켜야 하는 요소에 적용한다.
둘째, 정중앙 고정 [Center - Center]이다. 팝업 창의 메인 아이콘이나 화면 한가운데 떠 있어야 하는 로딩 스피너처럼, 부모 창의 크기가 커지거나 작아져도 항상 정중앙 배치를 유지해야 할 때 선택한다.
셋째, 좌우 연동 늘어남 [Left and Right]이다. 검색창이나 상단 네비게이션 배경바처럼 화면 폭이 넓어지면 그에 맞춰 가로 길이가 같이 쭉 늘어나야 하는 상자 요소에 부여한다.
넷째, 상하좌우 비율 유지 [Scale]이다. 프레임 크기가 변할 때 내부 일러스트나 도형의 비율이 함께 커지거나 줄어들어야 하는 비주얼 요소에 적용한다.
Constraints 기능을 제대로 활용하려면 반드시 지켜야 할 전제 조건이 있다. 바로 요소가 '프레임(Frame)' 내부에 바르게 포함되어 있어야 한다는 점이다.
단순 사각형(Rectangle)이나 그룹(Ctrl + G) 안에서는 Constraints 설정이 정교하게 작동하지 않는다. 반드시 5편과 6편에서 배운 프레임 구조 안에서 레이아웃이 설계되어 있어야 제대로 된 위치 고정 값을 부여할 수 있다.
또한 디자인 과정에서 소수점 피셀(예: Width 120.45px, X좌표 14.2px)이 발생하지 않도록 픽셀 값을 정수로 딱 떨어지게 맞추는 '픽셀 퍼펙트(Pixel Perfect)' 습관을 들여야 한다.
소수점 픽셀이 섞여 있으면 개발자가 코드로 변환할 때 1px의 오차가 생겨 라인이 흐릿하게 뭉개지거나 정렬이 미세하게 틀어지는 주원인이 되기 때문이다.
[핵심 요약]
레이아웃 제약(Constraints)은 부모 프레임 크기 변경 시 내부 요소가 고정되거나 늘어나는 방향을 결정하는 고정 나사 역할을 한다.
우측 고정(
Right), 중앙 고정(Center), 좌우 연동(Left and Right), 비율 유지(Scale) 등 상황에 맞는 옵션을 적용해야 반응형 화면 깨짐을 막을 수 있다.Constraints는 프레임 구조 내에서만 정상 작동하며, 개발 협업 시에는 소수점 픽셀을 없애는 픽셀 퍼펙트 정렬을 유지해야 한다.
[다음 편 예고] 다음 편에서는 모바일 화면을 만들 때 가장 자주 겪는 어색함을 해결하고, 단말기별 반응형 브레이크포인트를 설계하는 방법을 다룹니다.
0 댓글