프론트엔드 개발자가 북마크해야 할 리소스 모음 (1/3) - 디자인 에셋편

프론트엔드 개발을 하면서 좋은 아이콘, 이미지, 폰트 어디서 구하지 라는 고민해 보신 적 있으신가요?

무료 또는 CC0 라이선스로 사용 가능한 디자인 에셋을 정리해 봤습니다. 필요할 때마다 찾아보세요!

---

📊 일러스트레이션 & 아이콘

벡터 일러스트레이션

• Illustroke - AI 기반 벡터 일러스트레이션 생성
• Storyset - 무료 편집 가능한 일러스트레이션
• Blush - 믹스 앤 매치 일러스트레이션
• Open Peeps - 손으로 그린 일러스트레이션 라이브러리
• unDraw - 오픈소스 일러스트레이션
• ManyPixels - 2,500개 이상의 무료 일러스트레이션

아이콘 & 일러스트레이션 마켓플레이스

• IconScout Illustrations - 일러스트레이션 마켓플레이스
• IconScout 3D - 3D 일러스트레이션 모음
• IconScout AI - AI 기반 아이콘 생성
• Freepik - 벡터, 일러스트레이션, 사진 마켓플레이스
• Flaticon - 아이콘 전문 사이트

무료 아이콘 라이브러리

• Heroicons - Tailwind CSS 팀이 만든 깔끔한 아이콘 세트
• Lucide Icons - 아름답고 일관된 아이콘 라이브러리
• Iconify - 150,000개 이상의 아이콘 통합 플랫폼

AI 일러스트레이션 도구

• Krea.ai - AI 기반 크리에이티브 도구
• Icons8 Illustration Generator - AI 일러스트레이션 생성기

🖼️ 사진 & 이미지

고품질 무료 사진

• Unsplash - 고품질 무료 사진 라이브러리
• Pexels - 무료 사진 & 비디오 리소스

이미지 도구

• TinyPNG - 이미지 압축 도구
• Remove.bg - 배경 제거 도구
• Lorem Picsum - 더미 이미지 생성기

🎥 비디오 & 영상

무료 스톡 비디오

• Pixabay Videos - 무료 스톡 비디오
• Pexels Videos - 무료 영상 리소스
• Coverr - 무료 배경 영상
• Videvo - 무료 비디오 클립

🎨 폰트 & 타이포그래피

무료 웹 폰트

• Google Fonts - 무료 웹 폰트 라이브러리
• Font Squirrel - 상업용 무료 폰트
• DaFont - 폰트 아카이브

폰트 도구

• FontPair - Google Fonts 조합 추천
• Type Scale - 타이포그래피 스케일 생성기

🎵 사운드 & 오디오

무료 사운드 라이브러리

• Freesound - 무료 사운드 라이브러리
• Zapsplat - 사운드 이펙트 라이브러리
• BBC Sound Effects - BBC 사운드 이펙트 아카이브

무료 음악

• YouTube Audio Library - 로열티 프리 음악
• Free Music Archive - 무료 음악 아카이브

🎭 3D 아바타 & 캐릭터

아바타 생성 & 커스터마이징

• Ready Player Me - 크로스 게임 아바타 플랫폼
• Avatar SDK - 리얼리스틱 아바타 생성 SDK
• Deep Motion - 3D 캐릭터 애니메이션
• Mixamo - 3D 캐릭터 애니메이션 (Adobe)

🎨 3D 모델 & 에셋

AI 기반 3D 생성

• Meshy AI - 텍스트/이미지에서 3D 모델 생성 (AI 기반)

3D 모델 마켓플레이스

• PMND Market - React Three Fiber 에셋
• Sketchfab - 3D 모델 다운로드
• Poly Pizza - 무료 low-poly 3D 모델
• Kenney Assets - 게임 개발 에셋

무료 3D 모델 리소스

• CGTrader Free - 무료 3D 모델
• TurboSquid Free - 무료 3D 모델
• BlenderKit - Blender 애드온 에셋
• Quaternius - 무료 CC0 3D 모델
• Clara.io Library - 온라인 3D 모델 라이브러리

🎨 텍스처 & 패턴

무료 텍스처 리소스

• Poly Haven - 고품질 무료 HDRI, 텍스처, 3D 모델
• CC0 Textures - 무료 PBR 텍스처

🎨 색상 & 그라디언트

색상 팔레트 생성

• Coolors - 색상 팔레트 생성기
• Adobe Color - 색상 조합 도구
• Realtime Colors - 실시간 색상 미리보기
• Paletton - 색상 조합 도구

그라디언트 도구

• CSS Gradient - CSS 그라디언트 생성기
• Gradient Hunt - 그라디언트 컬렉션
• uiGradients - 그라디언트 모음

색상 영감

• Muzli Colors - 색상 팔레트 영감
• Color Hunt - 트렌디한 색상 팔레트

🖌️ 배경 & 패턴

배경 패턴 생성

• Hero Patterns - SVG 배경 패턴
• pattern.css - CSS 기반 배경 패턴
• BGJar - 무료 SVG 배경 생성기
• Haikei - 웹 디자인용 배경 생성기

그래픽 요소

• Get Waves - SVG 웨이브 생성기

🎨 디자인 영감

디자인 포트폴리오 & 커뮤니티

• Dribbble - 디자인 영감 & 포트폴리오 플랫폼
• Behance - 크리에이티브 포트폴리오 플랫폼
• Awwwards - 웹 디자인 어워드 & 영감

디자인 시스템 & 파일

• Figma Community - 무료 디자인 파일 & 플러그인

📱 목업 & 프로토타입

목업 생성 도구

• Mockuuups - 제품 목업 생성기
• Smartmockups - 온라인 목업 도구
• Shots - 디바이스 목업 생성기
• Screely - 브라우저 목업 생성기

📚 추가 정보

저작권 주의사항

• 각 리소스의 라이선스를 확인하고 사용
• 상업적 프로젝트에서는 유료 라이선스 고려
• CC0 라이선스는 자유롭게 사용 가능

---

💬 도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!