[공개SW 활용 성공사례 61] 인크로스 - 공개SW로 웹앱 개발 툴의 편의성과 확장성 보장

과거 WAP 방식의 모바일 서비스는 제한된 기기와 네트워크 환경에 최적화된 서비스를 주로 제공했다. 그러나 초고속 무선 인프라가 보급되면서 이동성이란 장점을 극대화하는 방법들이 등장하기 시작했고, 자연스럽게 모바일 애플리케이션에 대한 인식도 개선됐다. 또한 모바일 기기가 점점 다양해지고 성능이 향상되면서 단일 기기에서도 다양한 웹앱들을 구동할 수 있는 기술적 논의가 활발히 진행됐다.

그 결과 기기에 종속된 플랫폼에서 개발된 네이티브 앱을 대신해 한 번의 개발로 다양한 플랫폼에서 동일한 기능을 제공하는 하이브리드 앱이 등장했다. 더욱이 하이브리드 앱은 웹에서는 구현하지 못하던 기능들을 모바일 웹상에서 앱처럼 구현할 뿐 아니라 좀더 특화된 기능들까지 더해 웹브라우징에 가까운 서비스를 제공했다.

이런 하이브리드 앱 개발에 대한 기대감을 증폭시킨 것은 바로 HTML5다. HTML과 XHTML을 확장한 HTML5는 그래픽 요소와 오랜 시간이 걸리는 작업을 백그라운드에서 처리했으며 다양한 API를 선보였다. 또 연결되지 않은 상태에서 서비스를 제공함에도 추가적인 플러그인이 필요하지 않다는 점 때문에 특히 주목받았다.
상황이 이렇게 되자 HTML5는 ‘네이티브 앱 수준의 모바일 앱 개발을 가능케 하는 플랫폼’으로까지 인정받게 됐고, 특히 공개SW 기반 모바일 운영체제 개발 움직임과 궤를 같이 하면서 다양한 공개SW에 기반을 둔 개발 솔루션과 기술의 등장으로 이어졌다.


웹앱 개발을 위한 토털 솔루션, 다빈치

인크로스의 다빈치 역시 공개SW인 제이쿼리에 기반을 둔 웹앱 개발 도구다. 다빈치는 웹앱 개발에 응용되는 다양한 기술들을 편리하게 사용할 수 있게 할 뿐만 아니라 개발자에게 필요한 전반적인 개발 환경을 제공한다.
도창욱 인크로스 프레임워크 개발팀장은 “웹브라우저에서 사용되는 실제 HTML 리소스에 기반을 두고 프로젝트를 수행할 수 있도록 디자인 환경과 실행 환경을 통일했으며, 웹 기반 응용프로그램을 개발하는 데 필요한 전체 프로세스를 지원한다”고 소개했다.
다시 말해 HTML과 CSS 기반으로 애플리케이션 구조와 형태를 결정하고 자바스크립트 기반 기술을 응용해 로직과 기능을 개발하며, 웹에서는 제공하지 않는 기기적 기능이나 웹앱을 애플리케이션 형태로 서비스하기 위한 응용 기술 그리고 배포를 위한 패키지 생성까지를 모두 다빈치에서 제공한다는 설명이다.



또한 사용자가 화면에 나타난 내용 및 형식과 동일한 출력 결과를 얻을 수 있는 위지윅(WYSIWYG, What you see is what you get) 기반 저작 환경과 N스크린 에디터를 구현해 웹앱 개발 시 개발자와 디자이너가 원활하게 협업할 수 있는 환경을 제공한다.
특히 CSS3에서 제공하는 애니메이션 에디팅 기능을 타임라인 형태로 제공해, 멀티미디어 매거진, 광고, 애니메이션 개발 기업과 같은 리치 미디어 콘텐츠 산업에서도 활용할 수 있어 관련 업체들이 많은 관심을 보이고 있다는 게 회사 측 관계자의 전언이다.
하지만 도창욱 팀장은 “무엇보다 다빈치의 가장 큰 장점은 HTML5의 최신 표준을 지원하면서 개발 편의성과 확장성을 보장하는 점을 꼽을 수 있다”면서 이는 공개SW인 제이쿼리에 기반을 둔 덕분임을 강조했다.


제이쿼리 도입으로 편의성과 확장성 모두 잡아

인크로스가 제이쿼리 기반으로 다빈치를 개발하게 된 배경에는 제이쿼리 커뮤니티들의 활발한 움직임이 있었다. 제이쿼리 재단을 중심으로 구성된 커뮤니티에서는 제이쿼리에 대한 다양하고 활발한 기술적 논의들이 진행되고 있었다. 회사 측은 다수의 개발자가 직간접적으로 참여하는 만큼 기능의 안정성을 확보해주는 빠른 업데이트가 이뤄지고, 현업에서 즉시 활용할 수 있는 완성도 높은 라이브러리와 다양한 개발 리소스를 쉽게 얻을 수 있는 점에 주목했다.
여기에 전 세계 상위 1만 개의 웹사이트 중 48%가 자바스크립트 라이브러리를 사용하고, 자바스크립트에 기반을 두고 구축된 웹사이트 중 84.7%가 제이쿼리를 사용 중이라는 조사결과도 영향을 미쳤다. 이런 높은 사용률은 웹사이트 구축을 위한 개발 인프라 자체가 크다는 것을 방증하는 근거가 됐으며, 실제로 폭 넓은 인프라는 개발 아이템 선정부터 개발 방법 논의까지 전체 다빈치 개발 과정에서 적용방법과 방향에 대한 고민에 집중할 수 있게 해줬다고 도창욱 팀장은 말했다.


