LG Business Insight 1312

Size: px

Start display at page:

Download "LG Business Insight 1312"

보검 부
7 years ago
Views:

1 모바일 UI의 새로운 트렌드 메타포보다 단순 간결이 대세 스마트폰 초창기 시절의 UI는 아날로그 정서를 바탕으로 한 친숙한 디자인이 주를 이뤘다. 그러나 최근 들어 주요 IT 기업들은 새로운 소프트웨어 UI로 사용성 및 확장성을 고려한 간결하고 단순한 디자인을 채용하고 있다. 앞으로의 UI 디자인은 미학적 관점에서 특정 스타일을 추구하기 보다는 사용자들이 갖고 있는 경험수준에 따라 보다 다양하게 개발될 것으로 전망된다. 유미연 선임연구원 지난 6월 25일 미국 샌프란시스코에서 열 린 '구글 I/O 1 '에서 안드로이드 L이 발표되었 다. 안드로이드 L에서 주목할 만한 점은 바로 유저 인터페이스(이하 UI)다. 우선, 전체 UI가 한 층 간결해졌고 아이콘이나 소프트웨어 버 튼 디자인은 명암을 제거했으며, 단색 위주로 배치해 최대한 깔끔하게 보이도록 하였다. 홈 버튼, 뒤로가기, 최근 앱 목록 표시는 각각 동 그라미, 세모, 네모로 그려졌고, 앱의 멀티태스 킹 화면도 구글 나우의 카드 배치와 유사하게 바뀌었다. 소프트웨어 버튼이나 콘텐츠 배치는 단순 하고 간결해졌지만 재료의 질감이나 그림자 효 안드로이드 L의 새로운 사용자 인터페이스...기존의 홈으로, 뒤로 가기, 최근 앱 목록 버튼은 각각 동그라미, 세모, 네모로 바뀌고, 그림자 효과를 통해 깊이감을 더했다. 1 개발자 컨퍼런스 과 등을 통해 입체효과 를 살렸다. 창을 이동 하거나 겹쳤을 때 마치 종이를 여러 장 겹쳐 사용하는 것처럼 입체 감을 살렸고, 시각적으 로 높낮이와 깊이를 느 낄 수 있도록 광원 효 과나 그림자 연출을 적 절히 사용하였다. 구글 의 디자인부문 부사장 마티아스 두아르테(Matias Duarte)는 자신이 제안한 이 디자인을 재료 디자인(Material Design)이라 명명하고 있다. 급변하는 디지털 환경 속에서 디바이스가 다양해지고 복잡해지면서 기업들은 저마다 새 로운 UI 디자인을 선보이며 사용자들의 이목 을 집중시키고 있다. 초기 스마트폰 발전을 이 끌었던 애플의 아이폰 UI 스타일은 디지털이 라는 새로운 매체를 접하는 사용자들을 위해 각 애플리케이션마다 오프라인 제품의 모습을 그대로 모사하고 아날로그적 사용감을 그대로 적용하여 제품에 대한 친밀도를 높였다. 그렇 게 아이폰 UI는 사용자들에게도 디지털 환경 에 대한 낯설음을 덜어주었고, 이후에 등장하 는 모바일 앱들의 디자인 가이드가 되었다. 시 간이 지나 어느새 디지털 경험에 익숙해진 사 용자들은 이제 친숙한 UI에서 벗어나 새롭고 다양한 UI에 대한 기대감을 높이고 있다. 동시 에 UI 디자인을 바라보는 관점도 까다로워져 단순히 흥미 요소로 느끼기 보다는 새로운 OS나 앱에서 발견되는 미세한 UI 디자인 변 화에 의미를 부여하며 사용성을 논하는 수준 에 이르렀다. 애플, 구글에 앞서 가장 먼저 UI 디자인 에 변화를 꾀한 곳은 마이크로소프트다. 마이 34 LG Business Insight

안드로이드 L에서 주목할 만한 점은 바로 유저 인터페이스(이하 UI)다. 우선, 전체 UI가 한 층 간결해졌고 아이콘이나 소프트웨어 버 튼 디자인은 명암을 제거했으며, 단색 위주로 배치해 최대한 깔끔하게 보이도록 하였다.

