UI 브리핑 : 8화 - 메가메뉴와 반응형 데이터테이블
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
오늘의 이야기는 메가메뉴와 반응형 데이터 테이블에 대한 이야기를 해보겠습니다.
기존 이야기에서는 반응형웹과 4:3 / 16:9 사이즈를 모두 대응하기위해. 게임과 일반 웹디자인 모두가 - 4:3 해상도를 최소레이아웃으로 잡고. 이후에 16:9화면을 늘려서 대응하거나. 혹은 반응형웹 레이아웃을 통해 , 일정 해상도에 맞는 레이아웃들을 따로 적용한다는것을 이야기했습니다.
사실 각 페이지의 레이아웃이 재적용되는 방식 뿐 아니라. 복잡한화면에서의 데이터 테이블이나. 메뉴가 많을 경우 - 이를 메가메뉴 형태로 표기하는 - 개별 설계도 매우 중요해지는데요. 일반적으로 우리가 생각하는 웹사이트라는건 - 수많은 정보를 담는 틀.로서보다. 멋지고 아름다운 웹규격에대한 생각을 많이하기가 쉽습니다.
그러나 일정 수준 이상의 내용으로 들어가게되면. 설계는 '기존보다 더 복잡한 화면을 단순하게 만드는 과정'이므로 스타일리쉬의문제가아니라. 일단 무수하게 많은 정보를. 더 간결하고 - 편리하게 찾게할 수 있는가의 문제라는걸 알 수 있습니다
위의 이미지는 아마존닷컴의 화면입니다.
수많은 상품들을 개별 태그화하고. 다시 상세하게 가격, 점수, 순위 등의개별 태그를 통해서 정리하며 상품 카테고리만 20개가 넘습니다.
게다가 상품 카테고리 1차 -> 이후 개별 옵션을 선택하게하거나. 상단의 검색창에서 세부 검색이 가능하게하는 방식이죠
해당화면은 기존에 역분석을 해보시라고 추천드렸던 네이버 클라우드 플랫폼의 화면입니다. 위의 아마존과 비슷하게. 개별 텍스트들이 모두 -개별 서비스. 개별 상품들입니다. 엄청나게 양이 많죠?
이렇게 복잡한 / 수많은 카테고리가 존재하는 서비스들의 경우. 일반적인 웹디자인 방식이나. 정보정리법과는 형식이 많이 달라집니다.그리고 이런 복잡한 화면들을 분석 / 개선 / 단순화하는 방법에 대한 고민이 필요한거죠
이런 전체화면을 사용하는 / 혹은 내용이 페이지 단위로 들어가는 메뉴를 메가메뉴라고하는데요. 이커머스 (e commerce)나 옵션, 태그값이 매우 복잡하게 존재하는경우에 자주 사용되는 방식입니다.
네이버의 메가메뉴 형태
다음의 메가메뉴 형태
국내 사이트들 중에서도 메가메뉴의 다양한 변형 형태를 갖고있는 경우가 많구요
다나와, 이케아, 쇼핑몰 사이트 등에서도 자주 사용됩니다.
메가메뉴는 단순 스타일링을 넘어서서. 메뉴구조와. 아이템들을 어떤식으로 - 어떤 단계를 통해 배치했는지.전체 메가메뉴 형태와, 실제 개별 아이템을 상세하게 찾아들어가는 타입이 무엇이 다른지. 이런 차이점들을 확인해두는 것이 중요합니다.
알리바바 서비스의 메가메뉴
알리바바 서비스의 상세 제품 필터링
쿠팡의 메가메뉴 (2뎁스)
쿠팡의 메가메뉴 (3뎁스)
동일 메가메뉴에서도 - 카테고리에따라 다른 배치를 보여주는 best buy의 사례도 있구요. 실제로 굉장히 다양한 형태 / 규격의 메가메뉴가 존재합니다.
이런 메가메뉴의 장점이라고한다면. '메가메뉴가 사용되지 않았을 경우'에 - 상대적으로 매우 불편할 수 있는 '화면별 이동, 체크'를 하지않아도된다는것이죠.
예로 이 화면은 루리웹이라는 온라인 커뮤니티의 페이지입니다. 상단에 여러 게시판들이 나열되어있지만. 해당 페이지를 하나하나 들어가보지않고서는- 사용자가 필요로하는 내용을 찾기가 쉽지가 않습니다.
물론 해당 사이트는 커다란 카테고리를 나눠놓고. 개별 주제에서 다시 상세 페이지가 등장하는 구조이긴합니다. 각각의 설계마다 장단점이있겠으나. 이경우는 여러 페이지를 오고가는 형태에는 도움이되지않겠죠
예로 이런 사이트에서 상단의 메뉴들을 - 카테고리화하여 메가메뉴가 들어간다면. 임기 / PC 게임 / 영상 / 스포츠 등 커다란 카테고리로 메뉴가 묶이게될것이고. 해당 페이지들 중에 가장 대표적인 메뉴들이 - 하단 메뉴로 등장하게되겠죠
이런 메가메뉴는 일반적으로 '그냥 기획하는'것이 아니라. 실제 운영을 하게되면서.태그처리된 게시판 / 접속률 / 운영상황에따라 유동적으로 변화할 수 있습니다.
구글 애널리틱스에 대해서 들어본분도 계실겁니다. 실제로 웹사이트가 만들어지게되면. 해당 사이트에 gtm (구글 태그매니저) 혹은 실제 추적코드를 심어놓게 됩니다. 그리고 개별 페이지 / 카테고리 / 게시판. 등의 개별 영역에 얼마나 많은 사람들이 들어오고. 얼마나 적은 사람이 오고가는지. 트래픽과 개별 사용률. 통계를 내게됩니다.
'모든 메뉴를 그대로 노출'하는것은 사실상 규모가 커질수록. 포탈급 규모일수록 한계가 있습니다. 그렇기에 네이버나. 다음 카아오. 심지어 개별 커뮤니티 사이트들 역시도 이런 '트래픽에따른 메뉴의 최적화'가 필요합니다. 심지어는 트래픽에 따른 서비스 종료 / 개선 등의 고민도 필요해지는 것이죠.
이걸 좀 정리하면 다음과같습니다
1. 모든 웹 페이지를 메뉴에 그대로 노출하는 것은 사용자의 피로도를 높이게되고 / 정보선택을 어렵게 만든다.
2. 모든 웹 페이지에 대한 설계는, 압축적이고, 사용자의 필요에 대한 맥락에 맞게 정리되어야한다.
3. 구글 애널리틱스, 실제 사용자통계를 통해, 가장 자주 사용되는 / 사용자들이 주로사용하는 사용패턴을 확인해야한다.
4. 메가메뉴의 규격은 이런 실제 통계나, 조사를 통해서 - 지속적으로 최적화 / 개선되어야한다.
사실 여기에서 더 깊게들어가면. ab테스트와같은 - 실험적인 이야기도 해볼수있습니다.
이건 실제로 네이버에서도 사용하고있는 방식인데요. 하나의 레이아웃변경 / 메뉴구조개선에 대해서 일종의 사용자군을 랜덤으로 선정해서 - 실제 사용 로그나. 기존 대비 사용량 향상을 체크하는 방식입니다.
AB 테스트를 통해 UI를 개선한 실제 사례
https://brunch.co.kr/@clay1987/142
나중에 더 자세히 얘긴 드리겠지만. 미래의 UI 디자인은 감각이아니라. 데이터를 기반으로 - 얼마나 더 사용성을 나아지게할 수 있는지를 체크하고. 확인하고. 실제 설계에 반영하는 - 마케터적인 요소까지 포함하게됩니다. 말그대로 설계.의 영역인것이죠.
두개의. 세개의시안중에.어떤것들이 더 사용성이 높은가. 그래서 실제 구매에 다다르게하는 요소를 방해하는 게어떤 요소인가. 이런것들을 확인하고 개선하는데. 이런 방식들을 사용합니다. 또한 그 일부를 보여드리는것이. 오늘의 메가메뉴에대한 이야기가되겠네요.
오늘은 반응형 데이터 테이블에 대한 이야기도 좀 곁들이려하는데요. 반응형 데이터 테이블의 경우는. 사실 그렇게 큰단위가 아니라서. 반응형 웹에 들어가는 데이터테이블들을 - 규격변경시에도 쉽게 볼수 있게 만드는 방식입니다. 물론 그만큼 제약상황도 등장하죠.
https://iropke.com/archive/data-table.html
데이터테이블의경우 개별 UI 요소와는 다르게 가로, 세로 축이 다르고. 심지어는 요소의 헤더값이 복잡하거나. 검색창까지 포함하거나. 필터값을 먹이는등 복잡한 구조로 만들어질 가능성이 높습니다.
그런 테이블들을 넓은화면과 / 모바일화면에서 모두 동일한 사용성을 보이게하려면 어떻게해야하는지. 그런 방법에대해서. 우리가 기존에 이야기했던 부트스트랩 같은 경우. 개별 반응형 데이터 테이블에대한 예시나. 혹은 플러그인들을 제공하기도합니다.
https://mdbootstrap.com/docs/jquery/tables/responsive/
최근의 반응형 테이블은 요런식으로 완전 반응형이 되는것을 선호하는 형태이구요
내부에 가로 열이 너무 많거나. 어쩔수없는 경우 스크롤을 넣어주기도합니다. 기본적으로 좌우는 짧고. 상하가 긴 레이아웃을 사용하는게 더 안전하죠. 다만 이런 경우, PC에서의 사용성이 떨어질 수 있기때문에. 설계상으로 어떤 선택을할지를 고민하게됩니다.
반응형 데이터 테이블 예제
https://codepen.io/SitePoint/pen/raXdwZ
데이터 테이블은 필요에 따라 여러가지 변형이 가능합니다. 하단에 페이지네이션이 들어갈수도있고. 위에서 이야기드렸듯. 검색이나. 다른 옵션이들어갈수도있죠.
데이터테이블의경우. 그냥 표아니냐.라고생각하실수도있지만. 생각보다 굉장히 많은 공수 / 고민이 필요한 부분입니다. 특히나 정보성 / 관리자 페이지에서는 더욱더 그럴 가능성이 높죠.
편리한 구조의 데이터 테이블 설계에 대한 글
https://brunch.co.kr/@clay1987/115
반응형 데이터 테이블의경우 해당 글을 함께읽으시면 좋습니다. 실제로 다양한 프레임워크 / 플러그인 형태로. 데이어테이블의 사례가 여럿 데모버전으로 존재하기때문에 해당 자료들을 검색해보시는것도 큰 도움이 됩니다.이러한 ' 개별 요소들의 스펙과, 범위, 그리고 사용방법'에대해서까지 확인하고. 그걸 개발자에게 '이거 써서 개발해주세요'라고 말할수있는. '전략가'가 될 수 있는 형태가. 제가생각하는 UI디자이너의 설계.영역입니다.
오늘도 쉽지않은 이야기지만. 추후에도 해당 내용들을 더 풀어서 , 자세하게 파고들 예정이니. '다양한 사이트들의 메뉴구조와, 데이터 테이블'에대해 눈여겨보시는 습관을 들이셨으면합니다.
다음시간에는 잠시 쉬어가는 기분으로. '웹서비스 역분석, 어떻게 해야할까'에 대한 내용을 실제 사례를 통해 이야기해보겠습니다.
오늘의 정리는 다음과 같습니다
1. 수많은 아이템들을 '어떤 방식으로' 사용자에게 전달할 것인가를 고민한 결과가 메뉴구조이고, 상세 카테고리 구조이다.
2. 복잡하고 많은 정보를 다루는 e 커머스 / 클라우드 플랫폼 / 커뮤니티 등의 구조에서는 메가메뉴 형태가 많이 사용된다.메가메뉴만이 언제나 정답은 아니지만, 그만큼 편리하고, 다양한 변종이 사용되고있다.
3. 사용자들은 기획자가 설계한것을 넘어서는 사용성을 보인다. 그렇기에 인기있는 내용이나 자주 사용되는 요소들은 주요 메뉴로 표기해주어야한다.
4. 사용자들의 사용성을 검사 / 체크하기 위해서는 개별 메뉴와 아이템들에 - 태그를 적용하여, 통계 툴에서 사용자들의 사용방식, 패턴을 확인해야한다.
5. 반응형 웹을 디자인 할 때에는. 그 안에 들어가는 데이터 테이블 역시도 반응형으로 제작해주어야한다.
6. 반응형 데이터 테이블은 구조적으로 여러 기능을 제한하게된다. 그러니 가능하면 기존 상용화된 플러그인이나, , 예제 등을 확인하여 설계에 반영해야한다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
