순환 소재로 확장하는 ESG 패키징 경험

브랜드 개요

BGF에코머티리얼즈는 BGF리테일이 추진하는 순환형 자원 생태계를 실물 소재로 연결하는 전문 조직으로, 페트 병 회수부터 고부가가치 리사이클링까지 전 과정을 통합 관리한다. 브랜드 웹 경험은 이러한 산업적 배경을 투명하게 전달하며 ESG를 행동으로 보여주는 것을 목표로 한다. 프로젝트 초기 조사에서 우리는 방문자가 가장 궁금해하는 것은 제품 스펙보다도 친환경 공정의 신뢰성과 납품 파트너십 절차였음을 확인했고, 이에 따라 첫 화면부터 가치 사슬을 입체적으로 노출하도록 기획했다.

이번 디지털 브로슈어는 국내외 투자자와 협력사를 동시 타깃으로 하기에 한글과 영문 데이터 블록을 병렬 배치하고, 핵심 ESG 지표를 그래픽 카드 형태로 강조한다. 배경 전체에 순환을 상징하는 곡선과 반짝이는 입자를 배치해 지속가능성과 첨단 소재 기술의 양면성을 표현했고, 자원 선순환 여정을 시간축 스토리텔링으로 풀어 이해도를 높였다. 또한 각 제품 페이지에 재활용 원료 트래킹 데이터를 탑재해 투명한 공급망을 강조하는 방향으로 콘텐츠 우선 전략을 설계했다.

세일즈 현장에서 활용될 수 있도록 다운로드 가능한 소재 데이터시트를 모듈화하고, 상담 CTA를 모든 스크롤 구간에서 접근할 수 있게 고정 버튼으로 제공한다. 실무 인터뷰를 통해 확보한 인증 현황, 고객 사례, 예상 납기 등의 정보를 카드 UI로 그룹화해 높은 스캐닝 효율을 확보했고, ESG 보고서 발간 일정과 무해성 시험 결과도 자연스럽게 연동하여 기업 신뢰도를 강화했다.

지속가능 혁신

지속가능 혁신 전략의 핵심은 ‘도시광산형 소재 순환 플랫폼’이라는 브랜드 포지셔닝을 명확히 하는 것이다. 정보 구조는 현장 재생원료 수거 → 선별 → 펠릿화 → 제품화 → 회수 재투입이라는 다섯 단계 플로우를 중심으로 구성했고, 각 단계마다 탄소 절감 수치와 품질 인증을 인포그래픽으로 보여준다. 특히 BGF리테일 편의점 물류망과 연계한 수거 시스템은 다른 기업과 차별화되는 요소이므로 전용 인터랙티브 타임라인을 제작해 방문자가 직접 경로를 따라가며 경험하도록 설계했다.

폐플라스틱을 단순히 재활용한다는 메시지를 넘어, 잔류 이물질을 제거하고 기능성 첨가제를 안정적으로 주입하는 공정 기술까지 상세히 소개한다. 이를 위해 R&D센터 연구원 인터뷰, 시험 설비 사진, 미세 구조 데이터 시각화를 함께 배치하여 ‘기술 기반 ESG’라는 이미지를 강화했다. 웹 접근성을 고려해 모든 그래픽에 텍스트 대안을 제공했으며, 스크린리더 사용자를 위해 공정 데이터를 리스트 형태로 재구조화했다.

실제 고객사와의 공동 개발 사례는 산업군별로 나누어 보여주고, 각 사례마다 탄소 절감 예상치와 사용된 소재 등급을 수치화했다. 이러한 수치는 백엔드에서 JSON으로 관리되어 향후 업데이트 시 운영자가 손쉽게 교체할 수 있도록 구성되었다. 사용자 테스트 결과, 수치 비교가 명확히 제시될 때 브랜드 신뢰도가 크게 상승하는 것으로 나타나 데이터 기반 스토리텔링이 핵심 성과 지표가 되었다.

서비스·역량 연계

서비스·역량 연계 섹션에서는 BGF에코머티리얼즈가 제공하는 솔루션 포트폴리오를 ‘소재 개발’, ‘환경 컨설팅’, ‘공급망 관리’, ‘품질 인증 지원’ 네 가지 축으로 재정의했다. 각 축은 카드형 글라스 컴포넌트로 배치하여 호버 시 투명한 유리판이 깊이감 있게 빛나도록 구현했고, 내부에 핵심 KPI를 노출해 사용자가 차별성을 직관적으로 파악하도록 유도했다. 또한 BGF그룹 내 편의점, 물류, F&B 사업과의 시너지를 시각적으로 연결해 그룹 차원의 역량 전이를 강조했다.

