Vue 3 + Vite 기반의 무료 다국어 이미지 변환 도구 'Blurtofit' 개발 및 최적화 경험 공유

핵심 기술: Vue 3와 Vite를 기반으로 개발된 'Blurtofit'은 사용자의 사진을 소셜 미디어에 적합한 정사각형 형태로 자동 변환하고 배경을 흐리게 처리하는 웹 애플리케이션입니다. Vue I18n을 활용하여 포르투갈어, 영어, 스페인어를 지원하며, Tailwind CSS로 반응형 UI를 구축했습니다.

기술적 세부사항:
* 프론트엔드 프레임워크: Vue 3
* 빌드 도구: Vite (부분적으로 SSG 활용)
* UI 스타일링: Tailwind CSS
* 다국어 지원: Vue I18n ( /pt, /en, /es 경로 및 도메인별 번역 관리)
* 핵심 기능 구현: Web API (Canvas)를 사용하여 이미지에 흐림 효과 적용
* 사이트 최적화: Core Web Vitals (LCP, FCP, CLS) 개선, 키보드 네비게이션 및 JS 의존성 없는 접근성, 동적 메타태그 (useHead), sitemap.xml 및 robots.txt 설정, <noscript> 태그 활용
* 배포 및 호스팅: Cloudflare, Heroku

개발 임팩트: 사용자가 시간과 노력을 절약하면서도 고품질의 이미지를 제작할 수 있도록 돕습니다. 특히, 다국어 지원은 글로벌 사용자의 접근성을 높여줍니다. 또한, 웹사이트 성능 최적화와 접근성 개선은 사용자 경험을 향상시키는 데 기여합니다.

커뮤니티 반응: 작성자는 소셜 미디어에서의 개인적인 경험을 바탕으로 이 도구를 개발했으며, 많은 사용자들이 동일한 문제를 겪고 있음을 확인하고 긍정적인 피드백을 받았습니다.

톤앤매너: 개발자가 자신의 프로젝트 경험을 솔직하고 구체적으로 공유하며, 기술적인 내용과 함께 사용자 경험 개선에 대한 고민을 잘 드러냅니다.