/page/2

왜 나는 페이스북에서 디자인하는가

radiofun:

Medium.com의 글을 번역. (승인되진 않았음)

Z축 : 미래를 디자인하는 열쇠

radiofun:

아래 글은 전문 번역이 아니고, 요약 번역한 글입니다. 요약문만 읽지 마시고 원문도 같이 참고하시는 편이 좋을 거라 생각합니다. ㅎㅎ

그 동안 2차원적인 평면으로만 생각되어오던 웹 디자인은, 이제 다양한 모양과 크기의 기기들이 늘어나면서 생긴 문제들로 인해 새로운 방향을 찾아야 하는 상황에 직면했다. 이러한 상황에서, Neo의 Wren Lainer는 레이어를 활용한 새로운 방식의 디자인으로 여러가지 복잡한 문제들을 해결할 수 있다고 말한다. Z축을 더하는 것이다.

2차원에 깊이를 더한다는 말인데, 여기서 말하는 Z축은 그림자나 버튼 하이라이트 같은 요소를 말하는 것은 아니다. 외따로 떨어진 레이어들이 서로 독립적으로 움직이는 인터페이스 형태를 말한다. 아래 그림같이.

페이지는 이제 낡은 개념이며, 우리는 이제 재사용될 수 있는 모듈들을 생각해야 한다. 이제 웹사이트는 뷰 들이 필요에 따라 보였다 보이지 않았다 하는 다이내믹한 구조이다. 여기서 Z축을 활용하여 좀 더 직관적이고 사용하기 쉬운 인터페이스를 설계하자는 이야기인 것이다.

말하자면, 페이지 위에 버튼을 얹을 공간이 더는 보이지 않고, 어떻게든 해결을 하고 싶은 상황이지만 답이 보이지 않을 때 그 페이지 바깥에 3차원 공간을 떠올리라는 것이다. 여기서 말하는 Z축의 요소는 두 가지이다. 1) 레이어, 2) 트랜지션 이 그것이다.

1. 레이어

Z축에서의 핵심적인 요소는 레이어이다. 여기서 말하는 레이어란 나머지 뷰 위에 크게 자리하는 UI 요소일수도 있고, 필요에 의해 보였다 안보였다 하는 풀 스크린 뷰일지도 모른다. 뭘 어떻게 만들건 간에 확실한 존재의 이유를 부여해 주어야 한다. 사이트 내내 꾸준히 보이며 사용자들이 내가 만든 디자인을 더 잘 이해할 수 있도록 도와야 한다. 

Lainer는 이어 몇 가지 예시를 들며 Z축 디자인에 대해 설명한다.

메뉴

요소가 Z축 앞에 있을 수록 더 중요해진다. Teehan+Lax의 디자인을 들어 설명하는데, 메뉴가 거의 화면을 뒤덮어버리고, 메뉴들의 폰트 사이즈도 거대하다. 일반적인 gnb보다 훨씬 과감한 방식을 택했고, 그래서 별도의 레이어를 택했을 것이다. 이런 것들이 모든 사이트에 적용되어야 할 교과서적 해답이라고 볼 수는 없겠지만, 메뉴 자체도 콘텐츠처럼 인식될 수 있다는 측면에서 의미있다고 본다. 

액션 버튼

주요 액션 버튼은 보통 다른 UI요소들 앞에 위치한다. 여기서는 챗 헤드를 예로 든다. 챗 헤드는 아래 화면은 그대로 두고, 한 레이어 위에서 자유롭게 떠다니기 때문에 실제 화면 비중을 그렇게 많이 차지하지 않으면서도 돋보일 수 있다. 버튼이 좀 더 돋보이길 원한다면 이런식으로 Z축을 활용하여 강조하는 것이 좀 더 우아한 방법일지 모른다.

스토리텔링

서로 다른 레이어 위에 위치한 요소들은 각자 다른 속도로 움직일 수 있다. 이걸 흔히 패럴랙스라고 부르는데, 최근 많이 사용되는 패턴이다. 오브젝트들이 서로 다른 속도로 움직이면서, 깊이를 주기도 하고, 시간의 흐름 같은 것을 표현하기 쉬워진다. 여기서는 Superfluous를 예로 든다. Let’s Free Congress 같은 사이트나 Inception Explained 도 비동기 스크롤링으로 그냥 플랫한 인포그래픽일 수 있었던 것들을 좀 더 풍부하게 만들었다. 

이런 것들은 지금의 유용성 뿐 아니라, 앞으로 펼쳐질 다차원적 인터랙션으로 나아가는 길이기도 하기 때문에 의미가 있다. 사용자, 그리고 우리 자신들에게도 대비를 할 수 있는 기회가 된다.

2. 트랜지션

레이어를 쓰면 레이어 간 전환을 부드럽게 하는 애니메이션을 적용하는 것이 중요하다. 레이어 간의 관계를 설명해줄 수 있고, 지금 어디에 있고 앞으로 어디로 가는지 알려주기 때문이다.