B2B 상담 흐름을 개선하기 위해 질문 기반의 ‘솔루션 파인더’를 도입하고, 사용자가 업종과 필요 인증을 선택하면 적합한 소재와 예상 리드타임을 추천하도록 설계했다. 이 도구는 상담 팀의 CRM과 연동되어 리드를 자동 분류하며, 각 선택 단계에는 ESG 목표에 맞춘 설명을 간략히 배치해 의사결정을 돕는다. 가이드 문구는 가독성을 높이기 위해 16px 기본 글꼴을 채용하고, 모바일에서는 단계별 아코디언으로 변환된다.

사내 세일즈 문서와 동기화되는 자료실을 구축하여 견적 요청서, 시험 성적서, 인증 증빙을 다운로드할 수 있게 하였고, 자료 접근 권한은 로그인 없이 이메일 인증만으로 처리해 진입 장벽을 낮췄다. 또한 파트너십 뉴스룸을 별도 섹션으로 구성하여 신규 협력 사례와 멤버사 인터뷰를 시계열로 배치, 사이트 재방문을 유도했다. 이러한 구성은 고객의 구매 여정을 단축시키고, 내부 팀이 동일한 스토리라인으로 소통할 수 있게 해준다.

UX/UI 글라스모피즘

UX/UI 글라스모피즘 설계는 소재의 투명성과 친환경 메시지를 동시에 전달하기 위한 선택이었다. 배경에는 딥블루에서 애시드 그린으로 전환되는 그라디언트를 적용하고, 주요 카드에는 반투명 유리판과 하이라이트 보더를 부여했다. 스크롤 시 입체감이 살아나도록 마스크된 빛 번짐 효과와 패럴랙스 움직임을 가미해 소재의 물성을 시각적으로 연상시켰다.

사용성 측면에서는 각 섹션을 1200px 그리드에 정렬하되, 콘텐츠 블록 사이에 충분한 숨 쉴 공간을 확보하여 복잡한 기술 정보를 부담 없이 읽을 수 있게 했다. 애니메이션은 0.4초 이내의 키프레임으로 제한하고 모션 곡선은 cubic-bezier(0.33, 1, 0.68, 1)를 사용해 자연스러운 감속감을 구현했다. 포커스 상태에서는 글라스 카드에 또렷한 아웃라인을 제공하여 키보드 사용자도 동일한 경험을 누릴 수 있도록 접근성 표준을 준수했다.

모바일 디자인은 세로 스크롤을 고려해 히어로 영역을 슬라이드형으로 축소하고, TOC는 고정 버튼에서 오버레이 패널로 전환되어 화면 가독성을 높였다. 이미지 비율은 4:3을 기본으로 하면서도 CSS object-fit: cover를 적용해 다양한 디바이스에서도 균일한 시각을 유지했다. 또한 드롭 섀도우를 다층 구조로 조정해 라이트 모드에서도 유리판이 떠 있는 듯한 깊이감을 유지했다.

콘텐츠 스토리텔링

콘텐츠 스토리텔링에서는 ‘소재가 미래의 자산이 된다’는 메시지를 중심으로 고객 가치 제안을 다층적으로 구성했다. 첫 번째 층위에서는 ESG 규제 대응과 원가 절감을 동시에 달성할 수 있는 비즈니스 효과를, 두 번째 층위에서는 브랜드 이미지 제고와 소비자 커뮤니케이션 관점의 이점을 설명했다. 이러한 구조는 방문자가 어디서 유입되더라도 자신에게 맞는 이득을 빠르게 찾도록 돕는다.

각 섹션에는 검색 엔진에서 자주 묻는 질문을 기반으로 한 FAQ 블록을 배치해 자연 검색 유입을 유도했다. FAQ는 Schema.org의 FAQPage 마크업을 통해 구조화되어 있으며, 질문에는 ‘탄소배출 저감량 계산 방식’처럼 롱테일 키워드를 삽입해 검색 가시성을 높였다. 또한 고객 사례를 기사형 카드로 전환해 클릭 시 상세 리포트로 이어지도록 구성, 체류 시간을 늘렸다.

스토리텔링을 강화하기 위해 생산 현장의 실제 목소리를 인용문 카드로 담아 신뢰를 확보했다. 각 인용문에는 발언자 직책과 현장 사진을 함께 싣고, 4K 촬영 이미지를 웹에서 가볍게 제공하기 위해 AVIF, WebP, JPG를 상황에 따라 자동 서빙하도록 이미지 파이프라인을 설계했다. 콘텐츠 팀이 빠르게 업데이트할 수 있도록 CMS 연동도 고려하여 마크다운 템플릿을 제공했다.

기술 & SEO 최적화

