피클웹 블로그

웹사이트 제작에 유용한 필수 도구 & 참고 사이트 모음

6 일 전 1,666

웹사이트를 제작하거나 유지보수할 때 유용하게 활용할 수 있는 참고 사이트들을 정리했습니다.
웹디자이너, 퍼블리셔, 개발자 모두에게 실무에 도움이 되는 필수 도구와 리소스입니다.

1. UI 프레임워크 & 디자인 리소스

  • Bootstrap – 반응형 웹 개발에 유용한 HTML, CSS, JS UI 프레임워크
  • Tailwind CSS – 유틸리티 퍼스트 기반 최신 CSS 프레임워크
  • Font Awesome – 웹폰트 기반 아이콘 및 로고 라이브러리
  • Google Fonts – 웹에서 자유롭게 사용할 수 있는 폰트 제공
  • Figma Community – 디자이너들이 공유하는 UI 템플릿과 컴포넌트 리소스

2. HTML/CSS/JS 개발 지원 도구

  • Emmet – 코드 자동완성을 지원하는 HTML 마크업 플러그인
  • Can I Use – 브라우저별 HTML5, CSS3 속성 지원 여부 확인
  • CSS 3.0 Maker – CSS3 속성 시각화 및 코드 자동 생성
  • ColorZilla – 웹페이지에서 색상 추출 및 팔레트 도구
  • MDN Web Docs – HTML, CSS, JavaScript 등 웹 기술의 공식 문서 및 튜토리얼
  • CodePen – HTML/CSS/JS 실험 및 공유에 특화된 웹 개발 샌드박스

3. 코드 편집 도구

  • EditPlus – FTP 지원, 다국어 인코딩, 웹코딩에 특화된 윈도우용 에디터
  • Visual Studio Code – 확장성이 뛰어난 무료 오픈소스 코드 편집기, 다양한 웹 개발 환경 지원

4. 웹 표준 & 유효성 검사

5. 웹 접근성 & 웹 가이드라인

6. JavaScript 라이브러리

  • jQuery – 가장 널리 쓰이는 JavaScript 라이브러리
  • jQuery UI – jQuery 기반 UI 구성 요소 제공

웹사이트 제작 시 위 자료들을 참고하면 퍼블리싱 속도와 품질 모두 향상될 수 있습니다.
특히 유효성 검사, 웹접근성, 브라우저 호환성은 필수적으로 점검해야 할 요소입니다.