기호학 관점에서 조합 아이콘의 조합 유형별 디자인 방안 제안

1-1 연구 배경 및 목적

아이콘은 디지털 콘텐츠의 디자인 요소 중 정보를 쉽고 직관적으로 전달하기에 용이한 시각화 표현 요소로써 그 역할이 더욱 중요해지고 있다. 아이콘은 웹, 앱, 정보디자인 등 여러 디자인 분야에서 사용되고 있으며, 제한된 화면 내에서 그 의미 와 기능 정보를 제공해야 할 때 적극 활용된다. 아이콘 유형에는 단일 형태의 개별 아이콘과 이 개별 아이콘들이 조합되어 또 다른 의미와 기능 정보를 전달하는 조합 아이콘이 있다. 조합 아이콘은 조합 방식에 따라 디자이너의 원 제작 의도와 달리 그 의미와 기능이 달리 해석되는 경우도 많으나 이와 같은 조합 아이콘의 의미와 기능 체계에 대한 선행연구는 부족한 실정이다. 또한, 미국의 기호학자 퍼스(C.S Peirce)의 삼원 구조인 도상(Icon), 지표(Index), 상징(Symbol) 이론을 기반으로 한 선행 아이콘 연구는 다수 있으나 각자 다른 의미와 기능을 가진 개별 아이콘이 함께 조합될 시 조합의 유형에 따라 도상, 지표, 상징의 어느 요소가 의미 및 기능 강화에 더 영향을 주는지에 관한 연구는 부족하다. 이에 본 연구는 개별 의미와 기능을 가진 아이콘들이 조합될 시 조합 아이콘의 의미와 기능이 어떻게 달리 작용하는지 퍼스의 이론을 기반으로 사용자 실증조사 연구를 통해 파악해 보는 데에 1차 목적이 있으며, 그 분석과 해석을 바탕으로 실무 디자이너들의 조합 아이콘 제작 지침이 될 수 있는 가이드를 제작하는 데 본 연구의 최종 연구 목적이 있다.

1-2 연구 범위 및 방법

본 연구에서 활용한 아이콘들은 애플 앱스토어(Apple App Store)와 구글 플레이스토어(Google Play Store)의 24개 공통 카테고리 1~5순위에 속한 앱 아이콘에 한정하여 진행하였다. 본 연구는 미국의 기호학자 퍼스의 이론을 기반으로 하였으며 퍼스 기호학의 표상체(Representamen), 대상체(Object), 해석체(Interpretant) 중 표상체인 ‘아이콘’을 실험도구의 시각 소재로 하여 조합 유형에 따라 대상체인 ‘의미’와 해석체인 ‘기능’의 관계성을 도출하고, 실증연구를 통해 사용자가 답변한 대상체와 해석체 일치 정도 경우의 수를 해석하는 데에 연구의 범위를 정의하였다. 본 연구 방법은 다음과 같다. 첫째, 서론에 해당하는 본 연구의 목적, 범위 및 방법을 제시하였다. 둘째, 관련 선행연구 분석을 통해 아이콘의 개념 및 특징, 기호학 관점에서의 아이콘 분류체계를 분석하였다. 셋째, 앱에서 사용되고 있는 368개 아이콘들을 수집한 후, 가장 많이 쓰이는 기능 유형 20가지에 따라 112개 아이콘을 1차 분류하였다. 그중 조합 아이콘 기준에서 높은 빈도로 반복 사용되고 있는 ‘주요 아이콘’ 6개를 선별하였다. 넷째, 이 6개 주요 아이콘과의 조합을 이루는 ‘보조 아이콘’ 17개 아이콘을 선정하여 겹침을 제외한 후 총 20개의 조합 아이콘을 파일럿 테스트용 실험도구로 제작하였다. 파일럿 테스트는 아이콘들이 조합되기 전 개별 아이콘일 때의 중의적 의미와 기능에 대한 파악과 의미와 기능에 대한 개방형 답변을 도출하기 위해 주관식으로 진행하였으며 이후 분석을 통해 1~2순위 답변을 정리하였다. 다섯째, 본 실험조사용 실험도구를 제작하기 위해 그림 1과 같이 6개 주요 아이콘 중 파일럿 테스트에서 중의성 및 기능과 의미 답변에서 공통 답변도가 높은 유의미한 결과를 보인 4개 주요 아이콘을 선정하였고, 17개 보조 아이콘 중 마찬가지로 주관식 답변의 유사도가 높은 결과를 보인 12개를 선정하였다. 이를 재조합시켜 최종 13개의 조합 아이콘을 본 설문용 실험도구로 제작하였고, 이를 의미와 기능으로 나누어 객관식과 5점 척도 설문을 시행하였다. 마지막으로 설문 결과 내용을 해석하여 조합 아이콘 디자인 시 고려해야 할 가이드라인을 제안하였고, 전체 내용을 종합하여 본 연구의 결론을 제시하였다.

Fig. 1.

Process for Forming a Combined Icon

2-1 아이콘의 개념 및 특징

