미니홈피 갤러리 그림 그리기툴 개편

Project/Web 2009. 1. 20. 10:37


오랜만에 재미있는 작업을 마무리 하고 오늘 오픈 하게 되었다. 만드는 서비스에 애정을 갖고 접근한 기획자, 개발자, 디저이너분들 덕에 즐겁게 작업할 수 있었다.

이번에 개편한 미니홈피 갤러리는 기존의 이미지 저장 형태를 벗어나 그리는 과정을 재생하는 기능을 제공하며 일반 동영상 플레이어처럼 외부 블로그로 퍼가기가 가능한 것이 특징이다.

개발 과정에서 FlashPlayer10버전이 배포되어 개발 버전에 고민을 했었는데 결국 두 버전을 혼용하는 것으로 개발을 진행하였다. 일부 기능(PC 저장하기)은 FlashPlayer10버전에서만 지원하며 나머지는 FlashPlayer9 버전에서도 정상적으로 사용 가능하도록 개발 하였다.

현재 일반, 칠판 그래피티와 같은 브러시 타입을 지원하며 기존의 갤러리툴에서 사용했던 도형도 일부 적용 하였다. 이번 작업은 테스트 주도적 프로세스로 진행했기 때문에 개발 중간에 발생할 수 있는 시행착오를 줄일 수 있었다. 개발자의 의도와 방향성을 충분히 배려하고 존중해준 기획자 분들에게 감사를 전한다.



http://www.cyworld.com/main2/notice/view.asp?seq=2123




    

설정

트랙백

댓글

인간은 인간이다.

Miscellaneous/Story 2009. 1. 9. 03:18
나는 평소에 말을 잘 안 하는 편이다. 말 수도 없거니와 말주변도 변변치 못한 내 자신을 너무나도 잘 알고 있기 때문일 것이다. 그런데 이런 나를 두고 생각조차 하기 싫어하는 99%의 잉여인간으로 생각하는 사람이 간혹 있는 것 같다. 물론 내가 잉여인간인지 아닌지는 내 스스로도 고민하고 있는 터라 아니다라고 반박할 수 있는 근거는 없다. 이것이 현재 나의 문제라면 문제다.

사실 ①나를 잘 알지 못하는 사람의 생각을 무시할 수 없는 나의 잘못도 있다. 그 중 하나는 ‘나도 같은 생각이야’ 라고 이야기하여 다른 사람이 그런 판단을 하지 않도록 만들지 않는 ②불성실함이다. 그가 나를 판단할 때, 적어도 생각 없는 사람으로 치부하지 않도록 할 ③의무를 나는 다하지 않았다는 것이다.

독일의 철학자 피히테가 인간은 인간 사이에서만 인간이라고 이야기하여 나의 삶에 약간의 간섭을 주었지만, 한자의 사람인과 사이 간자를 보며 ‘참 잘 그렸네’ 라고 생각할 때만 해도 나는 이런 생각을 할 필요가 없었다.

인간 사이에서의 인간은 영향을 주고 간섭을 받기도 하지만 그것 자체로 충분하다. 적어도 내 자신에게 영향을 주지 않는 사람까지 그릇된 시선으로 신의 판결을 내리지는 말자는 말이다.

물론 위에서 이야기한 사람은 주위에 없는 사람이니 이 글을 읽는 분들은 자기성찰 하는 글이거니 하면 될 것이다. 알고 보면 본인은 지금 이 글을 읽고 있는 분의 옆 사람 보다 웃긴 놈이다. ^^

[각주]
①나를 잘 알지 못하는 사람
본인의 블로그에 평생 방문하지 않을 것 같은 사람 또는 동물(?!)

②불성실함
자신의 생각을 남에게 이야기 하지 아니하거나 타인이 암묵으로 요구하는 대화를 매끄럽게 이어주지 않는 행위나 침묵.

