오픈소스 프로젝트를 운영하며..

2018년은 FE개발랩에 좋은 일이 많은 한 해였다. 랩에서 내놓은 오픈소스 프로젝트들이 좋은 반응을 얻었고, 몇 가지 의미있는 성과를 얻었다. 아직 오픈소스 생태계에서 큰 역할을 하지 못하는 대한민국에서 좋은 오픈소스 프로젝트들이 많이 나왔으면 하는 바람으로 몇 년간 우리가 오픈소스를 운영하면서 얻은 나름의 결과를 글로 작성한다.

이 글은 TOAST UI Editor로 작성했으며 차트는 TOAST UI Chart로 만들었고 일부 이미지는 TOAST UI ImageEditor를 사용해 편집했다.

작은 시작

FE개발랩에서 공식적으로 공개한 첫 오픈소스 프로젝트는 TOAST UI Editor였다. 뒤늦게 좋은 반응을 얻게 되었고 그 경험을 “3년 된 오픈소스가 1주일 만에 3,000 GitHub 스타를 받다“라는 글을 통해 공유했었다. 하지만 이보다 앞서 작지만 의미 있는 반응을 얻었던 랩의 첫 프로젝트는 JSDoc의 템플릿으로 공개한 tui.jsdoc-template였다. JSDoc은 JavaDoc과 비슷한 도구로 코드를 작성할 때 주석으로 약속된 형태의 부가적인 정보를 제공하면 개발 문서를 자동으로 만들어주는 도구다. 우리는 랩 내에서 기본 JSDoc 템플릿을 개선하여 디자인과 기능을 추가해서 사용했는데 그것을 오픈소스로 공개한 것이다. 디자인은 랩의 조직장이 그리고 개발은 막내가 했다. 그 때 당시만 해도 영향도와 규모가 작은 프로젝트이기 때문에 “그냥 공개해서 쓰자”고 시작했다. 그리고 머지않아 템플릿은 video.js와 구글의 Yeoman 개발 문서 등에서 사용되었다.

img

공개한 템플릿의 사용률이 높아지면서 리포지토리에 외부 개발자가 PR과 이슈 등으로 기여를 하기 시작했다. 이전에는 경험하지 못했던 일이기 때문에 그러한 관심은 우리에게 매우 고무적이었다. 외부 개발자와 우리가 만든 작업물에 대해 토의하고(영어로..) 새로운 기능에 대해 검토하며(영어로..) 프로젝트를 발전시키는 상황은 좋은 경험일 수밖에 없었다.

이후 좋은 반응을 얻은 TOAST UI Editor를 통해 오픈소스도 약간의 홍보 작업이 필요하다는 것과 충분히 그럴만한 가치가 있다는 것을 배웠다. 그리고 이런 경험을 토대로 다양한 종류의 추가 프로젝트들을 공개했다. 회사 내부 서비스를 개발하면서 필요에 의해 만든 컴포넌트들이었지만 처음부터 오픈소스를 염두에 두고 만들었다.

개발한 일부 모듈 혹은 프로젝트 전체를 오픈소스화 하는 것의 최대의 걸림돌은 한 회사의 자산인 기술을 오픈하는 것에 대한 비용 걱정보다는 공개할 만큼의 퀄리티를 가지고 있는가에 대한 두려움일 것이다. 그러면 우리 랩은 결과물에 엄청난 자신감이 있어서 오픈소스 프로젝트를 공개할 수 있었을까? 아니다. 그 대신 우린 일정 수준 이상의 퀄리티를 보장할 수 있는 개발 문화가 있었다. 그보다는, 개발 문화를 더 발전시키고 지키려는 열정이 있는 우리 랩을 신뢰했다. 물론 그 과정에서 나온 결과물도 부족할 수 있다. 하지만 적어도 우리가 낼 수 있는 최고의 결과물을 냈을 거라는 믿음은 있다. 그리고 이런 과정은 개발 문화를 존중하고 그 중요성을 아는 회사였기에 가능했다.

도약

