Beyond Visual Design. Built for Search & AI.

브랜드 웹사이트, 보기 좋게 만드는 것만으로 충분할까요?

많은 브랜드가 웹사이트를 구축할 때 디자인과 사용자 경험(UX)에 집중합니다.

특히 뷰티 브랜드의 경우 제품 이미지와 감각적인 비주얼을 활용해 브랜드 아이덴티티를 전달하는 것이 중요합니다.

하지만 아무리 아름다운 웹사이트라도 검색엔진과 AI가 그 안의 콘텐츠를 제대로 이해하지 못한다면 어떨까요?

콘센트릭스는 글로벌 헤어케어 브랜드 미장센(MISE-EN-SCÈNE) 의 International 브랜드 웹사이트를 Shopify 기반으로 구축했습니다. 이번 프로젝트는 브랜드의 비주얼 아이덴티티를 구현하는 동시에 SEO(Search Engine Optimization), GEO(Generative Engine Optimization), AI Agentic Browsing을 고려한 웹사이트 설계에 중점을 두었습니다.

특히 제품 상세페이지까지 직접 퍼블리싱하여, 이미지에 포함된 글자가 아닌 실제 HTML 텍스트(Real Text) 형태로 주요 콘텐츠를 제공하도록 구성했습니다. 그 결과 Chrome Lighthouse 측정에서 SEO 100점, 접근성 97점, 성능 90점, Agentic Browsing 4/4를 기록했습니다. 단순히 아름다운 브랜드 웹사이트를 넘어, 사람과 검색엔진, AI 모두가 이해하기 쉬운 디지털 환경을 구축한 사례입니다.

---

1. 프로젝트 소개

MISE-EN-SCÈNE International Shopify BrandWeb

이번 프로젝트는 글로벌 고객에게 미장센의 브랜드 스토리와 제품 정보를 효과적으로 전달하기 위해 Shopify를 BrandWeb 및 CMS 기반으로 활용한 글로벌 브랜드 웹사이트 구축 프로젝트입니다. 일반적인 D2C 커머스처럼 온라인 구매 전환을 최우선 목표로 하기보다는, 브랜드의 아이덴티티와 제품 특징을 글로벌 고객에게 전달하는 데 집중했습니다. 또한 브랜드 웹사이트의 역할이 기존 검색 중심에서 생성형 AI 기반 정보 탐색으로 확장되고 있다는 점을 고려하여, 초기 퍼블리싱 단계부터 SEO와 GEO를 함께 고려했습니다.

프로젝트 개요

항목	내용
프로젝트명	미장센 International Shopify BrandWeb 구축
고객사	아모레퍼시픽 (AMOREPACIFIC)
브랜드	MISE-EN-SCÈNE (미장센)
플랫폼	Shopify
사이트 유형	Global Brand Website
대상	International / Global
주요 구축 영역	브랜드 콘텐츠, 제품 정보, 상세페이지 퍼블리싱
기술적 차별화	SEO, GEO, Semantic HTML, Real Text Publishing, Agentic Browsing
공식 사이트	https://int.miseenscene.com/

---

2. 구축 배경

검색엔진을 넘어, AI가 브랜드를 이해하는 시대

검색 환경이 빠르게 변화하고 있습니다. 기존에는 사용자가 Google과 같은 검색엔진에서 제품을 검색하고 브랜드 웹사이트를 방문하는 방식이 일반적이었습니다. 하지만 최근에는 ChatGPT, Gemini 등 생성형 AI를 활용해 제품 정보를 확인하고 브랜드를 비교하는 방식도 확대되고 있습니다. 예를 들어 사용자가 AI에 다음과 같이 질문할 수 있습니다.

1) "손상된 모발에 적합한 한국 헤어 세럼을 추천해 줘."

2) "미장센 퍼펙트 세럼에는 어떤 특징이 있어?"

3) "미장센 제품의 주요 성분과 사용 방법을 알려줘."

이러한 환경에서는 브랜드 웹사이트가 정보를 얼마나 명확하게 제공하는지가 중요해집니다.

AI가 참고할 수 있는 정보를 웹사이트에 얼마나 구조적으로 제공하고 있는가?

이 질문이 이번 프로젝트의 주요 설계 방향 중 하나였습니다. 콘센트릭스는 미장센 브랜드 웹사이트를 구축하면서 시각적인 완성도뿐만 아니라 검색엔진의 콘텐츠 수집과 생성형 AI의 정보 이해 가능성까지 고려했습니다.

