|
브라우저를 이용한 웹 제작 도구 모음 |
요즘 디자이너 사이에서 브라우저를 이용한 홈페이지 또는 어플 제작이 새로운 트랜드가 되고 있습니다. 웹사이트 제작을 실시간 미리보기로 확인할수 있으며 코드의 최적화, 반응형 레이아웃 등 다양한 기능을 이용하여 웹페이지를 제작할수 있는데요.
오늘은 브라우저를 이용하여 웹을 만들수 있는 도구들을 소개해 드리겠습니다. 총 6가지 도구로 좀더 신속하게 개발을 완료할수 있으며 설치없이 무료로 사용할수 있어서 간편합니다.
기존에 익숙한 툴을 사용하여 완벽하게 작업을 수행하는것도 중요하지만 점차 변화하는 상황에 맞게 새로운 도구를 이용하여 좀더 작업 효율을 높일 필요도 있을꺼 같습니다. 아래 도구들이 그 시작점이 되셨으면 좋겠네요.
Chrome Inspector
크롬 개발자 도구는 구글 크롬에 내장된 웹사이트 제작 및 디버깅 도구입니다. 개발자는 사이트 오픈전 미리 점검하여 문제를 해결하고 최적화할수 있는데요. 복잡한 자바 앱이 많을때 문제의 원인을 신속하고 효율적으로 해결해주며 네트워크 패널을 통해 페이지의 로딩속도를 채크하여 최적화할수 있습니다.
Sip
웹페이지내에 색상을 클릭하여 색상코드를 얻을수 있는 도구입니다. Ctrl + Alt + P 단축키를 사용하여 매우 편리하게 색상표를 저장하여 사용할수 있습니다. 맥용 어플이라 윈도우에서는 사용이 안되네요.
LiveReload
LiveReload는 파일의 변화를 모니터링하는 도구입니다. 파일을 저장하면 브라우저을 새로 고침 할필요없이 바로 라이브로 변화를 확인할수 있습니다. 특히 CSS파일이나 이미지를 변경하는 경우 즉각적인 확인이 가능하여 시간을 절약할수 있습니다.
Brackets
브라우저에서 실시간 미리보기를 지원하는 라이브HTML 개발 도구입니다. 페이지를 저장하거나 다시로드하지 않고도 브러우저에 자동으로 푸시되며 HTML과 CSS를 시각적 도구를 통해 에디터할수 있습니다.
Yeoman
Yeoman는 웹 어플리케이션을 위한 개발 도구입니다. 규모가 큰 개발 프로젝트에서 각 모듈별 자바스크립트의 관리가 가능하며 일일이 필요한 자바 모듈을 다운받기위해 사이트를 방문할 필요없이 Yeoman에서 해결이 가능합니다. 제작된 어플의 테스트 및 자동화로 빠르게 개발을 완료할수 있습니다.
Purecss
브라우저에서 웹사이트 코딩을 시작할때 초 경량 PureCss를 추천드립니다. 이 모듈은 모든 주요 프레임워크를 설치없이 쉽게 구현할수 있으며 그리드, 메뉴, 모든 화면 크기에 대한 반응형 레이아웃을 만들수 있습니다.
'IT&COMPUTER > 프로그램' 카테고리의 다른 글
| 컴퓨터 생활이 편리해지는 유용한 무료 사이트 (0) | 2014.07.01 |
|---|---|
| 동상이몽 없이 원활한 소통을 만들어주는 웹 프로젝트 도구 소개 (0) | 2014.06.17 |
| 강력한 기능을 가진 컴퓨터 원격제어 7종 소개 (2) | 2014.05.13 |
| 나만의 아이콘 폰트를 제작할수 있는 무료 프로그램 소개 (0) | 2014.04.18 |
| 홈페이지 최적화에 도움되는 무료 웹페이지 분석 도구 모음 (0) | 2014.04.01 |