아이콘은 ‘그림’을 뜻하는 그리스어 ‘eikoon’에서 유래되었으며[1], [2] 중세 시대의 아이콘은 글을 읽을 수 없던 평민과 농노들이 성화 조각을 통해 성서의 내용과 의미를 이해할 수 있도록 한 종교 이미지의 상징 기호체계[2]로 이용되었다[3]. 근대에 이르러 미국의 기호학자 퍼스가 아이콘을 기호론의 학문으로 체계화하면서[2] 아이콘은 기존의 종교적 해석에서 벗어나[2], [4] 정보를 축약, 단순화한 시각 경험 기반 의미 전달용 그림 기호를 일컫게 되었다. 최근 아이콘은 디지털콘텐츠에 다양하게 응용되어 인간과 인간 사이의 정보 전달, 인터랙션을 통한 인간과 컴퓨터 사이의 소통을 목적으로 하는 매개체[5]로 발전하고 있다. 아이콘이 사용자의 미디어 커뮤니케이션에서 중요한 이유는 그 특징에서 찾아볼 수 있다. 아이콘은 시각 인지를 사용하는 시각 언어로 문자 언어보다 빠른 정보 해석이 용이하다[7]. 인지, 분석 그리고 해석의 일련의 정보처리 과정을 거쳐야 이해가 가능한 문자 언어와 달리, 시각 언어는 위 과정을 동시에 진행하여 빠르게 정보를 전달하고 신속하게 의미를 이해시킨다[6]-[7]. 이로 인해 같은 시간 대비 더 많은 정보를 전달할 수 있다[7]-[9]. 또한 아이콘은 언어를 학습하고 배경을 이해해야 사용할 수 있는 문자 언어와 달리 학습이나 특정 지식을 요구하지 않는다[7]. 때문에 기억하기 쉽고 높은 시각 주목성을 띈다[7]. 하지만 아이콘은 정보의 내용을 함축하여 표현하므로, 어떻게 사용자에게 의미를 전달하고 오류 없이 기능을 적용할 수 있을지 그 효율성을 고려해야 한다.

2-2 퍼스의 기호학을 기반으로 한 아이콘의 체계

기호학은 크게 언어학적 관점과 해석학적 관점으로 나눌 수 있다. 소쉬르(F. D. Saussure)는 언어를 하나의 기호체계로 보는 대표적인 구조주의 언어학자인 반면[3], 퍼스는 이미지의 영역까지 포함한 시각 기호 체계의 구축과 해석의 발판을 마련한[12] 해석주의 기호학자이다. 퍼스의 기호학은 문맥의 기호학으로 소쉬르의 이론보다 훨씬 포괄적인 범위에서 기호를 정의하고 있다[14]. 본 연구는 퍼스의 기호학을 바탕으로 한 선행 문헌연구 분석을 통해 아이콘의 분류 체계를 그림 2와 같이 정리하였다[1], [10]-[14]. 퍼스는 기호를 표상체, 대상체, 해석체의 3가지로 나누어 개념을 설명하고 있다. 표상체는 사용자가 직접 지각할 수 있는 시각 형태이다. 대상체는 기호가 표상체를 통해 지시하고자 하는 대상의 의미이다. 해석체는 표상체와 대상체가 결합할 때 사용자의 경험을 통대로 만들어지는 정신적 개념[12]을 의미하며 위 세 가지 요소가 서로 연결되어 삼원 구조를 형성한다. 퍼스는 삼원 구조가 어떤 관계 양상에 놓여있는지에 따라 기호의 유형을 도상(Icon), 지표(Index), 상징(Symbol)의 3가지로 분류하였다[15]. 도상은 기호와 대상체 사이의 유사성을 모티브로 표현하는 기호로[4] 서로 유사 관계에 놓여있다. 도상이 표상하는 물리적 유사성은 오감을 모두 포함하고 있다[12]. 도상은 대상체가 모두 같은 표현 방식이 아니라도 표의(表意) 기능이 유사하다면 기호로서 역할을 할 수 있다[16]. 이와 같이 도상이 대상체와의 유사성으로 그 관계가 결정된다면 지표는 대상의 존재, 대상과의 인과 관계[16] 또는 공간적 근접성을 바탕으로 기호의 역할을 하게 된다[12]. 전체 상황의 부분이 전체로부터 분리되었을 때 부분이 전체 상황을 표상하는 경우도 지표의 기호작용이 일어난 사례라 할 수 있다[16]. 가령, ‘행복’의 부분 표현인 ‘웃음’이 ‘행복’에서 분리된 후 이 ‘웃음’이 전체 ‘행복’을 다시 연상시키는 관계가 될 때 이는 지표의 기호작용으로 볼 수 있다. 상징은 도상이나 지표와 달리 기호와 대상체 사이에 어떠한 유사성이나 연관성을 가지지는 않지만[11], [17] 사용자와의 약속과 관습, 그리고 학습에 의해[4] 임의로 만들어진 기호를 말한다. 즉, 상징은 추상적인 개념을 표현한 것으로 사회적 계약에 의해 관습화된다. 따라서 상징은 그 상징의 사용 규칙과 속한 문화를 이해할 수 있어야 해석이 용이하며 사용이 가능하다. 대표적인 예로는 세계 각국의 언어, 회사나 학교의 상징 마크, 아라비아 숫자 등이 있다.

Fig. 2.

Icon Classification System of Prior Studies

2-3 퍼스의 삼원 구조 적용