슬라이딩

슬라이딩은 가장 흔한 패턴이다. 언제건 슬라이드 한번만 하면 네비게이션 메뉴나 숨겨진 패널 등이 금세 나타난다. Gmail을 예로 드는데, 사실 Gmail은 메뉴가 슬라이드하지 않고 메인 윈도우가 밀리면서 메뉴를 보여주는 형식이다. 이 와중에 메인 윈도우의 일부가 보여지는데, 이 덕분에 각 제목의 몇 줄씩을 볼 수 있고, 편지함도 여전히 기능하게 된다.

모바일 웹사이트에서는 이런 패턴을 적용할 때 주의해야 하는데, 메뉴가 웹페이지 위로 보여지는 것은 메인 뷰를 슬라이드하는 것 보다 좀 더 덜컹거리고 방해되기 때문이다. 

키보드 등을 아래로 내리고 다른 메뉴를 보여주는 방법도 좋다. Tweetlist를 예로 들었는데, 트윗 옵션 메뉴같은 것들은 계속 보여질 필요가 없으니 숨기는 게 좋고, 그리고 키보드 뒤에 숨기는 것은 둘 간의 관계를 강화하는 효과까지 있다.

줌하기

사실 줌 하는 패턴은 꽤 나와있지만, iOS7때문에 다시 주목받고 있다. 다양한 앱을 들어 설명하고 있는데… iOS7은 오브젝트를 확대/축소하는 게 아니라 카메라를 줌인하는 것이 핵심적인 차이를 만들어낸다고 한다. 사용자의 시점을 전환해서 새로운 층이 있다는 것을 보여주는 것이다. 뷰를 줌 아웃 하면서 숨겨진 넓은 공간을 보여주는 것도 마찬가지이다. 캔버스를 좀 더 넓고 깊게 사용할 수 있다. 포스퀘어의 줌인은 다른 것보다는 좀 은근한 편이지만, 좀 더 디테일한 수준의 정보를 보여준다는 느낌을 강조한다.

확대 / 축소는 정보 위계와 일치해야 한다. 디테일한 정보는 줌 인, 카메라가 줌 아웃되면 좀 더 상위 레벨의 정보로 넘어가는 것이다.

다른 트랜지션

마지막으로는 Flip이나 Folding같은 것을 제시한다. 3차원 오브젝트에는 밝은 공간, 어두운 공간이 있는데 오브젝트를 플리핑하면서 사용자들이 이런 부분들을 이해하기 쉬워지는 것이다. Flip의 단점은 느리다는 것인데, 180도 돌리는 건 꽤 큰 트랜지션이기 때문에 느리고 불편하게 느껴질 수 있다. 시간이 중요한 상황에서 Flip은 좋은 대안이 아니다. 상황에 맞게 잘 써야 한다. 예를 들면, 카드 기반의 레이아웃에서는 오브젝트를 플립하는 것으로 추가 정보를 효과적으로 보여줄 수 있다.

(후략)

(역주) 더하고 싶은 말

이 아티클은 Matias Duarte를 포함한 다양한 사람들이 추천한 것으로, 최근의 디자인 추세를 짚어냈다는 측면에서 의미가 있다. 한 장의 페이지 안에 필요한 모든 버튼이 다 들어가야 하는 기존의 디자인, 페이지 단위로만 트랜지션이 일어나던 구조는 이제 끝났다. 

이젠 한 페이지 안에 여러 가지 모듈들이 숨겨져있고, 그 모듈들이 쉴 새없이 트랜지션하며 의미를 만들어낸다. 페이지의 의미는 점차 줄어든다. 모듈을 담는 캔버스 이상의 의미를 얻기 어렵다. 예전에는 6페이지가 필요했던 플로우도, 한 페이지 안에 몇 개의 모듈을 넣는 것으로 쉽게 대체된다. 물리적인 페이지는 한장만 있어도 그만일지 모르겠다.

오브젝트에 더 많은 의미가 부여된다. 구글 검색 윈도우는 언제 어디서건 나타난다. 챗 헤드는 숨어있다가 메시지가 오면 화면 맨 위로 올라온다. x,y 포지션으로만 구성된 기획서 / psd 파일에 하나의 축을 더 추가하는 것 만으로 기존 방식에서의 많은 문제가 해결된다.그런데, ppt로 챗 헤드를 어떻게 설명할까? 여러 장의 문서로 타임 프레임을 잘라내어 스크린샷을 보여주듯 설명해야 할 텐데, 불가능하진 않겠지만 매우 비효율적일 것이다. 새로운 디자인 방식엔, 새로운 툴이 필요하다.

Flipboard의 Layout 엔진, Duplo

radiofun:

플립보드를 넘겨보다 보면, 어떤 페이지는 사진이 꽉 차 있고, 어떤 페이지는 사진과 텍스트가 절묘하게 반반 쯤 보이고, 어떤 건 텍스트만 있다. 그건 그렇다 쳐도, 비율과 레이아웃이 조금씩 다른 것을 확인할 수 있는데… 그 이면에는 레이아웃 자동화 엔진인 “Duplo”가 있다.

