10 개의 무료 웹 전단 개발 도구 상세 정리

무료 웹 전단 개발 도구 10 개


네트워크 기술 의 발전 이 신속 하여 일부 기술 은 유지 하기 어렵다.
매년 새로운 도구 가 등장 하 는 동시에 많은 낡은 도구 들 이 신기 술 발전의 길에 쓰 러 졌 다 는 것 을 의미한다.
전단 개발 은 웹 의 상당 부분 을 차지 하고 직업 경로 이 되 었 다.만약 당신 이 전단 개발 을 자신의 또 다른 신기 술 로 여기 거나 발전 가능 한 사업 으로 여 긴 다 면,당신 은 이 일 을 위해 적당 한 도 구 를 준비 해 야 합 니 다.
나 는 나의 10 대 현대 에 필요 한 전단 개발 도 구 를 공유 할 것 이다.그것들 은 모두 무료 이 며,대부분의 도 구 는 당신 이 놀 라 운 사 이 트 를 만 드 는 데 도움 을 줄 수 있다.
1. Grid Guide
특성:빠 른 생 성 격자

먼저 제 가 소개 하고 자 하 는 것 은 Grid.Guide 입 니 다.무료 웹 애플 리 케 이 션 으로 온라인 으로 격자 를 만 들 수 있 습 니 다.이 작은 응용 프로그램 은 사용자 정의 간격 과 열 수 를 통 해 격자 방안 을 만 들 수 있 습 니 다.
먼저 사이트 의 첫 번 째 너비 와 열 수 를 입력 한 다음 Grid Guide 는 선택 할 수 있 는 옵션 을 만 들 것 입 니 다.
Photoshop 이나 Illustrator 를 가 져 오 는 데 사용 되 는 모든 격자 방안 을 PNG 그림 으로 다운로드 할 수도 있다.수 동 으로 계산 하거나 격자 라 이브 러 리 에 의존 하지 않 고 쉽게 격자 를 만 들 수 있 습 니 다.
2. Foundation
특성:Bootstrap 와 유사 한 프레임 워 크

대부분의 전단 개발 자 들 이 Bootstrap 프레임 워 크 를 더 좋아 한 다 는 것 을 인정 해 야 합 니 다.그러나 But Zurb 의 Foundation 이 최근 에 전면적으로 업 데 이 트 된 후에 저 는 이것 이 사람들의 주목 을 받 을 만하 다 고 생각 합 니 다.
Foundation 프레임 워 크 는 Bootstrap 과 마찬가지 로 격자,레이아웃,단추 와 다른 동적 요 소 를 위 한 미리 정 의 된 CSS 클래스 가 있 습 니 다.그러나 디자인 이 더욱 간단 하기 때문에 일반적인 프레임 워 크 처럼 레이아웃 을 사용자 정의 하기 쉽다.
그리고 새로운 Foundation 에는 Foundation for Email 이라는 자매 프레임 워 크 도 있다.이것 은 전자 우편 인터페이스 개발 을 위 한 프레임 워 크 입 니 다.
이 두 가지 Foundation 프레임 워 크 는 모두 매우 좋 고 Zurb 팀 이 유지 하고 업데이트 합 니 다.
3. CodePen
기능:새로운 창의 코드 구현

