하란

본문

내가 일하는 진보넷 독립네트워크팀은 5명(어제 일 명 새로 들어옴)으로 구성된 작은 팀으로, 여러가지 일을 나눠서 하고 있다. 주업무는 나눠져 있어도 하는 일이 많이 겹쳐서 나는 기획자이고 디자이너이고 운영자이다. 예전에 기획자를 영어로 뭐라고 하나 이리저리 알아봤는데 양키들은 그냥 디자이너라고 통일하는 것 같다. 기획을 디자인이라고 번역하기도 하던데 웹디자인을 좁게 그래픽만이 아니라 컴퓨터와 인간이 작용/반작용(인터랙션)하는 과정을 포괄하는 걸로 보면 내가 하는 일을 웹디자인+운영이라고 해도 무리가 없겠다.

올해로 나는 일한지 5년이 되었고 더는 초보다, 라고 얘기할 수 없는 처지가 되었는데, 웹 기반 지식이나 기술 없이 시작해 체계적인 공부에 대한 목마름을 뒤로 하고 항상 실전에 치여서, 잘 만든 어플리케이션을 모델링하며 실전의 경험 위주로 일을 진행해 와서 항상 부족함을 느끼고 있다. 책은 종종 들춰보는데, 이 바닥의 특성만은 아니겠으되< 너무 그지같은 책이 많아서, 게다가 가격은 다 개비쌈, 그래서 책보다는 온라인 매체를 선호하게 됐다. 하지만 좋은 책이 있으면 계속 읽고 싶었음. 이 책이 그 책이다!

어떻게 해야 사람들이 이용하기 쉽게, 직관적이게 만들 수 있을까? 사용자 인터페이스에 대한 고민은 그 기반되는 학문인 인지심리학을 일정하게 공부하는 것을 통해 시작할 수 있을텐데 개인적으로 심리학이라고 하면 그냥 편협하게 공부하고 싶지 않아해서 -ㅁ-;; 그러면서도 공부가 필요하다고 생각해서 그쪽 고전 목록을 보고 읽을거리를 선정해놨었는데 결국 안 읽었다 ㅇ<-< 이 책은 그런 나에게 인지심리학의 핵심 아이디어를 알려주고 실전 디자인 규칙도 알려주며 내가 안다고 생각했던 법칙들에 내가 몰랐던 더 근본적인 이유가 있음을 상세하게 알려줬다. 이쯤 해서 책 표지 등장

마음을 생각하는 디자인 - UI 디자인 규칙을 이해하기 위한 핵심 가이드 제프 존슨 지&선(지앤선), 2013

색맹(색상 인식 결핍)에 대해서는 한번도 고려해서 색을 고른 적이 없단 걸 알고 좀 반성했다. 왜 그 여러 색깔 써서 그래프를 그린 뒤 흑백으로 인쇄하면 색깔이 구분이 안 돼서 뭐가 뭔지 알 수가 없지 않은가. 극단적으로는 누군가에게 내가 디자인한 것들이 뭐가 뭔지 알 수 없는 것들이었다는 걸 생각하면.. 예를 들어 내가 만들었던 쌍차 회계조작(최근 대법판결에서 승리했음!! 우릐~~!!)에 대한 인포그래픽. 기니까 작게 보자

빨강과 초록... 대표적인 색맹색-_-인데다 가운데 명도도 비슷함 ㅇ<-< (채도도 비슷한 거 같은데 잘 모름-_-) 뭔짓이야!!! 이건 나도 알고 있었는데도 빨강과 녹색을 종종 써왔던 것 같다. 파란색과 보라색 조합도 좋아하는데 -_- 이거랑 밝은 녹색과 흰색... 이것도 좋아하는데 이거 다 적녹색맹이면 분리가 힘들다규 한다ㅜㅜ 사실 근본 없이 마구잡이로 일하느라 색같은 건 진짜 그때그때 좋아하는 걸로 골랐는데 좀더 과학적으로 해나가겠다 ㄱ-;; 색상뿐 아니라 채도와 명도에 구분을 주며 그런 것도 임의로 하지 않고 당분간은 어떤 법칙이 들어 있는 책을 구하여< 나의 감각적인 감각, 느낌적 느낌이 아니라 좀더 일반화된 법칙에 의거한< 색의 세 가지 요소<를 구사하겠다.

