계산기 앱으로 들여다본 iOS, 안드로이드, WP7 앱의 UI

예전부터 한 번 써보고 싶었던 내용이었는데 미루고 미루다가 이제서야 적어본다.

 

애플이 앱스토어의 성공을 통해 모바일 앱 시장을 폭발시킨 이후, 안드로이드를 선두로 한 수많은 후발 모바일 앱 마켓플레이스가 그 뒤를 따르고 있다, 같은 문장을 적어봤자 현재 시점에서는 식상하기만 한 내용일 뿐일 것이다. 어찌되었든 모바일 앱 시장의 발전 덕에 애플은 돈을 갈퀴로 긁어모으고 있으며, 수많은 모바일 앱 개발사 및 개발자들은 대박 매출을 꿈꾸며(아 이 표현 정말 싫다. 대박 매출이라니…) 앱 개발에 힘을 쏟고 있다.

내 경우에도 어찌어찌 그 동안 아이폰 개발을 해 오고, 그 이후에 안드로이드 환경과 윈도우 폰 환경을 경험해보게 되었다. 그러한 경험을 하면서, 처음에는 각 플랫폼에 존재하는 앱의 디자인이나 인터랙션을 통해 UI의 품질을 가늠해보곤 했었다. 이 과정에서 각 모바일 운영체제의 어플리케이션 UI 디자인이 추구하는 바가 서로 많이 다르다는 생각을 하게 되었고, 이러한 UI 디자인을 서로 비교해볼만한 내용이 무엇이 있을까도 함께 생각해보게 되었다. 그런 생각을 하던 중, 모바일 운영체제에 내장된 기본 프로그램을 살펴보면 그러한 각 모바일 운영체제 UI 디자인의 성격이 극명하게 비교해 볼 수 있지 않을까, 하는 생각에 이러한 글을 쓰게 되었다.

스마트폰은 휴대폰과 마찬가지로, 지극히 개인적인 물건이다. 아니, 오히려 하루 중 이용시간이 그렇게 길지 않은(휴대폰으로 게임만 하는 사람이라면 좀 다르겠지만) 휴대폰과는 달리, 스마트폰 사용자는 하루 중 스마트폰을 몸에서 떼놓는 시간 자체가 별로 없을 지경이다. 스마트폰의 앱을 비교하는 글에서 왜 이러한 ‘스마트폰의 개인적임’을 언급하냐고? 그것은 이러한 ‘개인적임’이 종종 스마트폰의 특징을 서로 비교함에 있어서 방해가 되는 요인이 되곤 하기 때문이다. 스마트폰 유저들은 일반적으로 자신이 사용하는 스마트폰 플랫폼에 대해 애정을 가지며, 자신이 사용하는 스마트폰 플랫폼에 대해 좋지 않은 언급을 했을 경우 불쾌한 반응을 보이곤 한다. 사실 글을 쓰는 나 자신도 그러한 반응에 자유롭지 못하며, 이 글에도 그러한 편향적인 부분이 있을 것이라는 변명을 미리 덧붙여둔다. 이 글의 내용은 어디까지나 내 주관적인 생각에 불과할 뿐이므로, 각자 알아서 받아들이도록 하자.

그리고 계산기 앱이 쓰인 이유는, ‘어느 플랫폼에나 있으면서 가장 단순한 앱’이라고 생각했기 때문이다. 메모장을 생각하기도 했었으나, 어떤 이유에서인지 윈도우 폰 7에는 메모장이 포함되어 있지 않았다. SMS나 캘린더 등도 있겠으나, 프로그램의 단순함으로 보자면 계산기가 가장 적절하지 않을까 하는 판단을 내렸다. 이 글에 쓰인 계산기 앱은 iOS 4.3.1, 안드로이드 2.2.1, 윈도우 폰 7에 포함된 앱임을 미리 알려둔다.

 

우선 첫 화면과 아이콘을 살펴보자. 다음 이미지는 iOS의 계산기 프로그램의 실행 화면이다.

 

iOS의 경우 처음 앱을 실행하면, 우선 계산기 프레임의 배경 이미지나 버튼의 질감에서 실제 계산기의 느낌을 많이 받게 된다. 그리고 프로그램 아이콘은 실제 프로그램 UI 레이아웃의 특징적인 부분(오렌지색 ‘=’)을 따오는 방법으로 원래 프로그램의 이미지를 연상할 수 있도록 디자인되어 있다. 아이폰의 디자인에 대해 관심이 많은 사람은 이미 알고 있을 수도 있지만, 이 계산기 프로그램의 레이아웃은 실제로 존재하는 계산기의 룩앤필을 모방하고 있다. 다음 사진은 독일 BRAUN사의 계산기인 et66 모델이다.