본 연구는 그림 3과 같이 퍼스 기호학의 삼원 구조인 표상체, 대상체, 해석체를 적용하여 아이콘의 의미작용 과정상의 관계를 정리하였다. 그림 3의 왼쪽 좌하단 퍼스 기호학의 표상체는오른쪽 이미지 좌하단 ‘돋보기’ 아이콘과 같이 사용자가 직접 인지할 수 있는 외연상의 이미지로 보았으며[18], 상단 대상체는 표상체가 지시하는 아이콘의 내재적 의미(Meaning)인 확대하는 도구로써의 ‘돋보기’, 그리고 우하단 해석체는 표상체와 대상체가 결합한 아이콘에 대한 사용자의 해석을 바탕으로 한 개념인 ‘찾기’로 본 연구는 이를 그 아이콘의 기능(Function)으로 정의하였다. 삼원 구조는 아이콘의 의미작용이 어떻게 이루어지는지 그 단계를 해석하는데 용이하고[18], 또한 사용자가 아이콘을 이해하는 과정을 밝히는 데에 용이하다[10]. 본 연구는 이를 바탕으로 아이콘의 의미를 뜻하는 대상체와 아이콘의 실제 기능을 나타내는 해석체의 관계를 주로 분석하였다.

Fig. 3.

Example of Applying an Icon in Peirce's Triadic Model

2-4 아이콘 기호 유형 분류 체계

표 1은 그림 2의 선행 연구와 선행사례 리서치를 바탕으로 본 연구가 정의한 아이콘 기호 유형 분류체계이다. 첫 번째, 도상 아이콘은 (1)의 초상화처럼 대상과 유사성을 가지며 재현적인 기호, (2)의 픽토그램처럼 일정한 형식에 따라 대상을 단순화하고 도식적으로 표현한 픽토그램 형식의 기호, (3)의 폴더와 같이 실제 외형과 유사한 아이콘 표현 형식의 기호로 정의하였다. 두 번째, 지표 아이콘의 경우 다음의 네 가지 유형의 기호로 정의하였다. (1)의 온도계 예시는 정량적으로 지각할 수 없는 온도라는 대상을 온도계 눈금을 통해 지각할 수 있게 하는 기호이다. (2)의 연기는 연기를 통해 불이 났음을 연상하듯 두 대상이 인과 관계를 이루는 기호이며, (3)의 경우 웃음이 행복을 연상시키는 것과 같이 전체 상황의 부분이 전체 상황을 암시하는 기호, (4)의 경우 박스의 깨진 유리잔 표시는 박스 안의 물건이 깨질 수 있는 상품임을 암시하는 기호이다.

Table 1.

Classification Criteria for Type of Sign

마지막으로 상징 아이콘은 (1)의 아라비아 숫자와 같이 기호와 대상 사이의 인과관계가 없지만, 약속에 의해 그 의미를 인지하고 있는 기호, (2)의 비둘기와 같이 사회 구성원들 간의 약속 또는 사회적 규칙에 의해 평화의 상징으로 만들어진 기호로 정의하였다[19], [20]-[28].

3-1 파일럿 테스트 설문 설계

2) 아이콘 유형화 및 추출

수집한 368개 아이콘을 기능에 따라 1차 분류한 후 여러 앱의 중복 기능을 도출하여 최종 20개 유형으로 분류하였다. 20개 유형은 찾기(Find), 검색(Search), 확대(Zoom), 댓글(Comment), 문자(Message), 검토(Review), 제안(Suggest), 대화(Chat), 날씨(Weather), 다운로드(Download), 중요(Important), 추천(Recommendation), 만족도(Satisfaction), 즐겨찾기(Bookmark), 링크(Link), 첨부(Attached), 공유(Sharing), 저장(Save), 찜하기(Wish List), 건강(Health)이다. 이후 이 20개 유형 분류에 맞게 최초 368개 아이콘을 112개 아이콘으로 2차 재분류 하였다.

다음으로 이 2차 분류 아이콘을 조합 응용의 활용도가 많은 아이콘 기준으로 최종 그림 4와 같이 6개 유형으로 분류한 후 각 아이콘의 명칭을 부여하였고, 본 연구는 이들을 ‘주요 아이콘’이라 명명하였다. 선정된 6개 주요 아이콘은 Ⓐ돋보기 아이콘, Ⓑ말풍선 아이콘, Ⓒ구름 아이콘, Ⓓ별 아이콘, Ⓔ쇠사슬 아이콘, Ⓕ하트 아이콘이다. 본 연구는 겹치는 아이콘을 제외한 활용 빈도가 높은 17개 아이콘을 선정해 ‘보조 아이콘’으로 명명하였다. 선정한 17개 보조 아이콘은 폴더 아이콘, 검색 바 아이콘, 플러스 아이콘, 선 세 개 아이콘, 편지 아이콘, 느낌표 아이콘, 점 세 개 아이콘, 해 아이콘, 화살표(하) 아이콘, 체크 아이콘, 별 세 개 아이콘, 북마크 아이콘, 지구본 아이콘, 문서 아이콘, 화살표(우) 아이콘, 클립 아이콘, 전파 아이콘이다.

Fig. 4.

App Icon Categorization and Extraction Process

3) 파일럿 테스트를 위한 최종 조합 아이콘 제작

그림 5는 파일럿 테스트 실험도구를 위한 20개 조합 아이콘의 제작 결과물이다. 그림의 파란색에 해당되는 아이콘은 6개 주요 아이콘이며 검정색에 해당되는 아이콘은 17개 보조 아이콘이다.

Fig. 5.

20 Combination Icons for Surveys

3-2 파일럿 테스트

1) 파일럿 테스트 진행

