디자인 참고 사이트
- 지디웹
http://www.gdweb.co.kr
www.gdweb.co.kr
- 드리블
Dribbble - Discover the World’s Top Designers & Creative Professionals
MEZZO: Editable Illustrator Grain Textures - Now Available!
dribbble.com
- 마네루 디자인 연구
https://maneru-design-lab.net/
マネるデザイン研究所
普通のWebデザイン集とは違い、ちょっぴりポイントを解説したWebデザイン集です。自分でもマネしたいアイデアを集めています。デザインを勉強している人も、アイデアが浮かばない人もこ
maneru-design-lab.net
- Design patterns
UI-Patterns.com
Validation Patterns Card Deck From $49
ui-patterns.com
- 바슈카 (디자인 자료다운, 서치)
Bashooka | Graphic and web design examples to inspire your creativity
Bashooka is graphic and web design blog, we share tutorials & resources for front-end developer and designer.
bashooka.com
- 노트폴리오
노트폴리오 :: 국내 최대 창작자/디자이너 플랫폼 by 스터닝 포트폴리오 · 성장 · 채용 · 디자인
노트폴리오는 여기저기 흩어져 있는 아티스트와 디자이너들이 한 곳에 모여 자신의 작업을 공개하고 이야기하는 공간으로 스터닝에서 서비스합니다.
notefolio.net
- 워드프레스 테마 마켓
WordPress Themes & Website Templates from ThemeForest
Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates.
themeforest.net
- 핀터레스트
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
문자코드/폰트/아이콘 관련 사이트
- 앤티티코드
Entity Code - A Clear and Quick Reference to HTML Entities Codes
About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done
entitycode.com
- 앤티티, ASCII 화살표 문자코드
https://www.toptal.com/designers/htmlarrows/arrows/
HTML Arrow Symbols, Entities and Codes — Toptal Designers
Easily find HTML arrow symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including right arrow, left arrow, up and down arrows.
www.toptal.com
- 특수문자 모음
https://wepplication.github.io/tools/charMap/#specialChar
특수문자표 이모티콘 모음
특수문자, 유니코드, 이모지, 이모티콘, 아스키아트, 아이폰 텍스트 대치, 인스타그램 특수기호, 인싸티콘(영어 글씨체, 폰트), 특수문자 그림 등 희귀 문자 모음
wepplication.github.io
- 폰트어썸
https://fontawesome.com/search
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
- 구글폰트
https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- 눈누 ( 상업적 이용 가능한 무료 폰트)
눈누
상업용 무료한글폰트 사이트
noonnu.cc
- Ant Design 5.0
https://ant.design/components/icon/
Icon - Ant Design
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
ant.design
- Feather
Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
feathericons.com
- streamline
10개까지 무료 다운로드 가능
Download 177,289 Streamline Icons (22+ free sets)
www.streamlinehq.com
디자인소스 다운로드
- freepik ( 프리픽 )
하루에 10개의 파일을 무료로 다운로드할 수 있고 AI 텍스트-이미지 생성은 하루에 20개 다운로드 가능합니다.
프리미엄에 가입하면 제한 없이 사용 가능합니다. 자세한 가격은 사이트를 참고해 주세요.
Freepik | Create great designs, faster
Millions of free graphic resources. ✓ Photos ✓ AI images ✓ Vectors ✓ Templates ✓ Videos. Find out about our real-time AI art generator. #freepik
www.freepik.com
- vecteezy ( 벡티지 )
상업적으로 이용 가능한 무료 이미지, 템플릿, 비디오 등을 다운로드할 수 있는 사이트입니다.
프리미엄 가입 시 더 많은 혜택을 받을 수 있습니다.
Download Free Vectors, Images, Photos & Videos | Vecteezy
Explore millions of royalty free vectors, images, stock photos and videos! Get the perfect background, graphic, clipart, picture or drawing for your design.
www.vecteezy.com
- none project ( 논프로젝트 )
상업적으로 이용 가능한 무료 아이콘과 사을 다운로드할 수 있는 사이트입니다.
프리미엄 가입 시 더 많은 혜택을 받을 수 있습니다.
Noun Project: Free Icons & Stock Photos for Everything
Iconathon Redefining Women Collection
thenounproject.com
- flation ( 플래티콘 )
다양한 아이콘 이미지 다운로드할 수 있는 사이트입니다.
프리미엄 가입 시 더 많은 혜택을 받을 수 있습니다.
Free Icons and Stickers - Millions of images to download
Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats
www.flaticon.com
- seeklogo
여러 회사의 로고들이 모여있는 사이트입니다.
회사 공식 사이트에서 로고를 찾지 못했을 때 이 사이트에서 검색해서 쉽게 찾을 수 있습니다.
Vector Logos, PNG Images, Templates Free Download | seeklogo
seeklogo.com is the world's best vector logos, logo png images, logo templates, brand logos and icons source. You can download in PNG, SVG, AI, EPS, CDR formats
seeklogo.com
- pngTree
다양한 PNG, PSD 이미지 파일을 다운로드할 수 있는 사이트입니다.
무료로 하루에 1개 다운 가능하고 무한 다운로드를 하려면 프리미엄 요금제에 가입을 해야 합니다.
자세한 사항은 사이트의 가격정책을 확인해 주세요.
수백만 개의 PNG 이미지, 배경 및 벡터 에 대한 무료 다운로드 | Pngtree
Pngtree는 PNG, PNG 이미지, 배경 및 벡터를 무료로 다운로드 할 수 있습니다. 수백만 개의 고품질 무료 PNG 이미지, PSD, AI 및 EPS 파일을 사용할 수 있습니다.
kor.pngtree.com
- icons8 ( 무료 벡터 아이콘)
다양한 벡터아이콘을 다운로드할 수 있는 사이트입니다.
무료는 저해상도 png, gif 아이콘 다운로드 가능하지만 icons8로 백링크해야 합니다.
결제를 하면 저작자 표시 및 백링크 없이 사용이 가능합니다. 자세한 가격은 사이트에서 확인해 주세요.
무료 벡터 아이콘 — 1,338,600개의 아이콘 다운로드 (SVG, PNG)
일러스트레이터 플러그인 어도비 일러스트레이터에서 바로 사용할 수 있는 백만 개 이상의 벡터 아이콘
icons8.kr
- 셔터스톡
이미지, 비디오, 음악, 템플릿 등 다양한 파일을 무료로 다운로드 가능한 사이트입니다.
스톡 이미지, 사진, 벡터, 비디오 및 음악 | Shutterstock
Shutterstock에서 사진, 벡터, 일러스트를 비롯한 최고의 로열티 프리 이미지를 다운로드하세요. 간편 요금제와 간편 라이선스를 이용해 보세요.
www.shutterstock.com
- 픽셀( 무료 이미지, 동영상 )
분위기 있는 이미지를 다운로드할 때 사용하는 사이트입니다.
저작권을 고지하지 않고 무료로 다운이 가능합니다. 하지만 자세한 라이선스는 사이트를 확인해 주세요.
- 디바이스 목업다운로드
다양한 디바이스의 목업파일을 다운로드할 수 있는 사이트입니다.
https://www.ls.graphics/devices-mockups
Top Quality Free & Premium Device Mockups (PSD, Figma, Sketch) | ls.graphics
ᐅ Seeking engaging device mockups for personal or commercial projects? Explore ls.graphics' comprehensive collection of exceptional Free and Premium Device Mockups. Bring your digital designs to life today! 🚀💻
www.ls.graphics
디자인 작업
- 미리캔버스
포토샵 없이도 디자인 작업을 할 수 있는 사이트입니다.
다양한 템플릿과 원하는 디자인으로 조합해서 사용할 수 있습니다.
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
- 캔바
포토샵 없이도 디자인 작업을 할 수 있는 사이트입니다.
사진뿐만 아니라 동영상 편집도 가능합니다.
- 이미지 배경제거(누끼)
배경제걱 필요한 이미지를 업로드만 하면 자동으로 배경을 지워주는 사이트입니다.
무료버전은 사이즈가 작은 이미지로 다운가능하며 구독을 하면 원본사이즈의 이미지를 다운로드할 수 있습니다.
이미지 배경 제거, 투명 배경 만들기 – remove.bg
사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.
www.remove.bg
- 애니메이션 GIF 메이커
여러 개의 이미지를 gif로 변환시켜 주는 사이트입니다.
Animated GIF Maker
Online GIF maker where you can create animated GIFs, banners, slideshows from sequence of images. Upload frames and make a GIF or merge and edit existing GIFs
ezgif.com
- favicon 제작
웹사이트의 파비콘을 제작해 주는 사이트입니다.
https://www.favicon-generator.org/
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
ConvertICO.com - Convert PNG to ICO and ICO to PNG files
This free online icons converter allows you to convert PNG to ICO files with ease.
convertico.com
Favicon.io - The Ultimate Favicon Generator (Free)
With Favicon.io you can quickly generate a favicon for your website for free!
favicon.io
- 그리드칼큘레이터 (그리드 레이아웃 자동계산기)
디자인 작업을 하기 전 그리드 레이아웃을 자동으로 계산해 주는 사이트입니다.
Grid Calculator by Nicolaj Kirkgaard Nielsen
gridcalculator.dk
- 컬러맵
색조합이 필요할 때 도움을 주는 사이트입니다.
Color Palettes for Designers and Artists - Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
colorhunt.co
- viewportsizer
다양한 디바이스 사이즈 확인 가능한 사이트입니다.
https://viewportsizer.com/devices/
Viewport Size by Device / Phone Screen Dimensions | Viewport Sizer Tool
Use our handy guide for viewport dimensions by device here. All phone screen dimensions listed including popular models for Samsung and Apple iPhone.
viewportsizer.com
웹접근성
- W3C Validation
마크업 및 웹 접근성 오류를 확인하고 웹 표준을 검사해 볼 수 있는 사이트입니다.
https://jigsaw.w3.org/css-validator/
W3C CSS 검사 서비스
파일 업로드를 통한 검사 직접 입력을 통한 검사
jigsaw.w3.org
- KWCAG a11y inspector (크롬 확장프로그램)
컨트롤의 대각선 길이를 측정해 주는 프로그램입니다.
크롬 웹 스토어에서 설치 가능하며, 웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현할 수 있도록 확인할 수 있습니다.
https://chromewebstore.google.com/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko
- 웹 브라우저 개발자 도구 (크롬 확장프로그)
웹 콘텐츠 구성 요소를 탐색할 수 있으며 대부분의 브라우저가 지원합니다.
- 웹 접근성 자동 진단
웹 접근성을 개선이 필요한 부분을 자동으로 검출해 주는 프로그램입니다.
- PC
WAVE Web Accessibility Evaluation Tools
WAVE Browser Extensions You can use the online WAVE tool by entering a web page address (URL) in the field above. WAVE Chrome, Firefox, and Edge browser extensions are available for testing accessibility directly within your web browser - handy for checkin
wave.webaim.org
- mobile
https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor
접근성 검사기 - Google Play 앱
빠르게 접근성 스캔하기
play.google.com
- W3C 접근성 원칙
https://www.w3.org/WAI/fundamentals/accessibility-principles/ko
접근성 원칙
웹 사이트, 웹 어플리케이션, 브라우저와 다른 도구를 위한 기본적 웹 접근성 필요조건에 대한 개요
www.w3.org
- 네이버 접근성 가이드
https://accessibility.naver.com/accessibility
네이버 접근성 페이지 : 접근성 가이드
Accessibility Guide 정보 접근성이란? 모든 사용자를 위한 더 편리한 서비스 정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는모든 정보
accessibility.naver.com
- 웹 접근성(Web Accessibility) 4대 원칙
웹 접근성(Web Accessibility) 4대 원칙
웹 접근성(Web Accessibility)은 '장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장한다'는 개념이다. 누구나 정보를 공유할 수 있는 정보 공간, '월
365kim.tistory.com
- Contrast Finder (웹 접근성 명암대비 확인)
웹 접근성 기준에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아주는 사이트입니다.
https://app.contrast-finder.org/
Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색
Contrast-Finder는 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. 그래서 색의 명암비와 관련된 웹 접근성(a11y) 테스트를 충족시키는 데 도움을 드립니다. Contras
app.contrast-finder.org
제가 웹디자인을 하면 수집한 사이트를 정리해 봤어요!
아마 이것보다 더 많은 사이트들이 많겠지만
도움이 되면 좋겠어요!