라운딩 디자인 방법

오늘 주제는 ‘Rounding’에 관한 것입니다.
‘sizzling’과 연관하여서 두 꼭지로 보충을 하고자 하는데, 그 첫번째가 바로 ’rounding’이고, 두번째는 ‘drop shadow(빛)’에 관한 것입니다.

1. Palm

GUI 분야에서 라운딩을 이해하기 위해서는 약간의 역사 공부가 필요합니다.
그 중에서도, 희대의 풍운아 ‘palm’에 대한 지식은 필수입니다.
Palm과 윈모에 관해서는 나중에 한번 더 정리하겠습니다. 현재는 hp에 인수되었습니다.
http://www.hpwebos.com/us/

Rounding_01

사실 아이폰 UI의 상당 부분은 이 palm에서 차용한 부분이 많습니다.
(스티브잡스는 상당히 많은 부분에서 palm에 빚지고 있습니다.)
그 중에서도, 라운딩에 대한 부분은 주목할만 합니다.
이들은 라운딩을 모든 화면에 걸쳐서 굵직굵직하게 사용하고 있는데, 라운딩 자체가 UI의 중심이기도
합니다.

이들은 다음과 같이 라운딩에 대한 보편적 정의를 내리고 있습니다.

1) 한 App의 전체 구획
– palm의 용어로는 ‘card’라고 부릅니다. 멀티태스킹 할 때 앱들을 카드처럼 펼쳐볼 수 있습니다.

Rounding_02

2) App내에서 layer의 구분
– 각각의 레이어(modal)를 시각적으로 구분할 수 있는 장치로써 라운딩을 사용합니다.

Rounding_03

3) 리스트의 처음과 끝
– iOS5랑 많이 닮았지요. 특히 on/off 버튼은 잡스 생전 마지막 도둑질… 입니다.
암튼 여기서 중요한 것은, 라운딩의 처음과 끝을 라운딩으로 표시한다는 겁니다.

웹과 다르게 ‘만지는 UI’에서는 단순히 사각형’표’일 경우에, 상하 스크롤하면 동체시력이 리스트의
끝을 파악하기 힘듭니다.
그래서 리스트의 마지막 줄을 둥글려 줌으로써 리스트가 끝남을 표시합니다.

Rounding_04

Rounding_05

정리 :
2011년 현재, 잠재적으로 공유되고 있는 rounding 의 용례는
1) 한 App의 전체 구획 -> 동일한 UI의 성격 통일
2) App내에서 layer의 구분 -> 중복되는 오브젝트에 변별력 부여
3) 리스트의 처음과 끝 -> sign 으로서의 라운딩
4) 버튼에 대한 scheme

라운딩은 현시대에 아주 중요한 UI 요소입니다.
위 사항을 염두에 두시고, 라운딩을 사용할 땐 그 역할에 대해서 주의깊게 생각하시기 바랍니다.

 

2. 심화학습_실무

제가 입사한지 한달이 안되던 때였습니다.(이 레터가 발송될 때는 입사한지 두달 반쯤 되었겠네요.)
누군가가 modal 라운딩을 이렇게 표현한 걸 보고 수정을 요청했었습니다.
수정요소는 무엇일까요?

Rounding_06

답은, 라운딩 Radius 값입니다.
위의 것은 회색박스와 흰색 박스의 Radius 값이 같고, 아래의 것은 다릅니다.

 

다르게 보면,

Rounding_07

차이가 보이나요?
흰색 박스와 회색 박스가 각기 다른 역할을 가진다면, 위의 것도 틀린 건 아닙니다.
하지만, 이런 단순 modal의 경우, 왼쪽이 완결성이 떨어진다고 할 수 있겠습니다.

정리:
라운딩이 중첩되어 사용될 경우, 그 중심점은 하나이어야 합니다. 즉 겹치는 Round는 동심원으로!

 

그럼, Radius 값은 어떻게 결정되어야 할까요?
palm을 다시 보면,

