Flipboard접하고 나서 비슷한 효과를 낼 수 있는 방법에 관심을 가졌습니다.  지난 글에서는, 트랜지션 효과를 표현한 Quicksand와, 글에서는 남기지 않았지만, 바둑판 모양의 미리 설정된 격자를 이용한 Blueprint을 사용하여, 전개도들을 동적으로 정렬해주는 간단한 실험결과를 남겼습니다.

이번에는, 매거진 스타일로 정렬해주는 기능을 구현하는 것에 관해서 남길까 합니다.

사실 이런 기능에 대해서 웹검색을 시작했을때는, (회원 포인트나 도면 다운로드수에 따라서) 크기가 다른 이미지들의 모자이크 배열을 위한 코드를 찾으려고 했었는데, 어짜피 목표는 정해진 크기 (가로만, 또는 가로 세로 모두)의 박스에 여러 크기의 이미지/글문단을 잘 배열하는 것이기에 비슷한 시도들이 검색되었습니다.

BEFORE                                                              AFTER (from A List Apart)
before after우선, 가장 직관적이고, 아마 최초의 시도로서 A List Apart‘Automatic Magazine Layout’이라는 글에서 제안하는 이미지 layout 방법입니다.  접근방법은, 입력 이미지 갯수는 2~4개로 한정하고 가능한 총 6개의 layout들을 정해놓고, 1) 이미지 갯수와 이미지들의 가로/세로 비율들에 따라서 적당한 layout을 선택하고, ratio
2) 선택된 layout에 잘 들어가도록 이미지들의 축소(확대)비율을 결정하는 것입니다.  이미지가 5개 이상인 경우는, 3+2로 나누어서 각각 적용하는 형태입니다.  php 코드는 위 페이지에서 다운 받을 수 있으며, GD2.x가 필요합니다.


두번째 접근방법은, 보다 일반적인 문제를 해결하기 위한 방법으로, 여러 크기의 사각형들을 잘 배열하여 전체를 담을 수 있는 사각형의 크기를 작게 만드는 문제입니다.  이 문제는 NP-Complete로 증명된, 즉, 최적해를 구하기는 매우 어려운 문제이고, 최적해에 가까운 답을 빠른 시간안에 찾기위한 휴리스틱들이 존재합니다. (참조: StackoverflowOptimal Layout Algorithm 쓰레드)  이 문제는, 2D bin packing 또는 rectangle packing 문제라고 정의되며, 전통적으로는 Operations Research에서 상품 보관/운송에서 비용을 최소화하는 문제입니다.

게임쪽에서는, 텍스쳐/폰트정보를 저장하는 이미지맵을 최소한으로 만들기 위해서, 그리고, 웹 분야에서는, 데스크탑, 스마트폰,  태블릿 등 여러가지 크기의 디스플레이에, 원래의 의미 (예를 들어 읽는 순서)를 최대한 유지한채 layout을 조정해야 하는 필요가 대두된것입니다.  재밌는 것은, 출판 만화의 칸 구분과 배치가 Manga layout 이라는 이름으로, video summarization 분야에서 사용된 다는 점입니다.  물론 출판 만화에서 만화가가 의도적으로 배치한 것을 자동으로 처리하는 것이 목적이고요.

이 문제정의는, 단순히 웹 layout뿐만 아니라, 전개된 도면의 배치에서도 풀어야 할 문제입니다.

(Blender plug-in: Export paper model)

관심사 중에 하나인, 매거진 스타일 웹 출판쪽에서 아주 흥미있는 제품이 나왔습니다.

