플라스틱 파렛트를 제조하는 B2B 업체의 홈페이지를 처음부터 다시 구축했습니다. 30개국 이상에 제품을 수출하는 업체였지만, 기존 사이트는 구형 테이블(Table) 레이아웃에 국문, 영문 두 언어만 지원하는 구조였습니다. 사이트가 실제 영업 범위를 따라가지 못하는 상황이었습니다.
재구축 후에는 한국어, 영어, 일본어, 중국어 4개 언어를 지원하는 반응형 사이트로 전환했습니다. 제품 라인업이 추가되거나 수출 현황이 갱신될 때 관리자가 코드 없이 직접 수정할 수 있도록 편집 구조를 함께 고려했습니다.
메뉴 구조와 정보 설계
기존 메뉴는 ABOUT US, PRODUCTS, CONTACT US, ORDER SHEET, BULLETIN 5개 항목이었습니다. 단순한 분류지만, 제품군이 다양하고 해외 바이어가 주요 고객인 업체에서는 이 구조로 담을 수 있는 정보에 한계가 있었습니다. 재구축에서는 회사소개, 제품소개, 기업역량, 견적문의, 고객지원 체계로 메뉴를 재편했습니다.
기업역량 메뉴 신설
기존 사이트에서 흩어져 있거나 별도 페이지가 없었던 정보를 한 메뉴로 묶었습니다. 40년 이상의 제조 이력, 30개국 이상 수출 실적, ISO 9001, ISO 14001, FDA 인증을 사업현황, 기술력, 수출현황, 기술자료 4개 페이지로 정리했습니다. 해외 바이어를 대상으로 한 신뢰 지표들이 한 흐름에서 읽힐 수 있는 구조입니다.
회사소개 페이지 세분화
기존의 단일 회사 소개 페이지를 회사개요, 기업정보, CEO 메시지, 회사연혁, 오시는 길 5개 페이지로 나눴습니다. 각 페이지에 독립된 URL과 메타 태그를 부여하면서 검색 엔진이 접근 가능한 페이지 수를 늘렸습니다.
제품 카테고리 재설계
기존 사이트의 제품 분류는 파레트, 상자류, 기타 3개였습니다. 파레트 하위에는 규격별 페이지 약 30개가 단일 목록으로 나열되어 있어, 원하는 제품을 찾으려면 목록을 처음부터 훑어야 했습니다.
재구축에서는 파렛트를 일반지게차용 양면, 자동화창고용, 핸드카 전용, 경량, 특수, 기타로 나누고, 상자류는 유음료, 식품, 주류, 농산물, 부품, 공구, 절첩식, 점보, 유통 상자로 세분화했습니다. 카테고리를 용도와 산업별로 나누면 각 분류 페이지가 독립적인 랜딩 페이지로 기능하게 됩니다. "자동화창고용 파렛트"나 "농산물 상자"처럼 구체적인 검색어로 유입되는 경로가 생기는 건 제품을 어떻게 분류하느냐에 달려 있습니다.
다국어 SEO 구조
수출 비중이 높은 업체에서는 해외 검색 유입 경로를 어떻게 설계하느냐가 실질적인 영업 채널과 직결됩니다. 이 사이트에서는 언어별 URL 경로, hreflang 태그, 각 언어 버전별 메타 요소를 함께 설계했습니다.
언어별 URL 경로
한국어(/ko), 영어(/en), 일본어(/ja), 중국어(/zh) 네 가지를 URL 경로로 구분했습니다. 별도 서브도메인이나 폴더로 분리하는 대신, 단일 도메인 아래 언어 코드를 경로로 사용하는 구조를 선택했습니다. 도메인 권위가 언어별로 분산되지 않도록 하기 위해서입니다.
hreflang 태그와 기본 언어 지정
모든 페이지에 hreflang 태그를 적용했습니다. 영어 검색 환경에서는 /en 경로 페이지가, 일본어 검색 환경에서는 /ja 경로 페이지가 검색 결과에 노출되도록 설정하고, 언어가 불명확한 요청을 처리하는 x-default 값도 함께 지정했습니다.
언어별 메타 요소와 구조화 데이터
각 언어 버전 페이지마다 해당 언어로 작성된 title 태그, 메타 설명, OG 태그를 독립적으로 구성했습니다. 한국어 텍스트를 그대로 번역하지 않고, 각 언어권 검색 환경에서 자연스럽게 읽히는 문구를 별도로 작성했습니다. 회사 정보에는 Organization 스키마(구조화 데이터)를 적용해 검색 결과에서 업체 정보가 명확하게 표시되도록 했습니다.
회사 개요, 제품 분류, 기업 역량, 해외 인증 정보가 언어에 관계없이 동일한 구조로 연결됩니다. 어떤 언어로 접근하더라도 탐색 흐름이 끊기지 않습니다.
화면 구성과 기술 전환
레이아웃과 이미지 포맷 교체
레이아웃 전체를 테이블 기반에서 반응형 구조로 다시 짰습니다. 메뉴와 본문에 광범위하게 사용되던 GIF 이미지는 SVG와 webp 포맷으로 교체했습니다.
메인 페이지 구성
상단에는 히어로 이미지 슬라이더를 배치하고, 업력, 수출 국가 수, 연간 생산능력, 제품 라인업 수를 수치로 정리한 섹션을 구성했습니다. 해외 바이어가 처음 진입했을 때 연락처와 언어 선택을 바로 확인할 수 있도록 헤더에는 이메일, 전화번호, 소재지, 언어 전환 스위처를 고정 배치했습니다. 푸터에는 회사, 제품, 고객지원 카테고리별 링크를 정리해, 메인 내비게이션 외에도 사이트 구조를 파악할 수 있는 경로를 추가했습니다.
관리자 페이지 구성
다국어 사이트에서 운영 부담이 가장 커지는 지점은 콘텐츠 수정입니다. 언어마다 별도 파일이나 코드를 건드려야 한다면, 담당자가 개발자 없이 직접 수정하기 어렵습니다. 이 사이트의 관리자 페이지는 그 구조를 코드 없이 처리할 수 있도록 설계했습니다.
대시보드 현황 요약
관리자 로그인 후 첫 화면에서 게시글, 페이지, 메뉴, 팝업, 카탈로그, 카테고리 수와 파일 저장소 사용량을 한눈에 확인할 수 있습니다. 콘텐츠 분류별 저장소 점유 비율도 도넛 차트로 표시되어, 이미지 용량이 과도하게 늘어나는 시점을 파악하는 데 쓸 수 있습니다. 별도 통계 페이지를 열지 않아도 운영 현황을 빠르게 파악할 수 있는 구조입니다.
언어별 SEO 메타 요소 직접 입력
페이지 수정 화면은 기본 정보 영역과 페이지 정보 영역으로 나뉩니다. 슬러그, 상위 페이지, 공개 상태, 정렬 순서는 왼쪽에서, 각 언어별 SEO 요소는 오른쪽 패널에서 처리합니다.
페이지 정보 패널은 한국어, 영어, 일본어, 중국어 4개 언어를 순서대로 구성하며, 언어마다 H1 제목, 타이틀 태그, 메타 설명, 메타 키워드를 개별 입력란으로 제공합니다. 타이틀과 메타 설명도 같은 구조로 언어별로 따로 작성합니다. 번역 텍스트를 코드에 직접 삽입하거나 별도 파일을 수정할 필요 없이, 담당자가 입력란에 내용을 채우고 저장하면 해당 언어 페이지에 반영됩니다.
콘텐츠 편집 방식
콘텐츠 입력 방식은 에디터 모드와 코드 모드 중 선택할 수 있습니다. 비개발자가 주로 쓰는 에디터 모드에서는 텍스트, 이미지, 표 등을 문서 편집기처럼 다룰 수 있고, 직접 마크업을 제어해야 할 때는 코드 모드로 전환합니다. OG 이미지는 페이지 정보 패널에서 파일을 선택해 업로드하는 방식으로, 권장 규격(1200x630px)이 안내 텍스트로 표시됩니다.
