아이콘

3. 디자인

아이콘 디자인은 1970년대 제록스 팰러앨토 연구소에서 컴퓨터 초보 사용자들이 인터페이스를 더 쉽게 다룰 수 있도록 돕기 위해 처음 시작되었다. 이후 애플 매킨토시와 마이크로소프트 윈도우 같은 운영 체제에서 널리 사용되면서 그래픽 사용자 인터페이스(GUI)의 핵심 요소로 자리 잡았다.

아이콘 디자인의 주된 목표는 사용자가 파일, 폴더, 응용 프로그램, 특정 기능 등을 시각적으로 빠르고 직관적으로 식별하고 조작할 수 있도록 돕는 것이다. 효과적인 아이콘 디자인을 위해서는 여러 요소를 종합적으로 고려해야 한다. 제한된 픽셀 공간 안에 표현되어야 하므로 크기와 해상도의 제약을 받으며, 다양한 화면 환경에서도 명확하게 인식될 수 있도록 단순하면서도 구별되는 모양과 색상을 사용해야 한다. 또한, 아이콘은 언어의 장벽을 넘어 의미를 전달해야 하지만, 문화적 차이에 따라 해석이 달라질 수 있으므로 국제적으로 사용될 경우 이러한 점도 신중하게 고려해야 한다.^[20]

아이콘 디자인은 단순히 미적인 그림을 만드는 것을 넘어, 사용성과 기능성을 결합해야 하는 전문적인 작업이다. 디자이너는 크기 대비, 패턴, 명암, 색상 대비 등 다양한 시각적 요소를 활용하고, 때로는 은유와 같은 기호학적 원리를 통해 아이콘의 의미를 효과적으로 전달해야 한다. 성공적인 아이콘 디자인을 위해서는 그래픽 아티스트의 기술과 사용성 연구가 중요하며, 많은 운영 체제 개발사들은 일관된 사용자 경험을 제공하기 위해 자체적인 아이콘 디자인 가이드라인을 제공하기도 한다.^{[15][16][17][2][18]}

3. 1. 시각적 요소

• 아이콘 (Icon): 대상과 시각적으로 유사한 형태를 가진다. 예를 들어, 사무실 환경에서 흔히 볼 수 있는 프린터, 가위, 파일 캐비닛, 폴더 등을 양식화하여 표현한 그림이 여기에 해당한다.
• 인덱스 (Index): 대상과 인과적 또는 연상적 관계를 가진다. 예를 들어, '프린터' 그림이 '인쇄'라는 작업을 나타내거나, '가위' 그림이 '자르기' 작업을, '돋보기' 그림이 '검색' 기능을 나타내는 경우가 이에 해당한다.
• 심볼 (Symbol): 사회적 약속이나 관례에 의해 의미가 부여된다. 문자, 악보, 수학 기호 등이 대표적이며, 컴퓨터 환경에서는 전원 켜기/끄기 기호나 USB 아이콘처럼 표준화된 기호들이 널리 사용된다.

3. 1. 1. 크기와 해상도

3. 1. 2. 모양과 색상

• 크기 대비
• 합성 (크고 작은 영역, 위/아래, 왼쪽/오른쪽, 중앙/둘레)
• 패턴 대조 (가로 줄무늬, 세로 줄무늬, 기울어진 줄무늬, 원, 직사각형 등)
• 명암 대비 (어두운 배경 위 밝은 요소 또는 그 반대)
• 테두리/그림자
• 섬세함

• 삼원색
• 빨강: 시선을 끌며 강한 인상을 준다.
• 녹색: 눈에 편안함을 주는 색이다. 난색이나 한색에 속하지 않아 온도감이 중립적이므로 다양한 환경에서 사용하기 좋다.
• 파랑: 대표적인 한색으로 시원한 느낌을 주며, 하늘이나 바다를 연상시켜 긍정적인 인상을 준다.
• 기타 색상 효과
• 진출색: 같은 평면에서도 앞으로 튀어나와 보이는 색으로, 주로 파장이 긴 난색 계열이다.
• 후퇴색: 같은 평면에서도 뒤로 물러나 보이는 색으로, 주로 파장이 짧은 한색 계열이다.
• 팽창색: 실제보다 더 커 보이는 색으로, 주로 밝은 색이다.
• 수축색: 실제보다 더 작아 보이는 색으로, 주로 어두운 색이다.

3. 1. 3. 문화적 차이

3. 2. 기능적 요소