TOAST UI Editor을 통해 가능성을 알게 된 후 TOAST UI 프로젝트는 매우 바쁘게 돌아갔다. 보유한 다른 프로젝트들도 홍보를 진행하기로 했다. 홍보에 앞서 애플리케이션으로 분류한 큰 규모의 컴포넌트 Chart, Grid, Calendar, ImageEditor의 디자인을 개편했다. 드디어 디자이너의 도움을 얻어 디자인을 적용하게 되었다. 프로젝트별로 한 명의 개발자가 디자인, 벤치마킹, 기획, 커뮤니티 대응까지 해왔는데 디자이너의 도움으로 완전히 다른 프로젝트가 되었다. 물론 우리 회사 디자이너들이 디자인 매우 잘하기 때문이기도 하다. 처음 디자인 시안을 접했을 때 너무 이뻐서 울컥했던 프로젝트까지 있었다. 이쪽 일을 하면서 처음 겪은 경험이다. (압도적인 감사!)

img

홍보에 앞서 굳이 디자인을 개편한 이유가 있다. 이미 프로젝트 대부분이 에디터와 함께 오픈소스로 공개가 된 상태였기 때문이다. 뒤늦게 홍보를 진행하려다 보니 홍보의 이유가 될만한 뚜렷한 개편이 필요했고 우리가 선택한 것은 디자인이었다. 전체적으로 디자인이 잘 나왔으니 SNS나 블로그에서도 아름답다는 반응이 많았다. 디자인의 개선과 함께 브랜딩팀과 디자인팀을 통해 정식 로고까지 만들어졌고 랩 내에서는 TOAST UI 브랜드 사이트를 개발하기 시작했다.

img

브랜드 사이트 역시 디자인을 제외한 모든 역할을 개발자들이 주도해 진행했다. 물론 힘들었던 점도 있었지만, 개발자들이 성장할 수 있는 유익한 시간이었다고 생각한다. 브랜드 사이트는 프론트 서버를 따로 구축하지 않고 깃헙 페이지를 사용하고 있다. 데이터도 깃헙 리포의 README를 가공해 사용하고 있어 별도의 백엔드 서버를 운영하지 않는다. 깃헙 페이지는 서버가 특정 시간대에 느리다는 단점만 제외하면 모든 면에서 만족스럽고 이 정도 규모의 브랜드 사이트에서는 충분히 프론트 서버를 대체할 수 있다고 생각한다.

오픈소스 프로젝트는 직접적인 가치를 창출하기 힘들다. 그래서 리소스를 쓰면 쓸수록 그 부담은 커질 수 있다. 2018년 올해 우리가 진행한 작업은 오픈소스의 가치를 믿어주었던 회사였기에 가능했던 일들이다. 직접 들은 것은 아니지만 “걱정하지 말고 여기저기 많이 쓰이도록 좋게 만드는데만 집중하세요”라는 임원진의 지지가 있었다고 한다. 무슨 말이 더 필요할까? 개인적으로 큰 감동을 받았다.(나이 40이 되니 감동을 잘 받는다.)

2018년도 반응

Editor를 홍보한 이후 Chart, Calendar, ImageEditor, Grid 순으로 디자인 개편과 홍보를 반복했다. 오픈소스로의 가치가 깃헙의 스타수로 판단할 수는 없겠지만 나름 괜찮은 결과를 냈다고 생각한다. 전부 확인한 것은 아니지만, 한국 기업 중에서는 현재까진 제일 좋은 결과를 얻은 것으로 판단된다. 2019년 1월 7일 현재 각 프로젝트의 스타 수는 아래와 같다.

컴포넌트 사용 범위를 고려하면 이해가 가능한 순서로 스타를 얻었다. 프로젝트의 사용량을 측정해야 할 필요가 생겨 4월부터는 GA 측정을 시작했다. 수집되는 정보는 TOAST UI를 사용하는 서비스의 도메인이고 그 정보를 통해 각 프로젝트별 사용량을 측정할 수 있었다. 4월 GA 측정을 시작한 후로 TOAST UI를 사용하는 서비스 도메인수는 아래와 같다. IP 혹은 도메인당 하나로 계산한 차트다.

