개요
엔코스 라이브러리(ANCORS LIBRARY)는 화장품 브랜드가 자기 색에 맞는 제형을 찾도록 돕는 B2B 제형 라이브러리다. 완제품을 파는 쇼핑몰이 아니라 세럼·토너·클렌저·마스크 같은 개발 제형을 카탈로그처럼 펼쳐 두고, 원하는 방향으로 제안받게 하는 ODM 성격의 서비스다. 이 성격은 첫 화면 헤드라인에서 곧바로 드러난다. “당신의 브랜드에 꼭 맞는 제형, 엔코스 라이브러리에서 만나보세요”라는 한 문장이 방문자가 소비자가 아니라 브랜드 기획자임을 못박는다. 이번 리뷰는 제형이라는 다소 전문적인 상품을 이 사이트가 어떤 시각 언어로 풀어냈는지, 그리고 문의와 구독으로 이어지는 B2B 리드 설계가 웹사이트 제작 관점에서 얼마나 정교한지를 화면에 보이는 근거만으로 짚는다.
브랜드 & 메시지
헤드라인은 굵은 국문 두 줄로 앉히고, 그 오른쪽에 황금빛 오일이 잔물결처럼 번지는 접사 사진을 붙였다. 원료의 질감을 설명 대신 감각으로 먼저 전달하려는 선택이다. 전체 톤은 아이보리 배경에 블랙 타이포로 절제돼, 딱딱한 실험실보다 뷰티 매거진 한 페이지에 가깝다. 상단에는 “ANCORS LIBRARY”가 가로로 반복되는 마퀴가 흐르고, 좌측 햄버거와 우측의 검색·계정·위시리스트·설정 아이콘이 헤더를 이룬다. 히어로 왼쪽 아래 원형 뱃지 “ANCORS · ALL PRODUCTS”는 화살표와 함께 회전하며 전체 제형 보기로 손짓한다. CTA의 흐름도 눈여겨볼 만하다. 히어로의 “만나보세요”에서 시작해 뉴스레터의 “카카오채널 추가하기”, 하단의 “제품 문의하기”로 이어지는데, 결제가 아니라 문의와 구독을 축으로 삼은 이 구조가 B2B 브랜드의 전환 목표와 정확히 맞물린다.
UX/UI 관점
화면에서 확인되는 디자인 강점은 뚜렷하다. 첫째, 제형을 신규 개발(NEXT INNOVATIONS)·글로벌 선호(GLOBAL ESSENTIALS)·인기 급상승(RISING TRENDS) 세 갈래로 나누고 영문과 국문을 나란히 붙였다. 브랜드 바이어가 ‘신상인가, 검증된 스테디셀러인가, 지금 뜨는가’로 사고하는 방식을 그대로 정보 구조로 옮긴 셈이다. 둘째, 세 섹션 내내 동일한 4열 카드 그리드를 유지하고 제품컷을 모두 같은 아이보리 배경에서 찍어, 서로 다른 제형들이 한 카탈로그의 식구처럼 묶인다. 셋째, 카드마다 제형명과 짧은 효능 한 줄(그림 버블 토너, 카밍 스무딩 밀크 클렌저 등)을 달아 스캔만으로 성격이 읽힌다. 넷째, 밝은 아이보리 카탈로그에서 블랙 인사이트 섹션(TRANCOS)으로, 다시 물을 끼얹는 인물·낙하하는 세럼 스플래시 이미지로 넘어가는 명암 리듬이 스크롤에 서사를 부여한다. 다섯째, TRANCOS라는 자체 뉴스레터를 네 종의 매거진 표지 목업으로 보여주고 “BEAUTY INSIGHT THAT COMES EVERY MONTH”라는 대형 카피로 구독을 설득해, 단발 거래가 아닌 관계형 리드 너처링을 UI에 심었다. 여기에 “BEAUTY, BEYOND THE FORMULA” 같은 대형 콘덴스드 영문 디스플레이가 브랜드 무드를 마지막으로 각인한다.
IA·SEO 전략
제형 카탈로그형 B2B 사이트에서 검색 성과를 만들려면, 지금의 카드 타일을 검색엔진이 읽을 수 있는 자산으로 승격시키는 일이 먼저다. 각 제형은 자바스크립트로만 그려지는 타일에 머물지 말고, 제형명·핵심 효능·대표 원료를 담은 고유 title과 고유 URL을 가진 개별 페이지로 확장할 값어치가 있다. 세 카테고리 역시 효능(브라이트닝·진정·안티에이징), 제형 타입(세럼·토너·클렌저·마스크), 원료로 필터되는 브라우징 페이지로 열어 두면 바이어의 실제 탐색 질의를 그대로 흡수한다. 이때 ItemList·Product 구조화 데이터를 붙이면 리치 결과 노출 가능성도 커진다. TRANCOS 뉴스레터는 강력한 SEO 자산 후보다. 매달 발행하는 트렌드·원료 인사이트를 웹 아티클 아카이브로 공개하면 ‘화장품 트렌드 원료’ 류 정보성 검색을 통한 오가닉 유입이 쌓인다. 마지막으로 화장품 ODM, OEM 제형 개발, 원료 소싱, 브랜드 제형 같은 B2B 인텐트 키워드를 title과 H1, 본문에 자연스럽게 배치해 검색 의도와 페이지 목적을 일치시켜야 한다.
성능·접근성
이 사이트는 오일 접사, 물방울 스플래시, 클렌징 중인 인물처럼 무게가 큰 이미지에 크게 기댄다. 그만큼 이미지 파이프라인이 체감 속도를 좌우한다. 원본은 보존하되 WebP·AVIF를 병행 제공하고 srcset으로 뷰포트별 크기를 내려보내며, 폴드 아래 제품 카드는 지연 로딩하는 편이 좋다. 반대로 히어로의 황금빛 오일 이미지는 즉시 로딩하되 width·height를 명시해 레이아웃이 밀리는 CLS를 예방해야 한다. 상단 마퀴와 회전 뱃지 같은 모션은 CSS transform 기반 GPU 합성으로 처리하고 prefers-reduced-motion을 존중해, 움직임에 민감한 사용자에게 정지 상태를 보장한다. 굵은 영문 디스플레이와 국문 본문이 섞인 만큼 웹폰트는 서브셋·프리로드·display:swap을 조합하고, 카카오 채널 위젯 같은 서드파티는 지연 초기화로 메인 스레드 점유를 낮춘다. 접근성 측면에서는 반복되는 “ANCORS LIBRARY” 마퀴의 장식용 복제분에 aria-hidden을 적용해 스크린리더가 브랜드명을 한 번만 읽게 하고, 아이보리 배경 위 연회색 제형 설명 텍스트의 명도 대비가 기준을 넘는지 점검할 필요가 있다.
디지털 파트너 더블루캔버스
화장품 ODM·원료·제형처럼 B2B 성격이 강한 브랜드일수록, 홈페이지는 카탈로그이자 첫 상담 창구가 된다. 엔코스 라이브러리가 보여주듯 제형을 어떻게 분류하고, 어떤 콘텐츠로 바이어를 붙잡으며, 문의까지 어떤 동선으로 밀어 넣느냐가 곧 리드의 질을 결정한다. The Blue Canvas(더블루캔버스)는 이 지점을 함께 설계하는 파트너다. 브랜드 무드에 맞는 웹디자인과 홈페이지 제작은 물론, 제형·제품 페이지를 검색에 노출시키는 SEO 검색엔진최적화, 문의 전환을 끌어올리는 UX/UI 개선, 그리고 뉴스레터·SNS·퍼포먼스 마케팅으로 이어지는 유입 설계까지 한 흐름으로 엮는다. 카탈로그를 매출로 바꾸는 웹사이트 제작을 고민한다면 아래에서 역량과 사례를 확인해 볼 만하다.
마무리와 다음 스텝
엔코스 라이브러리는 제형이라는 어려운 상품을 아이보리 매거진 언어로 감각화하고, 세 갈래 분류와 TRANCOS 뉴스레터로 B2B 리드 관계를 설계한 완성도 높은 사례다. 여기서 한 걸음 더 나아가려면 세 가지를 제안한다. 첫째, 제형 카드를 고유 URL·구조화 데이터를 갖춘 개별 페이지로 승격해 검색 유입의 착지점을 늘린다. 둘째, TRANCOS를 이미지 목업에 머물지 않게 실제 아티클 아카이브로 공개해 정보성 키워드 자산으로 키운다. 셋째, 무거운 이미지의 포맷·지연 로딩과 히어로 CLS를 손봐 첫인상 속도를 지킨다. 메시지는 이미 선명하니, 이 세 과제를 짧은 스프린트로 실행하면 브랜드 인상과 검색 가시성, 문의 전환이 함께 올라갈 것이다.