내가쓰고내가보는블러그

웹사이트, 앱, 로고를 디자인할 때 어떤 색상을 조합해야 할지 고민되시나요? 색상 선택은 디자인의 첫인상을 결정하는 가장 중요한 요소입니다.

아래 도구에서 색상 하나만 선택하면 명도 팔레트, 조화 배색(보색/유사색/3색 조화 등), 그라데이션을 자동으로 생성합니다. HEX, RGB, HSL 값도 한눈에 확인하고 바로 복사할 수 있습니다.

디자이너, 프론트엔드 개발자, 블로거 등 색상 작업이 필요한 모든 분에게 유용합니다.

색상 코드 형식 설명

HEX (16진수)

#FF5733 형태로, 웹 개발에서 가장 많이 사용됩니다. R(빨강), G(초록), B(파랑) 각각 2자리 16진수(00~FF)로 표현합니다.

RGB

rgb(255, 87, 51) 형태로, 빨강/초록/파랑 각각 0~255 사이의 값으로 표현합니다. CSS에서 투명도가 필요하면 rgba(255, 87, 51, 0.5)처럼 사용합니다.

HSL

hsl(14, 100%, 60%) 형태로, 색상(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 표현합니다. 색상 조절이 직관적이어서 디자이너들이 선호합니다.

조화 배색(Color Harmony) 이론

브랜드 색상 선택 팁

• 주 색상 1가지를 먼저 정하고, 조화 배색으로 보조 색상을 정하세요
• 배경은 밝은 색, 텍스트는 어두운 색으로 명도 대비를 확보하세요
• CTA 버튼에는 보색 계열을 사용하면 눈에 잘 띕니다
• 색상은 3가지 이내로 제한하면 깔끔한 인상을 줍니다

자주 묻는 질문 (FAQ)

Q. HEX와 RGB 중 어떤 걸 사용해야 하나요?

A. CSS에서는 둘 다 동일하게 동작합니다. 간결함을 원하면 HEX, 투명도가 필요하면 RGBA를 사용하세요.

Q. 색맹/색약을 고려한 색상 선택은 어떻게 하나요?

A. 빨강-초록 조합을 피하고, 색상 외에 아이콘이나 텍스트로도 정보를 구분할 수 있게 하세요.

Q. 다크모드에서 색상은 어떻게 조절하나요?

A. 명도(L값)를 올리고 채도를 약간 낮추면 다크모드에서 눈이 편안한 색상을 만들 수 있습니다.

이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!

이메일 첨부파일, 이미지 Data URI, API 인증 토큰... 개발을 하다 보면 Base64로 인코딩된 문자열을 자주 만나게 됩니다.

Base64는 바이너리 데이터를 텍스트로 안전하게 전송하기 위한 인코딩 방식입니다. HTTP 헤더, JSON, XML 등 텍스트만 허용되는 환경에서 이미지나 파일을 전달할 때 필수적으로 사용됩니다.

아래 도구에서 텍스트를 입력하면 실시간으로 Base64 변환이 이루어집니다. 한글도 완벽하게 지원합니다.

Base64 인코딩이란?

Base64는 8비트 바이너리 데이터를 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /)로 변환하는 인코딩 방식입니다. 3바이트(24비트)의 데이터를 4개의 Base64 문자로 변환하기 때문에, 원본보다 약 33% 크기가 증가합니다.

주의할 점은, Base64는 암호화가 아닙니다. 누구나 쉽게 디코딩할 수 있으므로 보안 목적으로는 사용하면 안 됩니다.

Base64를 사용하는 5가지 실전 사례

1. 이메일 첨부파일 (MIME) - 이메일은 텍스트 기반이라 파일을 Base64로 변환하여 전송합니다
2. Data URI (이미지 인라인) - CSS나 HTML에 이미지를 직접 삽입할 때 data:image/png;base64,... 형태로 사용합니다
3. HTTP Basic 인증 - 사용자명:비밀번호를 Base64로 인코딩하여 Authorization 헤더에 넣습니다
4. JWT 토큰 - JSON Web Token의 Header와 Payload 부분이 Base64URL로 인코딩되어 있습니다
5. API 바이너리 전송 - JSON으로 이미지나 파일을 전송할 때 Base64로 변환합니다