③의무
신은 인간에게 자유를 주었는데 그 중 하나는 침묵이다. 사람으로서 할 일이지 사람에게 할 일은 아니다.

    

설정

트랙백

댓글

정보를 효율적으로 정리하는 방법?

User Interface/Etc 2009. 1. 4. 06:03

인터넷이 발전하면서 사람들의 뇌리에는 ‘인터넷’ == ‘정보의 홍수’ 라는 관계가 성립되었다. 그만큼 인터넷으로 얻을 수 있는 정보는 다양하고 그 양 또한 천문학적이다. 이러한 인터넷에 널려 있는 정보를 효율적으로 찾고, 보여주기 위해 검색엔진을 바탕으로 인터넷 사업이 뿌리를 내렸다.


아래로는 검색을 효율적으로 하는 방법을 모색을 하고, 위로는 사용자의 편의를 위한 UI 구성을 고민하고 있는 식물이 인터넷에 자라고 있는 것이다. 둘 모두 사용자를 위한 자선사업 같아 보이지만 그 안을 들여다보면 이러한 순진한 생각은 스스로에게 미안함을 느끼게 할지도 모를 일이다.



예전에 구글에서 Picasa라는 프로그램을 처음 론칭했을 때 사용해보고 내 컴퓨터에 이러한 이미지가 있었나 했던 기억이 난다. 그만큼 정보는 인터넷뿐만이 아니라 개인 컴퓨터에서도 번식을 하고 있는 것이다.

얼마 전에 팀 내에서 서버관리에 대하여 논의를 한 적이 있다. 프로젝트 소스 관리를 어떻게 하는 것이 좋을지에 대한 논의였는데 논의의 주는 폴더 관리였다. 큰 프로젝트를 제외하고 개별적인 작업은 작업자명을 기준으로 하여 그 아래 서비스 폴더를 정하자는 의견과 서비스 폴더에서 개인별 식별 네임을 지정하는 것이었다. 둘 다 서로 장단점이 있을 것이다.

개인별 폴더를 기준으로 할 경우 작업자를 명확하게 확인할 수 있고 대응할 수 있으며 각자가 관리하기 쉽다. 반면 기존의 작업자가 퇴사할 경우 더 이상 폴더명으로서의 기능은 의미가 없어진다. 서비스폴더를 기준으로 할 경우에는 자신의 폴더가 서비스 폴더 아래에 있기 때문에 관리하기가 다소 불편한 반면 전사의 서비스를 대응하는 입장에서 조직 내에서 공유하고 체계적인 관리를 통해서 공동 의식을 심어줄 수 있을 것이다. 

어느 것이 옳다 옳지 않다고 이야기 할 수는 없지만 그 목적이 어디에 있느냐에 따라 바람직한 판단은 있을 수 있다.

사실 이러한 논의를 하게 한 것은 위에서 이야기한 접근성과 목적이라는 관념의 차이에서 발생하는 것이 아니라 결코 따를 수 밖에 없는 환경에서 비롯된 것이라고 생각한다. 왜?, 무엇 때문에 운영체제의 폴더는 사용자와 상의도 없이 트리 구조로 구분하고 기억력이 둔한 나 같은 사람을 어리석게 만드는 것일까?

폴더 구조는 사용자를 위한 환경이 아니라 시스템을 위한 환경이라는 생각이다. 나는 서비스별로 구별된 폴더로 접근하고 싶기도 하며, 때로는 작업자 별로 분류된 폴더로 보고 싶기도 하다는 것이 사용자 입장인 반면, 둘 중에 하나만 선택해서 관리해야 한다는 것이 시스템의 입장인 것이다. 이런 폴더 구조는 사용자가 자칫 중간 폴더명을 기억하지 못하는 상황에서는 그 폴더 아래에 있는 모든 정보는 찾을 수 없는 쓰레기 정보가 되기 쉽다. 그렇다면 사용자 입장의 환경을 만들기 위해서는 어떤 방법으로 관리하는 것이 좋을까?

