도서 | 하루 5분 UX (9-1)
제9장: 와이어프레임과 프로토타입
Lesson 57: 와이어프레임의 개념
우리가 '건축가'라면 와이어프레임은 '설계도'에 해당한다.
와이어프레임은 기술 문서다.
문서에 들어가는 것은 라인과 박스, 라벨, 간혹 한두 가지 색상, 그것이 전부다.
만약 당신의 와이어프레임이 다른 개발자나 디자이너가 그대로 가져다 쓸 수 없는 상태라면 그것은 와이어프레임이 아닌 그저 스케치다. 계속 작업하라.
Lesson 58: 와이어프레임이 아닌 것은
와이어프레임은 기획서가 맞다. 이것으로 문제점을 미리 발견할 수 있다.
1. 기본 스케치가 아니다
와이어프레임은 디자인을 배제한 것이다.
웹 사이트 혹은 애플리케이션이 어떻게 작동할지를 보여주는 것이 중요하다.
초기 컨셉트와 생각은 와이어프레임이 아니라 글과 사진으로 설명해야 한다.
2. 좋은 와이어프레임은 시간이 걸린다
모든 링크는 목적지가 필요하다.
또 모든 페이지는 그 페이지로 갈 수 있는 링크가 필요하다.
모든 버튼은 사용자가 필요하다고 생각하는 곳에 배치되어야 한다.
와이어프레임은 90%의 생각과 10%의 도안으로 이루어진다.
모든 사람이 90%의 필요성을 존중하게 하라!
3. 과정으로 존재하지 않는다
와이어프레임이 완성되지 않았다면 그건 문제가 풀리지 않았거나, 체계화되지 않았거나, 작동하지 않았거나, 사용하기 어렵거나, 무언가 빠졌다는 의미다.
고객이나 상사에게 아직 준비가 되지 않았다고 말하는 것을 두려워하지 마라.
완성되지 않은 와이어프레임을 가지고 일을 시작하는 것은 참사를 예약하는 것과 다를 바 없다.
4. 진지하게 다루어져야 한다.
큰 프로젝트일수록 와이어프레임 작업에 충분한 시간을 들여야 한다.
개발자들이 버튼의 용도를 묻지 않아도 되도록 각 페이지의 모든 요소에 라벨을 붙이고 설명을 달아야 한다.
5. 보여주기 위한 것이 아니다
와이어프레임에 잔뜩 멋만 부린 사람은 자신의 일을 존중하지 않는다는 사실을 알아차릴 수 있다.
분명 기술적인 목적이 있는데 고객이나 상사에게 잘 보이려고 그저 예쁘게 만드는 데 집중한 것이다.
Lesson 59: 툴이 아닌 기술을 배워라
상황에 적합한 툴을 사용하라
이건 예술 작품이 아닌 와이어 프레임이다!
쉽고 저렴한 방법으로 프로젝트를 다룰 수 있는 가장 단순한 툴을 찾아 사용하라.
최고의 솔루션을 디자인하라
때로는 연필과 종이가 가장 좋은 와이어프레임 툴이 될 수도 있다.
어떤 디자인을 하든 소프트웨어가 가진 기능에 기반한 것이 아닌, 당신이 필요한 솔루션에 기반한 디자인을 해야 한다.
언제나 원하는 것을 먼저 디자인해 본 뒤 이를 기술적 문제로 옮겨줄 와이어프레임을 찾아 사용해야 한다.
Lesson 60: 다양한 상황을 고려하라
당신의 디자인이 90%의 사용자에게만 잘 통한다면 그건 잘못된 것이다.
텍스트가 짧다면?
모든 사람이 일반적인 행동을 할 거라고 생각하고 싶은 마음은 이해하지만 창의력이 넘치는 사람이, 독특한 발상을 좋아하는 사람이 엄연히 존재한다.
EX 핀터레스트
사람들은 보통 마침표만 찍고 설명 페이지를 생략한다.
만약 사용자가 그 짧은 텍스트를 눌러야 기사를 볼 수 있다면 그들은 마침표 하나를 클릭하려고 애를 써야 할 것이다.
아무것도 존재하지 않는다면?
사용자가 아직 아무것도 게시하지 않은 상태라면 페이지가 어떻게 보이는가?
이를 비워둔 채로 두지 마라. 아무것도 없는 상태 또한 디자인해야 한다.
누군가가 삭제했다면?
어떤 사용자가 한 웹사이트로 연결되는 링크를 공유했는데 그 페이지가 사라졌다면?
사용자들이 그 링크를 방문하면 무엇을 보게 되는가?
최악의 시나리오는?
대부분의 사용자가 어떻게 행동할지 생각하지 마라.
사용자가 디자인을 가장 잘못된 방법으로 할 수 있는 경우를 상상해야 한다.
사용자가 입력할 수 있는 글자 수를 제한하라.
제목만 있든, 제목은 없고 내용만 있든, 보기 좋게 디자인해야 한다.
포스트를 삭제할 수 있는 버튼을 없애거나, 글이 너무 길어질 때는 생략부호를 사용하는 것도 방법이다.
사용자가 최초의 콘텐츠를 수정하는 경우에는 글이 수정되었다는 사실을 다른 사람들이 알 수 있도록 작은 메모를 추가하라.
그러고 난 후에는 디자인을 비정상적이고 보기 싫은 이미지들로 테스트해야 한다.
Lesson 61: 디자인 패턴
많이 사용한다고 좋은 디자인인 것은 아니다
좋은 디자인 패턴이 되기 위해서는 솔루션이 일방적이고 사용하기 편해야 한다.
어떤 디자인 아이디어는 UI 디자이너가 어려운 기능들을 무시하고 게으르게 사용할 수 있게끔 해준다는 이유로 인기를 얻기도 한다.
"그렇게 하지 말라고, 바보야."
/ 제시 핑크맨
Lesson 62: Z-패턴, F-패턴, 시각적 계층
사용자가 스캐닝, 즉 훑어본다는 것은 특히나 눈길을 끄는 무언가가 있을 때 멈춰 읽는다는 것이다.
Z-패턴
이러한 레이아웃에서는 Z-패턴 근처에 있지 않은 내용은 전혀 관심을 끌지 못한다.
처음부터 끝까지 빈틈없이 활자로만 채워진 신문의 한 지면, 하나의 이야기, 헤드라인 없는 글, 인용구 없는 글...F-패턴
사람들의 시선 이동
왼쪽 상단 > 오른쪽 상단 > 왼쪽 하단 > 오른쪽 하단 > 중간에 무작위로 배치된 다른 것들
각각의 콘텐츠 '블록'과 열이 독립적으로 F-패턴을 형성할 수 있다는 점을 알아두면 유용하다.
한 페이지에 F-패턴이 하나일 필요는 없다.
시각적 계층
타이포그래피를 사용해 텍스트의 중요성을 강조하고, 특정 색상을 이용해 중요 이미지에 시각적 무게감을 더하는 방법은 시각적 계층을 만들어 사람들이 재빨리 스캔할 수 있게 해 준다.
우리의 눈은 중요한 것에서 다른 중요한 것으로 건너뛰는 식으로 사물을 보지, 로봇처럼 스캔하지 않는다.
시각적 계층이 만들어 내는 효과를 심미적인 이유로 좋아하지만,
사실은 스캔이 더 쉬워지기 때문에 좋게 느껴지는 것이다.
Lesson 63: 페이지 프레임워크
와이어프레임을 페이지마다 하나씩 만들고 싶겠지만 그러지 마라!
EX
만약 당신이 집을 짓는다면 가구와 방을 생각하기 전에 벽을 세울 것이다.
큰 부분을 먼저 하고 세밀한 부분을 채워야 한다.
큰 부분: 모든 페이지에 들어가는 내비게이션이나 푸터같은 구성요소들.
푸터
정적인 페이지로 연결되는 링크의 목록.
푸터는 주로 메인 내비게이션에 위치하기에는 너무 일반적이고 사소한 내용이라 페이지 측면에 자리한다.
'끝없이 스크롤해야 하는 페이지가 하나라도 있는가?'
만약 그렇다면 푸터 안에 있는 모든 항목은 다른 곳에도 있어야 한다.
언어 변경 메뉴가 푸터 안에 있는데 언어를 바꾸려고 할 때마다 끝없이 밑으로 내려가야 한다면 대단히 잘못한 것이다.
내비게이션
메인 메뉴
홈페이지 바로 아래에 위치한 첫 번째 레벨의 링크들.
순서: 왼쪽 → 오른쪽, 상단 → 하단, 인기 있는 것 → 인기 없는 것
서브 메뉴
어느 페이지에 있는 '하위'에 존재하는 페이지들의 목록.
중요한 점은 링크가 늘 바뀌더라도 서비 메뉴가 모든 페이지에서 항상 같은 위치에 있어야 이상적이다.
하나의 메뉴에 모든 것을 담지 마라
누군가 자기가 디자인한 메가 메뉴가 실현 가능한 최상의 아이디어라고 이야기 ㅎ나다면, 그건 사실 인포메이션 아키텍처(그리고 정보 설계자)가 형편없다는 뜻이다.
콘텐츠를 채우기 전에 애플리케이션에 있는 모든 페이지와
화면에 들어가는 내비게이션과 푸터를 만들어놓아라.