파일럿 테스트의 1차 목적은 주관식 개방형 질문을 통해 조합 전 개별 아이콘의 의미 및 기능에 대한 피험자의 다양한 답변 수렴 후 연구 가치가 있는 중복성이 많은 아이콘들을 선정하는 데 있다.

2차 목적은 본 연구가 정의한 각 아이콘의 기호 유형 체계에 기반한 분류 작업을 하는 데에 있다. 파일럿 테스트는 2020년 1월 21일부터 2020년 1월 30일까지 구글 온라인 설문을 통해 20대~50대 26명을 대상으로 시행하였다. 대상자 구성을 보면 20대 68%, 그 외는 32%이며, 남 44%, 여 56%, 디자인전공자 28%, 비전공자 72%이다. 설문 문항은 인구통계학적 조사를 위한 기본 문항과 제시 아이콘을 보고 떠오르는 의미와 기능을 각각 답변할 수 있게 총 46개 주관식 문항으로 구성하였다. 그림 6은 파일럿 테스트를 통해 도출된 아이콘별 의미와 기능에 대한 1, 2순위 답변을 정리한 내용이다.

Fig. 6.

1st and 2nd Answer of Pilot Test Result

3) 선정 아이콘의 기호유형 분석

이와 같은 과정을 거쳐 파일럿 테스트의 주요 아이콘에서 2개, 보조 아이콘에서 5개의 총 7개 아이콘을 제외한 총 16개의 아이콘을 본 설문을 위한 분석대상으로 선정하였다. 본 연구가 정의한 기호유형 분류 기준인 표 1과 파일럿 테스트 결과인 그림 6에 따라 16개 아이콘을 퍼스의 삼원 구조 체계로 다시 분류 후 그림 7과 같이 정리하였다. ‘돋보기 아이콘’ 자체는 물체의 상을 확대하여 볼 수 있는 볼록렌즈의 외형을 단순화하여 만들어진 도상형 아이콘이다. 하지만 무언가를 찾는다는 ‘검색’ 기능을 위해 사용될 때는 사물을 확대하는 성질을 통해 ‘찾는다’는 의미로 활용되고 있다. 즉, 실체가 없는 ‘검색’이라는 행위를 돋보기라는 사물을 활용해 나타내는 것이므로 기호유형 분류 기준인 표 1에 따라 ‘지표’로 분류하였다. 폴더 아이콘의 경우 현실의 폴더는 여러 서류를 한곳에 모아두기 위해 사용하는 서류철을 뜻하고, 컴퓨터의 폴더 아이콘 또한 서로 관련 있는 파일들을 묶어서 보관하는 용도이다. 즉, 이는 현실 폴더와 외형을 유사하게 표현해 그 기능을 표상하고 있으므로 도상으로 분류하였다. ‘검색창’ 아이콘은 인터넷 브라우저에서 찾고자 하는 키워드를 입력하는 칸을 ‘커서’와 함께 형상화한 것으로, 검색창의 공란 형태 자체와 ‘검색’이라는 무형의 행위는 어떤 형태적 연관성도 가지고 있지 않다. 하지만 이는 대다수 브라우저에서 통용되는 아이콘으로 이미 그 의미가 사회적 관습의 일환이 되었으므로 상징으로 분류하였다. ‘플러스’ 아이콘은 자연수의 덧셈을 나타내기 위한 수학 기호로 '더하기'라는 행위와 기호의 연관성은 없다. 하지만 누구나 그 의미를 알고 있는 약속된 수학 부호이므로 상징으로 분류하였다. ‘말풍선’ 아이콘은 만화 등의 매체에서 등장인물의 대사를 시각화하여 나타낼 때 쓰인다. 하지만 구어 표현의 대사를 의미하는 말풍선은 채팅의 일부 속성임에도 채팅 아이콘의 대표로 사용되었으므로, 표 1의 지표(3)에 해당하는 ‘웃음’이 ‘행복’을 대변하는 관계에 의거하여 지표로 분류하였다. ‘햄버거 메뉴’로도 불리는 ‘선 세 개’ 아이콘은 스마트폰 앱에서 하단 항목을 열거하는 기능으로, 목차와 같이 항목이 나열된 모습을 단순하게 도식화하여 표현한 것이므로 도상으로 분류하였다. ‘편지’ 아이콘은 많은 이메일 서비스에 적용된 기호로, 발신인과 수신인이 글을 주고받을 때 사용한다. 이는 유사 성격의 물체 외형을 도식화하여 그 기능을 표상한 것으로 도상으로 분류하였다. ‘느낌표’ 아이콘은 문장 부호의 하나로 감탄 또는 강조를 나타낸다. 문장 부호는 수학 부호와 마찬가지로 사회적 합의를 통해 표준화 및 정의되므로 상징으로 분류하였다. ‘점 세 개’ 아이콘은 뒷말이 생략되었음을 나타내는 말줄임표이다. 한글 글꼴 용어사전에 명시되어 있는 문장부호로 글과 함께 제시될 때는 말줄임표로서 뒷말이 생략되었음을 나타내지만, 모바일 앱에서는 로딩이 진행되고 있는 상태를 나타낼 때 쓰인다. 이는 아직 다 말하지 못한 내용이 남아있음을 말줄임표를 활용해 나타내는 것이므로 지표로 분류하였다. ‘쇠사슬’ 아이콘은 쇠사슬의 형태를 도식화하여 나타낸 것으로 현실, 온라인 모두 무언가를 연결하는 수단으로 사용된다. 따라서 유사한 성격을 지닌 물체의 외형을 직접 빌어 와 그 기능을 표상한 도상으로 분류하였다. ‘지구본’ 아이콘은 전 세계가 서로 연결되어 정보를 교환하는 인터넷 통신망을 설명하는 기호로, 인터넷 보급 후 월드와이드웹을 표상하기 위해 사용되는 대표 아이콘이다. 지구본 위의 격자 선은 위도와 경도의 표현일 수도 있으나, 월드와이드웹의 네트워크로 해석하여 선이 얽혀있는 그물의 형태를 나타내기도 한다. 이는 지각할 수 없는 네트워크 연결의 의미를 선의 결합을 통해 유추할 수 있도록 한 것이므로 지표로 분류하였다. ‘문서’ 아이콘의 문서는 지면에 문자 등을 손으로 쓰거나 인쇄한 것이다. 앱에서의 문서 또한 유사 역할로, 유사 성격을 지닌 실제 세계의 사물의 외형을 빌어 그 기능을 표상하는 것으로 도상으로 분류하였다. ‘화살표’ 아이콘은 화살촉을 통해 진행 방향을 나타내는 화살 모양의 표시이다. 화살표 자체는 방향의 외형을 도식화한 도상 속성임에도 앱에서 오른쪽을 가리키는 화살표는 ‘다음으로 넘어간다’는 뜻으로 사용된다. 이는 사회문화적 관습, 약속 등에 의해 규약 되었으므로 상징으로 분류하였다. ‘하트’ 아이콘은 심장의 모양을 단순화한 기호로 ‘마음’을 뜻하며 언어, 문화, 시간과 관계없이 긍정적인 감정을 표현하는 데에 통용되는 기호이다. 앱에서 또한 사용자가 마음에 든 게시글이나 댓글에 호감을 표시하는 기능으로 사용되며 이는 사회문화적 관습, 약속에 의한 것이므로 상징으로 분류하였다. ‘클립’ 아이콘은 현실 세계의 클립의 외형을 단순화한 형태이다. 이때 현실의 클립은 여러 장의 종이들을 끼워 고정하는 기능을 하지만, ‘클립’ 아이콘은 온라인에서 글을 작성하거나 메일을 전송할 때 파일과 데이터를 함께 보내기 위해 첨부하는 기능을 나타내는 데에 쓰인다. 이는 파일을 덧붙여 송신하는 기능을 클립을 통해 유추 가능하게 한 것으로 지표로 분류하였다. ‘전파’ 아이콘은 심장 박동을 단위 시간당 표현하여 나타내는 심박 모양이다. 심박수는 심장의 주기가 정상인지 측정하기 위한 기능으로 심박 측정기에 사용되는 모양을 그대로 사용하는 것이므로 도상으로 분류하였다. 그림 7은 이상 설명된 내용을 정리한 표로 4개의 큰 주요 아이콘 및 12개의 작은 보조 아이콘과 각 기호 유형이 오른쪽 옆에 함께 제시되어 있다.

