통합계정

프로젝트 동기

자사에는 엠넷플러스 어카운트가 존재했지만 새롭게 개발되는 프로덕트를 사용하기 위한 별도의 체계를 갖는 사용자 계정이 필요했고 엠넷플러스 어카운트의 기술 노하우를 활용하여 자사의 여러 프로덕트를 하나의 계정으로 사용할 수 있는 신규 통합 계정을 세팅하게 되었습니다.

엠넷플러스 어카운트

스테이지랩스 통합계정은 엠넷플러스 어카운트 UI 및 UX 개선을 위해 제안했던 디자인을 토대로 자사의 신규 프로덕트에 어울리는 디자인으로 수정된 디자인이기 때문에 통합계정의 디자인 프로세스를 설명하기 이전에 엠넷플러스 어카운트의 배경을 빼놓을 수 없습니다. 기존 엠넷플러스 어카운트의 회원가입 디자인에서는 여러가지 문제점이 있었습니다.

1. 모바일 환경에서 키보드가 UI를 가림

하이브리드 앱이였던 엠넷플러스는 데스크탑 환경에서는 문제가 없었지만 모바일 환경에서는 이메일, 비밀번호, 비밀번호 재확인, 인증코드 Input과 회원가입 및 로그인 버튼이 한 화면에 모여있어 모바일 키보드를 활성화했을때 회원가입 및 로그인 버튼이 가려지는 문제가 있었습니다.

2. 이해하기 힘든 비밀번호 조건

사용자가 비밀번호 입력을 했을때 피드백으로 비밀번호 조건을 노출하여도 명확하지 않은 문장으로 사용자가 비밀번호를 생성할때 어려움이 있었습니다.

3. 직관성이 떨어지는 UI 디자인

Input의 색상을 붉은색으로 표시하여도 해당 붉은색이 오류라는 점을 인지하지 못하는 사용자가 많아 회원가입의 시간이 길어지는 현상이 있었습니다. 또한 인증코드의 경우 버튼에 사용된 문구인 ‘Retry ${timeCountDown}sec’를 의도했던 ‘카운트 다운이 끝나면 인증코드를 재전송할 수 있음’이 아닌 ‘카운트 다운 시간 내에 인증코드를 입력해야함’의 의미로 오해하는 사용자도 많았으며 버튼의 디자인 또한 비활성화된 버튼이라고 바로 인지하기 힘든 문제가 있었습니다.

이러한 문제점들을 해결하기 위해 개선안에서는 세 가지의 목표를 갖고 디자인을 했었습니다.

“사용하기 쉬운 디자인을 하여 사용자의 이탈을 최소화한다.”

“사용자가 현재 집중해야하는 정보를 화면에 최소한으로 노출하여 입력하고 있는 정보에 대한 집중도를 높인다.”

“직관적인 User Wirting 및 인터페이스 디자인으로 사용성을 높인다.”

Label 표시

기존에는 Input의 Label이 표시되어있지 않아 정보를 입력할때 현재 무엇을 입력하고 있었는지 잊어버렸을 경우 해당 텍스트를 모두 지워야만 입력해야하는 정보를 알 수 있는 불편함이 있었지만 Label을 상시 노출하여 해당 불편사항을 해소하였습니다.

로그인 유도

사용자가 이메일을 입력하여 ‘확인’ 버튼을 터치하면 서버에서 해당 이메일이 가입되어있는지 체크하여 이미 존재하는 계정일 경우에는 ‘로그인’ 및 ‘비밀번호 재설정' 버튼을 노출하여 사용자가 화면을 나가지 않고 자연스럽게 앱 내에서 행동을 이어나갈 수 있도록 디자인하였습니다.

이메일 인증코드

코드 6자리 숫자가 입력되면 자동으로 인증하여 빠르게 가입을 진행할 수 있도록 개선하였습니다. 또한 인증코드 재전송 버튼에 사용된 문구를 사용자가 헷갈리지 않도록 보다 직관적인 문장으로 변경하였으며 활성화된 버튼과 비활성화된 버튼의 비주얼적 차이도 대중적으로 좀더 익숙한 형태로 디자인하여 사용자가 더욱 잘 인지하도록 수정하였습니다.

