24.11.26 작업일지

어제 작업에 이어서 오늘도 아이콘 관련된 이미지를 골랐다.

새롭게 알게된 부분도 있었고 예제를 연습하기에도 매우 적당한 이미지였다. 

 

 

이미지를 통해 알게 된 것은 크게 2가지이다.

 

하나의 디자인 시스템 안에서 아이콘의 통일성을 위해 고려해야 할 부분

1. stroke은 몇 px인지

2. end와 corner는 round인지? (radius값은 몇인지?)

3. 전체 너비와 높이는 몇 px인지?

4. 기울기가 들어간 요소의 각도는 몇도인지?

 

아이콘 스타일의 종류

라인(line) : 1가지 컬러의 라인
듀오(duo) : 1가지 컬러의 라인 + 1~2가지 컬러의 면
솔리드(solid) : 1가지 컬러의 면 
플랫(flat) : 1~2가지 컬러의 면

 

좌 : 견본 / 우 : 내 작업물

 

이미지 속 아이콘 예시들을 예제라 생각하고 직접 그려봤다. keyline위에서 최대한 1px 단위로 아이콘을 그리려고 노력했고, 견본을 무조건 따라 그리려고 하지 않고 내가 스스로 그렸기 때문에 어떤 부분을 다듬어야 '예쁘게' 모양이 나오는지 알 수 있었다. 좀 헷갈리고 어려웠던 건 솔리드와 플랫 스타일을 만들 때 면을 어떻게 얼마나 채워야 하는지에 대한 판단이었다. 보통 솔리드와 플랫 스타일은 특정 아이콘이 클릭 또는 호버 되었을 때(활성화) 사용이 되는 거라서 확실하게 감을 잡아놓지 않으면 많이 헤맬 것 같다는 생각이 들었다. 오늘 했던 작업을 반복적으로 조금 더 해봐야겠다는 생각을 했다. 

 

아마도 조만간은 아이콘 관련된 연습을 중점적으로 하게 될 것 같다. 은근 재밌기도 하다.