Flipboard의 Charles Yang이 소개하는 Duplo 엔진에 대한 소개 글인데, 여기서는 간략 요약.

  • 2010년 매거진 페이지를 플립보드 페이지로 변환하는 Pages를 개발. css3, svg, 바닐라 js를 활용한 렌더링 엔진이었음. 한 아티클에 소요되는 리소스들의 총 용량은 90k 정도로, 일반 웹 페이지나 아티클 내 사진 한장보다도 작음.
  • 디자이너가 미리 20페이지 정도의 가로/세로 디자인을 만들어 두면, 아티클을 보고 최적의 레이아웃을 찾아 적용하는 패턴이었음. 퍼즐 맞추기 같은 형식으로 아름다운 레이아웃을 실현할 수 있었지만, 고정된 화면 구조에서만 유효했음.
  • 문제는 웹 버전과, 윈도우 8 버전이 출시되면서 생겼는데, 사용자들이 화면을 “리사이즈” 할 수 있게 되어버리면서 생각하지 못했던 사이즈에 대응해야 했음.
  • Pages의 대안으로 만든 것이 Duplo임. 개념은 비슷하나 Duplo는 블록 모듈과 그리드 시스템을 활용해서, 수천 개의 페이지 레이아웃 중 가장 최적의 레이아웃을 제공해 줌.
  • Pages와 마찬가지로, 디자이너가 작업한 레이아웃 세트에서 시작하는데… Pages와 다른 점이라면 기존에는 20개 정도의 레이아웃에서 선택하던 것을, 이제는 2000-6000개의 후보군 중에서 골라낸다는 것.

http://engineering.flipboard.com/

duplo로 생성하는 레이아웃 예시, 2000개 이상이 만들어진다 (3열, 가로 형태)

  • Pages와 마찬가지로, Duplo도 Javascript 기반의 엔진임. 개발 측면에서도 좋고, 타이포그래피, 포맷팅 뿐 아니라 레티나 디바이스까지 대응하는데 그만임. 
  • Duplo는 4개의 메인 스테이지를 거침. 레이아웃 생성, 레이아웃 선택, 레이아웃 다듬기, 그리고 표현.

레이아웃 생성

  • 2000개 레이아웃을 디자이너가 그릴 수 없기 때문에, 좀 더 잘게 쪼개어 큰 레이아웃에 가져다 붙임. 여기에 디자이너의 가이드라인이 쓰이게 됨. 이걸 트리로 만들어서 베리에이션을 만들어 냄 (징하다;;)

http://engineering.flipboard.com/

  • 이렇게 자동생성 된 것 뿐만 아니라, 손으로 만든 레이아웃까지 참고함.

레이아웃 선택 및 콘텐츠 적용

  • 레이아웃을 선택할 때, 먼저 콘텐츠의 구조를 분석하여 레이아웃의 콘텐츠 슬롯과 얼마나 잘 매치되는지 판단하고 몇가지 기준에 따라 최적의 조합을 계산해냄. 그 중 몇가지만 소개하면;
  • 페이지 플로우 : Perlin noise를 적용해서 한 페이지에 어떤 타입의 아이템이 얼마나 들어가야 할 지 파악함. 
  • 프레임을 채울 텍스트의 양 : 텍스트를 포함하는 프레임의 비율을 예측함. 프레임의 80% 이상을 차지하는 텍스트에 가중치를 부여함.
  • 윈도우 리사이즈에 따른 콘텐츠 일관성 : 예전에 같은 페이지에 보였던 콘텐츠들 묶음이라면, 가중치를 부여. 비슷한 정렬을 가지고 있다면 가중치를 더욱 가산.
  • 이미지 특징 파악, 비율, 확대, 크로핑 : 이미지가 프레임에 맞도록 얼마나 스케일링하고 크로핑해야 하는지 계산해냄. 가장 크로핑을 적게하고, 120% 이상 확대할 필요가 없는 이미지에 가산점. OpenCV를 활용하여 서버사이드에서 얼굴 인식, 전경의 물체등을 파악할 수 있게 만들기도 함. 

  • 이렇게 하나 하나 찾는 건 꽤 버벅이게 되는 작업이라 생각할 지 모르겠지만, branch & bound 알고리듬으로 꽤 효율적으로 작업함. 마치 체스 게임에서 다음 수를 효과적으로 찾는 것과 비슷.
  • 이 모든 휴리스틱(heuristic)은 잡지 편집자나 디자이너가 실제 잡지를 편집하는 방식과 유사함.

레이아웃 다듬기

  • 최적의 레이아웃을 골라내면, 레이아웃을 다듬음. 베이스라인 그리드에 맞춰 프레임을 재정렬하고, 타겟 이미지에 최적화되도록 이미지 프레임을 잡아줌. 

before

after

