All Scrap

http://minsangk.com/17

그간 이래저래 공연도 끼어있고 해서 1,2번 포스트가 올라오던 시점에 비해 업데이트가 늦어졌다.
하지만 시간의 간극이 워낙 크다보니, 그 사이에 놀고 있지만은 않았다는 사실을 증명하듯.
의외로 꽤나 많은 부분에서 진척이 이루어졌다.

대망의 디자인 업데이트 된 페이지뷰가 등장하기 전에 몇가지 업데이트 사항을 기록하고자 한다.

1. menu.swf



- 별다른 설명이 필요 없는. 언제나 레이아웃 상단에 위치할 메인메뉴 네비게이션

* 동그라미에서 막대가 되는 애니메이션은 프레임을 이용했고, 각각의 메뉴가 독립적으로 동작하는 부분은 액션스크립트를 통한 프레임 액션 함수- MovieClip.prevFrame() MovieClip.nextFrame() -들을 이용하여 구현
* 동그라미에서 막대로 변하는 심볼은 하나지만, 각각에 대응하는 메뉴이름들은 전부 각각의 이름(접미어 _m) 으로 개별 등록되어 있고 액션스크립트를 통해 동적으로 등록- MovieClip.attachMovie() 후 일괄적으로 위치 배치 & 회전
* 동적으로 등록된 각각의 메뉴이름들은 재생된 프레임 비율을 계산하여, 등록된 Color 객체의 setRGB 메소드를 통해 밝기 변경
* 무비클립의 Tint 속성을 통해 개별 메뉴의 색 구분
* 각각의 메뉴에 대응하는 링크/타겟 배열을 두어 링크 관리를 용이하게 구현

※ 각각의 메뉴 무비클립 : menu01 ~ menu16 / 메뉴이름 동적연결 이름 (linkage name) menu01_m ~ menu16_m

menu.swf 액션스크립트 소스 - level0 (열기)

menu.swf 액션스크립트 소스 - button_proto (열기)

후배님이 디자인한 내용을 초안으로 최대한 노가다 작업을 아껴보고자 액션스크립트를 사용했다. 동적으로 연결되는 메뉴이름 무비클립들의 밝기를 일괄조정 하는 작업에서, 과도한 시스템 자원 낭비를 방지하기 위해  colorTransform 클래스를 안 쓰고 오로지 Color 객체의 setRGB 메소드만 사용했다. 왜 액션스크립트에는 변수를 포맷팅해서 출력해주는 함수가 없는가-_- 찾다찾다 gg치고 그냥 내가 하려하다보니 좀 난잡한 코드를 만든 감이 없잖아 많은듯-_- 어쨌든 구현에는 성공했다. 프레임 액션은 이것말고도 참 여러모로 쓸모가 많은 코드인듯 싶네. 여기 말고도 현재 제작중인 플라곤 홈페이지의 메인메뉴 네비게이션도 똑같은 방식으로 구현되어 있다. 그것도 그렇고 여기 이 녀석도 그렇고 어쨌든 메뉴 네비의 첫 구상을 내가 하지 않은 경우, 액션스크립트를 통해 자연스러운 애니메이션을 구현하다보면 결국 결론은 프레임 액션으로 귀결되는 것 같다. AS1.0 시절의 노가다성 프레임질에 AS2.0 을 통한 고급스러운 뒷마무리- 라는 느낌을 주는 기술. 어쨌거나 좀 더 화려하고 직관적인, 그러면서도 시스템 효율을 최대한으로 이끌어내는데에 참 유용한 기술인 것만은 분명하다. (다만 구현이 그렇다는 것이고, 구현 후에 수정하려면 여러모로 귀찮아진다는 것 때문에 본인은 별로 선호하지 않을뿐)


2. view.php

http://minsangk.com/frdb/view.php
- idx 파라미터를 넘겨받아 지정된 자료를 테이블로 출력하는 파일

* 구성된 레이아웃대로 각각의 필드를 출력
* 사업상황(state 필드) 의 내용에 따라 1:1 대응되는 신호등 이미지 출력
* 관련노선(linkingIDX 필드) 의 내용을 구분자(|)를 기준으로 explode 하고, 해당 idx 의 노선명을 쿼리 전송받아 각각의 링크를 가진 문자열로 출력
* 목록으로 되돌아가는 버튼 폼
* list.php 코드에 해당 인덱스를 매개변수로 하여 view.php 를 호출하는 하이퍼링크를 추가
 - <a href="./view.php?idx=??">

