웹 챕터 리더의
제품 개발기
누적 유저 300만명의 3억건 이상의 학습 행동 데이터를 통해 학습한 AI 모델로 초개인화 서비스를 제공하고 있는 뤼이드 튜터는 올해 상반기 ‘산타토익' 이라는 이름에서 ‘ 뤼이드 튜터’ 로 리브랜딩과 동시에 고도화된 AI 기술력을 통해 더 효율적인 학습 효과로 국내 뿐 아니라 타 아시아 국가에서도 좋은 호응을 얻고 있습니다. 뤼이드 튜터 외에도 뤼이드가 제공하는 다양한 웹서비스를 통해 더나은 사용자 경험을 위해 노력하고 있는 웹챕터 리더 ‘최종찬'님을 만나봅니다.
본인 소개 부탁드립니다.
웹 프론트엔드 엔지니어 최종찬입니다. 프로그래밍 언어와 컴퓨터 그래픽스 분야에 관심이 많고, 웹 기술을 사용해서 개발을 하는 것을 좋아합니다. 사이냅소프트에서 네이버 오피스를 개발했었고, 스포카에서 도도포인트와 도도매니저 라는 CRM 서비스 개발, 데브시스터즈라는 게임회사에서 여러 웹서비스를 개발하고 작년 초부터 뤼이드에서 일하고 있습니다.
현재 뤼이드에서는 어떤 업무를 담당하고 계시나요?
속한 속한 웹 팀에 대해서도 소개 부탁드립니다.
웹 프론트엔드 엔지니어 직함을 달고있기는 하지만 저는 주로 웹 프론트엔드 개발보다는 웹 프론트엔드에서 주로 쓰이는 기술을 사용해서 여러 분야의 엔지니어들이 더 생산적으로 일할 수 있도록 도와주는 개발 도구를 만들고 있습니다. 요즈음에는 Deno라는 웹 기술이 있어서, 기존보다 손쉽게 CLI를 만들 수 있거든요. 제가 속한 웹팀에서는 뤼이드의 여러 제품에서 웹 프론트엔드 관련 기술이 사용되는 모든 컴포넌트를 개발합니다. 이 것들은 사용자에게 바로 드러나는 제품 웹페이지이기도 하고, 모바일 앱에서 학습 컨텐츠를 보여주는 화면들이기도 하며, 제품 운영을 위한 백오피스, 학습 컨텐츠 관리를 위한 CMS, 컨텐츠를 다루는 변환 기술들을 웹 기술을 사용해서 개발합니다.
뤼이드의 어떤 서비스들의 프론트엔드 개발을 담당하셨나요?
직접적으로 제품 개발에 참여한 것은 산타 공인중개사입니다. 산타 공인중개사는 웹서비스를 따로 하지 않고 모바일 앱만 제공했었는데요, 여기서 문제풀이 화면을 웹 기술을 사용해서 개발하였습니다. 여기서 저는 주로 웹뷰를 디버깅하기 위한 개발도구를 개발하고, 웹뷰와 모바일 앱이 통신하기 위한 프로토콜 설계를 하다보니, 점점 제품의 웹 프론트엔드 개발과는 멀어지게 되었습니다. 이 때 개발한 웹뷰 디버깅 도구와 웹과 모바일 사이의 통신 프로토콜은 지금도 Riiid TUTOR를 포함한 여러 문제풀이 서비스에 사용되고 있습니다.
문제풀이 화면을 웹 기술로 만들다보니 학습 컨텐츠 포맷 설계에도 많이 관여했는데요, 학습 컨텐츠의 리치 텍스트 스키마를 관리하는 기술을 만들었고, 공인중개사 컨텐츠 변환기 개발에 참여하였습니다.
그중에서 일하면서 가장 기억에 남는 프로젝트나 업무가 있을까요?
또는 뤼이드에서 가장 자신을 성장시킨 프로젝트나 업무가 있을까요?
공인중개사 컨텐츠 변환기를 개발했던 일입니다. 학습 컨텐츠 제공사 측에서 전달해준 컨텐츠를 보니 HWP(아래아 한글 문서)로 돼있었는데요, 이걸 우선 일괄적으로 DOCX(MS Word 문서)로 변환했습니다. 그리고 변환이 용이하도록 아르바이트 분들의 도움을 받아서 컨벤션에 맞게 문제 항목들을 재배치 했고요. DOCX는 document.xml 파일이 들어있는 ZIP 아카이브 형식입니다. 공인중개사 컨텐츠 변환기는 이 xml을 순회하면서 뤼이드에서 사용하는 컨텐츠 protobuf message 형식에 맞도록 컨텐츠를 변환합니다. 공인중개사 컨텐츠 중 세법을 다루는 부분에서 수식이 많이 등장했었는데요, DOCX에서는 내부적으로 수식 자료를 MathML이라는 형식으로 표현합니다. 공인중개사 컨텐츠 렌더러에서는 가볍고 빠른 수식 렌더링을 위해 KaTeX 엔진을 사용하고 있었고, DOCX에 들어있는 MathML을 KaTeX가 이해할 수 있도록 MathML → TeX 변환처리가 필요했습니다.
주어진 개발기간이 많지 않았어서 수식 변환기를 직접 개발하는 대신 최대한 외부에 공개된 자료를 이용해서 해당 컴포넌트를 개발하려고 했었고, XSLT라는 고대 마이너 언어(...)로 작성돼있던 MathML → TeX 변환기를 찾고, 출력되는 TeX 코드가 KaTeX 형식에 호환되도록 XSLT 코드를 고치고, 원본 코드는 XSLT3 기능을 활용하는데, 저희가 사용할 수 있었던 실행기는 XSLT2만 이해하는 실행기여서 XSLT3을 XSLT2에 맞게 고치는 등 여러 삽질을 했었습니다.
저는 ‘이런 이런 기술을 사용해서 이렇게 만들면 되지!’라고 다른사람이 들으면 ‘말이야 쉽지’ 싶어하는 입코딩을 즐겨 하는 편인데요, 이걸 개발할 때는 정말 매 순간을 ‘말이야 쉽지’ 같은 일을 실제로 해야 했었어서 지금도 기억에 남습니다.
교육 서비스가 가지는 프로트엔드만의 특징이 있을까요?
타 서비스(유통, 엔터테이먼트 등)와 다른 점은 무엇이라고 생각되시나요?
학습 컨텐츠를 화면에 보여줘야 하는데, 학습 컨텐츠에 들어오는 리치 텍스트 형식은 보통의 웹과 달리 미디어, 테이블, 차트, 도형, 수식 등 워드프로세서에나 사용되는 컴포넌트들이 섞여있을 가능성이 높다는 점을 들 수 있을 것 같습니다. 컨텐츠 생산자들이 주로 워드프로세서를 사용하는데다, 컨텐츠 특성상 워드프로세서의 기능을 다양하게 활용하게 되기 때문이죠. 컨텐츠 생산자들이 워드프로세서의 기능을 다양하게 활용할 수록, 컨텐츠 렌더러를 개발하는 엔지니어는 워드프로세서 개발에 준하는 노력을 들여야 합니다. 이 것들을 전부 래스터 이미지 등으로 뭉개서 보여주는 방식으로 해결할 수도 있지만, 다양한 화면 크기를 고려해야하는 모바일 앱에서 이러한 컨텐츠들을 래스터 이미지로 뭉개서 보여준다면 학습 앱 사용 경험이 크게 저하될 것입니다. 저희가 지금 이 부분을 잘 해결하고 있다고 보기는 어렵지만 앱 접근성을 챙기는 데도 어려움이 커질 것이구요. 이런 복잡한 리치텍스트 렌더링 기술을 매 모바일 플랫폼마다 재개발할 수는 없는 노릇입니다. 저희는 웹뷰를 사용해서 학습 컨텐츠를 제공하는 방식으로 이 문제를 해결하고 있습니다.
뤼이드에서 이루고 싶은 목표는?
컨텐츠 형식, 변환기, 렌더러 등 저희가 개발한 학습 앱을 개발하는데 필요한 기술들을 전부 공개해서, EdTech 생태계가 저희 기술을 중심으로 형성되기를 바랍니다. AI 회사가 돈을 버는데 필요한 정보 자산은 개발 기술이 아니고 인공지능 학습에 필요한 데이터이기 때문에, 저희가 이러한 데이터를 쉽게 수집하기 위해서는 AIEd 생태계가 우선 저희 기술에 친화적으로 갖춰질 필요가 있습니다. 뤼이드에서는 학습 앱을 개발하는데 있어 gRPC / protobuf 통신기술을 적극적으로 사용하고 있는데요, 이를 웹 플랫폼에서 쉽게 다룰 수 있도록 pbkit이라는 툴링을 개발하고 있습니다. 요즘은 pbkit을 개발하는데 제 역량을 많이 사용하고 있기 때문에, 우선은 이 프로젝트가 잘 알려지고 많이 사용되었으면 좋겠습니다.
뤼이드에서 함께 하게 될 예비 뤼이더에게 하고 싶은 말?
주어진 엔지니어링 문제를 쉽게 푸는 것보다, 올바르게 푸는 방법을 고민하고 선택하는 사람과 함께 하고 싶습니다. 쉬우면서 올바르게 푸는 방법을 찾는다면 더 좋지만요.