Tabs in the past
과거의 탭은 탭이라는 사실이 너무 명확하게 디자인되었습니다. 기억하시는지요? 아래와 같은 UI 디자인이 성행했던 2000년대 … 아마존, 구글도 탭을 메인으로 사용한 디자인을 했습니다. 탭은 유저에게 메뉴라는 걸 인지시키고 정보를 효과적으로 분류 할 수 있는 아주 효율적인 방법입니다.
Tabs in present
현재까지도 많이 사용하는 UI 중에 하나입니다. 단지 최근에 와서는 옛날과 같은 폴더가 겹쳐진 형태, 명확한 탭 아웃라인 처리, 볼록한 입체적인 형태 대신에 글자만 표시하고 선택 여부만 알 수 있게 하는 플랫 디자인 스타일로 진화(?) 되었습니다. (아래 참조)
보기에 깔끔하고 정리된 구성이 되었습니다. 그래서 정보가 많고 분류가 필수불가결한 OP.GG 사이트에 전반적으로 많이 사용되는 디자인 스타일이 되었구요. 이런 스타일이 트렌드라고 명확하게 얘기할 수 있는 건 구글 검색 결과에서도 사용되고 있다는 것을 예로 들겠습니다.
Designing Tabs
그런데, 어느날 오피지지 유저A에게서 피드백이 날아왔습니다. “메뉴를 못 찾겠어요!” 이 유저A는 사라진 i 버튼을 찾고 있었습니다. 저희는 이 i 버튼을 ‘빌드’라는 메뉴명으로 변경하고 상세 전적 탭 안으로 넣었구요. i 버튼을 탭 안으로 넣을 수 있었던 건, 대부분의 유저가 전적을 확인할때 상세 전적을 확인하기 때문에 유저가 더 쉽게 찾을 수 있을 거란 가정이 있었습니다.
물론 많은 사람들이 별 문제없이 빌드를 눌러 원하는 정보를 확인하고 있습니다. 그러다 문득 이런 생각이 들었습니다. 플랫하게 만든 세련된 디자인 스타일이 사람들에게 누르고 싶은 욕구를 들게 하나? …… 그렇습니다. 아니죠. 정리되어 보이고 세련됐지만 누르고 싶은 느낌을 주지는 않습니다. 위의 그림으로 얘기 드리면, 현재 유저가 종합탭에 있고 빌드를 보려면 빌드를 눌러야 하는데 빌드가 눌러 질 거라는 느낌은 들지 않습니다. (학습에 의해 눌러지겠지라고 생각할 수는 있습니다) 그래서 저의 동료 디자이너 포자킹님이 이 부분에 공감하고 바로 작업에 들어갑니다.
그리고 짜잔~
보이시나요? 눌러야 할 부분들이 강조된 형태로 탭디자인이 개선되었습니다.
지금 선택되어져 있는 Overview, 눌러야 할 메뉴 Team Analysis, Builds, etc에 아웃라인을 주면서 ‘나를 눌러주세요’ 힌트가 있는 디자인으로 바뀌었습니다.
Thoughts on design
학교에서 배웠습니다. Less is more. 컨텐츠를 다듬고 디자인을 정리하다보면 때때로 디테일이 디자인 스타일에 묻히는 경우가 있습니다. 최근에 이슈가 되었던 언더라인이 명확하게 들어간 예전의 파랑색 텍스트가 현재 세련된 메뉴보다 훨씬 잘 읽힌다는 맥락에서 말이죠. (자세한 내용이 궁금하신 분은 원문: How the web become unreadable, 번역글을 참조해 보세요. 디자인 관점에서 흥미로운 글입니다) 구글, 애플 등 최대형 서비스들에게 어느 정도 책임이 있다는 말에 공감도 가고요. 사용성을 담보로 한 단순화 과정은 쉽지 않다라는 생각이 듭니다.
오늘 제가 쓰고 싶은 얘기는 이거였습니다. 내가 트렌드 디자인에 익숙해져서 정말 기본적인 이 텍스트(디자인 요소)를 눌러야 할 지 아닌지에 대한 인지 정도가 무뎌진 건 아닌가? 그냥 텍스트를 보면 누를 수 있다는 걸 이미 너무 많이 학습한 건가? 버튼에 입체감이 없다고 버튼이 아닌가? 버튼에 아웃라인 없다고 버튼이 아닌가? (이렇게 생각하면 아니지.) 지금 이 디자인에서는 텍스트가 다 버튼처럼 working 하고 마우스를 오버하면 커서가 손가락 아이콘으로 변화하니까 괜찮을거야 라고 생각하고 있는 건 아닐까? 진실은…… 괜찮다고 생각했습니다. 그러나 개선된 디자인을 보니 좀 더 기본에 충실한 디자인을 해야겠구나란 생각이 들어 글을 쓰게 되네요. 저의 이런 깨달음은… 앞서 언급되었던 글: How the web become unreadable이 계기는 아니었습니다. 바로 하루에도 수십 개씩 오는 유저 피드백과 시도 때도 없이 우리서비스를 쓰고 피드백을 날리는 동료들로부터 시작되었습니다. 결론은 유저의 피드백에는 모두 이유가 있고 해답은 그 이유를 이해하려는 마음 가짐에서 시작되는게 아닌가 합니다.
2 replies on “탭 이야기”
좋은글 보고 갑니다:D
항상 발전하는 모습, 보기 좋습니다