개요
핵심 요약
- 엔코스(ANCORS)는 경기 오산시에 위치한 하이드로겔·유화 제형 전문 화장품 ODM 기업으로, 사이트는 React 기반 싱글 페이지 애플리케이션으로 제작됐다.
- 초기 HTML의 body는 <div id="root"></div> 한 줄뿐이고, 실제 화면 내용은 자바스크립트가 렌더링한다.
- 반면 HTML head에는 Organization·FAQPage·Service를 포함한 @graph 구조화 데이터가 정적으로 삽입돼 있어, 특허번호(10-2687500, 10-2701236)와 FAQ 여섯 문항까지 기계가 읽을 수 있는 형태로 제공된다.
- hreflang이 ko·en·zh-Hans·x-default 네 갈래로 선언돼 있어 다국어 페이지 구조를 검색엔진에 명시한다.
- ‘THE NUMBERS BEHIND THE BRANDS’ 구획은 2024년 매출, 해외 매출 비중 48.8%, 글로벌 파트너 브랜드 300+, 2024년 수출국 22개국을 화면에 표시한다.
엔코스 사이트 첫 화면은 크림색 하이드로겔 덩어리 사진과 함께 ‘YOUR BEAUTY, OUR MISSION’이라는 문장으로 시작하고, 곧이어 화면 전체를 채우는 굵은 ‘ANCORS’ 워드마크가 등장한다. 그 아래로 오렌지·민트·투명 소재의 3D 젤 오브제 사진이 가로로 이어지는데, 실제 제형을 조형물처럼 촬영해 ‘하이드로겔 제조사’라는 업의 본질을 시각적으로 먼저 전달한다.
이어서 ‘ANCORS MAKES THE DIFFERENCE’, 매출·수출 지표를 나열한 ‘THE NUMBERS BEHIND THE BRANDS’, 제형 카테고리를 다루는 ‘FORMULA CATEGORY’, ‘BEYOND ODM BEAUTY FOUNDRY BY ANCORS’가 순서대로 나온다. 하단에는 코스알엑스·메디큐브·바이오던스·토리든·닥터자르트 등 협업 브랜드 로고 스트립과 ‘TRANCORS BEAUTY INSIGHT MAGAZINE’ 콘텐츠 발행 구획이 이어지고, 거대한 ANCORS 워드마크 푸터로 마무리된다.
브랜드 & 메시지
브랜드 화법은 ‘제조사가 아니라 파운드리(Foundry)’라는 재정의에서 출발한다. ‘BEYOND ODM BEAUTY FOUNDRY BY ANCORS’ 같은 헤드라인과 구조화 데이터 속 ‘VOC-to-Formulation 엔진’ 설명은, 단순 위탁생산이 아니라 데이터 기반으로 제형을 설계하는 기업이라는 포지셔닝을 반복해서 강조한다. 특허번호를 두 개나 명시하는 것도 같은 맥락이다.
시각 언어는 흑백 대비의 초대형 타이포와 컬러풀한 3D 젤 오브제 사진의 조합이다. 화장품 ODM 업종에서 흔한 공장 설비나 연구원 사진 대신, 제형 그 자체를 산업 디자인 오브제처럼 다뤄 B2B 바이어에게 기술력을 시각적으로 각인시키는 방식을 택했다. 코스알엑스·메디큐브 같은 실제 고객 브랜드 로고를 하단에 노출하는 것도 레퍼런스 기반 신뢰 설계다.
UX/UI 관점
강점은 여섯 가지다. 첫째, 매출·해외 매출 비중·파트너 브랜드 수·수출국 수 같은 대형 숫자를 ‘THE NUMBERS BEHIND THE BRANDS’ 한 구획에 모아, B2B 바이어가 신뢰 지표를 스크롤 한 번으로 파악하게 했다. 둘째, 제형 사진을 오일드롭 하이드로겔·약산성 하이드로겔·스프레이 하이드로겔 같은 카테고리로 분류해 ‘FORMULA CATEGORY’ 구획에서 탐색할 수 있게 했다. 셋째, 협업 브랜드 로고 스트립에 코스알엑스·메디큐브·바이오던스·토리든·닥터자르트 등 실제로 확인 가능한 브랜드명을 노출해, 검증 가능한 형태로 신뢰를 뒷받침한다.
넷째, ‘TRANCORS BEAUTY INSIGHT MAGAZINE’ 구획에서 자체 발행 콘텐츠(매거진 커버 이미지)를 노출해, 단순 소개 페이지를 넘어 업계 인사이트를 발행하는 기업이라는 인상을 만든다. 다섯째, 다크모드 자동 전환을 막는 ‘color-scheme: light’ 메타 태그와 배경색 인라인 스타일을 head에 미리 심어, iPad·Safari WKWebView에서 다크모드로 초기 화면이 깨지는 문제를 방지했다. 여섯째, hreflang을 ko·en·zh-Hans·x-default로 선언해, 다국어 페이지가 있는 화장품 ODM 사이트로서 국가별 바이어 검색에 대응하는 구조를 갖췄다.
IA·SEO 전략
이 사이트는 React 기반 싱글 페이지 애플리케이션이라 body에는 <div id="root"></div>만 있고 나머지는 자바스크립트가 그린다. 크롤러가 자바스크립트를 실행하지 못하는 경우 초기 HTML만으로는 실제 화면 콘텐츠를 확인하기 어렵다는 뜻이다. 그러나 head에는 이례적으로 풍부한 정적 JSON-LD가 심어져 있어, Organization·FAQPage·Service(hasOfferCatalog 포함) 세 가지 타입이 자바스크립트 실행 없이도 그대로 노출된다.
FAQPage에는 ‘VOC-to-Formulation 엔진이 무엇인가요?’, ‘하이드로겔 제형을 잘 만드는 화장품 제조사인가요?’ 같은 질문 여섯 개가 답변과 함께 구조화돼 있어, 화면에 보이는 FAQ 아코디언이 없어도 검색·AI 답변 엔진이 인용할 근거는 확보된 상태다. og:image, twitter:card, canonical, hreflang까지 메타 요소도 빠짐없이 채워져 있다. 다만 SPA 구조상 화면에 보이는 실제 문구와 JSON-LD 문구가 정확히 일치하는지, 하위 페이지(en, zh)도 같은 수준의 구조화 데이터를 갖췄는지는 별도 점검이 필요하다.
성능·접근성
폰트는 Pretendard를 CDN이 아닌 자체 호스팅으로 전환했다고 주석에 명시돼 있는데, 이는 CDN의 local() 우선순위가 기기별 구버전 폰트를 집어 렌더가 깨지는 문제를 막기 위한 조치로 읽힌다. Google Fonts(Albert Sans, Roboto, Material Symbols)는 media="print" 트릭으로 렌더 블로킹 없이 비동기 로드하도록 처리했다.
다만 SPA 구조 특성상 자바스크립트 번들이 로드되고 실행돼야 첫 콘텐츠가 그려지므로, 저사양 기기나 느린 네트워크에서는 흰 화면 대기 시간이 길어질 수 있다. 3D 젤 오브제 이미지처럼 고해상도 사진이 많은 페이지이므로, 이미지 포맷과 반응형 srcset 적용 여부를 점검하면 체감 로딩 속도를 개선할 수 있다. 접근성 측면에서는 초대형 타이포와 겹쳐지는 이미지 레이어의 대비, 그리고 SPA 라우팅 시 스크린리더에 포커스 이동이 전달되는지 확인이 필요하다.
자주 묻는 질문
엔코스(ANCORS)는 어떤 회사인가요?
하이드로겔·유화 제형을 전문으로 하는 화장품 ODM 기업으로, 스스로를 ‘Beauty Foundry’로 소개합니다. 사이트에 따르면 월 6,000만 개 생산 능력과 38개국 수출 이력, 300개 이상의 글로벌 브랜드와의 협업 실적을 보유합니다.
화장품 ODM 회사를 홈페이지만으로 검증할 수 있는 방법이 있나요?
특허번호나 실제 협업 브랜드명처럼 검증 가능한 사실이 명시돼 있는지 확인하는 것이 방법입니다. 엔코스는 특허 10-2687500, 10-2701236을 명시하고 코스알엑스·메디큐브 등 실명 브랜드를 로고로 노출해, 주장을 외부에서 확인할 수 있는 형태로 제시합니다.
자바스크립트로 렌더링되는 SPA 홈페이지도 검색엔진에 잘 노출되나요?
크롤러가 자바스크립트를 실행하지 못하면 초기 HTML만으로는 콘텐츠를 파악하기 어려울 수 있습니다. 다만 엔코스처럼 head에 정적 JSON-LD로 핵심 정보를 미리 넣어두면, 화면 렌더링과 무관하게 검색·AI 답변 엔진이 인용할 근거를 확보할 수 있습니다.
화장품 ODM·OEM 업체 홈페이지 제작에서 가장 중요한 것은 무엇인가요?
B2B 바이어가 신뢰할 수 있는 검증 가능한 사실(생산 능력, 수출 실적, 협업 브랜드, 특허)을 구조화된 형태로 제시하는 것이 중요합니다. 제작 범위와 비용은 다국어·SPA 여부에 따라 달라져 범위에 따라 상담이 필요합니다.
디지털 파트너 더블루캔버스
화장품 ODM·OEM처럼 B2B 바이어를 대상으로 하는 제조업 홈페이지는 일반 소비자용 사이트와 다른 과제를 안는다. 화려한 비주얼보다 검증 가능한 실적(생산 능력, 수출국, 특허, 협업 브랜드)을 얼마나 명확하게 구조화하느냐가 바이어의 첫 판단을 좌우한다. 동시에 SPA로 제작할 경우 검색엔진과 AI 답변 엔진에서 그 실적이 제대로 노출되는지도 함께 챙겨야 한다.
The Blue Canvas(더블루캔버스)는 제조업·B2B 홈페이지에서 신뢰 지표의 구조화와 검색 노출을 함께 설계한다. SPA로 제작하더라도 head에 어떤 구조화 데이터를 정적으로 심을지, 다국어 hreflang을 어떻게 연결할지를 정하는 작업이 이 과정의 핵심이다.
마무리와 다음 스텝
엔코스 사이트는 제형을 조형물처럼 보여주는 비주얼 화법과, SPA임에도 head에 풍부한 정적 JSON-LD를 심어둔 검색 설계가 인상적이다. 특허번호와 실명 브랜드 레퍼런스로 주장을 검증 가능하게 만든 점도 B2B 제조업 사이트로서 드문 완성도다.
실행 제안은 셋이다. 첫째, 화면에 보이는 문구와 JSON-LD 문구가 정확히 일치하는지 정기적으로 점검한다. 둘째, 다국어 하위 페이지(en, zh)에도 동일 수준의 구조화 데이터를 적용한다. 셋째, SPA 초기 로딩 지연을 줄이기 위해 서버사이드 렌더링이나 프리렌더링 도입을 검토한다. 지금의 콘텐츠 완성도라면, 렌더링 구조를 보강하는 것만으로 검색·AI 답변 노출이 한 단계 더 올라갈 수 있다.
