안녕.. 타코's 리눅스 블로그

[HowTo] 사파리에서 웹 페이지 디버깅 툴 활성화 하기

완소타코 — Sat, 27 Oct 2012 18:27:58 +0900

크롬은 컨텍스트 메뉴를 통해서 손쉽게 웹 페이지를 디버깅할 수 있는 방법(요소 검사)을 제공하고 있습니다. 개인적으로 자주 그리고 유용하게 사용하는 기능이라서 사파리에서도 동일한 인터렉션으로 디버깅 툴을 사용할 수 있을 것이라고 기대했는데 다음과 같은 개발자 옵션을 선택해야만 디버깅 툴을 사용할 수 있습니다.

"환경 설정 > 고급 > 메뉴 막대에 개발자용 메뉴 보기"

크롬에 너무 길들어져 있었던 탓인지 아래 웹 사이트를 찾는 동안 툴툴거렸습니다. :P

http://www.apple.com/kr/developer/technologies/safari/developer-tools.html

[Articles] Qt - Digia의 품으로

완소타코 — Mon, 27 Aug 2012 17:22:00 +0900

시간이 지난 소식이기는 한데 Qt가 Nokia의 품에서 떠나 Digia에 매각됐네요. 개인적으로 Nokia가 Qt를 편입하면서 LGPL 라이센스 채택 및 개발자 네트워크 활성화에 많은 노력을 기울였던 부분은 긍정적으로 평가하고 있습니다. 다만 Nokia의 모바일 시장에서의 참패 탓에 Qt의 미래까지 불투명해진 사실이 못내 아쉬웠는데 이런 일이 있었군요. Qt가 Digia의 품에서 다시 도약할 수 있는 계기를 마련했으면 좋겠습니다.

[OpenCV] Tutorial #3 - 템플릿 매칭

완소타코 — Tue, 26 Jun 2012 20:00:00 +0900

이번에는 OpenCV의 마법같은 매력을 체험할 수 있는 예제를 만들었습니다. 이름하여 템플릿 매칭입니다. 원본 이미지에서 템플릿으로 주어진 이미지에 해당 되는 영역을 찾는 기술입니다. 과학수사물에 빠짐없이 나오는 장면 중 하나가 컴퓨터를 이용해서 용의자의 얼굴을 대조하거나 일치하는 지문을 찾는 모습인데요. 저는 템플릿 매칭이라는 기술을 살펴보면서 그 장면이 제일 먼저 떠올랐습니다. :)

재미있는 샘플 이미지가 없을까 고민하다가 구글 이미지 검색에서 심슨 이미지를 발견했습니다.

위 이미지에서 밀하우스를 찾아볼 예정입니다. 이 친구가 바로 밀하우스입니다.

그럼 밀하우스를 찾는 소스 코드를 살펴볼까요?

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from opencv.cv import *
from opencv.highgui import *
from opencv import *

if __name__ == '__main__':
     source = cvLoadImage('simpson.jpg')
     template = cvLoadImage('milhouse.jpg')

     width = source.width - template.width + 1
     height = source.height - template.height + 1
     result = cvCreateImage(cvSize(width, height), 32, 1)

     mathod = CV_TM_SQDIFF
     #mathod = CV_TM_SQDIFF_NORMED
     #mathod = CV_TM_CCORR
     #mathod = CV_TM_CCORR_NORMED
     #mathod = CV_TM_CCOEFF
     #mathod = CV_TM_CCOEFF_NORMED
     cvMatchTemplate(source, template, result, mathod)

     minval, maxval, minloc, maxloc = cvMinMaxLoc(result, 0)
    
     matchloc = cvPoint(0, 0)
     if mathod == CV_TM_SQDIFF or mathod == CV_TM_SQDIFF_NORMED:
          matchloc = minloc
     else:
          matchloc = maxloc

     cvRectangle(source, cvPoint(matchloc.x, matchloc.y), cvPoint(matchloc.x + template.width, matchloc.y + template.height), CV_RGB(255, 0, 0))

     cvNamedWindow('Source', CV_WINDOW_AUTOSIZE)
     cvNamedWindow('Result', CV_WINDOW_AUTOSIZE)    

     cvShowImage('Source', source)
     cvShowImage('Result', result)

     cvWaitKey(0)

     cvReleaseImage(source)
     cvReleaseImage(template)
     cvReleaseImage(result)

     cvDestroyWindow('Source')
     cvDestroyWindow('Result')

