웹 개발·디자인 참고 사이트는 프론트엔드 개발자, 웹 퍼블리셔, 디자이너가 문제 해결, 코드 실험, 디자인 영감을 얻기 위해 찾는 커뮤니티, 문서, 쇼케이스 웹사이트이다.
웹 개발과 디자인 자료
Stack Overflow, GitHub, MDN, CodePen, Dribbble, Awwwards 등 프론트엔드 개발자와 퍼블리셔, 디자이너가 문제 해결, 코드 실험, 디자인 영감에 쓰는 사이트를 용도별로 모았다.
TOP 6
- 스택오버플로우프로그래밍 Q&A를 투표 채택으로 정리하는 전 세계 개발자 질의응답 커뮤니티stackoverflow.com
MDN Web DocsHTML CSS JavaScript Web API 표준과 예제를 정리한 Mozilla MDN Web Docs 개발자 문서developer.mozilla.org
깃허브Git 저장소 이슈 PR Actions로 협업하는 GitHub 코드 호스팅 플랫폼github.com
웹닷데브웹 성능 접근성 PWA 등 Google web.dev 개발 가이드 사이트web.dev
Can I useCSS JS 기능별 브라우저 지원 표를 조회하는 Can I use 참고 사이트caniuse.com- 코드펜HTML CSS JavaScript 스니펫을 브라우저에서 실행 공유하는 프론트엔드 샌드박스 플랫폼codepen.io
추천 모음
웹디자인 레퍼런스
국내외 웹디자인 사례와 어워드, 갤러리를 벤치마킹용으로 모아 두었습니다.
디자이너를 위한 자료
Behance, Dribbble, Awwwards, Dezeen, Designboom, Pinterest 등 디자이너가 영감과 트렌드를 얻는 사이트를 포트폴리오, 매거진, 이미지 수집, 채용으로 나눠 모았다.
교육과 웹 개발 학습
온라인 학습 플랫폼은 웹 개발, 실무 교육, 시험 대비, 글로벌 학습 등으로 다양하게 나뉩니다. 인프런, 생활코딩, 프리코드캠프, MDN Web Docs는 웹 개발 학습에 적합하며, 패스트캠퍼스와 Class101은 실무와 확장형 학습에 활용됩니다. 학습 목적에 맞는 교육 웹사이트를 선택하는 것이 효율적인 학습 흐름을 만드는 데 중요합니다.
디자인 템플릿
템플릿 기반으로 콘텐츠를 만들 수 있는 디자인 플랫폼, 홈페이지 빌더, 리소스 마켓, 프레젠테이션 템플릿 사이트를 모았습니다.
더 살펴볼 소스
씨에스에스트릭스CSS 프론트엔드 실무 팁과 튜토리얼 CSS-Tricks 온라인 매체css-tricks.com
드리블디자이너가 UI 브랜딩 작업물을 공유하는 글로벌 커뮤니티 Dribbbledribbble.com- 비핸스Adobe에서 운영 글로벌 크리에이티브 포트폴리오 공유 플랫폼behance.net
The FWA웹 디지털 프로젝트를 소개 시상하는 글로벌 어워드 사이트 The FWAthefwa.com
Awwwards웹 디자인 개발 작품을 심사 전시하는 Awwwards 큐레이션 어워드 플랫폼awwwards.com
스매싱 매거진웹 디자인 개발 실무와 UX Smashing Magazine 온라인 매거진smashingmagazine.com- 코드롭스인터랙션 UI 애니메이션 튜토리얼과 데모 소스 프론트엔드 디자인 매거진tympanus.net
프리코드캠프무료로 코딩을 배울 수 있는 글로벌 교육 플랫폼freecodecamp.org
프론트엔드 멘토실제 UI 시안을 HTML CSS JS로 구현하며 연습하는 프론트엔드 챌린지 Frontend Mentorfrontendmentor.io
생활코딩프로그래밍과 웹 개발 기초를 쉽게 설명하는 교육 콘텐츠로 잘 알려진 학습 플랫폼opentutorials.org
모던 JavaScript 튜토리얼모던 JavaScript 기초 심화를 단계별로 설명하는 한국어 오픈 튜토리얼 사이트ko.javascript.info
웹 개발·디자인 참고 사이트의 용도
P400ChatGPT 같은 AI 도구가 보편화된 것은 2022년 말 이후의 일입니다. 그 전까지 디자이너·웹 퍼블리셔·프론트엔드 개발자들은 막히는 문제가 생기면 커뮤니티를 뒤졌고, 영감이 필요하면 쇼케이스 사이트를 돌아봤습니다. 여기서 소개하는 사이트들이 그 시절의 주요 거점이었고, 지금도 대부분 운영 중이며 실무에서 여전히 쓰입니다.
| 용도 | 사이트 유형 | 대표 사이트 |
|---|---|---|
| 문제 해결과 레퍼런스 | 질의응답, 공식 문서, 호환성 조회 | Stack Overflow, MDN Web Docs, Can I use |
| 코드 실험과 실무 가이드 | 온라인 코드 편집, 실무 가이드 | CodePen, CSS-Tricks |
| 디자인 영감과 트렌드 | 쇼케이스, 어워드, 매거진 | Dribbble, Behance, Awwwards |
오류 검색, 스펙 확인, 브라우저 지원 여부를 볼 때 먼저 여는 사이트입니다. 호환성·브라우저 쪽은 웹 브라우저 모음과도 이어집니다.
웹 개발과 디자인 자료 사이트 한눈에 보기
P406| 사이트 | 주요 역할 | 주 이용층 |
|---|---|---|
| Stack Overflow | 코딩 Q&A 커뮤니티 | 전 직군 개발자 |
| GitHub | 코드 저장·공유·협업 | 전 직군 개발자 |
| MDN Web Docs | HTML·CSS·JS 공식 문서 | 전 직군 개발자 |
| Can I use | 브라우저 호환성 확인 | 퍼블리셔·프론트엔드 개발자 |
| CodePen | 코드 실험·예제 공유 | 퍼블리셔·프론트엔드 개발자 |
| CSS-Tricks | CSS·레이아웃 실무 가이드 | 퍼블리셔·프론트엔드 개발자 |
| Dribbble | UI 디자인 쇼케이스 | 디자이너·퍼블리셔 |
| Behance | 프로젝트 단위 디자인 케이스 | 디자이너·퍼블리셔 |
| Awwwards | 웹 어워드·고품질 사이트 쇼케이스 | 디자이너·프론트엔드 개발자 |
| Smashing Magazine | 웹 전문 매거진 | 전 직군 (비개발자 포함) |
| Codrops | 인터랙션·애니메이션 예제 | 퍼블리셔·프론트엔드 개발자 |
AI 도구 보편화 이후의 변화
P407아래 서술은 원글 수정일(2026-04-12) 기준의 관찰입니다. AI 코딩 도구가 보편화되면서 개발자들의 검색 패턴은 빠르게 바뀌고 있습니다. 단순한 코드 오류나 문법 질문은 Stack Overflow 대신 AI에게 묻는 경우가 늘었고, CSS-Tricks의 운영 재개 이후 트래픽이 AI 검색 도입 시점을 기점으로 크게 줄었다는 것도 이러한 흐름을 보여줍니다.
다만 GitHub·MDN·Awwwards·Dribbble처럼 커뮤니티와 쇼케이스 성격이 강한 사이트는 여전히 건재합니다. AI가 코드를 대신 써준다고 해서 무엇을 만들지에 대한 방향 감각까지 대신해주지는 않기 때문입니다.
등록수정조회2