AMP HTML Components에 LINE 공유 버튼 Component를 추가해보자

안녕하세요, 프론트엔드 개발자 Kyo입니다. Google의 오픈 소스 프로젝트인 AMP Project에 대해 여러분과 나눠볼까 합니다. AMP HTML을 이용해 마크업 작업을 할 때, ‘컴포넌트를 하나 내가 직접 만들어 보고 싶다!’ 라든가 ‘내가 만든 기능을 추가해보고 싶은데..’라는 생각을 많이들 해보셨을 것이라 짐작합니다. 그런 여러분께 도움이 되었으면 하는 바람으로 관련 내용을 준비해 보았습니다.

AMP에 LINE 공유 기능이!

2018년 5월에 AMP HTML의 SNS 공유 버튼 컴포넌트인 amp-social-share에 LINE이 추가되었습니다. 자세한 내용을 보려면 다음의 문서와 예제 링크를 통해 확인해 보세요.

당시의 경험을 떠올리며 직접 작업했던 AMP Project 코드를 커밋하여 PR을 생성하기까지의 과정을 여러분과 나누고자 합니다. 이 과정은 새롭게 컴포넌트를 만드는 것이 아닌, 기존의 컴포넌트에 기능을 추가하는 작업임을 고려해서 봐주시기 바랍니다.

계기

LINE 공유 기능이 AMP 프로젝트에 추가된 계기는 2018년 4월에 개최된 LINE의 Global Workshop인 Let’s Contribute OSS!로 거슬러 올라갑니다. 이미 관련 내용을 읽은 분들은 아시겠지만 워크샵을 통해서 총 53건의 풀리퀘스트와 33건의 이슈를 생성하고 16건의 문서를 번역하는 쾌거를 이루었습니다. 당시 제가 선택한 작업 대상이 바로 amp-social-share라는 컴포넌트인데요, 개인적으로 AMP Project에 대한 관심이 많았기에 이 컴포넌트를 선택하게 되었습니다. 저는 AMP가 일본에 릴리스되었을 당시부터 관심있게 지켜봤고 1년전 Google AMP No Standalone에 대응하기 전 알아야 할 점(CodeZine 2017년 5월호, 일본어)이라는 기사를 기고한 적도 있습니다. AMP HTML에 대해 상세히 알고 싶은 분은 한번 이 기사를 읽어보셔도 좋을 것 같습니다.

AMP 컴포넌트 추가하기

AMP 컴포넌트를 만들어 커밋하는 작업은 크게 다음의 단계로 나뉩니다.

  1. 준비 작업
  2. 폴더 구성 살펴보기
  3. 컴포넌트 개발하기
  4. PR 생성하기

준비 작업

컴포넌트를 개발하려면 알맞는 작업 환경이 우선 구축되어야 하겠죠? 다음의 안내를 따라 먼저 작업 환경을 구축하세요.

  1. AMP를 관리하고 있는 ampproject/amphtml 저장소를 포크하세요.
  2. getting-started-quick.md의 내용을 참고하여 작업 환경을 구축하세요.

    # node_modules install
    nvm install --lts
    yarn global add gulp-cli
    yarn install
    # local server 가동
    gulp
    
  3. 웹브라우저에서 http://localhost:8000/examples을 열어보세요. 다음의 화면이 나타나면 준비 작업이 완료된 것입니다.

폴더 구성 살펴보기

본격적인 작업에 앞서 먼저 포크한 소스의 폴더 구성을 살펴보겠습니다. 포크한 ampproject/amphtml 프로젝트는 component와 document, example 등 다양한 파일로 구성되어 있으며 파일의 양도 상당합니다. 기본적으로 알아 두면 좋은 폴더에 대해 미리 파악을 하고 있으면 여러분이 나중에 작업할 때 필히 도움이 될 것입니다. 다음의 표를 참고해 보세요.