Base64 vs URL 인코딩 비교

자주 묻는 질문 (FAQ)

Q. Base64는 암호화인가요?

A. 아닙니다. Base64는 단순 인코딩이며, 누구나 디코딩할 수 있습니다. 보안이 필요하면 AES 같은 암호화를 사용하세요.

Q. Base64로 인코딩하면 크기가 얼마나 증가하나요?

A. 원본 대비 약 33% 증가합니다. 100KB 파일은 약 133KB가 됩니다.

Q. 한글도 Base64로 변환할 수 있나요?

A. 네, 가능합니다. 이 도구는 UTF-8 인코딩을 지원하여 한글, 일본어, 중국어 등 모든 유니코드 문자를 처리합니다.

이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!

이메일 유효성 검사, 전화번호 추출, 로그 파일 분석... 개발자라면 정규표현식(Regex)을 피할 수 없습니다. 하지만 복잡한 패턴을 작성할 때마다 코드를 실행해서 확인하는 건 번거롭습니다.

아래 도구에서 정규식을 입력하면 실시간으로 매칭 결과를 하이라이트로 보여줍니다. 자주 쓰는 패턴 프리셋도 제공하니, 정규식이 익숙하지 않은 분도 바로 활용할 수 있습니다.

이메일, 전화번호, URL, IP 주소 등 9가지 프리셋 패턴이 내장되어 있어 클릭 한 번으로 테스트할 수 있습니다.

정규표현식(Regex)이란?

정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나, 검증하거나, 치환하기 위한 표현 방식입니다. 거의 모든 프로그래밍 언어(Java, Python, JavaScript, PHP 등)에서 지원합니다.

자주 쓰는 정규식 패턴 모음 (치트시트)

정규식 플래그 설명

• g (global) - 전체 문자열에서 모든 매칭을 찾습니다 (첫 번째만 찾지 않음)
• i (case-insensitive) - 대소문자를 구분하지 않습니다
• m (multiline) - ^와 $가 각 줄의 시작/끝에 매칭됩니다
• s (dotAll) - .이 줄바꿈 문자(\n)도 매칭합니다

정규식 특수 문자 가이드

자주 묻는 질문 (FAQ)

Q. 정규식을 어디에서 가장 많이 사용하나요?

A. 입력값 검증(이메일, 전화번호), 로그 분석, 텍스트 치환, 웹 크롤링 데이터 추출 등에서 가장 많이 사용됩니다.

Q. 정규식이 너무 어려운데, 쉽게 배우는 방법이 있나요?

A. 위 도구의 프리셋 패턴부터 시작하세요. 기존 패턴을 수정하면서 결과가 어떻게 바뀌는지 확인하면 빠르게 익힐 수 있습니다.

Q. 한국어(한글)에서도 정규식이 동작하나요?

A. 네, [가-힣]으로 한글을 매칭할 수 있습니다. 유니코드 범위를 활용하면 일본어, 중국어도 가능합니다.

이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!

URL에 한글이나 특수문자가 포함되면 %EC%95%88 같은 알 수 없는 문자로 변환됩니다. 이것이 바로 URL 인코딩(퍼센트 인코딩)입니다.

개발 중 API 파라미터를 조합하거나, 인코딩된 URL을 디버깅할 때 이 도구가 필요합니다. 추가로 URL 구조 분석(파서)과 QR코드 생성 기능까지 한 곳에서 제공합니다.

아래 도구에서 URL이나 텍스트를 입력하면 즉시 인코딩/디코딩됩니다. QR코드도 원하는 크기로 생성하고 다운로드할 수 있습니다.

URL Encoder / Decoder & QR Code