레이아웃 표시하기

  • 렌더링은 HTML DOM으로 이뤄짐. 여기서는 타입 스케일링을 하는데, 헤드라인 텍스트나 아티클 텍스트를 특성에 맞춰서 다시 잡아주는 일을 하는 것. 예를 들면 큰 사이즈에서는 얇게 표시한다거나, 작은 사이즈인 경우 굵게 표현하는 식으로 디자이너가 잡은 가이드대로 표현하게 되어있음.

정말 이 정도로 심오하게 렌더링을 했을 줄은 몰랐다. 개발자가 결론에서 말하듯, 완전히 알고리듬에만 의존하지 않고, 디자이너가 만든 레이아웃 기반으로 만들어 나간 덕분에 훨씬 나은 결과를 얻을 수 있었다고.

언뜻 보면 그 차이를 쉽게 짐작할 수 없음에도 그 미묘한 차이를 위해 수십 수백 시간을 집요하게 파고 들어가는 장인정신. 이것이 소프트웨어 제작에 점차 퍼져가고 있다. “보이지 않는 케이스의 뒷면”을 열심히 디자인 하던 조니 아이브와 스티브 잡스가 생각난다.

투명기획서는 시각적으로 투명하기 때문에 투명기획서입니다. 시각적으로 투명하기 때문에 최강입니다.

kimnoin-log:

기획서 중에서도 최강인 투명기획서 트윗을 보는 순간 오금이 저리고 주마등이 스쳐 지나가는 등 여러 가지 주목할 만한 신체적, 정신적 증상이 나타남에 따라 ‘투명기획서’의 공포에 대해 잠깐 생각해보려고 합니다. 일단, 투명기획서란 말 그대로 투명기획서입니다. 거기 기획서가 있다는 것도 알고, 누군가는 그 내용도 알고 있고, 어떻게 해야 하는지도 어렴풋이 알고 있지만 어디에도 보이지는 않는 그런 기획서입니다. 인쇄물도, 문서 파일도, 웹 페이지도 없지만 어쨌든 모두가 조각조각 알고 있는 그런 것입니다.

프로그래머들은 눈에…

어떤 설문조사는 완전히 쓸모없습니다.

kimnoin-log:

아주 오래 된 일입니다. 게임을 만들다가 포커스 그룹 테스트라는 것을 한다는 이야기를 들었습니다. 사실 그게 뭔지 잘 몰랐는데, 형식은 피씨방 한 곳을 하루 동안 빌려 게임을 깔아놓고 선정된 사람들을 불러다가 하루 종일 게임을 시킨 다음 설문지를 받는 것이었습니다. 사람들은 처음에 잠깐 게임에 흥미를 보였지만 이내 극도로 지루해 하기 시작했고 누군가는 게임을 내려놓고 인터넷 익스플로러를 실행했지만 아무 사이트에도 접속할 수 없자 이내 졸기 시작했습니다. 누군가는 필드에서 몹을 때리기를 기계적으로 반복하고 있었고 또 누군가는 여기…

weandthecolor:

HEAVY METAL – TYPOGRAPHIC POSTER DESIGN by Tom Davie (studiotwentysix2)
More about the artwork on WE AND THE COLOR
FacebookTwitterGoogle+PinterestPheedFlipboardInstagram

weandthecolor:

HEAVY METAL – TYPOGRAPHIC POSTER DESIGN by Tom Davie (studiotwentysix2)

More about the artwork on WE AND THE COLOR

Facebook
Twitter
Google+
Pinterest
Pheed
Flipboard
Instagram

infauna:

my yippywhippy purchases arrived today 🆒

infauna:

my yippywhippy purchases arrived today 🆒

(via jonburgerman)

coletteteam:

Hello KAWS (Passing Through) companion & see you ! WE JUST GOT A FEW & It’ SOLD OUT ! #colette #colettestore #kaws @kawsstudio

coletteteam:

Hello KAWS (Passing Through) companion & see you ! WE JUST GOT A FEW & It’ SOLD OUT ! #colette #colettestore #kaws @kawsstudio

Naru's Story: 당신의 삶을 바꾸는 30가지 습관

naruter:

건강 편
1 30분 간 매일 운동하라
2 매일 아침을 먹어라
3 8시간 자라
4 식사 사이에 군것질 하지 마라
5 다섯 가지 종류의 과일과 채소를 매일 먹어라
6 생선을 먹어라
7 매일 일어나서 물 한 잔 마셔라
8 탄산음료를 피해라
9 몸을 깨끗이 하라
10 담배를 끊어라
11 술을 끊어라
12 계단으로 다녀라

생산성 편
1 떠오르는 생각을 적어 보관하는 습관을 만들어라
2 우선순위를 매겨라
3 계획을 세우되 너무 많이는 세우지 마라
4 일찍 일어나라
5 하루 두 번만 메일을 확인해라
6…

(Source: freestylemind.com)

왜 나는 페이스북에서 디자인하는가

radiofun:

Medium.com의 글을 번역. (승인되진 않았음)

Z축 : 미래를 디자인하는 열쇠

radiofun:

아래 글은 전문 번역이 아니고, 요약 번역한 글입니다. 요약문만 읽지 마시고 원문도 같이 참고하시는 편이 좋을 거라 생각합니다. ㅎㅎ

그 동안 2차원적인 평면으로만 생각되어오던 웹 디자인은, 이제 다양한 모양과 크기의 기기들이 늘어나면서 생긴 문제들로 인해 새로운 방향을 찾아야 하는 상황에 직면했다. 이러한 상황에서, Neo의 Wren Lainer는 레이어를 활용한 새로운 방식의 디자인으로 여러가지 복잡한 문제들을 해결할 수 있다고 말한다. Z축을 더하는 것이다.

2차원에 깊이를 더한다는 말인데, 여기서 말하는 Z축은 그림자나 버튼 하이라이트 같은 요소를 말하는 것은 아니다. 외따로 떨어진 레이어들이 서로 독립적으로 움직이는 인터페이스 형태를 말한다. 아래 그림같이.

페이지는 이제 낡은 개념이며, 우리는 이제 재사용될 수 있는 모듈들을 생각해야 한다. 이제 웹사이트는 뷰 들이 필요에 따라 보였다 보이지 않았다 하는 다이내믹한 구조이다. 여기서 Z축을 활용하여 좀 더 직관적이고 사용하기 쉬운 인터페이스를 설계하자는 이야기인 것이다.

말하자면, 페이지 위에 버튼을 얹을 공간이 더는 보이지 않고, 어떻게든 해결을 하고 싶은 상황이지만 답이 보이지 않을 때 그 페이지 바깥에 3차원 공간을 떠올리라는 것이다. 여기서 말하는 Z축의 요소는 두 가지이다. 1) 레이어, 2) 트랜지션 이 그것이다.

1. 레이어

Z축에서의 핵심적인 요소는 레이어이다. 여기서 말하는 레이어란 나머지 뷰 위에 크게 자리하는 UI 요소일수도 있고, 필요에 의해 보였다 안보였다 하는 풀 스크린 뷰일지도 모른다. 뭘 어떻게 만들건 간에 확실한 존재의 이유를 부여해 주어야 한다. 사이트 내내 꾸준히 보이며 사용자들이 내가 만든 디자인을 더 잘 이해할 수 있도록 도와야 한다. 

Lainer는 이어 몇 가지 예시를 들며 Z축 디자인에 대해 설명한다.

메뉴

요소가 Z축 앞에 있을 수록 더 중요해진다. Teehan+Lax의 디자인을 들어 설명하는데, 메뉴가 거의 화면을 뒤덮어버리고, 메뉴들의 폰트 사이즈도 거대하다. 일반적인 gnb보다 훨씬 과감한 방식을 택했고, 그래서 별도의 레이어를 택했을 것이다. 이런 것들이 모든 사이트에 적용되어야 할 교과서적 해답이라고 볼 수는 없겠지만, 메뉴 자체도 콘텐츠처럼 인식될 수 있다는 측면에서 의미있다고 본다. 

액션 버튼

주요 액션 버튼은 보통 다른 UI요소들 앞에 위치한다. 여기서는 챗 헤드를 예로 든다. 챗 헤드는 아래 화면은 그대로 두고, 한 레이어 위에서 자유롭게 떠다니기 때문에 실제 화면 비중을 그렇게 많이 차지하지 않으면서도 돋보일 수 있다. 버튼이 좀 더 돋보이길 원한다면 이런식으로 Z축을 활용하여 강조하는 것이 좀 더 우아한 방법일지 모른다.

스토리텔링

서로 다른 레이어 위에 위치한 요소들은 각자 다른 속도로 움직일 수 있다. 이걸 흔히 패럴랙스라고 부르는데, 최근 많이 사용되는 패턴이다. 오브젝트들이 서로 다른 속도로 움직이면서, 깊이를 주기도 하고, 시간의 흐름 같은 것을 표현하기 쉬워진다. 여기서는 Superfluous를 예로 든다. Let’s Free Congress 같은 사이트나 Inception Explained 도 비동기 스크롤링으로 그냥 플랫한 인포그래픽일 수 있었던 것들을 좀 더 풍부하게 만들었다. 

이런 것들은 지금의 유용성 뿐 아니라, 앞으로 펼쳐질 다차원적 인터랙션으로 나아가는 길이기도 하기 때문에 의미가 있다. 사용자, 그리고 우리 자신들에게도 대비를 할 수 있는 기회가 된다.

2. 트랜지션

레이어를 쓰면 레이어 간 전환을 부드럽게 하는 애니메이션을 적용하는 것이 중요하다. 레이어 간의 관계를 설명해줄 수 있고, 지금 어디에 있고 앞으로 어디로 가는지 알려주기 때문이다.

슬라이딩