Fig. 7.

Analysis of Types of Sign of Selected Icons

3-3 본 설문조사

1) 본 실험조사용 조합 아이콘 제작

그림 7의 4개 주요 아이콘과 12개 보조 아이콘을 이용하여 실제 앱 사례에 쓰이고 있는 항목과 퍼스 삼원 구조 차원의 해석 가치가 있는 항목을 종합하여 표 2와 같이 본 설문 실험 도구로 최종 13개 조합 아이콘을 의미와 기능과 함께 제작하였다.

Table 2.

The Final Selected Combined Icons for The Main Survey

2) 설문 문항 구성 및 설문 시행

본 설문은 그림 8과 같이 2020년 3월 13일 ~ 4월 5일까지 온라인 설문으로 진행하였다.

Fig. 8.

Examples of an Online Survey

표 3은 본 설문 피험자의 인구통계학적 분석 내용으로 디지털 기기를 사용하는 10~50대의 디자인 전공자, 비전공자를 포함한 총 80명으로 구성되었다.

Table 3.

Demographic Analysis of the Subject

본 설문 문항은 크게 세 가지 유형으로 분류된다. 첫 번째 유형은 인구통계학 관련 문항과 함께 시각 언어로써 아이콘의 중요도를 5점 척도를 사용하여 선택하도록 하였다. 두 번째 유형은 표 4의 예시와 같이 아이콘별 의미와 기능을 묻는 문항으로 오지선다 객관식이며, 해당 답변을 선택한 이유를 서술형으로 답하도록 하였다. 객관식의 보기 구성은 문항 간 비교를 용이하게 하기 위해 파일럿 테스트 답변 중 보기 1·2번에는 주요 아이콘의 의미와 기능 기반 답변, 3·4번은 보조 아이콘에 해당하는 의미와 기능 답변으로 구성하였다. 마지막 보기 5번은 표 2에 정리된 실제 앱 사례에서 쓰이는 조합 아이콘의 의미, 기능의 답변으로 배치하여, 이 5번 답변에 대한 분산 여부로 해당 아이콘의 의미와 기능의 명료함과 혼란함을 파악해보고자 하였다. 세 번째 유형은 5점 척도를 사용하여 조합 아이콘의 의미와 기능에 대한 이해도를 조사하였다.

Table 4.

Example of Configuration of Survey Questions

4-1 설문 결과 분석