단기 기억과 장기 기억에 대한 설명도 흥미로웠는데, 흔히 생각하는 것처럼 단기 기억은 일시적 저장소같은 개념이 아니고, '지각과 주의로부터 떠오르는 현상의 조합'이라고 한다. 이 말이 너무 좋아서 외웠음 ㅇ<-< ㅋㅋ 

책 전반을 통해 확실히 배울 수 있는 것은 인간은 시스템적으로 보수적이라는 것이다. 여러 다른 말로 풀이할 수 있겠으나 이것이 핵심이라고 봤다. 인간 자신의 자원이 한정적이니까, 예를 들어 주의력에 한계가 있기 때문에 이 사람더러 글을 쓰라고 할 때 글쓰기 자체에 주의 자원을 더 쓸 수 있도록, 글쓰기에 보조적인 툴을 만들어야지 글쓰기 툴 자체에 집중하게 만들어선 안 된다. 앞으로 컴터 기술이 많이 변하고, 새로운 인터랙션 방식이 등장해도, 그리고 인간 자체에 대한 연구가 더 심화되어 새로운 사실이 밝혀져도 여전히 인간은 보수적일 것이다. 그래서 인간 중심으로 생각해야 하는 것이다. 매우 실용적이다. 그래서 좋다.

목차만 읽어도 배울 수 있는 점이 많다. 옮겨둔다.

목차

감사의 말

추천사
서문
역자서문

CHAPTER 1 우리는 기대하는 대로 지각한다
지각은 경험에 따라 편향된다
지각은 맥락에 따라 편향된다
지각은 목표에 따라 편향된다
디자인에 대한 함의

CHAPTER 2 우리의 시지각은 구조 인식에 최적화되어 있다
게슈탈트 원리: 근접성
게슈탈트 원리: 유사성
게슈탈트 원리: 연속성
게슈탈트 원리: 완결성
게슈탈트 원리: 대칭성
게슈탈트 원리: 전경/배경
게슈탈트 원리: 공통 운명
게슈탈트 원리들의 조합

CHAPTER 3 우리는 시각적 구조를 찾아내고 활용한다
긴 번호들을 훑어 읽는 능력을 향상시켜 주는 구조화
데이터에 특화된 컨트롤을 통한 더 나은 구조화
적절한 정보에 집중할 수 있도록 도와주는 시각적 계층 구조의 활용

CHAPTER 4읽기는 부자연스러운 행동이다
말하기는 타고나지만 읽기는 타고나지 않는다
읽기에 더 많은 영향을 주는 요소는 글자의 시각적 특징인가, 글의 맥락인가? 
숙련된 읽기와 숙련되지 않은 읽기는 서로 다른 뇌 부위를 사용한다 
부적절한 정보 설계는 읽기를 방해한다 
많은 소프트웨어들이 불필요한 읽기를 강요하고 있다 
진짜 사용자를 대상으로 실험하기 

CHAPTER 5 우리의 색상 지각은 제한적이다 
색상시는 어떻게 작동하는가 
시지각은 절대적 밝기보다 경계선의 대비를 더 잘 지각한다 
색상 구별 능력은 색상이 어떻게 제시되는가에 영향을 받는다 
색맹 
색상 구분 능력에 영향을 주는 외적 요인들 
색상에 대한 가이드라인 

CHAPTER 6 우리의 주변시는 빈약하다 
망막의 중심와(fovea)와 주변시의 해상도 차이 
주변시는 쓸모가 없을까? 
컴퓨터 인터페이스 사례 
메시지의 가시성을 높이기 위한 일반적 방법들 
사용자에게 메시지를 전달하는 강력한 방법들: 신중히 사용할 것 

