엔코스 기업 사이트 구축 사례

엔코스 기업 사이트는 스크롤에 따라 바탕색이 흰색에서 검은색으로 이어진다. 화면이 바뀌어도 브랜드 분위기가 끊기지 않도록 구간마다 배경을 단계적으로 바꾸는 방식이다.

제형을 닮은 입체 오브제는 서로 다른 속도로 지나간다. 제목은 자리에 머물고 오브제만 움직여서, 문장 하나에 제형의 질감과 깊이를 함께 전달한다.

숫자 구간에서는 바탕이 흰색에서 옅은 회색으로 바뀌고 숫자가 자리마다 다른 속도로 굴러 멈춘다. 중요한 수치를 한 번 더 읽게 만드는 장치다.

움직임을 줄이도록 설정한 기기에서는 모든 애니메이션을 끄고 내용을 바로 보여 준다.

해외 거점을 보여 주는 지구본은 대륙을 점으로만 그렸다. 면으로 채우지 않아 화면이 무겁게 보이지 않고, 뒷면 대륙은 보이지 않는 구로 가려 입체감을 살렸다.

드래그로 돌리다 손을 놓으면 화면 가운데에 가장 가까운 지역이 자동으로 선택되고, 위쪽 지역 이름도 함께 움직인다. 지역 이름이나 핀을 눌러도 지구본이 가장 짧은 방향으로 돌아간다.

지구본이 화면 밖에 있을 때는 그리기를 멈춰 기기 부담을 줄인다. 모바일에서도 같은 조작을 쓸 수 있다.

엔코스의 6가지 처방 기술을 입체 오브제 하나씩으로 옮겼다. 스프레이형 하이드로겔, 글라이코리피드 안정화, 트리플 블록, 오일 드롭 하이드로겔과 듀얼 매핑, 피부 장벽 복원, 수분 보유와 페이즈플로우 유화 기술이다.

오브제는 색을 쓰지 않고 형태와 빛으로만 구분한다. 그래서 14개 페이지 어디에 놓여도 한 브랜드로 읽힌다.

긴 설명 없이도 무엇을 다루는 회사인지 먼저 보이게 하려는 선택이다. 기술 이름을 읽기 전에 형태가 먼저 눈에 들어온다.

라틴 문자와 제목은 Manrope, 국문 본문은 Pretendard 를 쓴다. Manrope 는 구독 없이 계속 쓸 수 있는 오픈 라이선스 서체라, 앞으로의 운영에서 서체 비용이 생기지 않는다.

화이트와 그레이가 바탕을 맡고 블랙이 메시지를 맡는다. 레드는 사용자가 움직일 지점에만 절제해서 쓴다. 색의 수를 줄이는 대신 쓰임을 정해 두는 방식이다.

워드마크는 첫 화면과 푸터에서 화면 폭을 가득 채우는 가장 큰 그래픽으로 쓴다. 영상과 사진 위에는 슬로건을 함께 담은 흰색 로고를 올린다.

링크 위에서 커서가 점에서 원과 밑줄 라벨로 커진다. 글로 설명하지 않아도 무엇을 할 수 있는지 바로 알 수 있다.

목록의 줄에 마우스를 올리면 점이 나타나고 구분선이 끝까지 차오른다. 긴 목록에서도 지금 읽는 줄을 놓치지 않는다.

제목 글자는 왼쪽부터 차례로 흐림을 벗고 또렷해진다. 모든 페이지의 제목이 같은 호흡으로 등장한다.

모바일에서는 커서 대신 버튼과 밀기 동작으로 바뀐다.

국문, 영문, 중문 세 언어를 하나의 구조로 운영한다. 언어를 바꿔도 제목의 위계와 화면 구조는 그대로이고, 언어별 문구만 바뀐다.

언어마다 고유한 주소를 두고 검색엔진에 언어별 짝을 알려 준다. 그래서 세 언어가 검색에서 각각 따로 발견된다.

해외 브랜드 고객이 자국어로 회사를 살펴볼 수 있고, 같은 디자인 안에서 읽기 때문에 언어마다 인상이 달라지지 않는다.

메인을 포함한 14개 페이지가 COMPANY, FACTORY, LAB, PR, ESG 다섯 메뉴 안에 정리되어 있다.

COMPANY 에는 About, Global Network, History, Location 이 들어간다. FACTORY 는 Manufacturing 과 Smart Factory, LAB 은 Capability, Formulation, Process, PR 은 News Room 과 Trancors, ESG 는 ESG Vision 과 Safety Ethics 로 구성된다.

각 페이지 아래의 플로팅 탭으로 옆 페이지로 바로 넘어갈 수 있다. 메뉴로 돌아가지 않고도 같은 묶음 안을 이동한다.

방문자는 브랜드 창업자, 브랜드 MD, 해외 바이어, 연구 파트너, ESG 검수자로 목적이 저마다 다르다. 화면을 그리기 전에 방문자별 여정부터 정리하고 구조를 잡았다.

이 사이트는 뮤자인이 자체 구축한 멀티 사이트 운영 플랫폼 m-CMS 위에서 돌아간다.

뉴스와 홍보처럼 자주 바뀌는 콘텐츠는 담당자가 개발자 없이 직접 페이지를 만들고 고칠 수 있다. 콘텐츠를 바꾸려고 개발 일정을 기다리지 않아도 된다.

메일 발송과 이미지 가속을 함께 연결했고, 변경 사항은 자동 배포 체계로 반영된다.

페이지 곳곳의 버튼이 같은 문의 창으로 이어진다. 관심이 생긴 순간 페이지를 옮기지 않고 바로 연락할 수 있다.

접수된 문의는 담당자 메일로 자동 발송되어 영업 기회를 놓치지 않는다.

윤리경영 신고처럼 민감한 제보를 받는 전용 폼을 일반 문의와 따로 두었다.

제보 내용은 보호된 경로로 담당자에게만 전달된다. ESG 경영을 문서가 아니라 동작하는 창구로 뒷받침한다.

언어별 사이트맵과 회사 정보를 담은 구조화 데이터를 넣어 검색엔진이 회사와 사업 영역을 정확히 이해하도록 했다.

AI 가 읽는 요약 파일 llms.txt 를 두고 AI 수집 로봇을 허용해, 생성형 검색이 회사와 기술 정보를 바르게 읽어 가도록 했다.

검색 노출과 AI 인용은 오픈 뒤에 붙이면 비용이 더 든다. 설계 단계에서 함께 넣었다.

같은 내용을 PC 에서는 넓은 여백과 큰 제목으로, 모바일에서는 세로 흐름과 터치 조작으로 다시 구성했다.

화면이 좁아질 때 요소를 숨기지 않고 순서를 바꾸는 쪽을 택했다. 모바일에서도 같은 정보에 닿을 수 있다.