마플 영문 서비스 개발기
en.marpple.com 개발기와 기술 스택 소개
5 min readDec 30, 2018
마플 영문 서비스 https://www.marpple.com/en 개발기를 소개합니다.
마플 영문 서비스는 마플 개발팀에서 만든 다음의 라이브러리들을 사용하여 구현하였습니다.
- MQL.js: 함수형 데이터 베이스 쿼리 빌더
- FxJS: 함수형 ES6+ 라이브러리, 지연/동시/병렬 제어
- ttl-pug: Tagged Template Literals를 기반으로한 ttl-pug
- partial.js: 함수형 ES5 라이브러리, template, Promise polyfill
- don.js: ES5기반 DOM 조작 라이브러리
- don-frame.js: 페이지, 탭뷰 등의 네비게이션/뷰/브라우저 히스토리 컨트롤러
- don-infinity.js: 리스트 페이징, 무한 스크롤, 리스트 최적화 (like iOS TableView)
- 마플 Github 보러가기: https://github.com/marpple
구현된 부분들에 대해 정리해보면 다음과 같습니다.
- 영문 서비스의 상품 만들기 툴은 데스크탑 환경과 모바일 환경에서 각각 최적화된 사용자 경험을 제공합니다.
- 모바일 웹에서는 네이티브 앱에 준하는 사용감을 보여줍니다.
- 상품 만들기 툴은 텍스트, 이미지, 패턴, 정렬, 레이어, 히스토리, 그룹, 잠금, 핀치모드 등 다양한 기능을 제공합니다.
- 프론트엔드, 백엔드 모두 함수를 기반으로 추상화와 모듈화를 하고 json을 기반으로 데이터를 다룹니다.
- 백엔드에서는 MQL.js를 통해 PostgreSQL 데이터 베이스를 다룹니다.
- MQL.js는 클래스를 통한 Model 설계 없이 연결된 데이터를 쉽게 가져올 수 있고 쉽게 저장할 수 있게 합니다.
- MQL.js는 FxJS를 통해 사용하여 구현했습니다.
- MQL.js로 가져온 데이터는 json 으로만 구성되어있어 toJSON을 위한 비용이 없습니다.
- 가져온 데이터를 partial.js를 이용하여 재가공합니다.
- partial.js는 ES5기반이어서 같은 데이터 가공 코드를 브라우저에서도 사용합니다.
- 트랜스파일링 없이 모던 브라우저와 IE11을 지원합니다.
- 서버에서 View를 그릴 때에는 ttl-pug와 partial.js의 template 함수를 사용하고 프론트엔드에서 재활용합니다.
- 모든 페이지에서 서버 사이드 렌더링을 하고 고유 URL을 잘 지원합니다.
- 예를 들어 상품 목록 페이지에서 필터링을 한 후 URL을 전달하면 모바일에서도 데스크탑에서도 동일한 화면을 제공합니다.
- 서버 사이드 렌더링을 기반으로 브라우저의 히스토리 관리를 잘 해주어 ‘뒤로가기’를 잘 지원합니다.
- 아이폰 사파리에서 스와이프를 했을 때 잔상을 잘 보여줍니다.
- don-frame.js를 통해 View의 라이프 사이클을 제어하여 동적인 페이지들에서도 브라우저의 백 버튼이나 스와이프, 안드로이드 백 버튼이 잘 동작하도록 구현했습니다.
- don-frame.js와 함께 동작하는 don-infinity.js를 통해 무한 스크롤을 적용하여 리스트의 성능을 최적화했습니다.
- 동적으로 생성되는 페이지에서도 don-frame.js를 통해 브라우저의 스크롤만 사용되도록 하여 ‘상단 탭을 통해 스크롤 올라가기’와 같은 OS의 기본 동작들을 모두 지원하고 스크롤에 의해 삐걱거리는 경험이 없습니다.
- Promise와 Promise를 다루는 함수들을 통해 백엔드에서는 최적화 및 효율성을, 프론트엔드에서는 자연스러운 UI를 구현했습니다.
- don.js를 통해 DOM을 조작하고, 이벤트를 다룹니다.
- CSS transition과 anime.js를 이용해 애니메이션을 적절히 배치했습니다.
성능적으로는 다음과 같습니다.
- 페이지를 데이터베이스 조회와 서버사이드 렌더링 후 응답하는 시간은 대부분 100ms 내외입니다.
- 상품 목록은 100ms ~ 200ms 내에 응답하고, 필터를 통한 API는 30~80ms 로 응답합니다.
- 상품 목록, 메인 페이지 등에서 이미지를 적절하게 Lazy Load를 합니다.
- 상품 목록 URL — https://www.marpple.com/en/product/list/9
- 리뷰 페이지는 50ms ~ 70ms 정도로 응답하고, 무한스크롤에 사용되는 API는 20ms ~ 50ms 로 응답합니다.
- 리뷰에서 무한스크롤을 해보면 빠르고 자연스럽게 잘 동작합니다.
- 리뷰 URL — https://www.marpple.com/en/review/list
- 정적 파일은 AWS S3와 클라우드 프론트를 적용했습니다.
아래 시연 영상은 모두 모바일 웹 브라우저에서 동작하는 영상입니다.
아이폰 사파리 전체적인 사용
아이폰 사파리 리뷰
안드로이드 크롬 만들기 툴
얼마전 열린 네이버 FEDevTalk 13회에서 ‘마플 영문 서비스 개발기’를 발표했습니다. 마플의 코딩 스타일을 라이브 코딩으로 시연하기도 했습니다.
직접 사용해보세요! 사용자에게 좋은 성능과 좋은 UI/UX를 제공하기위해 많은 노력을 담았습니다. 아래 링크를 통해 데스크탑이나 모바일에서 사용해보실 수 있습니다.
혹시 마플을 만드는 개발팀 멤버들에 대해 궁금하신가요? 마플 개발팀 소개글