2 디지털 경험이 익숙해지면서 사용자들은 친숙함보다 사용성을 극대화하는 다양한 UI에 관심을 갖게 되었다. 마이크로소프트의 메트로 UI에 이어 애플 역시 2차원적 인터페이스, 플랫(Flat) 디자인 형태로 급변하며 주목을 받고 있다. (좌) 마이크로소프트의 메트로 UI, (우) 애플의 ios7 크로소프트는 윈도우 8을 출시하면서 획기적 인 디자인 혁신을 선보였다. 윈도우 8의 UI는 선 없이 면분할 만으로 이루어진 정사각형 혹 은 직사각형 블럭들로 초기화면과 앱 화면이 구성되어 있다. 인위적인 반사광이나 장식 없 이 글자 서체와 최소한의 아이콘들로 이루어 져 2차원적 평면 디자인, 즉, 플랫 디자인을 적용하였다. 애플의 아이폰 UI도 대변신하여 작년 6 월 WWDC 2 에서 ios7을 통해 공개되었다. 애플과 마이크로소프트는 각자의 OS에 서류철, 달력, 쓰레기통 등 현실의 사물들을 반영해 해당 아이콘의 기능을 연상할 수 있는 데스크톱 메타포를 사용하고 있다. 2 애플 개발자 회의 ios6까지만 해도 ios를 대표하는 앱들 중 메 모 앱은 실제 메모지처럼, 음악재생 앱은 카세 트 플레이어처럼 디자인되었는데 ios7에서는 이런 속성을 걷어내고 최대한 단순화된 아이 콘을 선보였다. 초기화면의 대표적인 UI인 '밀 어서 잠금해제' 스위치도 사라졌다. 지금까지 살펴 본 주요 IT 기업들의 최신 UI를 종합해보 면 전반적으로 메타포(Metaphor)의 비중이 점점 줄고 보다 단순화된, 다양한 디자인들이 새롭게 적용되고 있다. 메타포, 디지털 시대의 길잡이 메타포란, 사전적 의미로 비유 혹은 어떤 것을 머리에 떠올릴 때 구체적으로 느껴지는 느낌을 지칭한다. 이런 메타포를 UI의 관점에서 해석 하면 사용자가 이미 알고 있는 세상의 것을 활 용하여 새로운 세상, 즉 디지털 인터페이스를 소개하고 안내하는 방식이다. 이미 데스크톱과 인터넷이 상용되기 시작 하던 시절, 인간과 기기가 서로 상호작용할 수 있는 매개체로 메타포가 활용되어 왔다. 데스 크톱 메타포는 컴퓨터의 모니터를 마치 사용자 의 책상처럼 보이도록 하는 데서 출발했다. 우 리가 바탕화면에서 쉽게 접할 수 있는 아이콘 인 폴더/파일 은 사무실에서 사용하는 종이폴 더와 파일을 메타포로 사용한 것이다. 대표적 인 웹 서비스인 온라인 채팅에서 우리가 흔히 칭하는 채팅방/대기방 같은 것도 오프라인에 서 사용하던 방 이라는 것을 메타포로 사용한 것이다. 또 다른 예로 MP3 플레이어에서 사용 LG Business Insight

인위적인 반사광이나 장식 없 이 글자 서체와 최소한의 아이콘들로 이루어 져 2차원적 평면 디자인, 즉, 플랫 디자인을 적용하였다. 애플의 아이폰 UI도 대변신하여 작년 6 월 WWDC 2 에서 ios7을 통해 공개되었다.

