클럽하우스 따라 해 보기
왜 이렇게 만들어졌을까?
클럽하우스는
왜 이렇게 디자인했을까?
사람들은 굉장히 인기가 좋은 서비스나 앱을 보면, 디자인이 잘 되어 있다고 생각한다. 디자인은 미묘한 구석이 있고, 평가가 쉽지 않다. 그래서 잘 되는 서비스는 언제나 빛난다.
클럽하우스는 익숙하면서 낯선 느낌이 들었다. 그래서 좋아 보이는 부분들을 찾기 위해 앱의 주요 화면을 다시 따라서 만들어보기로 했다.
클럽하우스의 앱의 디자인은 사용자에게 불필요한 행동을 요구하지 않는다. 대화에 빠르게 참여하고, 대화를 하고, 떠날 수 있다는 점에서 목적 지향적이다. 디자이너들이 항상 이야기하는 것처럼, 심플하다. 사용자의 흐름이 단순하고, 명쾌한 구조다.
세 부분으로
나눠봤다.
머리, 가슴, 배첫인상이 굉장히 독특하다. iOS만 있는 앱인데, 탭 바가 없고, 상단 바에 아이콘이 있다. 그래서 이 앱이 원래는 CTA 버튼 하나로 만들어졌는데, 기능을 확장하다가 보니까 상단에 아이콘이 추가된 건 아닐까 하는 생각이 들었다.
특이한 크기와
색을 가진 아이콘
클럽하우스의 아이콘은 좀 다르다.클럽하우스의 검색, 초대하기, 일정, 알림, 프로필의 아이콘은 큼직하고 눈에 잘 들어온다. 인스타그램, 유튜브, 카카오톡의 상단바를 보면, 아이콘도 작고, 클럽하우스에 비해 간격도 좁았다. 왼쪽에 로고나 타이틀이 있는 경우도 많은데, 클럽하우스는 로고나 타이틀이 눈에 크게 띄지 않는다.
앱 아이콘에 로고가 아닌, 사용자의 사진을 넣는 서비스이니 당연하다는 생각도 든다.
계속 눈에 남아 있는 '초대하기' 아이콘을 보면, 곡선이 많이 사용되었다. 배지는 굉장히 크고, 두께가 다른 2개의 라인을 사용했고, 하나의 아이콘에 색이 많이 사용되었다.
색이 좀 의아한 게, 가입과 로그인 부분에서는 채도가 낮은 파란색이 사용되고, 앱의 주요 활동에서는 채도가 낮은 녹색, 부분적으로 노란색이나 붉은색이 쓰이고 있다. 전반적인 앱의 구성을 확인하게 위해 녹색, 흰색, 검은색만 사용해봤다.
굵기는 많이 쓰는 굵기인데, 크기가 크고 세밀하다. 이 아이콘이 아이콘 세트를 구매한 건지, 직접 그린 건지 알 수는 없지만, 클럽하우스의 아이콘 세트는 요즘 쓰는 단색, 하나의 굵기, 간단한 아이콘의 트렌드에선 벗어나 있다. 이 작업을 조금 더 진행해 보면서 이 아이콘의 형태가 적절하다는 생각이 들었다.
3차 시도로 아이콘 크기를 매우 키웠다...클럽하우스의 아이콘과 비교하기 위해서 비교적 단순한 형태의 아이콘을 비슷하게 만들어보았다. 그런데 배치를 하다가 보니까 아이콘 간의 간격이 조금 달랐다. 비슷해 보이지만, 아마도... 기능의 그룹핑을 하려고 했었나? 하는 생각이 들었다.
1차 시도에서 인스타그램 정도의 크기와 배지 크기를 생각했다가 큰 차이가 나서 좀 놀랐다. 그래서 조금씩 수정을 해가면서 2차 시도를 했다. 아이콘은 계속 변경을 하면서 일단, 아이콘 간격을 조금씩 조절했다.
카드 형식의
본문
더 많은 사람의 정보를 보여주는 것이 좋을까? 하나의 방을 잘 보여주는 것이 좋을까?카드 형식으로 되어 있어서 리스트라고 생각한... 카카오톡과 비교하였다. 프로필의 프레임도 비슷해서 적당한 듯했다. 카카오톡의 경우는 채팅이라 날짜가 분리되어 있고, 글자색도 두 개다.
특이한 점은 구성 요소 간의 수직 정렬 부분에서 보였다. 카카오톡의 경우는 대부분의 오브젝트가 중간으로 정렬되어 있는데, 클럽하우스의 경우, 이모지와 함께 쓰일 때는 글자 크기와 이모지가 적절한 구성으로 맞춰져 있고, 상태를 표시하는 아이콘은 폰트의 베이스라인에 맞춰져 있었다.
글자 크기가 상대적으로 크게 되어 있고, 카드를 사용해서 공간의 여유가 많았다.
그런데 프로필 사진은 2개만 나오고, 이름이 차례로 정렬되는 방식은 괜찮아 보였다.
카드가 세밀하게 설계되어 있다.하나의 카드를 좀 더 크게 보았다. 말풍선의 경우 같은 모양으로 그려서 회색 부분에 적용해 본 후에, 색을 추가해서 이름 글자 크기와 맞춰보니까 역시 베이스라인에 딱 맞는다. 의도적으로 맞춘 듯하다.
카드 디자인에 대해서는 충분히 납득했는데, 내 생각에는 좀 더 다른 형태와 맞아야 된다고 해서 여러 시도를 거쳐서 좀 수정을 해보았다.
프로필 사진의 경우, 경계선에 살짝 투명도가 적용되어 있어서, 사용자 프로필 배경이 지나치게 밝을 경우 배경과 섞이지 않는다.
참 독특한
하단 부분...
두 가지 굵기의 선을 쓰니까 손 아이콘의 디테일이 잘 살아난다.UI 디자인을 하면서 가장 특이하다고 고민이 많이 되는 부분이다. 계속 보고 있으면, 이상하다. 아이콘이 3가지가 있는데... 3개의 스타일이 다 다르다. 저 '브이' 모양 손 아이콘이 좀 당황스럽긴 하지만 사용이 불편한 건 아니다. Start a room의 오른쪽 버튼인 경우, 프로필 배치하고 뭔가 변경이 있는 건 아닐까 추측해 본다.
하단탭바가 없는 게 좋은 선택이라고 생각된다. 탭바를 만들어볼까 했는데, 별로 배울 것이 없을 듯해서 따로 만들어보지는 않았다.
이 UI를 다시 생각하게 되었다.Room에 들어가면, 유튜브, 스포티파이, 애플 뮤직처럼 대화를 들으면서 다른 Room을 탐색할 수 있다. 모양은 좀 다르지만, 기능은 비슷해 보인다.
내가 보는 Room 혹은 영상 혹은 이미지에 대한 미리보기가 왼쪽에 보이고, 듣기나 보기를 멈출 수 있는 버튼이 있다. 그리고 친구와 참여할 수 있는 버튼이 있다. '떠난다', '부른다', '참여한다'가 순서로 되어 있는 부분은 탁월하는 생각이 들었다.
여기까지 해서 잠깐 정리를 하면, 가이드라인이나 트렌드에 맞춰서 하다 보기는 기능 위주의 스프린트를 통해서 과감한 개선을 했다는 생각이 든다.
비슷한걸 다르게 만들면, 재밌다.하단 탭바를 만들지 않고, 내 취향으로 하단 부분의 디자인을 바꿔봤다. 여기까지 해서 전체적인 모양새를 비교해보았다.
멀리서 보기
대강의 구성요소를 제작해서, 한 번 합쳐 보았다.
요즘 만드는 시안은 그냥 녹색을 쓰고 있다.먼저 각각의 디자인을 최소화된 색으로 조합해 보았다. 배경은 흰색을 그냥 써 보았고, 구성요소의 일부는 그대로 만들어 본 후 취향에 맞게 조금씩 변경했다. 흰색 배경을 사용해서 녹색의 채도를 높였다.
본문이 카드 형태인데, 배경이 흰색이니까 그냥 리스트처럼 보여서, 회색을 추가했다. 그러나 회색을 추가해도, 카드가 효과적으로 보이지 않았다. 그래서 원본대로 베이지색을 써보았다. 회색을 비슷한 정도로 쓰면서 여러 가지로 조정해보았다.
개인적으로 배경에 관계없이 일관되게 보이는걸 좋아한다.아이콘을 비교해보았다. 왼쪽 2개는 라인만 있는 경우, 배경색이 있는 경우이고, 오른쪽 첫 번째 아이콘은 클럽하우스에 적용되어 있는 아이콘을 비슷하게 만들어봤다.
배경색을 좀 더 진하게 해서 카드와 배경의 대비를 강하게 해 보았다.이게 내가 얻은 최종 결론이다. 회색보다 약간의 색상이 추가되었을 때, 화면이 깊이가 조금 더 생긴다. 뉴모피즘 디자인을 해볼 때도 회색보다는 색을 사용하면, 더 입체적으로 보였다. 그래서 색을 좀 더 써보았다.
베이지 색을 쓰면서 배경색은 없고 라인만 있는 아이콘은 배경에 묻혀 버렸다. 그래서 아이콘에 흰색 배경을 넣어 보았고, 배경색의 채도에 맞춰서 녹색의 채도와 명도도 낮게 했다. 글자의 경우도 회색보다는 명도 기반의 색을 넣고, 카드의 테두리와 그림자도 배경에 녹아들 수 있도록 배색했다.
그리고 처음으로 다시 돌아갔다.
아이콘 크기와 간격, 글자 크기를 조금 더 수정해봤다.느낀 점
클럽하우스에서 느낀 점을 재현해보려고 노력하면서, 기존의 구성요소를 로우파이로 옮겨서 작업해 보니까 현재의 클럽하우스 UI를 이해하는데 도움이 되었다. 클럽하우스는 페이스북, 트위터처럼 하나의 포스팅이 카드 혹은 여러 정보가 담긴 하나의 목록이 되어 있는 UI와 영상, 음악을 듣는 앱의 이미 듣고 있는 소리를 최소화시키는 UI를 가지고 있었다. 그래서 두 가지 앱의 UX 사이에서 지금의 UI가 만들어졌다는 생각이 든다.
또 콘텐츠를 다루는 앱에서 흰색과 검은색만으로 화면을 구성하는 것에 한계를 경험했다. 클럽하우스에 무채색에 가까운 저채도 컬러가 쓰인 것처럼 새로 업데이트되는 안드로이드 12의 UI에도 저채도 배색이 쓰이고 있는 걸 보면, 흰색 혹은 검은색의 트렌드에서 차별성을 만들려는 건지, 아니면 뭔가 다른 유행이 시작되는 건지는 좀 더 지켜봐야겠다.
노션처럼 이모지를 적극적으로 사용하는 것도 이제는 많이 고려해봐야 할 요소라고 생각된다. 카테고리 한 페이지 바꾸기 작업처럼 미니멀한 디자인에 이모지는 원하는 메시지를 분명하고 전달하고, 콘텐츠 혹은 메뉴를 구분하는데 필요한 차이를 분명하게 만든다.
다른 사람이 클럽하우스에서 들려주는 디자인 이야기를 듣다가 서비스에 감정적인 요소를 추가해보려고 한다는 말을 들었는데, 이런 식으로 검은색, 흰색, 회색을 벗어난 시도도 필요해 보인다.
구성 요소의 배치를 마친 후, 원본과 격차를 줄이기 위해서 아이콘 크기와 글자 크기를 조정했다. 이 소재로 조금 더 작업을 해본 후에 아예 다른 스타일에서 같은 기능을 재현하고 싶어서 약간 변경도 해보았다.
내 취향으로 바꾸면~ 이렇게~하지만... 하얗게 출시되었다면,
성공할 수 있었을까?