이건 후배님이 하고 있는 페이지 디자인의 초안이 나오면 들어가려고 계획된 것이었는데, 후배님의 PPT 발표 예정 상황과 겹쳐 하루만에 초고속 날림-_- 제작되었다. (그런데 중요한건 PPT 발표가 미뤄져서 이 녀석은 아직 미공개 상태라는거) 다른 페이지와 마찬가지로 CSS 가 눈꼽만큼만 사용된 극도의-_- 코드위주 페이지이지만 어쨌든 계획된 내용에서 필요한 부분으로 체크된 내용은 전부 구현되었다고 보아도 좋다. 관련자료 필드 추가가 이뤄지면 또 한번의 코드 수정은 불가피하겠지만, 그 외의 부분은 (디자인을 제외하고) 거의 완성 단계다.

워낙 오랜만에 다시 손 댄 PHP 코드라 내가 짜놓은 녀석들이 낯설어 보여 약간의 고생은 했지만, 요즘 과외 때문에 비슷한 구성과 색다른 문법을 지닌 JSP 를 공부하고 있는것이 나름의 상승 작용을 한 것 같은 느낌이다. PHP 코딩능력이 한결 좋아져서 이제 50라인 정도는 그냥 머릿속에 생각한 대로 옮기면 불필요한 중간 확인 과정을 거칠 필요 없이 작성이 가능해졌다.


3. 지역별분류.swf


- 입력된 DB 를 지역분류별로 출력하는 링크 네비게이션

* 각각의 조각지도를 롤오버 하면 최대 알파치로 진해지고, 롤아웃하면 다음 롤오버 액션에 상관없이 부드럽게 최소 알파치로 변경
X 각각의 조각지도에 대응하는 리스트 출력
(list.php 에서 각각의 상황에 맞는 vMode 추가가 이뤄지는대로 링크 예정)

※ 각각의 조각 지도 무비클립 : sub1 ~sub7

지역별분류.swf 액션스크립트 소스 - level0 (열기)

지도의 출처는 아마도 네이버가 아닐까 싶은데- 후배님이 손수 비트맵 파일을 따서 각각의 조각지도를 PNG 로 저장했고. 나는 그 파일을 받아 Magic Wand 툴로 투명 부분의 Shape 를 삭제해 심볼화했다. 군대 행정반에서부터 시작된 액션스크립트 2.0 공부는 사실상 이러한 스타일의 부드러운 메뉴 네비게이션을 구현하기 위해서 였다고 해도 과언이 아닐 거다. 이제는 그 코드 구현이 어느 정도 머릿속에 확고히 자리 잡아 어떠한 형식이라도 가장 간결한 형태로 코딩하는 방법을 찾았고. 위 코드는 대략 그 모든 조건이 최적화 되어 있다. 이 블로그에 구현될 메뉴 네비도 대략적으로는 이런 형식에서 크게 벗어나지 않는 형태가 될 듯. 문제는 노력과 시간. 일단 머릿속에 대강의 디자인과 구성이 들어가 있으니, FRDB 프로젝트가 끝나는대로 작업 시작이다-.-.- 그때쯤이면 넘치도록 뛰어난 후배님의 디자인 센스를 마구마구 부려먹는거다. 하하-.-.-


4. 수도권노선도.swf


- FRDB 에 DB화 되어 등록된 자료 중 수도권 분류 노선들과 1:1 매칭되는 수도권 노선도 플래시 파일

* 어느 위치에서나 토글(toggle) 방식으로 이동과 정지가 가능
* 화면 중앙을 중심으로 좌우상하 이동 폭에 따라 노선 이미지의 상하좌우 검색이 가능
* 노선 이미지의 경계선을 인식하여 유효범위가 오버플로우 되지 않음
* 등록된 노선을 오버마우스 하면 블러 필터를 통해 하이라이트 됨
* 등록된 노선을 배열로 관리하여 삽입, 수정, 삭제가 용이하게 구성
(위 파일은 현재 인천지하철 3개 노선만 등록되어 있음)
X 로드 매개변수로(GET Method) idx 를 입력받아 특정 노선을 하이라이트 시키고 그 위치로 전체 노선도를 위치시킴
(이건 조만간에 구현 예정 -_-_-)

※ 전체 노선도 무비클립 : mc_all / 각각의 노선 무비클립 : mc_all.sub?? (물음표 자리에 해당 노선의 idx)

