- CLIENT
- 씨엔에스푸드시스템 (CNS Food System Co., Ltd.)
- INDUSTRY
- 냉동식품 제조 · OEM/ODM · 현대백화점그룹 계열
- PROJECT
- 기업 홈페이지 리뉴얼 구축
- PERIOD
- 2024. 06 ~ 2024. 11
프릭스 수행범위
IA 설계, 제품 탐색, 메인/서브 GUI, 웹표준 마크업부터 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
리뉴얼이 필요했던 세 가지 이유
-
01
20년의 제조 이력이 한눈에 읽히지 않았다
씨엔에스푸드시스템은 2003년 설립 이후 CJ제일제당 OEM 체결, HACCP·FSSC 22000 인증, 제2공장 완공까지 냉동식품 제조 역량을 쌓아왔습니다. 2013년 현대백화점그룹에 편입됐지만, 이 축적과 그룹의 신뢰가 화면에서 하나의 이야기로 전달되지 않았습니다.
-
02
제품이 많을수록 찾기 어려웠다
핫도그·탕수육·까스·김말이·증자류 등 57개 제품이 생산되지만, 유통·프랜차이즈 바이어가 원하는 품목군을 빠르게 비교할 기준이 필요했습니다. 제품 수가 늘어날수록 카테고리 체계가 곧 탐색 속도가 됩니다.
-
03
'어떻게 만드는가'가 곧 경쟁력이었다
식품 OEM·납품 거래에서 발주처가 가장 먼저 확인하는 것은 위생과 공정입니다. 전처리부터 2차포장까지의 설비, 품질관리 체계, 인증 현황을 말이 아닌 근거로 보여줄 채널이 필요했습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 유통·프랜차이즈 바이어 | 어떤 품목을 어느 수준으로 생산하는가 | 제품소개·8개 카테고리·57개 제품 |
| OEM·ODM 발주처 | 위생과 공정을 믿을 수 있는가 | 제조설비 · 주요경쟁력·인증사항·품질관리 |
| 거래 검토 담당자 | 제품 자료를 한 번에 받고 싶다 | 전자카달로그 · 홍보 동영상·주요거래처 |
| 신규 거래 문의자 | 견적 · 납품 상담을 어디서 하는가 | 고객지원·온라인문의·오시는길 |
| 주주·관계기관 | 회사 이력과 공시 정보 | 회사소개 · 고객센터·연혁·결산공고 |
SOLUTION
정보구조를 다시 세운 세 가지 원칙
-
01
공장이 아니라 품목에서 출발한다
57개 제품을 핫도그류·탕수육·까스류·치킨류·증자류·김말이·기타/산적류·수출품 8개 카테고리로 정리하고, GNB와 메인 제품 슬라이드가 같은 분류 기준을 공유하도록 했습니다. 바이어는 품목만 알면 바로 해당 제품군에 닿습니다.
-
02
설명 대신 공정으로 증명한다
제조설비 16종을 전처리 → 가공 → 1차포장 → 2차포장 공정 순서로 정리하고, FSSC 22000과 HACCP 6종 인증서를 별도 페이지로 공개했습니다. '안전한 먹거리'라는 문장을 설비와 인증이 대신 증명합니다.
-
03
검토와 문의를 짧은 동선으로 묶는다
전자카달로그(PDF)와 홍보 동영상을 회사소개 아래 배치하고, 메인 하단에 고객센터·온라인문의 바로가기를 상설 노출했습니다. 검토를 마친 담당자는 한 번의 클릭으로 상담을 남깁니다.
정보구조 (Information Architecture)
- 회사소개인사말연혁2003 설립 ~ 2024 FSSC 22000인증사항FSSC 22000 · HACCP 6종 · 농식품 우수업체 지정조직도오시는길제1공장 · 제2공장홍보 동영상전자카달로그PDF 다운로드
- 사업소개사업영역핫도그 · 까스 · 탕수육 · 김말이 · 증자류주요경쟁력생산능력 · R&D센터 · 품질관리주요거래처거래처 17개사
- 제품소개핫도그류탕수육까스류치킨류증자류김말이기타/산적류수출품
- 제조설비제조설비전처리 5종 · 가공 5종 · 1차포장 3종 · 2차포장 3종
- 고객지원고객센터공지사항 · 결산공고온라인문의견적 · 납품 상담 접수
온라인몰 바로가기, 전자카달로그(PDF), 대표전화 043-652-9228, FAMILY SITE(현대백화점그룹 16개사), TOP 버튼 — 전 페이지 상설 노출
FEATURES
무엇을 개발했는가
보이는 기능
01
풀스크린 제품 비주얼 슬라이드
대표 제품 클로즈업 사진 위에 '고객을 행복하게, 세상을 풍요롭게'라는 그룹 미션을 얹었습니다. 첫 화면에서 제품의 품질감과 기업의 약속이 함께 읽히도록 구성했습니다.
02
카테고리형 제품 슬라이드
OUR PRODUCTS 영역에서 8개 제품 카테고리를 카드 슬라이드로 넘겨 보고, '상세보기'로 해당 카테고리 목록에 바로 진입합니다. 제품을 나열하지 않고 품목군 단위로 보여줍니다.
03
메가메뉴형 GNB
회사소개·사업소개·제품소개·제조설비·고객지원 5개 메뉴에 마우스를 올리면 하위 메뉴 전체가 한 번에 펼쳐집니다. 어느 페이지에서든 원하는 품목으로 바로 이동합니다.
04
홍보 영상 · 고객지원 바로가기
메인에서 PR MOVIE를 바로 재생하고, 고객센터·온라인문의 카드를 하단에 배치해 브랜드 이해에서 거래 문의까지 한 화면 안에서 이어집니다.
보이지 않는 기능
01
제품 카테고리 게시판
57개 제품을 카테고리 분류 기반 게시판으로 운영해, 신제품 등록 시 분류만 지정하면 메뉴와 목록에 바로 반영됩니다.
02
설비 · 인증 게시판
제조설비 16종과 인증사항 8건을 갤러리형 게시판으로 분리해, 설비 증설이나 인증 갱신 시 항목 단위로 추가합니다.
03
B2B 온라인문의
회사명·부서/직책·연락처·첨부파일을 받는 B2B형 문의 폼을 구성해, 견적·납품 상담에 필요한 정보를 한 번에 접수합니다.
04
공시 · 공지 운영
결산공고·감사인 선임 공고 등 법정 공시를 고객센터 게시판으로 운영해, 매년 담당자가 직접 게재합니다.
05
관리자 CMS
제품·설비·연혁·공지 콘텐츠의 등록·수정·노출 제어를 담당자가 직접 처리하도록 구성.
06
웹표준 · SEO 기본설정
웹표준 마크업과 메타·OG 태그 기본 설정 적용.
DESIGN
맛보다 먼저,
공정을 보여준다
식품 B2B 고객은 맛있어 보이는 것보다 믿을 수 있는 것을 먼저 찾습니다.
현대백화점그룹 CI를 지키면서도, 제품과 설비 사진이 화면의 중심이 되도록 시각 언어를 정리했습니다.
제품이 주인공인 화면
대표 제품 클로즈업 사진을 풀블리드로 배치하고 카피는 최소한만 얹습니다. 설명을 읽기 전에 제품의 품질감을 먼저 보게 하는 것이 목표였습니다.
그룹 CI 고정 노출
헤더에 HYUNDAI 그룹 로고와 씨엔에스푸드시스템 워드마크를 함께 노출해, 계열사로서의 신뢰를 전 페이지에서 일관되게 전달합니다.
그린 · 오렌지 포인트 컬러
신선함을 상징하는 그린과 식욕을 자극하는 오렌지를 포인트로 쓰고, 나머지는 화이트로 비워 제품 사진의 색이 살아나게 했습니다.
영문 라벨 + 국문 타이틀
OUR PRODUCTS · ABOUT US · PR MOVIE처럼 영문 라벨과 국문 타이틀을 짝지어, 긴 메인도 섹션 단위로 명확히 구분됩니다.
공정 순서형 설비 리스트
설비를 전처리·가공·포장 단계 라벨과 함께 나열해, 사진만 훑어봐도 원재료부터 출하까지의 생산 흐름이 읽히게 했습니다.
반응형 재배치
데스크톱의 제품 카드 슬라이드는 모바일에서 스와이프형으로 전환되고, 메가메뉴는 전체메뉴 패널로 바뀌어 같은 구조로 탐색합니다.
주요 화면
RESULT
무엇이 달라졌는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 회사 소개 중심 나열 | 품목 8개 카테고리 중심 | 바이어가 품목에서 출발해 제품 목록에 바로 닿습니다. |
| 신뢰 | 설비 · 인증 정보 분산 | 공정 순서형 설비 · 인증 공개 | 위생과 공정을 근거로 OEM 거래 신뢰를 만듭니다. |
| 문의 | 자료 확인과 문의 창구 분리 | 카달로그 → 온라인문의 연결 | 검토를 마친 담당자가 바로 상담을 남깁니다. |
| 운영 | 요청 기반 콘텐츠 갱신 | 게시판형 CMS 기반 직접 운영 | 신제품·설비·공시를 담당자가 직접 갱신합니다. |
