이번 글에서는 저와 같이 색깔에 대한 감각이 없고, 레이아웃 짜는데 많은 어려움을 겪는 분들을 위해 참고할 수 있는 여러 사이트를 공유하려고 합니다.
1. 아이콘
1) Font Awesome ( 링크 )
제가 아이콘을 찾을 때 가장 많이 사용하는 사이트입니다.
홈페이지의 Get Started를 보시면 사용방법이 잘 나와있습니다.
HTML <head> 태그 안에 CDN을 추가하고 원하는 아이콘을 찾습니다.
그리고 추가하고 싶은 자신의 HTML 요소의 class 속성에 아이콘의 값을 주면됩니다.
2) flaticon ( 링크 )
사이트에서 "search" 단어를 검색하여 찾은 아이콘 목록입니다. ( 5379개 존재 )
색상이 있는 다양한 아이콘을 무료로 제공해주며, 다운로드를 할 수도 있는 사이트입니다.
예쁜 아이콘이 많아서 이 사이트도 자주 애용하고 있습니다.
3) Noun Project ( 링크 )
마찬가지로 아이콘을 무료로 제공 및 다운로드를 할 수 있습니다.
"search" 검색 결과 14,876개가 검색이 되었습니다.
원하는 아이콘을 클릭하시면 전체 색상을 변경할 수도 있습니다.
4) iconfinder ( 링크 )
이 사이트는 무료 , 유료 아이콘을 제공합니다.
유료 아이콘은 $2 정도 하는데, 무료 아이콘도 충분한 퀄리티를 자랑합니다.
위의 아이콘은 "search"를 검색한 결과이며 마찬가지로 다운로드가 가능하고 크기 조정도 가능합니다.
5) Fontisto ( 링크 )
브랜드 아이콘을 많이 제공하는 사이트입니다.
2. 레이아웃
1) Collect UI ( 링크 )
이 사이트는 페이지 디자인을 위한 reference 사이트입니다.
- 회원가입( Sign up )
- 404 페이지
- On / Off 스위치
- 검색 ( Search )
- 등...
웹 페이지를 구성하는 디자인에 대한 reference를 제공하고 있습니다.
2) Layout Gala ( 링크 )
이 사이트는 많이 사용되고 있는 web page layout 40가지를 제공하고 있습니다.
사용방법은 원하는 layout을 클릭하신 후 페이지 여백을 우클릭하여 "페이지 소스 보기"를 클릭하셔서 HTML을 복사하시면 됩니다.
3. 커버
coverr ( 링크 )
무료 동영상을 통해 웹 사이트의 커버를 꾸밀 수 있습니다.
제공하는 소스코드를 쓰기만 하면 되므로 사용방법도 간단합니다.
4. 사진
pixabay ( 링크 )
고퀄리티의 사진을 무료로 제공하는 사이트입니다.
"스폰서 이미지"는 라이센스가 걸려있는 이미지이므로 사용하지 않는 것이 좋습니다.
이상으로 토이프로젝트에서 쓸만한 디자인 사이트를 모아봤습니다.
'끄적끄적 > 유용한 툴 & 사이트' 카테고리의 다른 글
| 지라 평생 무료버전 사용하기 (4) | 2020.01.18 |
|---|---|
| Apache JMeter - HTTP, WebSocket 성능 테스트 (5) | 2018.07.20 |
| Eye Dropper - 웹 사이트 상의 특정 색상 값 확인 (0) | 2018.06.16 |
| Can I Use - 크로스 브라우저( Cross browser ) 검색 (0) | 2018.06.16 |
| ngrok - localhost를 공용IP로 변환 (0) | 2018.05.31 |
| eXERD - 데이터베이스 모델링 (0) | 2018.03.17 |