URL 인코딩/디코딩 + URL 파서 + QR코드 생성까지 한번에

URL 인코딩 URL 파서 QR코드 생성

원본 텍스트 / URL

↕

변환 결과

인코딩 ↓ 디코딩 ↑ 결과 복사 초기화

분석할 URL

분석하기

Small Medium Large

QR코드 생성 이미지 다운로드

URL 인코딩이란?

URL 인코딩(퍼센트 인코딩)은 URL에서 사용할 수 없는 문자를 %XX 형태로 변환하는 방식입니다. URL에는 영문, 숫자, 일부 특수문자만 허용되므로, 한글이나 공백 같은 문자는 반드시 인코딩해야 합니다.

자주 인코딩되는 문자

URL 구조 설명

URL은 다음과 같은 구조로 이루어져 있습니다:

https://www.example.com:8080/path/to/page?key=value&name=test#section1

• 프로토콜 - http:// 또는 https://
• 호스트 - 도메인 이름 또는 IP 주소
• 포트 - 기본값은 HTTP 80, HTTPS 443
• 경로 - 서버 내 리소스 위치
• 쿼리 파라미터 - ?로 시작, &로 구분
• 프래그먼트 - #으로 시작, 페이지 내 위치

QR코드 활용 사례

1. 명함 - 연락처 정보를 QR코드로 공유
2. 매장 - 메뉴판, 주문 페이지 링크
3. 마케팅 - 전단지, 포스터에 웹사이트 링크
4. 결제 - 카카오페이, 네이버페이 QR 결제
5. 출석/인증 - 이벤트 참석 확인, 본인인증

자주 묻는 질문 (FAQ)

Q. URL에 한글을 그냥 넣으면 안 되나요?

A. 대부분의 최신 브라우저는 자동으로 인코딩하지만, API 호출이나 서버 간 통신에서는 직접 인코딩해야 정확하게 전달됩니다.

Q. encodeURI와 encodeURIComponent의 차이는?

A. encodeURI는 URL 전체를 인코딩하되 :, /, ? 등은 유지합니다. encodeURIComponent는 모든 특수문자를 인코딩하므로, 파라미터 값을 인코딩할 때 사용합니다.

Q. QR코드에 담을 수 있는 데이터 양은?

A. 최대 약 3,000바이트(한글 약 1,000자)까지 담을 수 있지만, 내용이 많을수록 QR코드가 복잡해져 인식률이 떨어집니다. URL은 짧게 줄여서 사용하는 것이 좋습니다.

이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!

API 응답 데이터를 확인하거나, 설정 파일을 수정할 때 JSON 데이터가 한 줄로 뭉쳐있어서 읽기 어려웠던 경험이 있으신가요?

개발 중 JSON을 다루는 일은 매우 빈번합니다. REST API 응답 확인, package.json 수정, 데이터베이스 쿼리 결과 분석 등 하루에도 수십 번 JSON을 읽고 편집합니다.

아래 도구에 JSON을 붙여넣기만 하면 자동으로 정리됩니다. 문법 오류가 있으면 정확한 위치까지 알려주니, JSON 검증 도구로도 활용할 수 있습니다.

JSON이란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 교환하는 데 사용되는 경량 데이터 형식입니다. 사람이 읽기 쉽고, 기계가 파싱하기 쉬운 텍스트 기반 포맷으로, 현재 웹 API의 사실상 표준으로 자리잡았습니다.

JSON 기본 문법 규칙

• 데이터는 키:값 쌍으로 구성됩니다
• 키는 반드시 큰따옴표("")로 감싸야 합니다 (작은따옴표 불가)
• 객체는 중괄호 { }, 배열은 대괄호 [ ]로 표현합니다
• 값으로 올 수 있는 타입: 문자열, 숫자, 불리언(true/false), null, 객체, 배열
• 마지막 항목 뒤에 쉼표를 넣으면 안 됩니다 (trailing comma 금지)

