[UI 디테일] 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로

Family UI의 정의

'Family UI'는 자동차 업계에서 사용되는 Family Look 이라는 단어에서 인용한 것으로 한 브랜드에서 나온 모델들에 브랜드 정체성을 부여해주는 디자인 요소를 말합니다. Family Look을 적용한 디자인은 모델이 다르더라도 특정 회사의 제품이라는 것을 바로 구별해 낼 수 있어서 브랜드 정체성을 강조해주는 효과와 함께 향후 구매력에 영향을 준다고 합니다.^[각주:1]

미투데이의 Family UI 비교

웹, iOS 앱, 안드로이드 앱 미투데이를 사용하면서 느꼈던 Family UI 의 차이점을 디테일한 면 위주로 비교해 보았습니다. 전반적으로 미투데이는 웹, iOS 앱, 안드로이드 앱을 일괄적으로 가져가기 위해서 애를 쓴 모습이 보입니다만, 이 글은 차이점에 대해서만 기술함을 밝혀둡니다.

(*미투데이는 친구들과 실시간으로 이야기를 나눌 수 있는 150자 마이크로 블로그입니다. 자세한 설명은 여기에서 확인하세요.) 

 

1. 아이콘

미투데이의 아이콘중에서 '찾아보는' 이라는 아이콘이 있습니다. [그림1]에서 '찾아보는'은  키워드를 이용한 검색 기능을 제공하는데, 같은 레이블의 아이콘임에도 불구하고 아이콘을 서로 다르게 표현하고 있음을 알 수 있습니다. 실제 기능을 보면 좌측에 있는 '찾아보는'은 내가 등록한 키워드 위주로 보여주는 역할을 수행합니다. 우측에 있는 '찾아보는'은 키워드를 보여주기는 하나 '검색 기능'이 있기 때문에 다른 아이콘을 쓰고 있습니다. 다른 기능이라면 아이콘만 다르게 할 것이 아니라 레이블을 변경해야 하지 않나 생각합니다.

[그림1] '찾아보는' 아이콘의 차이 (좌- 웹, 우- iOS 앱)

그 다음으로 '프로필'을 나타내는 아이콘을 보시겠습니다. [그림2]를 보시면 좌측에 있는 프로필과 우측 옵션 메뉴 키에 있는 프로필이 레이블은 같은데 아이콘을 다르게 표현하고 있습니다. 내용을 파악해보면 좌측에 있는 프로필은 엄연히 보면 프로필 설정 기능을 수행하며, 우측에 있는 프로필은 프로필 확인으로 해석할 수 있습니다. 마찬가지로 같은 레이블인데 다른 기능을 수행하므로 아이콘 뿐 아니라 레이블을 변경해야 할 것 같습니다.

[그림2] 프로필 아이콘의 차이 (좌- 웹, 우- 안드로이드 앱)

[그림3] 을 보시면 우측의 '사람찾기' 아이콘을 웃는 아이콘으로 표현하고 있습니다. 그렇다면 좌측의 아이콘도 과연 사람찾기일까요? 좌측의 아이콘은 아이콘을 변경할 수 있는 아이콘입니다. 이 상황에서는 좌측의 아이콘을 다른 아이콘으로 변경하는 것이 좋을 것 같습니다.

[그림3] 사람찾기 아이콘의 혼용 (좌,우 iOS 앱)

2. 레이블 

자 이제 레이블을 보시겠습니다. [그림4]를 보시면 좌측의 '댓글달기' 버튼과 우측의 '댓글쓰기' 레이블은 같은 기능을 수행합니다. 하지만 레이블의 차이가 있습니다. '쓰기' 버튼과 '올리기'버튼도 사실은 같은 기능을 수행합니다만 레이블의 차이가 있습니다. 물론 UI Flow 상으로는 문제가 없습니다만, 레이블을 통일시켜주는 것이 좋을것 같습니다.

[그림4] 레이블의 차이 (좌- 웹, 우- iOS 앱) 

3. 레이아웃

이번에는 레이아웃을 보시겠습니다. [그림5]번을 보시면 좌측의 글을 올린 날짜, 시간은 오른쪽 정렬로 되어있는데, 우측의 글을 올린 날짜, 시간은 왼쪽 정렬로 되어있습니다. 이때에는 두개를 통일시키는 것이 일관된 경험을 줄 수 있겠지요.

또한 날짜 시간 표현방식도 자세히 보시면 미묘하게 다름을 알 수 있습니다. 차이점이 보이시나요?

또한 아래 이미지 표현방식도 차이가 있습니다. 아이폰 앱에서는 한줄에 2개씩 보여주는데, 안드로이드 앱에서는 한 줄에 6개씩 보여줍니다.

* 추가: 아이폰에서 미투한 사람이 몇명이 기준인지는 모르겠습니다만, 많아질 경우 한줄에 5개씩 보여짐을 확인했습니다. 그래도 일관된 UI/GUI는 아니군요.

[그림5] 레이아웃의 차이 (좌- iOS 앱, 우- 안드로이드 앱)

 

4. 네비게이션

전체 네비게이션도 OS에 따라 차이가 있습니다. [그림6]을 보시면 좌측 안드로이드 앱에서는 홈(App dashboard) 화면이 있어서 어디를 들어가고 싶을때 홈(App dashboard) 화면을 거쳐서 이동해야 합니다. 하지만 iOS 앱에서는 하단 탭에 자기가 보고 싶은 카테고리 4개를 선택하여 구성할 수 있습니다. 이 차이점은 안드로이드 폰과 아이폰의 태생적인 차이점 일 수도 있겠지만, 한 회사의 서비스이니만큼 어느정도는 일관성을 지켜주는것이 좋겠다고 생각합니다.

[그림6] 네비게이션의 차이 (좌- iOS 앱, 우- 안드로이드 앱)

5. 그외에...

미투데이의 '화화'님께서도 iOS의 미투데이와 안드로이드 미투데이 앱의 사용상의 차이점을 기술 해주셨습니다. 작성한 글을 롱탭 했을때 UI가 다르다는 점을 기술하고 있습니다.

정리하며…

다음과 같이 미투데이의 웹, iOS 앱, 안드로이드 앱을 비교해 보았습니다. 

물론 미투데이의 웹 + iOS 앱 + 안드로이드 앱을 모두 사용하는 사람들은 많지 않을수도 있습니다. 그러나 한 서비스를 사용하다가 다른 서비스로 이동하더라도 동일한 경험을 제공하도록 하는것이 사용성 및 서비스의 새로운 가치 창출을 위해서는 꼭 필요하다고 생각합니다. 동일한 경험을 제공하되 각각의 플랫폼의 성격에 따라 최적화된 UI가 나오는것이 좋지 않을까요? 물론 그렇게 하는것이 쉽지는 않을 것입니다. 여러번의 시행착오와 개선이 필요하겠지요. 미투데이는 충분히 잘하고 있고, 잘하고 있기 때문에 더 아쉬운 점을 찾게 되는 것 같습니다. :)

[참고##UI 디테일##]

1. HCI 2009 학술대회 '멀티플랫폼에서 Family UI의 적용에 대한 사례연구'에서 인용 [본문으로]