22번 ~ 32번 라인이 실제 템플릿 매칭을 수행하고, 입력으로 주어진 이미지와 유사한 영역을 표시하는 부분입니다. 소스 코드는 생각보다 짧고 간단합니다. 물론 내부적으로는 많은 연산을 수행하겠죠?

22번 라인의 cvMatchTemplate()이 템플릿 매칭을 수행하는 함수입니다. 파라미터로 입력 이미지(심슨 캐릭터들의 이미지), 매칭에 사용할 이미지(밀하우스), 결과 이미지, 매칭 방법을 받습니다. 참고로 결과 이미지의 크기는 아래의 값으로 설정되어야 합니다. (12, 13번 라인 참고)

결과 이미지의 크기 : (W - w + 1) x (H - h + 1)

W: 입력 이미지 Width
H: 입력 이미지 Height
w: 템플릿 이미지 Width
h: 템플릿 이미지 Height

cvMatchTemplate()는 총 6가지의 매칭 방법을 제공합니다. 실제로는 복잡한 수식을 기반으로 동작 하지만 특별한 경우가 아니라면 고려할 필요는 없을 것 같습니다.

CV_TM_SQDIFF - 제곱차 매칭
CV_TM_SQDIFF_NORMED - 제곱차 매칭의 정규화
CV_TM_CCORR - 상관관계 매칭
CV_TM_CCORR_NORMED - 상관관계 매칭의 정규화
CV_TM_CCOEFF - 상관계수 매칭
CV_TM_CCOEFF_NORMED - 상관계수 매칭의 정규화

매칭 방법에 따라서 결과 값이 다르게 나오는데요. 제곱차 매칭은(CV_TM_SQDIFF, CV_TM_SQDIFF_NORMED) 일치할 수록 값이 작게 나오고 일치하지 않으면 값이 크게 나옵니다. 상관관계, 상관계수는 반대로 일치할 수록 높은 값이 일치하지 않을 수록 작은 값이 나옵니다.

24번 라인의 cvMinMaxLoc()을 이용하면 result 이미지에서 최소값과 최대값이 어디에 위치해있는지 알 수 있는데요. 이 영역을 찾아 입력 이미지에 사각형을 그리면(32번 라인) 매칭되는 부분을 나타낼 수 있습니다. 정규화 방법은 입력 이미지와 템플릿 이미지 사이에 조명의 차이가 존재할 때 영향을 줄이기 위한 방법으로 사용된다고 합니다.

아래와 같이 밀하우스를 찾았습니다.

이유는 모르겠지만 CV_CCORR를 사용하면 아래와 같이 엉뚱한 영역을 표시합니다. 저기에는 아무도 없는데 말이죠. :)

정리하면 cvMatchTemplate()은 템플릿 이미지를 왼쪽에서 오른쪽으로, 위에서 아래로 한 픽셀씩 이동하면서 입력 이미지와 비교하고 유사성을 계산해서 그 결과를 반환합니다. 그리고 cvMinMaxLoc()을 이용해 결과 영상에서 최소값 또는 최대값의 좌표를 찾음으로써 템플릿 이미지와 유사한 영역을 찾아낼 수 있습니다.

소스 코드는 아래 링크를 통해서도 살펴볼 수 있습니다.

https://github.com/jungilhan/Tutorial/blob/master/OpenCV/templateMatching.py

참고 자료

http://opencv.willowgarage.com/documentation/c/object_detection.html
http://opencv.itseez.com/doc/tutorials/imgproc/histograms/template_matching/template_matching.html
http://opencv-code.com/Template_Matching_with_OpenCV

[OpenCV] Tutorial#2 - 모자이크 효과 만들기

완소타코 — Thu, 21 Jun 2012 20:00:00 +0900

이번 예제는 좀 더 그럴 듯한 결과를 보여주는 소스 코드를 만들어봤습니다. 원본 이미지의 픽셀 정보를 이용해서 모자이크와 비슷한(?) 효과를 내는 예제입니다.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from opencv.cv import *
from opencv.highgui import *
from opencv import *

