안녕하십니까. XPUSH 개발팀입니다.
XPUSH 를 기반으로 한 서비스인 stalk.io 는 웹페이지에 설치할 수 있는 체팅 위젯입니다.
이렇게 운영자 혹은 관리자가 직접 설치하는 것과는 별도로, 여러분들이 직접 원할 때, 원하는 웹 페이지에서 같은 페이지를 보는 다수의 사람들과 서로 대화할 수 있는 stalk.io 크롬 익스텐션도 사용하실 수 있습니다.
##크롬 익스텐션이란(Chrome Extensions)?##
크롬 익스텐션은 크롬 브라우져에 추가(확장) 가능한 HTML + JavaScript 기반의 웹 어플리케이션 입니다.
크롬 웹스토어에서 설치 가능하며, 본인에게 필요한 App을 설치하여 사용한다면, 웹 사용 환경을 보다 빠르고 강력하게 만들 수 있습니다.
크롬 웹스토어에서 설치 할수 있는 크롬 앱의 종류에는 크롬 익스텐션과 Packaged App, Hosted App 이 있습니다.
개발자가 Hosted App을 만들어야 할지, Packaged App을 만들어야 할지, Extensions를 만들어야 할지 고민 된다면
Choosing an App Type에서 실마리를 찾을 수 있습니다.
##익스텐션 UI##
익스텐션 UI는 주소창 우측의 toolbar의 아이콘을 통해서 실행이 되며, 대표적인 구성 요소에는 팝업, page action, browser action이 있습니다.
##익스텐션 구성요소##
HTML또는 JavaScript파일로 구성되며, 익스텐션의 주요 로직을 담당합니다. 팝업이나 컨텐츠 스크립트등 익스텐션 내부의 다른 페이지들과 interact하게 됩니다. browser action이나 page action에서 발생하는 이벤트들에 대한 listener를 정의할 수도 있습니다. 브라우져에 노출 되지는 않고 뒷단(Back ground)에서 별도의 프로세스로 실행됩니다.
익스텐션 아이콘을 클릭했을 때 나타나는 페이지로 flickr API를 이용한 Chrome extension Get Started 페이지의 예제로 쉽게 이해할 수 있습니다. 백그라운드 페이지와 interact 가능합니다.
실행중인 웹 페이지에 삽입하는 스크립트로서 이 또한 백그라운드 페이지와 커뮤니케이션이 가능합니다.
##stalk.io 크롬 익스텐션##
stalk.io 크롬 익스텐션은 browser action, 백그라운드 페이지로 개발되었습니다.
manifest.json
"browser_action": {
"default_icon": "images/stalk_16.png"
},
"background": {
"scripts": ["background.js"]
},
background.js
chrome.browserAction.onClicked.addListener(
function(tab) {
chrome.tabs.executeScript(null, { // defaults to the current tab
file: "main.js", // script to inject into page and run in sandbox
allFrames: false // This injects script into iframes in the page and doesn't work before 4.0.266.0.
});
}
);
stalk.io 아이콘을 클릭하면 background.js의 browswerAction.onClicked 이벤트가 발생되며, chrome.tabs.executeScript를 통해 main.js 파일이 실행 됩니다. 이 main.js 파일에는 stalk.js를 inject하고, STALK.init() 을 실행시키는 코드가 담겨 있습니다.
완전한 소스는 XPUSH github을 통해 확인하시기 바랍니다.
more . . .대용량 트래픽을 처리 할 수 있도록 분산서버 환경을 구성하는 일은 생각보다 많은 것들을 고려해야 합니다.
국내 컨퍼런스 또는 세미나에서 분산서버 구현에 대한 강의하고 있습니다. 그 중에 동영상이 포함된 강의 중에 몇가지를 소개해 드립니다.
DEVIEW 2013 에서 강의한 내용이며, 링크를 통해 확인하실 수 있습니다. 오픈소스를 활용한 대용량 트래픽 분산 방법에 대한 다양한 방법에 대한 기본적인 내용을 다루고 있습니다.
마이크로소프트 멜팅팟세미나에서 강의한 내용으로, XPUSH 개발에 활용된 node.js 의 socket.io 에 대한 내용입니다. 글로벌 서비스 기업의 node.js 적용 사례를 살펴보며, 대용량 트래픽을 처리하기 위한 분산 서버를 구축한 사례를 공유 하고, 무엇을 고려해야 하는지 알 수 있겠습니다.
그 외에도 다양한 활동 하고 있으며, 관련된 주제로 발표한 사례가 생기는대로 공유 하도록 하겠습니다.
more . . .
안녕하십니까. XPUSH 개발팀입니다.
XPUSH 를 기반으로 한 서비스인 stalk.io 는 웹페이지에 설치할 수 있는 체팅 위젯입니다. 같은 페이지를 보고 있는 사람들이 몇명인지 실시간으로 표시해주며, 서로 대화 할 수 있는 기능을 제공합니다. Facebook 또는 Google+ 계정으로 로그인하면 대화에 참여하실 수 있습니다.
여러분이 홈페이지나 블로그를 운영하신다면, HTML 템블릿에 간단한 테그를 추가 하기만 하면 웹페이지 하단에 체팅 위젯이 보이게 될 것입니다.
<script src="http://stalk.io/stalk.js"></script>
<script>STALK.init();</script>현재 200여개 웹사이트에 적용되어 있으며, 지금 보고 계시는 XPUSH 홈페이지 역시 우측 하단에 stalk.io 웹체팅 위젯이 적용되어 있습니다.
IE6 이상부터, Chrome, Opera, Firefox 등 거의 모든 웹브라우져에서 동작하고, 모바일 브라우져에서도 동작 가능합니다. 현재는 SSL 인증서 적용이 되지 않아, HTTPS 도메인에는 동작하지 않습니다.
무료로 제공되는 stalk.io 서비스는 http://stalk.io 에서 간단한 설명과 적용 방법을 확인 하실 수 있습니다.
more . . .XPUSH 사이트에서 사용한 이미지 중 일부는 Font Awesome 에서 폰트를 이미지로 변환해 사용하였습니다. 이번 포스트에서는 XPUSH 개발팀이 사용했던 font awesome to png 도구에 대해 소개 합니다.
font awesome to png 는 Python 으로 개발된 소스이며, 사용방법이 아주 간단하고, 본인이 사용하고자 하는 목적에 따라 수정하기도 어렵지 않습니다.
OS X 환경을 기준으로, 가장먼저 Python이 설치되어 있는지 확인합니다. (OSX 는 기본적으로 Python 이 설치되어 있습니다.)
font awesome to png 의 소스를 보면, Image 라이브러리를 사용하는 것을 확인 할 수 있습니다. 그래서 PIL (Python Imaging Library) 가 필요합니다. PIL 은 2009 년 이후로 업데이트가 안되고 있지만, 굉장히 잘만들어졌기 때문에 아직도 많은 사람들이 PIL을 사용하고 있긴 합니다. 하지만, Python 버젼이 계속 상승하면서 더이상 지원하지 않는 경우가 발생하고 있기 때문에 PIL 을 사용하지 않고, 동일한 기능을 제공하는 Pillow 를 사용하도록 합니다.
Pillow 는 공식 사이트 가이드를 따라 어렵지 않게 설치 할 수 있습니다.
$ brew install libtiff libjpeg webp little-cms2
$ sudo pip install Pillow
이렇게 Pillow 설치가 완료되면, font awesome to png 로 폰트 파일에서 이미지를 추출해보도록 합니다.
Font Awesome 사이트를 통해 Font Awesome 을 다운 받습니다. 다운받은 zip 파일을 풀어 보면 /font-awesome-XXX/fonts 폴더에 TTF 파일이 존재할 것입니다.
이 폴더로 이동한 후 font awesome to png 의 font-awesome-to-png.py 을 복사해 넣은 후
아래와 같은 명령어로 폰트형태의 아이콘을 이미지로 변환할 수 있습니다.
$ font-awesome-to-png.py --size 280 facebook
안녕하십니까. XPUSH 개발팀입니다.
본 웹사이트는 Github Pages 를 통해 제공되고 있으며, Jekyll 를 기반으로 개발되었습니다. 모든 블로그 게시물은 Markdown 으로 작성하고, Jekyll 이 HTML 로 자동 변환하여 서비스 하고 있습니다. 홈페이지 모든 소스도 여기 에 공유 되어 있습니다.
Jekyll 로 개발한 소스를 Github repository 에 올리면, Github Pages 자동으로 빌드하여 페이지를 생성해 줍니다. 하지만, Jekyll 에서 유용하게 사용할 수 있는 Ruby 로 구현한 Plugin 은 대부분 사용할 수 없습니다. 이런 부분 외에는 거의 불편함 없이 Github Pages 에서 Jekyll 을 사용하실 수 있습니다.
XPUSH 웹사이트에서는 XPUSH 플랫폼 소개와 설치 및 사용 방법에 대한 다양한 문서를 제공하고 있습니다.
프로젝트의 모든 소스는 XPUSH Github Project 에 공개되어 있으며, 누구라도 참조하고 사용 가능합니다.
계속해서 문서 작업 중이므로, 부족한 부분 있으시면 Issue 등록 부탁 드립니다. 여러분들의 많은 관심과 feedback 부탁드립니다.
HOME : 메인페이지에 XPUSH 플랫폼의 간략한 소개와 portfolio 링크가 있습니다.
ABOUT : XPUSH 의 특징과 개발팀원들을 대해 소개 합니다.
DOCUMENTS : XPUSH 설치 및 실행 방법과, 간략한 예제 프로그램 작성법을 설명하고, XPUSH 서버 API 명세서와 사용자 라이브러리 명세서를 제공합니다.
SERVICES : XPUSH 플랫폼을 기반으로한 현재 운영 중인 서비스를 소개합니다.
BLOG : 블로그를 통해 XPUSH 프로젝트 소식과 다양한 개발팁을 공유합니다.
XPUSH is an opensource realtime communication platform for quickly, easily adding scalable functionality to web and mobile environment.
It lets you develop faster, deploy easier and scale bigger.
Code licensed under MIT License
Documentation licensed under CC BY 3.0