웹 개발·디자인 참고 사이트는 프론트엔드 개발자, 웹 퍼블리셔, 디자이너가 문제 해결, 코드 실험, 디자인 영감을 얻기 위해 찾는 커뮤니티, 문서, 쇼케이스 웹사이트이다.
← 모음
웹 개발·디자인 참고 사이트 모음: Stack Overflow, MDN, CodePen, Dribbble, Awwwards
Stack Overflow, GitHub, MDN, CodePen, Dribbble, Awwwards 등 프론트엔드 개발자와 퍼블리셔, 디자이너가 문제 해결, 코드 실험, 디자인 영감에 쓰는 사이트를 용도별로 모았다.
소스
- Stack OverflowStack Overflow는 프로그래밍 질문과 답변을 모아 두는 개발자 질의응답 커뮤니티이다.
- GitHubGitHub는 코드를 저장하고 공유하며 협업하는 소스 코드 호스팅 플랫폼이다.
MDN Web DocsMDN Web Docs는 웹 개발자를 위한 공식 기술 문서와 학습 자료를 제공하는 개발자 문서 플랫폼이다.- Can I useCan I use는 CSS와 자바스크립트 기능별 브라우저 지원 현황을 조회하는 사이트이다.
- web.devweb.dev는 웹 성능, 접근성, 최신 웹 기술을 다루는 구글의 웹 개발 가이드 사이트이다.
- CodePenCodePen은 HTML, CSS, JavaScript 코드를 브라우저에서 작성하고 결과를 실시간으로 확인하는 온라인 코드 편집 환경이다.
- CSS-TricksCSS-Tricks는 CSS와 레이아웃을 다루는 실무 가이드를 제공하는 웹 개발 사이트이다.
DribbbleDribbble은 디자이너들이 작업물을 공유하고 네트워크를 형성하는 글로벌 디자인 커뮤니티이다.- 비핸스비핸스는 Adobe에서 운영하는 글로벌 크리에이티브 포트폴리오 공유 플랫폼이다. 디자이너와 크리에이터가 자신의 프로젝트를 게시하고 작품을 탐색할 수 있다. 디자인, 일러스트, 영상, 브랜딩 등 다양한 분야의 작업 사례가 축적되어 있다.
AwwwardsAwwwards는 웹 디자인과 개발 분야의 우수한 작품을 선정하는 글로벌 웹 어워드 플랫폼이다.
The FWAThe FWA는 혁신적인 웹사이트와 디지털 프로젝트를 선정하는 글로벌 웹 어워드 플랫폼이다.- Smashing MagazineSmashing Magazine은 UX, 접근성, CSS, 성능 등을 다루는 웹 전문 온라인 매거진이다.
- CodropsCodrops는 인터랙션 디자인과 UI 애니메이션 예제를 코드와 함께 제공하는 사이트이다.
프리코드캠프프리코드캠프 (freeCodeCamp)는 무료로 코딩을 배울 수 있는 글로벌 교육 플랫폼입니다. 인터랙티브 코딩 레슨과 인증 과정, 프로젝트 기반 학습을 제공하며 웹 개발 학습에 널리 활용됩니다. HTML, CSS, JavaScript 등 기초부터 단계적으로 익히기 좋습니다.- 모던 JavaScript 튜토리얼모던 JavaScript 튜토리얼은 자바스크립트 기초부터 심화까지 한국어로 정리한 온라인 학습 사이트이다.
생활코딩생활코딩은 프로그래밍과 웹 개발 기초를 쉽게 설명하는 교육 콘텐츠로 잘 알려진 학습 플랫폼입니다. HTML, CSS, JavaScript, Python, Next.js 등 웹 개발 학습에 연결되는 다양한 수업을 제공합니다. 웹 개발이 처음인 경우 기초 개념을 익히는 데 적합합니다.- Frontend MentorFrontend Mentor는 실제 디자인 시안을 보고 웹페이지를 구현하며 연습하는 프론트엔드 챌린지 사이트이다.
웹 개발·디자인 참고 사이트의 용도
ChatGPT 같은 AI 도구가 보편화된 것은 2022년 말 이후의 일입니다. 그 전까지 디자이너·웹 퍼블리셔·프론트엔드 개발자들은 막히는 문제가 생기면 커뮤니티를 뒤졌고, 영감이 필요하면 쇼케이스 사이트를 돌아봤습니다. 여기서 소개하는 사이트들이 그 시절의 주요 거점이었고, 지금도 대부분 운영 중이며 실무에서 여전히 쓰입니다.
| 용도 | 사이트 유형 | 대표 사이트 |
|---|---|---|
| 문제 해결과 레퍼런스 | 질의응답, 공식 문서, 호환성 조회 | Stack Overflow, MDN Web Docs, Can I use |
| 코드 실험과 실무 가이드 | 온라인 코드 편집, 실무 가이드 | CodePen, CSS-Tricks |
| 디자인 영감과 트렌드 | 쇼케이스, 어워드, 매거진 | Dribbble, Behance, Awwwards |
문제 해결과 레퍼런스
오류 검색, 스펙 확인, 브라우저 지원 여부를 볼 때 먼저 여는 사이트입니다. 호환성·브라우저 쪽은 웹 브라우저 모음과도 이어집니다.
| 사이트 | 설명 |
|---|---|
| Stack Overflow | 프로그래밍 질문과 답변이 쌓이는 커뮤니티. 오류 검색 시 상단에 노출되는 경우가 많음 |
| GitHub | 코드 저장·공유 플랫폼. 오픈소스 라이브러리 탐색과 다른 개발자의 코드 구조 참고 |
| MDN Web Docs | Mozilla 재단이 운영하는 HTML·CSS·JavaScript 문서. 한국어 번역 제공 |
| Can I use | CSS·JavaScript 기능의 브라우저별 지원 여부 확인 |
| web.dev | 웹 성능·접근성·최신 웹 기술 가이드 |
코드 실험과 실무 가이드
아이디어를 바로 붙여 보거나, 레이아웃 패턴을 교과서처럼 확인할 때 씁니다.
| 사이트 | 설명 |
|---|---|
| CodePen | HTML·CSS·JavaScript를 브라우저에서 작성하고 결과를 실시간 확인 |
| CSS-Tricks | CSS와 레이아웃 실무 가이드. Flexbox·Grid 가이드가 특히 알려짐. 2022년 DigitalOcean 인수 후 2023년 게시 중단, 2024년 중반 재개(글 기준 2026-04-12) |
디자인 영감과 트렌드
UI 아이디어와 수상작 수준의 구현 사례를 볼 때 쓰는 쇼케이스·어워드입니다. 국내·해외 웹디자인 갤러리 전반은 웹디자인 레퍼런스 사이트에도 정리돼 있습니다.
| 사이트 | 설명 |
|---|---|
| Dribbble | UI 작업물 쇼케이스. 호버·마이크로 인터랙션·컬러 팔레트 아이디어 |
| Behance | Adobe의 포트폴리오 플랫폼. 프로젝트 단위 케이스 스터디 |
| Awwwards | 디자인·창의성·사용성·코드 완성도 기준의 웹 어워드 |
| The FWA | 웹사이트 디자인과 인터랙션 완성도 기준의 웹 어워드 |
웹 전문 매거진과 인터랙션 예제
칼럼으로 실무 판단을 보강하거나, 애니메이션 예제 코드를 찾을 때 씁니다.
| 사이트 | 설명 |
|---|---|
| Smashing Magazine | 2006년 창간한 웹 전문 매거진. UX·접근성·CSS·성능 칼럼 |
| Codrops | 스크롤 효과, 페이지 전환, 커서 인터랙션 등 UI 애니메이션 예제와 코드 |
학습과 연습
기초 학습과 시안 기반 구현 연습용 사이트입니다. 교육 플랫폼 전반은 교육 웹사이트 모음을 보면 됩니다.
| 사이트 | 용도 |
|---|---|
| freeCodeCamp | 웹 개발 무료 온라인 학습 |
| 모던 JavaScript 튜토리얼 | 자바스크립트 한국어 학습 |
| 생활코딩 | 웹 개발 한국어 영상·문서 학습 |
| Frontend Mentor | 디자인 시안 기반 구현 연습 |
사이트 한눈에 보기
| 사이트 | 주요 역할 | 주 이용층 |
|---|---|---|
| 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 도구 보편화 이후의 변화
아래 서술은 원글 수정일(2026-04-12) 기준의 관찰입니다. AI 코딩 도구가 보편화되면서 개발자들의 검색 패턴은 빠르게 바뀌고 있습니다. 단순한 코드 오류나 문법 질문은 Stack Overflow 대신 AI에게 묻는 경우가 늘었고, CSS-Tricks의 운영 재개 이후 트래픽이 AI 검색 도입 시점을 기점으로 크게 줄었다는 것도 이러한 흐름을 보여줍니다.
다만 GitHub·MDN·Awwwards·Dribbble처럼 커뮤니티와 쇼케이스 성격이 강한 사이트는 여전히 건재합니다. AI가 코드를 대신 써준다고 해서 무엇을 만들지에 대한 방향 감각까지 대신해주지는 않기 때문입니다.
등록조회0