MDN 로그인할 수 있는 선택이 하나 더 생겼습니다!

이전에는 MDN에 로그인을 하기 위해서는 모질라 페르소나 계정이 필요했습니다. 페르소나 계정을 얻는 것은 자유롭고 쉽지만 MDN 분석 결과 “페르소나로 로그인” 인터페이스는 a steep drop-off 하다는 것이 밝혀졌습니다. 예를 들어, “편집”을 클릭했던 사용자가 로그아웃을 할 경우 90%가 다시 로그인하지 않았습니다. 한번도 편집을 하지 못했다는 것을 의미하죠. 사용자들이 기여할 좋은 기회를 너무나 많이 잃은 것입니다!

MDN에 들어와 수정하는 것은 쉬워야만 합니다. “편집”을 클릭했을 때, 모든 편집 과정이 쉽도록 만들어야만 하지요. 우리가 분석한 결과로는 대부분의 편집을 원하는 기여자들은 페르소나 로그인을 하는 과정이 매끄럽지 못했습니다. 그래서 잠재적인 기여자들을 위하여 로그인을 개선하기 위한 방법을 찾아보았죠.

일반적으로 대부분의 개발자는 깃헙 계정을 가지고 있고 분석 결과도 이를 뒷받침해주었습니다. 프로필에 외부 계정을 등록한 MDN 사용자 중에서 약 30%가 깃헙 계정을 가지고 있었습니다. 트위터 다음으로 많은 수치였죠.

그 결과 우리는 이런 결과를 도출하였습니다: 만약 깃헙 계정을 MDN 프로필에 통합시킨다면, 언젠가 MDN 내에서 개발자들끼리 흥미가 있을만한 깃헙 활동을 공유할 수 있을 것이다. 또 MDN 사용자들에게 가치있을만한 무언가를 깃헙 도구를 활용하여 만들어볼 수 있을 것이다. 곧바로, 현재 MDN 사용자들의 최소 30%(아마 그 이상 많은 수의)에게 “깃헙으로 로그인” 기능을 제공할 수 있을 것이다.

그리고 우리가 이를 제공하면, 약 3백만명의 깃헙 사용자들에게 “깃헙으로 로그인” 기능을 제공하는 것과 같을 것이다.

모든 엔지니어 팀과 MDN 커뮤니티가 마침내 이를 구현했습니다.

인증 라이브러리

깃헙 계정으로 인증하는 기능을 추가하기 위해서는 MDN 인증 방법을 확장하여 MDN 사용자들이 별다른 수고로움 없이도 깃헙 계정을 추가할 수 있도록 만들어 주어야 했습니다. 우리는 kuma(MDN을 작동하는 베이스 코드)를 다시 살펴보기 시작했습니다. 그 결과 기술적으로 페르소나가 동작하는 방식과 매우 밀접하게 통합되어있다는 것을 발견하였습니다.

인증을 위한 코드가 처음 작성됐던 수년 전, 우리의 몇가지 결정 중에서 사용자의 재방문을 가로막는 기술적인 장벽들을 지우기 시작했습니다.리뷰 과정을 거쳐서 결국 우리가 만들었던 django-browserid를 써드파티 라이브러리인 django-allauth로 대체하는 것을 결정하였습니다. 이 라이브러리는 Django 커뮤니티 사이에는 매우 잘 알려진 것으로 다중 인증 프로바이더를 사용할 수 있는 라이브러리입니다.

한 가지 어려웠던 점은 기존 사용자들의 데이터를 안전하게 새로운 시스템으로 이식해야 하는 점이었습니다. 놀랍게도 이 문제는 그렇게 어렵지 않았는데, 데이터를 새로운 포맷으로 바꿔주는 특별한 코드를 통해 쉽게 데이터를 이식할 수 있었습니다. 우리는 새로운 인증 라이브러리를 개발했으며 몇달 전, 사용자 계정 정보를 모두 옮겨놓았습니다. 그 후로 MDN은 모질라 페르소나에 django-allauth를 사용하고 있습니다.

UX 문제

우리는 사용자들이 MDN 문서를 편집하기까지 빠르고 쉽게 로그인을 할 수 있는 환경을 제공해주고 싶었습니다. 그러기 위해 우리가 인터페이스 내에 작업했던 것들은 다음과 같습니다:

• 사용자가 회원가입을 하고나서 로그인으로 돌아오는 이유를 기억하세요.
• 깃헙으로부터 가져온 데이터를 사용하여 사용자이름과 이메일 주소 필드를 자동으로 채워넣기(그 데이터가 이용가능한 것인지 사전에 확인하기).
• 깃헙에 등록된 이메일 주소가 신뢰할 수 있는 것이라 믿고 사용자가 별도로 이메일 확인할 할 필요가 없게 하기.
• 언어 표준화 하기 (생각보다 어려운 작업입니다.). MDN 사용자들은 다른 “서비스”를 이용하여 “계정”을 연동함으로써 “MDN 프로필”에 “로그인”합니다. 그간 오갔던 이야기들을 확인해보세요..

