Lively Kernel

Lively Kernel

크로미움 5에서 실행되는 Lively Kernel 0.9 예시
원저자	댄 잉걸스
개발자	썬 마이크로시스템즈, 하소 플래트너 연구소
안정화 버전	2.1.3 / 2012년 4월 7일(2012-04-07)
저장소	github.com/LivelyKernel/LivelyKernel
프로그래밍 언어	자바스크립트, 또는 Qt 변형 내의 C++
운영 체제	크로스 플랫폼
플랫폼	애플 사파리, 모질라 파이어폭스, 구글 크롬, 오페라, 아이폰–아이패드, 마이크로소프트 인터넷 익스플로러 9 이전 버전은 확장 기능이 있어야만 가능하지만, 추가 웹 브라우저 플러그인이 필요한 실험적 포트가 있음
언어	영어
종류	웹 개발
라이선스	MIT
웹사이트	lively-kernel.org

Lively Kernel은 댄 잉걸스가 SAP 연구소에 재직할 당시 개발한 오픈 소스 웹 프로그래밍 환경이다. 풍부한 그래픽과 직접 조작 기능을 갖춘 데스크톱 스타일의 애플리케이션을 지원하면서도, 기존 데스크톱 애플리케이션이 겪는 설치나 업그레이드의 번거로움이 없다. 개발은 멘로파크의 썬 마이크로시스템즈 연구소에서 시작되었으며, 이후 베를린 근교의 포츠담에 있는 하소 플래트너 연구소로 옮겨졌다.

개요

Lively Kernel은 표준 브라우저 그래픽(W3C 캔버스 또는 SVG)을 사용하여 자바스크립트 프로그래밍 언어로 완전히 작성된 그래픽 구성 및 통합 프로그래밍 환경이다. 따라서 웹 페이지로서 모든 브라우저에서 접근 가능하며, 웹 페이지가 로드되는 즉시 작동을 시작한다. 자체 코드와 그래픽을 편집할 수 있으며, 내장된 WebDAV 지원을 통해 결과를 저장하거나 심지어 새로운 웹 페이지로 자신을 복제할 수도 있다. 애플리케이션 개발 능력과 더불어 자체 통합 개발 환경(IDE)으로도 기능할 수 있어, 브라우저 외에 별도의 도구 없이도 전체 시스템이 자급자족할 수 있다.

도형, 위젯, 창, IDE까지 모두 웹 페이지에서

Lively Kernel은 브라우저 그래픽으로 구축된 장면 그래프에 동작을 추가하기 위해 모픽 그래픽 모델을 사용한다. 따라서 단순한 그래픽은 슬라이더, 스크롤바, 텍스트 뷰, 목록 및 클리핑 프레임과 같은 표준 GUI 위젯으로 조립된다. 이러한 위젯으로 구축된 간단한 윈도 시스템은 객체 검사기, 파일 관리자(브라우저), 코드 브라우저를 제공한다. 따라서 기본적인 데모 페이지조차 시스템이 실행되는 동안 간단한 코드 브라우저에서 새로운 코드를 편집하고 테스트할 수 있는 능력을 갖추고 있다.

Lively는 자체 튜토리얼을 포함한 간단한 웹 사이트를 구축하는 데 사용되었으며, 버전이 관리되는 저장소에 페이지를 저장하는 클라이언트 측 위키 시스템을 구축하는 데도 활용되었다. 콘텐츠는 비교적 정적인 텍스트 페이지부터 어도비 플래시 시뮬레이션처럼 보이고 동작하는 완전히 동적인 모델까지 다양할 수 있다. Lively Kernel은 특정 애니메이션 지원(SVG의 애니메이션 기능은 사용하지 않음) 없이도 복잡한 동적 동작을 달성하는데, 이는 자바스크립트 내에서 다중 그린 스레드 프로세스를 단순하게 스케줄링함으로써 구현된다.

텍스트와 변환

Lively Kernel은 자바스크립트로 작성된 자체 다중 폰트 텍스트 편집기를 포함한다. 여기에는 가운데 정렬, 양쪽 맞춤 및 유사한 초보적 텍스트 구성 기능에 대한 지원이 포함된다. 따라서 Lively에서 작업하는 것은 웹 페이지 디자인 프로그램에서 작업하는 것과 느낌이 매우 비슷하지만, 실시간 텍스트 레이아웃이 오프라인 구성 프로그램에서 수행되는 것이 아니라 Lively Kernel 내 텍스트의 내장된 동적 동작이라는 점이 다르다.