한 가지 대안은 태그를 통해서 관리하는 것이 있을 것이다. 구글의 Picasa 프로그램은 이미지에 태그를 입력할 수 있도록 하고 태그를 통해서 로컬 이미지를 검색할 수 있도록 하고 있다. 하지만 태그명을 만드는 것도 일이거니와 같은 사람이 사용을 하더라도 시간의 흐름에 따라서 태그명을 통해서 느끼는 이미지는 머리 속에서 변화하기 마련이다. 또한, 개인이 생각할 수 있는 태그명은 한정되어 있고 그 한정된 태그를 통해서 모든 자료를 관리한다면 찾아야 하는 정보보다 필요 없는 정보가 더욱 많아질 것이다. 그렇다면 다른 대안은?

현재 운영체제의 폴더명은 그것이 하나의 정보를 가지고 있는 것이 아니라 관련 정보가 하드의 어느 섹터에 위치해 있는지 알려주는 포인터 역할만 하고 있다. 그렇다면 폴더명 자체로서 정보를 갖고 있으면 안될까? 예를 들면 “회사”라는 폴더명이 있다면 “회사”라는 폴더명을 클릭하면 회사->서비스->작업자 형태로 보여주고, 회사를 더블클릭하면 서비스폴더가 먼저 나타나게 하고, 회사 폴더에서 회사->작업자->서비스로 설정해 놓으면 회사를 더블클릭시 작업자 폴더가 먼저 나타나게 하는 것이다.

어쩌면 이 방법도 기존의 단순한 구조를 통해서 길들여진 사용자로 하여금 더욱 복잡한 고민을 하게 할 수도 있다. 하지만 적어도 정보를 관리하는 사용자에게 선택권이 주어지는 것은 바람직한 것이라 생각한다. 기존에 응용프로그램으로 존재하는 것일지도 모를 일이지만 말이다.

나는 오늘도 C파티션의 용량이 부족하여 필요 없는 파일을 찾아 삭제하느라 한 시간을 소비했다. 시스템은 이런 나의 감정을 아는지 모르는지 좋다고 작업 진행을 허락 한다… 메롱이다~

    

설정

트랙백

댓글

미네르바가 추천했다는 다큐멘터리 시대정신( Zeitgeist )

Miscellaneous/Politics&Economy 2009. 1. 3. 21:59
얼마전에 회사 동료가 보내준 동영상을 보면서 무료한 휴가를 알차게 보낼 수 있었는데 웹에 올라와 있는 영상들이 있어서 모아봤다.

요즘은 정치 경제에 관심이 없는 사람들도 찝찝한 뒷담화를 제공하는 높으신 양반 덕분에 많은 분들의 화제거리가 되고 있는 것 같다.

이 다큐를 보면서 세상을 움직이고 있는 것은 우리가 알고 있는 것, 그 이상일 수 있다는 생각을 해보면 좋을 것 같다. 현재 돌아가고 있는 세상 모든 규율과 법칙에서 참여권을 놓고 싶은 마음까지 들 정도로 내용이 가히 충격적이다. 특히 경제관점에서의 세상의 흐름에서는…

보는 동안 머리 속에서 떠나질 않는 사람이 있었으니 언제 어디서나 마이크만 들이대면 경제 논리를 찬양하는 양반이시다.

어찌 되었던 이 동영상을 보지 않으신 분들은 한번쯤 시간 내서 보기 바란다. 뼈 속까지 깊숙이 전해오는 전율을 느끼시는 분들도 한 둘이 아닐 것이다. (2007년, 2008년 연이어 Hollywood Activist film Festival에서 작품상을 수상했다고 한다.)




1편
http://tvpot.daum.net/v/11825476


2편(후속편)
http://tvpot.daum.net/v/11825554


제 3장 전편(후속편에 포함되어 있음)
http://www.mncast.com/pages/player/new_fullplayer.asp?movieid=10031671220081201102955&lp=-1&chknum=1


