UI 디자인 완성도 올리기, 레이아웃 편(4)

방사형(radial) 레이아웃, 원형(circular) 레이아웃

지성민

2024-05-15

방사형(radial) 레이아웃, 원형(circular) 레이아웃은 UI 디자인에서 다각도로 사용하고 있습니다. 그중 크게 세 가지 측면으로 사용되는데 바로 이렇게 구분됩니다.

1. 기능적 측면

2. 효율적 측면

3. 퍼포먼스적 측면

이렇게 사용되고 있습니다. 이 세 가지에 대해서 알아보고 예제를 통해 해당 레이아웃을 이해해 보는 시간을 갖도록 하겠습니다.

기능적 측면

이 레이아웃의 시작은 오프라인 디자인 역사와 함께합니다. 이쯤에서 전 세계에서 가장 뛰어난 디자이너에 대한 언급을 할 수밖에 없는데요. 바로 디터람스입니다. 아래는 무려 1957년에 만들어진 디터람스의 T3 포켓 라디오입니다.

보기만 해도 가슴이 웅장해지는 디자인

위의 디자인을 보면 동그란 부분이 있습니다. 바로 다이얼입니다. 이 다이얼을 돌리면서 채널을 탐색합니다. 이 원형 레이아웃은 제품에서 차지하는 영역의 비중이 적을뿐더러 원하는 지점을 미세하게 조정할 수 있는 장점을 갖고 있습니다. 이후 우리는 TV, 전자레인지 등에서 이런 시스템을 사용해 왔습니다. 이후 시간이 흐르고 이 시스템을 온라인 디바이스에도 적용하게 되고 특히나 제어시스템 + 뉴모피즘 디자인에서 많이 보이게 됩니다. 아래 이미지를 참조해 주세요.

