Squoosh - 이미지 압축 사이트
구글에서 개발한 이미지 압축 사이트
압축률이 매우 뛰어나며 드래그 앤 드롭으로 손쉽게 파일을 업로드/다운로드 할 수 있다. 또한 파일의 이름도 그대로(한글지원) 다운로드가 되어서 경로만 다르게 해준다면 쉽게 적용 할 수 있다.
위 우측 사진을 보면 약 3MB인 파일이 167KB까지 왼쪽은 원본, 오른쪽은 압축한 사진을 비교해서 보여 주고 바로바로 수정하여 압축률을 비교할 수 있다. 또한 Resize 기능까지 지원하니 썸네일이나, 큰 용량의 사진이 필요 없는 경우는 사이즈를 줄여주면 더 효과가 좋다.
Squoosh
Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files.
squoosh.app
Unsplash - 이미지 다운로드 사이트
개발을 하다 보면 임시로 쓸 사진이나, 분위기 있는 페이지를 연출 할 때 이미지가 필요해서 찾게 되는데 상업적으로 사용이 가능한지, 그런 걸 찾아보게 되는데 Unsplash 사이트는 상업/비상업적 모두 상관없이 무료로 다운로드하여 사용할 수 있다고 합니다.
또한, 한글까지 지원해서 검색이 좀 더 용이합니다 :)
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
CodePen - 웹사이트 테스트 및 시연 (프론트 엔드)
많은 블로그에서 볼 수 있는 대표적인 테스트 툴 이며 웹사이트에서 바로 시연 및 테스트가 가능하다. 손쉽게 pen(WorkSpace)를 만들고 공유하여 테스트를 맡기거나 시연해볼 수 있다.
무료 버전으로도 pen을 무제한으로 만들고 공유할 수 있다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
ilikepixels - 말풍선 커스텀
툴팁 박스, 채팅 등 웹 개발을 하다보면 말풍선을 구현 할 때가 많은데 보통 이미지로 대체하는 경우가 있다. 이미지를 만들지 못할 때 이 사이트를 참고하면 좋다.
상단에 CSS버튼을 누르면 코드가 나온다.
Bubbler - CSS Speech Bubble Generator - i like pixels <3
A simple CSS speech bubble generator to create speech bubbles using a single element and :before and :after CSS rules.
www.ilikepixels.co.uk
SVGOMG - SVG파일 만들기
손쉽게 SVG 파일을 만들어주는 사이트
어떤 아이콘이나, 버튼 이미지 등을 일러스트로 만들어 복사 후 이 사이트에 붙여 넣기를 하면 바로 SVG파일로 쉽게 만들어준다.
SVGOMG - SVGO's Missing GUI
Easy & visual compression of SVG images.
jakearchibald.github.io
CodeHexa - 색상값 정보 및 색상값으로 컨텐츠 미리보기
웹사이트 별 테마에 맞는, 이미지에 맞는 color들이 존재하고 이를 버튼이나 글자에 적용하는 경우가 많다. 이를 도입하기 앞서 미리 확인해보고 유사한 컬러는 무엇이 있는지 등 확인해 볼 수 있는 사이트이다.
Color Hex - ColorHexa.com
Color hex encyclopedia providing information about any color.
www.colorhexa.com
Regexr - 정규식 연습 사이트
개발을 하다 보면 한번 정도는 들어봤을 정규식이다. 이메일, 전화번호, 이름 등등 여러 방면에서 사용하는 정규식이고 ‘어떠한 문자열에서 일정한 패턴을 찾아주는 것’ 이라고 이해하면 좋을 듯하다.
보통 이 정규식은 다들 복사+붙여 넣기 식으로 사용해서 어떻게 수정하는지, 생성하는 지를 전혀 알지 못한다. 그래서 나는 이 사이트에서 많은 연습을 했고 이제는 원하는 정규식 코드를 생성 및 수정 할 수 있다.
그래서 본인에게 정말 필요한 정규식에 수정이 필요하다면 아래 사이트에서 여러가지 테스트를 해보면서 보강하면 좋다. 또한 왼쪽 사이드바에 정규식에 대한 사용법, 다른 사람들의 정규식을 볼 수 있다.
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
regexr.com
Curioustore - 변수명 짓기
변수명이 계속 중복되고 본인이 창의력이 없다면 아래의 사이트를 통해 변수명을 추천 받아 보면 좋을 듯 합니다. 도움을 많이 받는 사이트 입니다.
Curioustore
변수명 짓기, 컬럼명 짓기, 영어약자, 変数名 つけ方, カラム名建てる, 英語の略語, 命名变量, 命名该列, 英文缩写
www.curioustore.com
Compilejava - 웹에서 자바 컴파일
간단한 Java 코드를 웹에서 테스트할 수 있는 사이트
Online Java IDE
www.compilejava.net
Postman - API 테스트
내가 만든 api가 잘 작동하는지 테스트 혹은 어떤 값을 넣어서 api를 보내면 어떤 값이 넘어오는지 프론트 개발 없이 확인 할 수 있는 유용한 사이트
Postman API Platform | Sign Up for Free
Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
www.postman.com
더 유용한 웹사이트가 있다면 수정하도록 하겠습니다~!
'Etc' 카테고리의 다른 글
| [Swiper.js] 스와이프, 슬라이드 적용하기 및 사용법 (옵션 정리) (0) | 2023.06.30 |
|---|---|
| [Tistory] 관리자 여부 받아와 글쓰기 버튼 추가하기 (스킨 편집) (0) | 2023.06.29 |