if __name__ == '__main__':
     image = cvLoadImage('fruits.jpg')
     dotImage = cvCreateImage(cvGetSize(image), image.depth, image.nChannels)

     cvNamedWindow('Mosaic Source', CV_WINDOW_AUTOSIZE)
     cvNamedWindow('Mosaic Output', CV_WINDOW_AUTOSIZE)

     cvShowImage('Mosaic Source', image)

     tileCols = 64
     tileRows = 60
     tileWidth = image.width / tileCols
     tileHeight = image.height / tileRows

     for y in range(tileRows):
          for x in range(tileCols):
               color = cvGet2D(image, (y * tileHeight) + (tileHeight / 2), (x * tileWidth) + (tileWidth / 2))
               cvRectangle(dotImage, (x * tileWidth, y * tileHeight), (x * tileWidth + tileWidth, y * tileHeight + tileHeight), (0, 0, 0))
               cvRectangle(dotImage, (x * tileWidth + 1, y * tileHeight + 1), (x * tileWidth + tileWidth - 1, y * tileHeight + tileHeight - 1), color, CV_FILLED)
               #cvCircle(dotImage, ((x * tileWidth) + (tileWidth / 2), (y * tileHeight) + (tileHeight / 2)), tileWidth / 2, color, CV_FILLED)

     cvShowImage('Mosaic Output', dotImage)

     cvWaitKey(0)

     cvReleaseImage(image)
     cvReleaseImage(dotImage)
     cvDestroyWindow('Mosaic Source')
     cvDestroyWindow('Mosaic Output')

원본 이미지를 적당한 크기(64x60)의 격자 형태로 이미지를 출력하는 것인데요. 하나의 격자를 구성할 색상 정보를 원본 이미지로부터 얻어온 뒤, 이를 새로운 윈도우에 출력하는 방식을 사용합니다.

24번 라인에서 cvGet2D가 원본 이미지로부터 색상 정보를 가져오는 부분이고, 격자에 해당하는 부분의 가운데 픽셀 값을 가져옵니다. (격자에 해당하는 모든 픽셀의 평균값을 구해도 됩니다) 25, 26번 라인에서 cvRectangle을 이용해서 새로운 윈도우에 격자를 하나씩 그립니다. 두 번의 cvRectangle이 사용된 이유는 단순히 cvRectangle에서 외곽선을 그려 조금 더 미려하게 보이도록 하기 위한 것입니다.

실행 결과는 다음과 같습니다.

원본

모자이크 효과

소스 코드에서 26번 라인을 주석 처리하고 바로 아래의 cvCircle 부분을 주석 해제하면 아래와 같은 결과를 얻을 수 있습니다. 전광판 느낌도 조금 나는 것 같지 않나요? :)

소스 코드는 아래에서 내려받을 수 있습니다.

https://github.com/jungilhan/Tutorial/tree/master/OpenCV

[OpenCV] Tutorial #1 - Hello World

완소타코 — Wed, 20 Jun 2012 19:30:00 +0900

OpenCV 파이썬 튜토리얼을 간단하게 만들어봤습니다. 첫번째 예제로 이미지 파일을 화면에 보여주고, 이미지 위에 Hello World를 출력하는 간단한 코드를 소개합니다.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from opencv.cv import *
from opencv.highgui import *

if __name__ == '__main__':
    image = cvLoadImage('sample.png')
    font = cvInitFont(CV_FONT_HERSHEY_SIMPLEX, 1, 1, 0, 2, 8)
    cvPutText(image, 'Hello World', (20, 40), font, (255, 255, 255))

    cvNamedWindow('Tutorial#1', CV_WINDOW_AUTOSIZE)
    cvShowImage('Tutorial#1', image)

    cvWaitKey(0)

    cvReleaseImage(image)
    cvDestroyWindow('Tutorial#1')

cvLoadImage는 이미지 파일을 메모리 공간으로 불러오는 역할을 합니다.
cvInitFont는 폰트 객체를 초기화 하는 역할을 합니다. 파라미터 정보는 다음을 참고하세요.

