Base64에 대해 알아보자

Base64 인코딩/디코딩 도구를 만들었습니다. 처음에는 OpenAI ChatGPT API를 쓸 때 이미지를 Base64로 변환해서 보내야 해서 써봤던 정도였습니다. 하지만 웹 수익화를 찾아보던 중 이 도구를 사람들이 많이 쓴다는 걸 알게 되었습니다.

왜 만들었나?

유명한 사이트들을 직접 써보니 UI가 10년 전 느낌이었습니다. 한글 처리도 제대로 안 되는 경우가 많았습니다. "안녕하세요"를 인코딩했는데 깨져서 나오거나, 디코딩할 때도 원래 텍스트가 안 나왔습니다. 이런 기본적인 문제도 해결하지 못하고 있었습니다.

제가 사용성이나 디자인 면에서 신경 써서 만든다면 수익화를 기대할 수 있지 않을까 싶었습니다.

주요 기능

텍스트를 Base64로 인코딩하고, Base64를 다시 텍스트로 디코딩할 수 있습니다. 실시간으로 변환 결과를 보여주니까 바로 확인할 수 있습니다.

이미지 파일도 Base64로 변환할 수 있습니다. 드래그 앤 드롭으로 이미지를 올리면 자동으로 Base64 문자열로 변환해줍니다.

변환 결과를 복사할 수 있어서 바로 다른 곳에 붙여넣을 수 있습니다. 긴 Base64 문자열도 한 번에 복사할 수 있습니다.

개발 과정

JavaScript의 btoa()와 atob() 함수를 사용해서 기본적인 인코딩/디코딩을 구현했습니다. 하지만 한글 같은 유니코드 문자는 제대로 처리되지 않았습니다.

Cursor AI에게 물어보니까 TextEncoder와 TextDecoder를 사용해서 UTF-8 바이트로 변환한 후 Base64로 인코딩하는 방식으로 금방 해결해줬습니다. 상위에 노출되는 Base64 도구들을 확인해보니 대부분 영문만 제대로 처리하고 한글은 깨지는 경우가 많았습니다. 이 부분에서 제가 좀 더 유리할 수 있을 것 같았습니다.

이미지 파일 처리는 FileReader API를 사용했습니다. 사용자가 파일을 선택하면 FileReader로 읽어서 Base64로 변환합니다. 큰 이미지를 Base64로 변환하면 문자열이 너무 길어져서 성능 문제가 생길 수 있어서 파일 크기 제한을 두고 경고 메시지를 표시하도록 했습니다.

내가 개선한 부분

기존 사이트들의 문제점을 해결하려고 했습니다. 모던한 디자인을 적용하고, 모바일에서도 편하게 사용할 수 있도록 반응형으로 만들었습니다.

가장 중요한 건 한글 처리를 제대로 했다는 점입니다. "안녕하세요"를 인코딩하고 다시 디코딩해도 정확히 "안녕하세요"가 나옵니다. 이런 기본적인 기능도 제대로 안 되는 사이트들이 많았는데, 이 부분에서 차별화할 수 있을 것 같습니다.

실시간 변환 기능도 추가했습니다. 사용자가 입력하는 즉시 결과를 볼 수 있게 해서 더 편리하게 사용할 수 있도록 했습니다.

수익화 전략

아직 구체적인 수익화 전략은 없습니다. 에드센스 심사도 통과가 안 되어서 실제로 어떻게 될지는 모르겠습니다.

사람들이 되도록 많이 쓰게 해서 검색 상위에 노출되는 것을 노리려고 합니다. 사용자 경험을 우선으로 하고, 나중에 트래픽이 늘어나면 적절한 수익화 방법을 찾을 계획입니다.

Base64 도구를 직접 사용해보고 싶다면 Base64 인코더/디코더를 확인해보세요.