가변, 고정 영역에 대한 이해
UI 디자인 시작하기
디스플레이 단위(PX, DP, SP, PT) 이해하기 글을 먼저 보고 오시면 이해에 도움이 됩니다.
처음 UI 디자인을 시작하면 생각보다 알아야 할게 많아서 놀라곤 하는데, 그중 하나는 가변, 고정 영역이다. 예를 들어 iOS에서 375x667 사이즈로 디자인을 해서 개발자에게 전달했는데, 개발자가 이 사이즈를 전부 고정값으로 진행한다면 다른 기기에서는 아래 이미지처럼 빈 공간이 나타나게 될 것이다. 가변과 고정값을 정의하는 예시를 살펴보자
1) 전부 고정값으로 하고 아무것도 고려하지 않은 경우1) 전부 고정값으로 하고 아무것도 고려하지 않은 경우
실제로 위의 1번 이미지처럼 만들어질리는 없지만 설명을 위해 극단적인 예시를 들었다.
2) 고정된 크기의 콘텐츠를 가운데에 고정하고, 사이드를 가변으로 한 경우2) 고정된 크기의 콘텐츠를 가운데에 고정하고, 사이드를 가변으로 한 경우
“1) 전부 고정으로 하고 아무것도 고려하지 않은 경우” 에서 약간 발전된 대응 방법이다. 콘텐츠를 하나의 박스로 보고 가운데에 고정시킨 다음 배경을 늘리는 방법이다. (아이패드에서 앱을 켰을때 모바일 크기로 보이는 앱을 떠올려보자)
3) 콘텐츠와 상단 마진 값을 고정으로 좌, 우, 하단을 가변으로 한 경우3) 콘텐츠와 상단 마진 값을 고정으로 좌, 우, 하단을 가변으로 한 경우
Welcome 스크린에는 어울리지 않지만 페이스북, 인스타그램처럼 하단에 콘텐츠가 계속 나타나는 서비스에는 어울리는 대응 방식이다.
4) 상, 하단 마진 값을 고정하고 버튼, 텍스트, 이미지 크기를 가변으로 하는 경우
기기의 크기에 따라서 버튼 혹은 이미지 크기가 달라지는 방식이다. 페이스북 인스타그램처럼 콘텐츠가 무한히 나타나는 것이 아닌, Welcome 스크린처럼 크기가 고정된 스크린에서 유용한 대응방식이다. "큰 화면(Plus, XR)에서는 로고 이미지도 200x200이 아닌 250x250으로 크게 대응해주세요"와 같은 커뮤니케이션이 가능하다.
가변, 고정 영역에 대한 이해와 이에 대한 가이드를 제공하는 것은 디자이너와 개발자의 협업에 있어서 디자이너에게 요구되는 중요한 지식 중 하나다. 무조건적인 정답은 없고, 화면에 대한 고민이 담긴 가이드를 제공하는 게 좋은 프로덕트를 만드는 것이라고 생각한다. 위의 예시를 보고 UI가 어떤 식으로 유동적으로 변하는 게 좋을지 고민해보자..!
'이토록 쉬운 스케치' 저자 서한교입니다.
치앙마이에서 Freelance Designer 그리고 백수로 살아가고 있습니다.
E-Book
종이책
