계속해보겠습니다
모바일 우선주의 본문
--------------------------------------------------------------------------------------------------
* 무엇을 하든 모바일을 먼저 하라
* 생각의 리더십(thought leadership) : 고객이 자신의 욕구나 요구사항을 스스로 말하기 전에,
혹은 자신의 요구사항을 알고는 있지만 겉으로 표현할 줄 모를 때 "당신이 원하는 것이 이것이지요"라고 먼저 제시하는 것
* 모바일을 가장 먼저 생각하고 디자인하는 것은 성장을 위한 새로운 기회를 여는 열쇠이자
웹사이트나 애플리케이션의 사용자 경험(user experience)을 전체적으로 향상시킬 수 있는 원동력입니다.
#2. 제약
* 디자인이란 세련된 해결책이 나올 때까지 지속적으로 제약 사항을 적용해가는 과정이다.
* 고객과 비지니스에 가장 중요한 기능과 콘텐츠가 무엇인지 동의할 수 있다면 화면 크기가 커진다고 해서 우선순위가 바뀔 이유는 없을 것입니다.
* '한쪽 눈과 한쪽 엄지'를 고려한다면
여러분은 이 모든, 혹은 이보다 더한 상황에서도 사람들이 쉽게 사용하고 이해할 수 있도록 모바일을 위한 디자인을 단순화할 수 밖에 없습니다.
* 데스크톱이 '다이빙diving' 이라면 모바일 기기는 '스노클링snorkeling'
* 먼저 작은 화면 크기는 고객과 비지니스를 위해 정말 중요한 것이 무엇인지 우선순위를 정하도록 압박합니다.
쉽게 말해 다른 게 들어갈 만한 공간은 없다는 거죠.
다음으로 느린 접속과 제한된 데이터 요금제에 대비하여 성능 향상에 공을 들이다 보면, 여러분의 웹 사이트는 어디서나 빠르게 잘 돌아갈 것입니다.
#3. 기능
* 가장 중요한 기회는 사람들의 필요에서 비롯되는 것이지, 특정한 하드웨어 기능에서 비롯되는 것이 아니라는 점도 꼭 짚을 필요가 있겠습니다.
기술력은 우리의 욕구를 새롭고 흥미로운 방법으로 충족시킬 수 있도록 돕겠지만,
단지 우리가 기술력을 제공할 수 있다는 이유만으로 무언가를 만드는 일은 대부분 고객에게 별 도움이 되지 않습니다.
* 모바일 기능
ㅇ 방향 탐지 : 전자 나침반 이용
ㅇ 자이로스코프 : 360도 움직임 감지
ㅇ 오디오 : 마이크로 입력, 스피커로 출력
ㅇ 비디오와 이미지 : 캡쳐하거나 카메라로 입력
ㅇ 듀얼 카메라 : 기기의 앞뒤에 장착
ㅇ 기기 연결 : 블루투스(Blutooth) 이용
ㅇ 근접 : 물리적 대상에 대해 기기가 갖는 근접성
ㅇ 희미한 빛 : 밝은/어두운 환경 인지
ㅇ NFC : RFID 리더기를 통한 근거리 무선통신
#4. 구성 방식
* 모바일 웹 경험의 구성
ㅇ 탄탄한 정보 설계(information architecture)
ㅇ 명확한 레이블링(labeling)
ㅇ 균형잡힌 넓이(breadth)와 깊이(depth)
ㅇ 적절한 인지모형(mental model)
ㅇ 사람들이 모바일 기기를 사용하는 방식과 이유에 맞춰 조정할 것
ㅇ 내비게이션보다는 콘텐츠를 강조할 것
ㅇ 탐색/피봇(pivot) 을 위한 관련 옵션을 제공할 것
ㅇ 명확성과 목적성을 유지할 것
* 모바일 기기를 사용하는 전형적인 방식과 그 이유
ㅇ 검색/발견(긴급 정보, 지역) : 나는 지금 어떤 것에 대한 대답을 얻어야 한다. 이 대답은 나의 현재 위치와 연관된 경우가 많다.
ㅇ 탐색/놀이(심심해, 지역) : 나는 지금 여유 시간이 좀 있고, 이 한가한 시간에 머리를 좀 식히고 싶다.
ㅇ 접속/상태(반복/마이크로태스킹) : 나는 항상 중요한 무언가를 업데이트하고 수정한다.
중요한 정보들이 게속해서 바뀌거나 업데이트되기 때문에 이를 수시로 잘 파악하고 싶다.
ㅇ 편집/작성(긴급 변경/마이크로태스킹) : 나는 어떤 일을 지금 완수해야 하고, 시간이 없다.
** 조쉬 클라크(Josh Clark) : 마이크로태스킹(micro-tasking) / 근처에 뭐가 있을까(i'm local) / 나는 심심하다(i'm board)
** Google : 지금 급해(urgent now) / 지금 반복 중이야(repetitive now) / 지금 심심해(bored now)
#5. 작동 방식
* 터치 기반의 사용자 인터페이스 디자인
ㅇ 터치 대상의 크기와 위치가 적절하도록 조절할 것
ㅇ 일반적인 터치 동작을 익히고 어떤 목적에 어떤 터치 동작이 사용되는지 알아둘 것
ㅇ 호버 기반의 상호작용을 할 수 없는 상황에 대처할 것
ㅇ 간접 조작 방식도 항상 존재한다는 사실을 망각하지 말 것
#6. 입력 방식
* 웹의 위력이 비롯되는 원천을 찾아보자면, 사람들이 단순히 콘텐츠를 보고 소비할 수 있다는 것뿐만 아니라
직접 참여하고 콘텐츠를 만들 수 있다는 점도 간과할 수 없습니다.
모바일 기기의 입력 방식(input)은 모바일을 이용해 만들어낸 결과물(output)만큼이나 중요합니다.
* 모바일 입력 방식
ㅇ 사람들이 영감을 얻을 때마다 언제든지 그리고 어디서든지 기여하고 창조할 기회로 모바일을 생각하세요.
ㅇ 명확하게 질문하기 위해 모바일에 최적화된 레이블을 사용합니다.
ㅇ 입력 형식과 속성, 마스크(mask)를 이용해 모바일에서 입력이 더욱 쉬워지도록 만들어봅니다.
ㅇ 순차적인 양식, 비선형적인 양식, 문맥 내의 양식에 꼭 맞는 레이아웃을 선택합니다.
ㅇ 모바일 기기의 성능을 이용해 입력 영역 이상의 기회를 찾아봅니다.
* 자동 대문자 기능 : 이메일과 암호, URL 등 대/소문자에 민감한 영역에서는 이 기능을 꺼둡니다.
이름이나 지명과 같은 고유명사가 들어갈 자리라면 켜두세요.
* 자동 완성 기능 : 이메일과 암호, URL을 등 알파벳을 입력할 때에는 이 기능을 꺼둡니다.
텍스트 영역이나 자유 양식 입력란에서는 이 기능을 켜둡니다.
자동 완성 기능을 통해 발생할 수 있는 '쓰레기 공백 문자(trailing space)'를 잘라내세요.
* 모바일 서식에 관해서라면 무자비할 정도로 효율적으로 잘라내고, 잘라내고, 또 잘라내야 합니다.
#7. 레이아웃
* 모바일 레이아웃
ㅇ 모바일은 당분간 무서우리만치 빠른 속도로 변할 것이라는 사실을 받아들이세요.
ㅇ 모바일 브라우저에 꼭 맞는 디자인을 만드세요.
ㅇ 유연하고 가변적인 반응형 레이아웃(responsive layout)을 만드세요.
ㅇ 디바이스 경험들 간의 경계를 명확히 하세요.
ㅇ 가능한 한 최소한의 양으로 줄이세요.
* 디바이스 경험 : 각 기기를 경험할 때는 그것만의 고유한 특징이 있습니다.
ㅇ 사용자의 일반적인 자세 : 3m 길이의 소파에 기대 앉기, 책상에서 장시간 사용하기, 간단한 소파나 침대 이용하기,
어느 때나 다양한 곳에서 갑자기 사용하기
ㅇ 주된 입력 방식 : 리모트 컨트롤/동작, 마우스/키보드, 터치/센서, 키패드
ㅇ 평균 디스플레이 크기 : 벽 크기, 책상 크기, 무릎에 올라갈 만한 크기, 손바닥 크기 혹은 그보다 작은 크기
* 반응형 웹 디자인, 유연한 인터페이스 그리고 디바이스 경험에 최적화된 경험 디자인을 올바르게 결합하세요.
그러면 여러분의 모바일 웹 경험을 지금의 모바일 기기는 물론이고 더 많은 기기에서 잘 작동되도록 할 수 있습니다.
* 줄이는 것이 여러분이 모바일에서 사용할 수 있는 최고의 레이아웃이라는 것입니다.
* 여러분이 만든 모바일 레이아웃 전반에 걸쳐 필요한 것의 최소한으로 가져가는 것을 목표로 하세요.
그래야 사용자들이 자신이 필요로 하는 것을 쉽게 얻을 수 있습니다.
* 이렇게 줄이고 또 줄이면 모바일 레이아웃을 쉽게 만들 수 있고, 사용자에게 작업에 집중할 수 있는 방법을 제공할 것입니다.
# 맺음말
ㅇ 모바일 인터넷 사용이 급증하고 있는 상황을 기회로, 사람들이 우리의 웹사이트와 애플리케이션에서 사용할 수 있는 새로운 방법을 찾아보세요.
ㅇ 모바일 기기의 제약사항을 받아들이고, 우리가 디자인해 구축하고 있는 서비스의 집중 우선순위를 정하세요.
ㅇ 완전한 고객 경험을 혁신하기 위해 모바일 기기가 가진 기능을 활용하세요.
ㅇ 웹디자인에 대해 이미 알고 있는 것을 기반으로 모바일의 구성 방식과 작동 방식, 입력 방식과 레이아웃에 대해 새롭게 생각해보세요.
ㅇ 할 수만 있다면 여러분이 만든 디자인과 코드를 실제 모바일 기기에서 점검해보세요.
시뮬레이터와 데스크톱 브라우저가 실물을 대체할 수는 없습니다.
ㅇ 다양하고 많은 모바일 기기를 다 손에 넣을 수 없다면 근처에 있는 모바일 기기 매장에 가서 전시품으로라도 모바일 웹 경험을 해보세요.
ㅇ 첫째도 프로토타입, 둘째도 프로토타입, 셋째도 프로토타입입니다.
여러분이 모바일 웹 경험을 빨리 하면 할수록 실제 상황에서 어떻게 작동하는지 더 빨리 알게 될 것입니다.
ㅇ 작게 시작하는 걸 두려워하지 마세요.
모바일의 모든 것을 알아야 할 필요는 없습니다. 현재 알고 있는 것을 확실히 챙기고, 시작하세요.
--------------------------------------------------------------------------------------------------
지금은 너무나 당연한 이야기지만,
2013년에 읽었다면 새로웠을 이야기.
간결하고 명확하게, 논리적인 설명 방식이 좋았다.
'Book Reviews' 카테고리의 다른 글
| 왜 나는 너를 사랑하는가 (0) | 2015.08.01 |
|---|---|
| 글쓰기 더 좋은 질문 712 (0) | 2015.07.23 |
| 여전히 두근거리는 중 (0) | 2015.07.19 |
| 내 옆에 있는 사람 (0) | 2015.07.15 |
| Visual Thinking으로 하는 생각 정리 기술 (0) | 2015.07.13 |