웹 프로젝트를 들어가게되면 아이콘은 어떤방식으로든 사용하게되는 컨텐츠입니다.
다만 현 시점에서 이 아이콘을 전부 이미지화 하여 사용하는 웹사이트는 '매우 좋지 않은' 웹사이트로 볼 수 있습니다.
모든 아이콘을 이미지화 할 경우 문제점은 다음과 같습니다.
- 유지보수 및 수정하게 될 때 파일관리가 쉽지 않으며 사용하지 않는 불필요한 이미지가 서버에 쌓인다.
- 혹여 제때제때 삭제하여 서버에 불필요한 이미지가 쌓이지않더라도 사용하지 않는 아이콘의 경로로 일일이 폴더를 찾아 해당 아이콘을 삭제하는 작업을 하여 불필요한 시간을 소모한다.
- 아이콘의 사이즈 조절에 있어서 이미지파일은 자유롭지가 못하여 사이즈별로 제각각 이미지화 해야해서 불편하다.
- 같은 아이콘에 컬러를 변경하는등의 hover효과를 사용하게 되면 불필요하게 같은아이콘의 각기 다른 이미지를 두장을 써야한다.
- 원하는 위치값이 맞춰지지 않을경우 'margin-top: -1px' 등의 지저분한 코드를 남발해야 하는 경우가 생긴다.
- 이미지 아이콘의 경우 대체적으로 png이미지를 쓰게 되는데 기본적으로 무겁다.
아래의 아이콘 툴은 기본적으로 위의 이미지화된 아이콘의 모든 문제점을 상쇄하며 '좋은'웹 사이트를 제작하는 데있어서 반드시 사용되어야 하며 많은 기업들 또한 '가볍고 유지보수하기 좋은' 웹사이트를 만들기위해 노력을 하기 때문에 당연시하게 사용하고 있습니다.
아이콘의 경우 올바른 사용성과 유지보수를 위해 아래와 같은 훌륭한 툴이 제공되고 있습니다.
1. 폰트 어썸 (font-awesome)
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
-이미지가 아닌 폰트기반 벡터 그래픽 아이콘 툴입니다.
-유료화된 아이콘도 있지만 무료로 사용 할 수 있는 아이콘 또한 수백가지가 넘습니다.
-가입 후 제공되는 개인 유저 CDN 으로 간편하게 연동하여 쉽게 사용이 가능합니다.
-사용하고 싶은 아이콘을 검색한 후 해당 아이콘의 코드를 복사 붙여넣기 하는 것 만으로도 아이콘 생성이 가능합니다.
-아쉬운 점이 있다면 해외 웹서비스에 최적화 되어있다보니 우리나라에서 흔하게쓰는 카카오톡,네이버등의 아이콘로고는 직접 제작해야합니다. 포토샵이 아닌 폰트기반으로 제작해야 하기때문에 디자이너와 어느정도 협의가 필요합니다.
2. XEicon
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
-폰트어썸과 마찬가지로 폰트 기반의 벡터 그래픽 아이콘 툴입니다.
-별도의 가입없이 CDN, import css 등 원하는 방식으로 사용이 가능합니다.
-간단한 복사 붙여넣기로 아이콘 생성이 가능합니다. 하단의 링크에서 사용방식을 간단하게 확인 하실 수 있습니다.
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
-개인적으로 폰트어썸보다 자주 사용하는데 그 이유는 우리나라 웹서비스문화에 최적화 되어있어 카카오,네이버등의 아이콘 또한 지원하고있습니다.
사용법이나 종류에 관해서는 각 라이브러리에 해당하는 홈페이지 링크를 참고 하시면 더 많은 양의 정보를 확인 할 수 있습니다.
'Tip > TipContent' 카테고리의 다른 글
| [Postman] API 테스트를 쉽고 간단하게 도와주는 툴 (Feat. Restful API) (0) | 2023.10.27 |
|---|---|
| [Data] CRUD와 HTTP 요청 4가지 기본 메소드 (0) | 2023.10.23 |
| [개발] 'Attribute' 와 'property' 차이점 (0) | 2023.01.17 |
| [개발관련] 라이브러리와 프레임워크의 차이점. (0) | 2022.11.19 |