개발자가 매일 쓰는 온라인 도구 20선 (2026)

개발하다 보면 본업인 코딩 외에도 잡다한 작업이 많습니다. JSON 포맷 정리, CSS 그라디언트 색상 뽑기, 파비콘 만들기, Base64 디코딩... 이런 작업을 매번 코드로 짜는 건 시간 낭비입니다. 브라우저에서 바로 쓸 수 있는 온라인 도구를 알아두면 하루에 30분은 아낍니다.

이 글에서는 실제로 개발 업무 중 자주 쓰게 되는 온라인 도구 20개를 카테고리별로 정리했습니다. 자사 도구와 타사 도구를 구분 없이 솔직하게 소개합니다.

코드 포맷팅 & 변환 (4개)

1. JSON Formatter & Validator

API 응답을 복사해서 붙여넣으면 보기 좋게 정렬하고, 문법 오류가 있으면 위치를 알려줍니다. jsonformatter.org가 가장 오래되고 안정적입니다. JSON 깊이가 깊은 응답을 디버깅할 때 필수입니다.

2. regex101

정규표현식을 작성하고 실시간으로 테스트할 수 있는 도구입니다. regex101.com에서 패턴을 입력하면 매칭되는 부분을 하이라이트하고, 각 그룹의 캡처 결과를 보여줍니다. Python, JavaScript, Go 등 언어별 정규식 차이도 반영됩니다.

3. FreeToolbox 투명 텍스트 생성기

투명 텍스트 생성기는 유니코드 특수 공백 문자를 생성합니다. 닉네임 꾸미기나 특수문자 테스트에 쓰이지만, 개발자에게는 유니코드 제로 너비 문자 디버깅 용도로 유용합니다. API에서 받은 데이터에 보이지 않는 문자가 섞여 있을 때, 어떤 유니코드 코드포인트인지 확인할 수 있습니다.

4. FreeToolbox Base64 이미지 변환기

Base64 이미지 변환기는 Base64 문자열을 이미지로, 이미지를 Base64 문자열로 변환합니다. 이메일 템플릿이나 CSS에 이미지를 인라인으로 넣을 때 자주 씁니다. 브라우저 처리라 이미지가 외부로 나가지 않습니다.

CSS & 디자인 (4개)

5. FreeToolbox CSS 그라디언트 생성기

색상을 고르면 CSS 코드가 바로 생성된다

CSS 그라디언트 생성기는 색상 포인트를 마우스로 조절하면 background: linear-gradient(...) CSS 코드를 즉시 생성합니다. 각도, 색상 수, 투명도까지 세밀하게 조절 가능합니다. 디자이너에게 "이런 느낌"이라고 보여줄 때도 유용합니다.

6. FreeToolbox 파비콘 생성기

이미지 업로드 한 번이면 모든 크기의 파비콘이 생성된다

파비콘 생성기는 로고 이미지를 넣으면 16x16, 32x32, 180x180(Apple Touch) 등 다양한 크기의 파비콘을 한 번에 만들어 줍니다. HTML 메타태그 코드까지 함께 생성되어서 복사만 하면 됩니다.

7. Can I Use

caniuse.com은 CSS 속성이나 JavaScript API의 브라우저 호환성을 확인하는 도구입니다. container queries가 Safari에서 되는지, :has() 선택자를 써도 되는지 2초 만에 확인할 수 있습니다. 프론트엔드 개발자에게는 사실상 필수입니다.

8. Google Fonts

Google Fonts는 무료 웹폰트 라이브러리입니다. 한글 폰트도 40개 이상 있습니다. 폰트 이름을 검색하고, 미리보기를 확인하고, CDN 링크를 복사하는 게 전부입니다.

이미지 처리 (3개)

9. FreeToolbox 이미지 압축기

이미지 압축기는 JPEG, PNG, WebP 이미지를 브라우저에서 압축합니다. 빌드 파이프라인에서 자동 압축을 못 쓰는 환경(워드프레스, 레거시 CMS 등)에서 배포 전 이미지를 수동으로 줄일 때 씁니다. 자세한 비교는 이미지 압축 도구 5개 비교 글을 참고하세요.

10. Squoosh