비슷한 것 같은가?

하지만 iOS의 계산기 앱에서 숫자부에 해당하는 부분은 전자식 흑백 액정처럼 생긴 폰트 대신, 말끔한 폰트를 사용하고 있다. 그러면서도 숫자부의 배경 화면은 옛날 계산기의 액정 화면과 비슷한 톤의 색상을 사용하는 것을 볼 수 있다. 그리고 메모리 기능(이라기보단 누산accumulate라고 해야할 것 같은데 … M+, M-, MR, MC 버튼을 의미한다) 또한 같이 제공하고 있는 것을 볼 수 있는데, 사실 계산기를 업무적으로 자주 사용하는 사람이 아니라면 이러한 메모리 기능을 사용하는 경우는 거의 없다. 아마 이 글을 읽고 있는 사람 중에서도 저게 정확히 아는 사람이 드물 것이라고 생각된다. (궁금하면 검색해 보시라. 그리 복잡한 기능은 아니다)

iOS가 추구하는 앱의 성격 중 하나가 여기에서 여실히 드러나는데, 그것은 ‘실세계의 모방’이다. 물론 모든 부분을 실세계의 계산기와 동일하게 만들어 낸 것은 아니지만, 레이아웃 자체는 상당히 닮은 꼴로 만들어져 있다. 이러한 디자인은 실제 사용자가 친숙하고 쉽게 적응 가능한 UI라고 느낄 수 있도록 해 주는 장점이 있는 반면, 프로그램 리소스 관점에서 본다면 낭비라고 볼 수도 있다. 계산기 프레임의 질감을 만들어 내는데 몇 KB의 이미지가 사용되었을까?

게다가 위에서 언급한 메모리 기능의 경우, 실제로 사용하는 사람이 많지 않은 기능이지만 ‘실제 계산기에는 있다’(실제로 옛날 계산기에는 이 기능이 대부분 있다! 쓰는 사람이 많은지는 모르겠지만서도)는 이유로 채용되어 있다. UI의 레이아웃 뿐만 아니라, 기능 구현에 있어서도 iOS의 앱은 철저히 실세계를 모방하는 것에 초점을 맞추고 있는 것이다.

 

이번에는 안드로이드를 살펴보자.

  

…안드로이드를 우습게 아는 유저들이 단체로 몰려와서 욕을 퍼붓기라도 할 것 같은 인터페이스이다만 설명을 이어보자면,

상당히 심플하다. 설명할 필요성이 있나 싶을 정도지만, 기본 계산 기능 외에는 불필요한 요소를 대부분 없앴다. 숫자 버튼과 계산 기호 버튼의 색상만 서로 다르게 처리되어 있는 정도이며, 그 외에는 배경 이미지의 사용도 일절 없다. 게다가 숫자 표시부에 커서가 있는 것을 볼 수 있다. 다들 알다시피, (공학용 계산기처럼 특수한 계산기가 아니라면) 커서가 존재하는 계산기는 거의 없다고 볼 수 있다. 이러한 디자인은 아이콘 디자인에도 그대로 이어지고 있는데, ‘=’ 버튼을 아이콘으로 디자인한 것을 알 수 있다. ‘계산기’라는 프로그램을 시각적으로 형상화하는데 ‘=’라는 문자를 아이콘으로 디자인한 것도 의미심장하다.

이러한 디자인은 더 설명할 것도 없이, ‘효율성의 최대화’에 초점이 맞추어져 있다. 디자인이나 기능 어떤 한 측면에서의 효율성 뿐만이 아니라, 프로그램에 사용되는 리소스를 최소화하고 잘 쓰이지 않는 기능(앞서 살펴본 메모리 기능 같은)을 과감히 배제하며, 그와 동시에 스마트폰에만 존재할 수 있는 커서와 같은 요소를 계산기에 넣어버렸다. 당연하지만, 이 커서 덕분에 안드로이드의 계산기에서는 숫자를 부분적으로 수정하거나 복사/붙여넣기를 할 수 있다.

커서를 사용한 숫자 편집 작업은 다른 계산기 프로그램에서는 불가능한 일이지만, 여기에는 생각해 볼 요소가 또 있다. 스마트폰에서 커서를 사용할 수 있는 것은 사실이지만, 실제 스마트폰에서 텍스트를 선택하거나 텍스트 사이의 어느 지점을 커서로 지정하는 것은 그렇게 쉬운 일이 아니다. 아마 커서가 있다면 특정한 상황에서는 효율적으로 숫자를 입력할 수 있을 것이다. (하드웨어 키보드가 탑재된 안드로이드 기기도 있으니까) 하지만 일상적으로 스마트폰을 사용하는 사용자가 이 기능을 편리하게 이용할 수 있을까, 에 대해서는 조금 더 생각을 해봐야 하지 않을까.

 

