앱 아이콘 크기 어떻게 정하면 될까?

앱 리뉴얼을 진행하면서 매 순간이 고민과 선택의 연속이었습니다. 오늘은 앱 메인 화면을 기획하면서 아이콘의 크기를 어떻게 결정했는지에 대해 이야기 해보려고 합니다.

 

참고:  material.io/design

구글의 디자인 가이드인 Material design에는 세 가지 종류의 아이콘이 있습니다. 

- Product icon (프로덕트 아이콘)

- System icon (시스템 아이콘)

- Animated icon (애니메이티드 아이콘)

 

이 중 오늘 이야기 할 아이콘은 바로 'System icon (시스템 아이콘)'입니다. 시스템 아이콘은 일반적인 액션, 파일, 장치 그리고 디렉토리를 상징한다라고 정의되어 있습니다. 앱 안에서 쉽게 찾아볼 수 있는 아이콘이 시스템 아이콘입니다. 

 

 

문제 상황

 

앱 프로토타입 버전이 완성되었습니다. 옆 자리에 앉은 디자이너 친구와 둘이서 유저 플로우 별로 나누어 화면을 디자인하기로 했습니다. 각자 맡은 화면을 디자인 하기 전에 우선 결정해야 할 것들이 몇가지 있었습니다. 레이아웃 사이의 간격, safe area의 크기 등과 함께 아이콘의 크기도 정해야 했습니다.

 

먼저 만들어 놓은 48*48px의 아이콘

디자인 시스템을 만들면서 아이콘은 먼저 만들어놓았습니다. 프레임의 크기는 48*48px, stroke는 2.5였습니다. 이 아이콘을 앱에 바로 넣기에는 크기가 아주 커서 줄일 필요가 있었습니다. 우선 가이드에 따르지 않고 눈으로 보기에 괜찮은 크기를 정해보기로 했습니다.

 

28px의 아이콘 크기

그것이 28px에 터치영역까지 포함하면 44px였습니다. 그런데 문제점이 생겼습니다. 48px에서 28px로 줄이니 stroke가 2.5->1.46으로 줄어들어 애매한 굵기가 되었습니다. 그래서 stroke를 1.5로 정했는데 그렇게 하면 만들어놓은 모든 아이콘의 굵기를 조절해야 했습니다. 게다가 업계 표준 사이즈를 확인해야겠다고 생각해서 결국엔 가이드를 다시 참고하게 되었습니다.

 

가이드라인 규격

 

구글 디자인 가이드에서는 아이콘 크기 24px, 터치영역 48px을 기준으로 잡아주고 있습니다.

가이드대로 만들어봅시다!

만들어진 아이콘을 48px에서 24px로 크기를 줄여보니 stroke가 1.25가 되어 애매한 굵기를 탈출하게 되었습니다. ios에서 만든 휴먼 인터페이스 가이드라인에서는 터치 영역이 44px인데 이번 앱의 디자인은 안드로이드와 ios 공용으로 사용할 것이기에 터치영역까지 최종 48px로 결정하게 되었습니다.

 

마무리 세 줄 요약

 

- 아이콘을 만들 때 (패딩까지 고려해서) 24*24px 사이즈로 만들어야합니다.

- Stroke는 1-1.5 사이로 정하면 좋습니다.

- 앱에 배치할 때는 터치 영역까지 고려해야합니다.

 

이렇게 오늘도 비전공자 디자이너는 몸으로 부딪치며 배웁니다 :)