Google의 오픈소스 이미지 압축기(squoosh.app)입니다. 코덱별(MozJPEG, AVIF, WebP 등) 세밀한 품질 조절이 가능해서, 최적의 포맷을 찾을 때 유용합니다. 한 번에 한 장만 처리할 수 있는 게 단점입니다.

11. Remove.bg

remove.bg는 AI로 이미지 배경을 제거합니다. 제품 사진, 프로필 이미지 등에서 배경을 투명하게 만들 때 포토샵 없이 5초 만에 처리됩니다. 무료 버전은 해상도 제한이 있습니다.

데이터 처리 (3개)

12. FreeToolbox CSV 뷰어

CSV 뷰어는 CSV 파일을 브라우저에서 바로 열어 표로 보여줍니다. 서버 로그, 데이터 덤프를 빠르게 확인할 때 엑셀보다 빠릅니다. 한글 인코딩 자동 감지가 되어서 EUC-KR 파일도 깨지지 않습니다. CSV 뷰어 비교 글도 참고해 보세요.

13. Postman

Postman은 API 테스트의 사실상 표준 도구입니다. REST API에 요청을 보내고, 응답을 확인하고, 테스트 시나리오를 저장할 수 있습니다. 웹 버전도 있어서 설치 없이 빠르게 쓸 수 있습니다.

14. JSON Crack

JSON Crack은 JSON 데이터를 시각적 트리(그래프)로 보여주는 도구입니다. 복잡하게 중첩된 JSON 구조를 한눈에 파악할 때 유용합니다. 오픈소스이며 무료입니다.

보안 & 인증 (3개)

15. FreeToolbox 비밀번호 생성기

개발 중 테스트 계정 비밀번호, .env 파일의 시크릿 키 등을 만들 때 비밀번호 생성기가 편합니다. 길이, 특수문자 포함 여부를 설정할 수 있고, 브라우저 처리라 생성된 비밀번호가 외부로 나가지 않습니다.

16. JWT.io

JWT.io는 JWT(JSON Web Token)를 디코딩하고 검증하는 도구입니다. 토큰을 붙여넣으면 Header, Payload, Signature를 분리해서 보여주고, 만료 시간을 확인할 수 있습니다. 인증 관련 디버깅에 필수입니다.

17. SSL Labs

Qualys의 SSL Server Test는 사이트의 SSL/TLS 설정을 검사합니다. 인증서 만료일, 지원하는 TLS 버전, 취약점 여부를 종합적으로 평가해서 A~F 등급을 매겨줍니다. 배포 후 SSL 설정이 제대로 됐는지 확인할 때 씁니다.

기타 유틸리티 (3개)

18. MDN Web Docs

MDN은 웹 기술(HTML, CSS, JavaScript)의 공식 레퍼런스입니다. W3Schools보다 정확하고, 브라우저 호환성 표가 함께 제공됩니다. 검색할 때 "mdn flex" 처럼 "mdn"을 앞에 붙이면 빠르게 찾을 수 있습니다.

19. FreeToolbox 색상 변환기

HEX, RGB, HSL 사이의 색상 코드를 변환해야 할 때 쓸 수 있습니다. 디자이너가 "Figma에서 이 색상인데"라고 HEX 값을 주면, CSS의 rgba()로 바꿔야 할 때가 있습니다.

20. Carbon

Carbon은 코드를 예쁜 이미지로 만들어주는 도구입니다. 기술 블로그나 슬라이드에 코드를 넣을 때, 스크린샷보다 훨씬 깔끔한 결과물을 만들 수 있습니다. 테마, 폰트, 배경색을 자유롭게 설정 가능합니다.

마무리

20개를 한꺼번에 소개했지만, 전부 외울 필요는 없습니다. 이 글을 북마크해 두고, 필요할 때 찾아 쓰면 됩니다. 실제로 제가 가장 자주 쓰는 조합은 이렇습니다.

• 매일: JSON Formatter, regex101, MDN, Can I Use
• 주 2~3회: Postman, CSS 그라디언트, JWT.io
• 가끔: 파비콘 생성기, SSL Labs, Carbon

개발 도구 외에 일상적인 웹 도구가 필요하다면 직장인/학생 필수 무료 웹 도구 15선도 참고해 보세요.