–
- 사례 작성일 : 2020년 09월
- 사례에 포함된 서비스 : 채널톡
- OS 정보 : 웹
- 버전 정보 : –
- 카테고리 : 회원가입 및 로그인
- 내용 : 가입 화면을 스플릿 UI 구성, 적용 모습을 확인할 수 있는 사례
–
스플릿 UI는 우리가 거의 매일 접하는 구성 중 하나입니다. 슬랙에서는 좌측의 채널과 참여 중인 멤버 리스트를 보며 우측에서 바로 대화를 할 수 있고, 라인에서도 왼쪽 친구 리스트와 선택된 대화방을 인지한 상태에서 오른쪽으로 대화창이 펼쳐지기 때문입니다.
즉, 정보를 확인하거나 탐색할 수 있는 왼쪽의 프라이머리 패널과 실제 선택된 내용을 확인, 실제 다른 행동을 할 수 있는 오른쪽의 세컨더리 패널을 동시에 볼 수 있는 구성이라고 할 수 있습니다. 하나 더 예를 들어보면, 지메일이 있는데요. 왼쪽에는 사용자가 지정한 라벨이나 받은, 중요한 편지함 등의 구분이 있고 오른쪽으로는 구분에 따라 최신순으로 쭉 나열된 메일을 확인할 수 있습니다.
물론 스플릿 UI가 꼭 위와 같이 사용되는 것은 아닙니다. 얼마 전 가입하며 알게 된 채널톡의 사례도 마찬가지였습니다. 채널톡 관리자 계정을 가입하며 재미있는 점을 발견했는데요. 이메일을 입력하고 영어 이름을 입력하는 순간 오른쪽에 입력한 이름이 어떻게 보이는지 바로 반영해서 보여줬기 때문입니다.
오른쪽으로는 실제 사용자들이 우리 서비스로 진입했을 때 어떤 모습인지 보여주고 있었는데요. 비록 이름 하나만 적용해준 것이지만 담당자인 내 이름이 사용자들에게 어떻게 보이는지 미리 확인할 수 있는 것은 꽤 매력적인 경험이었습니다.
한쪽으로는 가입에 필요한 정보를 입력하게 하고, 또 한쪽으로는 입력한 정보가 어떻게 노출되는지를 명확하게 보여주는 방법인 것이죠. 뿐만 아니라 채널톡을 쓰면 무엇이 좋은지 핵심 내용을 함께 배치해두었네요. (개발자, 디자이너 없이도 빠른 적용. 효과 측정 및 테스트도 간편하게!)
–