Lively 그래픽의 생동감은 객체와 텍스트의 크기 및 회전 핸들을 조작할 때 더욱 분명해진다. 전체 코드 브라우저는 측면으로 20도 기울여서 사용할 수 있다. 텍스트 편집기는 전적으로 생동감 있는 그래픽으로 구성되어 있으므로, 스크롤바, 클리핑 프레임 및 나머지 모든 사용자 인터페이스와 마찬가지로 회전되거나 크기가 조정되어도 올바르게 작동한다.

크로스 브라우저 호환성

Lively Kernel은 자바스크립트와 SVG 또는 캔버스 그래픽에 대한 브라우저 지원에 의존하며, 이들은 모두 현재 W3C 표준의 일부이다. 2009년 기준으로 이는 사파리, 파이어폭스, 크롬 및 오페라 브라우저에서 실행됨을 의미한다.

이 요구 사항이 HTML보다 호환성이 떨어지는 것처럼 보일 수 있지만, 실제로는 Lively가 HTML보다 실행되는 브라우저 간에 더 높은 호환성을 제공한다. 이는 HTML 구현들 사이보다 자바스크립트, SVG, 캔버스 구현들 사이에 더 많은 통일성이 존재하기 때문이다. 하나의 작은 초기 파일을 제외하면, Lively Kernel 코드 베이스는 어떤 클라이언트 브라우저가 사용되는지에 대한 테스트가 전혀 없다.

2011년 기준으로 Lively Kernel은 매킨토시용 사파리, 윈도용 크로미움 또는 구글 크롬과 같은 웹킷 기반 브라우저에서 가장 잘 실행된다. 인터넷 익스플로러(윈도)에서 실행하려면 구글 크롬 프레임이 필요하다. 다음 릴리스에서는 모든 대중적인 브라우저에서의 테스트가 계획되어 있다.

통합 개발 환경

Lively는 로컬에 있는 10여 개의 자바스크립트 소스 파일을 WebDAV를 통해 버전 관리 저장소와 동기화하여 작업하도록 설계된 상당한 성능의 통합 개발 환경을 포함하고 있다. 사용자가 시스템 브라우저를 열면 모든 자바스크립트 소스 파일이 브라우저의 파일 창에 나열된다. 사용자가 이 파일 중 하나를 클릭하면 파일이 읽히고 (OMeta 자바스크립트 파서에 의해) 파싱되며, 함수나 클래스 정의가 나열되고 각 클래스에 대해 모든 메서드 이름이 표시되는 스몰토크 브라우저와 유사하게 화면에 표시된다. 사용자는 메서드 이름을 클릭하고 하단 창에서 코드를 편집한 후 새로운 정의를 저장할 수 있다. 새로운 정의는 구문 검사를 거치며, 올바른 경우 .JS 파일에 다시 저장된다. 또한 "eval 모드"(일반적인 경우)라면 실행 중인 시스템 내에서 메서드가 재정의된다. 이를 통해 Lively나 개발 중인 애플리케이션을 다시 시작할 필요 없이 중요하지 않은 변경 사항을 즉시 적용할 수 있다. 모든 소스 파일이 로드되면 빠른 검색을 통해 선택한 텍스트에 대한 모든 참조를 찾고, 일치하는 모든 코드 본문을 별도의 하위 브라우저에 표시한다.

Lively IDE에는 채우기, 테두리 및 텍스트 스타일을 제어하기 위한 객체 검사기와 모픽 스타일 패널이 포함되어 있다. 오류 지점에서의 디버깅과 성능 튜닝을 위한 프로파일링 기능도 존재하지만, 모든 주요 브라우저에서 이러한 런타임 지원 기능의 품질이 향상됨에 따라 별도로 강조되지는 않았다.

Lively 위키