그림 9의 1번의 1-1은 설문조사 결과 각 아이콘의 보기별 응답률이며 빨간색으로 표시된 부분은 의미에 대한 응답률, 청록색으로 표시된 부분은 기능에 대한 응답률이다. 본 연구는 5번 보기의 응답률이 50% 이상이면 두 아이콘이 적절하게 조합 반영된 것으로 해석하였다. 1-2는 이해도 5점 척도 값의 의미, 기능 기준 각 평균을 낸 점수이다. 이해도 점수는 13개 조합 아이콘의 이해도 평균값인 3.54를 기준으로, 이 이상일 경우 사람들이 사용하기에 쉽고 이해하기 용이한 것으로 해석하였으며 해석 시 주관식 답변을 바탕으로 하였다.

Fig. 9.

Tabulated Results of Survey

4-2 설문 결과 해석

그림 10과 같이 이상 13개 조합 아이콘 설문 분석 결과에 대한 해석을 위해 삼각 레이더 차트(Triangle Radar Chart)를 제작하였다. 응답률은 0~100% 사이로 차트 각 단계는 25% 단위 구간으로 구분된다. 삼각의 각 축을 보면 좌하단은 주요 아이콘인 1·2번 보기, 우하단은 보조 아이콘인 3·4번 보기 그리고 상단은 이 둘의 조합인 5번 보기로 구성하였다. 컬러는 빨간색이 ‘의미’ 관련 답변, 청록색이 ‘기능’ 관련 답변이다. 삼각 차트 하단에는 5점 척도로 해당 아이콘의 의미, 기능의 이해도에 대한 답변 정도를 보여준다. 그 아래는 실제 설문에 사용된 의미와 기능에 대한 1·2번 보기, 3·4번 보기 그리고 5번 보기 내용을 정리하였다. 삼각 차트의 삼각형의 모양에 따라 다음의 세 가지 관계 유형을 정의하였다. 첫째, 주요 아이콘과 보조 아이콘이 동등한 레벨에서 서로의 해석에 영향을 주는 관계를 ‘협력 관계 유형’으로 정의하였다. 협력 관계는 정삼각형 모양에 가깝고, 주요 아이콘인 1·2번 보기와 보조 아이콘인 3·4번 보기 그리고 5번 보기의 응답률이 한쪽으로 쏠림 없이 비슷한 경우이다. 정삼각형 모양 외에 본 연구는 삼각형 상단에 위치한 5번 보기 응답이 50% 이상인 경우에도 협력관계로 정의하였다. 그 이유는 5번 보기 응답이 50% 이상으로 삼각형의 축을 끌고 올라갈수록 삼각형의 좌우 쏠림이 적어지며, 5번은 본 연구에서 주요 아이콘과 보조 아이콘이 동등한 영향력으로 구성된 보기이기도 하기 때문이다. 둘째 유형은 한쪽 기호가 좀 더 많은 영향을 미치고 다른 한쪽 기호는 그 기호를 보조하여 삼각형 형태가 주도된 한쪽으로 쏠림이 있는 유형으로 이를 ‘주도 관계 유형’으로 정의하였다. 셋째 유형은 한 보기의 응답률이 75% 이상 몰렸을 때로, 한쪽 기호가 지배적 영향을 주고 다른 기호는 거의 영향을 주지 못하는 관계이며 이를 ‘지배 관계 유형’으로 정의하였다. 이와 같이 ‘협력’, ‘주도’, ‘지배’ 관계 기반으로 그림 10의 전체 13개의 삼각 차트를 해석해 보았다. 그림 10의 1번, 2번, 3번 차트는 좌하단 주요 아이콘이 돋보기 아이콘으로, 우하단 보조 아이콘 중 1번의 폴더 그리고 3번의 플러스 아이콘과 조합되었을 때는 의미와 기능 모두 협력 관계 유형으로 나타났다. 하지만 2번의 검색 바 아이콘과 조합되었을 때는 의미에서는 협력 관계, 기능에서는 검색 바가 아이콘 해석을 주도하는 주도 관계 유형으로 나타났다. 또한 돋보기는 폴더, 검색 바와 결합하였을 때는 검색의 의미로, 플러스와 결합하였을 때는 확대의 의미로 사용되었다. 돋보기는 플러스와 조합되었을 때 이해도가 가장 높았으며, 검색 바와 조합되었을 때 이해도가 가장 낮았다. 플러스와 검색 바는 같은 상징 아이콘임에도 불구하고 이해도 차이가 큰 것으로 보아 상징 아이콘은 확립된 의미 정도에 따라 이해도 차이가 큼을 알 수 있다. 즉, 돋보기 아이콘은 돋보기를 검색의 의미로 사용할지, 확대의 의미로 사용할지에 따라 적합한 보조 아이콘이 필요하며 보조 아이콘으로 상징 아이콘을 사용할 때에는 플러스와 같이 의미 확립도가 높을 때 이해도 또한 높아진다. 그림 10의 4번, 5번, 6번, 7번 차트 좌 하단의 주요 아이콘은 말풍선 아이콘으로 우하단 보조 아이콘 중 4번의 선 세 개 아이콘과 조합되었을 때 의미와 기능에서 모두 말풍선 아이콘이 좀 더 영향력 있는 주도 관계이며, 5번의 편지 아이콘과 조합되었을 때는 의미에서는 협력 관계 유형, 기능에서는 편지 아이콘이 영향력 있는 주도 관계 유형이었다. 6번의 느낌표 아이콘과 조합되었을 때는 의미, 기능 모두 느낌표가 영향을 지배하는 지배 관계 유형이며, 7번 점 세 개 아이콘과 조합 시 의미는 점 세 개 아이콘이 높은 주도 관계, 기능은 협력 관계로 나타났다. 말풍선 조합 아이콘은 대체로 높은 이해도 점수가 나타난 것으로 보아 의미 및 기능의 확립도가 높음을 알 수 있으며 말풍선과 선 세 개 조합 아이콘을 제외한 세 개 아이콘에서 보조 아이콘의 응답률이 높은 것으로 보아, 말풍선과 같은 지표 아이콘은 보조 아이콘의 의미와 기능을 보충해 주기에 용이함을 알 수 있다. 그림 10의 8번, 9번, 10번 차트 좌 하단의 주요 아이콘은 쇠사슬 아이콘으로 우하단 보조 아이콘인 8번의 지구본, 9번의 문서, 10번의 화살표(우) 아이콘과 조합되었을 때 의미와 기능에서 모두 협력 관계 유형이 나타났다. 쇠사슬 아이콘은 지구본, 화살표(우) 아이콘과 조합되었을 때는 인터넷 주소의 링크로, 문서와 조합되었을 때는 파일을 첨부하는 기능으로 답변하였다. 지구본과 조합된 아이콘을 제외하면 전반적으로 낮은 이해도가 나타났다. 문서와의 조합 아이콘은 협력 관계임에도 이해도가 낮은 것을 보아, 문서와 조합 시 문서의 형태를 정확히 인지할 수 없어 이해도가 떨어졌음을 알 수 있다. 따라서 조합 아이콘 제작 시에는 형태 표현의 단순화 정도의 조절이 필요하다. 그림 10의 11번, 12번, 13번 차트 좌하단의 주요 아이콘은 하트 아이콘으로 보조 아이콘인 11번의 우하단 플러스 아이콘과 조합되었을 때는 의미와 기능에서 모두 하트 아이콘이 좀 더 영향을 미치는 주도 관계 유형이 나타났다. 12번의 클립 아이콘과 조합되었을 때는 의미와 기능에서 모두 협력 관계 유형, 13번의 전파 아이콘과 조합되었을 때는 의미에서는 전파 아이콘이 영향을 지배하는 지배 관계 유형, 기능에서는 전파 아이콘이 좀 더 영향을 미치는 주도 관계 유형으로 나타났다. 하트 아이콘은 플러스, 클립 아이콘과 조합될 때는 ‘좋아요’의 기능으로, 전파 아이콘과 조합될 때는 심장의 의미로 사용되었다. 하트 아이콘은 전파 아이콘과 조합되었을 때 가장 이해도가 높았으며, 반대로 클립 아이콘과 조합되었을 때 가장 이해도가 낮았다. 클립과 조합된 아이콘은 이미 여러 앱 서비스에서 사용 중임에도 불구하고 가장 낮은 이해도가 나타난 것으로 보아, 하트와 조합될 때 클립의 형태를 알아보기 어려운 점이 이해도 저하의 원인임을 알 수 있다. 즉, 조합 아이콘 제작 시 형태 변형의 정도는 형태 인지 가능 범위에서 조절해야 하며, 조합된 보조 아이콘에 의한 의미변화가 발생할 수 있음을 고려하여 디자인해야 한다.