슬라이딩은 가장 흔한 패턴이다. 언제건 슬라이드 한번만 하면 네비게이션 메뉴나 숨겨진 패널 등이 금세 나타난다. Gmail을 예로 드는데, 사실 Gmail은 메뉴가 슬라이드하지 않고 메인 윈도우가 밀리면서 메뉴를 보여주는 형식이다. 이 와중에 메인 윈도우의 일부가 보여지는데, 이 덕분에 각 제목의 몇 줄씩을 볼 수 있고, 편지함도 여전히 기능하게 된다.

모바일 웹사이트에서는 이런 패턴을 적용할 때 주의해야 하는데, 메뉴가 웹페이지 위로 보여지는 것은 메인 뷰를 슬라이드하는 것 보다 좀 더 덜컹거리고 방해되기 때문이다. 

키보드 등을 아래로 내리고 다른 메뉴를 보여주는 방법도 좋다. Tweetlist를 예로 들었는데, 트윗 옵션 메뉴같은 것들은 계속 보여질 필요가 없으니 숨기는 게 좋고, 그리고 키보드 뒤에 숨기는 것은 둘 간의 관계를 강화하는 효과까지 있다.

줌하기

사실 줌 하는 패턴은 꽤 나와있지만, iOS7때문에 다시 주목받고 있다. 다양한 앱을 들어 설명하고 있는데… iOS7은 오브젝트를 확대/축소하는 게 아니라 카메라를 줌인하는 것이 핵심적인 차이를 만들어낸다고 한다. 사용자의 시점을 전환해서 새로운 층이 있다는 것을 보여주는 것이다. 뷰를 줌 아웃 하면서 숨겨진 넓은 공간을 보여주는 것도 마찬가지이다. 캔버스를 좀 더 넓고 깊게 사용할 수 있다. 포스퀘어의 줌인은 다른 것보다는 좀 은근한 편이지만, 좀 더 디테일한 수준의 정보를 보여준다는 느낌을 강조한다.

확대 / 축소는 정보 위계와 일치해야 한다. 디테일한 정보는 줌 인, 카메라가 줌 아웃되면 좀 더 상위 레벨의 정보로 넘어가는 것이다.

다른 트랜지션

마지막으로는 Flip이나 Folding같은 것을 제시한다. 3차원 오브젝트에는 밝은 공간, 어두운 공간이 있는데 오브젝트를 플리핑하면서 사용자들이 이런 부분들을 이해하기 쉬워지는 것이다. Flip의 단점은 느리다는 것인데, 180도 돌리는 건 꽤 큰 트랜지션이기 때문에 느리고 불편하게 느껴질 수 있다. 시간이 중요한 상황에서 Flip은 좋은 대안이 아니다. 상황에 맞게 잘 써야 한다. 예를 들면, 카드 기반의 레이아웃에서는 오브젝트를 플립하는 것으로 추가 정보를 효과적으로 보여줄 수 있다.

(후략)

(역주) 더하고 싶은 말

이 아티클은 Matias Duarte를 포함한 다양한 사람들이 추천한 것으로, 최근의 디자인 추세를 짚어냈다는 측면에서 의미가 있다. 한 장의 페이지 안에 필요한 모든 버튼이 다 들어가야 하는 기존의 디자인, 페이지 단위로만 트랜지션이 일어나던 구조는 이제 끝났다. 

이젠 한 페이지 안에 여러 가지 모듈들이 숨겨져있고, 그 모듈들이 쉴 새없이 트랜지션하며 의미를 만들어낸다. 페이지의 의미는 점차 줄어든다. 모듈을 담는 캔버스 이상의 의미를 얻기 어렵다. 예전에는 6페이지가 필요했던 플로우도, 한 페이지 안에 몇 개의 모듈을 넣는 것으로 쉽게 대체된다. 물리적인 페이지는 한장만 있어도 그만일지 모르겠다.

오브젝트에 더 많은 의미가 부여된다. 구글 검색 윈도우는 언제 어디서건 나타난다. 챗 헤드는 숨어있다가 메시지가 오면 화면 맨 위로 올라온다. x,y 포지션으로만 구성된 기획서 / psd 파일에 하나의 축을 더 추가하는 것 만으로 기존 방식에서의 많은 문제가 해결된다.그런데, ppt로 챗 헤드를 어떻게 설명할까? 여러 장의 문서로 타임 프레임을 잘라내어 스크린샷을 보여주듯 설명해야 할 텐데, 불가능하진 않겠지만 매우 비효율적일 것이다. 새로운 디자인 방식엔, 새로운 툴이 필요하다.

Flipboard의 Layout 엔진, Duplo

radiofun:

플립보드를 넘겨보다 보면, 어떤 페이지는 사진이 꽉 차 있고, 어떤 페이지는 사진과 텍스트가 절묘하게 반반 쯤 보이고, 어떤 건 텍스트만 있다. 그건 그렇다 쳐도, 비율과 레이아웃이 조금씩 다른 것을 확인할 수 있는데… 그 이면에는 레이아웃 자동화 엔진인 “Duplo”가 있다.

