[ch2] 아이콘

아이콘

• 복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용을 도와주는 요소.
• 명확한 의미 전달
  텍스트 없이도 문화, 나이, 배경 제한, 별도의 해석 없이도 좁은 공간, 짧은 시간에 누구에게나 일관된 의미를 전달할 수 있다.
• 브랜드 아이덴티티
  아이콘은 시각적 매력을 더해 디자인을 더 풍부하게 만들 수 있으며, 브랜드의 성격, 이미지, 의미를 반영한 아이콘은 사용자 기억에 오래 남는다.
  
  

일관된 아이콘

• 일관된 스타일을 적용하여 사용자의 인지 시간을 단축시킬 수 있다.
• 아이콘 스타일 : 아이콘 스타일에는 Outlined, Filled, Colored, Image와 같은 다양한 스타일이 있다.
  ▶ Outlined와 Filled는 기본적인 형태로 가장 많이 사용된다.
  ▶  Colored는 사용자의 행동에 피드백을 주거나 행동을 유도할 때 사용된다.
  ▶  Image는 높은 주목도가 필요할 때 주로 사용한다.
• 스트로크(두께)
  ▶ 두께에 따라 아이콘의 분위기가 달라진다. 두께가 얇으면 가벼운 느낌을, 두꺼우면 무거운 느낌을 준다.
  ▶ UI 디자인 전체 컨셉에 영향을 미치기 때문에 동일한 두께로 디자인하는 것이 좋다.
• 곡률
  ▶ 모서리의 굴림 정도. 아이콘의 통일성을 위해 규칙을 정하고 모든 아이콘에 동일하게 적용한다.
  ▶ 곡률이 0에 가까울 수록 직각으로 현대적이면서 단단하고 단순한 느낌을, 높을 수록 둥글고 부드러우면 따뜻하며 친근한 느낌을 준다.
  
• 일관된 스타일
  ▶ 아이콘의 여러 요소를 통일하여 일관되게 디자인하는 것이 중요하다.
  ▶ 하나의 제품이나 서비스에서는 동일한 스타일을 적용하여 작업한다.
  ▶ 아이콘은 전체 디자인 컨셉과 아이덴티티 대표하는 요소로 사용자에게 일관된 경험을 전달할 수 있어야 한다.
  
  

아이콘 시각 보정

• 사람의 눈은 착시현상으로 인해 글자나 도형이 불균형으로 보이거나 위치, 크기가 다르게 보일 수가 있어, 시각 보정을 통해 균형 있는 아이콘을 만들 수 있다.
  
  예를 들어, 재생 버튼 같이 내부의 도형이 무게 중심이 달라 정렬되지 않아 보이는 경우, 치우쳐보이는 방향의 반대로 위치를 이동하여 중앙 정렬로 보이게 할 수 있다.
  
  또한, 실제 사이즈가 동일한 도형이더라도, 도형의 면적이 달라 크기 차이가 나는 것처럼 보이기에 한 쪽의 크기를 키우거나 줄여서 균형을 맞출 수 있다.

아이콘 단순화

• 모바일 스크린은 작기 때문에 디테일하게 그릴수록 아이콘이 무엇을 의미하는지 이해하기 어려워지기 때문에 단순화 시켜서 사용자의 상황과 환경에 영향 받지 않고도 의미를 알 수 있게 한다.

아이콘의 구조

• 아이콘 레이아웃
  ▶ 트림 영역 : 아이콘 실제 사이즈로, 이 영역 밖으로 아이콘의 형태가 확장되지 않도록 주의해야 한다.
  ▶ 라이브 영역 : 패딩 영역을 제외한 실질적인 작업 영역.
  ▶ 패딩 : 트림 영역 안쪽의 상하좌우 일정 수준 만큼의 영역으로, 아이콘 리사이징 시 이미지 잘림을 방지하기 위한 여유 공간.
  
  
• 아이콘 형태
  ▶ 정사각형, 원형, 가로로 긴 사각형, 세로로 긴 사각형 4가지로 나눌 수 있다.
  ▶ 다양한 형태의 아이콘은 그리드에 맞게 배치하여 일관되게 제작되야하며, 이를 위해 아이콘의 너비를 동일하게 적용해야 비슷한 비율로 아이콘을 제작할 수 있다.
  ▶ 같은 영역 안에서 가로로 긴 사각형은 가로의 너비를 세로가 긴 사각형은 세로 너비를 동일하게 적용한다.
    
• 아이콘 키 라인
  ▶ 아이콘을 일관되게 배치하기 위해 명확한 규칙으로 이 키 라인을 기준으로 아이콘을 제작한다.
  
  

배율 설정

• 배수 설정하기 : 제품에 사용될 아이콘 사이즈를 규정. 아이콘은 해상도에 따라 리사이징 되기 때문에 사이즈의 증감 시, 소수점이 발생하지 않도록 작업한다.
• 스케일 설정하기 : 아이콘은 해상도에 따라 리사이징이 필요하며, 스케일을 통해 이를 진행할 수 있다.