• 아이콘: 참조하는 대상과 시각적으로 유사하다. 예를 들어, 사무실 환경의 프린터, 가위, 파일 캐비닛, 폴더 등을 양식화한 그림이 여기에 해당한다.
• 색인: 참조하는 대상과 연관성을 가진다. 예를 들어, 연기가 불을 암시하듯, 프린터 아이콘은 '인쇄' 작업을, 가위 아이콘은 '자르기' 작업을, 돋보기 아이콘은 '검색' 작업을 나타내는 데 사용된다.
• 기호: 사회적 약속이나 관례에 의해 의미가 부여된다. 문자, 악보, 수학 기호 등이 대표적이며, 컴퓨터 환경에서는 전자기기 전반에 사용되는 표준화된 전원 켜기/끄기 기호나 USB 아이콘 등이 이 범주에 속한다.

• 은유: 대표적인 예로 데스크톱 은유가 있다. 이는 1980년대 사무실 환경의 객체(파일, 폴더, 휴지통 등)를 아이콘으로 표현하여, 사용자가 익숙하지 않은 컴퓨터 환경을 친숙한 사무실 공간처럼 이해하고 사용할 수 있도록 돕는다. 스큐어모피즘 역시 은유의 한 형태로, 과거의 실제 사물 형태를 모방하여 기능을 나타내는 방식이다. 예를 들어, 데이터 저장 기능을 나타내는 플로피 디스크 아이콘은 플로피 디스크가 거의 사용되지 않는 현대에도 여전히 '저장'의 의미로 널리 인식되고 사용된다.

• 환유: 어떤 대상과 관련된 다른 대상을 사용하여 그 대상을 나타내는 방식이다. 예를 들어, 에너지 절약 설정을 나타내기 위해 전통적인 백열전구 대신 형광 전구 아이콘을 사용하는 경우가 있다.
• 제유: 부분을 통해 전체를 나타내는 방식이다. 예를 들어, 스피커 아이콘 하나가 전체 오디오 시스템의 설정을 나타내는 경우를 들 수 있다.

• 크기 및 해상도: 아이콘은 데스크톱 컴퓨터나 모바일 기기의 작은 화면 영역에 표시되므로 크기가 제한적이다. 일반적으로 썸네일 크기로 제작되며, 다양한 디스플레이 환경(크기, 해상도)에서도 명확하게 인식될 수 있도록 디자인되어야 한다. 애플 아이콘 이미지 형식과 같은 아이콘 파일 형식은 다양한 크기와 배경(어둡거나 밝은)에 최적화된 여러 버전의 아이콘 이미지를 포함하기도 한다.
• 단순성 및 명확성: 제한된 크기 안에서 의미를 효과적으로 전달하기 위해 아이콘의 세부 사항은 단순하고 명확해야 한다.
• 색상: 아이콘의 색상은 시스템의 배경색과 잘 구분되어야 하며, 시각적 구별성을 높여야 한다.
• 문화적 고려: 아이콘은 언어에 구애받지 않는 시각적 언어이지만, 문화적 배경에 따라 해석이 달라질 수 있으므로 국제적으로 사용되는 소프트웨어의 아이콘 디자인 시에는 문화적 차이를 고려해야 한다. 이러한 제약 조건 때문에 아이콘 디자인은 종종 그래픽 아티스트의 전문적인 기술을 필요로 한다.

3. 2. 1. 기능 아이콘

• 크기 대비
• 합성 (크고 작은 영역, 위/아래, 왼쪽/오른쪽, 중앙/둘레 배치)
• 패턴 대조 (가로/세로/기울어진 줄무늬, 원, 직사각형 등)
• 명암 대비 (어두운 배경 위 밝은 요소 또는 밝은 배경 위 어두운 요소)
• 틀 또는 그림자 효과
• 색 대비
• 섬세한 디테일 표현
• 애니메이션 효과

그 외에도 다음과 같은 색상 특성이 아이콘 디자인에 활용될 수 있다.

• 진출색: 같은 평면에서도 앞으로 튀어나와 보이는 색. 주로 파장이 긴 난색 계열 색상이다.
• 후퇴색: 같은 평면에서도 뒤로 물러나 보이는 색. 주로 파장이 짧은 한색 계열 색상이다.
• 팽창색: 실제보다 크고 넓어 보이는 색. 주로 밝은 색상이다.
• 수축색: 실제보다 작고 좁아 보이는 색. 주로 어두운 색상이다.

3. 2. 2. 프로그램 아이콘

• 크기 대비
• 합성 (크고 작은 영역, 위/아래, 왼쪽/오른쪽, 중앙/둘레)
• 패턴 대조 (가로 줄무늬, 세로 줄무늬, 기울어진 줄무늬, 원, 직사각형 등)
• 명암 대비 (어두운 배경 위의 밝은 요소 또는 그 반대)
• 틀 또는 그림자 효과
• 색 대비
• 섬세함의 정도
• 애니메이션 효과

