Work·Web & Brand·LED & Urban Infrastructure

Blue Science ·/ Four-Language LED Catalog

Four-language catalog platform for a Korean LED manufacturer. 100+ products filterable, 4 locales live.

What this maps to

Closest sprint

Brand + Site Express

Duration

약 10–12주

Team

2 + network

Blue Science · Four-Language LED Catalog

Blue Science: LED 제조사를 위한 4개 언어 카탈로그

Client: Blue Science Services: 웹 디자인 및 개발, 4개 언어 콘텐츠 구조, 카탈로그 UX Duration: 약 10–12주 Tech: WordPress, Elementor, WPML

문제 정의

Blue Science는 터널, 가로등, 산업용 LED 조명을 만듭니다. 구매자는 한국, 중국, 일본, 그리고 영어권 수출 시장의 도시 인프라 시공사, 터널 엔지니어, 플랜트 매니저입니다. 일반적인 제품 문의는 사양서에서 시작합니다. 구매자에게는 와트 범위, 빔 각도, 터널 등급 등기구 요건이 있고, 그 조건을 충족하는 Blue Science SKU를 보고 싶어 합니다.

이전 사이트는 평면적인 제품 리스트였습니다. 모든 등기구가 독립 페이지로 살았고, 터널 조명을 찾는 유일한 방법은 자기가 터널 조명 카테고리를 보고 있다는 사실을 이미 아는 것이었습니다. 평판으로 Blue Science를 알고 들어온 구매자는 잘 탐색했고, 검색 엔진으로 들어온 구매자는 그러지 못했습니다.

4개 언어 운영(EN, KO, zh-Hans, JA)이 두 번째 까다로운 요건이었습니다. 그중 셋은 서로 다른 문자 체계를 쓰고, 기본 WordPress 테마에서 서로 다른 것을 깨뜨립니다. 사이트는 언어마다 별도 빌드를 만들지 않고 네 언어 모두에서 정확히 렌더링되어야 했습니다.

만든 것

카테고리 필터 기반 발견, 프로젝트 포트폴리오 증거, 검색 가능한 지식 베이스를 갖춘 4개 언어 LED 카탈로그입니다.

카테고리 내비게이션: LED 터널등 등기구, LED 가로등 등기구, 산업용 조명 응용
중첩 메뉴 구조의 제품 필터(카테고리 > 타입 > 와트 > 응용)
제품 사양 데이터와 설명 콘텐츠를 함께 인덱싱하는 사이트 전반 검색
설치된 프로젝트를 사진과 함께 보여 주는 프로젝트 포트폴리오 페이지
열전도성 복합소재와 온도 보상 회로에 대한 기사가 있는 기술 지식 베이스(Blue Science가 하드웨어 측에서 실제로 하는 R&D)
WPML을 통한 4개 언어 운영: 영어, 한국어, 중국어 간체, 일본어
방문자 출발지에 따라 알맞은 지역 영업 담당자로 라우팅되는 제품 문의 폼
제품 트리와 교차 연결된 적용 분야 랜딩 페이지

작업 방식

1주차–2주차. 제품 데이터 추출. Blue Science에는 100개가 넘는 SKU가 있었고, 사양 데이터가 PDF, 내부 스프레드시트, 레거시 CMS 페이지 사이에 흩어져 있었습니다. 새 사이트를 건드리기 전에 모든 것을 단일 마스터 시트로 통합했습니다.

3주차–4주차. 카테고리 트리 설계. 필터는 서로 다른 세 가지 구매자 멘탈 모델에서 모두 작동해야 합니다. 등기구 타입으로 쇼핑하는 사람, 적용 분야로 쇼핑하는 사람, 기술 사양으로 쇼핑하는 사람. 세 UI를 따로 두지 않고 세 가지를 모두 받아 내도록 중첩 필터를 설계했습니다.

5주차–6주차. 커스텀 제품 포스트 타입을 넣은 Elementor 빌드. 제품 페이지는 사양 데이터를 본문 카피가 아니라 구조화된 필드로 들고 있어서, 필터가 깔끔하게 쿼리할 수 있습니다.

7주차–8주차. 프로젝트 포트폴리오와 지식 베이스 빌드. 사진과 기술 기사 콘텐츠를 수집하고 레이아웃했습니다.

9주차–10주차. 4개 언어를 위한 WPML 셋업. 한국어 먼저(주), 그다음 영어, 그다음 중국어 간체, 그다음 일본어. 각 언어 패스마다 원어민 검토가 필요했습니다. 문자 체계 레이아웃 테스트에서, 긴 중국어 제품명이 필터 UI를 깨뜨리는 자리 세 곳을 발견해 런칭 전에 수정했습니다.

11주차–12주차. 검색 인덱싱, 로케일 전반 최종 QA, 런칭.

달라진 점

영어가 아닌 언어로 사이트에 들어오는 구매자가 이제 두세 번의 클릭으로 제품 페이지에 도달합니다. 이전에는 이탈했습니다. 당연해 보이지만, 어려운 쪽은 이쪽이었습니다. 이전 사이트에는 일본어 랜딩 페이지가 존재했지만, 한국어로만 저장된 제품명에 대한 일본어 제품 검색이 제대로 작동하지 않았습니다.

배운 것

4개 언어는 문자 체계 버그가 살고 있는 자리입니다. 한국어와 영어는 대부분의 레이아웃에서 평화롭게 공존합니다. 거기에 일본어와 중국어 간체를 더하면 갑자기 세 가지 문자 체계가 하나의 UI 그리드를 공유하게 됩니다. 한 언어의 긴 문자열이 다른 언어의 필터 칩 폭을 깨뜨립니다. 모든 다국어 UI 요소를 각 언어의 최악 길이 버전으로 테스트해 보십시오.

제품 필터에는 그 아래에 구조화된 데이터가 필요합니다. 초기 Blue Science 초안은 본문 카피를 파싱해서 필터링하려 했습니다. 작동하지 않았습니다. 모든 제품을 타입드 필드(와트 범위, IP 등급, 빔 각도, 적용 분야, 등기구 등급 인증)로 재구성한 다음에야 필터가 쓸 만해졌습니다. 제품 페이지는 콘텐츠가 아니라 데이터로 다루십시오.

프로젝트 포트폴리오 사진이 역량 카피를 이깁니다. Blue Science에는 수백 건의 설치 프로젝트가 있습니다. 실제 터널 안에서 작동하는 터널 조명을 보는 것이 사양서보다 더 많은 영업 일을 했습니다. 이 업종 구매자는 등기구 등급을 읽기 전에 사진을 신뢰합니다.