대부분의 개발 자 들 은 cloud IDEs 을 사용 하여 전단 개발 을 하 는 것 이 매우 편리 하 다 는 것 을 안다.이 를 통 해 모든 컴퓨터 에 코드 를 쓰 고 프로젝트 를 클 라 우 드 에 저장 하고 공유 할 수 있 습 니 다.
하지만 이렇게 많은 선택 이 있 더 라 도 CodePen 이 최고 라 고 말 할 수 밖 에 없다.그것 은 시작 이 빠 르 고 믿 을 수 있 으 며 시작 하기 쉽 고 코드 를 바 꿀 때 자동 으로 업 데 이 트 됩 니 다.
그것 은 말 할 것 도 없 이 네가 생각 할 수 있 는 거의 모든 라 이브 러 리 를 지원 할 수 있다.HTML 템 플 릿 언어,예 를 들 어 Haml 이나 Slim 을 미리 설정 하고 LESS 나 SASS 컴 파일 코드 를 사용 할 수 있 습 니 다.또한 CodePen 은 외부 자원 을 추가 할 수 있 기 때문에 cdnjs 과 같은 사 이 트 를 이용 하여 다른 관련 라 이브 러 리 를 불 러 올 수 있 습 니 다.
코드 를 쓰 고 새로운 아 이 디 어 를 실현 하기 위 한 최고의 개발 도구 임 에 틀림없다.비슷 한 도구 도 있 지만 내 가 보기 에는 코드 펜 만큼 좋 은 것 은 없다.
4. Unheap
기능:최신 jQuery 플러그 인 라 이브 러 리

기획 목록 에 있 는 최신 JS 플러그 인 을 찾 는 것 은 매우 어렵다.대부분의 경우 Github 에서 인기 있 는 플러그 인 을 찾 거나 트 위 터 에서 인기 있 는 항목 을 볼 수 밖 에 없다.
그러나 Unheap 등 사이트 가 있 으 면 최신 jQuery 플러그 인 을 쉽게 찾 을 수 있 습 니 다.그것들 은 네 비게 이 션,폼,웹 미디어 와 기타 분류 등 각종 유형의 플러그 인 이 있다.
이것 은 기본적으로 네트워크 상에 서 가장 좋 은 jQuery 플러그 인 을 가 진 저장 소 이 며,자주 업데이트 되 기 때문에,당신 은 항상 각종 새로운 플러그 인 을 찾 을 수 있 습 니 다.
5. LivePage
기능:자동 새로 고침 브 라 우 저

일부 브 라 우 저 플러그 인 은 당신 이 개발 하 는 데 가장 좋 은 도구 입 니 다.LivePage 은 무료 구 글 확장 플러그 인 으로 로 컬 파일 을 수정 한 후에 자동 으로 페이지 를 새로 고 칠 수 있 습 니 다.
이것 은 로 컬 에서 HTML/CSS/JS 파일 을 편집 할 수 있 으 며,브 라 우 저 는 보증 할 때마다 자동 으로 갱 신 됩 니 다.보통 1 초 동안 새로 고침 을 해 야 하지만,이렇게 여러 번 조작 하면 얼마나 귀 찮 은 지 알 게 될 것 이다.
라 이브 페이지 는 불 여우 에 도 같은 플러그 인 을 LiveReload 이 라 고 합 니 다.
6. Fullpage Screen Capture
기능:전체 화면 캡 처

나 는 줄곧 이 확장 플러그 인 을 사 용 했 고,그것 은 내 가 레이아웃 을 설계 할 때 가장 즐겨 사용 하 는 도구 중의 하나 이다.Fullpage Screen Capture 은 웹 페이지 전 체 를 캡 처 하여 PNG 그림 으로 저장 할 수 있 습 니 다.
Chrome 확장 판 의 단 추 를 간단하게 누 르 면 웹 페이지 전체 스냅 샷 을 자동 으로 만 들 고 그림 으로 연결 합 니 다.너 는 그것 으로 전체적인 디자인 을 연구 할 수 있다.이것 은 너의 디자인 사이트 에 매우 도움 이 된다.
7. WhatFont
기능:네트워크 에서 최고의 글꼴 찾기

조판 은 웹 디자인 에 있어 서 큰 도전 이 고 쉬 운 일이 아니다.적당 한 글꼴 을 찾 는 것 은 매우 피곤 하지만,예 를 들 어 WhatFont 의 확장 플러그 인 을 사용 하면 검색 할 때의 고통 을 줄 일 수 있 습 니 다.
구 글 브 라 우 저 에 WhatFont 만 추가 하면 웹 페이지 의 어떤 글꼴 을 볼 때마다 클릭 하고 멈 추 면 글꼴 스타일,크기 등 을 포함 한 모든 방안 을 제공 하고 서비스 가 가능 할 때 다운로드 주소(예 를 들 어 TypeKit 나 Webfonts)를 제공 합 니 다.
8. Node/npm
기능:명령 줄