Fig. 10.

Triangle Radar Chart based on Main Icon Criteria

4-3 가이드라인 제안

설문 결과 분석을 통해 사용자들은 주요 아이콘이 어떤 보조 아이콘과 조합되는지에 따라 주요 아이콘의 의미와 기능을 다르게 해석하거나, 이해도 차이 답변 또한 다양함을 알 수 있었다.

설문 결과 해석을 통해 본 연구의 가이드라인 제안을 위한 가장 바람직한 조합 아이콘의 조합 유형을 다음의 네 가지로 도출하였다. 첫째, 삼각 차트의 관계 유형이 협력 관계일 때이다. 둘째, 의미와 기능의 삼각 차트의 관계 유형이 서로 다르지 않고 삼각형의 형태가 유사할 때이다. 셋째, 5번 보기의 응답률이 50% 이상일 때이다. 넷째, 이해도 5점 척도 점수가 13개 조합 아이콘의 이해도 평균값인 3.54 이상일 때이다. 그림 11의 왼쪽 열은 1번에서 4번까지의 단계로 이동할수록 가장 바람직한 조합 아이콘인 체계로 분류한 것이다. 1번의 협력 관계 기준에서는 총 13개 아이콘 중 의미와 기능 삼각 차트 분석 기반 협력 관계 유형이 없는 4개 아이콘이 제외된 9개이며, 2번의 의미와 기능의 삼각 차트의 관계 유형이 서로 다르지 않고 삼각형의 형태가 유사할 때의 기준에 따라 1개 아이콘이 추가 제외되어 8개가 남았다. 3번의 5번 보기의 응답률이 50% 이상일 때 기준에서는 추가로 1개 아이콘이 제외되어 7개가 남았다. 마지막으로 4번의 이해도 5점 척도 점수가 13개 조합 아이콘의 이해도 평균값인 3.54 이상 기준에서 4개 아이콘이 추가 제외되어 최종 3개 아이콘이 남았고 본 연구는 이 세 개 아이콘을 가장 바람직한 조합 아이콘으로 보았다. 그림 11의 오른쪽 열은 위의 절차 과정을 통해 탈락한 조합 아이콘들의 개선방안과 퍼스의 삼원 구조 기반으로 그 조합 방식을 정리한 내용이다. 총 네 가지 방법을 통해 개선을 시도하였으며 그 방법은 다음과 같다. 첫째, 조합 과정에서 생략된 형태 요소로 인해 원본 사물을 알아보지 못 하는 일이 없도록 단순화 및 생략의 정도를 조절해야 한다. 둘째, 표상하고자 하는 의미에 맞도록 조합되는 보조 아이콘을 조정 또는 변경해야 한다. 셋째, 의미, 기능의 이해 혼선 소지가 보일 경우 주요 아이콘과 보조 아이콘의 형태를 동등한 수준의 시각 무게를 갖도록 조정해야 한다. 넷째, 디자인상의 조율로도 이해도 혼선이 생길 경우 텍스트 레이블을 활용하여 구체적인 의미와 기능 명시를 병행한다. 그림 11의 오른쪽 열 1번은 본 연구에서 사용한 13개 조합 아이콘 중 수정이 필요한 아이콘으로 이해도 점수가 3.54보다 낮은 A유형과, 이해도 점수와 5번 보기 응답률이 모두 기준보다 낮은 B유형으로 구분된다. A유형의 쇠사슬과 문서 조합 아이콘은 조합 이전 개별 아이콘인 문서 형태를 인지하기 어렵다는 문제가 있었다. 따라서 개선안은 조합 과정에서 생략된 형태 요소의 단순화 정도를 조절하였다. 쇠사슬과 화살표 조합 아이콘은 주요 아이콘과 보조 아이콘의 크기 차이가 상이한 문제가 있어 이를 보완하였다. 하트와 클립 조합 아이콘은 보조 아이콘인 클립의 의미와 기능이 잘 전달되지 못하여 북마크 아이콘을 사용하여 개선하였다. B유형의 돋보기와 검색 바 조합 아이콘은 이해도 기준에서 검색 바의 형태 인지 문제가 있었다. 기능 답변 또한 분산되어 검색 바의 외부 형태를 사각으로 변경 후 커서를 추가하였고, ‘Search' 레이블을 병기하여 기능을 명료화시켰다. 퍼스의 삼원 구조로 보았을 때 A유형의 쇠사슬과 문서 조합 아이콘은 도상과 도상의 조합 아이콘으로 일반적으로 도상은 인지하기 쉬운 편이나, 원본 사물과 유사성이 떨어지는 지점에서 이해도가 저하되므로 도상 아이콘 제작 시 과도한 단순화와 생략으로 대상체와 기호 사이의 유사성을 잃지 않도록 주의해야 한다. 그림 11의 오른쪽 열 2번 6개 아이콘은 이해도 점수는 3.54 이상으로 나타났지만 5번 보기의 응답률이 50%를 넘지 않아 일부 보완이 필요해 보이는 아이콘들이다. 이 아이콘들은 이해도 점수를 보아 사용자가 이해하고 사용하는 데에는 문제가 없으나, 표상하고자 하는 의미와 기능이 사용자의 해석과 일치하지 않는 지점의 보완 필요가 있으며 레이블 추가 등을 하나의 방법으로 제안한다. 퍼스의 삼원 구조로 보았을 때, 2번의 말풍선 아이콘은 지표로서 다른 아이콘의 의미와 기능을 보충해 주는 용도일 때 효과적으로 사용된다. 반면 하트는 보조 아이콘의 의미와 기능에 따라 ‘좋아요’나 ‘심장’으로 각각 다르게 해석되므로 상징을 이용할 땐 어떤 약속된 의미와 기능이 있는지 확인해야 한다.