출처(https://dribbble.com/shots/14732187-smart-home)

방사형 레이아웃을 기능적 측면에서 사용한 누구나 알만한 사례를 들어보겠습니다. 바로 네이버 그린닷입니다.

중앙을 중심으로 방사형으로 메뉴가 확장되는 레이아웃을 선보인 네이버 그린닷

기능적으로 방사형 레이아웃은 중앙을 중심으로 방사형으로 서브 메뉴들이 파생되기 때문에 흐름을 이해하기 쉬운 장점이 있습니다. 어디에서 시작해서 지금 어디에 위치해 있는지 인지하기가 쉽고 출발점이 항상 보이기 때문입니다. 또한 한 손만을 이용하는 손쉬운 사용 또한 장점입니다.

그러나

단점이 많습니다. 너무 많은 선택지가 노출되어 있어 사용자에게 혼란을 줄 여지가 있으며, 꼭 실행해야 하는 제스처 또한 여러 방식을 중복해서 사용해야 하기 때문에 좀처럼 쓰지 않습니다. 그리고 물리 버튼이 아니므로 미세하게 조정하기도 어렵습니다. 결론은 기능적으로는 방사형 레이아웃을 추천하지 않습니다. 그냥 이런 역사가 있고 이런 장점이 있다 정도만 숙지해 두시면 좋을 것 같습니다. 언제든지 누군가에 의해 다시 유행이 될 수도 있으니 말입니다.

효율적 측면

디스플레이가 원모양 또는 원 모양에 가까운 디바이스가 있습니다. 대표적으로는 시계에서 파생된 디바이스입니다. 애플워치를 예로 들어보도록 하겠습니다. 아래는 애플워치의 초기화면입니다.

왜 원 모양의 런처 아이콘으로 구성되었을까요? 그리고 저 배치는 어떤 기준으로 배치가 된 것일까요? 바로 효율성 때문입니다. 원 모양의 디스플레이에서 사각형등의 아이콘을 사용할 경우 유실되는 영역이 많습니다. 쉽게 말하면 낭비되는 영역이 많다는 뜻입니다. 이 비효율을 막기 위해 애플이 선택한 방법은 원 모양의 아이콘과 방사형 레이아웃의 적용입니다. 아래 이미지를 통해 중앙을 중심으로 방사형으로 차차 퍼지고 있는 그리드를 확인하실 수 있습니다.

방사형 레이아웃이 적용된 애플 워치의 그리드 시스템

위 이미지를 통해 방사형 레이아웃이 지켜야 할 법칙 두 가지가 도출됩니다.

1. 방사형 레이아웃은 대칭의 범주에 속합니다. 최적화 되게 사용하려면 좌우 상하 대칭이 되어야만 합니다.

2. 시계의 모든 움직임이 가운데에서 일어나고 있는 것처럼 중심은 항상 중앙이어야만 합니다.

여기에서 또 하나

너무나 당연하게도 원형의 디스플레이 안에 원형 아이콘이 어울리고, 원형의 그리드가 어울립니다. 아래 이미지를 보시면 아이콘들이 움직이는 선의 기준은 원형 그리드 시스템의 영향을 받고 있습니다.

아이콘들이 이동하는 동선 그리드 시스템

적용 화면

퍼포먼스적 측면

사례를 통해 이야기해보도록 하겠습니다. 여기 신상 아이폰이 있습니다. 여섯 개의 생동감 넘치는 컬러를 내세웁니다. 더 알아보기를 클릭하면 아래의 이미지처럼 인트로가 시작됩니다.

6개의 신상 아이폰의 더 알아보기 페이지 인트로

간결하고 제품 컬러도 눈에 들어오고 카피와 제품의 비례나 구도도 좋습니다. 그런데 만약 6개가 아니면 어떨까요? 10개를 예를 들어보겠습니다. 위의 디자인에 의하면 아래 이미지처럼 디자인이 나오겠죠.

10개의 아이폰의 인트로

슬슬 눈에 잘 안 들어오기 시작합니다. 또한 생동감 있어 보이지도 않습니다. 시선이 분산되고 복잡해 보입니다. 눈에도 들어오고 생동감도 되찾으려면 어떻게 해야 할까요? 방사형 레이아웃을 적용해 보면 아래와 같은 디자인으로 표현할 수 있습니다. 먼저 그리드 시스템입니다.

방사형 레이아웃의 그리드 시스템

그러면 아래와 같은 퍼포먼스가 발생합니다.

방사형 레이아웃이 적용된 10개의 신상 아이폰 인트로

방사형 레이아웃을 적용하니 카피도 눈에 매우 잘 들어오고 전체적으로 생동감이 느껴집니다. 제품을 많이 나열했는데 복잡해 보이지도 않습니다. 퍼포먼스 측면에서 방사형 레이아웃은 다음과 같은 장점을 갖고 있습니다.

1. 많은 수의 오브젝트를 한 번에 품을 경우에 적합합니다.

2. 시선이 중앙에 집중되므로 주변에 많은 수의 오브젝트가 분산되어 있어도 덜 복잡해 보입니다.

3. 복잡하더라도 대칭이 되기 때문에 안정감이 있습니다.

4. 인터렉션을 연계할 경우 엄청난 생동감을 경험할 수 있습니다.

모바일에 적용하면 아래와 같은 형태가 됩니다.

수직 레이아웃(좌)과 방사형 레이아웃(우)의 비교

이제 적용 사례를 두 개 더 보여드리도록 하겠습니다.

사례. 부분 방사형 레이아웃

부분 방사형 레이아웃, 원 전체가 나오지 않고 일부분만 나와도 방사형 디자인을 느낄 수 있습니다. 아래 시안을 보시면 보이는 부분에서 끝나지 않고 원 형태로 돌고 있는 다른 카드들이 아래쪽에 숨어 있구나라고 자동으로 인식하게 됩니다. 또한 중심에 카피를 쓰지 못할 경우는 원 형태 위에 위치해도 무방합니다. 이 사례 또한 그리드를 먼저 보도록 하겠습니다.

부분 방사형 레이아웃의 그리드 시스템