직관적으로 UI를 활용할 수 있도록 하는 시각적 장치, Sizzling

직관적으로 UI를 활용할 수 있도록 하는 시각적 장치, Sizzling

직관적으로 UI를 활용할 수 있도록 하는 시각적 장치, Sizzling
Category
Share Story

오늘 내용은 Sizzling 에 관한 겁니다.
원래는 광고용어인데, 콜라나 스테이크 같은 게 맛있게 보이도록 촬영하는 장치 및 기술을 말합니다.

Sizzling_01
(이미지 출처 – 네이버 사전)

UI세계에서도 이 시즐링이라는 용어는 ‘누끼’나 ‘아미’처럼 흔하게 쓰이는 은어인데요.
이 바닥에서의sizzling은, 직관적으로 UI를 활용할 수 있도록 하는 시각적 장치를 말합니다.
sizzling은 다음의 세가지로 분류할 수 있습니다.

1. 높이 – 올록볼록


(이미지 출처- Facebook)

화면 오른쪽 도형은 가상의 높이를 대충 그려 본 것입니다.
이런 올록볼록함은, 중요도와 depth 구조를 설명해 주는 역할을 합니다.
이제는 모두가 당연히 여기는 장치가 되었지요.
더 볼록한 것은 더 중요한거고, 좀 밋밋한 거는 역할도 밋밋하구요.
또 인풋하는 곳은 파여있고 평평합니다.
이제 올록볼록함은 단순한 장식이 아니라 하나의 기호가 되었지요.

 

다음은 올록볼록을 잘못 쓴 나쁜 예입니다.

Sizzling_03

왼쪽은 높이에 대한 개념이 엄청 희박합니다.
노래제목 부분과 그 위의 리스트 사이에 경계, 위치관계가 없어서 – 리스트가 스크롤되는 모양이 아주
어색합니다.
팝업 전체도 화면에서 붕 떠 있지 못하고 애매한 높이에 있습니다.
오른쪽은 ‘download on iTunes’ 버튼과 ‘share’ 버튼의 볼록함이 생뚱맞습니다.
상단의 ‘back’ 버튼과 ‘lyrics’ 부분, 그리고 이 못생긴 버튼들이 각기 다른 빛을 받고 있습니다.
이 ‘빛’에 관해서는 나중에 drop shadow에서 다시 언급하겠습니다.
이건 단순히 못생긴 것이 아니라, UI를 해치는 것입니다.
올록볼록을 제대로 이해하고 있지 않으면, UI를 망가뜨리게 됩니다.

 

물론,

Sizzling_04
(이미지 출처- Google)

이런 평면적인 것이 나쁜 것은 아닙니다. 필요한 부분에서 충분히 높이감이 표현된다면
아름다울 수 있습니다.

 

2. 질감

먼저 iOS5에서 추가된 app들을 보시면,

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

Sizzling_06
(이미지 출처 – IOS 미리알림)

Sizzling_07
(이미지 출처 – IOS 미리알림)

위와 같이 애플에서도 질감에 대한 고민을 많이 하고 있고, 이를 적극적으로 실무에 적용하고 있습니다.
질감은 app의 분위기를 나타내는 동시에, 트랜지션의 느낌도 바꾸어 줍니다.
이유있는 질감만큼 효과적인 표현수단도 없습니다.
반면, 목적없이 쓴 질감은 프로젝트 전체를 흔들어 놓을수도 있으니 주의 바랍니다.

 

3. 현실성

Sizzling_08

http://cargocollective.com/jonaseriksson
엄청난 디테일이죠. 실제 장치를 최대한 모방했습니다.
물론 실제 버튼처럼 딸깍거리며 움직이지는 않겠지만, 버튼이든 다이얼이든 어떻게 사용해야 하는지
단박에 알 수 있게 해줍니다.
이게 항상 옳지는 않겠지만, app이 실제로 존재하는 기계를 모방한 거라면 모양을 똑같이 만드는 것도
추천할만한 방법이겠죠.
이 ‘현실성’은 위의 질감을 포함하기도 하지만, 조금 다릅니다.
버튼등이 가지는 메타포, 움직이는 방식, 3차원 투시 등을 아우르는 의미입니다.

정리 : sizzling = 높이감(빛, 모양) + 질감 + 현실성 (+ 플러스 알파)

창의적인 작업은 공식을 필요로 하지는 않습니다.
하지만, 작업중/후에 위의 요소들을 체크리스트로 삼는 건 나쁘지 않을 것 같아요.

감사합니다.

By 김병수

 

본 포스팅의 내용은 개인의 의견이며, Right Brain Communications 의 의견과는 다를 수 있습니다.[catlist name=”Design Tip” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]