Home > Vol. 28, No. 2

The Preference of Icon Simplification Levels for Online Shopping Malls Depending on the User Group
사용자 유형에 따른 온라인 쇼핑몰 카테고리 아이콘의 단순화 단계 선호도
  • Geon Dong Kim : Major in Digital Media Design, Hongik University, Sejong, Korea
  • 건동 김 : 홍익대학교 디지털미디어디자인전공, 세종, 대한민국
  • Juhyun Eune : Intermedia Lab, Seoul National University, Seoul, Korea
  • 주현 윤 : 서울대학교 인터미디어랩, 서울, 대한민국

Background Recent icon visualizations tend to only show minimal and flat design style. This phenomenon is caused by designers who only follow design trends. The purpose of this study is to find out the customer’s icon simplification preference by their age, sex, design education and products. The findings would be useful for influencing the online shopping mall’s category icon design.

Methods This study consisted of two process and they are the pilot test and an experimental investigation. The pilot test reconstructed icon simplification cases based on documents and it was conducted on 60 people. For the experimental investigation, active seniors in their 50s were added to the subjects' category and the experiment was conducted on 120 people. The findings on age, gender, design education and products were applied on the shopping malls.

Results For the gender investigation, male subjects preferred photos and female subjects preferred line drawings. In the age investigation, people in their 50s preferred photos more than those in their 20s. For the design educational aspect, design-related students preferred line drawings more than non-design-related people. For the product investigation, subjects preferred photos and realistic illustrations for the processed food.

Conclusion This study suggests the preferences of shopping mall icon simplification levels by age, gender, design education and products. The findings show that the designers have to be more concerned about simplification levels by products and customers. This study derives design significance from the preference of icon simplification levels for online shopping malls.

Abstract, Translated

연구배경 최근 아이콘디자인의 표현방식을 보면 많은 디자이너들이 디자인트렌드에 이끌려 미니멀 스타일을 아이콘의 일관된 선호 표현방법으로 추구하는 경향이 있다. 이에 본 연구는 온라인 쇼핑몰의 카테고리 아이콘 디자인에 있어서 나이, 성별, 디자인 교육여부, 상품에 따른 아이콘 단순화단계의 선호도를 알아본 후 쇼핑몰 유형별 카테고리 아이콘의 적합한 단순화 단계를 제안해보는데 목적이 있다.

연구방법 본 연구는 파일럿 테스트와 조사실험의 두 단계의 프로세스로 구성되어 있다. 파일럿 테스트의 경우 문헌연구를 바탕으로 사례를 재구성한 아이콘 단순화 단계 설문을 20대 대상으로 시행하였으며, 조사실험은 유형별 5위까지의 쇼핑몰에서 카테고리 아이콘을 선정, 제작한 후 액티브시니어 층을 추가하여 총 120명에게 시행하였다. 설문조사 후 나이, 성별, 디자인 교육여부, 상품에 따른 단순화 단계 선호도를 분석한 후 이를 쇼핑몰 유형에 적용해보았다.

연구결과 별의 경우 남성의 경우 포토를, 여성의 경우 라인드로잉을 선호하였고, 세대의 경우 50대 액티브시니어가 20대 보다 포토선호 경향을 보였다. 디자인 교육여부의 경우 비전공자일수록 포토, 전공자일수록 라인드로잉의 선호했다. 상품을 중심으로 보았을 때에는 가공식품의 경우는 사진 및 일러스트를, 그 외의 경우는 상품에 특성을 두는 단순화가 좋음을 발견했다.

결론 본 연구를 통해 성별, 나이, 디자인 교육 여부, 상품에 따라 쇼핑몰 카테고리 아이콘 단순화 단계의 선호도 차이를 확인할 수 있었다. 이는 향 후 디자이너가 쇼핑몰 아이콘의 디자인을 할 때 상품과 대상 사용자에 따라 단순화 단계를 신중히 정의해야 함을 의미하며 본 연구가 선호도 차이에 따른 쇼핑몰 유형별 카테고리 아이콘의 적합한 단순화 단계를 제안하였다는데 의의를 두고자 한다.

Keywords:
Icon Design, Online Shopping mall, Simplification level, Preference, 아이콘디자인, 온라인쇼핑몰, 단순화단계, 선호도.
pISSN: 1226-8046
eISSN: 2288-2987
Publisher: Korean Society of Design Science
Received: 18 Dec, 2014
Revised: 08 Jan, 2015
Accepted: 16 Jan, 2015
Printed: May, 2015
Volume: 28 Issue: 2
Page: 183 ~ 197
DOI: https://doi.org/10.15187/adr.2015.05.28.2.183
Corresponding Author: Juhyun Eune (jheune@snu.ac.kr)
PDF Download:

Citation : Kim, D., & Eune, J. (2015). The Preference of Icon Simplification Levels for Online Shopping Malls Depending on the User Group. Archives of Design Research, 28 (2), 183-197.