img

11월 한달 TOAST UI를 사용한 IP는 총 3,189개다. 테스트 용도의 히트까지 포함한 수치지만 충분히 의미 있는 사용량이라고 생각한다. TOAST UI가 포함된 서비스의 PV는 GA 무료 플랜의 허용치를 이미 넘어서 유료 결제를 종용하고 있는 수준이다. (월에 천만 히트가 무료 플랜의 제한이다)

img

깃헙에서의 성과는 곧 SNS에서의 반응으로 이어졌다. 트위터에서는 여러 나라의 많은 분이 프로젝트가 오픈될 때 마다 직접 스테이터스를 작성해 공유해 주었고(#toastui, #tui, #nhnent) Toast UI 공식 트위터 계정의 스테이터스에는 리트윗과 하트로 반응해 주었다. Toast UI 공식 트위터 계정의 리트윗 탭과 하트 탭에서 각 내용을 자세하게 살펴볼 수 있다. 지속해서 반응을 수집하고 반응에 따뜻한 대응을 할 예정이다. (팔로우는 사랑입니다.~)

img

프론트엔드 관련 위클리 이메일 매거진들도 TOAST UI에 관한 내용을 실었다. 프론트엔드 혹은 웹 개발자들이 많이 구독하는 매거진들이라 하나하나가 영광스럽고 고맙다. 꽤 오래전부터 구독해왔던 WebToolsWeekly는 TOAST UI에 대한 가벼운 언급을 자주 했다.

img

HTML5 Weekly에서 이름을 바꾼 Frontend Focus에서도 종종 게재했고 차트의 배포 소식은 헤드라인에 실었다.

img

2019년 1월 첫 이슈에서는 TOAST UI Chart를 2018년 최고의 코드 중 하나로 선정했다.(Cheers, Guys!)

img

개인적으로 발간 초창기부터 구독해 도움과 자극을 많이 받았던 Javascript Weekly는 꽤 많은 관심을 보였다. 3개 프로젝트의 배포 소식을 헤드라인에 실었고 수시로 TOAST UI의 내용을 게재했다.

img

최근에는 2018년 최고의 코드 중 하나로 TOAST UI Calendar를 선정했다. (Thanks, Guys!)

img

그리고 다양한 블로그에서 TOAST UI에 대한 내용을 게재하고 대부분 좋은 평을 주었다. 몇 가지만 모와 봤다. Tutorialzine은 2018년 5월의 흥미로운 15개의 자바스크립트 라이브러리로 TOAST UI Calendar를 소개했다.

img

웹 개발 전반에 다양한 정보를 제공하고 있는 블로그 codeburst는 TOAST UI Editor을 추천하는 아티클을 게재했다.

img

창의적인 도구들을 소개하는 Silo Creativo와 웹 개발 전반의 정보를 제공하는 블로그 CodeWall은 Toast UI Chart 를 소개하는 아티클을 게재했다. 그리고 2018년 최고의 Bar Chart로 TOAST UI Chart를 선정했다.

그 밖에 사이트 혹은 블로그에서 TOAST UI 관련 내용을 찾아 볼 수 있었다.

위클리픽이라는 이름의 랩의 기술 공유 활동으로 매주 한 개의 FE관련 아티클을 번역하거나 오리지널 아티클을 게재하는데 오리지널 아티클의 영어 번역본을 미디엄 TOAST UI 블로그를 통해 공유하고 있다. 이 활동 역시 트위터에 공유되며 해외 개발자들이 반응을 보였고 React status라는 위클리 매거진에 소개되기도 했다.

아마 더 많은 관심이 웹상에 존재할지 모른다. 크든 작든 혹은 비판일지라도 모든 관심에 감사하며 귀를 기울이고 있다. 2019년에도 많은 활동으로 더 많은 관심과 피드백을 기대하고 있다.

성과

오픈소스 운영에서 회사가 기대할 수 있는 이익은 대외적 기술 인지도 향상과 그로 인한 인재풀 확보이다. 그리고 2018년 하반기, 우리는 그 뚜렷한 성과를 확인할 수 있었다. 수시 채용을 통해 들어오는 이력서에 TOAST UI에 대한 언급이 많아졌고 심지어 TOAST UI를 개발하는 업무를 하고 싶다는 의사를 이력서에 표명하기도 했다. 2018년 경력 공채에서는 채용 과제로 TOAST UI의 이슈를 해결하는 과제를 출제해 훌륭한 인재를 선발하기도 했다. 그리고 이런 관심은 익명 커뮤니티 블라인드에서도 확인할 수 있었다.

img

프론트엔드 개발자가 이직을 고려하는 듯한 이 글에는 많은 댓글이 달렸다.

img

그중 아래와 같은 댓글들은 큰 힘이 되었다. NHN엔터의 댓글들은 모두 랩 외부 직원이 작성해준 댓글이다. (주작 아니에요~, 그리고 우리 횽들 고마워요~)

img

어느 정도 인정을 받고 있다는 생각에 감개무량하다.

하반기에는 반가운 소식이 들렸다. 유료 위지윅에디터로 인지도가 높은 Froala Editor 에서 이미지 에디터를 TOAST UI ImageEditor로 교체한 것이다.

img

블로그를 통해 Adobe가 개발한 Aviary에서 TOAST UI ImageEditor로 이미지 에디터를 교체한다는 소식을 알렸고 머지않아 교체된 2.9버전이 배포되었다. 이 밖에도 입상은 하지 못했지만 Git Nation OS Awards에서 TOAST UI Editor가 후보에 올랐었고 여러 회사에서 사업 제휴 요청이 꾸준히 오고 있지만, 회사 방침상 매번 거절하고 있다.

향후 활동

이 글을 작성하고 있는 나는 자랑스럽게도 TOAST UI 프로젝트들을 리딩하는 업무를 담당하고 있다. 랩의 조직장이 만들어준 캔버스 위에 나와 개발자가 그림을 완성한다. 2019년도에 완성할 그림은 아래와 같다.

  • 자바스크립트 개발 문서 자동화 도구를 배포한다.
  • 그리드는 대부분의 디펜던시를 제거하고 기초부터 새롭게 개발해 퍼포먼스를 향상한다.
  • 차트는 브라우저 호환성을 조정하고 더 나은 사용성과 퍼포먼스를 제공할 예정이다.
  • 캘린더와 에디터는 주기적으로 개선될 예정이다.
  • 전체적으로 E2E 테스트를 추가해 안정성을 확보한다.(Cypress 사용)
  • 사내에 공개한 프론트엔드 개발 전반에 대한 가이드를 외부 공개한다(몇가지 언어의 번역본 포함)

물론 위 계획은 축소되거나 확대될 수도 있다. 각 개발 담당자들이 회사 서비스를 개발하면서 동시에 TOAST UI 프로젝트를 하고 있어 서비스 상황에 따라 일정이 조율된다. 그렇다. 우리는 해야 할 일이 많은데 사람이 부족하다. 그렇기에 이 글의 숨겨둔 목적이 여기서 드러난다. FE개발랩에서는 언제나 훌륭한 인재를 모집하고 있다. 채용 사이트를 통해 지원할 수 있으며 문의는 언제든지 환영이다.(shiren@nhnent.com) FE 개발 랩은 프론트엔드 개발 전문 조직으로 프론트엔드 개발 외에 기술 공유, 사내 교육(연간 34회 이상), 컨설팅 등도 진행하고 있다. 기술의 습득과 도입이 빠르고 넓고 깊은 조직이다. 자신 있는 개발자만 지원하길 바란다.

FE개발랩은 2019년에도 자랑할만한 일들을 할 것이고 충분히 자랑할 것이다. 이런 자랑거리는 랩 원들의 자부심이 되고 이런 자부심은 또 다른 자랑거리의 원동력이 될 것임을 믿는다.