아이콘 디자인에서 색상은 중요한 역할을 한다. 색(빛)의 삼원색인 빨강, 녹색, 파랑은 색상을 표현하는 기본 색이며, 이들을 혼합하여 다양한 색채를 만들어낸다. 다음은 삼원색의 색상 특성과 기타 특징적인 아이콘 색상에 대한 설명이다.

• 삼원색
• 빨강: 눈에 잘 띄고 시각적 임팩트가 강한 색이다.
• 녹색: 눈에 편안함을 주는 색이다. 따뜻한 색(난색)이나 차가운 색(한색) 어느 쪽에도 속하지 않아 온도감이 중립적이므로 다양한 상황에서 사용하기 좋다.
• 파랑: 차가운 색(한색)의 대표적인 예로, 시원한 인상을 준다. 하늘이나 바다와 같은 자연 요소를 연상시켜 사용자에게 긍정적인 느낌을 줄 수 있다.
• 기타 특징적인 아이콘 색상
• 진출색: 같은 평면에 있는 다른 색보다 앞으로 튀어나와 보이는 색을 말한다. 파장이 긴 난색 계열의 색에서 주로 나타난다.
• 후퇴색: 같은 평면에 있는 다른 색보다 뒤로 물러나 보이는 색을 말한다. 파장이 짧은 한색 계열의 색에서 주로 나타난다.
• 팽창색: 실제 크기보다 더 크게 팽창해 보이는 색(주로 밝은 색)을 말한다.
• 수축색: 실제 크기보다 더 작게 수축해 보이는 색(주로 어두운 색)을 말한다.

3. 2. 3. 브랜드 아이콘

3. 3. 아이콘의 종류

• 유사성 기반 아이콘 (Icon): 아이콘이 가리키는 대상과 시각적으로 닮은 형태를 가진다. 예를 들어, 실제 프린터 모양을 본뜬 아이콘, 가위 모양의 '자르기' 아이콘, 파일 폴더 아이콘 등이 여기에 해당한다. 사무 환경이나 특정 전문 분야의 도구를 양식화하여 표현하는 경우가 많다.
• 연관성 기반 색인 (Index): 아이콘이 가리키는 대상과 직접적인 연관성을 가진다. 예를 들어, '인쇄' 기능을 나타내는 프린터 아이콘, '검색' 기능을 나타내는 돋보기 아이콘처럼, 특정 기능이나 작업을 연상시키는 양식화된 그림을 사용한다. 이는 연기가 불을 암시하는 것과 같은 원리이다.
• 관례 기반 기호 (Symbol): 사회적 약속이나 관례에 의해 의미가 부여된 아이콘이다. 문자, 악보, 수학 기호처럼 특별한 시각적 유사성이나 직접적 연관성 없이 약속된 의미를 전달한다. 전자기기에서 흔히 볼 수 있는 전원 켜기/끄기 기호나 USB 포트를 나타내는 아이콘 등이 대표적인 예이다.

3. 3. 1. 은유적 아이콘

3. 3. 2. 오버레이 아이콘

4. 표준화

5. 사용자 상호작용

컴퓨터 운영 체제에서 아이콘은 파일, 폴더, 응용 프로그램, 장치 등을 시각적으로 나타내는 데 사용된다. 현대에는 사용자의 필요에 따라 매크로 명령어 실행, 프로세스 상태 표시 등 다양한 용도로 활용되기도 한다.

아이콘은 주로 바탕 화면, 도구 모음, 그리고 마이크로소프트 워드와 같은 응용 소프트웨어의 메뉴 등 그래픽 사용자 인터페이스(GUI) 환경 전반에서 발견된다. 사용자는 아이콘을 통해 컴퓨터 시스템과 소통한다. 문자 사용자 인터페이스(CLI) 환경에서는 특정 기능을 사용하기 위해 해당 기능에 할당된 펑션 키를 누르거나 명령어를 직접 입력해야 했지만, GUI 환경에서는 대부분의 기능이 아이콘으로 표시된다. 사용자는 마우스나 트랙볼과 같은 포인팅 장치로 아이콘 위에 커서를 이동시킨 후 버튼을 클릭하는 간단한 동작만으로 원하는 기능을 호출하거나 프로그램을 시작할 수 있다.