Fig. 11.

Finalized Guidelines

그림 11의 오른쪽 열 3번은 5번 보기 응답률 모두 기준보다 높은 가장 바람직한 조합 아이콘이다. 3개 아이콘 모두 협력 관계 유형이며 각각의 아이콘은 의미와 기능의 인지도가 높고 개별 아이콘의 형태 또한 변형되지 않아 높은 이해도를 보인다는 특징을 찾을 수 있다. 퍼스의 삼원 구조로 보았을 때, 지표인 돋보기와의 조합 아이콘의 경우 상징인 플러스와 조합되었을 때에는 돋보기의 배율 증가의 확대의 의미와 기능을 이끌어냈다. 반면 도상인 폴더와 조합되었을 때에는 검색 범위가 폴더 내부임을 나타내어 검색의 의미와 기능을 이끌어냈다. 이와 같이 지표 아이콘은 해당 아이콘이 가진 여러 의미를 파악하고 표상하고자 하는 의미와 기능을 이끌어낼 수 있도록 보조 아이콘과의 조합 시 이 부분을 고려해야 한다.

한편 지표와 상징 조합 아이콘인 돋보기와 플러스 조합 아이콘의 경우, 상징 기준으로 보면 플러스가 명쾌한 증가의 의미로 사용되어 이해도가 높게 나타났다. 이와 같이 상징 아이콘을 이용할 때에는 사용자들이 모두 이해할 수 있는 확립된 형태와 인지도를 가졌는지를 고려해야 하며, 아이콘이 다른 아이콘과 조합되었을 때 명료한 해석이 가능한지가 중요하다.