3 메타포를 활용한 UI는 사용자들에게 디지털 인터페이스를 쉽게 이해시키지만 과도하게 사용되면 오히려 경험가치를 떨어뜨릴 수 있다. 애플과 마이크로소프트는 각자의 OS에 서류철, 달력, 쓰레 기통 등 현실의 사물들을 반영해 해당 아이콘의 기능을 연 상할 수 있는 데스크톱 메타포를 사용하고 있다. 하는 재생 및 다음 곡 으로 이동 버튼은 카세 트 테이프 플레이어에서 사용하던 표시를 채용한 것이다. 많은 프로그램에 서 사용되는 저장 버튼 에는 플로피 디스켓의 이미지를 사용하고 있 다. GUI 3 가 처음으로 도입되었던 시절의 주 된 휴대용 저장장치가 플로피 디스켓이였기 때문에 디스켓 그림 자체를 저장버튼에 채용 한 것이다. 메타포는 잘 사용하면 사람들이 쉽게 인 터페이스를 익힐 수 있지만, 잘못 사용하거나 혹은 과도하게 사용하면 사용성을 떨어뜨리면 서 학습성도 해칠 수 있다. GUI 초기에 애플 이 내놓은 Quicktime 4.0은 매우 섬세한 인 터페이스로 기억되지만 실제 오디오 장치를 지 나치게 모방하는 메타포를 추구하다가 실패한 대표적인 사례다. 특히, 플레이어의 전체 인터 페이스의 좌측 하단부에 보면 볼륨 조절 다이 얼이 위치해 있는데, 볼륨을 높이거나 낮추기 위해 마우스로 조작해야 한다. 아래 부분에 마우스 포인터를 놓고, 둥글게 위로 올리고, 다시 아래쪽에 포인터를 놓고 둥글게 위로 올 려야 조작이 되었던 것이다. 오디오 장치에 있 는 볼륨 조절 다이얼처럼 손가락으로 잡고 돌 릴 수 있는 것을 굳이 마우스로 조작해야 했으 니 없느니만 못한 UI가 된 것이다. 3 그래픽 유저 인터페이스 터치 UI의 등장과 스큐어모피즘 애플의 Quicktime 4.0에서처럼 아날로그 세 계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식을 리얼(Real) 메 타포 혹은 리얼 라이프(Real Life) 메타포라는 말로 사용되고 있다. GUI에 사실적인 묘사를 고집한 것은 1985년 당시 스티브 잡스가 설립 한 넥스트(NeXT) 사에서 개발한 넥스트스텝 (NeXTSTEP)이라는 운영체제가 개발된 데에서 부터 시작됐다. 각 애플리케이션들은 사용자에 게 직관적으로 기능을 인지할 수 있도록 실사 를 그대로 재현하는 경우가 많았다. 초기 GUI 만 해도 스티브 잡스 개인의 선호에 따라 사물 의 외적인 형태를 그대로 모방하다시피 했기 때 문에 사용자 사이에는 호불호가 극명하게 나뉘 어졌었다. 그러나 이후에 아이폰, 아이팟 터치 등 모바일 기기들이 등장하고, 그들의 운영체제 인 ios가 소개될 즈음 새로운 인터페이스였던 터치 UI의 영향으로 시각적 형태 모방보다 촉각 적이고 물리적인 조작에 따라 사실적으로 동작 하는 행태를 재현하는 활동에 무게중심을 두게 된다. 스큐어모피즘(skeuomorphism)이라는 개념이 부각된 것도 이 때문이다. 스큐어모피즘이란, 실물이 갖고 있는 형태 나 쓰임새를 가져온 듯한 메타포를 의미한다. 그릇, 혹은 도구를 뜻하는 Skeuos 와 모양을 뜻하는 morph 가 합쳐져 '어떤 도구의 형태, 형식' 이라는 의미를 갖고 있는데, 이를 의역해 보면 원래 도구의 형태를 그대로 따라가는 양 식 이라 할 수 있다. 고대 시대로 거슬러 올라 36 LG Business Insight

메타포는 잘 사용하면 사람들이 쉽게 인 터페이스를 익힐 수 있지만, 잘못 사용하거나 혹은 과도하게 사용하면 사용성을 떨어뜨리면 서 학습성도 해칠 수 있다. GUI 초기에 애플 이 내놓은 Quicktime 4.0은 매우 섬세한 인 터페이스로 기억되지만 실제 오디오 장치를 지 나치게 모방하는 메타포를 추구하다가 실패한 대표적인 사례다.

