Journal of Digital Convergence Vol. 19. No. 10, pp , 2021 ISSN / eissn 이커머스에서정

Journal of Digital Convergence Vol. 19. No. 10, pp. 411-418, 2021 ISSN 2713-6434 / eissn 2713-6442 https://doi.org/10.14400/jdc.2021.19.10.411 이커머스에서정보탐색을위한네비게이션인터페이스디자인유형연구 정다영 1, 김승인 2* 1 홍익대학교국제디자인전문대학원박사과정, 2 홍익대학교국제디자인전문대학원교수 A study on the type of navigation interface design for information search in e-commerce Da-Young Jung 1, Seung-In Kim 2* 1 Ph.D. Candidate, Hongik University, International Design School for Advanced Studies 2 Prof. of Digital Media Design, Hongik University, International Design School for Advanced Studies 요약본연구에서는 Statista와 National Retail Federation가선정한 100대이커머스서비스들을대상으로실제사용자에게제공하고있는정보탐색방식및사용자인터페이스의유형을조사하고, 인터페이스를구성하는시각화요소및조작에대한상호작용방식을분석한후각유형이가지는특성을도출하였다. 연구결과, 첫째, 정보의수와위계단계가많을수록스프레드형태를, 적을수록드롭다운과메가메뉴방식을사용하는경우가많았다. 둘째, 정보위계에따른시각적구분방식은배경색상, 서체의변화, 선을가장많이사용하며변화에대한인지가가장빠른배경색상과영역간구분을명확하게할수있도록돕는선을사용하는경우가많았다. 셋째, 사용자조작에대한상호작용방식은배경컬러, 텍스트컬러, 선등다양한요소들을두가지이상동시에적용하는경우가가장많았다. 본연구는이커머스의정보탐색을위한인터페이스의유형과세부요소들의선택기준이될수있는항목들의분석을통해유형별특성을정의하였다는점에서의미가있다. 주제어 : 이커머스, 정보구조, 정보탐색, 네이게이션인터페이스, 디자인유형 Abstract In this study, information search methods and user interface types provided to users were investigated for the top 100 e-commerce services selected by Statista and the National Retail Federation. And the characteristics of each type were derived by analyzing the interaction method of the user's manipulation with the visualization elements constituting the interface. The research results are as follows. First, as the information provision method, spread format was more often used as the number and hierarchy of information increased, and drop-down and mega menu methods were used more often as the number and hierarchy of information decreased. Second, as a visual classification method according to the information hierarchy, the background color, font change, and line were often used, and there were many cases where the background color and line were used at the same time. Third, there were various elements such as background color, text color, and line as an interaction method for user manipulation, and two or more of them were applied at the same time the most. This study is meaningful in that it defines the characteristics of each type through the analysis of the types of interfaces for e-commerce information search and items that can be the selection criteria for detailed elements. Key Words : e-commerce, Information structure, Information search, Navigation interface, Design type *Corresponding Author : Seung-In Kim(r2d2kim@naver.com) Received September 3, 2021 Accepted October 20, 2021 Revised September 20, 2021 Published October 28, 2021

