얼마전, 디자이너와 업무를 진행하던 중에 필수 슬롯 사이트과 선택 슬롯 사이트의 디자인에 대해 논의한 일이 있었다. 디자이너분이 선택 슬롯 사이트 레이블을 회색 텍스트로 처리했는데, 선택 슬롯 사이트보다는 비활성화 느낌이 강하게 들어 수정 요청을 드리게 되었다.
문득, 선택 슬롯 사이트 처리가 왜 어색하게 느껴졌을까 궁금하게 되었고, 어떤 형태가 사용자들에게 자연스럽게 인지하게 되어 입력을 유도할 수 있게 하는지 궁금해졌다.
우리가 수많은 서비스에서 회원가입을 할 때 자주 마주하는 UI임에도, 내가 참 고민없이 썼구나 라는 아쉬움도 들었다. 이러한 고민의 연속으로 주니어 시절에는 많은 스터디를 병행했었지만 어느순간 스터디를 그만하게 되었던 이유 중에 하나는 '사용성 개선'을 목놓아 외치지만 정작 '어떻게 디자인해야하는가'에 대한 노하우를 살피긴 어려워, 실무에서 막상 적용하려고 할 땐 잘 되지 않았기 때문이었다.
그래서 이에 대한 개선으로 올해부터 업무를 하면서 실질적으로 했던 고민들을 잊지 않기 위해 기록하고, 사례 수집을 위한 블로그 기록을 해보기로 했다. (부디 꾸준히 할 수 있기를) 그에 대한 첫번째 사례로, 얼마전 있었던 필수/선택 슬롯 사이트에 대한 고민을 기록해보았다.
Placeholder와 유사한 색상 또는 디자인은 되도록 피하자.
당연하다고 생각하는 부분이 오히려 간과하기 쉬운 법이다.
placeholder와 유사한 색상으로 레이블을 디자인하게 되면 혼란이 있다는 책을 UI 관련 책에서 읽은 적도 있다.
네이버 회원가입(좌) / 티몬 회원가입(우)
네이버와 티몬은 이에 대한 대안으로 placeholder와 색상은 유사하지만 텍스트 크기를 구분함으로써 선택 슬롯 사이트에 명확한 역할 구분을 해주었다. 그러나, 레이블과 선택 슬롯 사이트 레이블이 유사한 색상 또는 텍스트 굵기로 들어가게 되면 구분이 애매하다는 점은 다소 아쉽다. 티몬은 placeholder와 입력필드 하단의 안내문구를 병행해서 기재하여, 많은 요소를 한번에 보여주고 있고 그로 인한 복잡도가 높아보이고 있다.(슬롯 사이트 자체가 많지는 않아 복잡해보이지는 않지만) 또한, 성별 항목에 [남자]와 [여자]를 선택하는 박스가 placeholder와 유사한 색상으로 되어 있어, 구분들이 불분명하고 비활성화 느낌으로 느껴지고 있어 다소 아쉽게 느껴졌다.
Placeholder에 선택 슬롯 사이트을 기입하는 것은 위험할 수 있다.
여러 서비스를 확인해보니, 레이블 없이 입력필드 내에 placeholder에 (선택), (필수)를 함께 입력하여 구분한 서비스들이 몇 개 있었다. 레이블의 색상을 동일하게 갈지 여부를 고민하지 않아도 되어 한결 편리하기도 하지만, placeholder는 텍스트를 입력하는 순간 사라지기 때문에 해당 슬롯 사이트이 클릭한 후에는 선택인지 필수인지 구분이 명확하지 않기 때문에 불편함이 발생할 수 있다. 또한 placeholder가 많으면 텍스트가 많기 때문에, 오히려 레이블 제공보다 입력에 대한 부담감을 느낄 수 있다.
아이다스 회원가입(좌) / 하프클럽 회원가입(우)
물론 해당 슬롯 사이트이 필수입력인지 선택입력인지, 입력필드를 클릭하는 순간 까먹는 사용자들은 대부분 없을 것이다. 회원가입이나 주문 진행 등 입력필드가 많은 화면에서 레이블을 제거하고 입력필드 내 placeholder로 레이블의 기능을 대체하는 형태가 트렌드임을 여러 화면에서도 살펴볼 수 있었다. 입력필드가 한 화면에 많이 보이게 되면 사용자들이 입력에 대한 부담감을 느껴 이탈하는 상황이 발생하기 때문에, 레이블이라도 제거함으로써 심플함을 강조하고 싶을 수 있다. 그러나 회원가입에서 심플함을 강조할 수 있는 방법은 레이블 제거 외에도 소셜 로그인을 활용한 방법, 단계별로 화면을 나누는 방법 등으로 대체하거나, 하단 서비스처럼 클릭 시 placeholder가 레이블로 변경되는 인터랙션을 활용한 형태로 대체하는 것이 더 나아보인다.
엔씨소프트 채용 홈페이지
그렇다면, 아쉬운 사례에 비해, 잘 디자인된 사례는 어떤 경우일까.
필수슬롯 사이트에 별도 체크를 해주자.
좋은 방법 중 하나는 레이블에 아이콘 또는 (필수) 기재를 눈에 잘 띄는 다른 색으로 명확하게 표기해주는 방법이다.
이러한 표기는 사용자가 입력하기 전에 어떤 항목을 필수로 입력해야 하는지에 대해 명확하게 판단해서 진행할 수 있게 해준다. 이번 계기를 통해 선택/필수 슬롯 사이트에 대한 여러 아티클과 논문을 읽게 되었는데, 필수 슬롯 사이트보다는 선택 슬롯 사이트을 별도로 기재하는 것이 좋다고 한다. 그러나 위 예시들에서 보았다시피, 선택 슬롯 사이트에 회색 테스트로 표기함으로써 placeholder와 부딪히는 사례를 살펴볼 수 있었기 때문에 그보다는 명확하게 필수항목에 체크를 하는 방식이 더 명확한 방법이지 않을까 라는 개인적인 생각이 들었다.
네이버 카페 만들기(좌) / 네이버 입사지원서 (우)
필수 슬롯 사이트과 선택 슬롯 사이트의 영역을 구분해주자.
명확한 구분은 두 영역을 나누어주는 것이다. 필수 슬롯 사이트과 선택 슬롯 사이트 간 영역을 나누어 제공할 경우, 선택 슬롯 사이트은 필수 슬롯 사이트이 끝난 후 마지막에 제공함으로써 사용자에게 입력하고자 하는 선택권을 주고 있다. 이러한 방식은 나처럼 회원가입 등 입력필드가 많은 상황을 귀찮아하는 사용자에게는 베스트인 방법이다. 입력하지 않고 바로 회원가입 버튼을 클릭하면 되기 때문이다. 그러나, 서비스 제공자 입장에서는 나같은 사용자들로 인해 정보를 제공받지 못하는 사태를 더 많이 유발할 수 있기 때문에 지양하려고 할 것이다. 이에 대한 대안으로는 선택 슬롯 사이트을 입력하게 되면 받을 수 있는 혜택 등을 영역 상단에 명시해주는 방법이 효과적일 수 있다.
미미박스 회원가입(좌) / 텐바이텐 회원가입(우)
인터파크 회원가입
사례를 찾다가, 다소 아쉬운 화면을 마주하게 되었다. 인터파크 회원가입 화면이었는데, 선택 슬롯 사이트을 명확하게 나눈 점과 전체 동의할 경우 할인쿠폰을 주겠다는 혜택을 제시한 부분은 좋은 부분이었다. 그러나 선택 슬롯 사이트임에도 필수 슬롯 사이트과 동일한 붉은 볼릿이 들어가 있어 다소 헷갈리는 요소를 제공한다는 점, 혜택과 동일하게 생년월일에 대한 안내 사항을 붉은 텍스트로 제공하여 경고 문구로 보이게 하는 오해 또는 지나치게 강조했다는 점에 있어서는 다소 아쉬운 점이 있었다.
이 포스팅을 쓰게 된 계기는 어느 서비스가 잘 반영됐다, 반영되지 않았다를 언급하기 위함은 아니었다.
다만, 나처럼 서비스 기획을 계속 했음에도 불구하고 혹여나 나처럼 생각없이 사용하고 넘기던 서비스가 다른 분들도 있다면, 한번쯤 다시 돌아보면 좋을 것 같다는 생각이 들었다. 무엇보다 올해에는 나 스스로도 case study를 하고 싶다는 생각이 컸기 때문에 이러한 포스팅을 정리하게 되었다.
그리고 별개의 이야기로,
우리 서비스는 검은 텍스트와 회색 텍스트의 다소 안정적인 조합으로 디자인 정리되어 서비스 출시를 할 수 있게 되었다.