Flipboard의 Charles Yang이 소개하는 Duplo 엔진에 대한 소개 글인데, 여기서는 간략 요약.

  • 2010년 매거진 페이지를 플립보드 페이지로 변환하는 Pages를 개발. css3, svg, 바닐라 js를 활용한 렌더링 엔진이었음. 한 아티클에 소요되는 리소스들의 총 용량은 90k 정도로, 일반 웹 페이지나 아티클 내 사진 한장보다도 작음.
  • 디자이너가 미리 20페이지 정도의 가로/세로 디자인을 만들어 두면, 아티클을 보고 최적의 레이아웃을 찾아 적용하는 패턴이었음. 퍼즐 맞추기 같은 형식으로 아름다운 레이아웃을 실현할 수 있었지만, 고정된 화면 구조에서만 유효했음.
  • 문제는 웹 버전과, 윈도우 8 버전이 출시되면서 생겼는데, 사용자들이 화면을 “리사이즈” 할 수 있게 되어버리면서 생각하지 못했던 사이즈에 대응해야 했음.
  • Pages의 대안으로 만든 것이 Duplo임. 개념은 비슷하나 Duplo는 블록 모듈과 그리드 시스템을 활용해서, 수천 개의 페이지 레이아웃 중 가장 최적의 레이아웃을 제공해 줌.
  • Pages와 마찬가지로, 디자이너가 작업한 레이아웃 세트에서 시작하는데… Pages와 다른 점이라면 기존에는 20개 정도의 레이아웃에서 선택하던 것을, 이제는 2000-6000개의 후보군 중에서 골라낸다는 것.

http://engineering.flipboard.com/

duplo로 생성하는 레이아웃 예시, 2000개 이상이 만들어진다 (3열, 가로 형태)

  • Pages와 마찬가지로, Duplo도 Javascript 기반의 엔진임. 개발 측면에서도 좋고, 타이포그래피, 포맷팅 뿐 아니라 레티나 디바이스까지 대응하는데 그만임. 
  • Duplo는 4개의 메인 스테이지를 거침. 레이아웃 생성, 레이아웃 선택, 레이아웃 다듬기, 그리고 표현.

레이아웃 생성

  • 2000개 레이아웃을 디자이너가 그릴 수 없기 때문에, 좀 더 잘게 쪼개어 큰 레이아웃에 가져다 붙임. 여기에 디자이너의 가이드라인이 쓰이게 됨. 이걸 트리로 만들어서 베리에이션을 만들어 냄 (징하다;;)

http://engineering.flipboard.com/

  • 이렇게 자동생성 된 것 뿐만 아니라, 손으로 만든 레이아웃까지 참고함.

레이아웃 선택 및 콘텐츠 적용

  • 레이아웃을 선택할 때, 먼저 콘텐츠의 구조를 분석하여 레이아웃의 콘텐츠 슬롯과 얼마나 잘 매치되는지 판단하고 몇가지 기준에 따라 최적의 조합을 계산해냄. 그 중 몇가지만 소개하면;
  • 페이지 플로우 : Perlin noise를 적용해서 한 페이지에 어떤 타입의 아이템이 얼마나 들어가야 할 지 파악함. 
  • 프레임을 채울 텍스트의 양 : 텍스트를 포함하는 프레임의 비율을 예측함. 프레임의 80% 이상을 차지하는 텍스트에 가중치를 부여함.
  • 윈도우 리사이즈에 따른 콘텐츠 일관성 : 예전에 같은 페이지에 보였던 콘텐츠들 묶음이라면, 가중치를 부여. 비슷한 정렬을 가지고 있다면 가중치를 더욱 가산.
  • 이미지 특징 파악, 비율, 확대, 크로핑 : 이미지가 프레임에 맞도록 얼마나 스케일링하고 크로핑해야 하는지 계산해냄. 가장 크로핑을 적게하고, 120% 이상 확대할 필요가 없는 이미지에 가산점. OpenCV를 활용하여 서버사이드에서 얼굴 인식, 전경의 물체등을 파악할 수 있게 만들기도 함. 

  • 이렇게 하나 하나 찾는 건 꽤 버벅이게 되는 작업이라 생각할 지 모르겠지만, branch & bound 알고리듬으로 꽤 효율적으로 작업함. 마치 체스 게임에서 다음 수를 효과적으로 찾는 것과 비슷.
  • 이 모든 휴리스틱(heuristic)은 잡지 편집자나 디자이너가 실제 잡지를 편집하는 방식과 유사함.

레이아웃 다듬기

  • 최적의 레이아웃을 골라내면, 레이아웃을 다듬음. 베이스라인 그리드에 맞춰 프레임을 재정렬하고, 타겟 이미지에 최적화되도록 이미지 프레임을 잡아줌. 

before

after