이름하여 Flipboard for iPad (http://flipboard.com), 일명 소셜매거진.  iPad용 앱으로, flipboard에서 제공하는 미리 준비된 매거진(스타일로 생성된 웹)을 볼수도 있고, 자신의 twitter 팔로어와 facebook 친구들이 연결하거나 공개한 내용을 이용해서, 역시 보기좋은 매거진 스타일로 보여주기도 합니다.

(이미지 출처: flipboard.com)

초기화면의 보기좋은 켄번즈 효과나는 이미지들이나, 각 페이지에 잡지형태로 정렬되어 있는 내용을 클릭했을때 보여지는 트랜지션, 시간대별로 생성된 내용을 볼 수 있는 하단의 썸네일등,  기존 페이퍼매거진의 장점과 웹베이스 매거진의 장점을 잘 섞어놓은 듯 합니다. 게다가 무료입니다.. 아직은..

비슷한 형태의 시도로 프로토타입 형태로 제안되었던 Mag+ (이후 Popular Science용 앱에 적용)와 비교해볼만 할것 같습니다.

Meet Flipboard on YouTube.

Mag+ from Bonnier on Vimeo.

종이천하의 초기화면이나, 테마별 화면으로 비슷한 구성을 찾던 나에게 또하나의 자극제가 되었고, 비슷한 효과, 특히 트랜지션의 효과를 낼 수 있는 javascript을 찾아보았습니다.  비슷하지는 않지만, 그중 jQuery기반 Quicksand가 눈에 들어왔습니다.  html의 li 항목들(특히 이미지들)을 부드러운 트렌지션을 통해서 바꿔치기해주는 효과로서, 애플 프로그램인 AppZapper의 효과를 웹에서 구현하였다고 합니다. Quicksand의 동영상은 없지만, AppZapper의 동영상을 보면 어떤 효과인지 알수있을것 같습니다.

궁극적으로는 Flipboard같은 매거진 스타일의 페이지 구성이 목적이고, 현재는 Quicksand를 이용해서 종이천하에 등록된 전개도를 꼬리말별로 보여주는 페이지를 구성해봤습니다.  http://finalpaper.net/lab/magazine.php .  Default로 ‘스타크래프트’로 등록된 전개도들을 보여주고, 같이 등록된 다른 꼬리말들을 선택하거나 다운로드 수, 완성작 수로 정렬할 수 있게 했습니다.  ’?tag=꼬리말’ 옵션으로 원하는 꼬리말을 볼 수도 있습니다.  (예: 동물로 등록된 전개도들 - http://finalpaper.net/lab/magazine.php?tag=동물).

(Transition between sort by #downloads and #galleries)

종이천하 메타블로그 ‘숲;Soup’의 등록을 인증하는 글입니다.

팔만구천삼백마흔여덟번째 상자에서 를 오만오천구백예순개 꺼내오세요

killerstarups.com에서 본 TiddlyBackPack을 통해서 안 TiddlyWiki를 사용해보려고 한다.

간단한 설명은 팀종천에 남긴 글을 참조하고, 사용하면서 또는 준비하면서 생각나거나 찾은 내용을 정리하고자 한다.

1. 이미지 삽입
생각보다는 쉬웠다. 백업을 별도 폴더에 넣듯이 이미지도 폴더를 하나 만들고 거기로 연결하면 된다.
서버에 올리는 것도 상대주소로 처리되어 문제없어 보인다.

[img[title|filename][link]

예: [img[tiddlywiki|img/tiddlywiki.JPG][TiddlyWiki.com]]

2. 플러긴

* 참조 및 유용한 링크

- TiddlyWiki 개발자 Jeremy Ruston의 인터뷰 at lewcid.org :

A few months ago Jeremy Ruston, the creator of TiddlyWiki, joined British Telecom (BT) as their Head of Open Source Innovation and in the process, his company Osmosoft was acquired by BT as well. This led to a considerable amount of speculation as to what this would mean for TiddlyWiki and its future, and whether Jeremy had “sold out” and turned his back on the TiddlyWiki community. So when I was given the opportunity to spend a few days at Osmosoft and interview Jeremy about the history of TiddlyWiki and its future, I asked him precisely that.

2. coming soon

종천 프로젝트 BKC 관련 정보/링크들

- heomin
* 티스토리 – Web2.0과 인터넷지도: http://heomin61.tistory.com/
* 블로그스팟 – 지도와 Web2.0 그리고 한국의 미래: http://heomin61.blogspot.com/

- 메타블로그
* 믹시 with tag ’3D모델’: http://www.mixsh.com/tag/3D모델

- 구글맵 관련

- 버추얼어스 관련
* http://www.microsoft.com/virtualearth/
* http://virtualearth.spaces.live.com/
* http://dev.live.com/virtualearth/sdk/
* http://www.hoogle.kr/entry/버추얼어스-v20-완전-개편
* http://teachserv.earth.ox.ac.uk/resources/v_earth.html

Next Page →