웹소설 개편을 위한 모바일 운영 가이드 스터디1 - 아이콘

지난 해에는 개편에 보조 인원으로 자질구레한 일들을 했는데, 이번엔 내가 하는 비중이 조금 늘어 그만큼 공부하고 작업해야할 것이 몇 배로 늘어났다. 모바일웹을 먼저 작업하며 운영 가이드를 기초단부터 잡아가고 있다.

지금은 추후 효율적인 운영을 위한 가이드 중 개편되는 북큐브 웹소설 홈페이지에 맞는 아이콘 작업을 진행 중이다.

이전에는 쉽게 무료 소스 홈페이지에서 비슷한 아이콘을 찾아 약간의 가공을 해서 썼는데(사용 범위는 넓어봐야 포트폴리오였다), 실서버에 사용될 아이콘을 처음부터 벤치마킹하고, 서칭하고 가공하는 과정에서 모든 작업이 생소하여 애를 많이 먹었다.

아이콘 작업이 완벽하게 완료된 것은 아니지만, 지금까지의 진행경과로 내가 가장 크게 놓쳤던 것들을 복습할 겸 정리한다.

1. 아웃라인 아이콘과 솔리드 아이콘의 개념

부끄러운 이야기이지만, 나는 단순하게 라인 아이콘과 필 아이콘으로 인지하고 자료 서치도 그렇게 했다.

정확한 명칭은 아웃라인 아이콘(outline icon)과 솔리드 아이콘(solid icon)이었다.

사람들이 조금 더 빠르게 인지하는 아이콘은 솔리드 아이콘이라고 한다. 어떤 사람은 위 아이콘 세트 중 잠금 아이콘(아웃라인)을 핸드백으로 인식하기도 했다고 한다. 이런 점으로 미루어보면 무조건적으로 솔리드 아이콘이 전달력이 좋다기보단, 형태의 문제인 것 같다.

(자료 출처 : https://www.subtraction.com/2014/06/23/hollow-v-solid-icons/)

2. 아이콘 스타일은 통일한다.

아이콘에 대한 전문지식이 거의 전무하다보니 초반에 이 부분으로 실수를 많이 했다.

상단 아이콘에는 아웃라인으로 디자인하고, 푸터 아이콘은 솔리드로 디자인했는데 계속 이해를 못해 몇 번이나 수정작업을 거쳤다.

단순하게 흰 배경이니 아웃라인을, 푸터 영역은 배경 컬러가 어두운 계열이라 솔리드 아이콘을 채워넣었던 건데 전체적으로 보니 뭔가 어긋난 느낌을 인식했음에도 불구하고 그게 통일되지 않은 아이콘 탓이라곤 전혀 생각하지 못했다.

아웃라인과 솔리드를 같은 뎁스의 아이콘 디자인에 혼합한다면 어딘가 이상한 느낌을 지울 수 없을 것이다.

위 이미지처럼 꼭 통일을 해줘야한다. 하물며 라운딩이 들어가냐, 들어가지 않느냐까지도! (사진 출처 : 핀터레스트)

3. 아이콘의 픽셀배율과 크기는 뎁스에 맞게, 동일하게 작업한다.

현재 모바일 디자인 시 모든 여백과 간격 등의 픽셀 배율은 8배수(8,16,24)로, 아이콘의 픽셀값은 안드로이드 시스템 디자인 가이드를 참고하여 제작하고 있다.

웹소설 페이지에도 이와 같은 아이콘이 추가되기 때문에, 위의 픽셀값을 참고하여 아이콘을 디자인하였다.

좌우 패딩 2px씩, 아이콘은 20px 내로 규격되도록 디자인 한다. 각 터치영역을 고려하여 간격은 40px로 작업하였다.

패딩은 시각적 크기를 통일하기 위해 사용한다. 같은 규격의 아이콘이라도 형태에 따라 더 커보이고, 더 작아보인다.

이럴 땐 규칙보단 눈에 의존하여 임의로 디자인을 풀어나가야 한다.

(자료 출처 : http://blog.rightbrain.co.kr/?p=6513)

이 외의 시스템 아이콘은 위와 같은 형태로 16px, 동일하게 패딩 2px로 진행했다.

아이콘을 만들 때 2px 라인이 생각보다 둔탁하고 모양이 잘 잡히지 않아 애먹었는데, 실사이즈로 확인해보면 확대했을 때 모양을 잡는다기보단, 최대한 단순화하여 아이콘 형태가 잘 보이도록 디자인해야한다. 너무 많은 디테일을 살리면 실사이즈 확인 시 오히려 디테일이 떨어져보일 수 있다.

(자료 출처 : https://material.io/design/iconography/system-icons.html#grid-keyline-shapes)

4. 상단 아이콘이 너무 잘 보일 필요는 없다.

현재 개편 중인 페이지에서 상단 아이콘과 로고가 같은 위치에 노출되는데, 상단아이콘에 컬러에 힘을 너무 주면,

로고 컬러가 검정이 아닌 이상 로고와 아이콘이 같은 시각적 우선순위에 있거나, 시선의 흐름을 방해할 수 있다고 한다.

상단에는 보통 마이페이지, 알림, 로그인 등이 노출되는데, 이는 사용자 입장에서 상단에 있다는 학습이 어느 정도 되어있기 때문에 힘을 줄 필요가 없다. 또한 가벼워보이는 ui로 디자인하였다면, 아이콘으로 인하여 자료를 함축적으로 표현하기보다는 자칫 무게중심이 쏠려보이거나 ui 전체가 무거워보일 수 있다.

현재까지의 진행경과로 다음 개편이나 작업 등을 위해 상기해야할 것들을 정리해보았다.

이번주 내로 아이콘 가이드를 정리하여 다음 글로 제작된 아이콘 가이드를 포스팅 하고 싶다.