오피스 아이콘 팩을 소개합니다
직장인과 학생들을 위해 만든 무료 아이콘 팩 제작 이야기(1)
모두가 언제 어디서든 쓸 수 있는 126종의 아이콘 팩을 제작했습니다.
이름하여 ‘오피스 아이콘 팩’, 직장인들이 부담 없이 쓸 수 있는 플랫 컬러 + 라인 아이콘 세트입니다.
포맷은 png 및 svg로 선택할 수 있으며 개인적, 상업적 용도 모두 무료 배포 예정입니다.
디자이너뿐 아니라 모든 직군과 학생들도 활용할 수 있도록 쉽고 깔끔하게 만들었습니다.
이야기에 앞서, ‘오피스 아이콘 팩’은 조만간 오픈 예정인 ‘티그리스 디자인팀 홈페이지’에서 무료로 배포 예정입니다. 배포까지 조금만 더 기다려주세요!
오피스 아이콘 팩을 제작한 이유
1. 타 부서에서 어디든 활용할 수 있게
다른 팀에서 제안서나 발표 자료 등에 아이콘을 사용할 일이 많은데, 매번 스톡 소스를 이용하다 보니 브랜드의 톤 앤 매너가 깨지기 일쑤였습니다. 들쑥날쑥한 퀄리티도 문제였습니다. 그렇다고 디자인팀이 매번 제작하는 건 더더욱 어려운 일입니다. 당장 아이콘을 새로 만드는 건 디자인팀에게도 시간이 필요한 업무이기 때문입니다. 그래서 모든 팀이 가볍고 재밌게 쓸 수 있는 소스를 만들었습니다!
2. 모두가 무료로 쓸 수 있도록
우리 서비스의 사용자가 아니더라도 더 많은 사람들에게 무언가를 제공하고 싶었습니다.
고민하던 중 발표 자료를 꾸미기 위한 무료 소스가 절실했던 대학생 시절이 떠올랐어요. 정보력도 검색 요령도 충분치 않았던 시절, 다양한 상황에 쓸 수 있는 만능 소스 팩이 있었으면 하던 기억이 있습니다.
많은 기업들처럼 배포용 폰트를 개발할까도 생각해 보았지만, 그보다 아이콘 디자인에 더 자신이 있었습니다.
3. 토스 페이스 이모지에서 받은 영감
토스 페이스 이모지 공개 당시, 다양한 종류와 높은 심미성에 놀랐습니다.
무엇보다 ‘우리나라 정서’에 잘 맞는 스타일이 마음에 들었습니다. 그러나 Mac 운영체제 제한과 이미지로 활용할 수 없다는 이모지의 특성 때문에 아쉬움이 컸습니다.
토스 페이스 이모지 / 토스
4. 일할 때 가장 필요한 아이콘
‘직장인들에게 어떤 아이콘이 필요할까?’라는 고민을 많이 했습니다.
처음엔 점심 메뉴와 회식, 워라밸, 날씨 같은 다양한 주제를 포함한 100여 종의 아이콘을 기획했어요.
하지만 조금 더 ‘일’이라는 본질적인 주제에만 집중하고자 구성을 수정했습니다. (제작에 제외된 아이콘 주제들은 추후 아이콘 팩 ver.2에서 다시 다룰 예정입니다!)
아이콘을 구하며 겪었던 어려움
기존에도 아이콘 시스템 배포나 무료 아이콘 사이트가 많습니다.
상황에 따라 활용하기 좋을 수 있지만, 개인 용도나 협업 목적으로 사용하는 데 몇 가지 어려움을 겪었습니다. 실무에서 마주했던 문제점들은 다음과 같습니다.
1. 시스템 아이콘 활용의 한계
애플과 구글을 비롯해 UI 아이콘 시스템을 배포한 경우는 많습니다.
특히, UI 디자인 메뉴와 버튼 등에 활용할 시스템 아이콘을 찾고 있다면 애플의 SF symbol 4 라이브러리가 최고의 선택이 될 수 있습니다. 단순 아이콘 팩을 넘어 이는 설치형 폰트로, 무려 4천 종이 넘는 아이콘에 9가지 굵기와 3가지 사이즈까지 제공됩니다. (역시 디테일은 완벽에 가까운 애플..)
https://developer.apple.com/kr/sf-symbols/
SF Symbols / 애플
그러나 모든곳에 시스템 아이콘을 활용하자니 어딘가 부족한 느낌이 듭니다. 단순한 아이콘이 직관적이긴 하지만, 장식적인 아이콘을 통해 시각적 재미를 주는 것이 효과적일 때도 많습니다. 또한, 웹이나 앱이 아닌 다른 제작물을 시스템 아이콘으로 꾸미기에는 너무 심심합니다.
2. 심미성이 떨어지는 무료 아이콘
flaticon, icon8등의 사이트에서 (부분 유료임은 배제하더라도) 방대한 양의 컬러 아이콘을 구할 수 있습니다. 그러나 용도를 고려하더라도 복잡하거나 심미성이 좋지 않은 아이콘이 많으며, 일관된 스타일로 통일하기도 쉽지 않습니다. 그리고 대부분 해외 아이콘 디자인은 어딘가 모르게 우리 정서와는 좀 맞지 않는 느낌도 있습니다.
출처 - https://www.flaticon.com/icons3. 비디자이너에게 아이콘을 찾는 과정은 어렵다
디자이너가 아닌 사람들은 디자이너처럼 적극적으로 소스나 레퍼런스 사이트를 찾아다니는 일에 익숙지 않습니다. 어느 정도 괜찮은 소스를 찾았다면 더 좋은 사이트를 찾아 다시 떠날 이유도 없습니다. 시각적 완성도에 더 집착하는 것은 비디자이너의 역할이 아니기 때문입니다.
4. 호불호가 갈리는 이모지
이모지(특히 애플 이모지)를 디자인 요소로 사용하는 사례가 많습니다.
잘 활용하면 젊고 친숙한 느낌을 주기 좋습니다. 그러나 이모지가 운영체제마다 다른 형태로 보이기 때문에 의도와는 느낌이 달라질 수 있습니다.(예를 들어 아이폰에서 애플 이모지를 활용한 디자인을 했더라도, 윈도우 컴퓨터에서는 마이크로소프트 이모지로 표현됩니다.) 그렇다고 이미지로 추출해서 사용하자니 저작권 문제가 걸립니다. 사실 이모지 자체에 대한 호불호도 많이 갈리는 편입니다.
다양한 운영체제별 이모지결국 위의 아쉬웠던 점들을 조금이나마 해결하려는 마음으로 오피스 아이콘 팩을 디자인하고, 소개하게 되었습니다.
이렇게 만들었어요
모든 아이콘은 머티리얼 아이콘 그리드에 기반해 제작했습니다.
https://m2.material.io/design/iconography/system-icons.html#system-icon-metrics
머터리얼디자인 - 아이콘 제작 가이드 / 구글
아이콘은 크기가 작기 때문에 제작할 때 그리드를 특별히 신경 써서 만들어야 합니다. 그리드에 기반하지 않은 아이콘은 일반 모니터에서 제대로 표시되지 않기 때문입니다.
그리드를 기반으로 제작한 24px 아이콘의 1배수 렌더링(왼쪽)과 그렇지 않은 경우(오른쪽)조금 더 자세히 설명하자면, 일반적인 모니터는 낮은 픽셀 밀도(70~90대 ppi)를 가지고 있습니다.
그런데 그 픽셀의 배치를 고려하지 않고 아이콘을 디자인한 png 이미지는 라인이나 경계가 흐리게 뭉개지는 현상이 나타나는데, 이른바 안티앨리어싱 현상입니다. 가뜩이나 작은 아이콘, 특히 라인 아이콘이 뿌옇게 흐려지면 가시성에 문제가 생깁니다.
(안티앨리어싱은 사실 이미지의 계단현상을 방지하고 부드럽게 보여주는 후처리 기술입니다. 그러나 비교적 크기가 작아 디테일이 생명인 아이콘에게만큼은 부정적인 효과가 나는 것입니다.)
그에 반해 플랫 아이콘은 조금 더 유연하게 만들었습니다.
그리드를 기반으로 하지만, 상황에 따라 0.5 단위까지 편집하였습니다. 보통 UI 내에 작은 크기로 활용되는 라인 아이콘과는 달리 플랫 아이콘은 그 용도가 훨씬 다양하기 때문입니다.
웹페이지나 편집물, 발표 자료 등에 아이콘 크기를 키워서 사용하는 경우, 픽셀 그리드는 무의미해지고 비례와 조화가 더 중요해집니다. 또한 모바일 기기나 ppi가 높은 레티나 모니터 등에서는 그리드를 벗어난 아이콘도 선명하게 렌더링 될 수 있습니다.
컬러 아이콘과 라인 아이콘 비교플랫 아이콘과 라인 아이콘을 일관된 형태로 디자인했으며, 시인성 확보를 위해 디테일을 최소화하고 단순한 형태로 만들었습니다. 단순히 서로 면과 선만을 반전시킨 것처럼 보일 수도 있지만, 실제로는 특성을 고려해 활용 목적에 맞게 각각 제작했습니다. 아이콘은 아래 활용 예시 이미지처럼 다양한 상황에 응용할 수 있습니다.
문서 (소개서, 제안서, 발표자료 등)
UX/UI (모바일앱, 웹서비스, 홈페이지 등)
오프라인 (사이니지, 인쇄물 등)
사이니지 예시 이미지이외에도 노션 페이지 썸네일이나 메신저 프로필 등 무궁무진하게 활용할 수 있습니다!
마치며
사내에서 프로젝트를 제안할 당시까지만 해도, ‘아이콘이라면 실무에서 지겹도록 만들어 봤으니 아이콘 팩도 뚝딱 만들겠지!’라는 자신감이 있었습니다.
하지만 수백 종의 아이콘을 일관된 스타일과 적절한 컬러감으로 디자인하는 것은 생각보다 정말 어려운 일이었습니다. 특히 ‘모두를 향한 배포’라는 목적은 생각보다 더 큰 부담감으로 다가오더군요. 어찌어찌 우여곡절 끝에 완성시킨 아이콘 팩, 결과적으로는 의도했던 방향대로 제작된 것 같아 다행입니다.
무료 배포를 통해 업무로 바쁜 직장인 분들과 열심히 배우는 학생분들에게 조금이나마 여유와 즐거움을 가져다줄 수 있으면 좋겠습니다.
개인적·상업적 용도 모두 무료이며, svg 파일의 경우 컬러 변환도 허용할 예정입니다. 마음껏 활용해 주세요! 다만 파일 자체의 공유나 재배포는 금지하며, 페이지 링크 공유만 가능합니다.
또한 추가되었으면 하는 아이콘이나 불편한 점 등 다양한 의견을 피드백받고, 아이콘 팩 ver.2에 반영할 예정이니 많은 관심 부탁드립니다.
글머리에서 말씀드렸던 것과 같이 ‘오피스 아이콘 팩’은 조만간 오픈 예정인 ‘티그리스 디자인팀 홈페이지’에서 무료로 배포 예정이니 오픈까지 조금만 더 기다려주세요!
[티그리스 디자인팀] 브런치를 구독해 주시면 배포 소식을 알려드리겠습니다.
+
'오피스 아이콘 팩'이 배포되었습니다! 아래 링크에서 다운로드 받아주세요.
https://brunch.co.kr/@tigrisdesign/10
제작. 티그리스 디자인팀
궁금한 점이나 다양한 의견은 아래 메일로 연락 주세요.
design@tigrison.com