IDE는 버전 관리 저장소 내의 소스 코드 파일에서 작동하여 Lively 코드 베이스의 발전을 관리한다. 동일한 접근 방식이 클라이언트 측 위키의 형태로 사용자가 활성 웹 콘텐츠를 제어할 수 있도록 하는 데 사용되었다. Lively는 월드(장면 그래프 및 기타 콘텐츠) 내의 콘텐츠를 편집하고 해당 콘텐츠를 웹 페이지로 저장하는 기능을 포함하고 있으므로, WebDAV 연결을 통해 Lively는 점진적으로 개발되는 동안 페이지 콘텐츠의 새 버전을 저장할 수 있다. 각 새 버전이 저장될 때마다 인터넷의 다른 곳에서 볼 수 있으며, 오류가 발생하거나 마음이 바뀌었을 경우 이전 버전을 검색할 수도 있다. 이러한 위키 방식의 웹 콘텐츠 진화는 Lively의 모든 텍스트, 그래픽 및 스크립트 콘텐츠뿐만 아니라 정의될 수 있는 모든 새로운 형태에도 확장되지만, 그 어떤 종류의 위키 서버도 필요하지 않다는 점이 특징이다. 필요한 것은 HTTP WebDAV 인터페이스를 제공하는 서버뿐이다. Lively 프로젝트 콘텐츠 중 점점 더 많은 부분이 이러한 방식으로 유지 관리되고 있다.

예제 코드

// ClockMorph: 간단한 아날로그 시계

Morph.subclass(“ClockMorph”, {

    defaultBorderWidth: 2,
    type: "ClockMorph",

    // 생성자
    initialize: function($super, position, radius) {

        $super(position.asRectangle().expandBy(radius), "ellipse");
        this.openForDragAndDrop = false; // 드래그 앤 드롭 요청을 처리하지 않음
        this.makeNewFace(); // 시계 문자판 생성
        return this;
    },

    // 새로운 시계 문자판 생성
    makeNewFace: function() {

        var bnds = this.shape.bounds();
        var radius = bnds.width/3;
        var labels = [];
        var fontSize = Math.max(Math.floor(0.04 * (bnds.width + bnds.height)),4);
        var labelSize = fontSize; // 기본 들여쓰기로 가운데 정렬을 위한 공간

        // 시계에 로마 숫자 추가
        for (var i = 0; i < 12; i++) {
            var labelPosition = bnds.center().addPt(Point.polar(radius*0.85,
                                ((i-3)/12)*Math.PI*2)).addXY(labelSize, 0);
            var label = new TextMorph(pt(0,0).extent(pt(labelSize*3,labelSize)),
            ['XII','I','II','III','IV','V','VI','VII','VIII','IX','X','XI'][i]);
            label.setWrapStyle(WrapStyle.SHRINK);
            label.setFontSize(fontSize);
            label.setInset(pt(0,0));
            label.setBorderWidth(0);
            label.setFill(null);
            label.align(label.bounds().center(),labelPosition.addXY(-2,1));
            this.addMorph(label);
        }

        // 시계 바늘 추가
        this.addMorph(this.hourHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.5)],4,Color.blue));
        this.addMorph(this.minuteHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.7)],3,Color.blue));
        this.addMorph(this.secondHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.75)],2,Color.red));
        this.setHands();
        this.changed();
    },

    // 현재 시간에 따라 시계 바늘 각도 설정
    setHands: function() {

        var now = new Date();
        var second = now.getSeconds();
        var minute = now.getMinutes() + second/60;
        var hour = now.getHours() + minute/60;
        this.hourHand.setRotation(hour/12*2*Math.PI);
        this.minuteHand.setRotation(minute/60*2*Math.PI);
        this.secondHand.setRotation(second/60*2*Math.PI);
    },

    // ClockMorph가 월드에 배치될 때 호출됨
    startSteppingScripts: function() {
        this.startStepping(1000, "setHands"); // 1초에 한 번
    }
});

Lively for Qt

Qt용 Lively는 자바스크립트로 된 커널 부분이 C++의 Qt 프레임워크 함수로 대체된 Lively Kernel의 또 다른 구현이다. Qt용 Lively는 위젯 구현, 레이아웃 관리, 핵심 이벤트 처리 및 핵심 자바스크립트 지원과 같은 대부분의 기본 기능을 Qt로부터 상속받는다. Qt용 Lively는 사용자 인터페이스와 애플리케이션 소스 코드를 즉석에서 편집할 수 있게 함으로써 Lively Kernel의 예외적인 상호작용성("생동감")을 유지한다. 그러나 Qt용 Lively에서는 Qt 플랫폼의 친숙하고 잘 문서화된 애플리케이션 프로그래밍 인터페이스(API)를 사용하여 개발 작업이 수행된다.

외부 링크

• Lively Kernel - 공식 웹사이트