SVG파일로 카카오로그인 버튼만들기

SVG파일은 어디서 주로 쓰는거고 차이점이 뭐야?

📁 SVG란?

SVG(Scalable Vector Graphics)는 벡터 기반의 이미지 포맷.
이미지를 수학적인 좌표, 선, 도형으로 표현해서, 확대하거나 축소해도 깨지지 않고 선명하다.

 {/* O-Auth 로그인 버튼 */}
          <div className="flex flex-col items-center space-y-4 mt-4">
            <button
              className="w-full flex items-center justify-center p-2 border rounded bg-yellow-400 hover:bg-yellow-500"
              onClick={() => alert("카카오 로그인 버튼 클릭됨")}
            >
              <img
                src="/images/kakao.svg"
                alt="카카오 로그인"
                className="w-6 h-6 mr-2"
              />
              <span className="text-black font-medium">카카오로 로그인</span>
            </button>

카카오, 네이버, 구글 로그인 기능은 추후에 구현하고, 그전에 UI만 수정하기로 하였다.

그런데 문제는 kakao developer나 naver 등에서 제공하는 공식 아이콘에 는 내가 필요한 동그란 모양의 통일되는 버튼이 없었다. 그래서 만들어서 써야하나 고민하던중, 동료에게 물어봐서 svg파일을 받았다. 이 svg파일을 public-images 폴더에 추가하고 경로를 맞게 재설정 해주었다.

img 태그 className 에 bg-white를 추가하여 이미지 배경이 회색이 아니라 흰색으로 나오도록 변경하였다.

<div className="flex flex-col items-center space-y-4 mt-4">
            {/* 카카오 로그인 버튼 */}
            <span className="text-gray-500 font-bold mb-4 mt-4">
              SNS 로그인
            </span>
            {/* 소셜 로그인 버튼들 */}
            <span>
              <button>
                <img
                  src="/images/icon-kakao-talk.svg" // 카카오 로고 이미지 경로
                  alt="카카오 로그인"
                  className="w-10 h-10 mr-2 bg-white"
                />
              </button>

✅ SVG의 주요 특징

🔍 확대해도 안 깨짐 벡터 이미지라서 어떤 화면 크기에서도 선명.
✏️ 코드로 조작 가능 HTML, CSS, JavaScript로 직접 스타일이나 애니메이션을 줄 수 있음.
📦 파일 용량이 작음 복잡한 이미지가 아니라면 일반 이미지보다 용량이 작을 수 있음.
🧑‍💻 검색 가능 텍스트 형태로 되어 있어서 SEO에도 좋음.

🖼️ 다른 이미지 포맷과 비교

SVG : 벡터 아이콘, 로고, 단순 도형 확대해도 선명, 스타일 적용 쉬움 복잡한 이미지엔 부적합
PNG : 비트맵 투명한 이미지, 상세 그래픽 배경 제거 가능, 선명한 정지 이미지 크기 커질수록 깨짐
JPG : 비트맵 사진, 배경 이미지 용량 대비 화질 좋음 투명도 없음, 압축 시 화질 손상
GIF : 비트맵 간단한 애니메이션 짧은 루프 애니메이션에 좋음 색상 제한, 품질 낮음