Rounding_08

palm은 두가지 radius 정의를 사용하고 있습니다.

(1) 글씨의 중앙을 기준하여 상하좌우의 여백을 맞추는 방법입니다.
주로 버튼이나 헤더 등 한 줄 텍스트일 때 사용합니다.
iOS UI 상에서는 텍스트 입력 파트에서만 쓰입니다.

(2) 텍스트 상하에 여백을 두고 그 바깥으로 라운딩을 잡는 방법입니다.
iOS와 palm이 모두 채택하고 있습니다.

Rounding_09
(이미지 출처 – Find my Friends)

iOS는, 몇개의 예외(ex.입력창)를 빼면 모두 텍스트 바깥으로 라운딩을 잡습니다.
글씨와 라운딩이 서로 해치지 않도록 왼쪽 여백까지 신경쓴게 차이가 있습니다.
(작은 녹색 박스가 좌상단 마진 폭입니다. 굉장히 신경 쓴 값입니다. )

 

다음은 Radius 값은 어떻게 정해져야 하는가 – 에 대한 애플사의 고민입니다.

Rounding_10
(이미지 출처- Facebook)

핑크색 박스는 radius 10, 녹색은 4px 입니다.
iOS4x 버전에서는, 좌우 여백에 좀 문제가 있었습니다.
라운딩을 계속 안에 쌓아 넣을 때, 논리대로면 안의 라운딩이 4px이므로, 바깥 라운딩이 14px정도
되어야 합니다.
그렇다고 바깥 라운딩을 14로 하자니, 텍스트와의 조율이 잘 되지 않는데다 이미 10px 라운딩은
두루두루 쓰인상태라 조정이 쉽지 않았죠.

Rounding_11
(이미지 출처- Facebook)

그래서, 라운딩을 두 번 쓰지 않고 palm과 비슷한 톤으로 스위치 모양을 재작업했습니다.
라운딩 박스가 쌓이는 경우를 아예 없애버린거죠.
동시에 테이블과 폰트 크기, 테이블과 글자 사이의 간격도 조정했습니다.
그리고 테이블 자체에도 흰색 1px Drop Shadow도 추가됐습니다.
아이폰이 나온지 6년정도 되었지만 애플은 이 문제를 꾸준히 고민하고 있습니다.
그만큼 아주 중요하고 예민한 부분입니다.

 

더 복잡한 부분은 네비게이션 바, 또는 탭 바에 버튼이 들어갈 경우입니다.
즉, 곡면 위에 버튼이 얹어질 경우죠.
Rounding_12

보통 네비게이션 바는 라운딩 없이 그냥 사각형입니다.
*네비게이션 바 – 상단 제목 출력부, 위 예시에서는 ‘Network’ 라고 쓰여있는 줄
그런데, 아이패드가 각 모서리에 라운딩을 ‘무조건’ 적용함에 따라 역으로 아이폰이나 안드로이드에서도
라운딩 적용된 탭바가 생겨나고 있습니다. (또한 개인적으로도 부드러워 보여 좋아합니다.)
*최근에 path app.이 기가막히게 바뀌었는데, 역시 라운딩된 네비게이션 바를 사용하고 있습니다.
이 경우 좌우 플리킹의 요소로 사용하고 있는 것이 페이스북과 동일합니다.
그런데 이 경우에 내부 버튼의 Radius 값을 잡기 힘듭니다.
동심원으로 배치하기도 약간 애매하구요.
이것에 대해서 잘 설명된 자료를 찾기 힘들어서 그림도 그려봤지만, 말로 설명드리기는 힘드네요.
이 부분은 좀 복잡하고, 차라리 감을 키워서 그때그때 활용하는 것이 좋을 거 같아요.
위의 그림이 도움이 되길 바랄 뿐입니다.

감사합니다.

By 김병수

 

본 포스팅의 내용은 개인의 의견이며, Right Brain Communications 의 의견과는 다를 수 있습니다.

Share this:

Leave a comment