요약
Google Polymer 라이브러리로 개발 시간을 절약한 Net-A-Porter
NET-A-PORTER는 Google의 Polymer 라이브러리를 사용하여 온라인 속성에 구성요소 기반 디자인을 구현했습니다. 그 결과 개발 시간을 크게 절약하고 사이트 전반에서 코드를 표준화했으며 구조화된 데이터를 사용하여 검색엔진 최적화 실적을 개선할 수 있었습니다.
결과
- 개발 시간이 절약되었습니다.
- NET-A-PORTER의 온라인 속성에 대한 표준화된 코드
- 구조화된 데이터를 사용하여 검색엔진 최적화 실적을 개선했습니다.
NET-A-PORTER 정보
2000년 6월에 설립된 NET-A-PORTER는 온라인 럭셔리 패션의 세계적인 선두업체로서, 세계에서 가장 인기 있는 디자이너 350여 명의 컬렉션을 선보입니다.
회사의 온라인 매장 뒤편에 있는 회사의 엔지니어링팀은 net-a-porter.com과 패션 잡지 두 개와 소셜 네트워크를 포함하는 웹사이트 및 앱 네트워크를 제공하고 유지관리하기 위해 최선을 다하고 있습니다.
자신의 웹 속성을 생각할 때 NET-A-PORTER 엔지니어는 사이트의 각 페이지를 페이지가 아닌 구성요소의 모음으로 봅니다.
예를 들어 제품 페이지에는 세일 중 절감액을 나타내는 가격 구성요소, 관련 제품 링크가 있는 캐러셀 구성요소, 제품이 등장하는 완전한 의상을 보여주는 대화형 구성요소, 위시리스트에 제품을 추가하기 위한 드롭다운 구성요소 등이 포함될 수 있습니다.
구성요소 기반 접근 방식
2016년 초, NET-A-PORTER 엔지니어링팀은 회사에서 구성요소를 가져와 웹 속성용 코드를 작성하는 방식에 이를 적용할 수 있는 방법을 평가하기로 결정했습니다. NET-A-PORTER에 속하는 많은 페이지와 하위 속성과 해당 페이지를 관리하는 여러 팀이 있기 때문에 엔지니어들은 기존 스택을 제거해야 하는 새로운 기술을 사용하여 처음부터 시작하는 것은 적절하지 않다는 것을 알았습니다. 이상적인 솔루션은 새 구성요소를 계층화하고 추가 구성요소가 생성될 때 페이지에 추가할 수 있게 해 줍니다. 구성요소는 다양한 백엔드 서비스와 독립적으로 통신할 수 있어야 하며 제품에 대한 구조화된 데이터를 웹 크롤러에 표시해야 합니다.
Polymer를 사용한 테스트 및 성공
여러 솔루션을 평가한 후 NET-A-PORTER는 Google의 Polymer 라이브러리를 테스트하기로 했습니다. Polymer를 사용한 초기 실험이 매우 빠르고 성공적이었기 때문에 NET-A-PORTER 엔지니어들은 바로 조직의 전체 웹사이트 개발 계획에 Polymer를 도입하기로 결정했습니다.
이 팀의 엔지니어인 로빈 글렌과 매튜 그린은
Polymer는 Google 시스템에 통합하기 쉬웠으며 순식간에 준비하고 실행했습니다. 이처럼 규모가 큰 웹사이트를 운영하면서 다양한 측면을 갖고 있다는 사실은 일관성이 결여되기 쉽습니다. Polymer를 사용하면 확장 가능하고 유지관리가 쉬운 완전하고 복잡한 웹 애플리케이션을 만들 수 있습니다.
Polymer는 웹 구성요소 브라우저 표준을 기반으로 하기 때문에 코드 표준화도 쉽게 할 수 있었습니다. 글렌은 다음과 같이 덧붙입니다.
웹 표준을 사용하여 빌드하면 코드가 플랫폼에 가깝게 유지됩니다. 이렇게 하면 새로운 구성요소를 사용하고 빌드하는 방법을 더 쉽게 배울 수 있으므로 브라우저가 개선됨에 따라 성능이 지속적으로 개선되고 장기적으로는 계획을 세울 수 있습니다. W3C 표준을 기반으로 하므로 이 플랫폼에서 확실하게 빌드할 수 있습니다. 폴리필의 필요성조차 곧 사라집니다.
검색엔진 최적화의 이점도 있었습니다. 글렌은 다음과 같이 말합니다.
구성요소는 제품에 관한 자세한 구조화된 데이터를 검색엔진에 효과적으로 표시합니다. 이제 이 구조화된 데이터의 테스트가 Google팀의 지속적 통합 계획의 직접적인 일부가 되었습니다.
NET-A-PORTER팀은 구성요소를 설계하고 빌드하는 데 선불로 투자함으로써 장기적으로 효율성이 크게 향상되는 효과를 보고 있습니다. 새로운 페이지와 기능을 더 빠르고 간편하게 만들고 출시하며 이해관계자의 의견과 설계 조정을 엔지니어링 프로세스에 더 쉽게 통합할 수 있습니다.
Polymer의 미래
팀은 Polymer가 웹 개발을 실현한 방법에 매우 만족하고 있습니다. 글렌은
구성요소를 다양한 방식으로 결합하여 재사용할 수 있는 방법을 확인하자마자 흥분을 감추지 못했습니다. 비즈니스 내부에서 구성요소를 활용할 수 있는 다른 방법이 있는지 고민하기 시작했습니다.
글렌은 Polymer를 사용해 탐구할 것이 훨씬 더 많다는 것을 느낍니다. 그는
이는 Polymer 여정의 시작에 불과합니다. Google은 현재 기존 구성요소의 전송 및 유지관리 가능성을 개선하고 Polymer 사용을 더 많은 NET-A-PORTER 페이지로 확장하기 위해 노력하고 있습니다. 공개적으로 제공되는 NET-A-PORTER 구성요소 스타일 가이드로 Google의 접근 방식을 문서화하기 위해 노력하고 있습니다. Polymer는 내부 도구에도 매우 유용합니다. Google은 최근 그래프 구성요소 집합을 빌드했으며 Polymer를 사용하도록 전체 모니터링 서비스의 플랫폼을 변경했습니다.