412 디지털융복합연구제 19 권제 10 호 1. 서론 1.1 연구배경과목적 1990 년대후반에등장한이커머스시장은지속적으로빠르게성장해왔으며, 통계청보고에따르면국내이커머스시장은 2020 년 133조원이었으며, 2022 년에는 200 조원규모로크게성장할것으로전망하고있다 [1]. 이커머스시장의성장과함께이커머스서비스의종류와범위도확장되어소비자의생활편의성도증가하고있으나, 사용자들에게제공되는정보의양이급격히많아지면서정보의과부하에대한우려도커지고있다 [2,3]. 이러한정보과부하상황에서소비자들은모든정보를활용하여최적의의사결정을하기보다는웹사이트가제공하는정보의구조, 제시방법및제공되는시각적디자인요소등에의해의사결정을하는경우가많다 [4,5]. 따라서이커머스에서사용자에게효율적으로상품의정보를제공하기위해서는정보구조 (Information Architecture) 를체계적으로설계해야하며, 보다편리한사용자경험제공을위해네비게이션 (Navagation) 기능을활용한사용자인터페이스 (User Interface) 를제공하는것이매우중요하다 [6,7]. 그동안정보구조와사용자경험에대한연구들이많이진행되어왔으나, 이를사용자인터페이스로전환하기위해참고해야할정보탐색인터페이스디자인의유형과특징에대한조사는부족한실정이다. 이에본연구에서는이커머스서비스들의사례조사를통해정보탐색인터페이스디자인의유형과특징을분석하였으며, 향후이커머스를비롯한인터넷상에서정보제공방식을고민하는기업이나개인이정보탐색인터페이스제작시, 참고자료로활용할수있도록그결과를제시한다. 1.2 연구방법과범위본연구에서는문헌조사를통해정보탐색의목적과방식유형을조사하고, 이중정보구조와인터페이스형태에영향을받는탐색방식을중심으로네비게이션메뉴에활용되는사용자인터페이스의사례를조사하였다. 이후 Statista와 National Retail Federation 가선정한 100대이커머스서비스들을대상으로실제사용자에게제공하고있는정보탐색방식및사용자인터페이스의유형을조사하고, 인터페이스를구성하는시각화요소및사용자조작에대한상호작용 (Interaction) 방식을분석한후각유형이가지는특성을도출하였다. 2. 이론적배경 2.1 정보탐색의목적과방식 마르시아베이츠 (Marcia J.Bates) 의연구에따르면, 사용자가정보를탐색하는방식은 Fig 1과같이크게 4 가지로분류할수있으며, 그중적극적탐색에해당되는방식으로는검색 (Searching) 과탐색 (Browsing) 이있다 [8]. 사용자는필요로하는제품혹은정보에대한이해도가높거나탐색목표가정확한경우에는검색방식을선호하며, 반면에정보이해도가낮거나뚜렷한목표없이폭넓게정보를찾아보고자하는경우에는탐색방식을활용한다 [9]. 이중검색은사용자가원하는목표를위해검색문구를입력하고결과값을찾는일방향형태의과정을거치는반면, 탐색은뚜렷한목표없이정보들을살펴보며원하는결과값을찾아나가는방식으로, 서비스가정보제공방식은물론정보구조와인터페이스의형태등에많은영향을받게된다. Fig. 1. Modes of Information Seeking 2.2 정보구조와네비게이션이커머스에서의정보서비스는제공해야하는정보를대상으로우선정보구조 (Information architecture) 를설계하고, 이후이것을사용자에게표면적으로제공하는사용자인터페이스의네비게이션디자인 (Navigation design) 을통해정보를제공하게된다. 제임스개럿 (Jesse James Garett) 은그의저서인 사용자경험의요소 (The Elements of User experience)[10] 에서정보구조의골격층이네비게이션디자인이라는표면층을통해사용자에게전달된다고하였으며, 여기서네비게이션이란사용자가웹사이트전체에걸쳐광범위하게접근할수있도록해주며, 웹사이트한쪽끝에서다른쪽끝으로

