'UI디자인'에 해당되는 글 2건

  1. 2015.12.14 웹, 모바일 디자인을 한다면 읽어야 할 정보 8가지
  2. 2015.11.30 새로운 UI로써의 No-UI

UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.



1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.



UI의 9가지 상태 ➔ 더 읽기



2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.


모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기




UI디자인에서 버튼이나 메뉴는 다른 곳으로 향하는 '문'입니다. 버튼의 형태나 스타일만큼 중요한 것은 '문의 이름'입니다. 메뉴 버튼의 중요성과 적합한 메뉴명을 결정하는 요소를 알아봅니다.

클릭을 유도하는 이름 붙이기 ➔ 더 읽기




스크롤로 제어하는 원 페이지 구조가 등장하면서 세로형 내비게이션 메뉴도 많이 볼 수 있게 되었습니다. 웹사이트를 디자인할 때 사용하는 세로형 내비게이션이 무엇인지와 세로형 내비게이션 메뉴 활용법을 3단계로 나누어 알아봅니다.

웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 ➔ 더 읽기




사용자의 명령을 인식하거나 긴급 상황을 알리는 데 사용하는 모달 창 (Modal window)는 사용자의 작업 흐름을 흐트러트릴 수 있습니다. 그래서 모달 창 버튼의 색상 사용이 중요합니다. 모달 창 버튼의 3가지 성격에 맞는 색상 지정 방법을 알아봅니다.

버튼색상에도 정답이 있다 ➔ 더 읽기



6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.


스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기



7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.


모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기




8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.


새로운 UI로써의 No-UI ➔ 더 읽기





Posted by slowalk

올해 8월부터 페이스북은 인공지능을 활용한 가상 비서 서비스 'M'을 출시하고, 일부 페이스북 사용자를 대상으로 테스트에 들어갔습니다. M은 메신저 애플리케이션을 활용하는 텍스트 기반의 서비스이며, 간단하게 메시지를 보냄으로써 식당을 예약하거나 선물을 추천하는 등의 요청을 수행할 수 있습니다.



출처 : ProductHunt



 최근 대두하고 있는 이러한 '대화 중심적'인 애플리케이션들의 공통점은 '메시지'를 중심에 두었다는 것입니다. 특별한 버튼이나 메뉴 없이 대화만으로 사용자가 원하는 것들을 쉽게 제공할 수 있습니다.  



메시지의 대두


 SMS는 전 세계 사람들이 가장 많이 사용하는 메시지전달 애플리케이션입니다. 3년 전, 그 사용자는 약 40억 명으로 추산되었습니다. 이것은 페이스북 사용자의 4배가 훨씬 넘는 숫자입니다. 메시지, 특히 SMS는 사람 간 소통의 기본을 명확하게 충족시키고 있습니다. 이것은 메시지전달 애플리케이션인 WhatsApp이나 WeChat 등이 최근 애플리케이션 시장에서 우위를 선점하고 가치를 인정받고 있는 이유이기도 합니다.  


 지금까지 메시지는 사람과 사람을 이어주는, 좁은 맥락에서의 단순한 의사소통 수단으로 여겨져 왔습니다. 만약 메시지가 개인 간의 소통을 뛰어넘어 사람과 컴퓨터가 의사소통하는 방식으로 이용된다면 어떨까요?



인공지능의 시작


 올해 초 개봉된 '엑스 마키나'라는 영화의 주인공은 여성의 모습을 한 'Ava'라는 인공지능 로봇입니다. Ava를 만든 개발자는 젊은 엔지니어를 데려와 그녀와 사랑에 빠질 수 있는지를 지켜보게 됩니다. 사랑에 빠질 수 있을 만큼 사람처럼 생각하고 행동하는 로봇을 만들기 위해서였습니다. 



 


 실제로 컴퓨터의 지능이 인간과 같은지, 즉 컴퓨터가 인간의 사고를 하는지 판정하는 '튜링 테스트'라는 것이 있습니다. '인공지능 연구의 아버지'라고 할 수 있는 영국의 전산학자 앨런 튜링(1912~1954)이 1950년대에 철학 학술지 '마인드'에 게재한 논문 '계산 기계와 지능'에서 제안한 방법으로, "만약 컴퓨터의 반응을 진짜 인간의 반응과 구별할 수 없다면, 컴퓨터는 생각할 수 있는 것으로 보아야 한다"는 기준을 제시했습니다. 2014년에는 이 테스트를 통과한 첫 사례가 나와 세간의 이목을 집중시켰습니다. 


 이렇게 단순히 인간의 모습을 하고 행동하는 로봇이 아니라, 인간의 지능을 가지고 있는 로봇을 만드는 것에 대한 시도가 끊임없이 이루어지고 있습니다. 그리고 현재 인공지능이 사람처 수행해내는 것 중에서 단연 최고는 텍스트를 분석하고 이에 반응하는 메시지전달의 영역입니다. 디지털 텍스트는 기계가 받을 수 있는 다양한 형태의 인풋 중에서 가장 직접적인 것이며, 음성이나 제스처 등이 줄 수도 있는 애매한 정보들을 수반하지 않기 때문입니다. 

 사용자에게도 메시지로 기계와 의사소통을 하는 것은 기존의 방식들보다 큰 장점으로 다가옵니다. 메시지를 전달하는 과정에서 사용자는 기계라는 딱딱함을 벗어나 자연스럽고 친근한 경험을 할 수 있기 때문입니다. 또한, 각기 다른 메뉴와 버튼, 그리고 라벨들로 채워진 새로운 인터페이스의 흐름을 좇지 않아도 됩니다. 이것은 왜 대화 중심적인 애플리케이션의 개발에 많은 기업이 열을 올리고 있는지를 간단하게 설명해 줍니다.