윈도우 폰의 차례이다.

  

르네상스 시대의 사실주의를 넘어 모더니즘 시대의 미니멀리즘으로 나아가는 스마트폰 플랫폼 UI의 위엄.jpg

윈도우 폰의 경우에는 강조색(accent color)의 개념이라는 것이 존재한다. UI 요소에서 주목(focus)이 필요한 요소에는 이 강조색이 사용되며, 그 외의 요소에는 거의 무채색 계열의 색상이 사용된다. 윈도우 폰의 UI를 실제로 보지 않은 상태에서 이러한 설명을 들으면 ‘아니 UI가 그 정도로 밋밋하다니 뭔가 부족한 UI 아닌가’라고 생각할 수도 있겠지만, 그렇지는 않다. 이곳에도 철학은 존재한다.

어쨌든 계속 설명하자면, 계산기의 ‘=’ 요소에 강조색이 사용되어 있으며(그렇다. 계산을 하려면 항상 이 ‘=’ 버튼을 눌러야 한다. iOS에서도 ‘=’ 버튼은 눈에 띄는 오렌지색으로 디자인되어 있잖은가?), 아이콘도 이 강조색을 사용하고 있다. 아니, ‘강조색을 사용하고 있다’는 표현은 옳지 않을런지도 모른다. 방금 설명한 강조색의 개념으로 눈치를 챈 사람도 있겠지만, 윈도우 폰의 아이콘은 저 강조색과 기본색(위 화면에서는 흰색)을 사용해서 디자인되는 경우가 많다. 사용자는 윈도우 폰에서 쓰이는 강조색을 변경할 수도 있는데, 그 경우 저 아이콘의 파란색이 해당 강조색으로 바뀐다. (하지만 그렇다고 해서 윈도우 폰의 아이콘에 무조건 강조색과 기본색만 싸야하는 것은 아니다. 원하는대로 자유로운 이미지를 만들어 앱 아이콘으로 사용할 수 있다) 또한 아이콘의 내용을 살펴보면, 윈도우 폰은 앞서 살펴본 플랫폼들과 달리 실제 계산기의 외형을 단순화한 픽토그램을 아이콘으로 사용하고 있다. 취향에 따라 아이콘에 대한 선호도가 갈릴 수는 있겠지만, 윈도우 폰에도 실세계를 추상화하려는 의도가 있음을 알 수 있다.

윈도우 폰은 메트로(Metro)라는 디자인 철학을 내세우고 있는데, 이 메트로라는 것도 살펴보면 ‘효율성’을 전면에 내세우고 있다. 하지만 안드로이드에서 추구하는 것과는 성격이 약간 다른데, 메트로에서 추구하는 효율성은 ‘정보의 시각적 인식에 대한 효율성’에 가깝다. 주목도를 떨어뜨릴 수 있는 디자인 요소를 최대한 단순화하여 미니멀리즘에 가까운 디자인을 사용하며(안드로이드의 계산기 버튼에는 그나마 그라데이션이라도 있었다!) 주목이 필요한 ‘=’ 버튼에만 눈에 띄는 색상을 사용하고 있지만, 반면에 기능 면에서는 미니멀리즘을 추구하지 않고 있다. (메모리 기능은 멀쩡히 남아 있다)

 

 

그렇다면 실제 기능에서는 어떤 차이가 있을까? 위에서 살펴본 순서대로, 다시 iOS를 살펴보자.

 

iOS의 경우 실제의 계산기와 비교하자면, 별다른 추가 기능은 없다. 어디까지나 실제 계산기와 비슷하다고 봐도 될 것 같다. 대신에, Landscape 모드로 아이폰을 기울이면 위와 같이 특수 계산 기능 버튼이 레이아웃에 추가된다. 아마 공학용 계산기를 사용해 본 사람들에게는 친숙한 기능의 버튼이리라고 생각한다. (개인적으로는 2nd 버튼-기종에 따라서는 shift 버튼인 경우도 있지만-이 인상적이었다) 새로운 기능 버튼이 추가되지만, 키패드의 오른쪽 영역은 처음 Portrait 모드와 동일한 버튼 배치를 사용하고 있어서 사용자의 혼동을 막고 있다. 그리고 Portrait 모드와 Landscape 모드의 유효 숫자 자리수가 다르다. 일정한 폰트 크기를 유지하기 위해서라고 생각된다.