수도권노선도 swf 액션스크립트 소스 - level0 (열기)

후배님 수업시간에 누군가의 한마디 때문에 만들어야만 했던 녀석. 아마 그 학생은 이게 얼마나 힘든 작업인지 자기가 말하면서도 몰랐을 거다, 젠장 -_- 그 덕에 후배님의 피를 깎는 노가다와 본인의 머리털을 쥐어뜯는 노력이 만나 완성되었다. 지역별분류.swf 와 마찬가지로 후배님이 저 수많은 노선들을 손수 하나하나 포토샵으로 따서 PNG 로 저장해주었고, 나는 다시 그걸 Magic Wand 로 손보아 각각의 idx로 심볼화. 일단은 스크립트부터 완성시키느라 인천지하철 3개 노선 외에 나머지는 파일은 있으나 등록되어 있지 않은 상태. 지역별분류.swf 보다 몇배는 더 고심하고 고민하고 삽질해야 했던 스크립트였다. 이제 수십개의 관련 노선들을 추가하고 그 노선에 대응하는 idx 를 찾아 링크하고 각각의 노선 색깔에 맞는 하이라이트 컬러를 조정하고 등등의 노가다성 작업만 넘치도록 남았구나. 아아-_-_-



다음 FRDB Project 포스트는 이전 포스트에서 예고한 바와 같이 후배님이 제작중인 페이지 디자인을 중점적으로 소개해 보겠다. 아직은 이것저것 손 볼 것이 좀 많아 매 수업시간마다 있는 발표 과제 위주로 구성을 하다보니 전체적인 페이지 디자인의 윤곽이 흐릿해진 감이 있지만. PHP 코드 부분이나 중간중간 페이지를 빛내주는(ㅋ;) 플래시 액션스크립트가 어느 정도 궤도에 올랐으니, 조만간 페이지 디자인도 깔끔하게 이 무대에서 데뷔할 날이 올 것이다.


그런데,
소주 두어병 먹고 들어온 상태에서 내가 이런 포스트를 두드리게 될 줄 몰랐다. 요 아래 포스트는 우울해 죽을려고 하더니, 이렇게 신나게 이런 얘기를 떠들고 있는 것 보면. 나 그런대로 체질상 이게 맞는 거 같기도 하고. 에이, 모르겠네. 그냥 하는동안은 참 재밌었고, 해놓고 보니 꽤나 뿌듯하고. 두드리는대로 즉각적으로 결과가 튀어나오는 웹프로그래밍과 액션스크립트는 어쨌거나 참 매력 있는 녀석.

감당할 수 있는만큼만 최선을 다하면 그것도 참 열심히 사는 한 방법인데, 왠지 나란 인간은 그래서는 만족을 잘 못해버린다. 그래서 몰아놨다가 가끔 한번씩 스스로를 확 옥죄어버리면 늘 감당할 수 없을만큼 최선을 다해버리고 마는거다.

아, 참, 인생 좀 피곤하게 살아, 나도.

http://minsangk.com/11

가을공연 준비와 겹쳐 진행하는 터라 진도가 그다지 빠르지는 않은 듯 싶다.
현재까지 모든 파일을 다 합쳐 500 라인 정도.
밤새는 날이 늘어갈 수록 코드 라인은 점차 길어지고, 코드 라인이 길어지는데에 비례하여 밤새는 날도 늘어간다.
고작 500 라인 넘어갔다고 슬슬 정신이 오락가락 하기 시작.
몇십만라인의 코드를 누비는 프로 프로그래머들은 대체 뭐하는 인간들이야? -.-

뭐 어디서 체계적으로 배운 장사가 아닌지라, 중요 코드마다 주석을 다는 습관 따위 예전부터 없었는데.
기르고 있다. 아니 길러야 한다. -_-
급속한 체력고갈로 인해 두시간 전에 짠 코드를 두고 이해불능 상태에 빠지는 경우가 종종 발생.
이젠 누가 시키지 않아도 알아서 주석문을 주렁주렁 매달고 있다.

오늘 매단 주석 중에 가장 마음에 드는 것은 역시 요거-.-

///////////////////////////////////////////////////////// CREDITS /////////////////////////////////////////////////////////
// FRDB (Future Railroad DataBase) Project
// programmed by MinsangK ( Minsang Kim / Inha Univ. The College of Information & Communication Engineering 03 )
// designed    by Kid       ( Yeon-Jung Im / Inha Univ. The College of Computer Engineering 06 )
// 2007. Autumn

사실 이런건 다 만들고 해도 늦지 않은데, 그냥 기분상 -.-


http://minsangk.com/frdb/list.php

이제는 이 링크 하나만 타고 들어가면, 현재 제작 중인 모든걸 볼 수 있다.
골조공사가 마무리되고 슬슬 공구리-_-질에 들어갔단 징조 -.-
어쨌든 여기 공개된 것은 전부 완벽히 작동한다. (혹시 에러나면 리플 달아줘- 바로 수정들어가게-)

이제부턴 특정파일이 어떤 역할을 하는지에 대한 구분이 서서히 모호해지고 있다.
특히 가장 중심이 되는 write.php 와 list.php 는 현재 상호작용하고 있는 페이지만 각각 2,3개씩.
이 기본 코드들로 인클루드 되는 다른 파일들도 서서히 살을 찌우고 있는 상태.
특히 frdbProperty.php 는 따로 만든 보람을 느낄만큼 덩치가 커졌음 -.-

frdb_property.php

그러니까 모든 속성이 다 배열로 들어가있다. ($property_속성)
각 속성의 이름도 배열로 정의 ($properties)
거기에 더해 리스트에 지정된 보여주기모드($vMode) 에 따라 어떤 속성을 보여줄 건지 지정하는 것도 배열이다.
저렇게 나란히 배치해 놓은 덕분에 linkingIDX (관련노선정보) 입력폼 제작이 한결 쉬워진거다. 물론 그럴려고 한 짓이다, 이게.
vMode_모드속성 이 "1"로 지정될 경우 그 필드를 보여주고 "0"이면 숨기는 것.

어쨌든 이게 최근 작업 중에 가장 난이도 있었고 골치 아팠던 작업이었다.
그냥 코딩 자체가 어려웠다기보다 이걸 어떻게 구현할지 머릿속에 구상하는 시간이 더 오래걸렸다.
그러느라 피운 담배가 한갑은 될걸? -_-
어쨌든 그 담배 한갑으로 헐어버린 목구멍만큼이나 완벽한 보상으로,
다음번 작업부턴 이런 식의 구성이 자주 나올 거다.
나중에 view.php 제작에도 아주아주 대단히 요긴하게 쓰일 예정.


* 이전 포스트에서 '더 할 일'이라고 이름 붙인 것들 중 그간의 작업으로 해낸 것들과 못 한 것들 리스트

http://minsangk.com/frdb/write.php
X - 예외사항처리(자바스크립트)
O - 수정 모드시 attribute 필드 이하로 쿼리 받기
O - 입력 모드와 수정 모드 시 스타일/메세지 구분
O - linkingIDX 입력 폼 (이건 따로 페이지 만들어서)
X - openingTime, progress 테이블 입력 폼

http://minsangk.com/frdb/action.php
O - linkingIDX 페이지 연계
O - 체크박스 예외사항처리 (str_)
X - openingTime, progress 테이블 연계 쿼리전송

http://minsangk.com/frdb/list.php
X - openingTime, progress 테이블 연계 쿼리전송
(이건 view.php 에 들어갈 기능으로 재편)
O - linkingIDX 페이지 연계
O - 체크박스 선택 필드 구분 출력
X - state 필드 내용별 신호등 img 출력
X - 관련 필드 span
(마지막 두개는 view.php 에 들어갈 기능으로 재편)

일단 제일 크게 남은 일은 progress(진행상황) 와 openingTime(개통시기) 을 테이블로 따로 만들어 입력폼과 연계시키는 작업.
테이블 구성은 어느 정도 머릿속에-_- 있고 가장 무시무시했던 frdb_base 테이블을 무난히 마쳐가는 단계니 큰 어려움은 없을 것으로 예상.
관리자 로그인폼과 action.php 를 동작시킬때 쿠키로 관리자 로그를 확인하는 과정은 뭐 급할 거 없으니 천천히 할 생각임.

여기까지만 완성되면 DB 관리적 측면에서의 모든 구성이 마무리된다.
그럼 또 어떤 측면이 있느냐, 하면. 바로 사용자적 측면.
DB도 모두 갖춰져있고 관리자 모드의 추가/편집/삭제/목록 이 모두 구현되어 있으니, 크게 어려울 건 없을 듯 싶다.
(다음 포스트에서, 아 이런 젠장 뭐가 어려울 게 없어 힘들어 죽겠구만- 이런거 쓸 듯 싶지만, 어쨌든)
그러나 사용자적 측면의 view, search 폼들은 페이지 디자인의 레이아웃이 잡힌 다음에야 들어갈 수 있으니,
아마도 다음 혹은 다다음 포스트 중에 연정씨가 디자인하고 있는 페이지들의 윤곽을 공개할 듯.


공연이 이제 2주 남은 터라, 다음 포스트는 언제 올릴지 모르겠다.
할 일이 산더미로 쌓여있으니만큼 일단은 코딩이 먼저지 포스팅은 나중이거든?
그래도 포스팅을 꾸준히 하는 이유는 연정씨의 PPT 에 도움을 주기 위해서이기도 하고, 내 작업의 참고노트가 되기 때문이기도 하다.
최근 작업 내내 포스트를 참고하며 해야 될 일을 참고하고 그 링크를 직접 두드리는 수고를 덜었다.
이 정도면 훌륭한 블로거 아냐? (대다수가 못 알아들을 말을 조낸 장황하게 쓴다고 욕하는 소리가 여기까지 들린다-.-)



서서히 정신이 혼미해지는 시간.
내일은 계획표고 뭐고 되는대로 푹 자고 일어나 다시 시작하자.
요새 잠을 너무 못 잤더니 이래저래 신체적 정신적 리듬이 모두 엉망이다.
쉽게 갈 수 있는 길을 어렵게 가면서도, 이게 그냥 뭐. 나 스스로 주체 안되게 움직이는 것. 누구 장난 마냥.

다시 달리자!-.-

http://minsangk.com/9

꽤 오래전 포스트 중에 후배와 같이 하는, (아니 하게 된 -.-.-) 프로젝트에 대해 쓴 게 있었는데,
노트에서만 해오던 모든 공론을 끝내고 이번 주말부터 본격 코딩에 돌입했다.

FRDB 란 Future Railroad Data Base 의 약자로서,
교통평론가로 활동하고 계시는 한우진님이 끔찍스러울 정도로 엄청난 수고와 노력을 들여 만드신 페이지의 이름.
말이 DB지 실제로 (보다 정확히는 공학 용어로) DB화는 하나도 되어 있지 않고,
전부 수작업으로 편집된 HTML 로 이루어져 있었음.

미래철도DB - http://frdb.new21.org

이걸 진정한 DB 로 만드는 거다. 아우; -_-


현재는 DB 테이블과 이를 운용하고 시험하는 기초 코드들이 완성 단계에 있음.

PHPMyAdmin 에서 본 현재 데이터베이스 구성 (frdb_base)

http://minsangk.com/frdb/write.php
입력, 수정 폼
 (어차피 테스트 자료니까 아무거나 막 입력하는건 환영-_- 하지만 삭제는 하지마)

* 더 할 일
 - 예외사항처리(자바스크립트)
 - 수정 모드시 attribute 필드 이하로 쿼리 받기
 - 입력 모드와 수정 모드 시 스타일/메세지 구분
 - openingTime, progress 테이블 입력 폼
 - linkingIDX 입력 폼 (이건 따로 페이지 만들어서)

http://minsangk.com/frdb/action.php
입력, 수정, 삭제 쿼리전송 (얘는 모드 지정 안하면 작동 안한다-.-)

* 더 할 일
 - openingTime, progress, linkingIDX 테이블/페이지 연계 쿼리전송
 - 체크박스 예외사항처리 (str_)

http://minsangk.com/frdb/list.php
테이블 레이아웃 목록
(수정/삭제 가능)

* 더 할 일
 - openingTime, progress, linkingIDX 테이블/페이지 연계
 - 체크박스 선택 필드 구분 출력
 - state 필드 내용별 신호등 img 출력
 - 관련 필드 span

그 외에도...

dbInfo.php
DB 접속 정보

myLib.php
내가 수시로 만들어대는 PHP 함수 라이브러리

js_frdb.js
역시 나 필요할 때마다 만들어대는 JS 함수 라이브러리

frdbProperty.php
각 필드 속성 (배열)

css_frdb.css
전체 페이지를 포괄하는 스타일시트 파일 (현재는 아무것도 없다)
엇, 그러고보니 연결도 안 해놨네; 내일 하자;

위에 '더 할 일' 이라고 적어놓은건 정말 지금 당장 해야 될 일이고, 실제로는 이보다 할일이 훨씬 더 많다.
큰 틀로만 보아도, 후배가 해야 할 CSS 페이지 디자인, 플래시 노선 뷰어
후배와 같이 하는 조원들이 해야 할 DB 입력 등등 어쨌든 한 학기를 올인할만한 가치가 있는-_- 규모의 프로젝트.


현재시각 AM 05:00
겨우 이 정도 코딩하면서 핀 담배가 한갑반이고, 마신 물이 4병.
나한테 프로그래밍의 재능은 없는 거 같다 -_-
(이런, 무슨 새벽 5시에 자학이냐)

그래도 재미를 느끼고 미칠 수 있다.
어쨌든 난 코드를 두드릴 때 가장 멋진 녀석이 되는 거다.

하지만, 그렇다고 해도 내일부턴 5시까지 두드리진 말자 -_-


종종 올라올 포스트들로 진행상황 보고하겠음 -.-
같이 기대를 가지고 지켜봐주시오 -.-

http://minsangk.com/22

글 들어가기 전에 블로그 관한 잡담 (열기)

타이틀에 들어간 플래시는 액션스크립트 2.0 으로 제작되었다. 메뉴를 플렉스로 만드느라 액션스크립트 3.0 을 머리 아프게 공부하고 있는 터라 그나마 만만하고 자신있는ㅠ 2.0으로 두드려보자- 라는 취지였지만 결과적으로 머리가 좀 아팠다. 플렉스에선 2.0 코드 두드리더니 플래시 가선 3.0 두드리고- 이러고 있다. 2.0은 XML을 불러오는 방식이 3.0과는 또 다르다. 레퍼런스(물론 한글 한글자도 안 들어간)를 뒤적거리며 어쨌든 기어코 완성을 시켰네.

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

http://minsangk.com/23

http://minsangk.com/18

 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 파일을 디자인된 페이지에 임베디드

categoryList.php (열기)

TT_XML_test2.mxml (열기)

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


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


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




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



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



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

피곤하지만,
즐겁구나.

http://minsangk.com/91

미루고 미루다 이제야 올립니다.
이 녀석 덕에 자주자주 뿌듯해 하면서도 머리 속에서만 구르고 있는 다른 녀석들에게 우선 순위가 자꾸 밀렸네요.
기존 텍큐 적용법과 크게 다른 점은 없습니다만,
많은 수의 티스토리 유저 분들이 HTML 태그에 경기를 일으키신다는 이야기를 듣고 스샷 좀 찍어봤습니다.
잡설이 길죠?
들어갑니다.


1. 위젯 다운로드 / 압축 해제 / 스크립트 복사


스크립트를 제외하곤 기존 파일과 모두 동일합니다.
티스토리는 주소 바뀔 일이 없어 아예 따로 파일을 떼 놔 넣어버렸습니다.
압축을 해제하면 요렇게 세 파일이 뜹니다.
script.txt 를 열어 코드를 복사해두세요.


기다란 설명들 다 필요없고 요것만 복사하셔도 됩니다.
제목의 정렬을 바꾸시려면 center 를 left/right 로 수정하세요.
색상을 바꾸시려면 0x000000 을 수정하세요. (16진수 RGB 입니다)


2. 티스토리 파일 업로드

티스토리 해당 블로그에 로그인 하시면 뜨는 관리자 페이지입니다.

스킨-HTML/CSS편집 메뉴를 클릭하세요.

요런 창이 뜹니다.
안에 파일 내용은 스킨마다 다를 수 있습니다.
'파일업로드' 버튼을 클릭하세요.


눈에 익은 파일업로드 대화상자가 뜨지요?
아까 압축 풀어놓았던 파일들을 찾아 드래그한 후 열기를 클릭합니다.
잘 뒤져보면 images 폴더에 세개의 파일이 업로드 되었을 거에요. 요렇게



3. 스크립트 수정

다시 HTML/CSS 편집 탭을 클릭하고, Ctrl+F 를 누르면 검색 창이 뜹니다.
검색 창에 article_rep_title 을 입력하고 엔터를 누르면 원래의 타이틀 코드가 뜹니다.

여기서는
요 녀석이로군요.
대부분 저런 비슷한 형태니까 찾기 쉬우실 거에요.