CHAPTER 7 우리의 주의력은 제한적이고 기억력은 불완전하다
단기 및 장기 기억 
기억에 대한 현대적 관점 
단기 기억의 특성 
단기 기억의 특성이 사용자 인터페이스 디자인에 주는 함의 
장기 기억의 특성 
장기 기억의 특성이 사용자 인터페이스 디자인에 주는 함의 

CHAPTER 8 사고와 행동에 영향을 주는 주의의 제한 
우리는 목표에 집중하며 도구에는 거의 주목하지 않는다 
우리는 하던 일을 잊지 않기 위해 도구에 의지한다 
우리는 정보의 “냄새”를 따라 목표에 다가간다 
우리는 익숙한 경로를 선호한다 
우리의 사고 과정: 목표, 실행, 평가 
우리는 작업의 일차적 목표를 달성하고 나면 뒷정리는 잊어버린다 

CHAPTER 9 재인은 쉽고 회상은 어렵다 
재인은 쉽다 
회상은 어렵다 
재인 대 회상: UI 디자인에 대한 함의 
경험을 통한 학습 및 학습된 행동의 수행은 쉽고 문제 해결과 계산은 어렵다

CHAPTER 10 우리는 세 개의 뇌를 가지고 있다 
경험을 통한 학습은 (대체로) 쉽다 
학습된 행동의 수행은 쉽다 
문제 해결 및 계산은 어렵다 
신뇌는 충동적 행동에 제동을 거는 역할도 수행한다 
기술적 문제의 해결에는 기술에 대한 관심 및 훈련이 필요하다
사용자 인터페이스 디자인에 대한 함의
퍼즐에 대한 답 

CHAPTER 11 학습에 영향을 미치는 여러 요인들 
우리는 주어진 조작법이 과업 중심적이고 단순하며 일관적일 때 더 빠르게 배운다 
우리는 주어진 어휘가 과업 중심적이고 친숙하며 일관적일 때 더 빠르게 배운다 
우리는 위험이 적은 상황에서 더 빠르게 배운다 

CHAPTER 12 시간에 대한 요구사항
반응성의 정의 
인간 두뇌에 내제된 시간 상수들 
시간 상수의 공학적 근사치들 
인간에게 맞는 실시간성을 제공하기 위한 디자인 
반응성 있는 인터랙티브 시스템을 위한 추가적인 가이드라인 
반응성은 반드시 달성되어야 한다 

에필로그 

부록. 널리 알려진 인터페이스 디자인 규칙들

본문

저자의 허락을 얻어 2014년 1월 13일 Econsultancy에 실린 18 pivotal web design trends for 2014을 번역한 글. 컴퓨터 앞에 앉아 있을 시간을 보장받은 활동가로서 웹기술 동향을 우리끼리 팔로업하지 말고 많은 사람들과 나눌 수 있게 노력해 보자...고 생각해 왔는데 막상 한글로 하자니...() 번역 지적 달콤하게 받음

앞으로 공유하고자 하는 것에서 웹디자인은 극히 일부이고, 이 글에서도 디자인과 더불어 어떤 식으로 컨텐츠를 생산할 것인가 힌트도 볼 수 있다. 링크도 보시길(영어지만)

2014년엔 어떤 웹디자인 트렌드를 보게 될 거라 생각하시는지? 필자는 다른 것들보다 좀더 심플하고, 깔끔하고, 작은 화면 사이즈에 특화된 게 유행할 거라 본다.

이 컬렉션은 전체적으로 관찰과 경험에 의한 추측, 그리고 지난 몇 달간 필자가 엮어 본 다른 많은 글들에 기반해 작성되었다. 그런 고로 다른 글들보다 좀더 정확할 것임!

놓친 트렌드가 있을 수 있으니, 여러분의 생각과 예상을 아래 댓글로 달아 주시길.

1. 플랫(입체감을 뺀) UI는 계속 성장세

산세리프 폰트의 팬인 나로서는 현재 장식적인 것보다 깔끔한 것이 트렌드란 걸 알릴 수 있어 기쁘다. 윈도우8은 이 점에 있어 매우 영향력이 컸고, 그 다음으로 애플이 iOS7을 런칭하며 스큐어모피즘을 버렸다. 플랫 디자인에는 여전히 많은 잠재력이 있다.