비밀번호 입력

비밀번호 설정 조건에 충족된 경우와 충족되지 못한 경우 색상의 차이 뿐만 아닌 아이콘에도 변화를 주어 시각적 직관성을 높였으며 비밀번호 8자리가 입력된 시점부터 부족한 정보를 사용자에게 실시간으로 피드백하여 사용 편의성을 높였습니다.

특수문자의 경우 개인마다 다른 문자를 떠올리는 경우가 많았으며 엠넷플러스 어카운트 비밀번호에서 사용하고있는 문자에 포함되지 않는 특수문자를 입력하는 경우도 종종있었습니다. 이 경우 사용자는 가입의 불편함과 피로함을 경험하게됩니다. 이 문제를 해결하기 위해 오류 피드백을 단순히 ‘특수문자를 입력하세요.’, ‘문자를 입력하세요.’만 표시 하는것이 아닌 좀더 친절하게 문자의 정보를 표시하여 사용자가 더욱 잘 인지할 수 있도록 수정하였습니다. 또한 비밀번호 마스킹 토글 버튼을 추가하여 사용자가 입력한 비밀번호를 확인할 수 있도록하여 비밀번호 재입력시 오류로 인한 불편함을 줄였습니다.

스테이지랩스 통합계정

스테이지랩스 통합계정의 목적은 사용자가 자사의 여러 서비스를 하나의 계정으로 사용하게 하는 것입니다. 이때 저의 미션은 각 서비스마다 다른 아이덴티티와 브랜딩 스타일을 갖고있는데 로그인 및 회원가입을 진행할 때 너무 튀는 스타일로 사용자에게 비주얼적 혼란을 주지 않도록 최대한 무채색에 가까운 디자인을 진행해야하는 것이었습니다.

당시 자사에서는 두 TF가 바쁘게 신규 프로덕트를 개발중이었으며 회사에서는 빠르게 통합계정 개발을 진행해야만하는 상황이었습니다. 다행히도 이전에 엠넷플러스 개선안을 제시했던 디자인을 사용하면 빠르게 개발을 시작할 수 있었기에 당시 개선안을 제시했던 제가 스테이지랩스 통합계정의 디자인을 맡게되었습니다. 이때 엠넷플러스 어카운트에서는 할 수 없었던 ‘매직링크’ 기능을 추진하게되었습니다.

매직링크는 이전 KCON 현장에서 발생한 문제를 해결하기 위해 개선안을 고민하던중 나왔던 아이디어였으며 글로벌 서비스를 만들고 있었던 저희에게도 동일한 문제가 발생할 수 있음을 인지하고있었습니다. 따라서 매직링크를 통해 계정 정보를 기억하지 못하는 사용자에게 편리한 옵션을 제공하여 가입 및 로그인의 허들을 낮추고자했습니다. 하지만 아쉽게도 빠르게 개발해야하는 상황에서 제가 기획하고자 했었던 매직링크는 오히려 개발 난이도를 높였기에 기획을 간소화하여 회원가입시의 매직링크를 제외한 사용자가 비밀번호를 잊어버렸거나 비밀번호를 입력하지 않고 로그인을 원할 경우에만 적용하게 되었습니다. 매직링크를 사용하여 로그인을 한다면 비밀번호를 잊어도 번거롭게 비밀번호를 재설정하는 과정이 없어도 이메일로 간편히 로그인하여 서비스를 이용할 수 있습니다.

스테이지랩스 통합계정에서 현재 보여지고있는 문제의 정확한 원인을 아직은 알 수 없지만 지속적인 모니터링과 퍼널 및 데이터 분석을 통해 가설을 세워 여러가지 시도를 해가며 문제를 해결해 나아가고있습니다.