A2. 쉬어가기 : UX / UI 기본 용어들
이번에는 잠시 쉬어가는 의미로 유튜브 영상을 하나 보며 UX/ UI를 디자인하는 데 있어 사용되는 용어들을 살펴보려고 합니다.
Connecting — Trends in UI, Interaction, & Experience Design
https://www.youtube.com/watch?v=lciYKwVLTuk
이 영상을 보시면 UI / UX에 관련한 여러 용어가 나오는데 간단하게 이 용어들을 알아보는 것으로 하겠습니다.
(이 글 이전에 한 번씩 다루었던 용어들은 패스했습니다.)
마이크로소프트에서 제작한(?) 영상인데요, 인터랙션 전반에 관한 내용이 담겨있어 한 번 보시기 좋을 듯합니다.
1. Ubiquitous — 유비쿼터스
(00:33) I think we specialize with devices that have screen because they’re nearly Ubiquitous now
네 먼저 유비쿼터스입니다. — 이 단어는 왜인지는 모르겠는데 한 10년 전쯤 한국의 산업디자인 전반에서 무슨 신앙심처럼 떠돌아다니던 용어에요. 유니버셜 디자인과 함께 다양한 분야에서 연구되고 기대를 하게 만들어 주는 단어였는데 이 단어를 붙이면 되게 있어 보이고 미래를 설계하는 듯한 표현으로 많이 사용되었었습니다. 지금 영상에서 사용하는 의미는 당시의 그 의미랑은 조금 다른데요.
유비쿼터스는 쉽게 표현해서 어디에나 있음을 뜻하는 말입니다. 매트릭스 같은 SF영화에서는 Grid라고 표현도 하죠 — 이제는 고전이 된 영화, 매트릭스에서는 물론 가상의 세상이긴 하지만 인물을 둘러싼 모든 것들이 다 촘촘하게 정보들로 이루어져 있고 그 정보의 매트릭스를 주인공이 활보하고 다녀요. 모든 것들이 정보라는 기초로 서로 연결이 되어있기 때문에 그 세계에 있는 식빵이나 강아지, 건물의 타일들도 다 연동이 되어있고 정보를 조작할 수 있는 능력자가 있다면 언제든 변형하거나 통제를 할 수 있는 설정으로 되어있습니다.
요즘 우리가 사는 세상을 봐도 인터넷에 연결되는 사물들을 보면 서로 정보를 주고받고, 중앙에서 기기를 컨트롤하는 장치가 있다면 원격에서도 여러 사물을 켜고 끌 수가 있어요. 나중에는 켜고 끄는 수준 이상으로 더 적극적으로 정보를 주고받겠죠. 그런 것들을 유비쿼터스라고 합니다.
2. tool makers
(1:16) We are tool makers
공식 용어는 아니지만, 영상의 도입부에 나온 말이라 담아봤습니다. 전통적으로 공예가들은 생활에 필요한 도구를 만들어서 사람들에게 제공해주었죠. 이제는 한 명의 개인이 아닌 여러 사람이 모여서 사용자들에게 맞는 도구를 제공해줍니다. 만드는 사람들이 많아진 만큼 더 정교하고 효율적인 도구를 더 많은 사람에게 제공해줍니다. 그리고 모바일의 세상에서도 마찬가지로 사용자들의 능력을 증강(Augment)시켜주기 위해 계속해서 도구를 만듭니다.
영상에서는 ‘tool makers’와 ‘Augment’ 만 이야기했지만, 이야기는 자연스럽게 다음으로 넘어가게 되죠.
3. Augmentation
(1:29) Augmentation of our abilities as humans
그다음은 Augment에요 Augment라는 단어는 AR이라는 용어를 들어보셔서 그 개념이 이미 친숙하실 수 있을 겁니다. Augment reality 할 때 a 가 바로 이것이에요 AR에서는 증강이라고 번역해서 표현하는데 이 영상에서는 조금 더 근본적인 의미를 담고 있어요. 굳이 번역하자면 확장? 증폭? 정도가 적당한데요
위에서 보시는 이것이 증강입니다. — 느낌이 오시나요?ㅎㅎ
이것도 증강이에요 아까랑 뭐가 다르죠? 젓가락도 사람이 손이 아니라 무슨 막대기 같은 것으로 물건을 집어 들었어요. 마찬가지로 바로 위 이미지도 뭔가 장치 같은 걸로 젓가락이 닿을 수 있는 거리보다 더 먼 것을 잡았어요.
하나는 10센치 남짓한 거리의 사물을 집어 올리는 데 사용되었고(젓가락) 또 하나는 1m 반경의 물건을 집었지만, 개념을 확장한다면 지구 반대편의 물건 또한 이렇게 잡을 수 있다는 의미가 됩니다. 지구 반대편까지 길이가 약 21,600km 정도 되는데요 이 정도 길이의 막대기를 만드는 대신, 그것을 네트워크라는 기술로 해결 가능하게 된 것이죠. 이게 증강의 의미이고 — 이것도 생각해보면 유비쿼터스의 맥락이랑도 닿아있기도 합니다.
4. Users Attention
(1:54) ask for users Attention < → Confused, distracted
attention 그리고 confused 인데요. 이것을 인격화 해서 표현하자면, 스마트폰, 혹은 스마트폰 안에 존재하는 여러 서비스들이 되게 관종이라서(..) 항상 자기를 쳐다봐달라고 여러 가지 시도를 하는 것을 attention이라 할 수 있을 듯해요. 예를 들면 이런 것들이죠, 메세지가 왔을 때의 빨간 뱃지 라던가, 혹은 시스템 차원에서 여러분들에게 알려주려고 노력하는 알림들, 팝업들이 그것일 수 있어요.
그리고 또 이런 것들도 있죠..
사용자에게 정보를 강제적으로 알려주기 위해 나오는 배너들, 그리고 뉴스피드들, 혹은 각종 꼼수를 사용해서 사용자가 원치 않지만 누르게 만드는 이미지들..
이런 요소들은 사용자에게 지속해서 정보를 주기 위해 되게 열심히, 나름 최적화된 방법으로 노력하고 있는 겁니다. 물론 그 최적화가 사용자를 위한 방식이 아닌 정보 제공자들에게 유리한 방향으로 최적화되는 방식이 더 많기는 합니다. 어떻게 하면 사용자들이 자기한테 관심을 보일까 어떻게 하면 한 번이라도 더 클릭하게 만들지가 자기네 회사에는 수익을 좌우하는 요인이 되거든요 그래서 구글이나 페이스북 카톡도 광고시장에 엄청나게 공을 들이고 있는 거겠지요.
서비스마다, 그리고 시기별로 다르지만, 일반적인 비율로 100명의 사람에게 광고를 보여주면 그중에 10명이 해당 광고를 클릭한다고 합니다. 그리고 거기에서 반응하여 실제 구매, 혹은 회원가입까지 이루어진 사람들이 그중에 10%인 1명 정도라고 하지요. 100명에게 광고를 보여줬는데 99명은 이탈하고 1명이 운영사가 원하는 반응을 바로 그 자리에서 보인 것이죠. 이것을 1명이 아닌 2명으로만 만들어도 그 회사는 기존의 성과의 2배가 될 거에요 3명이면 3배 일 거구요. 그렇기 때문에 타겟을 정교화한다던가 광고를 엄청 자극적으로 만들어서 자꾸 사람들이 자신들이 만든 광고를 쳐다보게 만드는 거에요 결국은 소수의 사용자를 끌어들이기 위해 99명의 사용자는 필요하지도 않은 정보를 보게되는 것이죠. (지금은 기술이 많이 발달해서 이 정도 효율보다는 훨씬 좋기는 합니다.)
제공자 입장에서는 사용자를 편하게도 해줘야 하고, 한편으로는 그 사용자에게 계속 이 서비스에 남아있게 하거나 추가적인 수익을 올리기 위한 고민(풍선의 한쪽을 누르면 반대쪽이 커지는…당연하지만 어려운 고민)을 하게 만듭니다.
5. Removing the artificial
(3:05) Removing the artificial
glossy feel view texture
feel like something else. real haptic — vibration = feedback
metaphor → fake — confuse contents
이건 지난번에 이야기했던 스큐어모피즘의 측면이랑 이어지는 내용입니다. 영상에서 어떤 여자분이 — ‘사용자들은 그냥 매끈한 질감의 화면을 만지는 것이다. 하지만 어떻게든 질감을 느끼게 하려고 이미지 텍스쳐를 넣거나 진짜처럼 보이게 하거나 아니면 햅틱 혹은 진동 반응을 넣는다’라고 했어요. 이 부분에서 스큐어 모피즘이랑 조금 다른 것은 여기에 조형의 요소뿐 아니라 햅틱이나 진동반응같이 인터랙션의 요소까지도 사용자에게 더 친숙하게(User — friendly) 다가가고 있는 부분이라 할 수 있습니다. (더 이상의 어포던스 설명은 생략한다)
6. Chrome
(4:14) Contents <-> Chrome
위의 내용에서 연장해서 남성분이 ‘메타포는 훼이크고 컨텐츠는 리얼이다. 이런 식으로 이야기했어요’ 그리고 그 개념을 표현하는 용어로 ‘크롬(반짝반짝한 금속)’을 상징적인 단어로 사용했구요. 다시 말하자면 UI 요소들 중 장식적이고 이목을 끄는 요소들보다는 본연의 내용, 즉 컨텐츠 자체에 집중해라 라는 식으로 표현했다고 생각합니다. 실제로 서비스를 만들다 보면 화려한 효과에 신경 쓰다가 실제 컨텐츠의 가치를 훼손하게 되는 일들도 생기거든요. 물론 여러 효과도 필요하지만 콘텐츠의 본질을 잃지 않는 선에서 구상해야 할 듯합니다.
7. 10년 전의 인터랙션 디자인 <-> 지금의 인터랙션 디자인
(6:54) Past : solving and thinking through kind a choreography information and feedback and interfaces around a product
Now : Human centered ecosystem
과거에는 한 가지의 사물에 대한 인터랙션, 정보전달을 해주면 되기 때문에 제한된 가짓수의 패턴이나 플로우로 대응이 된다면 지금은 단일 사물의 차원을 포함, 사물들 간의 연계성으로도 고려해야 하기 때문에 경우의 수로 대응하기에 부족한 부분이 생깁니다. 가능하다면 사용성 이전에 시스템이나 플랫폼 차원 에서의 대응을 확실히 하고 그 이외의 시나리오들에 대해서 개별 대응을 하는 것이 더 낫겠지요
(하지만, 또 너무 시스템을 건강하게 구축하려다 보면 준비 기간이 오래 걸리기 때문에 가끔은 그냥 땜빵으로 대응하는 것이 더 효율적일 수도 있습니다….)
8. IoT
(7:46) Internet of things
IoT — sensor -> situation
Offline connected to digital world
Fabrics responding to the wat we behave
네 다음은 작년과 재작년에 국내에서 신드롬이었던(..) 사물인터넷입니다. 스마트폰뿐 아니라 집에 있는 모든 가전제품이 인터넷에 연결되면서 엄청난 시너지 효과를 일으키겠다는 기대감에서 많이 회자되던 용어였는데요. 파급력이나 실제 사용수를 보면 아직은 스마트폰의 파급력보다는 느리게, 조금 더 시간을 두고 변화되는 양상을 띠고 있습니다. 아무래도 한 가지의 기기만을 바꾸는 것이 아닌 서로 싱크 되는 여러 가지의 기기들을 다 바꿔야 하기 때문에 이상적인 IoT 환경을 구축하려면 엄청나게 혁신적인 계기가 하나 생기거나 혹은 사용자들의 구매패턴이 지금보다 더 변화되기까지 기다려야 할 필요도 있어 보입니다.
9. 모든 것들의 디지털화
(11:55) people are entering their lives what’s going on around them into a digital format
사물인터넷과도 연관성이 있겠지만, SNS에 사용자들이 자신의 일상을 꾸준히 올리면서 일상에서 접하는 모든, 음악, 영상, 사진 등이 디지털로 변환돼서 축적되고 있습니다. 아직은 1차적으로 이런 컨텐츠를 공유하고 컨텐츠를 통해 소통하는 것에 그치고 있지만. 언젠가는 데이터가 특정 수준 이상으로 활용되어 또 다른 사용성을 발견하게 될 수도 있지 않을까 생각됩니다.
— — -
영상의 후반부에는 인터랙션 디자인의 가치와 효용에 관해 이야기를 하고 있습니다. 결국은 모든 것의 연결이고 그 연결들을 어떻게 활용하는지가 앞으로의 고민거리로 남아있는 듯합니다. 그냥 편한 마음으로 한 번 보세요 :)
다음번엔 UI 요소 중 인터랙션으로 내용을 꾸며서 글을 올리겠습니다.
읽어주셔서 감사합니다 :)