UI-Less를 향하여


 누군가는 이러한 애플리케이션들이 'UI가 없는 것이 아니라고' 주장할 수도 있습니다. 결국에는 스크린과 대화할 수 있는 인터페이스가 필요하기 때문입니다. 물론 이러한 애플리케이션들이 어느 정도의 UI 디자인을 필요로 하는 것은 사실입니다. 하지만 새로운 기술은 스크린을 뛰어넘는 인터페이스를 제공할 수 있습니다.









 첫 번째 영상은 구글의 'Soli'라는 프로젝트를, 두 번째 영상은 뇌파를 읽고 이해하는 'Emotiv'라는 제품을 소개한 것입니다. 이 두 가지 영상의 공통점은 기계가 인풋을 위해 특별한 UI를 요구하지 않는다는 것입니다.

 UI 디자이너라면 조금 혼란스러운 트렌드가 될 수도 있을 것입니다. 스크린을 뛰어넘어 사용자의 요청에 응답할 수 있는 기술들이 개발되고 있는 상황에서, 과연 인터페이스는 어떤 필요를 가져야 하며 어떤 목적을 가져야 할까요?



The Technological Tiller

 

 인간과 컴퓨터의 상호작용과 관련한 컨퍼런스인 'CHI 2014'에 'The Technological Tiller'의 개념이 소개되었습니다. 오랫동안 주요한 방향 조종 도구로 알려졌던 배의 키 손잡이에서 유래된 이 말은, 사람들이 오래된 디자인에 새로운 기술을 더 했을 때, 기술의 힘만으로도 새로운 어떤 것이 되어 이것이 원활하게 실행될 것이라고 '잘못' 생각한다는 것입니다. 





 자동차가 처음으로 발명되었을 때 자동차는 우리가 흔히 알고 있는 자동차 핸들이 아닌 배의 키 손잡이를 가지고 있었습니다. 이것은 자동차의 구조와는 맞지 않았고 차의 조종을 어렵게 만들었습니다. 지금의 자동차 핸들의 디자인이 개발되고 적용되면서 자동차도 대중적으로 이용될 수 있었습니다. 

 Technological Tiller와 자동차 핸들의 예가 말하고자 하는 것은 결국 변화와 기술은 그에 걸맞은 새로운 디자인적인 접근을 요구한다는 것입니다. 모터 엔진이라는 새로운 기술은 이와 맞닿을 수 있는 새로운 핸들이 필요했던 것입니다.


 새로운 기술에는 새로운 디자인적 접근이 필요하다는 점을 인식하고 이를 바탕으로 문제를 해결한다면, 이것은 혁신과 성공을 가져올 수 있습니다. 





키보드의 모든 형태를 드러내려고 했던 노키아 제품과 디지털 키보드와 버튼 하나로 혁신을 가져온 아이폰입니다. 





 태블릿에 윈도우를 그대로 구현하려 한 마이크로소프트와 손가락 하나로 모든 경험을 할 수 있게 한 애플. 이러한 예에서 볼 수 있듯이 새로운 기술은 그에 맞는 새로운 디자인을 필요로 하며, UI는 제품 그 자체를 표현하는 것이 아니라 사용자가 제품에 접근할 수 있는 발판일 뿐입니다.





디자이너의 미래


 그렇다고 UI는 한물간 것이고 디자이너가 필요 없다고 말하는 것은 아닙니다. 사람들은 텍스트를 읽고 시각화된 데이터를 보는 등의 일에 여전히 스크린을 사용할 것입니다. UI는 어떤 방식으로든 사용자와 기계를 이어줄 것입니다. 다만 필요한 것은 디자인에 접근하는 방법을 근본적으로 바꾸어야 한다는 것입니다. 애플이 기술에 걸맞은 사용자 환경을 제공하면서 성공하였습니다. 또한, 인공지능이 점점 현실화되면서 버튼 하나 없는 대화 중심적 애플리케이션들이 혁신적인 서비스를 제공할 수 있게 된 것처럼, 새로운 기술들이 가져다주는 NO-UI를 이해하고 새로운 UI의 그림을 그려야 할 것입니다.



 출처: Medium, 블로터


by 수달 발자국




Posted by slowalk