UX 측면에서 가장 힘들었던 것중 하나는 기존 MDN 사용자에게 새로운 인증 방법 제공자로 로그인할 수 있도록 만들어 주는 것이었습니다. 이 경우에, 사용자는 새로운 서비스로 로그인한 뒤 기존 MDN 프로필을 가져와야 합니다. 또는 기존 프로필에 새로 로그인한 서비스를 추가할 수 있어야 하죠. 페르소나로 먼저 로그인한 사용자와 깃헙으로 먼저 로그인한 사용자 모두에게 이 과정을 쉽게 만들기 위해 매우 많은 작업이 필요했습니다.

우리는 이 UX 작업을 위해 이상적인 계획을 가지고 시작했지만 모든 인증 과정과 깃헙의 API가 요하는 것들을 더 잘 이해하고 나서는 계획에 변화가 필요했습니다. 일단 클릭해보고 우리가 직접 사용해보니 UX를 더 부드럽게 만드는 것이 훨씬 더 쉬워졌습니다.

테스트 & 배포 단계

이번 프로젝트는 잘못하면 기존 프로필, 로그인 데이터에 오류를 일으킬 수도 있었으며 회원가입과 로그인이라는 가장 필수적인 인터페이스를 변화시키는 일이었습니다. 그래서 우리는 몇가지 기능 테스트를 거치고 나서 배포하기로 계획을 세웠습니다.

우리는 feature toggles을 사용한 MDN 내 알파- 베타-테스트 과정을 좋아합니다. 이를 위해 MDN 명예 관리자인 James Socol이 만든 django-waffle feature-flipper 를 사용했습니다.

우리는 매일 새로운 코드를 MDN 개발 환경에 추가하였습니다. 이 시기동안에 MDN 개발자들은 새로운 기능을 끊임없이 시도하였고 이 때 나온 버그들은 our master tracking bug에 기록하였습니다.

구현할 기능들이 어느정도 완성되었을 때, 더 많은 리뷰를 얻기 위해 베타 테스트 페이지를 만들었습니다. 이 페이지에서 베타 테스트를 돕기 위하여 내부 모질라 직원들을 초대, 앤드-투-앤드 UX 테스트를 진행했습니다. 이로써 많은 UX상의 버그들이 기록되었고, 버그를 분류하고 수정하는데 우선순위를 매기는 작업을 시작했습니다.

다음으로, 사이트 배너를 올려 오픈 베타 테스트를 시작하여 누구든지 테스트하고 버그를 찾아낼 수 있도록 하였습니다. 365명의 베타 테스터들이 이 시기동안의 QA에 참여하였습니다. 뿐만 아니라 모질라 WebQA에도 오픈 베타 테스트를 열었습니다. 이 떄 우리는 매우 사소한 버그들만 받을 수 있었고 이로 인해 최종 배포에 대한 자신감을 가질 수 있었습니다.

최종 배포

정말 많은 양의 작업이였지만 결국 모든 것을 끝내고 마침내 배포하게 되었습니다. 광범위한 테스트 & 배포 계획 덕분에 이후 단 한건의 사고 – 버그 리포트, 서비스 정지, 스택 트레이스 – 도 발생하지 않았습니다. 이 기능을 추가하게 되어 너무 기쁘게 생각합니다. 너무 대단한 MDN 사용자들과 기여자들에게 더 많은 선택 사항과 기능을 드리게 되어 즐겁습니다. 깃헙 사용자들을 모질라 개발자 네트워크에 초대할 수 있게된 것 또한 기쁩니다. 이제 우리가 함께 더 나은 웹을 만들어갈 수 있을 것입니다. 지금 바로 로그인하세요.

아웃룩

다중-계정 인증과 관련된 인프라와 UX 문제를 해결하면서 깃헙 뿐만 아니라 다른 통합 인증 서비스를 구축할 수 있는 환경이 되었습니다. 예를 들어, 파이어폭스 계정 (FxA)은 파이어폭스 싱크(Firefox Sync)를 더욱 강력하게 만들어 줄 인증 서비스가 될 수 있습니다. FxA은 파이어폭스와 통합되어 다른 모질라 서비스들과 곧 통합될 예정입니다. 뿐만 아니라, 더 많은 개발자들이 파이어폭스 계정으로 로그인할 수 있게 된다면 우리는 파이어폭스 계정 인증 옵션을 더 많이 추가할 수 있도록 노력할 것입니다.