4 스큐어모피즘은 실물이 갖고 있는 형태나 쓰임새를 소프트웨어 디자인에 적용하여 사용자에게 해당 기능과 의미를 직관적으로 전달한다. 체크박스 대신 On/Off 스위치의 아날로그적 사용감을 적용한 (좌)안드로이드 OS와 (우)애플 ios 가 신석기를 대표하는 토기인 빗살무늬토기를 떠올려보자. 그 전까지만 해도 어떤 물건을 저 장하기 위해서는 가죽 주머니나 식물줄기로 엮은 바구니가 사용되었으나, 이후에 등장한 빗살무늬토기는 바구니가 토기화된 것으로 표 면에 줄기로 엮은 듯한 패턴이 그려져 있다. 이 패턴은 장식효과와 함께 아마도 새로운 재료 로 만들어진 물건이니 기존의 식물줄기로 엮 은 바구니처럼 사용하면 된다고 알려주기 위 한 장치였을 것이다. 궁전 천장 한가운데에 달 려있는 샹들리에의 촛불모양 전구도, 휴대폰 으로 사진을 찍을 때 나는 셔터소리 역시 재료 나 매체가 변화하면서 더 이상 쓰이지 않는 형 태나 요소를 유지하여 사용자에게 익숙함과 심리적인 안정감을 준 사례다. 이렇게 유구한 역사를 가진 스큐어모피즘은 디지털 세계의 인터페이스에도 중요한 역할을 하게 된다. 익숙함의 제공, 낯설음에 대한 배려 스큐어모프는 아날로그적 사용감을 그대로 적용함으로써 제품에 대한 친밀감을 높여준 다. 터치 UI로 넘어올 당시 마우스 조작에 비 해 낯설음을 호소하던 사용자에게 익숙함을 제공한 대표적인 UI로 기존 체크박스를 대체한 On/Off 스위치를 들 수 있다. 체크박스의 경 우, 선택/해제여부를 종이 서식에서 사용되는 표기를 추상화하여 가져온 것인데 펜도 아닌 손가락으로 터치해서 체크 표시가 생겼다 지워 졌다 하는 것이 오히려 불편할 수 있었을 것이 다. 밀어서 켜고 끄는 스위치의 경우 평소에 손 으로 가전제품을 켜고 끄던 습관이 있기 때문 에 터치조작과 잘 부합될 수 있고 시각적으로 도 체크 표시 유무보다 레이블과 색상 대비를 통해 더 분명하고 쉽게 상태를 인식할 수 있다. 이외에도 종이가 찢겨나간 흔적을 나타낸 ios 의 메모앱, 실제 노트와 달력을 닮은 주소록과 캘린더 앱 역시 처음 기능을 접하는 사용자라 도 어색함이나 거부감 없이 사용할 수 있도록 하였다. 오프라인에서의 경험을 이어가기 때문 에 온라인 상황에서의 당황스러움이나 새로 배 워야하는 부담을 줄여줄 수 있는 것이다. 사용경험 극대화 스큐어모프는 보다 실감나는 사용 경험을 제 공하는 환경적 요소이기도 한다. 비록 작은 화 면에 갇혀 있는 미니어처 같지만 사용자로 하 LG Business Insight

궁전 천장 한가운데에 달 려있는 샹들리에의 촛불모양 전구도, 휴대폰 으로 사진을 찍을 때 나는 셔터소리 역시 재료 나 매체가 변화하면서 더 이상 쓰이지 않는 형 태나 요소를 유지하여 사용자에게 익숙함과 심리적인 안정감을 준 사례다. 이렇게 유구한 역사를 가진 스큐어모피즘은 디지털 세계의 인터페이스에도 중요한 역할을 하게 된다.

5 스큐어모프는 아날로그적 사용감을 그대로 적용해 새로운 기능에 대한 친밀감을 높여준다. 여금 정서적으로 몰입할 수 있도록 마음가짐이 나 분위기를 조성한다. 전직 아이폰 UI 디자이 너도 같은 맥락에서 다음과 같이 스큐어모프 의 가치를 언급했다. 레스토랑과 마찬가지로 소프트웨어도 단 지 기능만 제공하는 것으로는 좋은 경험을 만 들어내지 못한다. 사용자들이 그 소프트웨어 를 쓸 때에 그 분위기에 빠져들도록 하려면 그 에 걸맞는 환경을 얹을 필요가 있다. ios에서 제공하는 아이북(iBooks)은 실 제 책장과 책의 형태를 UI에 도입했다. 앱을 실행하자마자 등장하는 책(e-book 파일)과 책장은 마치 내가 살고 있는 집의 오래된 나무 책장에 보관 되어 있는 것처럼 묘사되어 있다. 책을 한 권 선택하면 실제 책을 들고 읽는 것 처럼 손가락을 이용해 페이지를 넘길 수 있다. 페이지를 넘길 때 실제 종이가 접혀지는 애니 메이션과 그림자 효과는 독서라는 경험을 배 가하고 극대화한다. 추가적 정보 전달 애플 ios의 ibooks... 실제 책 형태를 차용해 직감적으로 사용법을 알 수 있게 했다. 스큐어모프는 사용자에게 감성적 연결고리를 제공하기도 하지만 특정 콘 텐츠나 앱이 제대로 사용되 고 있는지 여부를 확인시켜 주는 역할도 한다. 사파리 브라우저에서 웹페이지를 읽다가 스크롤바를 맨 아 래까지 내렸을 때, 튕기는 효과로 끝부분에 도달했음 을 알려주는 UI, 스마트폰 카메라로 사진을 찍을 때 '찰칵' 소리로 사진이 찍혔음을 알려주 는 UI가 대표적인 사례다. ios의 메모앱에서 메모를 삭제할 때도 메모가 그냥 사라질 수 있 으나 ios의 경우 앱 하단 부분에 쓰레기통 그 림이 그려져 있어서 삭제 버튼을 누르면 마치 종이가 쓰레기통으로 빨려들어가는 듯한 애니 메이션으로 메모가 성공적으로 삭제됐음을 알 려준다. 플랫 UI, 인터페이스 환경을 논하다 메타포는 UI에 있어서 사용자와 기기 간의 커 뮤니케이션을 활성화하는 중요한 매개체다. 앞 서 소개한 스큐어모피즘 역시 아날로그 세계 의 원형 그대로를 메타포로 삼아 사용자로 하 여금 터치스크린 기반의 디지털 기기에 익숙하 게 만들었다. 하지만, 이렇게 원형 에 가까운 메타포는 오히려 앱의 기능을 명확하게 나타내 는데 한계가 있을 수 있다. 팟캐스트 플레이어의 메타포로 사용된 릴 테이프 레코더의 경우 디자인의 완성도면에서 는 좋을지 모른다. 하지만, 이 제품에 대한 이 (좌) 독일 브라운 社 의 릴테이프 레코더 TG 60, (우) 초기 팟캐스트 화면 38 LG Business Insight

