SEO 개선 및 버그 수정 업데이트

안녕하세요! hafuture 팀입니다. 오늘은 사용자 여러분께 더 나은 웹 경험을 제공하기 위해 진행한 검색 엔진 최적화(SEO) 개선과 버그 수정 사항을 공유해 드리려고 합니다.

저희는 단순히 기능을 제공하는 것을 넘어, 웹 표준을 준수하고 모든 사용자가 편리하게 이용할 수 있는 플랫폼을 만드는 것을 목표로 하고 있습니다. 이번 업데이트는 그 노력의 일환으로, 검색 엔진이 hafuture의 콘텐츠를 더 잘 이해하도록 돕고 웹 접근성을 높이는 데 중점을 두었습니다.

1. 링크 텍스트 접근성 개선 ("Learn More" 문제 해결)

Lighthouse 진단에서 "링크에 설명 텍스트가 없음"이라는 경고가 발생했습니다. 이는 웹페이지 내의 특정 링크가 "더 보기(Learn More)"와 같이 모호한 텍스트로만 구성되어 있어, 검색 엔진이나 스크린 리더 사용자가 해당 링크의 목적지를 명확히 파악하기 어려웠기 때문입니다.

특히 메인 페이지의 소개 섹션에 있는 "Learn More" 버튼이 문제였습니다. 시각적으로는 주변 문맥을 통해 어떤 내용인지 알 수 있지만, 텍스트만 읽는 보조 기술에게는 불친절할 수 있습니다.

해결 방법

디자인을 해치지 않으면서 접근성을 높이기 위해 aria-label 속성을 활용했습니다.

<Link
  href="/about"
  /* ... 기존 스타일 클래스 ... */
  aria-label={t('learnMoreAriaLabel')} // "회사에 대해 더 알아보기"
>
  {t('learnMore')}
</Link>

이제 스크린 리더와 검색 엔진은 이 링크를 단순한 "더 알아보기"가 아닌, "회사에 대해 더 알아보기"로 인식하게 됩니다. 이를 통해 시각 장애인 사용자분들도 링크의 목적을 명확히 이해할 수 있게 되었습니다.

2. Canonical URL 도메인 일치 (SEO 최적화)

다국어 웹사이트를 운영할 때 가장 중요한 것 중 하나가 바로 rel="canonical"(표준 URL) 설정입니다. hafuture는 한국어, 영어, 일본어를 지원하므로 각 언어 페이지 간의 관계를 명확히 해야 합니다.

기존에는 hreflang 태그가 www.hafuture.com 도메인을 가리키고 있었으나, canonical 태그는 hafuture.com (www 제외)을 가리키는 불일치가 발생했습니다. 이로 인해 검색 엔진이 "다른 hreflang 위치를 가리킴"이라는 오류를 보고했습니다.

해결 방법

SEO 설정 파일(seo.ts)의 BASE_URL을 수정하여 모든 표준 URL이 www.hafuture.com을 사용하도록 통일했습니다.

// 변경 전
export const BASE_URL = 'https://hafuture.com';

// 변경 후
export const BASE_URL = 'https://www.hafuture.com';

이 변경으로 검색 엔진은 hafuture의 페이지 구조를 더 정확하게 파악하고, 중복 콘텐츠 문제 없이 각 언어별 페이지를 올바르게 색인할 수 있게 되었습니다.

3. 이미지 압축 도구 버그 수정

업데이트 과정에서 이미지 압축 도구(Image Compressor) 페이지의 다국어 번역 파일 내에 중복된 키(description)가 존재하는 것을 발견했습니다. 이는 잠재적인 런타임 오류나 번역 누락을 유발할 수 있는 문제입니다.

해결 방법

중복된 description 객체의 이름을 details로 변경하여 구조를 명확히 하고 충돌을 해결했습니다.

// 변경 전 (중복 키 발생)
"description": { ... }

// 변경 후
"details": { ... }

이와 함께 관련 코드를 수정하여 페이지 내의 설명 섹션이 정상적으로 번역되어 표시되도록 조치했습니다.

마치며

작은 변화들이 모여 더 나은 사용자 경험을 만듭니다. hafuture는 앞으로도 여러분의 피드백에 귀 기울이며, 더 빠르고 편리하며 접근기 좋은 웹 유틸리티 플랫폼이 되도록 노력하겠습니다.

새로운 기능 제안이나 버그 제보는 언제든 환영합니다. 감사합니다!