sunderls

sunderls is a front-end engineer

개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기

안녕하세요! sunderls입니다. 저는 2년 전에 페이지 스택을 주제로 ‘LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기’라는 글을 썼고, 현재 LINE 증권에서도 같은 방식으로 프로젝트를 진행하고 있습니다. 그래서 이번 글에서는 페이지 스택이 어떻게 진화했는지, 어떤 과제를 안고 있는지 함께 알아보겠습니다.

LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기

안녕하세요, 저는 LINE MANGA 개발을 담당하고 있는 자바 스크립트 개발자, @sunderls입니다.

여러분, 혹시 LINE 앱에서 만화를 보실 수 있는 것*, 알고 계셨나요? 금시초문이라면, ‘더 보기’ 버튼을 눌러 LINE MANGA 메뉴를 통해 멋진 만화들을 만끽해 보세요.

아래의 그림은 LINE MANGA 서비스의 화면 중 일부입니다. 페이지 전환이 참 매끄럽지 않나요? 여러분께 살짝 귀띔을 해드리자면, LINE MANGA 서비스는 웹 기반으로 개발했습니다. 저희가 보기에는 페이지 전환이 네이티브 앱 못지 않다고 생각하는데, 여러분은 어떻게 생각하세요? 이번 글을 통해서 우리가 이런 결과물을 얻기 위해 어떤 노력을 했는지 여러분께 간단히 소개해 드리고자 합니다.

Code splitting을 쉽게 하기 위해 만든 grow-loader

안녕하세요, 저는 LINE MANGA팀의 자바 스크립트 개발자, @sunderls입니다. 일본에서는 LINE으로 만화를 볼 수 있다는 것, 알고 계셨나요? 혹시 여러분은 LINE MANGA1) 서비스를 이용해 보셨나요? 예전에 블로그를 통해서도 나누었듯이(LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기), LINE MANGA는 웹 기반으로 구현되어 있습니다. 이 서비스는 LINE 앱 안에서 구동되는 서비스이기 때문에, LINE 앱을 이용할 때와 마찬가지로 편안하고 매끄러운 UX를 제공하고자 저희는 많은 노력을 쏟았습니다. 우리는 우리의 목표를 달성하고자 code-splitting을 도입하였는데, 이 글을 통해 code-splitting을 손쉽게 적용할 수 있도록 개발한, LINE의 오픈 소스 프로젝트인 grow-loader를 여러분께 소개하고자 합니다.