UI 브리핑 : 1화 - 정보의 관점에서 바라보는 UI
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이번 방에서부터는 초심자라는 제한없이. 제가 중요하다고 생각하는 UI / 디자인 관련 주제를 하나 잡고서. 연관된 컨텐츠를 쭉 이어나가는 형식으로 자료를 풀어서 이야기해드리는 쪽으로 가보겠습니다.
정보정리의 관점에서 볼 때. UI는 사용자가 필요로하는 정보를 명확하게 정리하고. 곧바로 확인할 수 있게 해주는 역할을 합니다. 그렇기 때문에 각각의 정보가 어떤 식으로 서로 연결되어있고. / 어떤식으로 연관된 정보들을 묶어놓는지에 따라서. 다른 결과를 만들어내죠.
https://brunch.co.kr/@clay1987/106
기존에 올려드린 자료를 보시면 아시겠지만. 인간의 눈은 보이는것을 그대로 바라보는게 아니라. '보이지않는 무언가'를 머리속에 떠올리고. 그 대상을 바라보려하는 습성을 갖고있습니다.그것이 게슈탈트 이론이 말하는 인간의 '시각과 인지'의 영역인데요. 해당 글에 있는 내용은 대부분의 시각적인 '동일성'과 '레이아웃'의 기초적인 핵심을 이야기해주고있습니다.
크게 색이 같거나. 통일성있는 면적이나, 형태를 갖거나. 가까이에 인접해있거나. 간격이 비슷하거나. 움직이는 형태가 비슷하거나 등의 기반으로 - 서로 ' 동일한' 집단이라고 인식을 하게됩니다. 그중에 우리에게 가장 익숙한건 색일겁니다.위의 네트워크 선을 예로 들어드렸듯이. 사실 '색'과 간격은 대부분의 오브젝트들을 -동일한 그룹'으로 인식하게 만드는 가장 강력한 방법중 하나입니다. 그래서 보통 UI 디자인에서는 한두가지 색상을 갖고 메인 색상 / 서브색상으로 사용해 여러 곳에 배치 / 변형하는 형태로 UI를 만들어내는데요
색상과 면적만 갖고도 왠만한 레이아웃의 구분이 가능하고. 이런 커다란 틀의 레이아웃 그려내기가 가능하다는것. 그리고 이것이 디자인의 핵심중 하나라는걸 기억해두셨으면 합니다. 여기에서 다시. 네트워크 선의 사례에서. 재미있는 실제 디자인 사례를 소개해드리겠습니다.
https://medium.muz.li/burgas-public-trasportation-map-redesign-aeb8f24135eb
이 내용은 불가리아의 지하철 노선도를 개선한 디자인 리뉴 얼 사례입니다. 그 기반으로 뉴욕의 지하철 노선도 디자인 을 따왔는데. 아까 우리가 위에서 이야기했던. 네트워크 선정리.의 관점에서 보면
이런 시안들 역시도 그저 색이 여러가지인 선의 정리일 뿐임을 알 수 있습니다. 지리학적 정보나. 비례, 노선명 같은건 일단 잊어버리시고. 색과 면적만을 생각했을 때. 색을 사용하는건 가장 확실한 구분법이라는걸. 여기에서도 알 수 있죠. 실제로 지도 UI를 만들거나. 축소된 지역지도를 만들때 / 혹은 좌석이나 예약 시스템 등을 만들 때에도 색상은 자주 사용됩니다.
분명 색상이란건 - 강력한 툴이지만 동시에 - '각자의 목소리가 모두 강력한. 주인공 역할을 하려고 하기 때문에.' - 무엇이 가장 중요한지를 알기가 힘들어진다는 단점이 있습니다. 정리된 정보임에도 불구하고 - 또다시 열몇개의 노선 색상들 중에. 우리가 원하는 색상을 정확히 확인하거나. 그걸 따라가기는 힘들어지는거죠
마찬가지로 한국 / 서울의 지하철 노선도도 마찬가지입니다. 지역이 넓어지고. 색상이 다양해질수록 - 확인해야할 정보의 밀도는 높아지고. 색상은 여러가지라 - 단순한 인쇄물에서는 - 주인공이 누구인지를 확실하게 잡을 수가 없죠. 마치 정보의 관점에서. 1.2.3등으로 여겨지는 중요한 정보만을 갖고도. 핵심적인 전달이 가능한 한줄요약과. 100장짜리 논문을 읽는 것과 마찬가지입니다. 대부분의 UI 디자인이나 / 학원 / 학교들에서는 이런 부분을 '시각적인 혼잡함'으로만 바라보지만. 저는 이 부분을 모두 정보의 관점에서 바라봐야한다고 생각합니다. 색의 갯수나. 텍스트의 갯수. 밀도와 면적 모두 정보이고. 사용자에게 필요로하는 것들만을 보여주게하기위한 것이 UI 요소들인것이죠.
그래서 등장하는 것이 이런 필터링 / 조건부 서식 UI 요소들입니다. 기본적으로 DB (데이터베이스). 정보의 뭉치들에는 시점이나 '주인공을 선택할 수 있는 똑똑한 지성'이 없습니다. 그렇기에 사용자에게 '무엇을 찾고싶은지'를 묻는것이고. 그래서 UI가 필요한 것인데. 이런 '사용자 선택에 의한 결과값'은 흔히. 검색엔진이나. 온라인 판매점 등의 서비스에서 확인하실 수 있습니다.
다만 요즘에는 데이터 과학 / 머신러닝 등의 개념등이 굉장히 발달해서. 개별 정보들을 그냥 단순히 몇가지 카테고리 - 대분류 중분류 소분류 등으로 나뉘는것이아니라. 개별 태그로 정리 / 연결해서. 사용자가 관심을 가질만한 컨텐츠를 연결해서 - 보여주는. AI 형태의 서비스가 많이 늘어나면서. 단순 사용자선택형UI가 '당연하지 않아지고있는' 상황입니다.
예를 들어서 spotify같은 서비스의 경우. 사용자가 들었던 음악의 분류와 연관된 상세 채널들을 수백개정도 만들어놓고. 연관된 카테고리를 점점 더 세세하게 - 자동으로 추천해줍니다. 그 과정에서 세세한 사용자들의 관심사나. 즐겨찾기. 개별 저장된 음악등을 참고해서. '해당 아티스트의 팬들인 사람들을 위한' 채널을 따로 연결해주기도하죠.
넷플릭스의 경우도 마찬가지로 - 컨텐츠에 대한 정보를 개별적으로 태그화시켜놓고. 이걸 다시 - 사용자의 소비패턴에 맞게 연결해줍니다. 그래서 어찌보면 원하는 정보를 정확하게 알고있는 경우는 -검색을 통해 연결시키고. 그렇지 않은 경우는 '유명한 / 커다란 카테고리'에서 점차 세부적으로 파고들어가는 취향을 확인해나가죠. 결국에는 '어떤 방식으로' 사용자가 원하는 정보를 최대한 좁혀서. 제공할 것인가가 - UI와 설계. 정보정리에 있어서는 항상 커다란 숙제입니다.
https://brunch.co.kr/@clay1987/115
세부적으로는 데이터 테이블에 대해서도 - '어떻게해야 사용자가 알아야하는 내용을 모두 담고있으면서. 원하는 내용만 모아서 확인하게 할 수 있을지.를 고민해야하는 영역인것이죠.
네비게이션. 메뉴영역 또한 마찬가지입니다. 사용자가 무엇을 원할지는 알 수 없기 때문에. 모든 데이터를 - 분류해놓고. 정리해놓는 형태의 UI들이 계속해서 발전해왔고. 그중 대표적인 것이 megamenu (메가메뉴)라고 불리는 형태입니다. 이처럼 처음부터 확 다 펼쳐놓는 구조도있고.
드롭다운에서 다시 펼쳐지는 형태도 있죠. 보기에는 단순해보이실수도 있습니다마는... 네이버나 준 포탈급의 서비스가 갖고있는 메뉴구조를 리뉴얼한다고 생각해보세요. 어떻게 나누고. 무엇을 가리고. 무엇을 보여줘야할지를 - 고민하게되는건 당연합니다. 그래서 등장하는 것들 중에 하나가. 바로 메뉴 구조 자체의 커스터마이징입니다. 사용자가 원하는 / 필요로하는 정보를 아예 맘대로 설정할수있게 하는거죠.
2017년에 이뤄졌던 네이버 PC 디자인의 개편이 그러했고.
수많은 컨텐츠들 중에 다시 모바일 버전에서는 -더욱더 선택과집중. 필요없는 정보를 줄여나가고. 사용자가 원하는 것들만을 보여주기위한 구조가 필요했죠. 심지어 이제는 무엇을. 선택하고. 어떤 행동을 할지조차 단축화되고. 음성입력이나 / 습관적 사용을 기억해서 서비스가 자동으로 연결해주는 시대가 오고있습니다.
https://www.youtube.com/watch?v=pKVppdt_-B4
구글 iO 2018에 공개되었던 AI기반 예약 전화서비스입니다. 영어기반이긴 하지만. 조건부 입력에대한 - 예약 /전화 / 확인까지 모두 자동으로 진행하죠.현재 - 주제별로 서비스들을 모아놓고. 버튼 몇번 클릭으로 서비스를 예약하거나. 서비스 실행까지 연결시켜주는 중간 단계의 서비스들은 많습니다. 다만 이런 혁신적 기술들이 등장함에따라 UI디자인은 신규기술에 대해서 확인 / 대비하고. 그것에 맞는 신규 UI나, 구조에 대해서 고민을 해야하죠. 정보의관점에서 보면 이런 '단계의 단순화'와 '정보의 축약 / 습관화 / 패턴화'는 당연한 과정이고. 이걸 크게 나누면 서비스와 기획 / UI와 입출력화면 정도로 나눌수있을듯 합니다.
https://brunch.co.kr/@clay1987/96
여기에 관련된 것이 제로 UI. 정확히는 '더 압축되고 - 패턴화된. 다양한 입력장치를 지원하는 UI라고 봐야겠죠. 이런 큰 흐름을 이해하지 못한 상태에서. 단순히 '겉을 아름답게 만드는 사람'은 디자이너라기보다는 시안제작자의 수준에서 머무를 가능성이 높습니다.
https://brunch.co.kr/@clay1987/95
그래서 더욱더 이런 기술관련된. 무엇이 왜 중요하고. 그래서 우리는 무얼 알아야하는지. 그걸 확인하는게 중요하죠. 그 이후가 시안과 규격. UI의 통일성이나. 개별 정보요소들을 예쁘고 정리하는법 등의 실제 고민이 필요한 부분들이고. 이러한 기술적인 부분들은 - 사실 1~2년정도. 모작과 구조/설계분석 정도만 꾸준히 해도 충분히 현업 수준이 됩니다. 앞으로의 UI 관련 연구들은. 이런 큰 틀에서. 기술트렌드와 / 구조및 설계 / 개별 UI 컴포넌트의 사용사례 / 웹서비스, 게임을 넘나드는 UI 비교분석 / 개별 UI 컴포넌트를 정리하는법 등의 이야기를 쭉 이어나갈 예정입니다.
아주 기초적인 부분에대해서나 / 완전초심자에 가까우신 분이라면. 이 글을 읽어보시길 추천합니다.
https://brunch.co.kr/@clay1987/108
오늘 이야기를 정리해보면 다음과 같습니다.
1. UI는 정보에 다가서기위한 도구입니다. 그렇기에 시각적인 부분 이전에, 정보의 관점에서 바라보는 것이 중요합니다.
2. 기존 UI들이 어떤식으로 사용자에게 필요로하는 결과물을 내어주었었는지. (카테고리와 메뉴를 통한 필터링 / 데이터베이스, 메뉴구조, 검색기능)
3. 앞으로의 UI는 어떤 식으로 변화할지. (음성인식과, 사용패턴 및 습관 저장을 통한 자동추천 등)
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