iOS는 추가되는 기능 버튼에서도 공학용 계산기의 기능을 최대한 모방하는 동시에, 사용자에게 친숙함을 준다는 목표 또한 잃지 않고 있다.

 

안드로이드의 경우에는 약간 다르다.

안드로이드의 경우에는 메뉴 버튼을 누르면 ‘고급 패널’이라는 메뉴가 나타나며, 이 메뉴를 통해서 고급 계산 기능에 해당하는 버튼을 사용할 수 있다. Landscape 모드를 사용할 경우에는 버튼의 배치만 변경된다. (개인적으로는, 버튼 배치의 변경이 사용자에게 혼동을 줄 수도 있다고 느껴진다) Landscape 모드에서도 고급 패널을 불러올 수는 있지만, 더 추가되는 기능은 없다. 계산기의 유효 자리 숫자도 적은데다(iOS하고 비교해 보자) Landscape 모드에서도 유효 자리 숫자가 그대로라서 ‘왜 이렇게 디자인한걸까…’라는 생각이 들 지경. 다만 괄호 연산을 사용할 때에는 위와 같이 수식을 모두 확인할 수 있다는 점이 편리하다. (iOS에서는 당연히 수식이 화면에 표시되지 않는다. 그런 방식으로 동작하는 계산기는 ‘거의’ 없으니까. 공학용 계산기 중에는 그런 기능이 있는 모델도 있다)

효율성을 추구한다는 목표 자체는 일관성이 있지만, 그 효율성이 인간을 위한 것인지에는 약간 의문이 드는 디자인이다.

 

마지막으로 윈도우 폰을 살펴보자.

윈도우 폰도 iOS와 마찬가지로 Landscape 모드에서 새로운 기능 버튼이 추가되지만, 버튼의 배치는 약간 변경된다. 그리고 Portrait 모드이건 Landscape 모드이건 숫자 표시부에 표시되는 숫자의 유효 자리수는 동일한데, 덕분에 Portrait 모드에서는 숫자의 폰트가 작아져 버린다. 다른 플랫폼의 계산기와 좀 차이가 있는 기능은, 직전까지 계산한 계산식의 수식이 숫자 표시부의 계산 결과 위에 표시되는 기능을 제공하고 있다. 이러한 기능은 실제 계산기하고는 약간 동떨어진 기능이라 할 수 있겠지만, 계산기의 기능 자체에 혼동을 주지 않으면서 유용한 기능이라고 할 수 있다. 그 외에 특기할만한 사항이라면, 수식 기호 대신 영문을 군데군데 사용하고 있다는 것이다. (이를테면 √ 기호 대신 sqrt, π 대신 Pi) 윈도우 폰의 텍스트 지향성(?)을 보여주는 부분이라고 할 수 있을까. 그리고 (개인적으로는 좀 별로라고 생각하지만) Landscape 모드로 들어갈 때, 장치를 왼쪽으로 기울이냐 오른쪽으로 기울이냐에 따라 서로 다른 기능 버튼이 화면에 표시된다. 버튼 사이즈를 유지하면서 보다 많은 기능을 추가하려니 이런 결과가 나온 것 같다.

‘정보의 시각적 인식에 대한 효율성’이라는 관점에서 보자면, 실망스러운 부분이 없잖아 있지만서도 실용적인 기능(예를 들면 계산식 표시 기능같은)을 적절히 도입하고 있다고 생각할 수도 있겠다.

 

 

이제 글을 마무리하자면,

사용자들은 모바일 운영체제에 포함되어 있는 앱을 살펴볼 때 단순히 예쁜 디자인이나 인터랙션만으로 앱을 평가하는 경우가 많다. 하지만, 기실 각 운영체제는 나름의 디자인 가이드라인을 갖추고 있으며 그러한 가이드라인의 원칙에 따라서 앱 디자인을 하고 있다. 물론 사용자야 사용자 입장에서 앱을 사용하고 평가하면 되겠지만, 개발자 입장에서는 이러한 가이드라인의 원칙에 대해서 생각해 보는 것이 ‘해당 플랫폼에 어울리는’ - 뭔가 다른 표현이 있을거라 생각되지만 보다 나은 표현을 찾지 못하겠다 – 앱을 디자인하는데 도움이 되지 않을까, 마 그런 생각을 갖고 있습니다.

 

p.s 위에 언급한 세 개의 플랫폼 외의 다른 환경도 살펴보았으면 좋겠다는 생각이 들었지만, 딱히 기회가 닿지 않았으니 다음 기회로 미룰까 한다.