---

3. 핵심 구축 영역

① Real Text Publishing | 이미지가 아닌 실제 텍스트로 구축한 상세페이지

Looks Like an Image. Works Like Real Text.

이번 미장센 프로젝트에서 가장 강조하고 싶은 기술적 차별화 요소는 제품 상세페이지의 퍼블리싱 방식입니다.

일반적인 브랜드 웹사이트에서는 디자인 완성도를 유지하기 위해 상세페이지 전체를 하나의 긴 이미지로 제작하는 방식을 사용하기도 합니다.

이 방식은 디자인을 그대로 표현하기에는 편리하지만, 중요한 한계가 있습니다. 이미지 안에 포함된 글자는 HTML 문서의 실제 텍스트와 다르기 때문에 검색엔진이 해당 콘텐츠를 구조적으로 이해하고 활용하는 데 제약이 발생할 수 있습니다.

콘센트릭스는 이러한 한계를 고려하여 주요 상세페이지 콘텐츠를 실제 HTML 텍스트로 구현하는 퍼블리싱 방식을 적용했습니다. 제품 이미지와 배경, 비주얼 요소를 활용하면서도 제품의 주요 특징과 설명, 성분 및 사용법 등의 정보를 가능한 한 Real Text 형태로 구성했습니다. 이를 통해 브랜드의 시각적인 완성도를 유지하면서도 검색엔진이 콘텐츠를 보다 명확하게 수집하고 이해할 수 있는 구조를 마련했습니다.

직접 확인해 보세요! 실제 미장센 제품 상세페이지를 방문해 보면 이러한 차이를 확인할 수 있습니다.

제품 상세페이지의 'POINT 6', 'Floral Musk scent' 등 주요 설명 영역에 마우스를 올리고 텍스트를 드래그해 보세요.

이미지처럼 디자인된 콘텐츠임에도 글자가 실제로 선택되는 것을 확인할 수 있습니다. 이는 해당 텍스트가 단순히 이미지 안에 합쳐진 글자가 아니라, 브라우저에서 인식할 수 있는 실제 텍스트로 구현되었기 때문입니다.

눈으로 보기에는 하나의 완성된 디자인이지만, 기술적으로는 검색엔진이 읽을 수 있는 콘텐츠인 것입니다.

이것이 이번 미장센 프로젝트에서 콘센트릭스가 적용한 퍼블리싱 방식의 핵심입니다.

② SEO & GEO | 검색엔진과 생성형 AI를 함께 고려한 콘텐츠 구조

From SEO to GEO. SEO(Search Engine Optimization)는 검색엔진이 웹사이트의 콘텐츠를 수집하고 이해할 수 있도록 최적화하는 과정입니다. GEO(Generative Engine Optimization)는 생성형 AI 기반 검색 환경에서 브랜드와 콘텐츠가 발견되고 이해될 수 있도록 고려하는 최적화 접근 방식입니다. 이번 프로젝트에서는 SEO의 기본 원칙을 충실히 적용하면서, 생성형 AI가 활용할 수 있는 콘텐츠 구조도 함께 고려했습니다. 

대표적으로 다음과 같은 요소들을 중요하게 다루었습니다.

1) Semantic HTML 기반 퍼블리싱

- 웹페이지의 각 요소가 가진 의미와 역할을 명확히 전달하도록 시맨틱 태그를 고려한 구조를 적용했습니다.

2) Real Text 기반 제품 상세페이지

- 제품의 특징, 성분, 사용법 등 주요 설명을 실제 HTML 텍스트로 제공하여 검색엔진이 콘텐츠를 직접 읽을 수 있도록 구성했습니다.

3) 명확한 콘텐츠 계층 구조

- 제품명과 주요 설명, 세부 정보를 구분하여 방문자와 검색엔진이 콘텐츠의 흐름을 이해하기 쉽도록 구성했습니다.

4) 브랜드 콘텐츠와 제품 정보의 연결

- 브랜드 스토리, 제품 카테고리, 개별 제품 상세페이지를 연결하여 관련 콘텐츠를 자연스럽게 탐색할 수 있도록 구성했습니다.

이러한 접근은 단순히 특정 키워드를 반복하거나 검색 순위를 높이기 위한 기술이 아닙니다.

브랜드가 제공하는 정보를 검색엔진과 AI 시스템이 이해하기 쉬운 형태로 전달하는 것이 목적입니다.