InitFont(fontFace, hscale, vscale, shear=0, thickness=1, lineType=8)

fontFace (int) - 폰트 타입
hscale (float) - 너비 지정
vscale (float) - 높이 지정
shear (float) - 폰트 기울기
thickness (int) - 폰트 선 두께
lineType (int) - 폰트 선 타입

cvPutText는 이미지 위에 폰트 객체를 이용해서 문자를 출력하는 함수입니다. 위치 및 색상을 설정해서 원하는 위치에 출력할 수 있습니다.
cvNamedWindow는 윈도우를 생성합니다.
cvShowImage는 윈도우에 이미지를 출력합니다.
cvWaitKey는 키 입력을 기다리는 함수입니다.
cvReleaseImage는 이미지 객체를 소멸합니다.
cvDestoryWindow는 윈도우를 소멸합니다.

실행 결과는 다음과 같습니다.

OpenCV를 사용하면 짧은 소스 코드로도 이미지와 관련된 많은 처리를 할 수 있습니다. 이미지 버퍼를 내부적으로 생성하고, 이미지 포맷에 대한 처리를 개발자가 고민할 필요가 없다는 것과 폰트 객체를 생성하고, 윈도우를 만드는 것이 모두 한 줄의 코드로 가능하기 때문에 오로지 이미지 처리와 관련된 부분에만 집중할 수 있습니다.

아직은 저도 OpenCV 뉴비이기 때문에 라이브러리의 1%도 체험을 못한 것 같습니다. 계속 공부하면서 OpenCV의 장점을 발견해보겠습니다. :)

소스 코드는 아래에서 내려받을 수 있습니다.

https://github.com/jungilhan/Tutorial/tree/master/OpenCV

참고 페이지

http://www.neuroforge.co.uk/index.php/getting-started-with-python-a-opencv
http://opencv.willowgarage.com/documentation/python/index.html

[Articles] Ubuntu App Showdown Contest 소식

완소타코 — Tue, 19 Jun 2012 13:09:34 +0900

Ubuntu App Showdown 행사가 6월 18일부터 7월 9일까지 3주 동안 진행됩니다. 별도의 신청 양식은 없는 것 같고, 7월 9일까지 개발한 앱을 Software Centre에 등록하면 되는 것 같습니다.

Quickly라는 도구 사용을 권장하고 있는데요. 튜토리얼을 보니 재미있는 도구인 것 같습니다. 우분투에서 소스 코드 에디팅, GUI 편집, 패키징, 릴리즈까지 개발에 관한 전반적인 것들을 관리해주는 도구입니다. 관심있으신 분은 아래 링크의 동영상을 살펴보시기 바랍니다.

http://developer.ubuntu.com/get-started/

금상, 은상, 동상에게는 우분투 전용 노트북과 노키아 N9을, 앱을 제출하는 참가자 전원에게는 우분투 티셔츠를 준다고 합니다. 재미삼아 간단한 앱을 등록해보는 것도 좋은 경험이 될 것 같고, 예전부터 Strace 프론트엔드를 만들고 싶었는데 이번 기회에 시도를 해볼까 합니다.

행사 소개 페이지

http://developer.ubuntu.com/showdown/

[Articles] 한발 늦은 Qt 관련 소식들

완소타코 — Tue, 12 Jun 2012 20:14:27 +0900

Qt5 소식
Qt5 알파 버전이 나온지 두 달 하고도 8일이 흘렀습니다. Qt4가 처음 소개된 것이 7년 전이라고 하니 실로 오랜만에 큰 변화가 시작되고 있는 셈입니다. Qt5는 Essentials, Add ons라는 두 개의 큰 카테고리로 나눠져있습니다. Qt4와 확연히 차이를 느낄 수 있는 부분이기도 합니다. 현재 아래의 모듈이 소개되고 있습니다. 추후에 더 많은 모듈이 추가될 수 있다고 합니다.

Essentials

Qt 3D

3D 그래픽스를 위한 API 모음

Qt Core

Non-GUI 핵심적인 기능을 제공 (Qt의 모든 모듈은 Qt Core를 사용합니다.)

Qt GUI

GUI 관련 기능을 제공, 내부적으로 OpenGL을 포함