다빈치 아키텍처
제이쿼리가 제공하는 개발방식은 다빈치의 개발 편의성과 확장성에 주목한 인크로스의 선택에 긍정적으로 작용했다. 먼저 다빈치와 제이쿼리의 다양한 프레임워크 및 라이브러리를 원활하게 통합할 수 있어 기능과 UI 향상에 좀더 주력할 수 있었다. 또한 제이쿼리 커뮤니티에서는 기존 소스 코드의 개선뿐 아니라 연관 기술 개발에도 적극적이어서 느린 업데이트로 인해 개발 이후 발생하는 문제들에 민첩하게 대응하지 못할 것이라는 우려를 없앨 수 있었다.

실제로 다빈치는 UI 엘리먼트와 데이터를 연결해주는 데이터-바인딩 기능을 Knockout.js로 구현했는데, 개발 당시 다양한 제이쿼리 커뮤니티에 있는 데이터-바인딩에 대한 개발 방법과 프레임워크를 조사하고 유용한 사례들을 축약해 다빈치의 개발 형태와 통합하는 방식으로 진행했다. 도창욱 팀장은 “Knockout.js에도 이미 제이쿼리에 대한 기본적인 사항들이 고려됐기 때문에 조사부터 개발까지 2개월이 채 걸리지 않았으며, 다빈치 개발 과정에서 발생하는 문제들만 추가 수정하는 수준으로 개발 작업을 진행했다”고 설명했다.


다빈치 기술 공개로 공개SW 기본 정신 실천

한편 인크로스는 제이쿼리 재단과 긴밀하게 협력해 국내에도 제이쿼리 관련 커뮤니티가 자생할 수 있는 환경을 만들고자 노력하고 있다. 그 일환으로 지난 11월에는 2012 제이쿼리 아시아 컨퍼런스를 개최하고 코어, 모바일, UI 분야로 발전 중인 제이쿼리의 업데이트 과정과 동향에 대해 자세히 소개했다.
또한 다빈치가 공개SW를 활용한 솔루션인 만큼 개발자들에게 도움이 될 기술들을 공개할 계획이다. 회사 측은 자신이 개발한 개발 툴과 플랫폼의 코드, 그리고 경험을 공개한 개발자들과 그들의 노력이 있어 지금의 다빈치가 존재할 수 있었다며, 애플리케이션 레이아웃 위젯과 애플리케이션 실행 관련 기능들은 이미 공개됐거나 지속적인 공개를 준비 중에 있다고 밝혔다.


-----------------------------------------------------------------------------------------------------------------------------
[인터뷰]

“제이쿼리 재단과 협력해 국내 커뮤니티 육성에 일조”

도창욱 인크로스 프레임워크 개발팀장

제이쿼리 재단과의 협력에 대해 소개한다면
인크로스와 제이쿼리 재단과의 기본적인 협력 방향은 국내에서 제이쿼리 중심의 커뮤니티를 육성하고, 해외 커뮤니티들과 협력해 기술과 경험을 공유하는 데 있다. 그 일환으로 개최된 것이 지난 2012 제이쿼리 아시아 컨퍼런스다. 국내 웹 개발 역량이 글로벌한 환경에서도 자생력을 가질 수 있으려면 외부와 적극적으로 협력하려는 움직임을 보여야 한다. 새로운 기술과 로드맵을 빠르게 공유하기 위한 최선의 방법은 국내 커뮤니티를 육성하는 것이고, 이를 위해 인크로스는 제이쿼리 재단과 적극 협력하면서 열린 개발 환경을 기반에 둔 성장을 지향하고 있다. 또한 솔루션 개발사 측면에서 봤을 때 시장의 다양한 요구사항들을 빠르게 수용하고 대응하려는 목적도 있다.

국내 웹앱 개발 분야에서 제이쿼리가 주목받는 이유는
사실 개발자가 자신이 필요한 기능을 모두 개발하는 것은 거의 불가능하다. 그런 점에서 다양한 개발 리소스가 있다는 것은 그만큼 개발자들에게 편의성을 제공하고 또 그만큼 인기가 있음을 방증한다. 그런 점에 있어서 제이쿼리는 친숙함 때문에 개발자들에게 주목받고 있다. 여기서 친숙하다는 말은 다양하게 해석될 수 있는데, 기본적으로 소스 코드가 공개돼 있어 다양한 샘플과 문서 그리고 강좌들을 활용할 수 있어 개발에 따른 진입 장벽이 상대적으로 높지 않다는 의미로 이해하면 된다. 또 새로운 개발 패러다임이 등장하면 다양한 요구 기술들이 존재하게 되지만, 웹 개발자에게 제이쿼리는 언어적 차이나 새로운 개발 방법론에 어렵지 않게 접근할 수 있는 확장 형태의 기술이기에 큰 장점이 있다.


-----------------------------------------------------------------------------------------------------------------------------