이커머스에서정보탐색을위한네비게이션인터페이스디자인유형연구 413 갈때필요한핵심창구를제공하는것이라고정의하였 다. Fig 2 는제임스개럿이제시한사용자경험의요소를 도식화한것이다. 이중메뉴 (Menu) 는사용자가정보를탐색할수있도록제공되는가장높은우선순위의인터페이스방식으로, 콘텐츠의카테고리혹은기능의목록을제공한다. 이때, 네비게이션은가급적거의모든콘텐츠페이지에서접근이가능하도록설계해야하며, 가독성과시인성은물론시각적으로명확한기표 (Affordance) 를활용하여디자인해야한다 [11,12]. 3.1 실험대상과범위 3. 연구방법 Fig. 2. The elements of user experience[10] 2.3 사용자인터페이스구성과유형네비게이션사용자인터페이스의구성과상세유형은 Fig. 3과같다. 닐슨노먼그룹 (Nielsen Norman Group) 의제이콥닐슨 (Jakob nielsen) 이주창한제이콥의법칙 (Jakob's law) 에따르면, 사용자들은자신이가장익숙하게생각하는방식을가장편리하다고인식하며, 기존에이미사용중인서비스들이제공하는인터페이스방식을지속적으로연구하고분석하여사용자에게보다편리한서비스를제공하는것은사용자경험에매우유의미하고하였다 [12]. 이에본연구에서는가장많은사용자들이이용하고있으며복잡하고다양한메뉴구조를가지고있는이커머스서비스군을실험대상으로하였으며, Statista와 National Retail Federation 가선정한 100대서비스리스트 [13] 를바탕으로시각적으로명확하게인지가능한메뉴구조를가지고있는 69개서비스를심층적으로조사하였다. 3.2 실험방법우선, 각서비스가제공하고있는메인네비게이션메뉴를기본상태와펼침상태로구분하여수집한후, 앞서조사한인터페이스유형에각각대입하여분류하였다. 이후정보의위계구분방식의분류를위하여대메뉴와소메뉴의시각적구분방식이유사한메뉴들을그룹핑하여공통적으로발견된특성을기록하였다. 마지막으로메뉴에대한사용자의조작유도방식에대해조사하기위해조작에대한피드백 (Feedback) 방식에따라메뉴를재분류하고공통특성을기록하였다. 이에대한상세내용은 Table 1과같다. Fig. 3. The elements of user experience[11]

414 디지털융복합연구제 19 권제 10 호 Table 1. Common characteristics by menu reclassification of test subjects No. List Rank Company 1. Menu Exposure Type Mega drop/drop down/curtain type 3-1. Manipulation 2. Menu 3-2. Manipulation Guidance Guidance Device - Hierarchy Type Device - Clickable Display Hover Interaction Line/Font/Back ground (Color, Transparency, etc.) Mixed/Single Font color/arrow and angle Tyoe(Line/Color/Ar brackets/mixed ea/bold) 1 Retail 100 1 Walmart Curtain type Line Mixed Etc 2 Retail 100 2 Amazon.com Curtain type Font Single (Area) Arrow & Angle bracket 3 Retail 100 3 The Kroger Co. Curtain type Line Single (Line) Arrow & Angle bracket 4 Retail 100 4 Costco Curtain type Font Single (Bold) Arrow & Angle bracket 4. Image Expression Method Image type/icon type/imag e & icon type 5 Retail 100 5 Walgreens Boots Alliance Curtain type Background Single (Area) Arrow & Angle bracket Icon 6 Retail 100 8 Target Curtain type Font Single (Line) Arrow & Angle bracket 7 Retail 100 9 Lowe's Companies Mega drop Font Single (Line) Font Coloe 8 Retail 100 12 Ahold Delhaize USA Mega drop Line Single (Line) No change 9 Retail 100 13 McDonald's Mega drop Font Etc Arrow & Angle bracket Image 10 Retail 100 14 Best Buy Curtain type Line Mixed Arrow & Angle bracket 11 Retail 100 16 TK/maxxCompanies Mega drop Line Mixed No change 12 Retail 100 17 Aldi Drop down Background Single (Line) No change 13 Retail 100 18 Dollar General Drop down Font Mixed Arrow & Angle bracket 14 Retail 100 19 H.E. Butt Grocery Drop down Line Single (Area) Arrow & Angle bracket 15 Retail 100 20 Macy's Curtain type Line Mixed No change 16 Retail 100 21 Dollar Tree Drop down Background Mixed Arrow & Angle bracket 17 Retail 100 22 Verizon Wireless Mega drop Line Single (Line) No change 18 Retail 100 23 YUM! Brands Drop down Etc Single (Line) Arrow & Angle bracket 19 Retail 100 24 Kohl's Curtain type Background Mixed No change 20 Retail 100 27 Ace Hardware Drop down Etc Mixed Arrow & Angle bracket 21 Retail 100 28 Meijer Curtain type Background Mixed No change 22 Retail 100 31 AT&T Wireless Drop down Background Mixed No change 23 Retail 100 33 Nordstrom Mega drop Font Single (Line) No change 24 Retail 100 34 Gap Mega drop Line Mixed No change Image 25 Retail 100 37 Menards Curtain type Line Single (Area) Arrow & Angle bracket 26 Retail 100 38 Chick-Fil-A Mega drop Etc Mixed No change Image 27 Retail 100 39 PetSmart Curtain type Background Mixed No change 28 Retail 100 40 Bed Bath & Beyond Mega drop Background Single (Coloe) Font Coloe 29 Retail 100 41 L Brands Mega drop Line Mixed Etc 30 Retail 100 42 Hy-Vee Drop down Line Mixed Arrow & Angle bracket 31 Retail 100 47 O'Reilly Auto Parts Mega drop Background Single (Coloe) Arrow & Angle bracket 32 Retail 100 49 AutoZone Curtain type Font Single (Area) No change Icon Image & Icon 33 Retail 100 55 Sherwin-Williams Mega drop Background Single (Coloe) No change Image 34 Retail 100 61 35 Retail 100 62 Army & Air Force Exchange Service UltaSalon, Cosmetics & Fragrance Curtain type Font Mixed No change Curtain type Background Single (Coloe) No change 36 Retail 100 65 Wayfair Mega drop Background Mixed Arrow & Angle bracket 37 Retail 100 72 Dillard's Mega drop Line Single (Area) Font Coloe 38 Retail 100 75 Sears Holdings Drop down Line Single (Area) No change

이커머스에서정보탐색을위한네비게이션인터페이스디자인유형연구 415 No. List Rank Company 1. Menu Exposure Type Mega drop/drop down/curtain type 3-1. Manipulation 2. Menu 3-2. Manipulation Guidance Guidance Device - Hierarchy Type Device - Clickable Display Hover Interaction Line/Font/Back ground (Color, Transparency, etc.) Mixed/Single Font color/arrow and angle Tyoe(Line/Color/Ar brackets/mixed ea/bold) 39 Retail 100 77 Sephora (LVMH) Mega drop Font Single (Line) Etc 40 Retail 100 78 Ascena Retail Group Drop down Font Single (Area) Arrow & Angle bracket 41 Retail 100 79 Williams-Sonoma Drop down Font Single (Line) Font Coloe 4. Image Expression Method Image type/icon type/imag e & icon type 42 Retail 100 83 IKEA Curtain type Font Single (Line) Etc Image 43 Retail 100 85 Academy Mega drop Font Mixed No change Image 44 Retail 100 87 Discount Tire Mega drop Font Single (Coloe) No change 45 Retail 100 88 Saks Fifth Avenue / Lord & Taylor Mega drop Font Single (Line) No change 46 Retail 100 91 Michaels Stores Drop down Line Mixed Arrow & Angle bracket 47 Retail 100 93 Neiman Marcus Mega drop Font Single (Coloe) No change Image 48 Retail 100 94 Defense Commiss. Agency Mega drop Line Single (Line) No change 49 Retail 100 95 Belk Mega drop Font Mixed No change 50 Retail 100 96 Stater Bros Holdings Drop down Background Mixed Arrow & Angle bracket 51 Retail 100 98 Signet Jewelry Drop down Line Single (Area) No change 52 Retail 100 99 Shell Oil Company Mega drop Line Mixed No change 53 Retail 100 100 Jack in the Box Mega drop Background Mixed No change 54 Electronics 11 Apple Store / itunes Etc Background Single (Coloe) No change Icon 55 Electronics 101 Dell Drop down Background Single (Area) No change Image 56 Electronics 103 Bose Drop down Line Single (Coloe) No change 57 Electronics 104 Xbox Drop down Background Mixed Arrow & Angle bracket 58 Electronics 105 LG Mega drop Font Single (Line) Arrow & Angle bracket Image 59 Electronics 106 Nintendo Mega drop Background Mixed Arrow & Angle bracket 60 Electronics 107 Sony Mega drop Font Single (Coloe) Arrow & Angle bracket Icon 61 Electronics 108 HP Drop down Font Single (Area) No change Image & Icon 62 Electronics 109 JBL Mega drop Background Single (Coloe) No change Image 63 Electronics 110 Lenovo Mega drop Background Mixed No change 64 Electronics 111 ASUS Drop down Font Mixed No change 65 Electronics 112 Microsoft Surface Drop down Background Mixed Arrow & Angle bracket 66 Electronics 113 Skullcandy Mega drop Font Single (Coloe) Font Coloe Image 67 Electronics 114 Playstation Mega drop Etc Mixed Arrow & Angle bracket Icon 68 Electronics 115 Canon Mega drop Line Single (Coloe) No change 69 Electronics 116 GoPro Mega drop Background Single (Coloe) No change Icon 4. 연구결과 4.1 메뉴인터페이스유형 Table 2와 Fig. 4는메뉴인터페이스의유형의분석결과를나타낸것이다. 메뉴유형으로는메가메뉴 (Mega menu type) 가 46.4% 로가장많고, 이어서드롭다운 (Drop down) 29.0%, 스프레드 (Spread) 23.2% 순으로나타났다. 메가메뉴형은트리구조형으로한번에모든메뉴를볼수있도록표시하는형식으로, 정보량이많은경우선, 면, 아이콘등을활용하여영역을구분하는방식이다. 이방식은종합쇼핑몰보다는특정분야의제품만을유통하거나자사브랜드상품을판매하는커머스계열에서많이관찰되었고, 웹사이트의목적이주로제품판매에초점을맞추어져있어메뉴가제품카테고리를제공하는데에집중하고있는경우가많았다.

416 디지털융복합연구제 19 권제 10 호 드롭다운방식은상위노출된메뉴중하나를선택하면선택된해당메뉴의하위메뉴들만제한적으로펼쳐서제공하는형식이다. 메가메뉴방식과마찬가지로특정제품을판매하는커머스계열에서많이관찰되었고제품판매외에도브랜드의소개나정보제공등다른목적을가진메뉴들이공존하는경우가많았다. 스프레드형은정보위계에따라상위메뉴들만우선노출되고메뉴를선택하면해당메뉴의하위메뉴들이나타나점차위계를좁혀나가는형식이다. 제품수가많은종합쇼핑몰에서제품카테고리를효율적으로제공하기위한방안으로가장많이사용되고되었으나, 제품수가상대적으로적은곳에서도제품라인하나하나에집중할수있는구조를제공하기위해활용하는경우도관찰되었다. 으로사용되고있기때문에제한된공간안에서많은정 보와위계를표현해야하는경우보다는상대적으로텍스 트의양이적고위계가단순한경우에많이사용되고있 음을알수있었으며, 위계가높을수록사이즈를크게적 용하거나진하게사용하는경우가많았다. 선의경우, 메 가메뉴형태에서많이발견되었는데상대적으로큰영 역내에정보간시각적분리를위한목적으로활용되고 있었다. 또한선외에도다양한형태의아이콘요소를활 용하는경우도있었다. Table 3. Analysis result of visual classification method according to information hierarchy Fonts BG Color Line Etc Total 23 22 20 4 69 Table 2. Analysis results for menu types Mega Drop Drop Down Spread Etc Total 32 20 16 1 69 Fig. 5. Analysis result of visual classification method according to information hierarchy 4.3 사용자조작에대한상호작용방식 Fig. 4. Analysis results for menu types 4.2 정보위계에따른시각적구분방식 Table 3와 Fig. 5는정보위계에따른시각적구분방식의분석결과를나타낸것이다. 정보위계에따른시각적구분방식으로는배경색상 (BG Color) 를통한구분이 31.9% 로가장많았고, 이어서서체 (Fonts) 33.3%, 선 (Line) 29.0%, 기타요소 (Etc) 5.8% 순으로나타났다. 시각적무게를구분할수있는원리요소중가장인지도가높은색상이높은비중을차지하고있었는데, 배경색상의경우, 정보위계에따라명도차이를둔무채색으로표현하는경우가가장많았다 [14]. 서체의경우, 이미많은메뉴텍스트들이정보를전달하기위한목적 Table 4와 Fig. 6은사용자조작에대한상호작용방식의분석결과를나타낸것이다. 단일항목으로가장높은순위는선을활용한방식으로사용자가특정메뉴를선택하거나마우스를올렸을때밑줄이생성되는방식이 20.3% 로나타났다. 글자색상 (Text color) 의변화가 18.8%, 배경색상 (BG Color) 의변화가 15.4% 로나타났으며, 앞서언급된 3가지방식이혼합되어최소 2가지이상의방식이동시에보여지는혼합 (Mix) 방식이 42.0% 로가장높았다. 사용자조작에대한상호작용 (interaction) 은사용자의참여를유도하며서로간의커뮤니케이션뿐아니라행위까지도전달한다. 사용자는이러한명확한인터렉션과피드백을통해자신의선택에대한확신을할수있다 [15]. 따라서보다원활한사용자의인터렉션을위해서

이커머스에서정보탐색을위한네비게이션인터페이스디자인유형연구 417 한가지단편적인방식을취하지않고배경색상과텍스 트의컬러를함께사용하는등두가지이상의복합적인 요소를활용하여시각적으로명확하게표현하는경우가 많았다. Table 4. Analysis result of interaction for user manipulation Mix Line Text Color BG Color Text Bold Etc Total 29 14 13 11 1 1 69 른배경색상과영역간구분을명확하게할수있도록돕는선을사용하는경우가많았다. 상대적으로정보의수가적고심플한디자인은서체의크기나굵기등을통해최소한의구분을적용하고있었다. 셋째, 사용자조작에대한상호작용방식은사용자로하여금해당메뉴를선택했음을명확하게인지시킬수있도록배경컬러, 텍스트컬러, 선등다양한요소들을두가지이상동시에적용하는경우가가장많았으며, 단일항목을적용할때에는명도차이를적극적으로활용하거나대비가큰사이즈나무게감있게적용함으로써사용자가명확하게인지할수있도록한다는것을알수있었다. 본연구는이커머스를중심으로정보탐색을위한인터페이스의유형과세부요소들의선택기준이될수있는항목들을연구하여유형별특성을정의한것에의미가있으며, 본연구결과가위계와목적을고려한이커머스에서의정보서비스를제공하는기업과개인에게많은참고가되기를기대한다. Fig. 6. Analysis result of interaction for user manipulation REFERENCES 5. 결론 본연구에서는 Statista와 National Retail Federation 가선정한 100대이커머스서비스들을대상으로실제사용자에게제공하고있는정보탐색방식및사용자인터페이스의유형을조사하고, 인터페이스를구성하는시각화요소및조작에대한상호작용방식을분석한후각유형이가지는특성을도출하였다. 연구결과를정리하면다음과같다. 첫째, 정보탐색메뉴인터페이스유형은우선제공하고자하는정보의수와위계단계에따라 1차적으로구분되며정보의수와위계단계가많을수록스프레드형태를, 적을수록드롭다운과메가메뉴방식을사용하는경우가많았다. 또한제공하려는정보가다중목적을가지고있는경우에는드롭다운방식을, 단일목적에집중된경우에는메가메뉴방식의사용이많은것을알수있었다. 둘째, 정보위계에따른시각적구분방식은배경색상, 서체의변화, 선을가장많이사용하고있었으며, 한번에제공되는정보의수가많은경우에는많은양의텍스트와구분되어보일수있고, 변화에대한인지가가장빠 [1] Ministry of Trade, industry and Energy. (2020). E-commerce market status. http://www.munhwa.com/news/view.html?no=202008 0301072339343001 [2] Statista. (2021). Retail e-commerce sales worldwide from 2014 to 2024. https://www.statista.com/statistics/379046/worldwide -retail-e-commerce-sales [3] Forbes. (2021). E-Commerce Strategies: Addressing The Paradox Of Choice. https://www.forbes.com/sites/forbescommunicationsc ouncil/2021/02/19/e-commerce-strategies-addressing -the-paradox-of-choice/?sh=3576b5af352e [4] M. A. Lee & Y. J. Lee. (2014). The Effect of Product Compositions within a Web Page on Consumer Choice in Online Shopping: Focusing on Context Effects. Journal of Marketing Research, 29(4), 1-26. [5] K. H. Park. (2012). A Study on the Factory of Design Influencing Purchase Decision-making Factors at Social Commerce Sites. Journal of Digital Convergence, 10(9), 101-110. DOI : 10.14400/JDPM.2012.10.9.101 [6] J. Cardello. (2014). The Difference Between Information Architecture (IA) and Navigation. Name of Site or Board. Nielsen Norman Group. https://www.nngroup.com/articles/ia-vs-navigation

418 디지털융복합연구제 19 권제 10 호 [7] Y. J. Lee. (2015). A Study on Information Architecture & User Experience of the Smartphone. Journal of Digital Convergence, 13(11), 383-390. DOI : 10.14400/JDC.2015.13.11.383 [8] M. J. Bates. (2002). Toward an integrated model of information seeking and searching. New Review of Information Behaviour Research, 3, 1-15. [9] UX BOOTH. (2016). Searchers and Browsers: the Personality Types of UX. Name of Site or Board. https://www.uxbooth.com/articles/searchers-and-bro wsers-the-personality-types-of-ux [10] J. J. Garrett. (2002). The Elements of User Experience: User-Centered Design for the Web. San Francisco : Peachpit Press. [11] UI Patterns. (2002). Navigation. http://ui-patterns.com/patterns/navigation/list [12] K. Whitenton. (2015). Menu Design: Checklist of 15 UX Guidelines to Help Users. Nielsen Norman Group. https://www.nngroup.com/articles/menu-design [13] Laws of UX. (2021). Jakob s Law. https://lawsofux.com/jakobs-law [14] National Retail Federation. (2020). Top 100 Retailers 2020 List. https://nrf.com/resources/top-retailers/top-100-retail ers/top-100-retailers-2020-list [15] C. I. Park. (2019). Visual Weight of Interface Design. Journal of Digital Convergence, 17(12), 461-466. DOI : 10.14400/JDC.2019.17.12.461 [16] H. S. Ahn. (2017). Research on Interactive Service Design Evaluation Framework: Focused on Information Kiosk. Journal of the Korea Society of Art&Design, 20(2), 159-174. 정다영 (Da-Young, Jung) [ 종신회원 ] 2018 년 3월 : 홍익대학교국제디자인전문대학원디지털미디어디자인석사 2018 년 2월 ~ 현재 : 홍익대학교국제디자인전문대학원박사과정 관심분야 : 사용자경험디자인, 디자인시스템, 모바일 GUI 디자인 E-Mail : soda@duotone.io 김승인 (Seung-In Kim) [ 종신회원 ] 2001 년 3월 ~ 현재 : 홍익대학교국제디자인전문대학원교수 2006 년 3월 ~ 현재 : 홍익대학교디자인혁신센터센터장 관심분야 : 사용자경험디자인, 브랜드경험디자인, 서비스디자인 E-Mail : r2d2kim@naver.com