[ 웹디자인 ] 아이콘

• " 목차 "

 

01. 아이콘 사이즈

아이콘 사이즈는 구글 머터리얼 가이드에 따르면 18px, 24px, 36px, 48px의 사이즈로 각각 만들어 사용하는 것을 추천한다.
가장 많이 사용하는 사이즈는 24px 이며, 16의 폰트를 쓸 때 가장 잘 어울린다고한다.

 

02. 아이콘 만들기

• 18px * 18px 의 경우 여백 1px
• 24px * 24px 의 경우 여백 2px
• 36px * 36px 의 경우 여백 3px
• 48px * 48px 의 경우 여백 4px

아이콘을 만들 때, 보통 원하는 사이즈에 1~4px 정도의 여백을 주어 작업해야한다.
여백을 주지 않으면 아이콘의 끝이 잘릴 위험이 크기 때문이다. 

 

03. 비트맵과 백터

• 포토샵 = 비트맵 형식 = 픽셀(px)
• 일러스트 = 백터 형식 = 앵커 포인트(data)

비트맵은 픽셀로 이루어져있다. 각 픽셀마다 색 데이터를 가지고 있고, 크기가 늘어나거나 줄어들면 그 공간만큼 색을 삭제하거나 본인의 색을 나누어 준다. 그렇기 때문에 크기를 줄인다음 키우면 가지고 있던 색 데이터가 휘발되어 이미지가 깨져 보이는 것이다. 리터칭을 할 경우에도 기존 픽셀 안에 값이 삭제되고 채워진다. 양과 틀이 정해져 있기 때문에 용량이 많이 변하지 않고 가벼운 것이 장점이다.
PNG, JPG, GIF 와 같은 확장자들이 비트맵 방식이다.

백터는 픽셀이 아닌 앵커 포인트, 좌표 값으로 데이터를 기억한다. 그렇기 때문에 크기가 변해도 앵커 포인트의 좌표값은 변하지 않아 이미지가 깨지지 않는 것이다. 
우리가 보는 브라우저도 모두 백터 형식이고, 확장자로는 svg 등이 있다.
svg 의 경우 인터넷 익스플로러 9버전부터 사용 가능하기 때문에 이전 버전부터 대응하는 프로젝트라면 svg 파일 확장자를 사용할 수 없다.

 

04. 버튼 디자인시 여백

모바일에서 버튼을 디자인할 때 '터치 포인트'를 고려해야한다.
데스크탑에서 사용하는 커서는 1~2 px 도 클릭이 가능한 정밀 포인터지만 모바일에서는 손가락으로 클릭하기 때문에, 최소 7mm(26px)정도의 영역을 확보하는 것이 좋다.
11 - 13mm(42 - 49px) 정도가 적당하며, 애플에서는 44PT, 구글은 48DP로 최소 크기를 추천하고 있다. 

 

https://yerica.tistory.com/186