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