ChatGPT 같은 AI 도구가 보편화된 것은 2022년 말 이후의 일입니다. 그 전까지 디자이너·웹 퍼블리셔·프론트엔드 개발자들은 막히는 문제가 생기면 커뮤니티를 뒤졌고, 영감이 필요하면 쇼케이스 사이트를 돌아봤습니다. 여기서 소개하는 사이트들이 그 시절의 주요 거점이었습니다. 지금도 대부분 운영 중이고, 실무에서 여전히 쓰입니다.
막히면 여기, 문제 해결과 레퍼런스
1. Stack Overflow
프로그래밍 질문과 답변이 쌓이는 커뮤니티입니다. 개발하다 오류가 나면 구글에서 검색하고, 상단에 Stack Overflow 링크가 뜨면 그게 답인 경우가 많았습니다. 개발자 설문 기준으로 전 세계 개발자의 84%가 이용하는 것으로 집계될 만큼 실질적인 사용 빈도가 높습니다.
2. GitHub
코드를 저장하고 공유하는 플랫폼입니다. 개발팀 내부 협업 도구로도 쓰이지만, 오픈소스 라이브러리를 찾거나 다른 개발자의 코드 구조를 참고할 때도 자주 찾는 곳입니다. 현재 전 세계 1억 명 이상의 개발자가 사용 중입니다.
3. MDN Web Docs
Mozilla 재단이 운영하는 HTML·CSS·JavaScript 공식 문서입니다. 특정 CSS 속성이나 JavaScript 함수의 정확한 사용법이 궁금할 때 개발자들이 가장 먼저 찾는 곳입니다. 한국어 번역도 제공됩니다.
https://developer.mozilla.org/ko
4. Can I use
CSS나 JavaScript의 특정 기능이 브라우저별로 지원되는지 확인하는 사이트입니다. 새 기능을 적용하기 전에 크롬·사파리·파이어폭스 등에서 호환이 되는지 확인하는 용도로, 크로스브라우징 작업에서는 기본 확인 절차였습니다.
만들면서 확인하던 곳, 코드 실험과 실무 가이드
5. CodePen
HTML·CSS·JavaScript 코드를 브라우저에서 바로 작성하고 결과를 실시간으로 확인할 수 있는 온라인 편집 환경입니다. 퍼블리셔와 프론트엔드 개발자들이 아이디어를 빠르게 테스트하거나 다른 개발자의 구현 방식을 참고할 때 썼습니다.
6. CSS-Tricks
CSS와 레이아웃을 다루는 실무 가이드 사이트입니다. Flexbox와 Grid 완벽 가이드가 특히 유명하며, 개발자들 사이에서 레이아웃 작업 시 교과서처럼 참고됐습니다. 2022년 DigitalOcean에 인수됐고, 2023년 게시가 한 차례 중단됐다가 2024년 중반부터 재개 운영 중입니다.
눈을 키우던 곳, 디자인 영감과 트렌드
7. Dribbble
디자이너들이 UI 작업물을 공유하는 쇼케이스 플랫폼입니다. 버튼 호버 효과, 마이크로 인터랙션, 컬러 팔레트 등 시각적인 아이디어를 찾을 때 디자이너와 퍼블리셔 모두 즐겨 찾던 곳입니다.
8. Behance
Adobe가 운영하는 크리에이티브 포트폴리오 플랫폼입니다. Dribbble이 단편적인 UI 스냅샷 위주라면, Behance는 웹사이트·앱 디자인의 기획부터 완성까지 프로젝트 단위 케이스 스터디를 볼 수 있어 전체 흐름을 파악할 때 유용했습니다.
9. Awwwards
디자인·창의성·사용성·코드 완성도를 기준으로 웹사이트를 평가하고 수상작을 선정하는 어워드 사이트입니다. 업계에서 "잘 만든 웹사이트"의 기준으로 통했으며, 프론트엔드 개발자와 디자이너들이 수준 높은 구현 사례를 찾을 때 참고했습니다.
10. Smashing Magazine
2006년 창간한 웹 전문 온라인 매거진입니다. UX, 접근성, CSS, 성능 등을 다루는 심층 글이 많으며, 기술 레퍼런스보다 실무 판단에 도움이 되는 칼럼 위주입니다. 개발 지식 없이도 읽을 수 있는 글이 많아 비개발자 담당자에게도 적합합니다.
https://www.smashingmagazine.com
11. Codrops
인터랙션 디자인과 UI 애니메이션 예제 위주의 사이트입니다. 스크롤 효과, 페이지 전환, 커서 인터랙션 같은 창의적인 구현물을 코드와 함께 제공합니다. 완성도 있는 예제가 많아 중급 이상의 퍼블리셔와 프론트엔드 개발자들이 참고했습니다.
사이트 한눈에 보기
| 사이트 | 주요 역할 | 주 이용층 |
|---|---|---|
| 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 코딩 도구가 보편화되면서 개발자들의 검색 패턴은 빠르게 바뀌고 있습니다. 단순한 코드 오류나 문법 질문은 Stack Overflow 대신 AI에게 묻는 경우가 늘었고, CSS-Tricks의 운영 재개 이후 트래픽이 AI 검색 도입 시점을 기점으로 크게 줄었다는 것도 이러한 흐름을 보여줍니다.
다만 GitHub·MDN·Awwwards·Dribbble처럼 커뮤니티와 쇼케이스 성격이 강한 사이트는 여전히 건재합니다. AI가 코드를 대신 써준다고 해서 무엇을 만들지에 대한 방향 감각까지 대신해주지는 않기 때문입니다.