기술 및 SEO 최적화는 라이트하우스 기준 LCP 1.5초, CLS 0.02, TTI 1.8초 목표를 세우고 그에 맞춰 설계되었다. 정적인 자산은 HTTP/2 서버 푸시 대신 얼리 힌트와 프리로딩으로 대응하고, CSS는 크리티컬 파트를 인라인하여 첫 페인트를 앞당겼다. 자바스크립트는 필요한 모듈만 지연 로딩해 번들 크기를 최소화했다.

검색 최적화를 위해 구조화 데이터, Open Graph, 트위터 카드, 다국어 hreflang을 포함한 메타 정보를 정교하게 구성했다. 또한 공장 위치, 연구센터 주소 등 로컬 정보를 Organization 마크업에 포함해 B2B 파트너가 위치 기반 검색으로도 유입될 수 있도록 했다. 서버 측에서는 PHP 캐싱과 Cloudflare Tiered Cache를 연동해 글로벌 방문자의 응답 속도를 개선했다.

보안 측면에서는 콘텐츠 무결성을 유지하기 위해 서드파티 스크립트를 최소화하고, 모든 폼 제출에 reCAPTCHA Enterprise와 WAF 룰을 적용했다. 데이터 전송 구간은 TLS 1.3을 기본으로 하며, 정기적으로 취약점 스캔을 수행하도록 운영 프로세스를 문서화했다. 이러한 조치들은 브랜드의 소재 기술만큼이나 디지털 터치포인트도 신뢰할 수 있다는 메시지를 전달한다.

더블루캔버스 협업

BGF에코머티리얼즈 프로젝트의 전략 파트너로 참여한 더블루캔버스는 데이터 기반 브랜딩과 인터랙티브 구현을 결합하는 디지털 경험 제작 스튜디오다. 우리는 브랜드의 지속가능성 비전을 정성·정량 데이터를 통해 해석하고, 이해관계자 커뮤니케이션에 필요한 콘텐츠 설계를 총괄했다. 또한 현장 취재를 통해 확보한 스토리를 시각 언어로 재해석하여 기업이 보유한 기술력과 ESG 성과가 균형 있게 드러나도록 조율했다.

더블루캔버스 팀은 프로젝트 킥오프부터 운영까지 전 과정에 걸쳐 데이터 분석, UX 리서치, 비주얼 디자인, 프론트엔드 개발을 원스톱으로 제공했다. 특히 협업 플랫폼을 통해 클라이언트와 실시간으로 피드백을 교환하며 리소스를 효율화했고, 시나리오 검증을 위한 프로토타이핑 스프린트를 반복해 완성도를 높였다. 이러한 일련의 과정은 출시 이후에도 사용자 행동 데이터를 기반으로 지속적으로 개선할 수 있는 구조를 마련했다.

지속가능 혁신을 추진하는 기업이라면 더블루캔버스 공식 웹사이트인 https://bluecvs.com/ 에서 관련 레퍼런스를 확인하고 상담을 요청할 수 있다. 사이트에서는 유사 산업군의 성공 사례와 서비스 소개가 정기적으로 업데이트되며, ESG 콘텐츠 제작과 데이터 드리븐 마케팅을 아우르는 통합 솔루션을 제공한다. 이번 협업에서 축적된 노하우는 향후 타 산업으로 확장 가능한 모듈화된 디자인 시스템으로 정리되어 있고, 이를 통해 신규 파트너 역시 빠르게 성과를 체감할 수 있다.

마무리 인사이트

BGF에코머티리얼즈 디지털 리뷰는 단순한 기업 소개 페이지를 넘어 공급망 투명성과 ESG 지표를 한눈에 보여주는 데이터 허브로 작동한다. 리뉴얼 이후 내부 보고에 따르면 잠재 고객 문의 수가 전월 대비 68% 증가했으며, 해외 파트너의 세션 지속 시간도 1.7배 향상되었다. 이는 정보 구조와 인터랙션 디자인이 실질적인 비즈니스 지표 개선에 기여했음을 시사한다.

향후에는 고객사가 직접 탄소 감축량을 시뮬레이션할 수 있는 계산기와, 자매 브랜드와의 공동 캠페인을 소개하는 크로스 콘텐츠를 추가로 도입할 예정이다. 또한 BGF리테일의 리필 스테이션, 업사이클링 상품과 연계하여 온·오프라인에서 연결되는 옴니채널 경험을 확장한다는 계획이다. 지속가능성을 기업 전략의 중심에 두려는 조직에게 이번 사례는 데이터, 디자인, 기술이 맞물릴 때 어떤 시너지 효과가 나는지 보여주는 참고점이 될 것이다.