Real Design

안드로이드 아이콘 디자인 팁 본문

UI&UX/디자인원칙들

안드로이드 아이콘 디자인 팁

GS Real Design 2013. 7. 24. 18:42

Use common naming conventions for icon assets

제작된 아이콘들에 대해 일반적(규칙적)인 명명 규칙을 사용하라.


아이콘을 저장할 때, 이미지 파일들의 이름이 관련있는 것들끼리 디렉토리 내에서 그룹핑될 수 있도록 정하라.

특히 이것은 일반적인 prefix를 사용하여 각각의 아이콘 형태를 나타내는데 매우 유용하다.

이는 반드시 해야만 하는 것은 아니지만, 규칙을 지정해서 관리가 수월하게 하기 위한 하나의 '팁'이다.



Set up a working space that organizes files for multiple densities

여러개의 밀도를 가진 파일들을 정리하기 위한 작업 공간을 설정하라.


여러가지 해상도에서의 스크린 밀도를 지원한다는 것은, 같은 아이콘을 여러개의 다른 해상도 버전으로 만들어야 한다는 것을 의미한다.

다른 해상도의 파일 복사본들을 관리하거나 찾기 쉽게 하기 위해서, 해상도별로 파일들을 분류하는 디렉토리를 만드는 것을 추천한다.


이런 구조를 이용하면 특정한 밀도 구조에 맞춰서 앱 리소스에 완성된 아이콘들을 저장할 수 있게 된다.

당신의 작업 공간(워크 스페이스)의 구조는 실제 어플리케이션의 리소스 구조(안드로이드 개발의 디렉토리)와 매우 비슷하기 때문에,

이런 구조를 이용한다면 쉽게 어떤 아이콘들이 어플리케이션의 리소스 디렉토리로 복사되어야 하는지 결정할 수 있다.


이렇게 그들의 밀도에 따라서 제작된 결과물들을 저장하는 것은 디자이너 혹은 개발자가 쉽게 파일이름으로 구별이 가능하고

이는 다른 밀도이지만 동일한 파일 이름을 공유해야하는 경우를 쉽게 해결할 수 있다. 이는 매우 중요한 역할을 한다.


비교를 위해, 아래 나온 디렉토리 구조는 전형적인 어플리케이션 상에서의 모습을 나타낸 것이다.



Use vector shapes where possible

가능한 곳이라면 벡터를 이용하라.


포토샵과 같은 많은 이미지 편집 툴에서 벡터 요소와 래스터 레이어, 효과들을 조합하여 사용할 수 있다.

가능한 곳이라면 디테일이나 가장자리의 비트 손실 없이 사이즈 조절이 가능하도록 벡터 도형들을 사용하라.

벡터를 사용하면 작은 해상도에서도 픽셀 경계에 있는 가장자리나 모서리를 쉽게 처리할 수 있다.





Start with large artboards

처음에는 큰 그림으로 시작하라.


디자이너는 아이콘을 제작하면서 다양한 스크린 밀도에 따라 리소스를 생성해 내야 한다.

이렇기 때문에 아이콘의 가로세로 비율에 맞는 큰 artboard에서 아이콘 디자인을 시작하는 것이 가장 좋다.

예를 들어 런쳐 아이콘이 화면 밀도에 따라 96, 72, 48, 36 픽셀인데 처음에 864*864 artboard에서 런쳐 아이콘을 그리게 되면

최종적으로 만들어낼 런쳐 아이콘의 대상 크기로 줄여서 사용하게 되면 훨씬 쉽고 분명해 질 수 있는 것이다.





When scaling, redraw bitmap layers as needed

확대를 할 때에, 비트맵 레이어는 필요에 따라 다시 그려라.


벡터 레이어가 아닌 비트맵 레이어에서 이미지의 크기를 조정하게 되면

해당 레이어가 높은 밀도에서도 선명하게 보여질 수 있도록 직접 다시 그려야 할 필요성이 있다.

예를 들어 60*60 사이즈의 원이 mdpi 해상도에 맞춰서 비트맵에 그려졌다면 

새로 필요하게 된 hdpi의 90*90 사이즈 리소스는 새로 그려져야 한다.





When saving image assets, remove unnecessary metadata

이미지를 저장할 때에, 불필요한 메타데이터는 모두 제거하라.


안드로이드 SDK 툴에서 앱 리소스들을 기기가 알아들을 수 있는 이진 코드(binary)로 변환할 때 자체적으로 png를 압축하긴 하지만

더 좋은 방식은 PNG파일의 제작을 마치고 나서 불필요한 헤더나 메타데이터를 없애주는 것이다.

OptiPNG나 Pngcrush 등의 툴을 이용하면 메타데이터들을 제거할 수 있고 이미지 파일의 사이즈도 최적화 할 수 있다.





Make sure that corresponding assets for different densities use the same filenames

같은 이미지의 다른 밀도인 파일들이 같은 파일 이름을 사용하고 있는지 확인하라.


같은 이미지의, 하지만 다른 밀도를 가진 아이콘 파일은 해상도만 다를 뿐 동일한 파일 이름을 사용해야 한다.

하지만 밀도 별 리소스 디렉토리에 저장하기 때문에 파일 이름이 같다고 해서 충돌이 일어나는 일은 '당연히' 없다.

이는 안드로이드에서 지원하는 것이며 위에서 이미 언급했듯이 각 기기의 화면에 따라 시스템이 적절한 리소스를 찾아 로드한다.

이러한 이유로 각 디렉토리에 있는 이미지들의 집합은 일관성을 유지해야 하고 특정한 접미사가 붙어있어서는 안된다.


'UI&UX > 디자인원칙들' 카테고리의 다른 글

안드로이드 아이콘 디자인 팁  (0) 2013.07.24
웹사이트 디자인 10가지 지침  (0) 2013.04.27
좋은 인터랙션 디자인의 특징  (0) 2013.03.12
GUI디자인 원칙  (0) 2013.03.07
구글 디자인 원칙  (0) 2013.02.25
IBM 디자인 원칙  (0) 2013.02.25
0 Comments
댓글쓰기 폼