특히 생성형 AI 검색 환경에서는 신뢰할 수 있는 정보와 명확한 기술적 구조가 중요해지고 있습니다. 콘센트릭스는 이러한 변화를 고려하여 미장센 브랜드 웹사이트 구축 초기 단계부터 SEO와 GEO를 함께 검토했습니다.  그 결과, Google Lighthouse SEO 평가에서 100점 만점을 달성했습니다. 단순히 디자인을 구현하는 것을 넘어, 검색엔진과 AI가 콘텐츠를 효과적으로 인식하고 이해할 수 있도록 기술적 기반까지 고려한 구축 성과입니다.

③ Agentic Browsing | AI 에이전트의 웹사이트 탐색을 고려한 설계

Built for Humans. Ready for AI Agents.

웹사이트를 탐색하는 주체도 변화하고 있습니다. 앞으로는 사용자가 직접 웹사이트의 모든 메뉴를 확인하는 것뿐 아니라 AI 에이전트가 사용자를 대신해 필요한 정보를 탐색하는 경험도 확대될 것으로 예상됩니다.

예를 들어 AI 에이전트는 브랜드 사이트에서 제품 정보를 확인하거나, 서로 다른 제품의 특징을 비교하고, 사용자가 원하는 정보를 찾아 제공할 수 있습니다. 이러한 환경에서는 AI가 웹사이트의 탐색 구조와 콘텐츠를 이해할 수 있도록 설계하는 것이 중요합니다. 이번 미장센 프로젝트에서는 웹 표준과 접근성, 의미 있는 콘텐츠 구조 등을 고려하여 AI 에이전트의 탐색 환경에도 대응할 수 있도록 개발했습니다.

특히 Chrome Lighthouse의 Agentic Browsing 항목에서 4/4를 기록하며 측정 대상 점검 항목을 모두 통과했습니다.

이는 향후 AI 기반 웹 탐색 환경을 고려한 설계 방향을 보여주는 의미 있는 결과입니다.

④ Brand Experience | 글로벌 고객을 위한 브랜드 경험

미장센은 헤어케어 제품과 스타일링을 중심으로 브랜드의 정체성을 전달하는 글로벌 뷰티 브랜드입니다. 이번 프로젝트에서는 미장센 특유의 감각적인 비주얼과 제품 콘텐츠를 효과적으로 구현하는 데 집중했습니다.

글로벌 고객이 브랜드의 철학을 이해하고, 제품 카테고리를 탐색하며, 각 제품의 특징을 확인할 수 있도록 주요 페이지를 구성했습니다. 특히 브랜드 스토리부터 Best Seller, 제품 카테고리, 상세페이지까지 자연스럽게 연결되는 정보 탐색 경험을 고려했습니다. Shopify를 브랜드 콘텐츠 관리 플랫폼으로 활용하여 제품과 브랜드 정보를 관리할 수 있는 기반도 마련했습니다.

---

4. Chrome Lighthouse 측정 결과

SEO 100점, 웹 접근성 97점, 성능 90점

이번 미장센 브랜드 웹사이트는 Chrome Lighthouse를 통해 주요 웹 품질 항목을 점검했습니다.

Lighthouse는 웹사이트의 성능, 접근성, 개발 모범 사례, SEO 등을 평가하는 도구입니다.

실제 측정 결과는 다음과 같습니다.

평가 항목	측정 결과
SEO	100 / 100
Accessibility	97 / 100
Performance	90 / 100
Best Practices	69 / 100
Agentic Browsing	4 / 4

SEO 100점

- 검색엔진 최적화와 관련된 Lighthouse 점검 항목에서 만점을 기록했습니다.

Accessibility 97점

- 웹사이트의 콘텐츠 접근성과 사용자 경험 관련 자동화 점검에서 높은 점수를 기록했습니다.

Performance 90점

- 웹페이지 로딩 및 사용자 경험 관련 성능 지표에서도 90점을 기록했습니다.

Agentic Browsing 4/4

- AI 에이전트의 웹사이트 탐색 준비 상태와 관련된 측정 항목에서 4개 항목을 모두 통과했습니다.

이번 결과에서 특히 주목할 부분은 검색엔진 최적화와 웹 접근성을 함께 고려했다는 점입니다. 제품 상세페이지를 Real Text 기반으로 퍼블리싱하고, 콘텐츠의 의미와 구조를 명확하게 전달하려는 개발 방식은 이러한 기술적 품질을 확보하기 위한 중요한 접근이었습니다.