이러한 아이콘 기반의 인터페이스 방식은 컴퓨터 사용 경험이 적은 초보자도 시스템을 쉽게 조작할 수 있도록 돕기 위해 1970년대 제록스 팔로알토 연구소에서 처음 개발되었다. 이후 애플의 매킨토시 운영체제가 이를 채택하면서 널리 보급되었고, 현재 대부분의 주요 운영 체제는 GUI를 통해 사용자에게 정보를 표시하고 상호작용하는 방식을 기본으로 채택하고 있다.

효과적인 시각적 소통을 위해 아이콘은 다음과 같은 특징들을 고려하여 디자인된다.

• 크기 대비
• 합성 (크고 작은 영역, 위/아래, 왼쪽/오른쪽, 중앙/둘레의 배치)
• 패턴 대조 (가로, 세로, 대각선 줄무늬, 원, 사각형 등)
• 명암 대비 (밝은 배경 위 어두운 요소 또는 그 반대)
• 틀 또는 그림자 효과
• 색상 대비
• 세부 묘사의 정도
• 애니메이션 효과

그러나 모든 아이콘이 그림만으로 그 의미를 명확하게 전달하는 것은 아니다. 특히 애플리케이션마다 고유하게 등록된 아이콘들이 많아, 실제로는 아이콘만 보고 기능을 파악하기 어려운 경우가 흔하다. 이 때문에 많은 경우 아이콘 주변에 해당 기능이나 파일의 이름을 텍스트로 함께 표시하여 사용자의 이해를 돕는다.

6. 현대적 발전

컴퓨터의 아이콘은 프로그램의 내용을 그림으로 나타낸 것으로, 대부분 16×16 픽셀에서 128×128 픽셀 정도 크기의 이미지로 표시된다.

아이콘은 초보자가 컴퓨터 인터페이스를 쉽게 조작할 수 있도록 1970년대 제록스 팔로알토 연구소에서 처음 개발되었다. 이후 아이콘으로 조작되는 인터페이스는 애플의 매킨토시에 의해 대중화되었다. 현재 주요 운영 체제에서는 사용자에게 정보를 표시하기 위해 아이콘 기반의 그래픽 사용자 인터페이스 (GUI)를 사용하고 있다.

아래는 아이콘의 예시이다.

7. 아이콘 제작 도구

디자인 요구 사항 때문에 아이콘 제작은 시간이 오래 걸리고 비용이 많이 드는 과정일 수 있다. 인터넷에서는 전문적인 수준의 도구부터 소프트웨어 개발 프로그램에 번들로 제공되는 유틸리티, 독립 실행형 프리웨어에 이르기까지 다양한 아이콘 제작 도구를 찾을 수 있다.^[24] 이러한 아이콘 도구와 아이콘 세트가 광범위하게 사용 가능해지면서, 사용자 지정 아이콘이 시스템에 포함된 다른 아이콘과 스타일이 일치하지 않는 문제가 발생하기도 한다.

아이콘은 2000년 이전의 초기 8비트 픽셀 아트에서 점차 발전하여, 부드러움, 선명함, 가장자리 강조, 광택 또는 유리 같은 외관, 알파 채널로 렌더링되는 그림자 효과 등을 특징으로 하는 보다 사실적인 모습으로 변화했다.

초기 플랫폼에서 사용되던 아이콘 편집기는 일반적으로 간단한 그리기 도구를 사용하거나 간단한 이미지 필터를 적용하여 아이콘 이미지를 픽셀 단위로 수정할 수 있는 기본적인 래스터 이미지 편집기를 포함했다. 전문 아이콘 디자이너는 아이콘 편집기 내에서 직접 수정하기보다는 더 발전된 드로잉 또는 3D 모델링 응용 프로그램을 사용하는 경우가 많다.

아이콘 편집기의 주요 기능은 이미지를 아이콘으로 생성하는 것이다. 아이콘 편집기는 원본 이미지를 아이콘에 필요한 해상도와 색상 심도로 리샘플링한다. 그 외에도 실행 파일(EXE, DLL)에서 아이콘을 추출하거나, 아이콘 라이브러리를 생성하거나, 아이콘의 개별 이미지를 저장하는 등의 기능을 수행한다.