This is an Open Access article distributed under the terms of the Creative Commons Attribution Non-Commercial License (http://creativecommons.org/licenses/by-nc/3.0/), which permits unrestricted educational and non-commercial use, provided the original work is properly cited.

1. 서론
1. 1. 연구의 배경 및 목적

아이콘은 사물의 특징을 나타내는 유용한 시각화 표현방식으로 웹디자인, 인포메이션디자인 및 GUI디자인, 그리고 그 외에 여러 장르의 디자인 결과물에 다양한 표현방식으로 제작되고 있다. 하지만 최근 아이콘디자인의 표현방식을 보면 많은 디자이너들이 대상 사용자 및 미디어의 특징, 그리고 해당 아이콘의 사물별 차이를 크게 고려하지 않은 채 디자인트렌드에 이끌려 미니멀(Minimal)과 플랫 디자인(Flat Design)스타일을 아이콘의 일관된 선호 표현방법으로 추구하는 경향이 있다. 본 연구의 대상인 온라인 쇼핑몰의 경우를 볼 때 소비자에게 상품정보검색이 용이하게 상품을 카테고리별로 분류해주는 정보 분류체계가 더욱 중요해지고 있고, 많은 온라인 쇼핑몰이 이 카테고리별 분류체계에의 직관성을 돕기 위해 아이콘 디자인을 적용하고 있다. 하지만 쇼핑몰의 카테고리 아이콘의 경우에도 마찬가지로 유형별 대상 사용자 및 해당 사물별 아이콘의 차이를 크게 고려하지 않은 채 단순화 단계의 정책 없이 트렌드 위주로 디자인되는 경향을 볼 수 있다. 이에 본 연구는 온라인 쇼핑몰의 카테고리 아이콘 디자인에 있어서 최근 디자이너의 선호 경향대로 “나이, 성별, 디자인 교육여부, 상품의 특성에 관계없이 공통적으로 단순화된 디자인을 선호하는가?”의 질문에서 시작되었으며, 이를 분석해보는데 1차 목적이 있다. 아울러 카테고리별 사물 아이콘들을 개별이 아닌 함께 묶어서 제시했을 때 단순화 단계의 표현 선호도와, 컨텍스트(Context)인 배경 요소가 달라질 때 아이콘 단순화단계의 선호도를 함께 파악해 보고자 하였다.

1. 2. 연구방법 및 범위

본 연구는 크게 사전 파일럿 테스트(Pilot Test)와 조사실험의 두 단계의 프로세스로 구성되어 있다. 파일럿 테스트 시점에는 문헌조사를 바탕으로 사물별 아이콘의 단순화단계 비주얼 리서치 결과물을 재구성하여 진행하였다. 대상 사물 중 항목이 겹치거나 단순화의 일관성이 부족한 사물을 1차로 선별하여 인공물 및 자연물 포함 최종 15종을 선별하였다. 이는 아이콘의 시각적 표현 중 형태표현의 단순성 정도를 단계적으로 세분화시킨 결과물이며, 보정 후 20대 디자인 전공 및 비전공학생을 대상으로 지면 설문을 진행하여 분석을 시행하였다.

파일럿 테스트를 통해 유의미한 결과를 도출하였으나 20대에만 한정된 타깃그룹의 한계와 별도 아이콘의 제작 없이 사례를 바탕으로 설문을 구성하여 단순화 규칙의 일관성이 다소 부족했던 한계가 있었다. 따라서 조사실험의 경우 20대와 세대차이가 확연한 50~64세의 액티브시니어(active senior)그룹(이하 50대라 함)을 설문대상에 추가함으로써 20대에 국한되지 않은 연령 차이가 큰 세대 간 단순화 선호도를 비교하여 파악해보고자 하였다. 추가 설문대상인 액티브시니어의 정의에 대한 선행연구를 보면 이현정(2013), 박찬경(2011)을 포함한 여러 문헌에서 고학력과 많은 지식, 그리고 재산을 갖추고 이를 바탕으로 이전의 중장년층 세대에 비해 더욱 적극적이고 능동적인 사고 및 소비와 다양한 문화생활을 누리고자 하는 특징을 가진 세대라고 정의하고 있다. 이들은 주로 50~64세의 연령층으로 구성되어 있고 문화적으로도 성숙하면서도 세련된 성향을 지니고 있으며, 다양한 여가생활인 뮤지컬이나 영화관람 인터넷 쇼핑 등 젊은이들의 문화를 어색해하지 않는 특성을 지니고 있다고 언급하고 있어 온라인 쇼핑도 즐기며 20대와 세대 간 차이가 큰 본 연구의 비교 대상자로서 적합함을 알 수 있다. 또한 파일럿 테스트 시 성비가 다소 달랐던 남녀 성비를 세대별, 디자인 전공여부별로 정확히 나누어 성별에 따른 선호도 차이를 분석해 보고자 하였다. 연구의 범위를 정의하기 위해 본 연구의 대상인 온라인 쇼핑몰의 유형을 선행연구를 통해 분석해 보았는데 김건아(2012)는 상품거래에 있어 미국의 eBay나 우리나라의 옥션과 같은 오픈마켓과 단일상점, 종합쇼핑몰의 입점형태인 몰인몰(mall in mall)방식, 거래나 운영방식의 개념구분 경계가 약화되고 있는 소셜커머스 방식도 등장하여 활발히 사용자층을 확보하고 있다고 언급하고 있다. 조사실험에서는 이와 같이 분화되고 있는 쇼핑몰의 문헌연구를 바탕으로 2014년 10월 둘째 주 기준 온라인 순위사이트의 쇼핑몰 유형별 분류 체계 중 대형마트 쇼핑몰, 소셜커머스, 오픈마켓, 종합쇼핑몰의 4개 유형에서 리스트를 분석해보았고 Figure 1과 같이 각 5위까지 순위를 차지한 쇼핑몰을 대상으로 선정하였다.


Figure 1 Types of online shopping malls with ranking

이후 해당 쇼핑몰의 각 카데고리 대표아이콘을 분석대상으로 정의하여 선정된 아이콘을 인공물과 자연물 기준으로 분류한 후 색상을 배제한 형태적 측면에서 포토에서 라인드로잉까지 단순화단계의 원칙에 맞춰 최종 16종의 아이콘을 직접 제작하였다. 조사실험을 위한 사전 설문은 지면 설문을 위해 이미지가 담긴 문항의 출력 해상도 체크 및 문항 구성의 검증을 위한 준비단계로 진행하였고, 이후 설문 항목의 수정 및 추가 단계를 거쳐 2014년 10월 6일~2014년 10월 22일까지 각 대상그룹별 대상자를 방문하여 지면 설문방식으로 시행하였다. 설문조사 이후 문항별 수치 분석과 함께 해석을 제시하였다. 연구범위 및 방법을 정리한 전체 연구의 흐름도는 Figure 2와 같다.


Figure 2 Flowchart of the study
2. 아이콘의 단순화 단계
2. 1. 아이콘의 개념 및 특징

아이콘은 어떤 생각이나 개념, 대상 등을 나타내는데 사용되는 상징이나 그림으로 사용되는 문자, 혹은 시각적 기호로서 그리스어 ‘eikoon’에서 유래되었다(김성훈, 2011). 아이콘은 그래픽을 통해 전달하려는 정보의 의미와 함께 시각적 표현을 동시적으로 인식하게 하여 기존에 사용되던 문자 기호보다 빠르고 쉽게 정보를 전달할 수 있는 특징이 있다. 아이콘은 사용자에게 아이콘과 연결된 기능과 의미를 시각화된 정보로 쉽고 정확하게 전달할 수 있어야 하며 사용자의 시선을 유도하는 역할을 수행해야 하기에 가장 기본적인 아이콘의 제작 사항은 전체의 흐름을 깨지 않고 시선을 유도하며 심미적으로 조형성이 있어야 한다(Malamed, 2011). 많은 아이콘이 실제의 모양과 흡사하게 닮지만 관련성 있는 의미를 갖는 것도 있고 상징적 가치를 담은 것도 있다. Rogers(1989)의 경우 아이콘이 표현하는 개념을 어떻게 묘사했느냐에 따라 실제 대상을 유사하게 묘사하는 유사아이콘(Resemblance icons), 포크와 나이프로 레스토랑을 표현하는 전형아이콘(Exemplar icons), 와인 잔의 깨진 표현으로 깨지기 쉬운 패키지 내용물을 의미하는 상징아이콘(Symbolic icons), 그리고 출입금지와 같이 의미가 학습되어져야 이해할 수 있는 임의적 아이콘(Arbitrary icons)으로 구분하였는데 이는 기호학자 Peirce의 도상(Icon), 지표(Index), 상징(Symbol)의 분류체계와 비교해볼 때 3단계가 아닌 4단계로 분류되어 도상을 뺀 지표와 상징 쪽이 더 세분화 되어 있음을 알 수 있다. 본 연구는 쇼핑몰의 여러 상품군에 대한 카테고리 아이콘에 대한 연구로 두 학자의 관점에서 볼 때 대상과 상응하는 연관성이 있도록 외형이 실물과 닮아있게 디자인된 도상(Icon)적 유사아이콘(Resemblance icons)이 연구대상에 해당된다.

2. 2. 사용목적에 맞는 사실감(Reality)의 생략

우리는 어떤 이미지를 볼 때 그 이미지를 대략적으로 살펴보게 된다. 이 때 우리는 어떤 이미지에 대상이 적절히 복제되듯이 표현되면 그것을 사실감이 살아 있는 것으로 여기게 된다. 그러나 모든 이미지의 재현은 비록 사진일지라도 실제의 사물에서 어느 정도 벗어난 것이라고 볼 수 있다. Massironi(2001)는 모든 그래픽 표현은 그것의 디테일한 표현과 비례 등에서 얼마나 실제와 가까운가에는 상관없이 그것의 해석에 관한 문제라고 하였다. 그래서 그래픽은 언제나 해석을 돕는 형식으로 보여줘야 한다고 하였다. 실루엣, 라인드로잉과 같은 저밀도 그래픽은 일반적인 지식 내용과 같이 설명이 필요하거나 메시지의 효과를 신속히 강화할 때 유용하다. 예를 들어 가이드가 많이 필요한 초보자용 요리책에서는 고밀도 이미지의 사용을 줄이는 것이 좋고, 사진 및 실사와 같이 묘사된 고밀도 이미지는 경험이 많은 요리사들을 위한 요리책에 더 유용하다고 하였다(Malamed, 2011). 또한 Kress(2006)는 자연스러운 이미지의 경우 그것이 어떤 것이든 상관없이 디테일이 있다고 말했다. 바꿔 말하면 사실감이 생략된 이미지는 사실적 묘사가 부족하다는 것과 같고 일반적으로 사실감을 줄인 디자인은 메시지 전달의 필수적인 요소에 중점을 두고 추상적 요소들을 선택해가는 과정이라 하였다. 사실감 있는 이미지는 그 자체적으로, 그리고 사실감이 간략화되는 과정을 거쳐 최종 디자인에서 최적화되어야 한다고 하였다. Malamed(2011)의 경우 사용자가 시스템에 대한 지식을 실제 시스템에 적용해서 이해할 필요가 있을 때는, 간략화한 그래픽보다 사실감 있게 묘사한 그래픽이 더 효과적일 수 있다고 하였다. 과감한 사실감의 생략이 오히려 사용자의 이해를 방해할 수 있기 때문이다. 이를 통해 우리는 때로는 복잡한 것을 단순하게 하기 보다는 정보가 잘 이해되도록 명쾌한 복잡성을 추구하는 것이 더 유효함을 알 수 있다. 이와 같이 의사소통을 위한 메시지, 수용자의 특성, 내용의 적정성은 디자인을 할 때 이미지를 얼마나 정밀하게 할 것인가에 영향을 주며, 이는 미니멀과 같이 한 표현 경향으로만 치중되지 않고 사진에서 단순화된 아웃라인의 표현에 이르기까지 목적에 맞게 시각화의 해석이 되게끔 적절히 사용되어져야함을 의미하기도 한다. 그러므로 어느 수준으로 요소를 생략하고 특징을 강조하여 의미를 전달할 것인지 디자이너는 표현적 측면에서 심미성과 트렌드에만 치우치지 말고 사물별 단순화 표현단계를 신중하게 결정해야 한다.

2. 3. 아이콘의 형태적 단순화의 단계

아이콘의 형태는 사물의 필수적인 특징이나 의도를 스타일화하고 매우 정제된 표현을 지녀야 한다. 이 아이콘의 형태는 아이콘이 의미하는 것이 무엇인지를 결정적으로 알려주는 의미 기호로 작용하기 때문에 컬러나 애니메이션, 문자와 같은 부가적 요소가 적용되지 않는 상황에서도 그것이 의미하는 바가 즉각적으로 인지되고 정확히 표현할 수 있어야 한다. 시각화 방식에서 형태의 구체성이 증가함에 따라서 기능의 이해도가 높아진다는 입증된 실험이 있지만, 구체성을 높이면 시각적으로 복잡해질 수도 있기 때문에 간결성과 균형을 함께 추구해야 할 필요가 있다(Malamed, 2011). 이주환외(2003)는 아이콘의 시각화를 결정짓는 중요한 시각적 구성요소들을 대상의 크기, 색상, 형태, 공간적 구조, 부분의 수 등을 들었는데, 그 중 아이콘으로 표현된 대상의 단순화 정도를 어느 정도 수준으로 할 것인가가 기능수행에 주요 고려요인이라 하였다. Figure 3의 경우는 카툰과 같이 라인드로잉을 주로 이용한 단순화의 단계로 사진, 일러스트, 라인드로잉의 단계로 컬러 및 명암의 생략, 라인의 생략을 통해 단순화를 시도하고 있다(Cairo, 2012).


Figure 3 Simplification process based on line drawings

Figure 4의 경우는 사진, 일러스트, 라인드로잉, 실루엣의 단계로 구성된 단순화의 시도 사례이다. 네 번째 실루엣의 경우 내부를 판단할 수 없게 전체 음영 처리되어 플로피디스켓과 같이 외부 윤곽에 특징이 없는 사물은 인지하기가 어려울 수 있다(이주환외, 2003).


Figure 4 Simplification process including Silhouette

Figure 5의 모나리자의 경우는 사진, 일러스트, 실루엣, 라인드로잉의 순서로 단순화된 단계로, Figure 4에서 네 번째의 실루엣 표현이 세 번째 단계에 있으며 사물을 인지하기 힘들 수 있는 전체 음영 실루엣이 아니라 사물의 특징의 일부가 나타나게 실루엣화 되어있다.


Figure 5 Simplification process of Mona Lisa

파일럿 테스트 시 아이콘 유형을 비주얼 리서치한 결과 외형만의 특징으로 형태인지가 불가능할 수 있는 Figure 4의 실루엣 표현보다 다양한 사물에 적용시킬 수 있는 아이콘의 실루엣 표현으로서는 사물을 일부를 암시할 수 있는 Figure 5의 실루엣 표현이 적절하므로 본 연구의 단순화의 단계는 사실감의 순서로 보았을 때 사진, 사실적 표현의 일러스트, 실루엣, 라인드로잉의 순서로 구성된 Figure 5의 체계를 따랐다. Malamed(2011)는 단순화 과정은 사실감의 밀도를 줄이는 것과 같다고 하였다. 표현 측면에서 이에 대한 각 단순화 단계의 설명을 보면 사진 및 실제 모습에 가깝게 묘사된 일러스트와 같은 사실성이 높은 이미지는 완전한 자연색과 사실적인 3차원 이미지이며 이는 색의 미묘함이나 촉감, 그림자, 깊이감, 디테일 등이 사실적 표현 방법에 포함된다. 실루엣은 사실감을 최소화하는 효과적인 방법 중 하나로 어떤 형태를 외곽선으로 형상화하고 그 안쪽 면을 질감이나 디테일이 없는 한 가지 색으로 생략하여 채우는 기법을 말한다. 형태의 깊이에 대한 측면이 없고 외곽적 형태 정보만을 제공하지만 음영 세계를 재현하여 신비한 느낌을 전달하기도 한다. 잘 디자인된 실루엣은 최소의 인지적 노력으로 사물을 이해할 수 있는 압축된 정보 표현과 같은 것이지만 실루엣은 폐쇄적이고 사물의 미묘한 형태가 없기 때문에 인지하기 어려울 수도 있다. 라인 드로잉의 경우는 사물의 외곽형태를 단순한 선으로 드로잉한 것으로 사실감을 줄이고 사물을 몇 개의 선으로 필수적인 특징만을 묘사하는 방법이다. 이미지나 사물을 대략적으로 볼 때 대부분의 시각적 작용은 경계선 부분에서 일어난다고 한다. 그러므로 외곽선만 묘사해도 그 형태 정보를 전달하기에는 충분하며 실루엣과 마찬가지로 선의 모양은 사물을 인식하는 데 도움을 준다. 선을 이용한 시각화는 단순하게 보이지만 많은 양의 정보를 전달할 수 있다. 이와 같이 사진이나 묘사된 일러스트의 경우 색의 미묘함이나 촉감, 그림자, 깊이감, 디테일 등이 사실감을 나타내는 요소이지만 반면 실루엣, 라인 드로잉과 같은 이미지는 대상물이 인지될 수 있을 정도의 유사 상태와 적은 시각적 요소만을 사용함을 알 수 있다.

3. 온라인쇼핑몰의 카테고리 아이콘의 단순화
3. 1. 온라인쇼핑몰의 카테고리 아이콘의 선정

인터넷쇼핑몰 비즈니스의 성공을 위해선 좋은 상품을 좋은 가격에 좋은 배송 서비스로 제공하는 것이 무엇보다 중요하겠지만, 사용자의 관심을 유도하고 유인할 수 있는 사이트의 품질개선 또한 중요할 것이다. Jahng et al.(2000)은 사이트 설계의 중요성을 말하면서 차별적인 디자인 특성을 갖추어야 한다고 주장하였고, Bai et al.(2008)은 가상환경에서 장기간의 고객가치를 위해서는 이용자에게 잘 인식된 쇼핑몰사이트를 통한 이용자의 만족과 충성도를 설명하였다. 아이콘을 중심으로 한 카테고리별 분류체계에 따른 상품정보의 직관적 제공은 온라인 쇼핑몰의 고객만족 요소로이어지며, 이는 사이트 사용성의 경쟁우위 및 판매량의 증가의 한 요인이 될 것이다.

본 연구에서는 설문조사를 위한 카테고리 아이콘 선정을 위해 앞서 언급한 대형마트 쇼핑몰, 소셜커머스, 오픈마켓, 종합쇼핑몰의 4개 쇼핑몰 유형의 카데고리 아이콘을 함께 비교하여 유사 카테고리 구조를 분석하였다. Figure 6과 같이 이 분석과정에서 현행 대형마트 쇼핑몰은 브랜드까지 들어간 상품 포토이미지의 아이콘을, 소셜커머스는 실사에 가까운 사실적 일러스트를, 오픈마켓은 라인드로잉을, 종합쇼핑몰은 아이콘을 자제한 텍스트기반 카테고리 표현방식을 주로 쓰고 있음을 발견할 수 있었다. 각 쇼핑몰의 카테고리 분류체계를 교차 분석하여 크게 인공물과 자연물로, 그리고 각각은 기호와 일용으로 나누어 인공물은 패션잡화, 일용제품으로 자연물은 가공식품과 자연원재료로 나눈 후 중복되는 총 16종의 아이콘을 도출하였다.


Figure 6 The selection process of shopping mall icons for the survey

본 연구는 형태적인 측면의 단순화의 선호도 조사를 위하여 시각적 주목률 측면의 잡음이 생길 수 있는 모든 아이콘의 컬러는 배제하는 제작 원칙을 따랐다. Figure 7의 왼쪽 이미지와 같이 실루엣, 라인드로잉 등이 순서의 일관성 없이 섞여있던 파일럿테스트의 설문문항을 오른쪽 이미지의 제작사례 예시와 같이 실험조사 연구용 설문문항은 전체 아이콘을 다시 제작하여 사물 간 단순화의 순서를 일관되게 일치시켰다. 아울러 인공물은 인공물끼리, 자연물은 자연물끼리 사고하는 설문의 편중된 답변을 우려하여 인공물과 자연물의 질문을 섞어서 문항을 구성하였다.


Figure 7 Design revision of icons for the consistent step of simplification

Figure 8은 제작한 16종 아이콘 중 하나인 유모차의 디테일 이미지 예시로 포토, 일러스트, 실루엣, 라인드로잉의 순서로 전체 사물 간 단순화의 일관성을 최대한 맞춰가며 제작하였다.


Figure 8 Detailed image of simplified design
4. 아이콘 단순화 유형의 유저그룹별 선호도 설문
4. 1. 설문 설계

본 실험조사 이전 파일럿테스트에서 20대에 국한된 한계점, 설문 대상 남녀 성비의 불균형으로 인한 성별 선호도 분석의 한계점이 있었다. 이와 같은 한계점을 보완하여 실험조사에서는 20대에 한정되었던 타깃그룹에 20대와 세대차이가 확연한 50대그룹을 설문대상에 추가함으로써 세대차이가 큰 타깃 그룹 간 단순화단계 선호도를 비교해보고자 하였다. 아울러 설문대상 남녀 성비를 세대별, 전공여부별로 정확히 나누어 성별에 따른 선호도 차이를 분석해 보고자 하였다. 이와 같은 기준으로 Table 1과 같이 설문대상을 분류하여 총 120명을 대상으로 지면설문을 시행하였다.

Table 1
Classification of the participants for the survey

20대 50대
전공남 전공여 비전공남 비전공여 전공남 전공여 비전공남 비전공여
15명 15명 15명 15명 15명 15명 15명 15명
60명 60명
총 120명

지면 설문을 위해 출력 해상도 및 문항 구성의 검증 단계와 수정 및 문항 재구성 단계를 거쳐 2014년 10월 6일~22일까지 각 대상그룹별 대상자를 방문하여 지면 설문방식으로 시행하였다. 설문조사 이후 문항별 수치 분석과 함께 해석을 제시하였다.


Figure 9 Detailed image of simplified design
4. 2. 설문 문항

설문 문항은 크게 세 가지 유형으로 분류된다. 첫 번째 유형은 아이콘의 단순화 단계 선호도를 질문하는 설문으로 포토에서 아웃라인까지 4단계의 단순화단계 원칙에 맞춰 총 도출된 16종의 아이콘을 직접 제작하여 Figure 7과 같이 4지선다 형태로 구성하였다.

두 번째 설문 유형은 개별사물이 아닌 여러 사물을 묶어서 볼 때의 아이콘 단순화 선호도 조사를 위한 설문으로 Figure 10과 같이 (1)그룹은 조합된 사물이 모두 포토일 때, (3)그룹은 조합된 사물이 모두 라인드로잉 표현의 아이콘일 때, 그리고 (2)그룹은 포토, 일러스트, 실루엣, 라인드로잉이 섞여 있을 때로 나누어 구성하였다.


Figure 10 Survey question about group based icon

세 번째 유형은 컨텍스트(Context)인 배경 요소에 따른 아이콘 단순화단계의 선호도를 조사하기 위한 설문으로 왼쪽은 하단에 텍스트로만 구성하고, 오른쪽은 상품 사진으로 구성하여 선호 단순화 단계를 설문하였다.


Figure 11 Survey question about preference of icon based on the context
4. 3. 설문 결과 및 해석

Figure 12 Icon simplification preference by their age, sex, design education

첫 번째 유형의 설문 결과는 Figure 12와 같이 선호도가 조사되었다.

20대 디자인 전공자의 경우 여성의 경우 ‘도너츠’와 ‘식빵’을 제외하고는 모든 사물별 1순위 선호도가 4번 라인드로잉에 몰려 있음을 알 수 있다. 반면 20대 디자인 전공자 남성의 경우 4번이 7개, 2번이 5개, 3번 4개로 여성의 경우보다는 다소 분산되어 있으나 역시 아웃라인 쪽과 평균 오른쪽 경향이 보인다. 2순위 또한 2, 3, 4번에 분포되어 있으며 ‘식빵’을 제외하고는 1번 포토의 선택이 없는 점은 특이한 점이다. 20대 비전공자의 경우 전공자에 비해 남, 여 모두 1순위, 2순위 모두 사물별로 선호도가 분산되고 있음을 볼 수 있다.

하지만 평균을 볼 때 중심보다 왼쪽 쏠림 경향이 보인다. 세 번째 50대 전공자를 결과를 보았을 때 50대 디자인전공 여성의 경우 20대 전공 여성과 비슷하게 ‘당근’, ‘도너츠’와 ‘식빵’을 제외하고는 4번 라인드로잉의 선호도가 확연히 많음을 볼 수 있다. 50대 디자인전공 남성의 경우도 여성보다는 2번 3번 쪽이 많으나 포토선택이 없어 평균적으로 오른쪽으로 치우쳐 있음을 확인할 수 있다. 마지막으로 50대 비전공자의 경우 남성의 경우 하나의 사물도 빠짐없이 모두 포토를 선택한 특이점을 발견했다. 반면 여성의 경우 남성보다는 분산되어 있으나 그래도 평균적으로 왼쪽 쏠림 경향을 볼 수 있다.

이를 통해 나이, 성별, 디자인전공 여부에 따라 미니멀한 표현방법만이 공통의 선호도는 아님을 1차적으로 확인할 수 있었다.

Figure 13은 설문결과를 상품유형별 선호도로 그래프화한 것이다.


Figure 13 Icon simplification preference by products

인공물의 경우 제품류의 ‘카메라’와 ‘가구(소파)’의 그래프가 상당히 닮아 있었고, 자연물의 경우 ‘도너츠’와 ‘식빵’의 경우가 상당히 유사한 그래프의 형상을 보이고 있었다. 그래프의 레드컬러가 라인드로잉의 표현을 의미하는데, ‘도너츠’와 ‘식빵’ 등 바로 먹을 수 있는 가공 식품류의 경우 성별, 나이별, 전공별로 전반적으로 라인드로잉의 답변이 낮음을 볼 수 있는데 이는 상품의 특성 측면에서 실재감이 단순한 느낌보다 먹는 식감의 표현 상 더 선호형태라고 해석할 수 있겠다. 50대의 디자인 비전공 남성의 경우 사물들의 편중된 포토 선호 답변이 강했는데 ‘유머차’와 ‘사과’는 상대적으로 다소 낮음을 볼 수 있다. 이는 해당 사물 표현상의 심미성이 어느 정도 답변에 작용하였으리라 본다. 또 다른 발견은 ‘두루마리 휴지’와 ‘닭고기’의 경우 노란색컬러에 해당하는 3번 실루엣표현의 답변이 성별, 세대, 디자인전공여부와 상관없이 현저하게 보이지 않음을 볼 수 있는데, 이는 현재 해당 상품의 실루엣 표현에서 상품의 인지성이 많이 떨어져 보임을 의미할 수 있다. 즉, 형태적인 모호함은 아이콘 선호도에도 부정적 영향을 줄 수 있음을 답변의 결과로서 확인할 수 있다.

두 번째 유형의 설문 결과를 보면 20대 전공자의 경우 남, 여 모두 3번의 아웃라인을 가장 많이 선호 하였다. 반면 50대 남성의 경우는 개별 아이콘 단순화단계 선호도와 마찬가지로 그룹아이콘에서도 포토 그룹을 가장 많이 선호하였다. 그리고 20대 비전공 남녀와 50대 전공 남성 및 비전공 여성이 단순화단계가 섞여있는 2번을 가장 선호하는 그룹으로 선택하였다. 이는 나이, 성별, 디자인전공여부에 따라 사물별 선호 단순화 단계가 다르다는 것을 알 수 있는 결과로서 특히 섞여있는 2번 그룹을 여러 타깃그룹에서 선호했다는 결과는 아이콘의 제작 시 엄격한 가이드에 따른 획일화된 일관성인 ‘Consistency'적 측면보다 사물별 특징과 개성을 살리며 전반적으로 느낌의 일관성을 찾는’Coherence'적 측면의 일관된 디자인이 더 중요함을 알 수 있는 결과라 볼 수 있다.


Figure 14 The result of preference about group icon

Figure 15의 세 번째 유형의 결과를 보면 아래가 텍스트일 때는 50대 디자인전공 남녀를 제외하고는 1번 포토, 2번 일러스트의 아이콘을 전반적인 타깃그룹에서 선호하였다. 반면 아래가 상품 사진일 경우에는 50대 비전공 남녀를 제외하고는 3번, 4번의 선호경향을 보였다. 이를 종합적으로 해석해볼 때 20대 디자인 전공자는 아래가 텍스트일때는 사실감있는 사진과 일러스트쪽으로, 아래가 포토일때는 미니멀한 아이콘을 선호하는 등 컨텍스트에 따라 대비된 확연히 아이콘표현의 주목률을 고려하고 있음을 알 수 있고, 이는 일부 디자인 교육의 영향이라 해석된다. 반면, 그래프의 전체 경향은 하단이 텍스트일 때 1,2번 쪽으로, 하단이 상품사진일 때 3,4번의 미니멀 표현쪽으로 답한 경향이 보이지만, 50대 비전공 남성과 같이 어떤 상황에서도 포토를 선택하는 극단적 포토 선호그룹을 포함한 그룹은 컨텍스트와의 관련성보다는 사물에 따른 아이콘의 선호도가 일관되게 결과에 더 작용됨을 보여주고 있다.


Figure 15 The result of context based preference of icon

설문결과를 종합적으로 해석해보면 Figure 16과 같다.


Figure 16 Total analysis diagram

이는 사람을 중심으로 상품을 매핑하고, 상품을 중심으로 사람을 매핑하여 교차분석을 한 결과로, 실제 실무에서 아이콘 제작 시 활용이 가능하도록 실용적 방안을 마련하기 위함이다. 좌측의 사람을 중심으로 상품을 매핑한 경우 타깃에 따른 상품 유형별 단순화 선호도를 볼 수 있다. 예를 들어 50대 비전공 남자의 경우 일용, 자연원재료, 패션잡화, 가공식품 모두 포토를 선호함을 볼 수 있고, 세부적으로 각 칸의 개별 상품별로 볼 때에는 위에서 아래로 표를 많이 받은 순서로 정리되어 있다. 오른쪽의 경우는 상품을 중심으로 사람을 매핑한 결과로 4개 상품 유형에 따라 성별, 세대별, 전공여부에 따른 단순화 선호도를 알기 쉽게 정리한 결과이다. 상품 유형별로 볼 때 가공식품의 경우는 사실적 일러스트와 포토 순으로 몰려있음을 알 수 있고, 패션잡화의 경우 라인드로잉을, 그 외 일용제품과 자연원재료의 경우는 사실적 일러스트표현의 선호가 다소 높음을 볼 수 있다.

이상의 결과를 바탕으로 온라인 쇼핑몰을 위한 유형별 아이콘 단순화 단계의 표현방안을 제안해보면 연령대에 따라서는 50대가 주로 이용하는 온라인쇼핑몰의 경우에는 포토표현 방식을, 그리고 20대가 주로 활용하는 쇼핑몰의 경우 단순화된 아이콘의 표현방식이 주 표현방식으로 활용되면 좋을 것이다. 성별의 경우 남성보다 여성이 주로 사용하는 쇼핑몰의 경우에는 라인드로잉 표현방식을 주로 활용하면 좋을 것이다. 상품을 중심으로 보았을 때에는 인공물을 주로 다루는 쇼핑몰의 경우는 라인드로잉 쪽이 유리하고 상품으로 자연물이 많은 경우는 포토 쪽이 유리함을 알 수 있다. 특히 대형마트 쇼핑몰 등 기호(가공)식품의 상품이 많은 경우에는 현 쇼핑몰 일부에도 적용되어 있으나 전략적으로 사실적 일러스트 및 포토로 사실감의 일관성을 주는 것이 좋을 것이고, 패션잡화 등 기호 인공물은 깔끔한 라인드로잉의 표현이 좋을 것이다. 그 외의 경우는 ’Coherence'적 일관성 측면에서 상품별 특성을 두는 단순화가 좋음을 알 수 있다.

5. 결론 및 제언

아이콘은 소비자의 시선을 유도하고 소비자의 감성 및 선호도에 영향을 주는 중요한 시각요소임에도 불구하고, 최근 아이콘 개발의 경우 사용자의 관점보다는 디자이너 및 개발자의 관점에서 디자인되는 경향이 크다. 즉, 다양해지는 사용자의 관점을 반영하지 못하고 디자이너의 선호표현방식에 맞춰 획일화되는 경향이 있다. 이에 본 연구는 온라인 쇼핑몰의 카테고리 아이콘 디자인에 있어서 나이, 성별, 디자인 교육여부, 상품에 따른 아이콘 단순화단계의 선호도차이를 분석해보았고, 그 결과로 Figure 17과 같이 핵심 맵으로 정리하였다.


Figure 17 Summarized analysis diagram

중앙의 맵은 성별, 전공여부, 세대를 합쳐서 매핑한 결과이고 오른쪽 맵은 상품을 중심으로 라인의 두께로 연관성을 매핑한 결과이다. 다음은 이 맵을 바탕으로 최종 정리한 쇼핑몰 아이콘 디자인 단순화 방안의 제안 리스트이다.

1. 성별: 선호도를 고려하여 남성이 주로 사용하는 온라인 쇼핑몰의 경우는 포토를, 여성의 경우 라인드로잉을 주로 반영해야 한다.

2. 세대별: 20대 젊은 층보다 50대 액티브시니어들이 주로 활용하는 쇼핑몰은 포토기반 아이콘을 고려해야 한다.

3. 디자인 교육여부별: 비전공자일수록 포토선호, 전공자일수록 라인드로잉을 선호함을 알 수 있다.

4. 상품유형별: 인공물을 주로 다루는 쇼핑몰의 경우는 라인드로잉 쪽이 유리하고 상품으로 자연물이 많은 경우는 포토 쪽이 유리하다. 특히 가공식품의 경우는 사실적 일러스트 혹은 사진으로, 패션잡화의 경우에는 라인드로잉으로 단순화 하는 것이 좋다. 그 외 답변이 다소 분산된 상품의 경우는 상품별로 특성을 두는 단순화가 좋다.

5. 단순화단계가 다른 그룹화된 아이콘의 선호도: 다수 디자인 비전공자그룹, 일부 전공자그룹의 경우 단순화단계가 다른 아이콘들이 그룹화 된 항목을 선호했다. 이는 상품별로 단순화 단계의 선호가 다름을 알 수 있는 결과로 쇼핑몰 아이콘의 제작 시에도 획일화된 ‘Consistency'적 측면보다 사물별 특징과 개성을 살리며 전반적 느낌의 일관성을 찾는’Coherence'적 측면의 디자인을 시도해야함을 의미한다.

6. 컨텍스트에 따른 아이콘 단순화단계의 선호도: 20대 디자인 전공자의 경우는 컨텍스트에 따른 아이콘 주목률을 고려하여 텍스트일때 사실감, 포토일때는 라인드로잉의 배경과 반대의 아이콘 단순화 수준을 선택함을 발견할 수 있었는데 이는 디자인 교육의 영향으로 예측된다.

7. 기타 발견점: ‘유모차’와 ‘사과’는 극단적 포토선호경향의 50대 비전공자에게도 상대적으로 답변이 분산됨을 보였는데, 이는 해당 사물 표현상의 심미성이 어느 정도 답변에 작용함을 알 수 있다. 아울러 ‘두루마리 휴지’와 ‘닭고기’의 경우 실루엣표현의 답변이 성별, 세대, 디자인전공여부와 상관없이 현저하게 보이지 않음을 볼 수 있는데, 이는 디자인된 실루엣 표현에서 상품의 인지성이 많이 떨어져 보임을 의미할 수 있다. 즉, 형태적인 모호함은 아이콘 선호도에도 부정적 영향을 줄 수 있음에 대한 결과로 실루엣 표현 시 주의해야 한다.

본 연구를 통해 온라인 쇼핑몰의 카테고리 아이콘 디자인에 있어서 나이, 성별, 디자인 교육여부, 상품에 따른 아이콘 단순화단계의 선호도차이를 알아본 후 쇼핑몰 유형별 카테고리 아이콘의 적합한 단순화 단계를 제안해 보았다. 이는 향 후 디자이너가 아이콘 디자인을 할 때 트렌드 기반의 획일화된 단순화된 디자인만을 추구하는 것이 아닌 사용자별, 대상 사물별로 특징과 차이를 고려하여 신중히 단순화 단계의 기준을 정의해야 함을 의미 한다. 끝으로 본 연구가 향 후 쇼핑몰에 적용될 사물별 아이콘 단순화 단계의 표현방식의 지침과 실무적 활용 방안이 되길 기대한다.

Acknowledgments

"This research was supported by the MSIP(Ministry of Science, ICT and Future Planning), Korea, under the ITRC(Information Technology Research Center) support program (IITP-2015-H8501-15-1017) supervised by the IITP(Institute for Information & communications Technology Promotion)"

"본 연구는 미래창조과학부 및 정보통신기술진흥센터의 대학ICT연구센터육성 지원사업의 연구결과로 수행되었음" (IITP-2015-H8501-15-1017)

References
  1. 1 . Cairo, A. (2012). The Functional Art: An introduction to information graphics and visualization. Berkeley, CA: New Riders.
  2. 2 . Kim, G., & Eune, J. (2014). 사용자의 디자인 교육 여부에 따른 아이콘의 정보표현 단순화 유형별 선호도 연구 [A study on the preference of simplification level for visualized Icon types between designer and non-designer groups]. In Proceeding of Spring, 2014 KSDS Conference (pp.62-63). Seoul: Korean Society of Design Science.
  3. 3 . Kim, G. (2013). 인터넷쇼핑몰의 상품정보제공 문제점 분석 [An Analysis of the Problem for Providing Product information in Internet Shopping Mall]. Journal of Korea Design Forum, 38, 387-397.
  4. 4 . Kim, S. (2011). 형태재인 관점에서의 아이콘의 특징적 분류 연구 [A Study on Icon Characteristic Classification in the Viewpoint of Pattern Recognition]. Journal of the Korean Society of Design Culture, 17 (2), 61-72.
  5. 5 . Lee, H. (2013). 액티브 시니어의 효과적인 커뮤니케이션을 위한 스마트폰 어플리케이션 아이콘 디자인 분석 [An Analysis of Smart Phone Application Icon Design for Active Seniors' Effective Communication]. (Unpublished master's thesis). Sejong Univesity, Seoul, Korea.
  6. 6 . Lee, J. (2003). 단순화 정도에 따른 아이콘 디스플레이의 가시성 [The Visibility of Icon Display: Simplicity]. Journal of the HCI Society of Korea, 2003 (2), 928-932.
  7. 7 . Malamed, C. (2011). Visual language for designers: principles for creating graphics that people understand. Rockport Pub.
  8. 8 . Park, C. (2011). 액티브 시니어를 위한 도시형 농장계획 [Urban farm planning for active seniors]. (Unpublished master's thesis). Hongik Univesity, Seoul, Korea.
  9. 9 . Ryoo, C. (2013). 쇼핑몰사이트의 디자인만족이 신뢰, 몰입, 충성도에 미치는 영향 [Effects of Site Design Satisfaction on Trust, Commitment and Loyalty in Internet Shopping Malls Setting]. Journal of Brand Design Association of Korea, 11 (1), 19-28.
  10. 10 . Rogers, Y. (1989). Icons at the interface: their usefulness. Interacting with Computers, 1 (1), 105-117. [https://doi.org/10.1016/0953-5438(89)90010-6]
  11. 11 . Animation, the end of creation by EBS. (n.d.). Retrieved May 17, 2014, from http://www.oeker.net/m/bbs/board.php?bo_table=comic&wr_id=2970409.
  12. 12 . The relationship between expressionism painting and cartoon. (n.d.). Retrieved June 12, 2014, from http://riemann.tistory.com/76.