평소에 UI UX에 관심이 있던지라 UX관련 책을 지인에게 소개 시켜달라고 했더니 콘텐츠UX디자인 이라는 서적을 추천받았다. 디자인하시는 분들에게는 교과서라고 불린다고 해서 호기심에 구입하고 읽어보았다. 이 책은 90년대 2000년대 초반의 닷컴 붐에 따른 난잡한 디자인으로 망가진 웹사이트들을 예시로 들며 이야기하고 있는데, 모바일 퍼스트인 지금의 유행과는 다소 방향이 다르다고 볼 수 있다.
모바일은 PC웹화면과는 다르게 해상도가 작고 다양한 인터페이스를 활용할 수 있다. 그러나 기본적인 사용자의 특성이나 콘텐츠를 인지하는 방향은 현재와 같으므로 이를 기초로 습득, 변형하여 활용이 가능할 것으로 보인다.
개발자인 나로서는 디자이너보다 UI/UX적인 지식이 떨어질 수도 있고, 바라보는 방향이 다를 수도 있다는점을 참고하면서 UI & UX 카테고리의 블로그 포스팅을 읽으면 좋을 것 같다. (잘못된 지식이나 의아한점은 언제든지 댓글로 남겨주세요~)
사람들은 콘텐츠를 보기 위해 웹사이트에 간다.
대부분의 사람들은 사이트에 가서 목적을 달성하고자 한다.
그림. 현실세계에서는 다소 여성과 남성의 목적달성방법이 다르다. 그러나 웹에서는 곧바로 목적을 달성하기를 원한다.
"몇 초 안에 보이지않으면 나가버립니다." "일일이 읽게 만들지 마세요" 와 같이 대부분의 웹 사용자들은 바로 목적을 달성하기를 원한다. 가끔 웹사용자가 읽기도 하지만 그런 읽기가 실용적인지 생각해야한다.
그래서 이 책의 저자가 말하는 것은 좋은 웹의 글은 대화와 같다 라는 것이다. 웹사용자가 원하는 것을 바로 찾아줄 수 있는 아주 편하고 친절해야하며, 통일성이 있어야 하며, 구독성이 좋아야 한다 라는 것이 핵심이라고 볼 수 있다. 또한 더 나아가서 웹사이트가 UI/UX를 적절히 접목시키면 원하는 대답을 얻을 수 있다는 점도 매우 인상깊었다. 아래 웹사이트 두개를 비교해보면 더 이해가 쉬울 것 같다.
스크린샷. 90년대 apple 홈페이지
스크린샷. 2017년 6월의 apple 홈페이지
책에 나와있는 내용을 모두 적을 수는 없겠지만 90년대 apple홈페이지와 2017년 6월의 apple 홈페이지를 비교해보면 아래와 같은 차이점으로 정리할 수 있다.
1. 메인 페이지는 이 사이트가 어떤 곳인지 감을 잡게 한다.
모든 웹사이트는 서로 다른 개성을 지니고 있다. 사이트 개성은 "브랜딩"의 한 부분이다. 사기업이든 공공 기고나이든 웹 사이트에는 "회사의 이미지", 즉 브랜드가 반영돼야 한다. 웹사이트는 회사가 세상에 보여지는 얼굴이라고 볼 수 있다. 90년대의 홈페이지를 보면 어떤 회사인지 바로 감이 오지 않는다. 컴퓨터 판매 회사인가? 전화기? 혹은 BMW마크때문에 자동차 회사라고 오해할 수도 있겠다. 그러나 2017년 6월의 홈페이지에서는 애플이 어떤 회사인지 누가 말하지 않아도 곧바로 알 수 있다.
2. 검색창은 방문자가 흔히 예상하는 위치인 상단에 둔다.
사용자 경험에 따르면 사용자는 검색창 위치가 상단 중앙 또는 우측에 있다고 당연히 생각한다고 한다. 90년대 홈페이지는 검색창(input 태그)가 없을 뿐더러 버튼으로 되어있으며, 좌측 상단에 있다. 그러나 2017년 6월의 페이지는 매우 모두가 예상하는데로 우측 위에 있으며 돋보기 버튼을 누르면 아래 스크린샷과 같이 예상질문과 함께 사이트를 이동시키지 않으면서도 검색에 집중 가능하도록 도와준다.
스크린샷. 2017년 6월 홈페이지에서 검색을 눌렀을 경우 나타나는 창. 검색 외 부분이 dimmed 처리 되고 검색에 집중하도록 도와준다.
3. 어떤 링크를 클릭해야 하는지 궁금하게 만들지 말라.
90년대 홈페이지도 각 메뉴링크의 이름을 붙이는데 고민을 많이 한 흔적이 보인다. 제품을 팔지만 또한 고객을 상대하고, 개발자에게도 도움을 주는 것을 아우르다보니 정작 판매하는 물건에 대한 정보를 찾아가려면 "Product information" 이라는 딱딱한 이름의 카테고리에 들어가서야 볼 수 있다. 반면에 2017년 6월의 홈페이지는? 소비자가 원하는 무었이든 클릭한번에 찾아 갈 수있다.
4. 문서가 아닌 정보를 만들어라.
사실 반응형 웹페이지라는 주제가 나온지는 그리 오래되지 않았다. 긴 문서로 되어 있는 웹페이지는 작은 해상도의 화면에서 정보를 찾는 사용자가 불친절하다고 느낄 수도 있다고 책에 나온다. 반응형 웹페이지가 대세가 되면서 작은 해상도의 화면에서는 아래 스크린샷과 같이 반응형으로 동일 사이트가 변형되는 것을 볼 수 있다. 이를 통해 사용자는 모바일 웹과 같이 작은 해상도에서 웹사이트를 들어가더라도 카테고리의 내용과 순서가 같기 때문에 어렵지 않게 웹사이트를 사용가능할수 있음을 알 수 있다.(친절한 웹사이트)
스크린샷. 똑같은 웹사이트지만 해상도에 따라 디자인이 변형된다. 웹사이트 디자인이 변경됨에도 불구하고 카테고리의 내용, 순서는 동일하다.
5. 핵심부터 써라. 역피라미드 형태로 써라.
핵심이 무엇이든 반드시 앞에 놓아야 한다. 많은 사람들은 이 페이지가 필요한지, 사용한지 쉬운지 판단하기 전에 페이지나 단락의 처음 일부분만 읽는다고 한다. 대부분의 웹사이트 사용자가 사이트에서 아래와 같이 읽기 형태를 유지한다고 한다.
스크린샷. 흡사 F모양의 읽기형태와 비슷하지 않는가?(출처 : 웹사이트 아이트래킹 관련 연구 article)
저널리스트나 기술분야의 작가들은 독자가 제목이나 첫 단락을 먼저 훑어 본다는 사실을 안다. 이 대문에 그들은 "역피라미드(Inverted ptyramid)" 스타일로 글을 쓴다고 한다.
사진. 역피라미드형태의 쓰기/읽기 방식(출처 : Inverted pyramid(journalism) at Wikipedia)
2017년 6월 apple의 웹사이트도 마찬가지로 역피라미드 형태로 되어 있음을 확인 가능하다.
스크린샷. 2017년 6월 apple홈페이지 전체 모습
위와 같이 총 5개의 이전 웹사이트와 현재의 웹사이트의 차이점을 개략적으로 비교해 보았다. 이 비교들은 개발자 & 비전공자적인 관점이므로 어쩌면 잘못 됬을 수도 있고 혹은 비약이 있을 수도 있다. 그러나 전체적인 웹사이트 디자인, 그리고 사용자의 접근성에 보자면 위 글에 대해 대부분 동의할 것이다.
이전부터 앱을 개발하고, 웹사이트를 만들면서 소비자에게 서비스를 제공하는데 있어서 필요한 것은 친절함이라고 생각했다. 하지만 디자인 비전공자이며, 개발자 관점에서 친절함은 항상 "이쁜 디자인" 정도로만 생각했지 어떤 점이 다른지, 어떻게하면 친절하게 만들 수 있을 지는 명확히 알수가 없었다.
하지만 이 책을 읽으면서 좀더 이론적으로 UI/UX에 대해 접근하게 된 계기가 된 것 같으며 또한 좀더 사용자 친화적인 디자인에 대해 고민해 보게 되는 시발점이 된 것 같다.
앞으로도 개발자로서 많은 서비스 개발을 진행할 예정이지만, 항상 사용자 입장에서 생각하고 개발하는 UI/UX개발자가 되어야 되겠다고 또 다시 다짐한다.