모든 아이콘 편집기는 시스템 파일(폴더, 텍스트 파일 등) 및 웹 페이지용 아이콘을 만들 수 있다. 이러한 아이콘은 Windows 및 웹 페이지의 경우 ICO 확장자를, Macintosh의 경우 ICNS 파일 확장자를 갖는다. 편집기가 커서도 만들 수 있는 경우, 이미지는 Windows 및 Macintosh 모두에 대해 CUR 또는 ANI 파일 확장자로 저장될 수 있다. 새 아이콘을 사용하는 것은 일반적으로 이미지를 올바른 파일 폴더로 옮기고 시스템 도구를 사용하여 아이콘을 선택하는 비교적 간단한 과정이다. 예를 들어, 윈도우 XP에서는 '내 컴퓨터'로 이동하여 탐색기 창에서 '도구' > '폴더 옵션' > '파일 형식'을 선택하고 '고급'을 클릭하여 해당 파일 형식과 연결할 아이콘을 선택할 수 있었다.

개발자는 아이콘 편집기를 사용하여 특정 프로그램 파일용 아이콘을 만들기도 한다. 새로 생성된 프로그램에 아이콘을 할당하는 작업은 일반적으로 해당 프로그램을 개발하는 데 사용되는 통합 개발 환경(IDE) 내에서 수행된다. 그러나 윈도우 API를 사용하여 응용 프로그램을 만드는 경우, 컴파일하기 전에 프로그램의 리소스 스크립트에 한 줄을 추가하기만 하면 된다. 많은 아이콘 편집기는 편집을 위해 프로그램 파일에서 고유한 아이콘을 복사할 수 있지만, 프로그램 파일에 직접 아이콘을 할당할 수 있는 편집기는 극소수이며 이는 훨씬 더 어려운 작업이다.

간단한 아이콘 편집기와 이미지-아이콘 변환기는 웹 애플리케이션 형태로 온라인에서도 사용할 수 있다.

다음은 주목할 만한 컴퓨터 아이콘 소프트웨어 목록이다.

다음은 아이콘을 생성하고 편집할 수 있는 래스터 그래픽 응용 프로그램 목록이다.

참조

_[1] 웹사이트 Former Apple Designer Kare Testifies at Samsung Patent Trial https://web.archive.[...] Bloomberg LP 2012-08-07
_[2] 웹사이트 "ICT Pictograms, Icons and Symbols'', 10 May 2011" https://web.archive.[...] 2011-06-01
_[3] 웹사이트 Saad Raja - 7 tips for UI design http://saadraja.co/7[...] 2017-12-05
_[4] 웹사이트 "Power Switch Labeling for Medical and Other Devices'', 10 May 2011" https://web.archive.[...] 2011-06-01
_[5] 웹사이트 Standard Icons - Windows applications https://docs.microso[...] 2021-02-09
_[6] 웹사이트 "MSDN Standard Icons'', 10 May 2011" http://msdn.microsof[...]
_[7] 서적 "Introduction: The Desktop Metaphor and New Uses of Technology " MIT Press, Cambridge, Massachusetts 2007
_[8] 웹사이트 Pygmalion: A Creative Programming Environment http://worrydream.co[...]
_[9] 웹사이트 Lecture 6 Guest Lecture (David Canfield Smith) https://scs.hosted.p[...]
_[10] 웹사이트 Pygmalion http://acypher.com/w[...]
_[11] 웹사이트 'GUIdebook > Articles > "Designing the Star User Interface"' https://guidebookgal[...]
_[12] 서적 "Pictures, Symbols and Signs" Bedford / St. Martins, Boston 1969
_[13] 웹사이트 Custom Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer https://developer.ap[...]
_[14] 간행물 User' Theories of the Desktop Metaphor, or Why we should seek Metaphor-Free Interfaces 2007
_[15] 웹사이트 Icons and Images, Human Interface Guidelines for iOS https://developer.ap[...] 2018-10-12
_[16] 뉴스 Icon Design Principles https://material.io/[...] 2018-10-12
_[17] 웹사이트 App icons and logos for UWP apps https://docs.microso[...] 2018-10-12
_[18] 논문 Factors affecting the design of computer icons Elsevier 2002-04
_[19] 논문 "Kineticons: Using Iconographic Motion in Graphical User Interface Design. " http://chrisharrison[...] ACM, New York, NY 2011
_[20] 서적 "Rhetoric of the Image" Bedford / St. Martins, Boston 1969
_[21] 웹사이트 GUI windows: definition, advantages, origin and future. http://www.linfo.org[...]
_[22] 웹사이트 The first GUIs http://www.catb.org/[...]
_[23] 서적 The Vocabulary of Comics Bedford / St. Martins, Boston 1994
_[24] 웹사이트 "Open Dictionary Desktop Customization: Icons'', 10 May 2011" http://www.dmoz.org/[...]
_[25] 웹사이트 Resource editors - Image Editor for Icons (C++) https://learn.micros[...] 2021-11-11
_[26] 문서 [[古代ギリシア語]]再建音では「エイコーン」