본 연구는 언택트 시대로 인해 인터넷 쇼핑 인구가 증가함에 따라 데스크톱 환경에서의 쇼핑몰 이용 시 가장 많이 사용하게 되는 내비게이션의 사례를 분석하고자 하였다. 이에 쇼핑몰의 탐색에 있어 구조적 탐색 유형에 따라 GNB와 LNB의 종류와 유형을 분석하고 그 구성요소를 알아보았다. GNB는 탐색구조의 최상위 요소로 콘텐츠 섹션의 레이블 구성을 바탕으로 사용자의 탐색을 유도하며 컬러, 텍스트, 아이콘, 이미지 요소를 배치할 수 있다. LNB는 드롭다운, 플라이아웃, 드롭라인 그리고 메가 메뉴의 형태로 분류할 수 있었다. 본 연구에서는 사용자가 많이 사용하는 오픈 마켓 중지 마켓과 인터파크의 내비게이션 구조를 분석하였다. 지 마켓의 GNB는 2단 구조로 컬러, 텍스트, 이미지, 아이콘 요소가 사용되었으며 인터파크는 3단 구조의 수평 레이블로 구성되어 있었다. 인터파크의 GNB는 지 마켓과는 달리 일시적인 콘텐츠 섹션인 계절 레이블에 뱃지를 두어 시선을 유도하였다. 두 쇼핑몰의 LNB는 모두 좌측에 배치된 로고 하단에 수직 텍스트 형태로 배치된 카테고리 메뉴에 마우스 오버하면 플라이아웃 메뉴가 돌출되며 플라이아웃 메뉴는 메가 메뉴의 레이아웃으로 구성된 복합 구조를 가지고 있음을 알 수 있었다. 본 연구는 인터넷 쇼핑이 증가하고 있는 요즘 쇼핑몰의 GNB와 LNB를 분석하여 사용자 경험 요소를 밝히는데 의의가 있으나 오픈 마켓 외 소셜 커머스나 대형 마트와 같은 타 쇼핑몰이 분석을 함께 하지 못한 것은 한계로 남는다.
본 연구는 언택트 시대로 인해 인터넷 쇼핑 인구가 증가함에 따라 데스크톱 환경에서의 쇼핑몰 이용 시 가장 많이 사용하게 되는 내비게이션의 사례를 분석하고자 하였다. 이에 쇼핑몰의 탐색에 있어 구조적 탐색 유형에 따라 GNB와 LNB의 종류와 유형을 분석하고 그 구성요소를 알아보았다. GNB는 탐색구조의 최상위 요소로 콘텐츠 섹션의 레이블 구성을 바탕으로 사용자의 탐색을 유도하며 컬러, 텍스트, 아이콘, 이미지 요소를 배치할 수 있다. LNB는 드롭다운, 플라이아웃, 드롭라인 그리고 메가 메뉴의 형태로 분류할 수 있었다. 본 연구에서는 사용자가 많이 사용하는 오픈 마켓 중지 마켓과 인터파크의 내비게이션 구조를 분석하였다. 지 마켓의 GNB는 2단 구조로 컬러, 텍스트, 이미지, 아이콘 요소가 사용되었으며 인터파크는 3단 구조의 수평 레이블로 구성되어 있었다. 인터파크의 GNB는 지 마켓과는 달리 일시적인 콘텐츠 섹션인 계절 레이블에 뱃지를 두어 시선을 유도하였다. 두 쇼핑몰의 LNB는 모두 좌측에 배치된 로고 하단에 수직 텍스트 형태로 배치된 카테고리 메뉴에 마우스 오버하면 플라이아웃 메뉴가 돌출되며 플라이아웃 메뉴는 메가 메뉴의 레이아웃으로 구성된 복합 구조를 가지고 있음을 알 수 있었다. 본 연구는 인터넷 쇼핑이 증가하고 있는 요즘 쇼핑몰의 GNB와 LNB를 분석하여 사용자 경험 요소를 밝히는데 의의가 있으나 오픈 마켓 외 소셜 커머스나 대형 마트와 같은 타 쇼핑몰이 분석을 함께 하지 못한 것은 한계로 남는다.
This study analyzed the most frequently used navigation cases in a desktop environment. As a result of the research, GNB induces users' search as the top element of the search structure and can place color, text, icon, and image elements. LNB could be classified in the form of a dropdown, flyout, dr...
This study analyzed the most frequently used navigation cases in a desktop environment. As a result of the research, GNB induces users' search as the top element of the search structure and can place color, text, icon, and image elements. LNB could be classified in the form of a dropdown, flyout, dropline and mega menu. In this study, the navigation structure of Interpark and Interpark among open markets used by users was analyzed. G-Market's GNB has a two-tier structure with color, text, image, and icon elements, and Interpark has a three-tiered horizontal label. Interpark's GNB drew attention by placing a badge on the seasonal label, which is a temporary content section, unlike G-market. It can be seen that the LNBs of both shopping malls have flyout menus that protrude when you mouse over the category menu arranged in a vertical text form under the logo placed on the left. The flyout menu has a complex structure consisting of the layout of the mega menu. This study is meaningful in revealing user experience elements by analyzing the GNB and LNB of shopping malls these days where internet shopping is increasing.
This study analyzed the most frequently used navigation cases in a desktop environment. As a result of the research, GNB induces users' search as the top element of the search structure and can place color, text, icon, and image elements. LNB could be classified in the form of a dropdown, flyout, dropline and mega menu. In this study, the navigation structure of Interpark and Interpark among open markets used by users was analyzed. G-Market's GNB has a two-tier structure with color, text, image, and icon elements, and Interpark has a three-tiered horizontal label. Interpark's GNB drew attention by placing a badge on the seasonal label, which is a temporary content section, unlike G-market. It can be seen that the LNBs of both shopping malls have flyout menus that protrude when you mouse over the category menu arranged in a vertical text form under the logo placed on the left. The flyout menu has a complex structure consisting of the layout of the mega menu. This study is meaningful in revealing user experience elements by analyzing the GNB and LNB of shopping malls these days where internet shopping is increasing.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
하지만 옷이나 가방 등과 같이 개인의 취향이 고려되고 재질이나 소재, 색상 등이 요소가 파악되어야 하는 경우는 작은 디바이스 보다는 큰 화면에서 확인하는 과정을 더 선호한다. 따라서 본 연구에서는 오픈마켓을 대표하는 지 마켓과 인터파크의 GNB와 LNB의 유형 및 UI 요소를 파악하고 사용자 경험을 높일 수 있는 사례 분석을 하고자 한다.
본 연구는 코로나 사태로 인한 언택트 시대를 맞아 인터넷 쇼핑이 수요가 늘어가고 있는 상황에 원활한 쇼핑을 위해 스마트폰 보다는 대형 화면을 선호할 것이라는가 정 하에 데스크톱에서의 쇼핑몰 탐색에 대해 연구하였다. 쇼핑몰은 구조적 탐색, 연관 탐색 그리고 기능 탐색의 유형으로 구분되었으며 본 연구과 관련된 구조적 탐색에서 GNB와 LNB에 집중하여 쇼핑몰에서의 GNB의 특징과 구성요소를 살펴보았다.
본 연구에서는 쇼핑몰의 정보 탐색에서 가장 큰 역할을 하는 주요 내비게이션 유형을 분류하고 UI 구성 요소에 대해 분석하고자 한다. 최근 반응형 웹이나, 모바일 전용 APP 기반의 쇼핑몰도 있으나 스마트폰 환경에서는 대부분 햄버거라고 불리는 드로워 방식으로 내비게이션을 사용하고 있기 때문에 거의 대부분 유사한 방식으로 내비게이션을 구사하고 있다.
제안 방법
GNB는 콘텐츠 섹션의 레이블이 가장 우선되어야 하며 GNB의 구성 요소로는 텍스트, 이미지, 아이콘, 컬러를 들 수 있다. LNB의 유형는배치된 형태에 따라 거꾸로 된 L자 형태와 수평 형태로 구분되었으며 기능적 특징에 따라 드롭다운, 플라이아웃, 드롭라인, 메가 메뉴로 구분하였다.
쇼핑몰의 내비게이션은 주로 구조적 탐색과 관련이 있다. 구조적 탐색이 과정에서 사용자는 흔히 히어로 영역에 배치되는 메인 내비게이션의 영역을 통해 콘텐츠를 탐색하기 때문에 본 연구에서의 쇼핑몰 내비게이션은 구조적 탐색 유형으로 한정되며 여기에는 GNB와 LNB를 포함한다.
쇼핑몰은 구조적 탐색, 연관 탐색 그리고 기능 탐색의 유형으로 구분되었으며 본 연구과 관련된 구조적 탐색에서 GNB와 LNB에 집중하여 쇼핑몰에서의 GNB의 특징과 구성요소를 살펴보았다. GNB는 콘텐츠 섹션의 레이블이 가장 우선되어야 하며 GNB의 구성 요소로는 텍스트, 이미지, 아이콘, 컬러를 들 수 있다.
이론적 연구를 바탕으로 오픈 마켓을 대표하는 지 마켓과 인터파크의 GNB와 LNB 사례를 분석하였으며 지마켓은 2단의 GNB로 구성되고 인터파크는 3단의 GNB 로 구성된 것을 알 수 있었다. 각 쇼핑몰의 GNB는 컬러, 텍스트, 아이콘, 썸네일 이미지를 공통으로 사용하고 있었으며 인터파크는 일시적으로 보이는 계절 콘텐츠 섹션에 뱃지를 활용하고 있었다.
성능/효과
각 쇼핑몰의 GNB는 컬러, 텍스트, 아이콘, 썸네일 이미지를 공통으로 사용하고 있었으며 인터파크는 일시적으로 보이는 계절 콘텐츠 섹션에 뱃지를 활용하고 있었다. LNB는 두 쇼핑몰 모두 수직 텍스트 형태로 카테고리가 구성되었으며 플라이 아웃 메뉴가 펼쳐지면 메가 메뉴의 레이아웃이 사용되는 복합적인 유형으로 구성되어 있음을 알 수 있었다.
후속연구
본 연구는 인터넷 쇼핑이 증가하고 있는 요즘 GNB와 LNB를 분석하여 사용자 경험 요소를 밝히는데 의의가 있으나 오픈 마켓 외 소셜 커머스나 대형 마트와 같이 생필품 위주의 쇼핑몰을 분석하지 못하였으며 이는 후속 연구로 진행될 예정이다.
참고문헌 (6)
B. M. Jung, 2019 Internet Usage Survey, Internet Usage Report, Korea Information Society Agency, Korea, pp.22.
H. S. KIM , Global e-commerce trends after COVID-19, Trade Report, KITA, Korea, pp.1-3.
D. H. YANG , September 2020 Online shopping trends, Economic trend Report, Statistical Office, Korea, pp.4.
J. W. Suh, J.W. Kim, "An empirical study of the effectiveness of spatial navigation system - Focus on large-scale web sites -", The journal of MIS research, Vol.11, No.2, pp.79-89, Oct. 2001.
James Kalbach, Designing web navigation, p.448, USA: O'REILLY Pblishing, 2007, pp.15-50
※ AI-Helper는 부적절한 답변을 할 수 있습니다.