경향신문 기사 내용
http://weekly.khan.co.kr/khnm.html?mode=view&code=115&artid=18697


시대정신 공식홈페이지 : http://www.zeitgeistmovie.com



    

설정

트랙백

댓글

Box2D로 표현할 수 있는 것

Project/Programming 2009. 1. 3. 19:21
Box2D 물리 엔진을 이용하여 표현할 수 있는 방법 모색과 구조 공부를 위해서 사용해 보았었다. Box2D는 ActionScript 기반으로 제작된 것이 아니라 타 언어로 개발되어 다양한 프로그래밍 언어로 변화하였기 때문에 ActionScript 구조나 효율적인 면에서 다소 ActionScript와 맞지 않는 형태를 취하고 있다.

예를 들면 Box2D에서는 기본적인 수치 계산에 사용하는 값은  실 세계의 관점에서 미터 단위로 값을 사용하고 있다. 또한 무게도 kg단위로 표현이 되는데, 이로 인해서 표시객체로서 화면에 표현할 때는 다시 미터 단위를 pixel 단위로 변환해야 하는 수치계산부가 포함된다. 이로 인해서 불필요한 연산을 포함하게 되는 것이다.

그렇다고 하더라도 기본적인 프로그래밍 언어적인 측면에서 짜임새 있는 구조를 취하고 있다.
 
샘플로 제작한 결과물은 Box2D에서 사용할 수 있는 오브젝트 생성 및 오브젝트 끼리 서로 연관성을 유지할 수 있도록 연결해 주는 Joint을 통해서 서로 연결 관계를 만들어 낼 수 있다.

샘플 이미지



샘플 플래시




일단 화면에서 마우스를 드래그 하여 오브젝트를 생성 할 수 있다. 왼쪽에 나타나 있는 메뉴 버튼에 따라서 생성할 모양을 선택할 수 있다. 상단의 3개의 버튼(u,j,m)은 u는 unit 생성 메뉴를 나타내고 j는 joint 메뉴, 그리고 m은 생성한 오브젝트를 이동(move) 할 수 있는 기능 메뉴이다.

일단 생성할 수 있는 기본적인 오브젝트 모양은 삼각부터 8각까지이고 마지막 f는 자유로운 선 연결을 통해서 자율각도의 도형을 만들 수 있다. 자율도형의 경우에도 8개의 각만을 유지하는데 이는 Box2D(일반 다른 물리엔진에서도 대체적으로 그러하다)에서 8각 이상의 오브젝트에서는 물리 연산에 있어서 오류가 발생한다. 이는 각이 많은 경우 각에 따른 관성과 마찰력을 만들어 내는 연산에 있어서 한계점이라고 이해하면 될 것 같다.

각을 많이 만들 수 없기 때문에 단일 오브젝트로 자유로운 형태의 모양을 만들고 그것에 이미지를 맵핑 할 수 없는 것은 여러 개의 오브젝트를 묶어서 표현 할 수 있을 것이다.

또한 Box2D에서 자율 각도의 도형을 만들 때 지켜야 할 규칙에 대한 이야기를 하고 있는데 이는 이전 각도와 다음 각도의 연장선에서 안쪽에 새로운 각을 생성하면 엔진에 오류가 발생한다. 이는 물리엔진에서 표면의 각도에 따라 충돌 계산을 처리하는데 표면 안팎을 구분할 수 없는 계산의 사각이 발생하기 때문이다. 따라서 샘플에서는 자율도형을 만들 때에는 가이드 라인을 제공하고 있으며 그 가이드 색에 포인트를 생성할 수 없도록 처리해 놓았다. 그리고 Box2D에서 약간의 오류가 있는데 자율도형을 만들 때 시계방향으로 만들면 대체적으로 문제가 없지만 시계 반대방향으로 각도를 만들면 문제가 발생한다. 따라서 샘플에서 만들어진 자율도형의 경우에는 시계 반대방향으로  만들어진 각도의 포인터 배열 순서를 역으로 reverse하여 처리하였다.