책을 한 권 선택하면 실제 책을 들고 읽는 것 처럼 손가락을 이용해 페이지를 넘길 수 있다. 페이지를 넘길 때 실제 종이가 접혀지는 애니 메이션과 그림자 효과는 독서라는 경험을 배 가하고 극대화한다. 추가적 정보 전달 애플 ios의 ibooks... 실제 책 형태를 차용해 직감적으로 사용법을 알 수 있게 했다.

6 보다 실감나는 효과로 사용경험을 극대화하면서 기능이 제대로 작동되고 있는지 알리는 역할도 한다. 미지나 형태에 대한 경험이 없는 사람들은 이 러한 비유에 대하여 맥락을 이해하기 힘들 것 이고 이러한 비유의 사용은 향후 10~20년 후 의 사용자들에게는 인터페이스의 메타포로 받 아 들여지기 힘들 것이다. 또한, 기존에 존재 하지 않았던 서비스(혹은 물리적인 형태가 없 는)를 접할 경우, 과연 아날로그적 현상이나 사물만으로 사용자들에게 새로운 인터페이스 를 이해시킬 수 있을지에 대한 고민이 더욱 깊 어질 수 있다는 점에서 스큐어모피즘에 대한 회의적인 시각도 존재한다. 뿐만 아니라 스큐어모피즘을 기반으로 하 는 애플의 UI의 접근 방식은 이미 사람들에게 는 익숙하고, 누구나 구현 가능한 평범한 수 준이 되어 버렸다. 다시 말해 스티브 잡스가 주도하던 기존의 혁신 방법은 과거에만 유효했 을 뿐 현재에는 유효 하지 않을 수 있다는 것 이다. 그도 그럴 것이 애플 내부에서도 스큐어 몰피즘이 과도한 정보를 담고 있고, 장식적인 요소에 치중하다 보니 실질적으로는 사용성을 저해하고 있다는 일부 부정적인 목소리가 있었 다고 한다. 이 시점에서 애플은 자사의 고유 디자인 철학과도 같은 스큐어모픽 디자인을 과감히 탈피하고 플랫 디자인이 적용된 플랫 UI 환경 을 선택하게 된다. 플랫 디자인은 디자인의 입 체적인 표현(그림자, 그라데이션, 깊이감 등) 같 은 복잡한 요소를 배제하고 기본적인 요소들 인 레이아웃, 대비, 색상, 폰트 등을 이용해 디 자인한 것이다. 2차원적인 평면 디자인이 적용된 플랫 UI는 애플보다 구글과 마이크로소프트가, 특 성상 다소 차이는 있지만 한발 앞서 주도하려 는 노력을 기울여 왔다. 마이크로소프트는 윈 도우 8이 그 계기가 되었고, 구글은 2011년부 터 시작한 구글 사이언스 페어 사이트를 통해 처음 선보인 Gmail, 구글 캘린더 등 구글 웹 서비스와 모바일 앱 스토어인 구글 플레이 스 토어 등을 통해 플랫디자인 UI를 본격적으로 개척해 나갔다. 플랫 디자인은 디지털 환경이 갖고 있는 속성과 맞닿아 있기도 하다. 무엇보다 디테일 한 장식 요소가 빠지고 글자와 색으로만 표현 되다 보니 화면 전환시 이미지 로딩이 빠르고, 다양한 해상도를 갖고 있는 타 기기와 이미지 연동이 한결 수월하기 때문이다. 이런 점에 비 춰봤을 때, 연결경험과 디바이스 플랫폼 통합 을 중시하는 애플에게 ios7의 플랫 UI 채용 은 이미 예상 가능한 수순으로 보여진다. 사용 경험의 확장성 플랫 디자인의 가장 큰 장점은 바로 하나의 디 자인이 여러 디바이스에 최적화될 수 있다는 점이다. 근래 들어 주요 기업들이 플랫 디자인 을 채용하는 우선적인 이유는 다양한 디바이 스 및 해상도에 따라 이미지가 유연하게 변화 하여 사용 경험을 확장하기 위함이다. 이미지 버튼 대신 컬러 링크를, 패턴화 배경 대신 단 순한 배경처리로 다양한 디바이스에 보다 쉽 게 적용할 수 있게 된 것이다. LG Business Insight

