Daum DevDay에서 만든 오픈에디터에 Flickr 매쉬업입니다. 사실 머 이렇게 따로 포스팅하기엔 너무 간단하고 엉망이지만 그냥 올립니다. 생각한건 많은걸 생각했었는데 4시간은 생각보다 길지 않더군요. 플리커매쉬업도 처음해보고 jQuery도 익숙치 않아서 아주 간단한 기능만 들어갔습니다.


위와같은 형태입니다. 에디터를 확장한다고 하면 쉽게 생각할 수 있는 형태라고 할 수 있습니다. 기본적인 생각은 포스팅을 할때 플리커 이미지를 많이 가져오는데 요즘은 저작권도 예민해서 CCL로 허락된 이미지만 가져다 쓰고 있는데 플리커 가서 이미지 찾고 주소따다가 붙히고 저작권자 이름이랑 링크를 다는 행위는 여간 귀찮은게 아니었습니다.(플리커의 CCL이미지는 여기를 참고하세요.)

그런 생각에 기반해서 툴바에서 맨오른쪽의 영화필름모양의 아이콘을 누르면(귀찮아서 튜토리얼에 쓰인 아이콘을 그냥 사용했습니다.) 플리커용 레이어가 오른쪽에 나타나고  CCL라이센스별로 검색을 해서 바로 에디터에 삽입하는 형태의 매쉬업입니다. 이래저래 길게는 했지만 플리커이미지 가져와서 인서트하는 간단한 형태라고 할 수 있습니다.

머 사실 소스는 분석할 정도는 안됩니다. 에디터 연동이라고는 하지만 버튼 이벤트로 레이어 띄우고 마지막에 에디터에 이미지 삽입하는 정도만 사용했습니다.(에디터 분석은 거의 필요 없었단 얘기죠. ㅡ..ㅡ 일부 불필요한 에디터 관련소스가 들어있을수 있습니다.)

Flickr 매쉬업자체가 처음이어서 그거만 좀 준비해갔었는데 이것저것 하면서 시간이 꽤 허비되었습니다. 스타일은 대충 잡았고 원래는 페이징, 이미지 크기선택 등등 옵션을 생각했는데 시간내에 하려니 많이 빠졌네요. 머 이걸 완전하게 기능추가하는 건 크게 의미가 없는것 같아서 스타일만 좀 잡아주고 그냥 이상태로 올립니다.

그리고 jQuery를 실제로 쓴게 처음이라 메서드가 머릿속에 없어서 고생을 많이했습니다. 중간에 하도 답답해서 jQuery날려버리고(제한된 시간이었기 때문에) prototype.js를 인클루드까지 했다가 그래두 참고 적응해야한다는 생각에 그냥 jQuery로 했습니다. (사실 크로스도메인 Ajax문제만 아니었어도 prototype.js로 했을지도 모르겠네요. 하고나니 적응차원에서 jQuery로 하길 잘했다는 생각은 들지만요.) jQuery를 코딩하면서는 처음 사용해봐서 별로 최적화 되어 있지 않고 엉망입니다.(봐주세요~ ㅋ)
가장 익숙치 않던것이 prototype.js에서의 $는 getElementById이기 때문에 파라미터로 id를 넘겨주는데 jQuery에서는 $가 CSS Selector이기 때문에(prototype.js의 $$와 같은) id로 찾으려면 $("#id")로 넘겨주어야 하는데 #을 번번히 빠뜨려서 계속 디버깅해주어야 했네요. ㅠ..ㅠ



소스를 일일이 설명하긴 좀 그렇고 간단히 말씀드리면 lib/script.js파일에 들어있는데 오픈에디터의 Trex.Menu.Flickr(이건 메뉴로 추가해 준겁니다.)의 onregenerated이벤트에서 플리커이미지를 검색해올 레이어를 만들어서 추가해줍니다.(오른쪽의 검은색 부분) 라이센스를 선택하고 검색어를 누른 후에 찾기를 누르면 requestFlickImages함수에서 jQuery의 getJSON()으로 플리커의 OpenAPI를 이용해서 결과를 JSON으로 받아옵니다.(이거 정말 편하더군요. getJSON()은 크로스도메인문제까지 해결해 주었습니다. 듣자니 JSONP로 한거라는데 설명봐도 잘 이해안됐었는데 소스한번 봐야겠습니다.)
가져온 정보를 파싱해서 리스트로 보여주고 라이센스를 아이콘으로 표시(getCCLicon())해줍니다. "본문에 추가"를 클릭하면 해당 이미지를 제가공(?)해서 에디터의 본문에 추가(insertFlickr())해 줍니다.

더 자세한 부분은 소스참고해 주세요.(참고하라기엔 좀 창피한 소스지만요.)