XE Magazine - XpressEngine 개발 정보와 부가기능. XE 알림센터와 개발 정보 공유

XE 통합 툴바. Dock 모듈 만들기. - 기타

2012.07.24 11:48 BNU Edit

요즘 개발하고 있는 모듈이 두 가지 있습니다. TopicFlux와 Dock 모듈인데, TopicFlux는 XE 공홈 자유게시판에서 밝혔던 것처럼(참조 : 다음 배포 할 자료 TopicFlux & TopicCast) 게시물을 선별하는 기능과 임의로 입력한 간단한 정보를 배치하는 데 쓰입니다. 여튼, TopicFlux에서 각 위젯을 편집 할 때 필요한 버튼을 페이지에 항상 고정해 두어야 하는데 이 버튼과 더불어 알림센터 모듈의 알림을 표시하기 위해 Dock 모듈을 함께 만들고 있습니다.

[SNS 공유 기능이 있는 보편적으로 사용되는 서비스]

화면 아래에 위와 같은 툴바가 붙어 다니는 것을 볼 수 있는데 이런 것들은 대부분 페이스북, 트위터 등으로의 공유 기능이 붙어 있죠. 제가 만들려는 목적은 이처럼 SNS 공유 버튼도 붙일 수 있겠지만, 주로 XE내에서 동작하는 기능들을 Dock에 몰아 넣어두기 위해서 입니다.

[Dock 모듈. 작게 표시된 아이콘]

[Dock 모듈. 특정 아이콘을 눌렀을 때 기능 수행]

지금 XE Magazine에서 이 기능을 테스트하고 있습니다. 아직 개발 초기이므로 UI는 이쁘장하지 않습니다. 기능적으로도 프로토타입 수준으로 여러 방법을 고민하고 있습니다. 위 스크린샷처럼 구석에 위치하고 있다가 각 항목을 누르면 상세 내용을 표시하거나 각 기능에서 지정한 기능을 수행하는 방식입니다. 위 스크린샷은 알림센터의 메시지를 표시하도록 알림센터에 기능을 추가했습니다. Dock 모듈의 개발을 위해 임시로 추가해 본 것입니다.

[페이스북 채팅. 친구 목록]

이는 페이스북에서 참조했으며 채팅창을 표시하는 것과는 다르지만 페이스북 개발자 페이지에서 볼 수 있는 일부 화면에서 가져왔습니다. UI를 다양하게 구상해 보고 있는데 jQuery로 만들어진 다양한 플러그인을 하나 씩 실험 중입니다. 그 중 하나는 PageSlide 플러그인인데 마치 마운틴 라이언의 알림센터를 생각나게 합니다. 페이지를 옆으로 스윽 밀어버리면서 감춰져 있던 UI를 표시하는 방식입니다.

[Mas OS 마운틴 라이언의 알림센터]

아쉽게도 PageSlide 플러그인은 적용 할 사이트에 표시되는 항목에 따라 영향을 줄 수 있기 때문에 범용성을 생각하면 고민 되는 부분입니다. 아직 여러 UI를 실험하고 있지만 페이스북의 채팅창과 비슷한 방식과 역시 페이스북의 알림 목록을 나태는 말풍선 형태를 추가 할 계획입니다.

스크린샷 2012-07-24 오전 11.11.48.png
[페이스북의 알림 목록 창]

이건 알림센터 모듈에 딱 이네요. ^^

Dock 모듈이 얼마나 널리 사용될지는 모르겠습니다. 우선은 TopicFlux와 알림센터, 그리고 XE의 기능을 처리할 수 있는 미니 리모컨의 개념으로 기능을 자체 내장시킬 예정입니다. 예를 들면 글의 카테고리를 변경하려면 글을 수정해야 하는데 이를 간편하게 카테고리만 변경할 수 있도록 하거나 작성일을 변경하는 등의 유틸리티로써 사용할 수 있는 기능을 내장 할 계획입니다.

뭐 별거 아닌 단순한 기능을 주로 채울 예정이지만 사이트 관리자가 항목을 조정하고 위치를 변경할 수 있도록 계획하고 있습니다. 계획은 큽니다. :)

TopicFlux의 리모컨으로써 Dock이 사용될 것이고 Dock 모듈 자체에도 앞에서 적은 문서 관리를 포함해 작은 유틸리티를 포함시킬 예정입니다. 아직 시작 단계라서 프로토타입으로 만든 것을 바탕으로 많은 실험과 개선을 거칠 예정입니다. 어느 정도 완성도를 갖추면 연동할 모듈이 있는지 살펴보고 하나씩 통합을 시도해 볼 계획을 가지고 있습니다.

Dock 모듈도 오픈소스 라이선스로 공개할 것이고 연동할 수 있는 API 문서도 이쁘장하게 써서 공개하도록 하겠습니다. :)