오른쪽 상단의 메뉴 j에서는 Box2D에서 제공하는 joint 기능들을 포함하고 있다. 몇몇 기능은 구현되지 않거나 구현 과정에 있는 것들도 있다.

Joint는 오브젝트와 오브젝트를 잇는 역할을 한다. Box2D에서는 6종류의 조인트를 지원하고 있다.

b2DistanceJointDef
이는 오브젝트의 거리를 일정하게 유지하는 조인트이다.

B2RevoluteJointDef
이는 오브젝트와 오브젝트간의 연결을 통해 회전시키는 역할을 한다. 사람의 팔과 다리와 같은 관절 역할을 한다고 보면 될 것 같다.

b2PrismaticJointDef
이는 피스톤 같은 움직임을 표현한다. 오브젝트간의 직선으로 연결된 길을 통해서 직선 운동을 한다.

b2PulleyJointDef
도르래 같은 기능을 하는 조인트이다.

b2GearJointDef
기어 조인트이다. 기어에 의해서 연결되고 있는 관계를 나타내는 조인트이다.

b2MouseJointDef
마우스 조인트는 오브젝트를 마우스 인터랙션을 통해서 움직이기 위한 조인트이다. 샘플에서 오브젝트를 마우스로 클릭 후 드래그(메뉴중 M버튼이 눌려진 상태에서만)를 통해서 이동 가능한 것도 마우스 조인트를 사용하고 있기 때문이다.

그리고 샘플에서 마우스 오른쪽 버튼을 통해서 context 메뉴를 제공하고 있는데 오브젝트를 삭제하는 기능과 오브젝트의 정보를 확인하고 수정 할 수 있는 info 메뉴가 그것이다.

Info와 Remove 기능은 생성한 오브젝트 위에서만 사용 가능하다. 선택되는 오브젝트가 없을 때에는 기능이 처리되지 않는다. Remove는 해당 오보젝트를 바로 삭제해 준다. Info는 해당 오브젝트의 정보 값들을 오른쪽에 표시해 주고 있는데 해당 값들을 변경함으로써 오브젝트의 물리 값들을 변경할 수 있다. 예를 들면 마찰력, 관성, 탄력등…

또한 색 변경과 static으로 물리역학에 영향을 받지 않는(멈춰있는 장애물) 오브젝트로 만들 수도 있다.

왼쪽 하단에는 물리역학이 적용되고 있는 영역의 중력 값을 변경 할 수 있다. 실 세계에서의 중력은 위에서 아래(Y축)로만 적용되지만 여기서는 X축으로도 적용 가능하여 바람에 날리는 형태의 환경도 만들어 낼 수 있다.

그리고 마지막으로 화면에서 shift 키를 누른 상태에서 마우스로 원을 그리면 전체적인 메뉴를 볼 수 있는데 기능 중에는 구현되지 않은 것들도 있다. Fullscreen으로 적용할 경우 키보드를 사용할 수 없으니 normal 화면에서 사용할 수 있다.

몇 개월 전에 만들었던 결과물이지만 중간에 다른 일들로 인하여 잠시 손을 놓고 있었다. 사용하다 보면 약간 버그도 발생하고 있는데 나중에 시간이 허락되면 Box2D를 사용하는 방법에 대해서 포스팅을 하면서 수정하도록 하겠다. 시간이 허락이 될지는 잘 모르겠지만 말이다...;;

블로그를 통해서 새해 인사를 하지 못했는데 아무쪼록 제 블로그에 방문하는 모든 분들 2009년에는 명박스럽지 않은 즐거운 해가 되었으면 좋겠다. 모든 분들 새해 복 많이 받으세요~~ ^^

    

설정

트랙백

댓글