흔한 JSON 오류와 해결법

JSON vs XML 비교

자주 묻는 질문 (FAQ)

Q. JSON에서 주석을 사용할 수 있나요?

A. 표준 JSON에서는 주석을 지원하지 않습니다. 주석이 필요하면 JSONC(JSON with Comments) 또는 JSON5 형식을 사용하세요.

Q. JSON과 JavaScript 객체의 차이점은?

A. JSON은 키를 반드시 큰따옴표로 감싸야 하고, 함수나 undefined를 값으로 사용할 수 없습니다. JavaScript 객체는 이런 제한이 없습니다.

Q. JSON 파일의 최대 크기 제한이 있나요?

A. JSON 표준 자체에는 크기 제한이 없지만, 브라우저나 서버의 메모리 제한에 따라 처리할 수 있는 크기가 달라집니다.

이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!

연봉 협상을 앞두고 있거나, 이직을 준비하고 계신가요? 내 연봉에서 실제로 통장에 꽂히는 금액이 얼마인지 정확히 알고 계신가요?

매월 급여에서 국민연금, 건강보험, 장기요양보험, 고용보험(4대보험)과 소득세, 지방소득세가 공제됩니다. 연봉이 같아도 부양가족 수, 비과세 항목에 따라 실수령액이 달라집니다.

아래 계산기에 연봉만 입력하면, 2026년 기준 4대보험료와 소득세를 자동으로 계산하여 월 실수령액을 바로 확인할 수 있습니다.

연봉 실수령액이란?

연봉 실수령액이란 세전 연봉에서 각종 세금과 4대보험료를 공제한 후 실제로 받는 금액을 말합니다. 흔히 "세후 연봉"이라고도 합니다.

공제 항목 상세 설명

1. 국민연금 (4.5%)

근로자와 사업주가 각각 4.5%씩 부담합니다. 2026년 기준 상한액은 월 약 265,500원입니다. 만 60세 이후 노령연금으로 돌려받을 수 있습니다.

2. 건강보험 (3.545%)

의료비 보장을 위한 보험료입니다. 근로자와 사업주가 각각 3.545%씩 부담합니다.

3. 장기요양보험 (건강보험의 12.95%)

노인 장기요양 서비스를 위한 보험료로, 건강보험료의 12.95%가 추가 부과됩니다.

4. 고용보험 (0.9%)

실업 시 실업급여를 받기 위한 보험입니다. 근로자는 0.9%를 부담합니다.

5. 소득세 + 지방소득세

근로소득 간이세액표에 따라 산출됩니다. 부양가족이 많을수록 공제액이 커져 소득세가 줄어듭니다.

비과세 항목이란?

식대(월 20만원 한도), 자가운전보조금, 출산/보육수당 등은 세금이 부과되지 않는 비과세 항목입니다. 비과세 금액이 클수록 실수령액이 늘어납니다.

연봉별 실수령액 참고표

* 비과세 월 20만원, 부양가족 1명(본인) 기준 예상치이며, 정확한 금액은 위 계산기로 확인하세요.

자주 묻는 질문 (FAQ)

Q. 연봉 5000만원이면 실수령액이 얼마인가요?

A. 비과세 월 20만원, 부양가족 1명(본인) 기준으로 월 약 352만원, 연 약 4,224만원입니다. 위 계산기에서 정확한 금액을 확인하세요.

Q. 비과세액은 보통 얼마로 설정하나요?

A. 대부분의 직장인은 식대 월 20만원이 비과세로 적용됩니다. 회사에 따라 자가운전보조금 등이 추가될 수 있습니다.

Q. 연봉이 올라도 실수령액은 크게 안 느는 이유는?

A. 연봉이 오를수록 소득세 누진세율이 높아지고, 4대보험료도 함께 증가하기 때문입니다. 연봉 구간이 높을수록 공제 비율이 커집니다.

이 계산기가 유용했다면 북마크 해두시고, 주변에도 공유해주세요!