다만 Lighthouse 측정값은 진단 시점과 환경에 따라 달라질 수 있습니다. 또한 Best Practices 항목은 추가 개선이 필요한 영역으로 확인되었으며, 높은 SEO 점수나 Agentic Browsing 점수가 실제 AI 검색 노출 또는 모든 AI 에이전트와의 호환성을 보장하는 것은 아닙니다.

---

5. 프로젝트 핵심 성과

Beyond Design. Searchable, Readable, AI-Ready.

이번 미장센 International 브랜드 웹사이트 구축 프로젝트의 핵심 성과는 단순히 글로벌 브랜드 웹사이트를 구축했다는 데 있지 않습니다. 브랜드의 시각적 완성도를 유지하면서 검색엔진과 AI가 콘텐츠를 이해하기 쉬운 구조를 함께 구현했다는 점이 중요합니다.

핵심 영역	프로젝트 성과
Global BrandWeb	미장센 International 공식 브랜드 웹사이트 구축
Shopify CMS	브랜드 및 제품 콘텐츠 관리 기반 구축
Real Text Publishing	주요 상세페이지 콘텐츠를 HTML 텍스트로 구현
SEO	Lighthouse 100점
GEO	생성형 AI 검색 환경을 고려한 콘텐츠 구조 설계
Accessibility	Lighthouse 97점
Performance	Lighthouse 90점
Agentic Browsing	Lighthouse 4/4 통과

특히 이번 프로젝트를 통해 강조하고 싶은 메시지는 명확합니다.

브랜드 웹사이트는 아름답게 보여야 합니다. 하지만 그 안의 정보 역시 검색엔진과 AI가 이해할 수 있어야 합니다.

콘센트릭스는 이러한 관점에서 디자인과 기술적 품질을 함께 고려한 웹사이트 구축 방식을 적용했습니다.

---

6. 콘센트릭스의 Shopify 구축 역량

From Brand Experience to AI-Ready Web

콘센트릭스는 아모레퍼시픽의 설화수, 이니스프리, 한율 등 다양한 글로벌 뷰티 브랜드를 대상으로 Shopify 기반 웹사이트 구축 프로젝트를 수행해 왔습니다. 각 브랜드의 목적에 따라 커머스 기능 중심의 D2C 사이트부터 브랜드 콘텐츠 중심의 BrandWeb까지 다양한 디지털 환경을 구현하고 있습니다. 이번 미장센 프로젝트에서는 Shopify를 브랜드 웹사이트 구축 플랫폼으로 활용하면서, 기존의 디자인 및 콘텐츠 구현 역량에 SEO·GEO를 고려한 기술적 퍼블리싱 방식을 더했습니다.

특히 Real Text 기반 상세페이지 구현은 브랜드의 비주얼 아이덴티티를 유지하면서도 검색엔진이 콘텐츠를 수집하고 이해하기 쉽도록 설계했다는 점에서 의미가 있습니다. 콘센트릭스는 앞으로도 사용자 경험뿐 아니라 검색엔진과 AI가 브랜드 정보를 발견하고 이해하는 과정까지 고려한 디지털 플랫폼 구축을 지원하겠습니다.

---

7. 마무리

Beautiful to See. Structured to Be Found. 좋은 브랜드 웹사이트란 무엇일까요?

감각적인 디자인과 직관적인 사용자 경험도 중요하지만, 이제는 검색엔진과 AI가 브랜드의 콘텐츠를 어떻게 이해하는지도 함께 고려해야 합니다. 이번 미장센 International Shopify BrandWeb 프로젝트는 이러한 변화에 대응한 구축 사례입니다. SEO 100점. 접근성 97점. 성능 90점. Agentic Browsing 4/4.

그리고 그 기반에는 실제 텍스트를 활용한 상세페이지 퍼블리싱과 SEO·GEO를 고려한 콘텐츠 구조 설계가 있었습니다.

사람에게는 아름다운 브랜드 경험을, 검색엔진과 AI에는 이해하기 쉬운 콘텐츠를. 콘센트릭스는 앞으로도 변화하는 디지털 환경을 고려하여 브랜드의 가치를 효과적으로 전달할 수 있는 웹사이트를 구축하겠습니다.

미장센 International 공식 웹사이트: https://int.miseenscene.com/

Shopify 브랜드 웹사이트 구축 문의: https://cnxk.shop/