Node 는 웹 개발 의 면 모 를 분명히 바 꾸 었 다.이것 은 자 바스 크 립 트 를 백 엔 드 에 전달 하고 npm 으로 되 돌려 주 며 가장 빠르게 발전 하 는 패키지 관리자 입 니 다.
이것 은 거의 필연 적 이 고 충분 한 이유 가 있다.현재 모든 전단 개발 자 는 학습 명령 행 이 어야 합 니 다.지금 은 전단 작업 흐름 에 필요 한 도구 이기 때 문 입 니 다.그리고 npm 도 이 과정의 일부분 으로 명령 행 에서 관리 합 니 다.
새 가방 을 사용 하거나 낡은 가방 을 업그레이드 할 수 있 습 니 다.npm scripts 을 통 해 당신 이 무엇 을 할 수 있 는 지 알 수 있 습 니 다.
만약 당신 이 이전에 npm 를 시도 해 본 적 이 없다 면,나 는 당신 이 이 부분 에 발 을 들 여 놓 기 시작 할 것 을 강력 히 건의 합 니 다.그것 이 어디 가 놀 라 운 지 보 세 요.
9. Mobile Speed Tester
특성:휴대폰 모니터링

구 글 은 양질 의 사용자 체험 을 제공 할 줄 알 고 역장 들 이 더 좋 은 사 이 트 를 만 드 는 데 도움 을 주 려 고 한다.구 글 의 가장 좋 은 도 구 는 Mobile Speed Tester 으로 모든 사이트 가 컴퓨터 와 휴대 전화 에서 의 응답 속 도 를 측정 할 수 있다.
이 는 방문 속도 와 사용자 체험 을 동시에 평가 해 이 사이트 가 휴대 전화 에 우호 적 인지 여 부 를 판단 한다.
그것 은 상세 한 보고 서 를 만 들 지 않 고 usability testing 의 대체 품 이 되 기 에는 부족 하 다.그러나 이런 무료 도 구 는 당신 에 게 좋 은 피드백 을 주 고 더욱 정확 한 방법 을 선택 할 수 있 습 니 다.
10. Responsive Test
특성:테스트 사이트 응답 속도

마지막 으로 똑 같이 중요 한 것 은 Responsive Test 이라는 웹 애플 리 케 이 션 이다.이것 은 GitHub 에 발 표 된 오픈 소스 프로젝트 로 모든 사이트 의 브 라 우 저 에서 의 응답 이 정상 인지 테스트 할 수 있 습 니 다.
URL 을 입력 하고 테스트 할 너비 로 창 을 끌 어 다 놓 으 십시오.아이 폰,아이 패드,유 니 버 설 컴퓨터 로 전환 할 수 있 는 작은 버튼 도 있다.
여기에 도 Matt Kersley 가 개발 한 유사 도구 이 있 지만 크기 를 조절 할 수 없다.반대로,테스트 에 사용 할 몇 가지 미리 정 의 된 크기 의 창 만 사용 할 수 있 습 니 다.
이 두 가 지 는 모두 훌륭 한 도구 로 창 을 이리 저리 끌 어 다 니 는 것 보다 훨씬 간단 하 다.
지금까지 저의 TOP 10 리스트 는 끝 났 습 니 다!나 는 이 목록 이 유용 하 다 는 것 이 증명 되 기 를 바 랍 니 다.그리고 나 는 당연히 적어도 이 목록 에 있 는 도구 가 여러분 을 도 울 수 있 기 를 바 랍 니 다.
전단 개발 이 매우 빠 르 기 때문에 앞으로 더 많은 강력 한 도구 가 나 올 것 이 라 고 기대 할 수 있다.
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!