Qt JS Backend

구글의 오픈소스 자바스크립트 엔진인 V8 엔진 탑재, Qt Qml에서 사용됩니다.

Qt Location

QML 및 C++을 통한 위치 정보, 매핑, 네비게이션, 장소 검색 기능 인터페이스 제공(위치 정보를 위해 NMEA 사용)

Qt Multimedia

오디오, 비디오, 라디오 카메라 기능 제공. 리눅스에서는 GStreamer 필요

Qt Network

쉽고, 이식성 있는 네트워크 프로그램을 위한 클래스 제공

Qt Qml

Qml과 자바스크립트 언어를 위한 모듈

Qt Quick

동적이면서 조작 가능한 유저 인터페이스 생성을 위한 선언형 프레임워크

Qt SQL

SQL 데이터베이스 지원

Qt Test

Qt 앱과 라이브러리를 위한 유닛 테스팅 클래스

Qt WebKit

새로운 WebKit2를 기반으로 함

Add ons

Qt D-Bus

D-Bus 프로토콜을 이용한 IPC (유닉스 계열 전용)

Qt Graphical Effects

그래픽 효과와 관련된 모듈이겠죠?

Qt Image Formats

TIFF, MNG, TGA, WBMP와 같은 추가적인 포맷을 위한 플러그인 모음

Qt OpenGL

Qt 애플리케이션에서 OpenGL을 사용하기 위한 클래스

Qt Print Support

쉽고, 이식성 있는 프린팅 기능을 위한 모듈

Qt Publish and Subscribe

정보를 퍼블리시하거나 읽을 수 있는 API 제공

Qt Quick 1

Qt 4의 QtDeclarative 모듈과 호환을 위해 제공되는 모듈. 새로운 Qt Quick 모듈 사용을 권장

Qt Script

Qt 4.x와 호환성을 위해 제공되는 모듈. QtQml의 QJS클래스 사용을 권장.

Qt Script Tools

Qt Script의 부가적인 기능을 제공하는 모듈

Qt Service Framework

시스템의 서비스를 제공하는 모듈

Qt SVG

SVG 파일을 표시하고 생성하는 기능을 제공하는 모듈

Qt System Info

배터리, 디바이스, 디스플레이, 네트워크, 스크린세이버, 스토리지와 관련된 정보를 제공

Qt Tools

Qt CLucene, Qt Designer, Qt Help, Qt UI Tools 포함

Qt Wayland

제거된 QWS 기능을 대체하기 위한 모듈. 리눅스에서만 사용 가능.

Qt WebKit Widgets

Qt 4의 WebKit1과 QWidget 기반의 API 제공

Qt Widgets

추가적인 C++ GUI 위젯 기능 제공

Qt XML

SAX와 DOM의 C++ 구현. 이 모듈은 사라질 예정이기 때문에 QXmlStreamReader/Writer를 사용하길 권장

Qt XML Patterns

XPath, XQuery, XSLT, XML Schema validation 지원

그리고 Qt5 알파 버전은 소스 패키지로만 제공이 됐었는데 현재 바이너리 패키지를 준비중이라고 합니다. 조만간 Qt5 베타 버전 소식도 전해질 것 같습니다.

Qt4 소식
Qt 4.8.2가 출시됐습니다.
- 100 여개의 기능 개선
- WebKit 버전 2.2.2로 업데이트
- libpng 1.5.10으로 업데이트
- 30개의 문서와 도구 개선

자세한 수정 내역은 아래에서 살펴볼 수 있습니다.
http://qt.nokia.com/products/changes/changes-4.8.2

Qt Creator 소식
5월 초에 Qt Creator가 2.5.0으로 업데이트 됐습니다. C++11에 대한 지원 확대가 눈에 띄네요.
http://labs.qt.nokia.com/2012/05/09/qt-creator-2-5-0-released/

Qt on Tizen
Qt가 Tizen 단말에서 구동되는 모습이 영상으로 소개됐습니다. Tizen에서 제공하는 Scratchbox Build System에서 빌드가 된다고 하는데요. Tizen 포팅을 위해서 Qt 소스 코드를 수정할 필요는 없다고 합니다. Tizen이 리눅스 기반이기 때문에 가능한 이야기겠죠?! :)
http://www.tizenexperts.com/2012/05/qt-4-8-tizen-developer/

