이 글은 전편과 이어진 내용입니다. 전편을 보시려면 아래를 클릭하여 주세요.
UI 디자인의 완성도를 결정하는 요소 중 이미지에 대한 이야기 2편입니다. 2편에서는 이미지의 구도에 대해 서술하도록 하겠습니다.
일반적으로 커머스 플랫폼을 비롯하여 각종 서비스를 제공하는 모든 화면에 가장 많이 등장하는 구도는 오브젝트가 가운데에 있는 중앙정렬의 구도를 가장 많이 사용하고 있습니다. 이 구도는 안정감을 주고 제품 자체에 집중할 수 있는 장점을 갖고 있습니다.
인물/오브젝트를 중앙에 배치한 대부분의 커머스 플랫폼
대칭 구도, 그 자체로 완벽한 균형
중앙정렬 구도는 이렇듯 넓은 여백을 사용해도 안정감 있는 표현이 가능하게 해 줍니다. 그 이유는 바로 대칭에 가깝기 때문입니다. 대칭이 되면 자동적으로 균형이 유지되며 안정감 있는 구도를 갖게 되는 것이 최대의 장점입니다. 오뚝이처럼 90도 수직이며 좌우가 같은 형태라고 보시면 왜 안정감이 생기는지 이해하시기가 편할 거라 생각됩니다. 몇 가지 케이스를 통해 서술하겠습니다.
사례.
가로를 반으로 나눈 가운데 선을 기준으로 좌우가 대칭에 가까운 것들은 그냥 중앙에 정렬하시면 됩니다.
좌우 대칭 사례 1
좌우 대칭 사례 2
사례.
같은 중앙정렬 구도이지만 Y값(세로 좌표값)이 다르게 표현해야 할 경우가 있습니다. 그 이유는 보는 시점과 오브젝트의 위치에 영향을 받는 경우입니다. 이미지로 설명하도록 하겠습니다.
바닥에 놓여 있는 오브젝트의 경우 아래쪽에 위치하고 있고 위에서 내려다보는 시점이므로 하단부에 위치하는 것이 시각적으로 안정적입니다.
놓여 있지만 탑뷰일 경우 오브젝트의 위치는 중앙에 위치하는 것이 시각적으로 안정적입니다.
오브젝트가 떠 있는 경우는 중앙 혹은 위쪽에 위치하는 것이 바람직합니다.
균형을 맞추기 위해 노력해 주세요
이미지 안의 오브젝트 자체가 비대칭일 경우 구도가 한쪽으로 치우치기 마련입니다. 여러 가지 방법을 사용하여 안정적인 구도로 전환할 수 있습니다. 이 또한 몇 가지 샘플과 함께 설명드리겠습니다.
사례.
아래의 이미지의 경우 메인 오브젝트와 보조 오브젝트가 비슷한 볼륨감을 갖고 있습니다. 이런 경우 균형을 잡기 위해 두 가지 방법을 사용합니다. 왼쪽은 메인 오브젝트를 중앙에 위치시킨 케이스이고 오른쪽은 메인+ 보조 오브젝트를 묶어서 중앙 정렬한 이미지입니다.
사람과 바람개비가 비슷하게 주목되는 이미지
다시 살펴보면 두 이미지 다 괜찮아 보입니다만 더욱 안정적인 구도를 위해 두 개의 오브젝트를 하나처럼 보이게 만들어야 합니다. 그렇다면 어떻게 해야 할까요? 바로 보조 오브젝트의 볼륨감을 조절하여 밸런스를 메인 오브젝트쪽으로 집중시키면 됩니다. 아래의 케이스는 보조 오브젝트의 사이즈를 줄인 경우와 보조 오브젝트를 크랍한 경우입니다.
메인 오브젝트(사람)에 집중되는 이미지
유사한 방법으로 리터칭 한 추가 사례입니다. 아래 사진은 원본입니다.
원본 이미지
리터칭 사례 1번입니다.
인물에 포커스를 맞추고 풍선은 크랍하여 부피를 줄인 이미지
리터칭 사례 2번입니다.
인물에 포커스를 맞추고 풍선은 채도를 낮추어 배경에 녹아들게 리터치한 이미지
여백이 필요하다면?
3 분할 구도의 활용
UI 디자인의 특징 중의 하나가 바로 타이포와의 결합입니다. 즉 이미지를 단독으로 쓸 경우가 거의 없다시피 합니다. 보통 이미지와 타이포의 결합은 크게 두 가지 형태로 나눌 수 있는데 첫 번째(A)는 이미지 위에 딤처리(반투명의 레이어 오버레이) 후에 글을 쓰는 형태이고, 두 번째(B)는 이미지 안에 타이포를 삽입하는 형태입니다.
첫 번째(A) 형태의 경우 1편과 2편의 내용에 따라 이미지를 가공해 주시면 됩니다. 지금부터는 두 번째(B)에 해당하는 경우에 대해 몇 가지 이미지를 제작/적용해 보도록 하겠습니다.
3 분할 구도는 피사체와 여백 간의 조화에 초점을 맞춘 구도법입니다. 쉽게 말하자면 가장 이상적이고 안정적인 이 기법으로 이미지 안에 여백을 만들고 우리는 그 여백 공간에 글을 쓰기만 하면 됩니다. 몇 가지 사례를 통해 또 서술해 보도록 하겠습니다.
사례.
3 분할한 그리드의 오른쪽 두 지점에 피사체를 위치시킵니다. 오른쪽 아래로 배치되어 있는 형태이므로 카피는 왼쪽 위로 위치시켜 대칭을 맞춰줍니다.
사례.
무게 중심이 위쪽에 있는 경우는 카피는 왼쪽 아래로 위치시켜 대칭을 맞춰줍니다.
사례.
오브젝트의 크기를 크게 쓸 경우는 꼭 오브젝트와 배경의 톤을 맞추어 카피가 드러나게 해 주어야 합니다.
위의 구도법을 응용하여 만든 시안입니다.
원본이미지(좌)와 PC시안(우) – 중앙 대칭 구도
원본이미지(좌)와 PC시안(우), 두 인물의 3 분할 구도
이렇듯 별 것 아닌 것처럼 보이지만 구도를 안정적으로 가져가려는 노력들이 있어야만이 더욱 완성도 있는 디자인이 나올 수 있습니다. 긴 글 읽어주셔서 감사합니다. 다음은 UI 디자인 완성도 올리기, 이미지 편(3), 효과 편으로 찾아뵙겠습니다.
물론 위의 리터칭 된 이미지들을 처음부터 서칭 하여 사용하시면 최고의 선택입니다만 어떻게 해야 조금 더 완성도 있는 이미지를 만들 수 있는가를 고민할 수 있는 계기가 되었으면 합니다. 다음 편은 이미지 완성도 올리기 2편으로 구도에 대해서 서술하도록 하겠습니다.
지성민님의 더 다양한 글을 더 보시려면
👉 브런치 https://brunch.co.kr/@jisungmin
