해외 과일 수입과 식품 유통을 주력으로 하는 기업의 홈페이지를 재구축한 프로젝트입니다. 기존에는 정적 HTML로 제작된 단일 랜딩 페이지였으나, 다국어 지원과 콘텐츠 관리 기능이 필요해지면서 PHP CodeIgniter 기반 CMS 환경으로 새로 개발했습니다. 현재도 담당자가 직접 뉴스를 등록하고 메뉴 구조를 수정하며 운영 중입니다.
URL 구조와 한국어, 영어 다국어 구성
언어 구조를 설계할 때 가장 먼저 따져본 것은, 검색엔진이 한국어 페이지와 영어 페이지를 별개의 문서로 인식할 수 있는가였습니다. 언어 전환 버튼 하나로 콘텐츠만 바꾸는 방식은 두 언어가 같은 URL에 혼재되어 각 언어 페이지의 역할이 검색 결과에서 흐려집니다. 그래서 한국어는 /ko, 영어는 /en 경로를 기준으로 모든 페이지를 분기하는 구조를 선택했습니다.
메인 페이지, 회사 소개, CEO 메시지, 연혁, 뉴스 각각에 언어별 URL이 별도로 존재하며, 상단의 KOR / ENG 전환 버튼은 현재 보고 있는 페이지의 해당 언어 버전으로 직접 이동합니다. 같은 내용이라도 언어에 따라 다른 주소를 갖기 때문에, 검색 결과에서 언어별로 독립적으로 노출될 수 있는 기반이 갖춰집니다.
단일 페이지 구성과 섹션 내비게이션
원페이지 흐름과 내비게이션 처리
메인 페이지는 회사 소개, G.S.A.S, 제품, Food Tech, Farming, Commerce, Contact 섹션을 세로로 이어 배치한 원페이지 구조입니다. 상단 내비게이션의 각 항목은 해당 섹션으로 스크롤 이동하는 앵커 링크(anchor link)로 처리했고, COMPANY 항목만 드롭다운으로 구성해 Introduction, CEO Message, History 세 개의 독립 페이지로 연결됩니다. 사업 영역 전체를 한 화면에서 훑고, 회사 정보는 별도 페이지에서 더 깊이 볼 수 있는 흐름입니다.
제품과 브랜드 정보의 구성 방식
제품 섹션은 국산 특수과일, 수입과일, 가공식품, 스테비아 상품 네 가지 탭으로 구분했습니다. 탭을 전환하면 해당 카테고리의 제품 목록만 표시되는 방식으로, 한 섹션 안에 여러 품목군을 정리했습니다. 글로벌 브랜드 네트워크 섹션에서는 파트너사 로고를 클릭하면 취급 상품 목록이 레이어로 펼쳐지고, Food Tech 섹션의 PEF 기술 및 스마트팜 항목은 영상 팝업과 연동됩니다. 사업 소개, 브랜드 네트워크, 기술 설명이 각기 다른 방식으로 펼쳐지면서도 한 페이지 안에서 이어지도록 구성했습니다.
관리자 페이지 운영 구조
뉴스 게시글 관리
기존 정적 페이지에는 없던 뉴스 게시판을 새로 추가했습니다. 게시글은 목록과 상세 페이지로 나뉘며, 각 게시물에 고유 슬러그(slug) 기반 URL을 부여했습니다. 한국어와 영어 게시판이 별도로 운영되고, 언어 전환 버튼으로 각 언어의 뉴스 목록으로 이동합니다. 게시물 등록, 수정, 삭제는 관리자 페이지 내 게시글 메뉴에서 처리하며, 대시보드에서 전체 게시글 수와 최근 문의 현황을 한눈에 확인할 수 있습니다.
메뉴 구조 직접 편집
상단 내비게이션 메뉴는 관리자 페이지의 메뉴 항목에서 직접 추가하거나 순서를 변경할 수 있습니다. 현재 한국어·영어 통합 기준으로 6개 메뉴가 등록되어 있으며, 드롭다운 항목도 관리자 화면에서 구성합니다. 메뉴 구조가 바뀌더라도 코드 파일을 열지 않고 처리할 수 있어, 사이트 구조 변경이 생겨도 별도 의뢰 없이 대응이 가능합니다.
페이지 콘텐츠 편집
회사 소개, CEO 메시지, 연혁 등 독립 페이지의 본문은 관리자 페이지 내 페이지 항목에서 수정합니다. 현재 3개 페이지가 등록되어 있으며, 각 페이지는 한국어·영어 콘텐츠를 별도로 관리합니다. 텍스트와 이미지를 입력창에서 직접 편집하고 저장하는 방식이라, 내용 갱신이 생길 때마다 파일 수정을 요청할 필요가 없습니다.
SEO 설정과 언어별 메타 관리
검색 노출 구조는 제작 단계에서 함께 설계했습니다. 각 페이지의 역할이 검색 결과에서 흐려지지 않도록 타이틀 체계와 URL 분기를 먼저 정리한 뒤, 세부 메타 요소를 언어별로 구분해 입력하는 구조를 갖췄습니다. 관리자 페이지의 SEO 설정 화면에서 한국어와 영어 각각의 사이트 타이틀, 메타 설명, 메타 키워드를 별도로 입력하고 저장할 수 있습니다. 소셜 미디어 공유 시 표시되는 OG 제목, OG 설명, OG 이미지도 언어별로 분리해 관리하며, 트위터 카드 유형과 계정 정보도 같은 화면에서 설정합니다. 회사 소개, 사업 영역, 제품 정보, 뉴스가 언어별로 일관된 메타 구조 안에서 연결되도록 정리했습니다.
반응형 대응과 개발 환경
레이아웃은 반응형(responsive layout)으로 구성해 PC, 태블릿, 모바일 환경 모두에서 화면 너비에 맞게 재배치됩니다. CSS 미디어쿼리(media query)로 처리했기 때문에 별도 모바일 페이지 없이 단일 코드 구조로 운영합니다. 서버 사이드는 PHP CodeIgniter 프레임워크로 구성했으며, 기존에는 콘텐츠를 수정할 때마다 HTML 파일을 직접 편집해야 했으나 이번 구조에서는 다국어 콘텐츠, 페이지 본문, 메뉴 구성, 게시글을 모두 관리자 화면에서 처리합니다.
