웹 퍼블리싱과 프론트엔드 개발 실무에서 참고할 만한 사이트를 정리했습니다. 인터랙션 디자인, CSS 기법, 브라우저 호환성, 코드 예제 등을 다루는 리소스 중심으로 소개하며, 초급부터 중급 개발자까지 활용할 수 있는 사이트를 선별했습니다.
Codrops
Codrops는 웹 전문가들에게 영감을 주기 위해 만들어진 웹 개발 블로그입니다. 사용자 경험 디자인, 인터랙션 디자인, 프론트엔드 개발, 그래픽 디자인 등 다양한 분야를 다루며, 특히 창의적인 UI 효과와 페이지 전환 애니메이션 예제가 강점입니다.
https://tympanus.net/codrops
CSS-Tricks
CSS-Tricks는 CSS와 프론트엔드 개발 전반을 다루는 대표적인 웹 개발 레퍼런스 사이트입니다. Flexbox, Grid 완벽 가이드는 레이아웃 학습에 가장 많이 참고되는 자료 중 하나이며, 다양한 코드 스니펫과 실무 팁을 제공합니다.
https://css-tricks.com
MDN Web Docs
MDN Web Docs는 Mozilla에서 운영하는 웹 기술 공식 문서입니다. HTML, CSS, JavaScript API 레퍼런스와 튜토리얼을 제공하며, 웹 표준 학습에 가장 신뢰할 수 있는 자료입니다. 한국어 번역도 지속적으로 제공되고 있습니다.
https://developer.mozilla.org/ko
Can I use
Can I use는 HTML, CSS, JavaScript 기능의 브라우저별 지원 현황을 확인할 수 있는 서비스입니다. 새로운 CSS 속성이나 JavaScript API를 사용하기 전에 대상 브라우저에서 지원되는지 확인하는 용도로, 크로스브라우징 개발에 필수적인 도구입니다.
https://caniuse.com
CodePen
CodePen은 HTML, CSS, JavaScript 코드를 브라우저에서 바로 작성하고 실행 결과를 확인할 수 있는 온라인 코드 에디터입니다. 다른 개발자의 작업물을 검색하고 참고할 수 있어, 특정 UI 효과나 레이아웃 구현 방법을 빠르게 찾을 때 유용합니다.
https://codepen.io
사이트별 활용 정리
| 사이트 | 주요 용도 | 추천 대상 |
|---|---|---|
| Codrops | 인터랙션 디자인 영감, UI 효과 예제 | 중급 이상 퍼블리셔, 프론트엔드 개발자 |
| CSS-Tricks | CSS 레이아웃, 실무 코드 스니펫 | 초급~중급 퍼블리셔 |
| MDN Web Docs | HTML/CSS/JS 공식 레퍼런스 | 전 레벨 웹 개발자 |
| Can I use | 브라우저 호환성 확인 | 크로스브라우징 개발 시 |
| CodePen | 코드 실험, 타인 작업물 참고 | 빠른 프로토타이핑 시 |
