제가 웹퍼블리싱을 하면서 자주 사용했던 웹사이트를 추천합니다.
다양한 웹사이트를 한 번에 추천하기 때문에, 간단한 설명과 함께 소개해드리며
자세한 사용방법은 추후에 작성하겠습니다 :)
목차
레퍼런스, 벤치마킹 관련 사이트
핀터레스트 👍
사진, 디자인 참고에 용이하며 원하는 카테고리별로 폴더를 생성하여 사진을 보관할 수 있습니다.
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
지디웹 👍
국내 기업 웹사이트를 카테고리, 표현방법, 컨셉 별로 검색할 수 있습니다.
또한 웹에이전시, 채용 관련정보를 볼 수 있습니다.
http://www.gdweb.co.kr
www.gdweb.co.kr
Siteinspire 👍
해외 웹사이트를 주제로 검색할 수 있습니다.
보다 자유롭고 이색적인 디자인이 많습니다.
All Websites on Siteinspire
www.siteinspire.com
awwwards
제작사 위주의 카테고리로, 국내외 웹사이트를 둘러볼 수 있습니다.
Awwwards - Website Awards - Best Web Design Trends
Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
www.awwwards.com
RWDB
국내 웹사이트를 산업분야별로 찾아볼 수 있습니다.
RWDB
RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트
rwdb.kr
사진 관련 사이트
unsplash 👍
고화질 사진을 많이 얻을 수 있습니다.
다만, 이미지 크기가 크기 때문에 웹사이트에 사용할 때에는 포토샵작업이 필수적입니다.
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
pixabay
사진, 동영상을 제공합니다.
주로 동영상 검색에 많이 사용했습니다.
폰트 관련 사이트
Google Fonts 👍
HTML에 스크립트하여 사용합니다.
원하는 문구를 입력해 미리보기를 볼 수 있기 때문에 편리합니다.
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
아이콘 관련 사이트
icons8 👍
다양한 디자인의 아이콘이 많습니다.
일부 아이콘은 다운받을 때 색상을 원하는대로 설정할 수 있어 자주 사용했습니다!
무료 벡터 아이콘 — 1,345,000개의 아이콘 다운로드 (SVG, PNG)
일러스트레이터 플러그인 어도비 일러스트레이터에서 바로 사용할 수 있는 백만 개 이상의 벡터 아이콘
icons8.kr
Ionicins
코드를 이용하여 아이콘을 사용할 수 있습니다.
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
sourcetree
디자인, 컨셉별로 사용할 수 있습니다.
http://sourcetree.kr/?cat=ICON&page=9&order=
소스트리,무료 디자인소스 정보
sourcetree.kr
Font Awesome
카테고리별로 아이콘이 정리되어있습니다.
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
깃허브 관련 사이트
Gighub 리드미 예시 모음 👍
깃허브 리드미를 작성하는 초기방법은 구글링하면 잘 나와있는데, 막상 레이아웃이나 컨셉을 잡기 어렵습니다.ㅠㅠ
그럴때 아래 사이트에 들어가보시면, 깃허브 유저들이 작성한 다양한 리드미와 해당 코드까지 참고할 수 있습니다!
https://github.com/abhisheknaiidu/awesome-github-profile-readme?tab=readme-ov-file
GitHub - abhisheknaiidu/awesome-github-profile-readme: 😎 A curated list of awesome GitHub Profile READMEs 📝
😎 A curated list of awesome GitHub Profile READMEs 📝 - abhisheknaiidu/awesome-github-profile-readme
github.com
Simple Icons 👍
보통 리드미를 작성하면서 Skill&Tool을 뱃지로 표현할 때 유용하게 사용합니다.
다만, 뱃지마다 내용을 수정해야하는 것이 귀찮,,지만 유니크하게 조합하여 사용할 수 있는 장점이 있다고 봅니다!
Simple Icons
3093 Free SVG icons for popular brands
simpleicons.org
Github profile readme generator
깃허브 리드미를 어떻게 작성해야할지 막막할 때 용이합니다.
각 섹션별로 해당하는 칸에 내용을 입력하거나 선택 후 하단에 코드를 복사하여 리드미에 붙여넣으면 됩니다.
https://rahuldkjain.github.io/gh-profile-readme-generator/
GitHub Profile Readme Generator
Prettify your github profile using this amazing readme generator.
rahuldkjain.github.io
Emoji Cheat Sheet 👍
리드미를 구경하다보면 👋, 🌱등의 이모티콘이 많이 보입니다.
바로 아래 사이트에서 아이콘 표현방식을 애플/구글/윈도우 중 Device type을 설정하고,
원하는 이모티콘을 누르면속성이 복사되어 원하는 곳에 붙여넣기만 하면 편리하게 사용할 수 있습니다.
https://www.webfx.com/tools/emoji-cheat-sheet/
Emoji Cheat Sheet
Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings.
www.webfx.com
웹사이트 동적표현 관련 사이트
Hover.css
Hover시 구현할 수 있는 에니메이션 예시들이 나와있습니다.
사용방법은 잘,, 모르겠지만 예시를 보는 것만으로도 퍼블리싱에 참고가 많이 될 것 같습니다!
https://ianlunn.github.io/Hover/
Hover.css - A collection of CSS3 powered hover effects
ianlunn.github.io
slick
슬라이드, 그리고 어쩌면 드래그를 구현할 수 있습니다.
초반엔 손쉽게 사용했는데, 사용하다보니 레이아웃이 웹페이지 크기를 범람하는 일이 발생하기도합니다ㅜㅜ,,
(CSS로 어찌어찌 수정은 가능하나 은근히 골칫거리입니다 흑)
https://kenwheeler.github.io/slick/
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
AOS
아래페이지에서 원하는 효과 박스에 있는 코드를 복사-붙여넣기만 하면 손쉽게 애니메이션을 구현할 수 있습니다.
하지만 이 친구도 레이아웃이 페이지크기를 범람하는 일이 발생하는 것 같으니 주의 바랍니다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
Clippy
웹사이트 벤치마킹을 하다보면, 동그란 원이 사진을 감싸고 있다가 사라지는 효과를 보셨을 수도 있는데요!
아래 페이지를 이용하면 된다고하나 자세한 사용방법은 모르겠습니다,,
https://bennettfeely.com/clippy/
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
animista
플립, 슬라이드 등의 에니메이션 예시와 코드를 참고할 수 있는 사이트입니다.
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
animate
에니메이션효과를 스크립하여 사용하는 사이트인듯합니다.!
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
컬러 관련 사이트
Colorhunt
색상배합이 어려울 때 컬러차트를 참고하기 좋을듯합니다.
원하는 색상을 클릭하면 색상코드가 복사되는 것이 장점입니다!
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
paletton
원하는 컬러의 유사색 뿐만 아니라 보색을 색출할 수 있습니다.
원하는 색을 이용한 웹페이지 시안을 볼 수 있고, 컬러차트가 잘 나와서 스토리보드에 유용하게 사용했습니다.
https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Paletton - The Color Scheme Designer
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical col
paletton.com
CSS Gradient
포토샵에서 사용하는 그라디언트 적용방법처럼 사용이 가능합니다
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
Gradient Hunt
원하는 색상을 클릭 후 마우스를 올리면 좌측하단에 COPY버튼을 눌러
background-image: linear-gradient( 111.4deg, rgba(238,113,113,1) 1%, rgba(246,215,148,1) 58% );와 같이 바로 복사할 수 있습니다.!
Gradient Hunt - Beautiful Color Gradients
Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project and save all the gradients you like.
gradienthunt.com
Designspiration
이미지와 관련된 색상 또는 색상과 관련된 이미지를 함꼐 볼 수 있습니다!
컨셉 또는 디자인, 컬러설정시 유용할 것 같습니다.
https://www.designspiration.com/
Designspiration - Design Inspiration | Inspirational Art, Photography & Typography Images
Create an account or log in to Designspiration - An image & color search engine for creating mood boards and finding art, design, logos, photography, app & ui inspiration.
www.designspiration.com
목업 관련 사이트
smartmockups 👍
이거 완전,, 요물입니당. 깃허브레퍼지토리 리드미에 목업이미지를 첨부하려고 사용했습니다.
카테고리별로 나눠져있고, 이미지 업로드 하는 방법도 간편, 업로드 한 이미지 크기 조정 가능, PNG파일은 배경을 색이나 unsplash를 연동하여 설정할 수 있습니다. 포토샵에서 레이아웃, 이것저것 건들지않아도되서 완전 초간편!
아쉬운점은 무료로 사용하다보니 기능이 하나씩 유료로 바뀝니다!
https://smartmockups.com/mockup/6b47f38cd61
https://smartmockups.com/mockup/6b47f38cd61
smartmockups.com
freepik
디바이스 목업보단, 생필품 목업디자인이 이쁜게 많은 것 같습니다.
가끔 포토샵에서 열리지 않는 경우도 있어서 파일을 잘 살펴보아야합니다.
https://kr.freepik.com/vectors/%EC%9B%B9-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%BB%A8%EC%85%89
무료로 다운로드 가능한 웹 디자인 컨셉 벡터 & 일러스트 | Freepik
Freepik에서 가장 인기있는 웹 디자인 컨셉 벡터를 찾고 다운로드하세요 ✓ 상업적 용도로 무료 사용 ✓고품질 이미지 ✓창의적인 프로젝트용으로 제작. #freepik #벡터
kr.freepik.com
사진, 파일 편집 사이트
remove
배경을 투명하게 만들 수 있는 사이트입니다.
이미지 배경 제거, 투명 배경 만들기 – remove.bg
사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.
www.remove.bg
convertio
깃허브 레퍼지토리 리드미에 웹페이지 프리뷰를 첨부하기위해 반디캠으로 웹페이지를 영상으로 찍은 후
아래사이트를 통해 gif로 변환했습니다. 사용법이 간단해서 좋았으나 무료에는 사용횟수제한이 있습니다.(하루? 10회)
https://convertio.co/kr/mp4-gif/
MP4 GIF 변환 (온라인 무료) — Convertio
mp4 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
읽어주셔서 감사합니다!
들숨에 능력을 날숨에 재력을 얻읍시다