온라인 쇼핑몰 웹 네비게이션의 배색에 관한 연구 : 컬러유니버설디자인 관점에서 텍스트와 배경의 명암비를 중심으로

다국어 초록 (Multilingual Abstract)

The website should be easily accessible and usable by all regardless of disability, gender, age, nationality, etc. However, information disadvantaged people, including people with color disabilities, do not enjoy equal access to information and have to take a back seat, feeling that there are limitations in the use of the website. In particular, due to the increase in the number of users of online shopping malls as a result of the new crown pneumonia, people with color deficiency are relatively unable to recognize the information that must be confirmed when purchasing products, and most websites offer a light-to-dark ratio of 3:1 or less between content and background. As a result of this inequality, an information gap has emerged, which is the reason for the lack of compliance with the Web accessibility guidelines. Therefore, in order to realize the universal value of the Web, it is necessary to consider color universal design.
In this study, considering the problem of poor proximity of website information from the standpoint of color weakness, this study observed whether a color scheme with a contrast ratio of 4.5:1 or more based on KWCAG2.1 was applied to the web navigation of 10 online shopping malls, and suggested directions for improvement. First, The basic theories of web accessibility, web navigation and color universal design were constructed through literature review, and then the colors of web navigation viewed from various perspectives were analyzed for Coupang, 11th Street, Gmarket, Auction, Interpark, Danawa, Shinsegae, Timon, Lotte On, and Wemakeprice. Based on the analysis results, a color scheme of 4.5:1 or more was proposed from all perspectives.
Therefore, the conclusion of this study are as follows.
First, among the 10 online shopping malls, only Auction and Shinsegae were found to meet the criteria of 4.5:1 or higher in contrast ratio, which is the 2.1 standard of KWCAG. Although compliance with web accessibility guideline is obligatory, many websites still did not recognize this and used color scheme that did not take into account users with various visual characteristics. Therefore, in order to bluid a color universal design environment, it is necessary to establish a management system and clear guidelines for color and color matching.
Second, all 10 online shopping malls applied color changes to LNB's accessible information, but only half of the shopping malls in the GNB used color changes or the icon bar feature. It was noted that more emphasis was placed on LNBs that contained more information about the shopping malls than GNB. While LNB contain the main categories of shopping centers, GNB also contain important content for web pages, so GNB also need to include a function to help identify information.
Third, the colors used by the 10 malls are R, GY, BG, PB, and black, with the R series being the most frequently used at 39%. In case of R-series colors, D-type and P-type visually look green, so considering this situation, we should limit red as the main color and try to use all colors that have less visual color perception changes.
Fourth, a color scheme to which a clear brightness difference is applied was proposed for the Muncell 20 color ring. First, in the case of a white background of RGB 255, 255, 255, 255, the colors of 10G, 5BG, 5B, 10B, 5PB, 10PB, 5P, 10P, and 5RP maintained a contrast ratio of 4.5:1 or more. When not using a white background but two different color schemes, 10R and 5PB, 5YR and 5BG, 10YR and 5BG, 10YR and 5B, 10YR and 10YR and 5B, 10YR and 5PB, 5Y and 5BG, 5Y and 5B, 5Y and 10B, 5Y and 5PB, 5Y and 10PB, 10Y and 5BG, 10Y and 5B, 10Y and 10B, 10Y and 5PB, 10Y and 10PB, etc. color scheme in the contrast ratio of 4.5:1 or more, so the use of such a clear difference in lightness color scheme is correct
In the future, research on the color of all websites considering the color universal design should be continuously conducted, and the establishment of management measures for equal access to information is also required. It is hoped that an Internet environment will be created in a digital information society where all members of society can enjoy equal accessibility as soon as possible.

국문 초록 (Abstract)

