구글 크롬 웹 브라우져 익스텐션으로 개발된 ‘종이천하 내맞춤쪽’ v0.35가 배포되었습니다.

기본적인 기능은,

  1. 내 글/댓글에 달린 새 댓글 확인
  2. 읽지 않은 쪽지 확인
  3. 전체 최근 글/댓글 보기

등입니다.

 

2011/10/29: v0.37 (알림기능 추가) 로 업데이트 되었습니다.

 

2011/10/22: v0.36으로 업데이트  (내부 코드 개선, 같은 탭 계속 이용) 되었습니다.

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)

Browser game + 종이모형은 옛날부터 생각하던 아이템 중 하나입니다.

Browser game 또는 웹게임은, 아주 오래전 텍스트 기반 턴베이스 전략게임을, 실시간성과 약간의 그래픽 (그냥 상상력을 자극하는 정도에서) 웹브라우져 안에서 진행하는 것입니다.  대표적으로 오게임이나 이카리엄 등이 있습니다.

(훌륭한 ^^’ 그래픽의 오게임-쉽야드 메뉴)

(아기자기한 그래픽의 이카리엄-도시뷰)

위 두 게임을 포함해서, 거의 대부분의 browser game들은, 약간 다른 배경 (오게임은 미래의 우주, 이카리엄은 중세 등)에서 필요한 자원을 채취/가공하여 건물을 짓고, 기술등을 연구하여, 전투 유닛을 만들어서 주변의 다른 이용자와 전쟁/협력을 하면서 그 세력을 넓혀가는 구조를 가지고 있습니다.  기본적인 전략게임 형태이죠.  다른 점이라면 한번 시작된 browser game은 다시 시작하는것 없이 쭈욱 간다는 정도입니다.  그래서 먼저 시작한 사람이 장땡이죠. ^^;

종이모형과의 연결점은, browser game에서는 건물이나 유닛이 필요한 자원과 정해진 시간만 흐르면 완성되는 대신, 해당 건물/유닛을 종이모형 전개도로 (조건이 되면) 제공하고 이를 제작해서 올리면 그 건물/유닛을 이용 가능하도록 대체하는 것입니다.  즉, 건물 완성시간이 정해져 있는 것이 아니라, 사용자가 얼마나 빨리 완성작을 만드냐에 달린것이죠.  물론 다양한 전개도를 제공해야하고, 완성작 자동인식 등의 기술적 문제점들이 있지만, 큰 아이디어는 테크트리처럼 낮은 레벨의 전개도를 만들어야 다음 레벨의 전개도를 만들수 있도록 한다는 점입니다. 약간의 게임성과 더불어..

어쨋든 이러한 아이디어을 시도하기 위해서, 한동안 php 기반 browser game 엔진을 검색했던 적이 있습니다.  그때에는 예상과는 달리 비슷한 시도가 없더군요.  그러다가 며칠전에 한번더 검색을 했는데, 다음과 같은 프로젝트가 검색되었습니다.

Php strategy game engine ( http://sourceforge.net/projects/phpstrategygame/ )

프로젝트의 목표는 사용자가 원하는 browser game을 쉽게 구현하기 위한 템플릿과 엔진을 제공하는 것 같습니다.  행성-행성계-우주 의 오게임 구조, 도시-섬-세계 의 이카리엄 구조등의 물리적 위치나,  자원-건물-유닛-기술 등의 여러 상관관계 등, 많은 부분이 일반화 될 수 있는 특성을 잘 살려서 핵심이 되는 부분을 엔진 형태로 제공하고 있습니다.  그 위에 자신이 원하는 형태의 게임을 템플릿등으로 만들어 올리는 것을 목표로 하고 있습니다.

(Phpsge: construction 메뉴)

(Phpsge: barracks 메뉴)

(Phpsge: map 메뉴)

(Phpsge: admin-manage units 메뉴)

위 스크린샷들은, phpsge2.3 버전을 로컬로 인스톨한 게임 화면들입니다.  당연히 이미지들이나 화면구성은 뒤떨어지지만, 기본적인 구조 (건물, 전투유닛, 맵: 위 세화면)을 가지고 있고, admin 메뉴(맨 아래 화면)에서는 이들의 속성(필요한 자원, 시간)을 바꾸거나 새로 추가할 수 있는 기능이 있습니다.  아직 버그도 많고, 기능도 현존하는 게임에 비하면 많이 떨어지지만, 지금 계속 개발되고 있으니 곧 쓸만한 엔진이 될것 같습니다.  (현재 버전 2.4가 나왔네요)

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

이름하여 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)

다른 이유로 웹을 검색하다, 문뜩 블렌더에 전개기능이 있거나 있을거라는 옛 기억이 떠올라서 찾아봤습니다.

우선 발견한 것은, 블렌더의 unfold기능을 사용하기 쉽게 만든 익스텐션들이었고, 그중 하나가 블렌더위키에 등록된것이 있고, Team Finalpaper에 간단한 소개를 올려놓았습니다.

다른 하나는, 좀더 흥미있는 소식인데, 블렌더를 이용한 종이모형 디자인 이라는 제목의 eBook이 배포되었다는 것입니다.  역시 TFP에 간단한 소개글을 올려놨습니다.  227페이지라는 짧지 않은, 그리고 내용이 굉장히 알차보이는 이런 책을 무료로 배포한다는 사실이.. 조금은 나를 부끄럽게 했습니다.. 그 근성과 순수?한 열정에..

Next Page →