안드로이드 버전 O에서 새로운 아이콘 포멧 ‘어댑티브 아이콘’ 이 추가 되었습니다. 어댑티브 아이콘은 앱 아이콘이 어떤 디바이스에서 보여지더라도 형태적 일관성을 유지하며, 보다 흥미로운 시각 효과를 가질 수 있도록 새로운 길을 제시합니다. 이 글은 어댑티브 아이콘이 어떻게 작동하는지 설명하고, 아이콘을 디자인 하기 위한 몇몇 테크닉을 소개합니다.
어댑티브 아이콘이 어디에서 시작되었는지 알고 싶다면 이전 글을 참고하세요.
기본 원리
크기와 형태
어댑티브 아이콘은 108dp * 108dp 크기의 이미지를 사용합니다. 하지만 디바이스, 런처에 따라 다른 형태로 잘리기 때문에, 최대 중앙 72dp * 72dp 영역까지만 표현됩니다. 어떤 형태로 잘리더라도, 중앙으로부터 최소 33dp의 영역은 모두 보여집니다.
안쪽 66dp * 66dp의 원형 영역이 잘리지 않는 안전 영역이라 할 수 있습니다.
Keylines
키라인은 아이콘의 기본 그리드로, 당신의 아이콘 디자인이 다른 앱들과 유사한 시각적 비율을 가질 수 있도록 도와줍니다. 키라인 형태는 아래와 같습니다.
- 원형: 지름 52dp & 32dp
- 정사각형: 44dp * 44dp, 4dp의 둥근 모서리
- 직사각형: 52dp * 36dp & 36dp * 52dp, 4dp의 둥근 모서리
글의 마지막에 키라인 템플릿이 포함되어 있습니다.
Layers
어댑티브 아이콘은 배경과 전경, 두장의 레이어로 구성됩니다. 두 레이어는 동일하게 108dp * 108dp의 크기를 가집니다. 배경은 불투명해야 하며 전경은 투명도를 가질 수 있습니다. 배경과 전경을 위아래로 위치하게 됩니다.
실제 구현되는 영역(최대 72 * 72 dp)보다 큰 두장의 레이어를 제공하는 것을 통해, 흥미로운 애니메이션과 상태를 만들어 낼 수 있게 되었습니다. 정확히 어떤 효과를 제공하고, 어떻게 적용될 것인가는 아직 가능성이 열려있는 부분으로, 디바이스와 런처가 결정하게 될 것입니다. 아래는 두 레이어의 움직임과 반동에 시간차를 주거나 스케일을 서로 다르게하여 만들 수 있는 몇가지 간단한 예시입니다.
108 dp * 108 dp 크기의 이미지에서 안쪽 72 dp * 72 dp영역에 포함 되지 않은 바깥 쪽 18dp의 둘레는, 평소에는 보이지 않는 추가적인 영역으로, 애니메이션 중에만 표현될 것입니다.
디자인할 때 고려할 사항
프로덕트 아이콘을 위한 마테리얼 디자인의 가이드라인은, 여전히 매우 많은 부분에서 그대로 적용됩니다. 특히 아이콘의 뼈대, 그림자와 마감 같은 부분은 변하지 않습니다. 하지만 여러분은 구성 요소들을 배경에 배치할지, 전경에 배치할지 선택하여 다양한 효과를 만들어 낼 수 있습니다.
나는, 많은 아이콘들이 전경에 브랜드 마크를 넣고, 배경을 단색으로 처리하는 형태로 구성될 것이며, 이것들이 잘 작동할 것이라고 확신합니다. 이런 형태는 어떤 디바이스와 런처에서도 문제없이 구현될 것 입니다. 하지만 저를 흥분시키는 지점은, 앞으로 우리가 어댑티브 아이콘의 가능성을 이용하여, 재미있고 흥미로운 방향을 찾아내고 이를 통해 정말 즐거운 경험을 선사하는 아이콘을 만들어 나갈 과정입니다. 몇가지 유념하면 좋을 특성과 아이디어들을 소개합니다.
Clipping
어댑티브 아이콘의 동적인 특성 때문에, 테두리가 어떻게 잘려질지 알 수 없습니다. 브랜드 마크처럼 잘려나가서는 안 될 중요한 것들은 66dp의 세이프 존 안에 배치시키고 가장자리로부터 떨어트려야 합니다.
Background Anchoring
전경처럼 보이는 요소를 배경에 배치하면, 실제로 두 요소가 독립적으로 이동하게 할 수 있습니다. 예를 들어 계산기 앱의 다른 기호들은 전경에 배치하고, 등호(=)만 배경 악센트 컬러 위에 배치하면 아래와 같은 효과를 낼 수 있습니다.
이렇게 배치하면 밝은 색 블록에 놓여진 등호가 배경과 따로 움직이면서 시선을 끌지만, 전경의 요소들보다 좌우로 더 적게 움직이며 레이어에 깊이감을 더하게 됩니다.
전경으로 감추고 배경을 보이게 하기
아래를 덮는 색면을 전경에 배치시키고 구멍을 내 배경을 보이게 하는 방법으로 재미난 상황들을 연출할 수 있을 것이라 생각합니다.
구글 플레이 스토어 아이콘을 한번 고려해봅시다. 아마 아래와 같은 형태가 선택할 수 있는 ‘뻔한’ 방법으로, 삼각형을 전경에 배치하고, 배경에 흰색을 체우는 것입니다.
이렇게 하는 대신에, 우리는 배경에 색이 있는 레이어를 위치시키고, 전면에 삼각형으로 뚫린 흰 레이어를 배치시켜, 멈춰있을 때 동일하게 보이는 결과를 만들 수 있습니다.
이 방법을 적용하면 크기나 위치에 변화가 있을 때, 뚫린 영역을 통해 색면을 테두리와는 독립적으로 이동시킬 수 있습니다.
빛과 그림자
광원 효과와 그림자 효과를 각기 다른 레이어에 배치시켜 재미난 결과를 만들 수 있습니다. 예를 들어 그림자가 길게 떨어지는 Long-shadow 요소를 전경에 배치하면 그림자가 함께 움직이는 효과를 연출할 수 있습니다. 마찬가지로 광원 효과도 전경에 위치시킴으로써 배경에 있는 것보다 더 동적으로 만들 수 있습니다. 예를 들어, 효과를 담당하는 레이어를 전경에 배치해 광원이 존재하는 것처럼 보이게 할 수 있습니다. 전경에 배치하면 아이콘이 움직일 때 배경과는 다른 속도로 움직이게 됩니다.
그림자가 전경과 떨어져 움직이거나 배경 뒤에 있는 것처럼 보이는 어색한 효과가 발생하지 않도록 주의해야합니다. 또한 다른 아이콘과 함께 보여질 때를 고려해 조명 효과를 조절하고 마테리얼 가이드라인과 동떨어지지 않도록 해야합니다.
뒤에 숨겨두기
전경에 완벽히 가려지도록 배경에 요소를 배치하여 평소에는 숨겨져 있다가 애니메이션이 발생할 때만 보이게 만들 수 있습니다.
Resources and tools
다음은 어댑티브 아이콘을 만들 때 템플릿으로 사용할 수 있는 스케치 파일입니다. 파일은 아이콘 그리드, 키라인, 안전 영역을 보여주며, 스케치 심볼로 작성되어있기때문에 마스터 아트보드만 편집하면 크롭된 다양한 형태를 미리 볼 수 있습니다.
어도비 일러스트레이터가 더 편한 사용자를 위해 AI파일 또한 첨부합니다.
추가적으로 아래의 리소스도 확인할 수 있습니다.
- Adaptive icon preview tool
- Affinity Designer template
- Bjango templates (어댑티브 아이콘 포함)
- Figma template (로그인이 필요합니다.)
어댑티브 아이콘 실험실
어댑티브 아이콘을 개발하면서, 저는 전경과 배경의 인터렉션 차이로부터 많은 미묘한 요소들이 발생한다는 것을 느끼게 되었습니다. 이 부분은 미확정 된 영역으로, 제조사와 런처들이 어떻게 적용할 지 아직은 알 수 없습니다. 해당 영역의 실험을 돕기 위해, 어댑티브 아이콘에 적용되는 효과를 테스트해보고 당신의 아이콘 디자인 도울 수 있는 작은 앱을 만들었습니다.
이 앱은 디바이스에 설치된 모든 앱을 어댑티브 아이콘으로 표시합니다. 화면을 스크롤 하면 아이콘에 시차 효과가 적용되며 아이콘을 터치하면 배율이 적용됩니다. 효과의 강도를 조절하고 모든 아이콘에 적용되는 마스크를 변경할 수 있습니다. 이 툴을 사용하면 다양한 디바이스에서 당신이 만든 아이콘이 어떻게 표현될 지 알아볼 수 있습니다.
APK를 다운로드 받거나 깃허브에서 소스를 확인할 수 있습니다.
만들고 적응하기
이 글을 통해 당신이 멋진 어댑티브 아이콘을 디자인 할 수 있는 정보와 영감을 모두 얻었기 바랍니다. 한명의 사용자로써, 앱 아이콘들이 보다 명확한 규칙을 가지고 일관성있게 적용될 날이 기다려집니다. 우리가 만들어낼 창의적인 어댑티브 아이콘들이 저를 흥분시킵니다.
당신이 어댑티브 아이콘의 개발자라면 다음 글을 읽어보세요.