웹사이트는 장애의 유무와 성별, 나이, 국적 등에 상관없이 모든 사람들이 원하는 정보에 쉽게 접근하고 이용할 수 있어야 한다. 그럼에도 불구하고 색약자를 비롯한 정보취약계층은 평등한 정보의 접근성을 누리지 못하고 뒤편에 물러나 있어야 하는 존재가 되었고 이들은 웹사이트의 이용에 한계를 느끼고 있다. 특히 코로나 19로 인해 온라인 쇼핑몰의 이용자수가 늘어나면서 색약자들은 상품 구매 시 반드시 확인해야 할 정보를 상대적으로 인식하지 못하고 있으며 다수의 웹사이트가 콘텐츠와 배경의 명암비를 3:1 이하로 제공하고 있었다. 이러한 불평등으로 인해 정보격차가 나타나고 있었으며 이는 웹 접근성 지침의 미준수가 원인이 된다. 따라서 웹의 보편적 가치 실현을 위해서는 컬러유니버설디자인이 고려되어야 한다.
본 연구는 색약자의 입장에서 웹사이트 정보의 접근성이 떨어진다는 문제점을 고려하여 10개 온라인 쇼핑몰 웹 네비게이션을 대상으로 KWCAG 2.1 기준인 명암비 4.5:1 이상인 배색을 적용하였는지를 살펴보고 개선 방향을 제안하였다. 먼저 문헌고찰을 통해 웹 접근성, 웹 네비게이션 및 컬러유니버설디자인의 기본 이론을 구축하였고 다음으로 쿠팡, 11번가, G마켓, 옥션, 인터파크, 다나와,신세계, 티몬, 롯데온, 위메프를 대상으로 다양한 시각에서 보이는 웹 네비게이션의 배색을 분석하였다. 분석 결과를 바탕으로 모든 시각에서 4.5:1 이상인 배색 방안을 제안하였다.
따라서 본연구의 결론은 다음과 같다.
첫째, 10개의 온라인 쇼핑몰 중 옥션과 신세계만 KWCAG 2.1기준인 명암비 4.5:1이상의 기준에 적합한 것으로 나타났다. 웹 접근성 지침의 준수가 의무화 되었음에도 불구하고 여전히 많은 웹사이트는 이를 인식하지 못하고 있고, 다양한 시각적 특성을 가진 사용자들을 고려하지 않은 배색을 사용하고 있었다. 따라서 컬러유니버설디자인의 환경 구축을 위한 컬러와 배색에 대한 관리 제도 및 명확한 가이드라인의 수립이 요구된다.
둘째, 10개의 온라인 쇼핑몰 모두 LNB의 접근중인 정보에 컬러의 변화를 적용시켰지만 GNB에는 절반의 쇼핑몰만 컬러의 변화나 아이콘 바의 기능을 기재하였다. 이는 GNB보다 쇼핑몰의 정보가 많이 담긴 LNB를 더욱 중시한 것으로 파악된다. LNB에는 물론 쇼핑몰의 주요 카테고리가 담겨있지만 GNB에도 웹페이지의 중요한 콘텐츠가 담겨져 있기에 GNB에도 정보의 식별을 도와주는 기능의 기재가 필요하다.
셋째, 10개의 쇼핑몰에 사용된 컬러는 R, GY, BG, PB, 블랙 등이 있었는데, 이중 R계열의 사용빈도가 39%로 가장 높았다. R계열의 컬러인 경우, D형과 P형의 시각에서 녹색으로 변색되어 보이기에 이러한 상황을 고려하여 빨간색을 메인컬러로 사용하는 것을 제한해야 하며 되도록 모든 시각에서 색 지각 변화가 적은 컬러를 사용해야 한다.
넷째, 먼셀 20 색상환을 대상으로 명확한 명도차가 적용된 배색을 제안하였다. 먼저 RGB 255,255,255의 화이트 배경일 경우, 10G, 5BG, 5B, 10B, 5PB, 10PB, 5P, 10P, 5RP의 컬러가 명암비 4.5:1 이상을 유지하였다. 화이트 배경이 아닌 두 가지 컬러로 배색할 경우, 10R과 5PB, 5YR과 5PB, 10YR과 5BG, 10YR과 5B, 10YR과 10B, 10YR과 5PB, 10YR과 10PB, 5Y와 5BG, 5Y와 5B, 5Y와 10B, 5Y와 5PB, 5Y와 10PB, 10Y와 5BG, 10Y와 5B, 10Y와 10B, 10Y와 5PB, 10Y와 10PB 등의 배색이 명암비 4.5:1 이상으로 나타났기에 이와 같은 명확한 명도차이가 적용된 배색의 사용이 용이하다.
향후 컬러유니버설디자인을 고려한 전체 웹사이트의 컬러에 관한 연구가 지속적으로 진행되어야 하며 평등한 정보의 접근성을 위한 관리 방안의 수립도 함께 요구된다. 디지털 정보화 사회 속 하루빨리 모든 사회구성원이 평등한 접근성을 누릴 수 있는 인터넷 환경이 조성되길 기대한다.

목차 (Table of Contents)

• 제 1 장 서론 1
• 1.1 연구의 배경 및 목적 1
• 1.2 연구의 범위 및 방법 3
• 1.3 연구의 구성 4
• 제 2 장 이론적 고찰 5
• 2.1 웹 접근성의 이해 5
• 2.1.1 인터넷의 기원 5
• 2.1.2 웹의 기원 6
• 2.1.3 월드 와이드 웹 9
• 2.1.4 웹 접근성의 정의 11
• 2.1.5 웹 접근성 법률 및 제도 12
• 2.1.6 웹 접근성 지침 15
• 2.2 웹 네비게이션의 이해 31
• 2.2.1 웹 네비게이션의 개념 31
• 2.2.2 웹 네비게이션의 종류 32
• 2.2.3 웹 네비게이션의 기능 34
• 2.3 컬러유니버설디자인의 이해 35
• 2.3.1 유니버설디자인의 개념 35
• 2.3.2 컬러유니버설디자인의 개념 37
• 2.3.3 컬러유니버설디자인기구의 색각 명칭 39
• 2.3.4 컬러유니버설디자인기구의 가이드라인 42
• 2.4 컬러유니버설디자인의 연구동향 44
• 제 3 장 온라인 쇼핑몰 웹 네비게이션의 배색 분석 49
• 3.1 분석 개요 49
• 3.2 온라인 쇼핑몰 웹 네비게이션 배색 분석 결과 52
• 3.2.1 쿠팡 52
• 3.2.2 11번가 57
• 3.2.3 G마켓 63
• 3.2.4 옥션 67
• 3.2.5 인터파크 71
• 3.2.6 다나와 76
• 3.2.7 신세계 81
• 3.2.8 롯데온 85
• 3.2.9 티몬 89
• 3.2.10 위메프 93
• 3.3 분석결과의 소결 97
• 3.4 웹 네비게이션 배색의 개선 방향 102
• 제 4 장 결론 및 제언 107
• 4.1 연구의 결론 107
• 4.2 연구의 한계 및 제언 109
• 참고문헌 110
• 국문초록 113
• Abstract 116