뿐만 아니라 스큐어모피즘을 기반으로 하 는 애플의 UI의 접근 방식은 이미 사람들에게 는 익숙하고, 누구나 구현 가능한 평범한 수 준이 되어 버렸다. 다시 말해 스티브 잡스가 주도하던 기존의 혁신 방법은 과거에만 유효했 을 뿐 현재에는 유효 하지 않을 수 있다는 것 이다.

7 실물을 모사한 메타포 대신 과도한 장식이나 입체적인 표현을 배제한 플랫 UI가 부상하고 있다. 이벤트플래너 앱 INVY ( 上 ) 리얼 플랫(Real Flat) 디자인의 예 ( 下 ) 올모스트 플랫(Almost Flat) 디자인의 예 보통 하나의 이미 지를 다양한 해상도에 맞게 변화시키려면 각 상황에 맞는 이미지가 일일이 만들어져야 한 다. 하지만 플랫 디자 인 형태로 제작하면 따 로 이미지를 쓰지 않고 웹 혹은 콘텐츠의 전반적인 스타일을 미리 저 장한 스타일 시트, 일명 CSS 4 (Cascading Style Sheets)만으로도 디자인을 구현하는 것 이 가능하기 때문에 모든 이미지를 만들 필요 가 없고, 용량 역시 최소화할 수 있다. 모든 해 상도에 대응 가능해 아무리 큰 해상도라고 해 도 이미지가 흐려지는 현상이 없다. 윈도우 8을 기점으로 한 발 앞서 플랫 UI 를 선보인 마이크로소프트는 웹사이트에서도 글자 서체 위주의 플랫 디자인을 적용하였다. 실제로 사이트를 보게 되면 하 얀 바탕에 텍스트, 그 외에 들 어간 이미지는 몇 가지 되지 않는다. 그렇기 때문에 PC, 태 블릿, 스마트폰 등 다양한 해 상도에 맞게 변화시켜 제작하 기에 적합하다. 사용자의 인지 집중 플랫 디자인은 화려한 디자인 요소를 최소화 했기 때문에 4 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트 사용자로 하여금 콘텐츠에 대한 집중력을 향 상시킨다. 오히려 너무 스큐어모피즘에 치중하 고, 현실의 메타포를 그대로 구현하기 위해 사실주의적 디자인에 집착하면 간단하게 사용 해야 할 앱이 무겁고 부담스러우며 결국 사용 자는 콘텐츠의 내용에 집중할 수 없다. 그에 반해 플랫 디자인은 목적 지향적 디자인으로 기능과 콘텐츠, 사용자의 최종 행동 목표에 중점을 두고 있다. 모든 산만한 디자인 요소 를 제거하고 꼭 필요한 내용과 사용자가 자신 이 원하는 결과물에 집중하도록 설계하기 때 문에 사용자로 하여금 목표를 쉽게 이루게 한 다. 약속을 만들어 정하고 지인과 공유하는 이벤트 플래너 앱 INVY 는 다른 모든 요소 를 걷어내고 사용자가 목표하는 행위에 집중 할 수 있도록 디자인 되었다. 서비스 속성에 따른 다양한 디자인 시도 플랫 디자인은 다른 추가 효과없이 평면적인 스타일을 지향한다. 마이크로소프트의 메트로 UI가 대표적인 사례라 할 수 있다. 하지만 평 면적 디자인이라 해서 아무 효과가 없는 것은 아니다. 현존하는 플랫디자인에는 두 가지 종 류가 있다. 오로지 컬러와 형태, 레이아웃, 타 입만을 이용하는 리얼 플랫(Real Flat) 디자 인이 있고, 컬러, 형태, 레이아웃, 타입을 이용 하지만 외곽라인이나 약간의 텍스쳐 혹은 효 과를 준 올모스트 플랫(Almost Flat) 디자인 으로 나눠볼 수 있다. 구글의 머티리얼 디자인 의 경우, 완벽한 플랫보다 약간의 텍스처와 그 40 LG Business Insight

