픽셀 펫 제작기 04. 아이콘 벡터화 완성과 포커스 UX
·2 min read·4 / 4
도트 잔재를 걷어내고 아이콘을 전부 벡터로
인터페이스 아이콘 전부를 SVG 벡터화했다. 도트 잔재를 제거하는 마무리 작업이었다. 8번째 알림 아이콘은 종 모양에서 몬스터가 부르짖는 모습으로 교체했다.
FOOD 아이콘, 세 번 갈아엎었다
FOOD 아이콘 시안을 반복했다. 닭다리(#5) → 햄(#9) → 다시 닭다리(#12). 마지막 시안은 둥근 살 덩어리에 뼈 포크와 음각 하이라이트를 넣은 형태다.
세 번 갈아엎고 나서야 알았다. 8px 셀 크기에서는 정확한 묘사보다 볼드한 실루엣에 의미 악센트 하나를 얹는 쪽이 판독성이 좋다.
포커스 테두리를 지우고, 15초 뒤엔 알아서 풀리게
focus 테두리를 제거하고, 15초 동안 입력이 없으면 focus가 자동 해제되게 했다. 화면에 드러나지 않는 처리인데 실기기에서 만져보면 차이가 났다.
시안은 #5, #6, #9, #12 번호 체계로 관리했다. 하나씩 그려서 하나씩 커밋하다 보니 아이콘 하나에 네 번을 돌았다. 한 화면에 여러 시안을 나란히 렌더해놓고 골랐으면 덜 돌았을 것이다.