웹 디자인, 웹 개발시에 유용한 툴(useful tools) 모음 (색 배합,번역글 모음,무료 벡터 소스,무료 이미지,ICON,favicon,png to icon,랜덤 유저 생성)
조영규의 블로그
2014. 3. 17. 15:51 from Develop
웹 디자인을 전문적으로 하는 디자이너라면 하지 않을 고민일테지만, 개발을 하다 필요에 의해 웹 디자인을 하거나 어찌됐건 디자인을 하게 되는 개발자의 경우, 색감에 매우 둔감해 색상 배합을 엉망진창으로 사용하곤 한다. 색상에 대한 감각이 없기 때문이다. Adobe가 제공하는 Kuler 서비스는 이러한 개발자에게 멋진 색 조합을 추천해준다. 여러가지 옵션을 사용할 수 있다. 물론 개발자나 디자이너외에도 색을 배색할 일이 필요한 분들에게 유용할 것 같다.
웹 디자인이나 웹 개발을 하며 자료를 찾다보면, 영어가 부족해 좌절할 때가 한 두번이 아니다. 그런 분들에게 소개하는 곳! 다양한 원서와 블로그, 외국 원문들을 번역해 제공하는 한글 번역글 모음 페이지이다. 아래는 이 번역글 페이지가 제공하는 대표글이다.
---
부트스트랩 3 한글 번역 / 구글 웹폰트 빠르게 로드하는 팁 7 가지 / LESS 튜토리얼
최고의 워드프레스 개발자가 되는 방법 / 브라우저는 어떻게 동작하는가?
반응형 디자인 적용하기 / Pure CSS 번역 / Javascript 핵심
Angular.js는 왜 좋은가? / Angular JS의 MVC패턴 개요 / 루비 온 레일스 튜토리얼 번역
PHP의 올바른 방법 / GO 프로그래밍 입문 / 2시간만에 Perl 익히기
Perl 정규 표현식 / 파이썬 10분만에 배우기 / R 매뉴얼
GitHub 사용하는 방법 / 플랫UI
---
freepik은 사진과 벡터 이미지, PSD, ICON등을 한방에 찾을 수 있는 강력한 데이터 저장소이다. 게다가 무료!! 뿐만 아니라, 각 색상에 맞는 사진과 벡터이미지만을 골라 주는 기능도 있다. 검색 후 검색창 바로 아래에 세부적인 색상을 선택할 수 있는 기능이 있으니 활용한다면 위의 색 배합 서비스와 함께 유용하게 사용할 수 있을 것이다. 개인적으로 웹 디자인을 하다보면 저작권에서 조금 자유로운 벡터 이미지와 아이콘들이 필요한데, 그럴 때 유용하게 필자가 찾는 사이트이다. PPT같은 프레젠테이션 파일을 만들거나 워드 작업시에 필요한 이미지를 구하는데도 매우 유용할 것 같다.
웹 페이지의 레이아웃을 구성하다보면 이미지를 넣을 장소긴 한데 아직 넣을 이미지를 구하지 못한 경우가 많다. 그럴 때 정해진 규격의 사이즈로 대신 박을 수 있는 Dummy 이미지를 제공한다. http://placehold.it/300x300 처럼 간단하게 img 테그의 src 어트리뷰트에 적어주면 사용할 수 있다. 아주 유용하다. 다른 Dummy 이미지 서비스들도 있지만 사이즈까지 표시해 줌으로 개인적으로는 가장 유용한 것 같다. (저 칙칙한 회색까지도 바꿔서 사용 할 수 있다는 점!!)
레티나와 같은 고해상도 디바이스가 많이 나오고, 스마트폰으로 확대가 용이하다보니 고화질 이미지를 사용하거나 벡터 아이콘을 사용하는 경우가 많다. 필자의 경우 이때 마음에 드는 아이콘 찾기가 쉽지 않았는데, Metrize는 필자가 좋아하는 스타일의 아이콘을 다양한 형태로 제공했고 매우 유용히 사용했다.
아름다운 아이콘을 SVG와 폰트, PDF, AI, EPS 파일까지 제공함으로 웹 디자인시 매우 유용하게, 간편히 활용 할 수 있다.
페비콘을 만들 때 유용하게 사용하는 사이트이다. PNG파일이나 GIF, JPEG 포멧을 간단히 ICON으로 바꿔주는 웹앱이다. 반드시 즐겨찾기에 추가해 둘 툴!
랜덤 유저를 생성해준다. 이름 뿐만 아니라, 사진과 전화번호등 다양한 정보를 제공한다. 웹 디자인 시 유용하게 사용 할 수 있을 것 같아 즐겨찾기에 추가해 두었는데, 아직 딱히 사용할 일은 없었지만 분명 웹 디자이너분들은 스킨 제작시 유용히 사용하리라 생각된다.
'Develop' 카테고리의 다른 글
| nodejs로 Azure(애저) 클라우드 알림 허브 푸시알림 보내기 (0) | 2015.05.20 |
|---|---|
| 우분투 시작시 자동으로 특정 명령 실행하기. (0) | 2015.03.17 |
| 도커란 무엇인가 / Docker 컨테이너 / Docker 이미지 / LXC / 가상화 (0) | 2015.03.09 |
| 브라우저 위치 정보 받아오기 / HTML5 Geolocation API (0) | 2015.01.03 |
| 워드프레스 설치 준비하기 - 우분투와 MariaDB, Apache, PHP와 함께. (0) | 2014.12.31 |
| Pymongo tutorial (파이몽고 사용하기) / pymongo 번역 (0) | 2014.10.29 |
| MongoDB(몽고 디비) 특징 공부하기 / 몽고 DB란 무엇인가? (0) | 2014.10.20 |
| Python MAC에 pypy 설치하기. (0) | 2014.07.18 |
| CSS GENERATOR들 모음 / CSS Maker들 모음(border-radius,text-shadow,font-face,box-sizing,transition,transform,filter,960 grid system) (1) | 2014.03.18 |
| CSS의 box-sizing : content-box와 border-box - padding과 border와 width (0) | 2014.03.02 |