모든 해 상도에 대응 가능해 아무리 큰 해상도라고 해 도 이미지가 흐려지는 현상이 없다. 윈도우 8을 기점으로 한 발 앞서 플랫 UI 를 선보인 마이크로소프트는 웹사이트에서도 글자 서체 위주의 플랫 디자인을 적용하였다. 실제로 사이트를 보게 되면 하 얀 바탕에 텍스트, 그 외에 들 어간 이미지는 몇 가지 되지 않는다.

8 플랫 UI는 다양한 디바이스 환경에 효율적으로 적용할 수 있고 사용자로 하여금 콘텐츠에 집중할 수 있도록 한다. 림자 효과를 준 플랫 디자인(Almost Flat)을 지향한다. 평면적 디자인은 그 자체로는 완벽할 수 없다. 실제로 사용자가 서비스 속성을 직관적 으로 받아들이고 이해하기 위해서는 약간의 효과와 기법이 가미되어야 할 필요가 있다. 한 가지 예로, 키보드 UI를 사용하다 보면 영어 의 대문자를 입력하기 위해 시프트(shift) 버 튼을 활성화시켜야 할 때가 있다. 하지만 최근 에 바뀐 ios7의 키보드 UI는 시프트 버튼이 눌렸을 때 입체감 대신 색의 변화만으로 표현 하고 있는데 사용자 입장에서는 어떤 키보드 에 시프트 키가 눌러져 있는지 헷갈릴 수 있어 직관적으로 받아들이지 못할 수 있다. 디지털 환경에 최적화된 단순한 화면 구성 최근에 바뀐 ios7의 키보드 UI는 시프트 버튼을 눌렀을 때 이전 버전에서 나타난 입체감 대신 색의 변화만으로 표현하여 사용자들이 혼돈될 가능성이 있다. 을 바탕으로 효과나 기법을 가미하는 시도가 이뤄지면 그만큼 사용자에게 다양한 재미를 줄 수 있고 서비스의 사용성도 높일 수 있다. 친숙함을 넘어 다양성에 도전하는 UI UI는 하드웨어, 소프트웨어 등 IT부분에 한정 된 이야기인 것처럼 생각 되어지는 경향이 있는 데, 우리의 일상에서도 모든 것이 UI를 가지고 있다. 예를 들어 집을 짓는다고 할 때, 시공업 자, 건축가, 설계사들은 집에 살게 될 입주자를 고려해서 한정된 공간에 맞게 방과 화장실, 부 엌, 창문 등을 배치해서 효율적이고, 살기 좋은 공간으로 만들려고 할 것이다. 이렇게 해서 만 들어지는 살기 좋은 공간이 바로 UI인 것이다. 모바일 중심의 IT 세계로 넘어오면서 유 독 UI가 각광을 받게 된 배경은 사람들이 PC 를 사용하다가 스마트폰으로 넘어오면서 손바 닥만한 작은 화면 속에 기존의 큰 모니터에서 할 수 있는 일들을 해야 했기 때문이다. PC화 면이 손바닥 안으로 들어온 이상 눈의 시선과 손가락의 움직임이 자연스럽게 혼연일체가 될 수 있는 UI가 필요했던 것이다. 그 까닭에 스 마트폰 초창기부터 지금까지 주류로 사용된 UI 디자인들을 살펴보면 사용자에게 친숙하게 다가가기 위해 아날로그의 정서를 그대로 차용 하는 메타포, 즉 스큐어모피즘이 주로 활용 되 어왔다. 그러나 스마트폰 출시 후 몇 년의 시 간이 흐른 지금, 사용자는 터치스크린 기반 디 지털 기기들에 익숙해져 있고, 스큐어모피즘 에 대한 니즈도 점차 약해지고 있다. 그렇다고 LG Business Insight

하지만 최근 에 바뀐 ios7의 키보드 UI는 시프트 버튼이 눌렸을 때 입체감 대신 색의 변화만으로 표현 하고 있는데 사용자 입장에서는 어떤 키보드 에 시프트 키가 눌러져 있는지 헷갈릴 수 있어 직관적으로 받아들이지 못할 수 있다.

