2탄을 읽기 전, 👉 디자이너와 개발자가 함께 읽는 안드로이드 UI & GUI 디자인(1) 보러가기
이미지 소스 제작
해상도별 작업
- 원칙적으로는 가급적 모든 해상도에 대응하는 것이 좋다. 해상도별로 최적의 이미지 소스를 갖고 있는 것이 시스템에 의해 리사이즈된 이미지를 보여주는 것보다 품질이 좋고, 성능 저하를 불러일으킬 위험이 적기 때문이다.
실제 화면과 비교
버튼
- 48dp 리듬이라고 해서 버튼 자체를 맞출 필요는 없고 위 아래 여백을 빼고 나면 40dp 정도가 적절한 크기
- 눌렸을 때의 버튼 이미지를 잘 표현해줘야 사용자에게 적절한 피드백이 전달되므로 일반, 눌렸을 때 두 가지의 상태는 반드시 포함해야 한다.
- 키보드, 마우스 등 입력장치가 있을 때엔 포커스 상태도 필요하다.
- 머테리얼 디자인 가이드에서의 State
아이콘
- 아이콘의 종류에는 런처 아이콘, 액션바 아이콘, 컨텍스트 아이콘, 알림 아이콘 등이 있다.
- 어댑티브 아이콘은 앱 아이콘이 어떤 디바이스에서 보더라도 형태적 일관성을 유지하며, 하나의 아이콘으로 다른 기기에서도 다양한 모양을 표시 할 수 있다. (관련 링크)
이미지 클리핑
- 서버 내에서 처리하는 방법
- 모양을 정하는 건 디자이너가, 처리하는 건 개발자가.
- 각이 없는 단순한 도형일 수록 쉬움
- 성능 저하 없음
- 사용자가 이미지를 등록/수정할 때마다 서버 내에서 작업을 거쳐야 한다.
- 서버 내에 이미지를 한 벌 더 갖고 있어야 하는 부담이 생긴다.
- 모양 자체를 바꾸는 경우 처리에 며칠이 걸릴 수 있다.
2. 앱 내에서 처리하는 방법
- 서버에는 가공하지 않은 이미지가 쌓여있고 이 것을 앱 내에서 불러 이미지 가공을 한다.
- 적정한 크기 조절이나 모양 조절은 사용자의 기기 성능에 의존한다.
- 기기마다 사용자 경험이 달라진다.
3. 스텐실 이미지를 만들어 위에 덮는 방식
- 어댑티브 아이콘 방식과 같다.
- 효율적인 방법
- 클리핑 이미지 뒤로 다른 이미지를 넣는 것이 불가능 (스텐실 이미지가 jpg처럼 자리를 차지하고 있기 때문)
개발자와 협업
스타일 xml 작성
- 6자리 16진수 앞에 두 자리는 알파 값 (#80000000은 opacity가 50%인 검정 색상)
- 16진수값을 확인하는 것보다는 ‘slategray 30’, ‘bluegray 70’ 정도로 지정해놓고 커뮤니케이션하는 편이 수월할 것이다.
개발자와 커뮤니케이션하는 팁
- 네트워크가 붙었을 때, 떨어졌을 때 혹은 불안정할 때, 사용자가 뭔가 액션을 취했다가 취소해버렸을 때, 전체 흐름에서 갑자기 이탈해버렸을 때 등도 고려한다.
- 디자이너나 기획자는 매우 합리적이고 이성적인 사용자가 쓸법한 시나리오 하나만을 생각하는 경우가 많다.
효율적인 디자인 작업
작명 규약
- nearby_icon_outdoors_pressed.png (위치_종류_내용_상태)
- 이미지의 종류 구분은 일반적으로 아이콘, 배경, 버튼, 상태표시줄 이미지, 이외의 나머지 정도로 분류하고 있다.
- 이미지의 상태는 접미사 형태로 많이 쓴다.
조금 낯설었던 안드로이드와 친해져보는 시간이었다. 여전히 낯설고 어려운 부분이 많지만 더 친해지도록 노력해보겠다. 함께 스터디 해준 스터디원 분들에게 감사드린다.