폴더 내용물
/.github, /contributing 작업 시 필요한 문서
/examples 제대로 동작하는지 확인하고 싶을 때 이용할 수 있는 HTML 파일
/builtins 빌트인 컴포넌트
/extensions 익스텐션 컴포넌트
/ads amp-ads 서비스 설정 관련 처리 코드
/3p AMP에 포함시키는 서드파티 서비스, 서드파티 소프트웨어, 임베드(embed)를 처리하기 위한 모듈. 예를 들어 Facebook이나 Twitter SDK에 대한 처리는 담당함.
/third_party 서드파티 모듈. 아이콘을 추가할 때 optimized-svg-icons(https://github.com/ampproject/amphtml/tree/master/third_party/optimized-svg-icons)를 수정해야 함.
/css Component 이외의 부분에 사용되는 특수 목적을 가진 CSS

컴포넌트 개발하기

이 단계는 여러분이 직접 개발하는 단계로, 수정하거나 추가하고자 하는 컴포넌트를 개발하는 단계입니다. 이번에 저희가 작업한 amp-social-share 컴포넌트에 대해 간략히 소개드리자면, 다음의 두 개 폴더에 대한 작업으로 정리가 됩니다.

모든 개발 작업이 완료되면 getting-started-quick.md 파일의 안내에 따라 테스트를 수행하세요.

PR 생성하기

AMP 프로젝트에 PR을 생성하려면 이모티콘을 이용하여 PR 제목에 라벨을 붙여야합니다. 따라서 PR을 생성하기 전 반드시 Pull Request Template의 안내를 먼저 확인하시기 바랍니다.
amphtml에 PR을 생성하면 다음의 4개의 도구가 Continuous Integration을 위해 가동됩니다.

  • cla/google
  • lgtm analysis: JavaScript
  • percy/amphtml
  • continuous-integration/travis-ci/pr

최신 버전의 Master 브랜치에 머지한다면 기본적으로는 아무 문제가 없을 것입니다. 다만, 여러분이 Google의 오픈 소스 프로젝트에 처음으로 커밋하는 상황이라면 cla/google 단계에서 문제가 발생할 것입니다. cla/google은 여러분이 Google Individual Contributor License Agreement에 동의했는지를 확인하는 도구입니다. 동의를 하려면 우선 동의서 페이지를 열고 다음의 안내를 따라 동의 절차를 진행하세요.

  1. 페이지 하단의 Management your Agreements 버튼을 클릭하세요.
  2. Only Yourself 버튼을 클릭하세요.
  3. 이메일 주소나 GitHub 계정 등 필수 항목을 입력한 뒤 I Agree 버튼을 클릭하세요.
  4. GitHub의 Settings의 Emails에 등록된 이메일을 확인해 보세요. 커밋할 때 config user.email에 설정되어 있는 이메일 주소가 전부 등록되어 있는지 확인하세요. 여러 대의 PC에서 각각 다른 이메일 주소로 작업하지 않도록 주의하세요.
  5. PR에 대한 로그를 작성하면 다시 CI 도구들이 실행됩니다. CI 단계와 코드 리뷰 단계 후 여러분의 코드가 머지되면 모든 작업이 완료됩니다.

배포

커밋한 코드가 배포 버전에 반영되려면 최소 1~2주가 소요됩니다. 이는 배포 절차 때문인데요, AMP HTML 기반으로 구축된 페이지는 수십억 개라고 합니다. 배포할 때 주의를 기울이지 않고 아무렇게나 배포해 버리면 큰 장애로 이어질 수 있습니다. 따라서, 공식으로 변경된 버전을 배포하기 전에 먼저 AMP HTML 기반으로 작성된 페이지의 1% 정도를 대상으로 변경된 버전을 적용해서 테스트를 진행합니다. 이 테스트 결과를 토대로 배포 여부가 결정되기 때문에 마스터 브랜치에 머지한 후 실제로 배포되기까지는 몇 주가 소요됩니다.

배포 절차에 대한 자세한 정보를 보려면 Release Schedule에 제공된 안내를 확인해 보세요. 커밋한 건에 대한 배포 진행 상황을 확인하려면 amphtml/releases를 참고하세요.

글을 맺으며

이번 글을 통해 처음으로 AMP Project에 PR을 생성한 저의 경험을 여러분과 나누어 보았습니다. 이 분야에 관심이 있으신 분께 도움이 되는 내용이었기를 바랍니다. 참고로 LINE에서는 다양한 서비스 개발을 위한 프론트엔드 개발자를 모집하고 있습니다. 다음의 채용 공고를 확인해 보세요.