[Code Snippets] 이미지 데이터를 PPM 포맷으로 저장하기

완소타코 — Tue, 05 Jun 2012 00:30:00 +0900

이미지 데이터를 파일로 저장하는 방법에는 여러가지가 있습니다. 가장 먼저 떠오르는 것이 BMP 포맷이고, PNG, JPEG와 같은 이미지 라이브러리를 사용하는 것도 한 방법입니다. 여기서는 제가 사용해본 방법 중 가장 간단했던 PPM 포맷으로 이미지를 저장하는 방법을 소개합니다. 개인적으로는 프레임버퍼와 같이 화면에 이미지 데이터를 출력하기 전 원본 데이터에 문제가 없는지를 확인하기 위해 주로 사용하고 있습니다.

PPM은 다음과 같이 아주 간단한 헤더 정보로 구성되어 있습니다.

Header Example 1
P6 1024 788 255

Header Example 2
P6
1024 788
# A comment
255

P6는 PPM 이미지의 매직 넘버이고, 1024는 이미지의 너비, 788은 이미지의 높이, 마지막은 색상을 구성하는 요소(R, G, B)의 크기를 나타냅니다. 위와 같이 헤더 정보를 구성한 뒤, 뒷쪽에 이미지 데이터를 위치시키면 PPM 이미지가 완성됩니다.

PPM은 색상 정보를 Red, Green, Blue 순으로 저장합니다. 투명도를 나타낼 수 없기 때문에 Alpha 값은 저장할 수 없습니다. 따라서 원본 데이터의 색상 정보에 Alpha 값이 들어가있다면 Alpha 값을 제외시키는 처리가 필요합니다. (아래의 샘플 코드 참고)

아래 코드는 원본 데이터의 색상 정보가 ARGB8888로 저장되어 있다는 가정하에 작성한 것입니다.

#include 

int savePPM(const char* name, unsigned int* buffer, int width, int height)
{
	FILE *fp = fopen(name, "wb");
	if (!fp) {
		perror("Failed to open file");
		return EXIT_FAILURE;
	}

	fprintf(fp, "P6\n%d %d\n255\n", width, height);

	for (int y = 0; y < height; y++) {
		for (int x = 0; x < width; x++) {
			unsigned char color[3];
			int index = x + (width * y);

			color[0] = (buffer[index] & 0x00FF0000) >> 16;
			color[1] = (buffer[index] & 0x0000FF00) >> 8;
			color[2] = (buffer[index] & 0x000000FF);

			fwrite(color, 1, 3, fp);
		}
	}

	fclose(fp);

	return EXIT_SUCCESS;
}

PPM으로 저장한 이미지 파일은 리눅스의 Gimp에서 열어볼 수 있습니다.

참고 페이지

http://local.wasp.uwa.edu.au/~pbourke/dataformats/ppm/
http://netpbm.sourceforge.net/doc/ppm.html
http://rosettacode.org/wiki/Bitmap/Write_a_PPM_file#C

[Articles] Secure Shell - 크롬 확장 - 어떻게 만들었을까?

완소타코 — Sat, 05 May 2012 13:06:05 +0900

출처 - Secure Shell FAQ

구글 크롬 팀에서 크롬 브라우저에서 동작하는 SSH 터미널 애뮬레이터인 Secure Shell을 발표했습니다. 베타 상태로 출시되긴 했지만 기본적인 기능은 충실히 구현하고 있습니다. Google Developers Hackathon Korea 2011에서 저희 팀이 만들었던 실험적 수준의 Beagle Term이라는 프로젝트가 비슷한 기능의 크롬 확장 앱이었기 때문에 개인적으로 아주 관심있게 살펴봤습니다.

브라우저에서 동작하는 기존의 SSH 터미널은 프록시 서버를 사용하는 방식이 많습니다. 즉, 기존의 SSH 서버 이외의 환경을 서버쪽에 구성해야 되는 방식이기 때문에, 설치를 하기까지 쉽사리 손이 가지 않는 것이 현실입니다. 일반 유저들이 서버를 다룰 수 있는 권한이 없을 수도 있고, 추가 작업을 해야 한다는 것이 부담으로 다가오기 때문에 저 개인적으로 이 부분은 꽤 중요한 사안이었습니다.

