Category Archives: 개발개발

라발이홈페이지.png

새로운 중고스킨; [ Moon and Reverse 3rd Edition ]

친구 윤철이 녀석의 홈페이지(http://younchul.g3.cc)는 언젠지 기억도 나지 않는 때에-_-d 만든 페이지다.
녀석이 던져준 배경 이미지 하나와 ‘Moon & River’ 라는 컨셉 하나로, AS2.0 을 더럽게-_- 비벼가며 하루만에 뚝딱 만들어버린 날림 작품. 그런데 만들고 보니 녀석이 던져준 이미지는 보랏빛으로 Colorize 되고 상하 반전이 되면서 ‘Moon & Reverse’ 라는 새로운 컨셉으로 탈바꿈 되었다. 누군가 종종 내가 만든 페이지를 보고 싶어 할 때 내가 그동안 만들었던 수많은 페이지 중에 가장 먼저 보여주었던 페이지이기도 하다. (뭔가 있어 보이잖은가? ㅋ)

사용자 삽입 이미지
시간이 흐르고 흐르고 또 흘러, 우리 친구 녀석들 중에 충훈이 녀석이 가장 먼저 블로그를 시작했고, (shiver`s place http://shiver.co.kr) 지태가 그 뒤를 이었으며 (Bag Of Moonshine http://pathos9.egloos.com) 전역 후 내가 합류했다. (여기에 후발주자로 준영이도 합류, http://werther.oree.net 스킨 곧 수정해주마;;)

그 긴긴 시간동안 내가 하루 걸려 만든 저 날림 페이지를 꿋꿋이 지키며 온갖 불편함을 모조리 다 감수하며 블로그로 넘어오라는 친구들의 부름을 끝끝내 거절하며 버티던 녀석에게. 나름은 선물이고, 나름은 내가 편하기 위해. (또한 재미삼아;) 저 페이지와 같은 디자인의 블로그 스킨을 만들게 되었다.

이름하여,
사용자 삽입 이미지

[ Moon & Reverse - 3rd Edition (Textcube Skin) ]
http://moonandreverse.minsangk.com


아직 손 볼 구석이 좀 많지만, 일단은 대강의 윤곽은 드러낼 정도로 만들었다.
늘 다른 사람들이 만들어 놓은 멋진 스킨을 수정만 해서 쓰다가, 텍스트큐브 스탠다드 스킨을 들고 수정하려니 골은 좀 아팠지만, 나름 재밌었음.

그래서 만드는 김에, 좀 더 범용적으로 쓸 수 있도록 몇 가지 손을 보고 배포할 예정.
그러므로,
대충 둘러보고, 대충 피드백 던져주길 바래효-

lazylog_minsangk_preview.png

[minsangk.com] 리뉴얼 Season2 완료-

사용자 삽입 이미지

기념으로 스냅샷 한방-



이번 컨셉은 ‘하늘과 바람과 별과 시와 코드와 기타-’ 입니다.
제가 너무도 좋아하는 윤동주님의 유고시집 이름에서 살짝 손을 댔습니다. 하늘에 계신 ‘나의 시인’ 윤동주님, 비록 하늘을 우러러 한 점 부끄럼 없이 살 자신은 없습니다만, 끊임없이 치열하게 살아보겠습니다. 시대처럼 올 아침을 최후까지 기다려 보겠습니다. (그러니 시집 이름 갖다쓴건 용서를 바랍니다. ㅋ)

Tiskin 님의 Adagio 스킨을 변형하여 제작 중이던 adagio_minsangk 스킨으로 수정하려다가 너무도 좋은 스킨을 발견하여 부득이 새로 작업을 들어갔습니다. 이번 리뉴얼의 원본 스킨은 Qwer999 님이 만드신 LazyLog Smoke Version 1.1 입니다. LazyLog 스킨은 세 가지 색상 중 어느 하나 고르기가 너무도 고민일 만큼 멋진 스킨이었는데요, LazyLog_Night 의 색상이 너무너무 마음에 들어 끝까지 고민하다, 결국 원래 하고자 했던 컨셉에 맞추어 Smoke 버젼을 수정하기로 결정했습니다.


수정사항은,

 - 배경 이미지를 연한 녹색 톤으로 (친구들이 고려청자 컨셉이냐고 물었던 그 색, 다시 나왔군요. 제가 좀 좋아하는 색;) Colorize 했습니다. 통 이미지로 되어 있어 작업이 무진장 편리했습니다.

 - 전체적인 폰트를 ‘맑은 고딕’으로 수정했습니다. XP 기본 글꼴부터 VS, 플래시, 플렉스, 드림위버, RadRails, 메모장, Eclipse 모두를 맑은 고딕으로 사용할 만큼 ClearType 적용된 맑은 고딕을 좋아라 합니다. ClearType 설정이 되어 있지 않은 컴퓨터에서는 의도하지 않은 레이아웃이 나올 수 있습니다.

 - 메인 타이틀 로고를 플래시로 수정했습니다. 이전 adagio_minsangk 에서 쓰던 눈송이 (먼지송이로 착각되지만;) 애니메이션은 과감히 버리고 새로 두드렸네요. 따스하고 부드러운 느낌의 날개 애니메이션을 만들고 싶었는데 만들면 만들 수록 거미나 문어 느낌이 나서 여러번 좌절했습니다ㅠ 기회가 된다면 거미씨와 문어씨 애니메이션을 만들어 올려보겠습니다 -_- 어쨌거나 날개 느낌을 살짝 줄이고, Rotation 을 후하게 쓰니 묘하게 마음에 드는 움직임이 나왔네요. 지속적으로 수정이 될 가능성도 있지만 당분간은 올려 놓겠습니다.

 - 개별 포스트 타이틀 (Article Title) 을 플래시로 수정했습니다. 파도 애니메이션은 오늘 처음 시도 해 봤는데, 적용할 수 있는 부분이 많을 듯 하네요. 단순하면서도 멋진 결과가 참 많이 나옵니다. 여기서는 마스크와 Shape Tween 을 활용해 간단히 만들어 봤습니다. (이런 예제가 없더군요; 기회가 된다면 이것도 포스팅 해보겠습니다) 제목값 전달은 flashVars 를 이용했습니다. 나름 원시적-_-인 방법이지만, 이 경우는 가장 효율적인 방법이었지요. 텍스트큐브(, 물론 그 이전에 태터툴즈)와 플래시를 결합하는 여러가지 방법을 고민한 포스트가 있었는데, 당시 그 포스트에선 참 여러가지 복잡한 방법들을 썼었지요. 하지만 요런 간단한 접목엔 굳이 XML 파싱해서 쓰는 불편함을 감수할 필요가 전혀 없습니다.

 ! 플래시 제작은 금방 했으나 Embed 에 훨씬 많은 시간이 걸렸습니다. 스킨 수정할 때는 반드시 텍스트큐브 설정에서 ‘스킨 캐쉬’를 끄고 테스트하세요. 그렇지 않으면 임시 인터넷 파일들을 이잡듯이 뒤져가며 테스팅해야 합니다. (실제로 반나절을 그렇게 했습니다 -_-)

- 그 외 가벼운 몇가지 수정이 있었습니다만, 너무 소소한 것들이고 나름 비밀스런 링크들도 있는지라(ㅋ) 찾아보는 재미를 드리겠습니다. (과연 누가 찾아볼지는 의문, 찾으면 롯데월드 1일 자유이용권- 을 들고 모든 놀이기구를 탈 수 있는 용기를 북돋아 드리겠습니다)


트럭으로 쌓여있는-_- 기능적 업데이트는 차차 해 볼 생각입니다. PHP 로 부벼댈까 했는데 왠지 시간 낭비가 되지 않을까 하는 걱정이 들었거든요. 요즘 배우고 있는 루비온레일스 숙련도 차근차근히 올려 하나하나 테스트 해 보겠습니다.


예정사항은-

 - 카테고리 단위로 애니메이션이 작동하는, creative 한 UI 의 블로그 커버 메뉴
 - 대학생 (특히 공대생) 전용 블로그 스케쥴러
 - 경호와 함께 미적대며-_- 제작 중인 백문백답 위젯
 - 백스페이스 키가 안 먹는 오타 문답
 - 블로그와 동기화 되어 작동하는 포토 갤러리
 - 다양한 재미가 있는 프로필 페이지
 - 세븐데이즈(http://7days.metaschool.org) 의 블로그판 ‘나 자신과의 약속’ 위젯.

등이 있지만, 일단 블로그 스케쥴러가 가장 우선순위가 높습니다. 개강 전에 기본 틀이라도 만들어 써먹어야 할 텐데요. 시간 내에 될지는 잘 모르겠습니다 -.-.-


아무튼 이번 리뉴얼.
이전 리뉴얼에 비해 별다른 잔 기술들이 그다지 많이 들어가지는 않았지만, 느낌상으로 참 마음에 듭니다.
원 제작자인 Qwer999 님께 다시 한번 감사드리고 싶네요.

어쨌거나,
오랜만에 쓰는 경어체 포스팅이로군요 ㅋ

Study Hard- 공부하자, 빡씨게-

어느 순간이 시작이었는지는 모르겠다.
나는 지금 Web Application Developer 가 되기로 마음 먹고 있다.
(그리고 어느 정도는 됐다고 해야 하나;)


[#M_내가 프로그래머가 되겠다고 생각하게 된 것은... (열기)|내가 프로그래머가 되겠다고 생각하게 된 것은... (닫기)|프로그래밍은 초등학교 때 퍼스널컴퓨터경진대회(정보올림피아드의 전신격인 대회) 에 참가하라는 선생님의 강권-_-에 잠깐 두리번거렸던 GW-Basic 이 시작이었다. 마땅한 테스트 환경도 없었고 (심지어 GWBASIC.COM 파일조차 없었으니 ㅋ) 그냥 무작정 친척형이 주고 간 책 한 권을 읽은 게 다였는데 덜컥 장려상을 타버렸다. 동상 이상이면 바로 시 대회 참가자격이 주어졌으니, 만약 내가 당시에 조금 더 공부를 열심히 했었다면 내 인생이 어떻게 바뀌었을지 자못 궁금하기도 하다.

중1 말에 동네 컴퓨터 학원에서 C언어를 배웠다. 초등학교 4학년부터 다니기 시작한 학원이었는데 내가 더이상 배울 게 없어지자 (그 학원의 거의 모든 수업을 다 들었으니까) 나와 몇몇 장기 수강-_- 학생들을 위한 원장님의 배려로 개설된 강좌였다. Turbo C 의 파란색 코드 스크린이 왜 그리 좋았는지 모른다. 그 때부터 참 이것저것 많이 배웠다. 당시에 나름 인기였던 비베(Visual Basic)와 델파이(Delphi)도 해봤다. 나를 가르쳤던 손동우 선생님이 조금만 더 나를 채찍질 하고 기본기를 닦아주었다면 좋았을걸 하는 아쉬움도 있지만, 어쨌거나 어린 나이에 이것저것 여러 언어들을 다뤄봤던 경험은 소중하게 남았다. (지금은 어디 계신지 연락도 안 되지만 꼭 한번 만나고 싶다)

중3 때 고등학교 과목들을 미리 배운다고 선수학습 하고 난리일 때, (정석과 성문 따위를 공부하는 애들이 반에 다섯 이상은 되던 때에) 나는 나름 C++ 계의 명저라고 할 수 있는 Sams Publishing 의 Teach Yourself C++ 를 껴안고 연습장에 코드들을 적으며 지냈다. 확실히 지금 봐도 좀 어리벙벙하게 볼 만큼 재미없는 책이고 설명도 그냥 나열식인데다가 번역도 그지 같은 책인데 그 땐 그냥 그런 어려운 책이라 더 좋아했던 것 같다.

고1 때 정보올림피아드 준비했던 이야기는 그간 많이 썼으니 패스.
고2 부터 PHP 를 시작했다. 홈페이지를 만드느라 제로보드 스킨을 공부했었고 그 때문에 약간의 사전지식 정도는 있던 스크립트지만, 이걸 제대로 시작하게 된 건 정말 웃기도록 단순한 이유였다. 당시 사귀던 여자친구(나름 풋풋한 내 인생의 첫사랑, ㅋ) 에게 보여주고자 D-Days Checker 를 만들기 위한 것이다. 사귄지 몇일 됐는지 알려주는 단순한 형태에서 200일 300일 기념일까지 알려주고 날짜에 따라 다른 음악까지 틀어주는 형태로 버젼업을 계속했다. 참 웃기지만, 그 친구와 헤어지고나서도 버젼업은 계속 됐다. 지금은 이 코드가 어디 갔는지 모르겠지만;

웹 프로그래밍을 제대로 시작한 건 제대 후였다. 군대 가기 전에 관심을 갖던 플래시 액션스크립트는 내가 군대에 있는 동안 3.0 이 대세가 되었고, 병장 때 틈틈이 공부하던 AS 2.0 코드들은 제대 후 쓸모가 없어졌다. 3.0 으로 마이그레이션 하며 공부하는 일은 여러모로 골치가 좀 아팠다. 컴공 다니는 후배의 숙제를 해주다가 지금 실력으론 답이 안 나오자 밤 새는 날이 길어졌고 덕분에 PHP 에 대한 이해도는 무진장 올라갔다.

우연히 지춘이 녀석을 통해 알게 된 실타래. 홀로 공부하던 그 긴긴 날들이 의미를 갖게 한 나름 소중한 시간, 이었지만. 모든 것들이 손발 맞는 느낌은 확실히 아니었다. 아이디어 수준의 기획을 공학 기반의 기획으로 바꾸는 일이 혼자서는 조금 버거웠다. 기획도 중간에 여러번 수정되었고, 그럴 수록 모자란 내 실력에 대한 안타까움이 늘었다. (약간의 자신감도 같이 크긴 했다)_M#]


… 이랬다.


하면 할 수록 공부 할 것들만 늘어간다.

경호 녀석의 뽐뿌질로 시작하게 된 Ruby On Rails.
배우면 배울 수록 재밌는 스크립트 언어다. 지금까지 내가 해왔던 것들과는 너무 다른 형태의 문법이 여러모로 좀 낯설지만 그런 것들을 배울만한 가치는 충분해 보인다. Ruby 와 Rails 모두. 아직은 Ruby 언어가 익숙치 않아 Rails 가 조금 답보 상태. Ruby 책을 또 사야 하나.

갈수록 알흠다워지는 Flex Flash
Flex Builder 3 는 ‘아직 시기상조인가;’ 싶었던 아쉬움을 날려줬다. 인간적으로 Builder 2 의 빌딩 타임은 짜증날 정도였다. 이클립스 기반의 개발 툴도 어느 정도 안정감 있게 자리 잡은 느낌이고, 다른 어떤 언어보다 코딩 감이 좋다. 다만 문제가 발생하면 걸리는 부분이 너무 많아 골치 아픈 점은 여전. 특히 Flash 기반은 더더욱 그렇다. 조금 된 이야기지만 Flash Player 10 이 (베타지만) 릴리즈 된 이후에 그래픽 처리 부분에서 꽤나 큰 성능 향상이 보인다. 조금 화려하다 싶으면 CPU 점유율이 미친듯이 치솟던 이전 버젼들에 비해 GPU 를 사용하는 새 버젼의 느낌은 참 좋다.

기대감이 가득차게 하는 WPF Silverlight
일단 나는 그냥 문법적인 느낌은 C# 이 가장 좋다. 가장 익숙하면서도 가장 간결하다. 또 Visual Studio 기반의 RAD 지원은 말이 필요 없는 최고 수준. (아; 이건 재론의 여지가 있지만 나의 경우 가장 코딩 속도가 붙는다) 하지만 지금 당장 배우기에 너무 많은 것들이 성에 차지 않는다 할까. 똑같은 결과물이 있을 때 이미 Flex 로는 세세한 구성부터 코딩까지 그려지는데 Silverlight 로는 뭐부터 해야 할지 난감하다. 아직 안정성 문제도 좀 떨어지는듯 싶고. 그러나 MSDN 을 믿는다. 플렉스는 우리나라의 용자들이 그 엄청난 노력을 통해 한글화 레퍼런스를 만들어 가고 있지만. MS, 늬들은 사용자들에게 저런걸 시키진 않을거라고 믿는다.

이외에도.
그냥 맛만 본 AJAX 도 Ruby On Rails 공부와 같이 다시금 해야 할 필요가 있을 듯 하고.
여러가지 디자인 패턴들도 공부 선상에 올려놓고 있다. (제일 먼저는 TDD, 근데 이거 배우려면 Python 먼저 배워야 된다;)
Objective-CCocoa 도 배우고 싶다. 이건 맥이 있어야 하니까 당분간은 패스. 음, 사실 이걸 배우고 싶은건지 그냥 맥을 갖고 싶은건지는 모르겠다. 어쩌면 둘 다일 거다. 저걸 보니까 맥이 갖고 싶어진 걸지도 모르고 ㅋ (사실 나는 별로 애플을 좋아하지 않는 사람 중 하나지만)


우선순위를 매기는 것은 힘들다.
그래서 동시에 다 하고 있다.
죽도 밥도 안 되어도 좋다, 먹기만 하자.

FlexBuildPath.png

SWC 컴포넌트의 활용 (SWFLoader 의 대안으로서-)

플래시를 모태로 개발된(혹은 그렇다고 알려진) 플렉스지만, 이 녀석 결정적으로 타임라인을 베이스로 하고 있지 않다. 타임라인이 플래시의 화려함을 만들어내는 기초인데, 그 타임라인을 빼버림으로써 불필요한 동적 로드를 최소화하고 상하위 클래스/인터페이스의 일관성을 갖추게 된 것. ‘Animation Tool’ 에서 ‘Development Tool’ 로의 한 단계 진화인 건 분명한데. 그 덕분에 플렉스에선 플래시처럼 자유도 높은 애니메이션을 구현하기가 무진장 까다로운 일이 되었다. 정형화된 컨트롤 컴포넌트를 이리저리 작당하는거야 뭐 잘들 만들어놨으니 쓰는데 문제가 없지만, 조금만 예뻐보이려 애쓰는 순간 사방팔방에서 태클이 걸려오는거다. 망할.

지금 SealTale 개발 과정에는 모듈화 된 SWF 조각들을 다량으로 로드해야 하는 일이 포함되어 있다. 이 역시 그냥 액션스크립트 모듈이라면 플렉스 컴포넌트로 제작해 사용하면 오죽 좋겠냐만 디자이너와의 협업을 해야하는 상황. 디자이너에게 타임라인은 반드시 무조건 기필코 필요한 필수요소 아닌가. 결국 애니메이션 소요를 플렉스 대신 플래시 기반 (정확히는 타임라인 기반) 으로 만들어내고 이를 플렉스가 제어하는 형태로 기획된 것이다.

여기서 발생한 문제 하나.
플렉스 기본 컨트롤 컴포넌트로 제공하는 SWFLoader- 이거 정말 못쓸 물건이다.
로딩 속도도 마음에 안 들고, Scale 조정에도 지정된 컨텐트 사이즈를 벗어나 홀로 삽질하는 경우가 다반사. 하지만 그 모두를 다 참고 인내하며 해달라는거 다 해주고 어거지로 돌렸더니, 이거, 뭐야. 이거 포커싱이 안된다? 고로, 마우스 이벤트를 죄다 씹어버린다. 망할-.- 자신에게 들어오는 포커스를 전부 로드된 SWF 로 넘겨버리는 과도한 친절함으로 인해 발생한 문제. 따라서 플렉스에 마우스 이벤트가 일어났음을 알리려면 로드된 SWF 의 소스코드에서 LocalConnection 으로 플렉스와 대화하는 수밖에 없는데 이것도 참 못 쓸 물건이다. 사소한 변수 전달 하나에도 코드 소요가 장난 아니고. 한마디로 뭐 이따위로 만들어놨나 싶음.
(레퍼런스에는 정말 친절하게도 SWFLoader 는 애니메이션 로드용이므로 복잡한 사용을 위해서는 커스텀 컴포넌트를 추천합니다- 라고 써놨다. 그래놓고는 커스텀 컴포넌트 사용에 관한 일체 언급이 없다. 제길-.-)

그래서 레퍼런스를 이잡듯이 뒤지고, 네이버 플코카페(http://cafe.naver.com/flexcomponent) 를 손가락에 땀나게 돌아다니며, 이와 더불어 캐삽질을 반복한 끝에, 끝에, 결국 방법을 찾아냈다. (으하, 장하다, 나 이거 찾고 울 뻔 했음. 진짜)

바로 플래시를 플렉스에서 사용 가능한 형태의 SWC 컴포넌트로 만들고, 이를 RSL(Runtime Shared Library) 로 로드하는 방법.

1. 플래시 -> SWC 컴포넌트
 - 위에도 썼다시피 ‘플렉스에서 사용 가능한 형태의’ SWC 컴포넌트로 변환해야 한다. 플래시 Publish Setting 메뉴에 들어있는 Export SWC 옵션에 체크하는거로는 플렉스에서 코빼기도 볼 수 없다.

1053236637.mxp

바로 요 녀석이 기특하게도 그런 막중한 임무를 수행해주는 Extension 파일. CS3 가 설치되어 있다면 mxp 라는 해괴망측한 확장자를 더블클릭만으로 실행할 수가 있다. 실행하고 동의 버튼만 누르면 설치는 대강 다 알아서 함. 그리고 설치해도 뭐 딱히 변화된건 아무것도 없다. 플래시를 들어가면 Commands 메뉴에 Make Flex Components 라는 서브메뉴가 있음을 확인하면 설치 다 된 것임.

사용자 삽입 이미지

사실 이런 메뉴 있는지도 몰랐음;

이 녀석은 꼭 무비클립 단위로만 만들어지게 되어 있으므로, 분산된 모든 코드들을 정리해 하나의 무비클립으로 만들 필요가 있다. 나 역시도 액션스크립트2.0 코더들의 지독한 습관으로 Level0 Action 레이어 1 프레임에 코딩하고 있었던 터라 전부 들어내 하나의 무비클립에 담았다. 그리고 그 무비클립을 Linkage 속성에 들어가 클래스 이름을 지어주고 요 위 그림의 Make Flex Component 를 클릭한다. Trace Window 에 [ Component "Action" is ready to be used in Flex. ] 이 뜨면 완료. 혹시 다른 에러메세지가 떴다면 다른 무엇보다 자신의 코드를 보길 바람. 이 작업은 한번만 해주면 된다. 그 다음은 퍼블리시만 반복해도 플렉스와 대화하는데 문제 없음.

사용자 삽입 이미지

Export SWC

그 다음은 Publish Setting 에 들어가 Export SWC 에 체크하고 Publish-

사용자 삽입 이미지

Properties


다음은 플렉스에서 프로젝트의 Properties – Flex Build Path – Library Path – Add SWC
그리고 Link Type 을 RSL 로 지정해주면 끝난다.
얘도 한번만 하면 된다. RSL 코드가 수정되어도 빌드 한번이면 알아서 인식.

사용자 삽입 이미지

ContentAssist 에 뜨는 Flash 의 변수/함수들-


이쯤되면 나름 감동적임-
LocalConnection 같은 귀찮은 작업 도무지 필요 없다. 플래시에서 코드 수정 후 퍼블리시 한방, 빌드 한방이면 알아서 촤르륵 떠주는 센스.

http://222.111.166.187/favoriteTest/CategoryNavigation.html

아직 작업중이긴 한데, 필요한 부분은 거의 다 완성됐다.
Flex HttpService 로 받은 E4X 포맷의 XMLList 가 바인딩 되었고, 플렉스에서 dispatchEvent 때려도 잘 동작함.
이제 현재 릴리즈용 코드인 TaleMain 과 결합만 하면 실질적으로 이 부분은 마무리 된다.
진정한 SwfLoader 의 대안 도구로서 활용하려면 플래시의 Loader 클래스를 활용해 커스텀 컴포넌트를 따로 하나 제작해야 할 듯 한데 그건 내일 이 시간에-

음, 역시 모르면 고생이고. 알면 재밌다.

네이버검색minsangk.png

네이버에 minsangk.com 으로 검색을 해보니-

사용자 삽입 이미지
난 등록한 적도 없는데 이미 내 사이트가 등록이 되어있었다.
오 불현듯 샘솟는 네이버에 대한 애정.
(사실 내 현실적 장래희망은 NHN 입사인지라-)

그런데 아무리 봐도 설명이 너무 허술하다. 내 개인 홈페이지가 국내 최고의 검색엔진에 등록되었는데,
내 이름 석자조차 안 들어가 있네. 이름으로 검색하면 나와 관련된건 아무것도 안 뜬다. 뭐야 이거;

그래서 이미 등록된 거 수정도 되겠지 하고 네이버를 온통 뒤졌다.
정말 한참을 뒤졌더니 네이버 고객센터에 관련된 공지가 있네.

사용자 삽입 이미지
망할;
내 사이트임에도 불구하고 인증을 받아야 하는 처지가 됐네.
한여름 땡볕에 아이스크림 녹듯이 사라져버린 애정.

postsciprt : 그러나 현재 민증 스캔중 -_-_-

08_바탕화면지정.png

맥이 부럽지 않다-.- Vitual Desktop Manager (PowerToy)

오늘 발견한 멋진 프로그램 하나 소개하고자 한다.

XP 의 잡가지 강력한 기능을 제공하는 PowerToy 중의 하나로, 맥 사용자들이 킹왕짱! 을 외치는 Virtual Desktop 의 XP 버젼이라고 할 수 있다.
엠파이어어스 캡쳐질에 재미들여 본 포스트도 오나성 -.- (오타 아님, 이렇게 썼음 -_-)

충박이 맥북을 샀다. 이 녀석 이런 중대한 포스트거리가 있음에도 불구하고 포스팅을 안하고 있네. 정말 바쁘긴 한가보다. 아무튼 녀석을 바쁘게 한 이래저래 일들 중 단편영화를 만드는 일에 이번에 산 맥북이 정말 효율적이고 강력하게 쓰이고 있단다. 뭐 아무튼 이런저런 얘기를 하다가, 녀석이 맥의 강력한 기능 중 하나인 익스포제(expose)가 킹왕짱 이러길래. 불현듯 Vitual Desktop 이 생각났다. 예전 어디선지 기억도 안 나는 블로그에서 (기억나면 링크라도 달 텐데- 그분께는 죄송; 그런데 누군줄 알아야 죄송하다고 하지;) 맥의 Vitual Desktop 기능을 보고 와 멋지다 했던건데, 왜 그 때는 XP 에도 그런 유사한 프로그램이 있을거라고 생각 못했던거지? -.- 아무튼, 그래서.
찾아봤다. 그래서 나온 녀석.

사용자 삽입 이미지일단 첫 이미지부터가 10여분간의 노고를 잊게하는구나. 하하 -.-.-

이 프로그램, 간단히 말하면, 가상으로 다중모니터를 구현 하는 거다.
위 화면은 프리뷰(이 프로그램 모드 중에 프리뷰모드란게 있다) 인데 분류된 각각의 페이지를 보면 바탕화면도 서로 다른 것이 지정되어 있고, 떠 있는 프로그램도 다르다. 4번 페이지의 윈앰프, 네이트온은 1번 2번 3번에는 눈씻고 찾아봐도 볼 수 없단 얘기. (2번, 3번에 조그맣게 떠 있는 창은 캡쳐를 위해 실행한 프로그램) 이걸 단축키 하나로 왔다갔다 하는 것이며 이 단축키도 내가 원하는대로 설정이 가능하단 것이다. 이 얼마나 기특하고 멋진 프로그램인가.

사용자 삽입 이미지

1번창

사용자 삽입 이미지

2번창

사용자 삽입 이미지

3번창

사용자 삽입 이미지

4번창

일단 바탕화면 자랑질 -.-
1900×1200 해상도의 쓸만한 바탕화면 이미지가 없을거라는 지레 겁먹음으로 그동안은 지금 보고 있는 블로그의 배경 패턴을 바탕화면으로 쓰고 있었더랬다. 이 프로그램을 깔며 혹시나 하는 마음에 인터넷을 뒤져봤더니, 1900×1200 은 물론이거니와 듀얼모니터용 사이즈의 배경화면 (2500 어쩌구 하는, 정확한 해상도는 모르겠다; 아무튼 무지, 무지, 무지 큰 녀석) 도 지천에 널려있던 것이다. 개중 엄선한 4개. 이거 말고도 너무 멋진 이미지가 많아서 종종 번갈아가며 써야겠다 벼르고 있다.

아무튼 이 네가지 화면을 어떻게 쓰느냐?
바로 이렇게-

사용자 삽입 이미지

작업중 프리뷰 화면-


1번창 : 왼쪽에 블로그 메뉴의 데이터를 제공하는 categoryList.php 의 출력화면 (XML 서식) 오른쪽에는 블로그 첫 페이지
 - 이 프로그램을 쓰면 정확히 필요한 양만큼의 (보통은 두개) 윈도우를 띄워 윈도 기본기능인 ‘세로 바둑판식 창 배열’ 만으로 한 창에서 두개의 브라우저를 띄울 수 있다. 진정한 와이드 모니터의 완벽 활용이 이뤄지는 셈.

2번창 : 활성화 창은 플렉스빌더, 작업표시줄을 보면 이 창에 포토샵과 플래시가 숨어있다.
 - 창이 4개까지 밖에 안 되는게 좀 아쉬워지던 부분.

3번창 : 드림위버의 코드뷰
 - 드림위버 하나에도 MDI (Multiple Document Interface, 한마디로 한개의 프로그램 안에 창 여러개를 구현하는 기능) 가 구현되어 있어 3번창에는 이 녀석 말고 다른 녀석을 도무지 넣을 수가 없다. 이 안에서 블로그 스킨을 수정하고, 수많은 php 코드파일들을 불러다 써야 한다.

4번창 : 오른쪽부터- 네이트온, 윈앰프, 네이트온 대화창
 - 평소엔 공간활용이란 명분으로 최소화 되어있다가 필요할때마다 꺼내 쓰던 녀석들. 이제 그럴 필요가 없다. 모두, 화알짝 열어놓았다 -.- 지금은 프리뷰 스크린샷을 위해 반투명을 풀어놓았지만 내가 쓸때는 저 녀석들 모두 반투명 상태라 뒤에 떠 있는 배경화면 이미지와 어울려 스크린샷만으로는 OSX 가 부럽지 않다 -.-.-


음, 이제 이 녀석이 어떤 프로그램이고 어떤 쓸모가 있는지 설명했으니 자세한 사용법을 알아보자.


1041835604.xxx요 녀석을 다운받아서 실행하면 별로 셋팅할 거 없이 바로 설치된다.
그런데 뭐 변한게 없다. 설치실패가 아니다. 이미 설치는 완료됐음.

작업표시줄 도구모음을 열어보자.
작업표시줄이란 윈도 시작메뉴가 떠 있는 화면 아래의 긴 바를 말하는 것이고, 작업표시줄 도구모음은 그 녀석 위에 마우스 오른쪽키를 클릭해서 나오는 팝업메뉴 중 ‘도구모음’을 선택하면 된다. 그럼 Desktop Manager 라는 못 보던 녀석이 있을 것이다. 체크!

사용자 삽입 이미지

MSVDM 도구모음


체크하게 되면 작업표시줄에 이런게 생긴다.
왼쪽으로부터 각각 Preview, 1번창, 2번창, 3번창, 4번창의 바로가기다.
이 녀석 위에 마우스를 올려놓고 오른쪽키를 누르면 위 이미지 같은 팝업 메뉴가 뜰 것이다.
각 메뉴는 이런 기능을 한다.

사용자 삽입 이미지

Configure Desktop Images

Configure Desktop Images : 각 화면마다 다른 배경화면 지정
 - 왼쪽에서 창을 선택하고 오른쪽에서 이미지 파일을 선택한다. 여기 뜨는 녀석들은 c:\windows 폴더와 내문서-내그림 폴더의 bmp, jpg, gif 파일들이 모조리 리스팅 되므로 원하는 배경화면이 있다면 이리로 옮기면 된다. Browse 버튼의 경우 (우리집에서만 그런건지 모르겠지만, 그냥 프로그램이 종료돼버린다-_-)

사용자 삽입 이미지

Configure Shortcut Keys

Configure Shortcut Keys : 각 화면으로 바로가는 단축키 설정
 - 위 이미지는 현재 내가 사용중인 단축키 되겠다. 윈도우키를 누른 상태에서 4까지는 조금 멀어서 ~ 키를 사용하고 있는데 이게 참 편하다. 그래서 4번창을 네이트온, 윈앰프가 항상 떠 있는 화면으로 쓰고 있는 중. (1번과 4번을 자주 왔다갔다 하기 좋다) 프리뷰창에서 원하는 창의 바로가기는 여기서 지정된 키가 아니라 숫자키 1,2,3,4 를 쓰기 때문에 프리뷰 단축키를 Q 로 해놓은 배치도 정말 편리하다. 뭐, 이건 내가 그렇다는거고 각자 편한대로 고쳐쓰면 되는거다 -.-

MSDVM Help : 정말 성의없는 영어 도움말 -_-

Use Animation : 체크되면 프리뷰 화면을 띄우고 선택된 화면으로 이동할 때마다 Resize 애니메이션이 작동하는데 별로 멋없어서 본인은 꺼놓았음. (체크해제)

Shared Desktops : 이거 중요하다. 처음 설치하면 기본값으로 체크된 상태인데, 이 상태에선 어떤 창을 이동해도 작업표시줄에 떠 있는 프로그램 목록은 하나의 창을 쓸 때와 다르지 않다. 오로지 활성화된 창만 다르게 기억해서 보여주고 있다는 얘기. 내가 이 프로그램을 쓰고자 하는 취지와 정면 배치되는 기능이라 시작하자마자 꺼놨다. (처음엔 이거 모르고, 아 젠장 괜히 깔았네 이랬단다 -.-)

음, 더 좋은 프로그램이 있는지는 한번 찾아봐야겠다.
이거 말고도 유사한 프로그램이 많다고 들었는데 그냥 이 녀석에 너무 반해버려서 사용법까지 다 익혀놓고 단축키까지 손에 익어버리고나니 다른 프로그램 설치할 엄두를 못 내고 있다. 다음번 포맷하고 재설치 때는 요 녀석 말고 다른 프로그램을 한번 써봐야겠다. 그 때 그게 이 프로그램보다 좋다고 생각되면 포스팅거리 하나 느는거고 -_-_-

아무튼 요 녀석 덕에 컴퓨터로 하는 작업이 세배는 손쉽고 깔끔해졌으니, 만족-
그대들도 한번 설치해보아요-

[minsangK.com] 플래시 액션스크립트 XML 로드 (블로그 타이틀 02)


플래시가 서버와 데이터를 주고 받는 방법은 이전 포스트 에서 밝혔다시피 여러가지가 있지만, 여기서 사용된 방법은 플래시 액션스크립트 2.0 의 XML 객체의 load 함수를 이용하는 것이다. 방법자체는 크게 어렵지 않다.
우선 플래시에 정보를 전달해주는 녀석은 이거다.
http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce

이 녀석은 GET Method 를 통해 전달된 mode 의 값에 따라 구분 작동하는데,

모드 지정을 안 할 경우 입력된 DB 의 데이터를 XML 로 뿌려준다 (모드 미지정)
XML 로 최신 노드 하나만을 뿌려주거나 (xmlOnce 모드)
HTML 의 테이블 태그를 이용해 뿌려주거나 (html 모드)


[#M_XML 로드 코드 (열기)|XML 로드 코드 (닫기)|
(Language : actionscript 2.0)


  1. System.useCodepage = true;


  2.  


  3. myXML = new XML();


  4. myXML.load("http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce");


  5. myXML.ignoreWhite=true;


  6.  


  7. myXML.onLoad = synchroText;


  8.  


  9. function synchroText(success)


  10. {


  11.  if(success) {


  12.   mcMent.dynamicMent.text = myXML.firstChild.firstChild.firstChild.nodeValue;


  13.   mcDate.dynamicDate.text = myXML.firstChild.firstChild.attributes.date;


  14.  }


  15.  else {


  16.   mcMent.dynamicMent.text = "Comment Load Failed";


  17.   mcDate.dynamicDate.text = "Date Load Failed";


  18.  }


  19. }

_M#]
실제 코드는 눈물이 날 정도로 간단하다.
xml 을 로드하고 로드가 완료되면 뿌려준다- 이게 끝-.-

설명하고 말 것도 없는 단촐한 코드지만 몇가지만 짚자면.

(Language : javascript)


  1. System.useCodepage = true;

이게 없으면 한글 입력을 플래시가 못 알아듣는다.

(Language : javascript)


  1. myXML = new XML();


  2. myXML.load(“http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce”);


  3. myXML.ignoreWhite=true;

myXML 이라는 객체를 만들고, load 메소드로 XML 을 가져온다.
마지막 줄은 가져온 파일에서 공백을 삭제하라는 구문으로 정확한 XML 노드트리의 작동을 위해 꼭 필요하다.

onLoad 함수는 지정된 주소에서 값을 가져와 로드가 완료되면 (성공이든 실패든) 호출된다. 매개변수로 성공/실패 여부를 알려주는 boolean 변수를 하나 주니까 이걸로 if 문을 구성하면 된다. xml 로 가져온 값은 대강 아래와 같이 나올텐데-

(Language : xml)


  1. <?xml version=“1.0″ encoding=“euc-kr” ?>


  2. <root>


  3.     <comment id=“1″ date=“20071126″>한 줄기 미소를 위해, 나-</comment>


  4. </root>

(Language : javascript)


  1. if(success) {


  2.   mcMent.dynamicMent.text = myXML.firstChild.firstChild.firstChild.nodeValue;


  3.   mcDate.dynamicDate.text = myXML.firstChild.firstChild.attributes.date;


  4.  }


  5.  

여기서 myXML 의 firstChild 는 root
root 의 firstChild 는 comment
comment 의 firstChild.nodeValue 는 ‘한 줄기 미소를 위해, 나-’ 가 된다.

date 값은 comment(myXML.firstChild.firstChild) 의 속성(attribute) 값이므로,
myXML.firstChild.firstChild.attributes.date;

이렇게 구한 값들을 지정된 무비클립-동적텍스트-텍스트에 넣어주면 끝이다.

다음 포스트에선,
입력/수정/삭제를 할 폼에 대해 끄작여보자-.-.-

sinGraph.jpg

[minsangK.com] sin 함수 애니메이션 (블로그 타이틀 01)

[#M_글 들어가기 전에 블로그 관한 잡담 (열기)|글 들어가기 전에 블로그 관한 잡담 (닫기)|
하루 15시간씩 꼬박 앉아 블로그를 만들고 있다.
블로그가 삶의 기록이라면, 요즘 내 삶의 기록은 오로지 블로그 제작 과정이 전부일텐데, 하루 15시간씩 쓰다보니 도무지 포스팅 속도가 제작 속도를 못 따라 간다. 블로그에 자그마한 변화 하나라도 있을 때마다 글을 올려서 관련 포스트를 검색하는 것만으로 이 블로그가 어떻게 만들어졌는지 보여주고자 했었는데. 쉽지 않다. 이렇게 만들어 놓은걸 다음날은 철저하게 부수고 다시 두드리는 일도 심심찮게 있고. 이건 확정이야, 절대 안 바꿔- 이렇게 만들어 놓은 레이아웃도 몇일 지나면 사지를 분해해 재조립하기도 한다.

아무튼 그래서 'about블로그' 카테고리를 포기하고 'HelloWorld' 카테고리에 [minsangK.com] 접두어를 붙이기 시작했다. (사실 이거 고치는 것만 해도 완전 대공사였음, DB 접속해서 ID를 전부 다시 줄맞춰 수정하고 PHP 에서 Description 배열도 수정하고, 등등) 블로그에 관한 내용이 ‘HelloWorld’에 올라온다는 것은 이제 앞으로의 작업들이 대부분 코드와 스크립트로 점철되는 피곤한 작업이라는 뜻이기도-_M#]
타이틀에 들어간 플래시는 액션스크립트 2.0 으로 제작되었다. 메뉴를 플렉스로 만드느라 액션스크립트 3.0 을 머리 아프게 공부하고 있는 터라 그나마 만만하고 자신있는ㅠ 2.0으로 두드려보자- 라는 취지였지만 결과적으로 머리가 좀 아팠다. 플렉스에선 2.0 코드 두드리더니 플래시 가선 3.0 두드리고- 이러고 있다. 2.0은 XML을 불러오는 방식이 3.0과는 또 다르다. 레퍼런스(물론 한글 한글자도 안 들어간)를 뒤적거리며 어쨌든 기어코 완성을 시켰네.

하지만 스크립트의 포인트, 가장 중요한 부분은 Sin 함수를 이용한 눈송이 애니메이션-
이건 이미 예전에 한번 써먹었던 레퍼토리-_-라 두드리는데 큰 어려움은 없었다.
다른 점이 있다면 이건 그냥 수직하강 눈송이가 아니라 Sin 함수를 이용해 돌아간다는 점.

[Flash] http://freinture.mireene.com/test/snowSimulation.swf


이전에 만든 눈송이 애니메이션


[#M_눈송이 구현 코드 (열기)|눈송이 구현 코드 (닫기)|
by AS 2.0


  1. // 눈송이 갯수


  2. amount_of_Circles = 30;


  3.  


  4. // 캔버스 사이즈


  5. canvasWidth=900;


  6. canvasHeight=100;


  7.  


  8. // 크기, 알파 설정 (최소/최대값)


  9. minScale = 5;


  10. maxScale = 10;


  11. minAlpha = 20;


  12. maxAlpha = 50;


  13.  


  14. // 눈송이 생성, 초기화


  15. for(var i=0; i<amount_of_Circles; i++)


  16. {


  17.  this.attachMovie("circle","circle"+i,this.getNextHighestDepth());


  18.  this.initCircle(this["circle"+i]);


  19. }


  20.  


  21. // 눈송이 초기화 함수


  22. function initCircle(_mc:MovieClip)


  23. {


  24.  mc = _mc;


  25.  mc._x = random(_root.canvasWidth)-200;


  26.  mc._y = random(_root.canvasHeight);


  27.  mc._width = mc._height = random(_root.maxScale-_root.minScale) + _root.minScale;


  28.  mc._alpha = random(_root.maxAlpha-_root.minAlpha) + _root.minAlpha;


  29.  mc.xSpeed = random(3) + 1;


  30. }


  31.  


  32. // 눈송이 위치 이동 (onEnterFrame)


  33. this.onEnterFrame = function()


  34. {


  35.  for(i=0; i<amount_of_Circles; i++)


  36.  {


  37.   this["circle"+i]._x += this["circle"+i].xSpeed;


  38.   this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);


  39.   //  this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;


  40.  


  41.   // 눈송이가 바깥으로 나갈 경우


  42.   if ( this["circle"+i]._x > canvasWidth ) {


  43.    initCircle(this["circle"+i]);


  44.   }


  45.  }


  46. }

_M#]
장황하게 써놨지만 실제로 중요한건 딱 두 줄이다. 이거-

(Language : javascript)


  1. this["circle"+i]._x += this["circle"+i].xSpeed;


  2. this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);

x 값은 랜덤으로 지정된대로  오른쪽으로 달려간다.
y 값은 현재 x 값에 50을 나눠서 sin 함수에 넣고, 나온 결과값.
이해가 가지 않는다고? 음, 동감이야. 하지만 어렵게 이해하고 두드렸으니 잠깐 설명하자면-

일단 고등학교 수학시간으로 돌아가자. 그리 어려울 것도 없으니 겁먹지 말고.
sin( 0 ) 은 0 이고, sin( Math.PI / 2 ) 은 1 이다.
플래시의 sin 함수도 역시 라디안 값으로 동작하니까 고등학교 수학 시간하고 똑같이 생각하면 된다.
잠깐 여기서 90도(Math.PI/2) 가 넘어가면 어떻게 되는가? 그래프를 떠올려보자.

사용자 삽입 이미지그렇다 정점을 친 값은 떨어진다, 그리고 270도가 되면 마이너스값으로 바닥을 친뒤 한바퀴를 돌면 다시 제자리로 온다.
여기서 우리가 원하는 값은 한 프레임당 움직여야 할 y 값-
아, 갑자기 머리가 아파온다. 이거 구하려면 미적분이 다 나와야 할 것 같은 분위기다.

하지만 중요한건 방향성이다. 굳이 값을 알아내서 뭐하겠다는거냐.
우리가 원하는건 단지 y 값이 x 값의 증가값에 따라 출렁거려주기만 하면 되는거니까.
x 값은 선형증가하고 있으니 단지 그 증가하고 있는 값을 적당한 숫자의 나누기를 통해 작은수로 줄여주는 것이다.

왜 이렇게 마구리스러운 방법을 썼냐면 나도 할 말이 있다.

[Flash] http://www.minsangk.com/tt/attachment/1294582858.swf


 

위의 움직임은 아래와 같은 식으로 작성되었다. (나머지는 거의 비슷하다고 보면 된다)
(Language : javascript)
this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;

식이 좀 복잡해 보이지만 한가지 외엔 큰 차이가 없다. 바로
[ += 대신 = 이 사용되었다는것 ]
증가값을 조절하는게 아니라 _y 값을 직접 조정하는 것이다.

이 경우 진폭을 조절하긴 쉽다.
싸인함수 결과값은 어쩌니저쩌니 해도 결국 -1 부터 1 사이의 값이고, 여기에 50 을 곱하면 -50 부터 50 사이의 값이 된다. 여기에 다시 50을 더해주면 y 값은 0부터 100 까지의 범위를 넘지 않게 되는 것.

다만 위와 같이 너무도 정형화된, 이건 도무지 고등학교때 수학 선생님한테 얻어맞던 기억이 떠올라 등골이 싸해지는 애니메이션이 될 수 밖에 없는거다. 뭐, 여기서도 진폭과 x 의 시작 위치를 랜덤값으로 둘 경우 고등학교 수학 선생님이야 떠오르지 않겠지만, 현재 블로그의 타이틀처럼 도저히 싸인 곡선이라고는 믿을 수 없는 자연스러움을 구현하기엔 많은 애로사항이 꽃핀다.

블로그 타이틀 01 은 여기까지 끝내고, 다음은 02번-
플래시 액션스크립트 2.0 으로 구현하는 XML 로드다-

[minsangK.com] 메뉴 초안 (플렉스-태터툴즈DB 연동)

FRDB 프로젝트가 어느 정도 완성 궤도에 올랐다.
프로젝트의 관점으로 보든, 과제의 관점으로 보든 어느 쪽으로도 아직 할일은 많이 남았지만,
처음 계획했던 많은 것들이 이제 거의 대부분 완성된 틀을 보이기 시작한 것이다.

그 녀석 때문에 오래도록 미뤄두었던 MinsangK 블로그 제작에 다시 손을 대기 시작했다.
너무 오래도록 방치하다보니 어떤 파일이 어디 쳐박혀 있는지도 몰라 한참을 뒤져야했고, 한참 열을 올리고 제작하던 당시에 생각했던 아이디어들과 컨셉들이 통째로 리셋된 기분. 그래서 그냥 경쾌한 마음으로 블로그 제작의 요체가 되는 부분들을 공부하기 시작했다.

그 첫째로 시도하는 것은, 바로 [플렉스와 태터툴즈DB의 연동]

이전 포스트들에서 밝혔다시피 MinsangK.com 블로그의 가장 큰 특징은-
[ 블로그의 장점을 모두 흡수한 형태의 기본 틀을 유지하면서 개인 홈페이지의 정형화되지 않은 장점들을 가지고 있다 ] 는 것이다.
이를 위해서 플래시와 블로그DB 의 연동은 가장 중요한 포인트가 된다. 기존에 이와 같은 페이지들이 다수 존재하지 않았기 때문에 방식의 측면에서 여러가지를 고민하게 되었는데,

1. 태터툴즈 스킨을 수정해 치환자를 플래시에 인수로 전달하는 방법 (GET Method)
2. 1번과 유사하나 플래시에 전달하는 방법에 있어 자바스크립트를 이용하는 방법
3. 직접 태터툴즈DB에 접속하는 서버사이드 스크립트를 따로 작성하고 이를 플래시와 연결하는 방법 (LoadVars)
4. 3번과 유사하나 서버사이드 스크립트에서는 XML 을 출력하도록 작성하고, 플래시 내장 컴포넌트(XMLConnector) 사용하는 방법
5. 4번과 유사하나 플래시 내장컴포넌트 대신 플렉스로 페이지를 작성하여 DataProvider 를 활용하는 방법

일단 이 다섯가지.
이 1번부터 5번까지의 번호는 내가 고려하게 된 시기의 순서와 같고, 또 보다 고급스러운 프로그래밍 기법(RIA 에 기반한) 의 진화과정과도 일치한다. 다시 말하면 5번의 방법이 가장 세련되고 진화된 형태의 방식이라는 얘기다. 올블로그와 관련 까페를 둘러보니 역시 일선에서도 5번의 방법이 최근들어 가장 많이 사용되고 있단다. 나 역시도 이 다섯가지 모두를 테스트 형태로 적용해보았는데 여러가지 측면에서 장점이 많다. 역시 사람은 뭘 좀 알아야 고생을 덜하는 거다.

그 방법을 다시 한번 요약하면 이렇다.

1. 서버사이드스크립트(나의 경우는 PHP)로 DB 접속, 관련 내용 쿼리, XML 형태로 출력
(http://minsangk.com/_/xmlTest/categoryList.php)

2. 플렉스에서는 XMLListCollection 으로 로드

(Language : xml)
<mx:XML id=“tt_entries” source=http://minsangk.com/_/xmlTest/categoryList.php” xmlns=”“/>
<mx:XMLListCollection id=”xmlListColl_Categories” source=”{tt_entries.categoryList}“/>

3. 로드한 XMLListCollection 을 내장 컨트롤 DataProvider 연결

(Language : xml)
<mx:HorizontalList id=“hList_tt” dataProvider=“{xmlListColl_Categories}” labelField=“@name” />

4. 생성된 SWF 파일을 디자인된 페이지에 임베디드

[#M_categoryList.php (열기)|categoryList.php (닫기)|

(Language : php)
  1. <?PHP
  2. echo "<?xml version='1.0' encoding='euc-kr'?>\n";
  3. include "dbInfo.php";
  4. echo "<root>\n";
  5. // 카테고리 리스트 쿼리 -> $tt_CategoryList
  6. $query = "SELECT * FROM tt_Categories";
  7. $result = mysql_query($query, $db_connect);
  8. $tt_CategoryList;
  9. while ($row = mysql_fetch_array($result) )
  10. {
  11. $categoryID = $row[id];
  12. $tt_CategoryList[$categoryID] = $row[name];
  13. }
  14. for ($i=1; $i<=sizeof($tt_CategoryList)-2; $i++)
  15. {
  16. // 카테고리 노드 출력 ( @id, @name )
  17. echo ” <categoryList id=’$i’ name=’$tt_CategoryList[$i]‘>\n;
  18. $query = “SELECT * FROM tt_Entries WHERE category=’$i’ ORDER BY id DESC”;
  19. $result = mysql_query($query, $db_connect);
  20. while ($row = mysql_fetch_array($result) )
  21. {
  22. // 비공개 글은 출력하지 않음
  23. if ($row[visibility]==0) {
  24. continue;
  25. }
  26. // 보호글은 [비밀글] 머릿말을 붙여 출력
  27. $secret = ($row[visibility]==1) ? “[비밀글] “ : “”;
  28. // 태터툴즈에서 받아온 Unix Timestamp 를 Date 포맷으로 변경
  29. $convertedDate = date(“Y/m/d”,$row[created]);
  30. // 엔트리 노드 출력 ( @id, @name, @date )
  31. // 제목에 댓글 갯수를 출력
  32. echo ” <entry id=’”.$row[id].“‘ name=’”.$secret.$row[title].” (“.$row[comments].“)’ date=’”.$convertedDate.“‘/>\n;
  33. }
  34. echo ” </categoryList>\n;
  35. }
  36. echo “</root>”;
  37. //
  38. // DB Close
  39. mysql_close($db_connect);
  40. ?>

_M#]
[#M_TT_XML_test2.mxml (열기)|TT_XML_test2.mxml (닫기)|

(Language : xml)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  3. <mx:Script>
  4. <![CDATA[
  5. private function openPost(event:Event):void
  6. {
  7. var link:URLRequest =new URLRequest( "http://minsangk.com/"+event.currentTarget.selectedItem.@id);
  8. navigateToURL(link,"_blank");
  9. }
  10. ]]>
  11. </mx:Script>
  12. <mx:Style source=“test.css”/>
  13. <mx:XML id=“tt_entries” source=“http://minsangk.com/_/xmlTest/categoryList.php” xmlns=“”/>
  14. <mx:XMLListCollection id=“xmlListColl_Categories” source=“{tt_entries.categoryList}”/>
  15. <mx:HorizontalList id=“hList_tt” width=“720″ dataProvider=“{xmlListColl_Categories}” labelField=“@name” height=“25″ horizontalScrollPolicy=“off” useHandCursor=“true” verticalScrollPolicy=“off” verticalAlign=“middle” columnWidth=“90″ backgroundColor=“#ffffff”/>
  16. <mx:DataGrid width=“720″ height=“305″ dataProvider=“{hList_tt.selectedItem.children()}” labelField=“@name” showHeaders=“false” rowHeight=“30″ verticalAlign=“middle” backgroundColor=“#ffffff” itemClick=“openPost(event)”>
  17. <mx:columns>
  18. <mx:DataGridColumn dataField=“@name” headerText=“제목”/>
  19. <mx:DataGridColumn dataField=“@date” headerText=“등록일” width=“80″/>
  20. </mx:columns>
  21. </mx:DataGrid>
  22. </mx:Application>

_M#]
정말 간단하고 깔끔하지 아니한가?
플렉스와 PHP 전체 코드 다 합쳐봐야 100라인도 안된다.
말이 100라인이지 실질적으로 내가 두드린 코드만 따지면 그 양은 훨씬 적다고 보면 된다.
(그런데 이 간단한 코드 작성하려고 3시간동안 두드렸다, 으흐- 역시 모르면 고생-)

이러한 과정을 통해 작성된 녀석이 요 아래 두개다.

가장 기본적인 형태
– 로드한 XML 을 XMLListCollection 에 할당하여 왼쪽은 Tree 컨트롤, 오른쪽은 List 컨트롤에 DataProvider 연결했다.
– 플렉스에서는 따로 제작된 웹폰트가 아니라 기존의 TTF(트루타입폰트) 를 URL 로 연결하는게 가능하다. 미치도록 깔끔한 폰트 하나만으로도 제작한 보람을 느끼게 하는 녀석-

[Flash] http://minsangk.com/_/xmlTest/TT_xml_test1.swf

MinsangK.com 블로그에 적용될 레이아웃-
– 위에는 HorizontalList 컨트롤, 아래는 DataGrid 컨트롤 에 DataProvider 연결
– HorizontalList 의 기본 속성인 Icon 을 이용하면 리스트 아이템 자리에 화려한 이미지를 대체하는 것이 가능하다.

[Flash] http://minsangk.com/_/xmlTest/TT_xml_test2.swf

이제 여기에 기존 디자인에 어울리는 CSS 를 입히고 사용자의 입력에 반응하는 이벤트 함수를 정의해주면 실질적으로 블로그에 적용이 가능한 상태라고 보면 된다. 거기에 더해 구상한 디자인에 소요될 수많은 이미지들과 그 이미지들이 유기적으로 미려하게 동작할 Effect 모션을 추가할 예정.

확실히 페이지를 디자인하는 일에 비해 UI 를 구성하고 기능을 추가하는 일에 더 많은 노력과 시간이 소요된다.
디자인이야 이리저리 해보고 하면 답이 나오지만, (물론 내 만족치가 낮아서겠지만-)
코딩은 이리저리 아무리 해봐도 답이 안 나오는 때가 더 많다.
그런 노력보다는 레퍼런스를 한 자라도 더 읽어보고 다른 사람들이 두드려놓은 코드들을 폭넓게 읽어보고 내 것으로 만드는 일이 더 중요하다.

피곤하지만,
즐겁구나.