- CLIENT
- 삼성중공업 (Samsung Heavy Industries)
- INDUSTRY
- 조선 · 해양플랜트 · 친환경/디지털 솔루션
- PROJECT
- 기업 홈페이지 구축 / 리뉴얼
- PERIOD
- 2023. 12 ~ 2024. 05
프릭스 수행범위
IA 설계부터 스토리보드, GUI, 웹표준 마크업, CMS 개발, 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
리뉴얼이 필요했던 세 가지 이유
-
01
기업 정체성이 바뀌었다
사업은 선박 건조를 넘어 그린·디지털 솔루션과 스마트야드로 확장됐습니다. 그러나 홈페이지는 '무엇을 만드는 회사인가'를 제품 목록으로 설명하는 구조에 머물러 있었습니다.
-
02
방문자의 목적이 서로 달랐다
선주·발주처, 투자자, 취업준비생, 협력업체, 언론이 한 사이트에 동시에 들어옵니다. 채용·오픈소싱·방문 신청 같은 실제 목적지는 메뉴 깊은 곳에 흩어져 있었습니다.
-
03
모바일과 글로벌 접점이 약했다
해외 파트너 유입과 모바일 접속 비중이 높아졌지만 화면은 데스크톱 기준으로 고정돼 있었습니다. 브랜드의 첫인상이 기기와 언어에 따라 다르게 전달되는 상태였습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 선주·발주처 | 어떤 선종과 해양설비를 어떤 기술로 짓는가 | 제품 | 서비스·그린/디지털 솔루션 |
| 투자자·애널리스트 | 사업 방향과 지속가능경영 수준 | 지속가능경영·뉴스룸 |
| 취업준비생 | 어떤 일을 하고 어떻게 지원하는가 | 인재채용·채용공고·채용절차 |
| 협력업체 | 등록·거래·방문을 어디서 처리하는가 | 오픈소싱·방문신청·구매업무 |
| 언론·일반 | 최근 소식과 기업의 얼굴 | 뉴스룸·블로그·SNS |
SOLUTION
정보구조를 다시 세운 세 가지 원칙
-
01
제품이 아니라 기술 서사로 묶는다
선종·설비 단위로 나열하던 목록을 네 개 솔루션 축으로 재편했습니다. 개별 제품을 찾으러 온 사람도, 회사의 방향을 보러 온 사람도 같은 입구를 씁니다.
-
02
깊이를 숨기지 않고 한 화면에 펼친다
4~5뎁스 구조를 감추는 대신 전체메뉴(풀스크린 GNB)로 한 번에 드러냈습니다. 어느 화면에서든 사이트 전체가 보이고, 목표 페이지까지 3뎁스 안에 도달합니다.
-
03
흩어진 시스템을 하나의 관문으로 모은다
별도 도메인에서 운영되는 오픈소싱·방문신청·윤리 제보를 공통 유틸리티 영역에 상설 배치했습니다. 목적이 분명한 방문자는 메뉴를 거치지 않습니다.
정보구조 (Information Architecture)
- 제품 | 기술제품 | 서비스그린 솔루션디지털 솔루션스마트야드 솔루션
- 회사소개기업개요CEO 메시지연혁사업장 안내
- 투자정보거버넌스IR 정보전자공시 | 공고
- 뉴스 | 미디어뉴스룸PR 영상
- 인재채용채용안내회사생활
- 지속가능경영
개인정보처리방침, 영상정보 처리기기 운영/관리 방침, 이메일주소 무단수집거부, 보안신고, 윤리경영/제보, 패밀리사이트, KO/EN 전환
FEATURES
무엇을 개발했는가
보이는 기능
01
풀스크린 메인 비주얼 (3종)
스마트 기술 · 무인화 선박 · 친환경 기술 세 메시지를 실제 야드 영상 위에 얹어, 현장 자체가 첫 문장이 되도록 설계했습니다.
02
솔루션 카드 그리드 인터랙션
네 솔루션을 전면 이미지 타일로 구성하고 호버 시 화살표와 스케일이 반응합니다. 클릭 대상을 카드 전체로 확장해 모바일 조작감을 맞췄습니다.
03
전체메뉴형 GNB
헤더의 메뉴 버튼으로 사이트 전체 구조를 한 화면에 펼칩니다. 스크롤 위치에 따라 헤더가 투명에서 화이트로 전환됩니다.
04
KO/EN 다국어 전환
국문과 영문 경로를 분리 운영하고, 현재 보고 있는 페이지의 대응 언어 페이지로 직접 이동합니다.
보이지 않는 기능
01
뉴스룸 CMS
목록/상세 게시판과 관리자 화면. 고유 번호 기반 상세 URL로 외부 인용과 공유에 대응합니다.
02
채용 정보 운영
채용공고와 채용절차 안내를 분리해, 지원 시점과 탐색 시점의 방문자를 나눠 받습니다.
03
외부 시스템 연계
방문신청 예약, 오픈소싱 협력사 DB, 윤리경영 제보 채널을 본 사이트 동선 안으로 연결했습니다.
04
웹표준 · 크로스브라우징
표준 마크업 기반 퍼블리싱으로 웹접근성 인증 취득을 지원합니다.
DESIGN
설명하지 않고,
보여준다
중공업의 규모감은 문장으로 설명되지 않습니다.
삼성 CI 체계를 지키면서도 현장의 스케일이 화면을
지배하도록 시각 언어를 정리했습니다.
사진이 주인공인 화면
실제 도크와 선박 이미지를 풀블리드로 쓰고 텍스트는 최소한만 얹습니다. 읽기 전에 보이게 하는 것이 목표였습니다.
다크 오버레이와 대형 타이포
이미지 위 가독성을 위해 딥 네이비 오버레이를 깔고, 국문 헤드라인을 두 줄 대형 타이포로 배치했습니다.
삼성 CI 체계 준수
로고 락업과 블루 계열 컬러 체계를 그대로 유지해 그룹 계열사 사이트 사이에서 일관된 경험을 만듭니다.
절제된 마이크로 인터랙션
화살표 이동, 이미지 스케일, 헤더 전환 정도로만 움직임을 제한했습니다. 신뢰감은 과한 연출에서 나오지 않습니다.
여백 중심 그리드
섹션 사이 여백을 넉넉히 두어 정보 위계를 단순화하고, 한 화면에 하나의 메시지만 남도록 구성했습니다.
반응형 재배치
가로 4단 카드 그리드는 모바일에서 세로 스택으로 전환됩니다. 이미지 크롭 기준을 따로 정의해 피사체가 잘리지 않습니다.
주요 화면
RESULT
무엇이 개선됐는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 제품 목록 중심 | 기술 서사 4축 중심 | 회사가 지금 무엇을 하는 기업인지가 메인에서 바로 읽힙니다. |
| 동선 | 목적지가 메뉴 깊이에 분산 | 전체메뉴 + 상설 유틸리티 | 목적형 방문자가 3뎁스 안에 도달합니다. |
| 기기 | 데스크톱 고정 레이아웃 | 데스크톱 고정 레이아웃 | 모바일·태블릿에서 동일한 브랜드 경험을 제공합니다 |
| 운영 | 부서별 개별 요청 처리 | 반응형 단일 사이트 | 뉴스·채용 콘텐츠를 담당 부서가 직접 갱신합니다. |