Moff - a wearable smart toy - from Moff on Vimeo.

Everything you do. Everything you hold. Change into toys. Coming soon at crowd funding in March! Moff, Inc. is a hardware startup which develops and produces human interface devices, making computers more friendly for humans (Tokyo in Japan. moff.mobi/ ). For more information, please subscribe to our NewsLetter on our official website.

0 notes

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

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

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

40 notes

proofkiss:

unnderwater self-portraits by Noriko Yabu

proofkiss:

unnderwater self-portraits by Noriko Yabu

(via vikaworldlove)

131 notes

Raveyards // Stunts from Charles De Meyer on Vimeo.

Official Music Video for Raveyards’ single “Stunts” (2014).
Single to be released April 2014
Free download : goo.gl/bEYidV
raveyards.com

Director, Concept, Animation : Charles De Meyer
Director of Photography : Maximiliaan Dierickx
Production Company : WRONG
Executive Producer : Tatiana Pierre
Production Manager : Simon Waterkeyn
Assistant Director : Joke Pevenage
Cinematographer’s Assistant : Bart Van Otterdijk
Production Assistant : Bram Sterckx
Make-up : Esther Wauters
Sculpture Realization : The Protocol Room
Additional Designs : Benjamin Mousquet

Special Thanks to Nancy Suárez @ MAAC (Maison d’Art Actuel des Chartreux) - Brussels
and Walter Van Cleynenbreugel @ WRONG

0 notes

Temp-drop first clip from Temp-drop on Vimeo.

This is how we were over a year ago :-)
It’s been an exciting and fulfilling year,
but there are still goals we seek.
With your help, we will make it !

0 notes

SELFIE Mirror from iStrategyLabs on Vimeo.

Meet the S.E.L.F.I.E., the “The Self Enhancing Live Feed Image Engine”. Triggered by simply standing in front of it and holding a smile, hidden LED’s indicate a countdown, then simulate a “flash” as your photo is taken. The photo is automatically posted to Twitter (with a watermark/logo).

Find out how it works here: istrategylabs.com/2014/04/take-an-instant-selfie-with-this-magical-mirror/

0 notes

FIber Optic Dress from Natalie Walsh on Vimeo.

This is a dress I made using fiber optics from Ants on a Melon.
Video was taken by Audrey Love. Song is by Opiuo.

0 notes

FIber Optic Dress from Natalie Walsh on Vimeo.

This is a dress I made using fiber optics from Ants on a Melon.
Video was taken by Audrey Love. Song is by Opiuo.

0 notes