레이아웃 표시하기

  • 렌더링은 HTML DOM으로 이뤄짐. 여기서는 타입 스케일링을 하는데, 헤드라인 텍스트나 아티클 텍스트를 특성에 맞춰서 다시 잡아주는 일을 하는 것. 예를 들면 큰 사이즈에서는 얇게 표시한다거나, 작은 사이즈인 경우 굵게 표현하는 식으로 디자이너가 잡은 가이드대로 표현하게 되어있음.

정말 이 정도로 심오하게 렌더링을 했을 줄은 몰랐다. 개발자가 결론에서 말하듯, 완전히 알고리듬에만 의존하지 않고, 디자이너가 만든 레이아웃 기반으로 만들어 나간 덕분에 훨씬 나은 결과를 얻을 수 있었다고.

언뜻 보면 그 차이를 쉽게 짐작할 수 없음에도 그 미묘한 차이를 위해 수십 수백 시간을 집요하게 파고 들어가는 장인정신. 이것이 소프트웨어 제작에 점차 퍼져가고 있다. “보이지 않는 케이스의 뒷면”을 열심히 디자인 하던 조니 아이브와 스티브 잡스가 생각난다.

투명기획서는 시각적으로 투명하기 때문에 투명기획서입니다. 시각적으로 투명하기 때문에 최강입니다.

kimnoin-log:

기획서 중에서도 최강인 투명기획서 트윗을 보는 순간 오금이 저리고 주마등이 스쳐 지나가는 등 여러 가지 주목할 만한 신체적, 정신적 증상이 나타남에 따라 ‘투명기획서’의 공포에 대해 잠깐 생각해보려고 합니다. 일단, 투명기획서란 말 그대로 투명기획서입니다. 거기 기획서가 있다는 것도 알고, 누군가는 그 내용도 알고 있고, 어떻게 해야 하는지도 어렴풋이 알고 있지만 어디에도 보이지는 않는 그런 기획서입니다. 인쇄물도, 문서 파일도, 웹 페이지도 없지만 어쨌든 모두가 조각조각 알고 있는 그런 것입니다.

프로그래머들은 눈에…

어떤 설문조사는 완전히 쓸모없습니다.

kimnoin-log:

아주 오래 된 일입니다. 게임을 만들다가 포커스 그룹 테스트라는 것을 한다는 이야기를 들었습니다. 사실 그게 뭔지 잘 몰랐는데, 형식은 피씨방 한 곳을 하루 동안 빌려 게임을 깔아놓고 선정된 사람들을 불러다가 하루 종일 게임을 시킨 다음 설문지를 받는 것이었습니다. 사람들은 처음에 잠깐 게임에 흥미를 보였지만 이내 극도로 지루해 하기 시작했고 누군가는 게임을 내려놓고 인터넷 익스플로러를 실행했지만 아무 사이트에도 접속할 수 없자 이내 졸기 시작했습니다. 누군가는 필드에서 몹을 때리기를 기계적으로 반복하고 있었고 또 누군가는 여기…

weandthecolor:

HEAVY METAL – TYPOGRAPHIC POSTER DESIGN by Tom Davie (studiotwentysix2)
More about the artwork on WE AND THE COLOR
FacebookTwitterGoogle+PinterestPheedFlipboardInstagram

weandthecolor:

HEAVY METAL – TYPOGRAPHIC POSTER DESIGN by Tom Davie (studiotwentysix2)

More about the artwork on WE AND THE COLOR

Facebook
Twitter
Google+
Pinterest
Pheed
Flipboard
Instagram

infauna:

my yippywhippy purchases arrived today 🆒

infauna:

my yippywhippy purchases arrived today 🆒

(via jonburgerman)

visualgraphc:

Tick, Tock

visualgraphc:

Tick, Tock

(Source: ben-smith-123, via thegraphicsideof)

coletteteam:

Hello KAWS (Passing Through) companion & see you ! WE JUST GOT A FEW & It’ SOLD OUT ! #colette #colettestore #kaws @kawsstudio

coletteteam:

Hello KAWS (Passing Through) companion & see you ! WE JUST GOT A FEW & It’ SOLD OUT ! #colette #colettestore #kaws @kawsstudio

Naru's Story: 당신의 삶을 바꾸는 30가지 습관

naruter:

건강 편
1 30분 간 매일 운동하라
2 매일 아침을 먹어라
3 8시간 자라
4 식사 사이에 군것질 하지 마라
5 다섯 가지 종류의 과일과 채소를 매일 먹어라
6 생선을 먹어라
7 매일 일어나서 물 한 잔 마셔라
8 탄산음료를 피해라
9 몸을 깨끗이 하라
10 담배를 끊어라
11 술을 끊어라
12 계단으로 다녀라

생산성 편
1 떠오르는 생각을 적어 보관하는 습관을 만들어라
2 우선순위를 매겨라
3 계획을 세우되 너무 많이는 세우지 마라
4 일찍 일어나라
5 하루 두 번만 메일을 확인해라
6…

(Source: freestylemind.com)

About:

yes

Following: