OSMF
동영상 플레이어를 만든다는건 상당히 짜증나는 일이었다. (과거형으로 표현한다는 것 만으로도 내용을 짐작할 수 있을듯...) 예전에 일로 동영상 플레이어 하나를 만드는데 고려해야 할 점들이 상당히 많고 계산하기도 귀찮은면들이 많아서 만들기 상당히 피곤했었는데 이는 "디자인이 달라야 하지만, 만드는 플레이어 내용은 똑같은" 플래시에서 처리하기 상당히 귀찮은 반복작업 이었다.
이번에 개인적으로 사용할 플레이어를 만들기 위해서 어도비에서 진행중인 OSMF 를 사용해서 플레이어를 만드는데... 예전에 일하면서 겪었던 고생이 눈물이 날 정도로 쉽더라...
이건 뭐... 걍 model 이 되는 mediaPlayer 에 이벤트만 죽죽 걸어서 view 가 되는 GUI 디자인과 연결시키기만 하면 되니...
동영상 플레이어 하나 만드는게 이렇게 편리할지 예전엔 미처 생각하지 못했을 정도로 편하다.
좀 귀찮은 작업들이 있긴 하지만, OSMF 자체가 image viewer 역할과 sound player 역할까지를 동시에 해주기 때문에 원한다면 모든 미디어 관련 파일들을 통합처리하는 기능도 손쉽게 만들 수 있다. 아... 세상 많이 좋아졌네... 라는 느낌이 든다.
적어도 플래시에서 미디어 플레이어 만드는 일은 더이상 "돈될 거리" 가 되지 않을 것 같다. 가장 빈도 높게 터지던 일 중에서 하나가 오픈소스 라이브러리를 통해서 사라져버리는구나...
좀 더 문서다워진 Stutter
Stutter 를 작업하면서 문서 해석에 대한 어려운 부분만 생각했던 탓일까... 문서에 CSS 를 부여하고 디자인 하는 의외의 부분에서 작업이 조금 지연되는 일이 생겨버렸다.
대충 서식들을 정리하고 디자인을 맞췄는데, 이런식으로 가다간 꽤나 골아파 질수도 있겠구나... 기술적으로 어렵지 않더라도 시간이 소요되는 일에 대해서 명확히 파악을 해야겠구나... 라는 생각이 들었다.
http://ssen.name/codeZone/stutter/StutterHTMLTest.html
대충 이전보다는 모양새가 다듬어졌다. 아직 크로스브라우징 체크를 안해봐서 좀 난감하긴 하지만...
마이크로 포맷 Stutter
개인적으로 작업 중인 녀석이다.
Textile 이나 Markdown 과 비슷하게 작동하는 녀석이고, 개인적으로 만든 이유는 HTML 중심의 설계가 된 여타의 마이크로 포맷과 다르게 Flash 에서도 쉽게 파싱할 수 있고, 모듈을 통해서 문법을 구조적으로 확장 할 수 있게 했다. (뭐 좀 더 쉽게 이야기해서 범용성을 고려해서 자유도가 높게 만들어진 다른 포맷들과 다르게 좀 더 규칙이 단순하면서 까다롭게, 그 대신 구조는 쉽기에 확장이 쉽게 만들었다.)
프로젝트의 서브 프로젝트라서 대충 작업하려고 했는데, 작업을 진행하다 보니 의외로 분량이 꽤 되어서 시간이 꽤 걸렸다. 이제 겨우 as3 버전의 기본 파서를 작업했고, 앞으로 css 룰과 몇 가지 모듈들을 추가 작업한 뒤에 as3 버전의 DisplayObject 로 파싱하는 녀석을 하나 만들고, js 버전으로 포팅을 시키면 끝이 날듯 싶다. (아직 까마득하다는 이야기...)
http://code.google.com/p/stutter-as/
http://ssen.name/codeZone/stutter/sample.txt
이와 같은 문서를
http://ssen.name/codeZone/stutter/StutterHTMLTest.html
이런 식으로 해석해주게 된다.
이전에 Textile 파서를 만들면서도 그렇고, 이번 Stutter 를 작업 하면서도 그렇고 마이크로 포맷의 파서를 만드는 일이 거의 정규식으로 도배를 하는 일이라서, 정규식을 정말 원없다 싶을 정도로 공부하게 된 것 같다. 이젠 어지간한 정규식 룰은 아주 쉽게 만들 수 있지 않을까 싶을 정도로...;;;;
아 놔… 내 Textile 정규식들 ㅜ ㄴ ㅜ
작업의 부분작업으로 Stutter 라는 Textile 이나 Markdown 같은 간략한 형식의 문서포맷을 만드는 중인데, 작업 중에 예전에 열심히 파고 들어서 분석해 놓은 Textile 코드를 찾는데 이게 없더라.
뭐지~;;; 하면서 데스크탑, 랩탑, 이메일, SVN 까지 거의 몇 시간을 뒤적거렸다.
도저히 안나와서 구글 검색기록을 바탕으로 자료 유실 시기를 역추적 해보니, 맥북에서 작업을 하고, 그 당시 들어왔던 파견일을 나가며 맥북에 윈도우를 깔면서 관련 소스코드들을 백업없이 포맷을 해버린 것 같다.
큽... 정규식들을 빠삭하게 정리해놓은 힌트노트까지 공들여서 작업해놨었는데...
다행히 정규식을 만지다 보니깐 그당시 공부했던 것들이 대충 기억이 나서 더듬더듬 작업을 해나가고 있다.
그나저나 new RegExp("^\$(\w+)\s*=\s*(.+)"); 이게 정규식이 안먹어서 한참을 고생했는데, RegExp 로 정규식을 생성할때는 new RegExp("^\\$(\\w+)\\s*=\\s*(.+)"); 이런식으로 역슬래시를 두 번 써줘야 하더라. 한참을 개고생... 그냥 평소 쓰던대로 /^\$(\w+)\s*=\s*(.+)/ 로 쓰기로 했다.
기존의 Textile 이나 Markdown 이 HTML 에 최적화 되어 있는 관계로, 내 목표인 Flash 와 HTML 에서 동시에 같은 형식으로 문서를 표현하고, 동시에 모듈 처리까지 같이 되는 문서포맷을 만들기 위해 기존 것들을 참고해서 새로운 포맷을 만들기로 결정했다.
개략적으로 나온 스펙은 아래와 같다. 기본적인 것들은 정말 간단하게 텍스트 포맷팅과 이미지, 링크 정도만 지원을 하고, ====moduleName==== 의 방식을 통해서 모듈확장을 지원하게 된다.
Stutter (말더듬)
정해진 양식이 확실하게 존재하는 경량형 문서언어
기초양식은 markdown 보다 오히려 더 단순한 진짜 문서양식만을 지원한다.
===module name=== 의 형식으로 모듈 확장을 지원한다
link 규칙은 <프로토콜형식, 컨텐츠형식, ...프로토콜에 대한 데이터> 로 표현된다.
header 는 한단계만 표현된다
>>styleHeaderName 은 <p> 박스 단위로 지정된다.
ex.
나나나나나나나나
>>blueStyle
가나다라마바사*아야오요*나나나나나
그그그그그그그그
>>redStyle
아라라라라라라
>>
그르르르
<p cass="default">나나나나나나나나</p>
<p class="blueStyle">가나다라마바사<b>아야오요</b>나나나나나</p>
<p class="blueStyle">그그그그그그그그</p>
<p class="redStyle">아라라라라라라</p>
<p class="default">그르르르</p>
$varName = varValue
${varname}
>>styleHeaderName
# Heading
*bold*
-strike-
_italic_
[styleClassName]styledText >> start style
[]styleText >> end style
<http,linkText,http://ssen.name/,_blank>
<http,(/abc/g.jpg),http://ssen.name,_blank>
<mailto,linkText,i@ssen.name>
(/abc/g.jpg)
<http://ssen.name>
<i@ssen.name>
* list
* list
** list
- list
- list
-- list
--------------------------
===moduleName====
module data
=================
===table=========
|@th|@th|@th|
|@th|td|td|
|@th|td|td|
=================