크롬 팀에서 발표한 Secure Shell은 크롬 브라우저의 Native Client 기술을 사용해서 기존 SSH 서버에 직접 접속하기 때문에 이런 작업이 전혀 필요 없습니다. hterm이라 불리는 HTML 기반의 쉘과 OpenSSH를 Native Client에서 구현을 한 것인데요. Putty나 Tera Term과 같이 크롬 브라우저가 독립적인 터미널 애뮬레이터로 작동하는 샘입니다.

제가 libssh를 NaCl로 포팅할 때만 해도 NaCl 보안상의 이유로 Raw Socket을 지원하지 않아서 포기했었던 기억이 납니다. (결국엔 NPAPI로 다시 선회할 수 밖에 없었습니다.) 그래서 이 부분을 어떻게 구현했는지가 상당히 궁금했습니다. 관련 자료와 소스 코드를 살펴보니 NaCl 단에서 WebSocket을 사용할 수 있는 API가 그 사이 추가되었습니다. (Raw Socket은 정책적으로 허용될 가능성이 없어 보입니다.)

https://developers.google.com/native-client/peppercpp/classpp_1_1_web_socket

제가 작업할 때 Pepper API의 버전이 14였는데 현재 안정 버전이 18인 것을 감안하면 그 사이 많은 변화가 있었을 것 같습니다. 그런데 순수하게 WebSocket 만으로는 SSH 서버에 직접적으로 접속할 수가 없습니다. Secure Shell도 이 부분을 사용하는 것 같지는 않고요. Secure Shell을 위한 비공개된 API를 쓰고 있거나 실험적인 API를 사용하는 것이 아닌가 하는 생각이 듭니다. Chromium 코드 저장소에 커밋된 다음의 코드들이 그 예입니다.

http://src.chromium.org/viewvc/chrome?view=rev&revision=85757

Javascript 쪽 소스에도 구글의 HTTP를 SSH로 중계하는 릴레이 서버를 사용한다는 설명이 있는 것으로 보아 아직은 NaCl API만으로는 처리가 불가능하다. 라는 결론에 다다랐습니다. 아무튼, 내부 동작은 여전히 의문이 남아있는 상태입니다. 코드만 보고 전체 그림을 단번에 그릴 수 있는 능력이 있었다면 참 좋을 것 같은데, 아직은 한참 못 미치는 수준이다 보니 대부분이 추정에 의한 것입니다.

개인적으로는 Secure Shell에서 사용한 방법을 참고해서 Beagle Term을 다시 구현해보는 것이었는데 아직은 쉽지 않을 것 같네요.

Secure Shell은 크롬 웹스토어에서 내려받을 수 있습니다.

https://chrome.google.com/webstore/detail/pnhechapfaindjhompbnflcldabbghjo

hterm / Secure Shell FAQ는 아래 링크에서 살펴 볼 수 있습니다.

http://git.chromium.org/gitweb/?p=chromiumos/platform/assets.git;a=blob;f=chromeapps/hterm/doc/faq.txt;h=f0d3007f9fc54c7331f68293b7fae5f5b71214ff;hb=95f6a2c7a984b1c09b7d66c24794ce2057144e86

[Articles] PySide - Qt 애드온으로 편입

완소타코 — Wed, 07 Mar 2012 00:45:00 +0900

PySide가 Qt 애드온으로 편입되었다고 합니다. 한 때 MeeGo 1.2 하마탄 파이썬 프로젝트의 구심점이기도 했지만, 노키아의 MeeGo 포기로 인해 펀딩이 중단되는 어려움도 겪었었죠. ㅠ

현시점에서 Qt 프레임워크를 공식적으로 채용한 모바일 OS가 없다는 것이 개인적으로 아쉽긴 하지만 안드로이드의 SL4A와 같은 프로젝트의 등장으로 파이썬의 영역이 날로 확대되고 있으니 PySide의 약진도 기대해봅니다.

참고

http://www.pyside.org/2012/03/pyside-becomes-a-qt-add-on/