네이버 로고 아이콘 일러스트레이터 (Ai) 파일, 그리고 HTML SVG 코드

2023. 9. 26. 00:06

폰트어썸에는 다양한 웹 아이콘들이 있습니다. 보통 유명한 플랫폼의 로고는 왠만하면 다 있습니다. 이게 안타까운 부분입니다. 국내 플랫폼인 네이버라던지 카카오톡에 대한 아이콘은 현재 폰트어썸에 등록되어있지 않습니다. 친효스킨에 사용중인 네이버, 네이버밴드, 카카오톡 아이콘들은 모두 이미지 파일입니다. 해서! 이미지 파일을 대체할 SVG 코드를 사용할 계획입니다. 이 글은 준비를 위한 첫 걸음마 글이 될 것입니다.

네이버 로고 파일

일단 네이버측에서 개발자분들을 위해 무료 ai 소스를 배포하고 있습니다. 아래가 공식 페이지입니다.

https://developers.naver.com/docs/login/bi/bi.md

로그인 버튼 사용 가이드 - LOGIN

네이버 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유의 아이덴

developers.naver.com

방문해 보시면 다양한 네이버 버튼들이 있음을 알 수 있으실 겁니다. 원하는 형태의 ai 파일을 다운로드 받으시면 됩니다.

다운로드 받은 ai 파일을 열어보면 이렇게 보기 좋게 아이콘들이 정렬되어 있습니다. 이중에서 저는 네모난 아이콘형 로고를 SVG로 추출할 겁니다.

오브젝트가 모두 따로 선택되기에 원하는 아이콘을 선택 후 Ctrl+C를 눌러 복사합니다. 이후에 일러스트레이터에서 새 문서를 열고 그대로 Ctrl+V를 눌러 붙여넣기만 하면 끝입니다. 아이콘 끝 부분이 기본적으로 라운드 처리가 되어있는데 어차피 이건 CSS에서 제어가 가능하니 그냥 기본 형태로 돌려놓았습니다. 이제 이 녀석을 SVG 코드로 추출해 봅니다.

HTML SVG path 태그는 일러스트레이터로 커버할 것!

코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HT

rgy0409.tistory.com

추출 방법은 이미 과거에 작성한 바 있으니 위의 문서를 참고해주시기 바랍니다. 되게 쉽습니다.