찾으신 부분을 아까 복사해 둔 스크립트로 붙여넣기 합니다.
공개/보호/비밀글 마다 따로 서식을 가지고 있는 스킨인 경우 저 작업을 여러번 반복 하셔야 합니다.
다시 Ctrl+F 하셔서 엔터를 누르다보면 나올테니 모두 수정이 됐는지 확인해보세요.

그리고 쭈욱- 내려가면 밑에 '저장' 버튼이 있습니다.
여기서 이거 안 누르시면 적용 된 게 날아가니 주의하세요.


4. 확인

예쁘게 적용이 되었네요.
적용하시는 스킨에 따라 정렬과 색상을 바꾸시면 더 이쁘겠지요.
원 글(http://minsangk.com/85) 에 댓글 달아주신 분들 블로그를 둘러보시면 멋지게 적용 된 블로그들이 많으니 참고가 되실 듯 합니다.


나름 쉽게 풀어 쓴다고 썼는데, 쉽게 글 쓰는 데는 영 자신 없어 제대로 설명이 됐는지 궁금합니다.
도움이 되시길 바래요 -.-.-


postscirpt : 스샷을 위해 아이디를 빌려 준 병렬군 감사. (사실 허락 없이 썼음 ㅋ)


09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.

http://minsangk.com/85

위에 보고 계신 녀석이 바로 이 녀석입니다.

제 스스로의 만족치를 거뜬히 넘길 만큼 이쁘게 나와 조심스레 텍스트큐브 스킨 게시판에 올렸었는데, 제 스스로의 예상치를 거뜬히 넘길 만큼 많은 분들께서 관심을 가져주셨습니다. 텍스트큐브 스킨게시판의 글에도 많은 댓글이 달렸고, 제 블로그 링크 글에는 무려 100여개가 넘는 많은 댓글이 달렸네요.

단순히 타이틀만 띄우는 형태에서 텍스트 정렬도 바꿀 수 있고, 색도 변경할 수 있게 되었고, (면봉님 감사합니다) 링크도 걸 수 있게 된 것 (푸룬님, bizbook 님 감사합니다) 다른 분이 만드신 소중한 스킨에 포함 되어 더 많은 분들이 사용 하실 수 있게 된 것 (엔하늘 님 감사합니다) 모두 관심 가져주시고 피드백 주신 많은 분들 덕분입니다.

그리고 사용법에 대한 보다 자세한 매뉴얼 포스트 제작해 주신 더티문라 님도 감사드려요

많은 피드백을 받으며 해결하지 못한 부분이 있었는데, 바로 특수문자 (&, +) 의 처리 문제였습니다. 다른 기호는 괜찮은데 & 와 + 문자는 FlashVars 전달 과정에서 구분자로 쓰이는 바람에 그 뒤에 적힌 모든 제목들이 잘렸던 것이지요. 고민고민 끝에 결국 자바스크립트를 이용해 Percent-Encoding 하는 방식으로 해결 했습니다. 그리고 이왕 자바스크립트에 손 댄 김에, 좀 더 많은 분들이 쉽게 적용 하실 수 있도록 넣는 방식을 조금 더 손 보았습니다.

아래는 새롭게 바꾸어 본 적용 방법입니다.
기존 사용자 분들도 & + 처리를 위해 본 방법으로 수정해주시면 감사하겠습니다.

* 티스토리 적용법 바로가기

* 기타 사항

 - 폰트에 포함되지 않은 『』 이런 녀석들은 전부 [] 로 치환되어 표현 됩니다.
 - 일어나 한자 혹은 그 외의 외국어는 전부 빈 네모로 표현이 됩니다. 그와 같은 문자의 사용이 많으신 분들은 사용이 불가능 할 듯 합니다.
 - scriptAccess 를 링크를 위해 always 로 지정해 두었습니다. 개인적인 보안 이슈로 인해 꺼려지시는 분들은 js 파일을 열어 수정하여 사용하세요. (그냥 사용하셔도 물론 별 문제는 없습니다)


적용 중에 문제가 발생했다거나,
기능 추가가 필요하다고 생각하시는 부분이 있다거나,
꼭 이 녀석이 아니더라도 누군가 만들어 주었으면 하는 아이디어가 있다거나,
플래시 소스가 어떻게 생겼나 궁금하시다거나,
현재 제작 중이신 스킨에 적용하려 하신다거나,
그냥 아무 이유 없이 한마디 해야겠다 싶다거나, (ㅋ)

하신 모든 분들은 댓글 남겨주세요.



09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.