9 디지털 환경에 최적화된 디자인을 바탕으로 서비스나 앱 특성에 맞는 다양한 UI가 개발되어야 한다. 해서 스큐어모피즘이 더 이상 필요 없는 UI라 고 단정지을 수 없다. IT 세상을 바라보는 시 선이 낯설지 않은 것일 뿐, 이미 알고 있는 기 능에 대해서는 스큐어모피즘이 주는 배려보다 는 지루하지 않은, 새롭고 다양한 UI 디자인 에 더 열광하게 될 것이다. 타겟에 입각한 UI 세그멘테이션 결국 UI의 본질은 커뮤니케이션이다. 커뮤니케 이션에 있어서 무엇보다도 중요한 것은 사용자 의 눈높이, 즉, 제품이나 기술에 대한 수용성 이다. 그러므로 인터페이스 디자인은 특정 스 타일에 의해 지배하는 것이 아니라 사용자의 경험 수준, 앱이나 서비스의 속성 등 여러가지 요인에 따라 다변화될 수 있다. 최근 IT 업계의 화두가 되고 있는 기기 간 연결과 IoT 5 등을 감안했을 때 사용자들은 자신이 이미 경험한 기능이나 서비스가 특정 기기에 한정되지 않고 효과적으로 연동되고 다 양한 사물에도 자연스럽게 확장, 적용되는 경 험을 원할 것이다. 그러기 위해서는 장식으로 사용되는 아날로그적 메타포보다는 본연의 기 능에 충실한, 단순하고 간결한 플랫 디자인이 대안이 될 수 있다. 이런 경우 디바이스에서는 이미지를 처리하는데 드는 리소스 6 를 아낄 수 있고, 사용자가 목표로 하는 경험이나 서비스 가 빠르게 구현될 수 있는 환경이 만들어지는 것이다. 5 Internet of Things, 사물인터넷 6 이미지 처리를 위한 메모리 용량 한편, 동작인식이나 증강현실 등은 차세 대 기술로서 기기와의 물리적인 접촉 대신 가 상의 공간에서 난이도 높은 상호작용을 요구 한다. 동작 인식의 경우, 어떤 매개 디바이스 가 없으면 허공을 휘젓고 마는, 상당히 막연한 기능으로 전락할 수 있고 증강현실 역시 기기 를 목표물에 정확하게 근접시킬 때만 콘텐츠 가 일시적으로 보이고 사라지기 때문에 사용 자는 불편을 느끼고 다시는 사용하지 않을 가 능성이 높다. 이처럼 다소 막연하고 생소한 기 능이나 서비스를 접한다고 했을 때 사용자들 은 어떤 UI를 기대할 수 있을까? 가령, 동작 인식의 경우 사용자가 특정 동작을 취했을 때 본래 의도한 대로 입력신호가 제대로 들어갔는 지 확인할 수 있는 UI가 필요할 수 있다. 먼 곳에 있는 PC에서 음악이 흘러나올 때 볼륨 을 키우고 싶다면 손을 들어 기존 오디오 기기 에 있는 볼륨 다이얼을 돌리듯 손목을 돌릴 때, 화면에서도 같이 볼륨 다이얼 이미지를 등 장시키면 인식오류를 줄일 수 있고 해당 기능 에 대한 낯설음도 해소할 수 있는 아이디어가 될 것이다. 앞으로의 디지털 세계에서는 보다 다양한 앱과 서비스들이 등장하게 될 것이고 이에 따라 사용자들이 갖고 있는 경험수준 역시 다양하게 존재할 것이다. UI는 미학적 관점에서 특정 스 타일을 추구하기 보다는 보다 세분화된 방향으 로 개발 및 발굴될 것이다. 물리적인 제품에서 도 그렇듯 UI 역시 사용자 타겟과 세그멘테이션 을 고려할 때가 다가오고 있다 LG Business Insight

최근 IT 업계의 화두가 되고 있는 기기 간 연결과 IoT 5 등을 감안했을 때 사용자들은 자신이 이미 경험한 기능이나 서비스가 특정 기기에 한정되지 않고 효과적으로 연동되고 다 양한 사물에도 자연스럽게 확장, 적용되는 경 험을 원할 것이다.

<4D6963726F736F667420576F7264202D20B1E2C8B9BDC3B8AEC1EE2DC0E5C8F1BCF8>

<4D6963726F736F667420576F7264202D20B1E2C8B9BDC3B8AEC1EE2DC0E5C8F1BCF8> 기획시리즈 주간기술동향 2015. 9. 9. 사물인터넷 기반 스마트홈 발전 전망 장희순 KiCRA 경영기획실장 chs00721@daum.net 이상일 동일건축 1. 서론 2. 스마트홈 발전단계 3. 스마트홈 개발 동향 4. 스마트홈 사업 전망 5. 결론 1. 서론 스마트홈이란 TV, 냉장고, 세탁기 등 집 안의 다양한 기기들이 네트워크에 연결되어 지능형 서비스를