Windows 8

Apple iOS7

Skibuddy 

2. 모바일 퍼스트(모바일부터 생각하기)

요 몇년간 스마트폰과 타블렛 사용의 급증으로 많은 웹사이트들에서 모바일 트래픽이 데스크탑 트래픽을 추월하고 있다. 2014년에도 늘어나는 모바일 점유율은 디자이너들이 더 작은 화면에서의 사용자 경험(UX)을 재고하게끔 할 것이다(물론 더 커진 화면도 고려해야 할 것이다). 모바일에서 이용 가능한 사용자 베이스에 적응할 필요성은 한 회사를 좀더 민첩하게, 조직내 혁신을 추동케끔 할 수 있다.

물론 실제로는 대다수의 회사에서 '모바일 퍼스트'가 적용이 잘 안 되고 있다. 적어도 아직은 여전히 '모바일 세컨드'이지만, 반응형과 적응형웹을 수용한 곳에서는 투자수익률이 크게 오를 수 있다.

3. 여전히 긴 스크롤

2012년에 스크롤링 웹사이트를 탐구했을 적엔 아직 스크롤링 웹사이트가 유행의 초기 단계였지만 그 뒤로는 많이 보인다. 스크롤링이 매우 쉽기 때문이기도 하고, 디자이너들이 모바일과 타블렛 기기들을 고려하고 마음 속으로 스크롤(swipe)을 생각하기 때문이기도 하다.

패럴렉스 스크롤(Parallax Scrolling), 가로 스크롤, 컬럼-기반 스크롤, 무한 스크롤은 모두 2014년과 앞으로 계속 더 보게 될 것들이다. 다만 특히 무한 스크롤 관련해서 경계할 점이 몇 가지 있다.

4. HTML5 장점

HTML5가 주는 기쁨에 대해 내가 떠드는 걸 듣기보다 Codepen을 방문해 예제를 따라해 보며 뭐가 가능한지 보길 권한다. 아니면 HTML5에 CSS3와 jQuery를 잘 섞어 만든 창의력 있는 에이전시 사이트들을 보길 바란다.

5. HTML5 나쁜 점

이미 나는 웹디자인을 조악하게 만드는 것, 자제력 없는 이들이 사용자 경험에 반하는 범죄를 저지르는 것에 대해 상세히 불평한 바 있다. 할 수 있다는 것이 곧 해야 한다는 것을 의미하지는 않는다.

예를 들어 당신의 흥미로운 새 웹사이트에 들어가는 데에 1분이 걸린다면, '기다려 주세요'라는 로딩 아이콘이 아무리 번드르르해도 그건 잘못된 것이다. 기다리는 것은 언제나 짜증나는 일이다. 나는 브래드 프로스트의 "퍼포먼스는 디자인이다"에 동의한다.

'

6. 아주 소소한 UX

디테일에 주목해 웹사이트를 다른 것과 구별되게 만들 수 있다. 과하지 않게 감각을 만족시켜주는 메뉴, 트랜지션(transition) 효과, 마우스오버 효과 등 아주 소소한 UX(micro UX) 효과가 웹사이트에 활기를 불어넣어줄 수 있다. 예를 들어 데일리 비스트지의 사랑스러운 진행 표시기를 보시라.

7. 텍스트를 더 적게

웹에 텍스트를 잔뜩 쓰는 방식이 훨씬 줄어드는 듯 하다. 일부 앱들과 웹사이트들에서는 눈에 보이는 텍스트가 거의 없고 사용자에게 정보를 전달하기 위해 이미지와 아이콘에 의존하기도 한다.

일부 사례에서는 이 방식이 잘 작동했지만, 보통은 텍스트를 완전히 제거하는 것은 별로 도움이 안 되는 것 같다. 예를 들어 스냅챗(Snapchat) 홈페이지는 10개가 안 되는 단어를 사용하고 있는데 방문객들이 이게 뭔지 알 수 있으려면 비디오를 보도록 요구하고 있다.

의료 대쉬보드 컨셉