- CLIENT
- LS메탈 (LS Metal Co., Ltd.)
- INDUSTRY
- 동관 · 스테인리스관 제조 · LS그룹 계열
- PROJECT
- 글로벌 기업 홈페이지 리뉴얼 (KR / EN / VN)
- PERIOD
- 2021. 06 ~ 2021. 10
프릭스 수행범위
IA 설계, 풀페이지 메인, 메인/서브 GUI, 웹표준부터 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
리뉴얼이 필요했던 세 가지 이유
-
01
80년의 기술이 새 비전으로 읽혀야 했다
LS메탈은 1936년 조선제련에서 출발해 1986년 스테인리스관, 1993년 동관 공장을 세우며 파이프 기술을 쌓아왔습니다. 2020년 'We make better pipes' New Vision을 선포하면서, 긴 역사를 새 비전 아래 다시 정리해 보여줄 채널이 필요했습니다.
-
02
두 사업의 고객이 완전히 달랐다
동관은 가전·공조 업계, 스테인리스관은 EPC·조선·플랜트 업계가 주 고객입니다. 제품 규격, 인증, 영업 담당 창구가 모두 달라 하나의 사업 소개 페이지로는 각 고객의 질문에 답할 수 없었습니다.
-
03
해외 고객과 베트남 법인을 함께 응대해야 했다
사우디·카타르·미국 등 해외 플랜트 프로젝트 납품이 이어지고, 2020년 베트남 법인(LS Metal VINA)이 설립되었습니다. 국문·영문·베트남어 고객을 하나의 사이트에서 응대할 구조가 필요했습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 가전·공조 바이어 | 어떤 동관을 어떤 규격으로 공급하는가 | 동관사업·제품정보·인증현황 |
| EPC·조선·플랜트사 | 검증된 STS관과 납품 이력은 | 스테인리스관사업·인증현황·납품실적 |
| 해외 고객·VINA | 자국어로 담당자에게 바로 닿을 수 있는가 | EN / VN 사이트·담당자 정보·온라인 문의 |
| 취업준비생 | 어떤 인재를 찾고 어떻게 지원하는가 | 인재경영·인재상·복리후생·채용공고 |
| 주주·이해관계자 | 재무 공시와 지속가능경영 | IR정보 · 지속가능경영·감사보고서·ESG 방침 |
SOLUTION
정보구조를 다시 세운 세 가지 원칙
-
01
회사가 아니라 사업 단위로 나눈다
사업영역을 동관사업과 스테인리스관사업 두 축으로 분리하고, 각 사업 아래 제품정보·인증현황·영업부서를 같은 순서로 배치했습니다. 고객은 자신의 사업 축에 들어가면 제품부터 담당 영업팀까지 한 흐름으로 확인합니다.
-
02
설명 대신 인증과 실적으로 증명한다
KS·JIS·ISO·PED 인증과 BV·DNV·KR·LR·RS 5대 선급인증을 다운로드 형태로 공개하고, 1997년부터 이어진 해외 플랜트 납품실적을 연도·프로젝트·국가로 정리했습니다. 문장 대신 기록으로 신뢰를 보여줍니다.
-
03
언어마다 필요한 만큼만 연다
국문은 IR·인재경영·ESG까지 전체 메뉴를, 영문·베트남어는 사업영역과 고객지원 중심으로 메뉴를 압축했습니다. 해외 고객은 불필요한 메뉴 없이 제품과 담당자에게 바로 도달합니다.
정보구조 (Information Architecture)
- 기업소개인사말경영철학LS Partnership · 윤리경영 · 품질·환경 경영방침Metal WayVision · 핵심가치 · CI · 연혁 · 사업장IR정보감사보고서 · 결산공고
- 사업영역동관사업제품정보 6종 · 인증현황 · 동관영업팀 (서울·부산·해외)스테인리스관사업제품정보 · 인증현황 · 납품실적 · STS영업팀 (국내·부산·해외)
- 인재경영인재상복리후생채용공고외부 채용사이트 연계채용문의외부 채용사이트 연계
- 고객지원공지사항담당자 정보사업별 영업팀 6개 Part온라인 문의문의유형 6종 분기 접수
- 지속가능경영Environmental안전·보건 및 환경 경영방침Social인권경영 · 동반성장Governance윤리규범
KR / EN / VN 다국어 전환, 본문 바로가기, 장애인 웹접근성 문의, LS사이버신문고, LS FAMILY SITE(12개사) — 전 페이지 상설 노출
FEATURES
무엇을 개발했는가
보이는 기능
01
풀페이지 스크롤 메인
메인을 비전·기업소개·사업영역·인재경영·고객지원 5개 풀스크린 섹션으로 구성했습니다. 스크롤 한 번에 한 섹션씩 넘어가며, 메시지 하나가 화면 하나를 온전히 차지합니다.
02
제조 현장 영상 히어로
'PIPE로 연결되는 세상, 인류의 쾌적하고 안락한 삶에 기여합니다'라는 미션을 제조 현장 영상 위에 얹었습니다. 파이프 제조의 스케일을 첫 화면에서 바로 전달합니다.
03
섹션 연동 GNB
GNB 메뉴가 메인의 각 섹션과 앵커로 연결되어, 메뉴를 누르면 해당 섹션으로 이동하고 하위 메뉴 바로가기가 함께 노출됩니다.
04
KR / EN / VN 다국어 전환
헤더의 언어 버튼으로 국문·영문·베트남어 사이트를 즉시 전환합니다. 본사와 베트남 법인 정보를 하나의 푸터에 함께 담았습니다.
보이지 않는 기능
01
인증서 다운로드 체계
동관 9종·STS 15종 인증서를 규격별(KS·JIS·ISO·PED·KC·선급)로 묶어, 바이어가 필요한 인증만 바로 내려받도록 구성했습니다.
02
납품실적 데이터베이스
1997년부터의 해외 프로젝트 납품실적을 연도 구간 탭과 년도·프로젝트·국가 항목으로 구조화해 운영합니다.
03
영업 문의 분기
온라인 문의를 동관 사업·동관 견적·STS 사업·STS 견적·사업 제휴·기타 6개 유형으로 나눠, 접수 단계부터 담당 영업팀으로 배정되도록 설계했습니다.
04
외부 시스템 연계
채용공고·채용문의는 채용 플랫폼(recruiter.co.kr)으로, 윤리 제보는 LS사이버신문고로 연결해 별도 시스템을 사이트 동선 안으로 묶었습니다.
05
IR · ESG 게시판
결산공고·감사인 선임 공고와 안전·보건·환경 경영방침, 윤리규범을 게시판으로 운영해 담당 부서가 직접 갱신.
06
웹표준 · 접근성
본문 바로가기(스킵 내비게이션)와 장애인 웹접근성 문의 채널 제공.
DESIGN
설명하지 않고,
연결을 보여준다
파이프 기업의 신뢰는 규모와 정밀함에서 나옵니다.
LS그룹 CI를 지키면서도, 제조 현장 영상과 대형 타이포가 화면을 이끌도록 시각 언어를 정리했습니다.
영상이 주인공인 화면
제조 현장 영상을 풀블리드로 재생하고 미션 문구만 얹었습니다. 설명을 읽기 전에 생산 스케일을 먼저 보게 하는 것이 목표였습니다.
한 화면, 한 메시지
풀페이지 섹션마다 하나의 메뉴 그룹만 담아, 스크롤 한 번에 메시지 하나가 정확히 읽히도록 정보 밀도를 조절했습니다.
LS그룹 CI 일관성
LS그룹 아이덴티티 컬러와 워드마크를 헤더·푸터에 고정해, 그룹 계열사 사이트들과 같은 신뢰의 인상을 만듭니다.
영문 슬로건 상시 노출
'We make better pipes'를 헤더 슬로건으로 상시 노출해, 해외 고객에게도 회사의 비전이 첫 화면부터 바로 읽히도록 했습니다.
다국어 공통 타이포 체계
Noto Sans 계열 서체로 국문·영문·베트남어를 하나의 체계로 운영해, 언어가 바뀌어도 같은 위계와 톤을 유지합니다.
반응형 재배치
데스크톱의 풀페이지 섹션은 모바일에서 화면 높이에 맞춰 재배치되고, GNB는 전체메뉴 패널로 전환되어 같은 구조로 탐색합니다.
주요 화면
RESULT
무엇이 달라졌는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 사업 구분 없는 회사 소개 | 동관 · STS 2축 사업 구조 | 고객이 자신의 사업 축에서 제품·인증·담당자를 찾습니다. |
| 신뢰 | 인증 · 실적 정보 분산 | 인증 다운로드 · 납품실적 DB | 해외 EPC 바이어가 검증 자료를 바로 확보합니다. |
| 언어 | 국문 중심 운영 | KR / EN / VN 3개 언어 | 베트남 법인과 해외 고객을 하나의 사이트에서 응대합니다. |
| 운영 | 요청 기반 콘텐츠 갱신 | IR · ESG · 공지 CMS 직접 운영 | 공시와 경영방침을 담당 부서가 직접 갱신합니다. |
