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