목차
- 구글봇의 세 가지 단계 여정
- 서버 사이드 렌더링 (SSR) 또는 프리 렌더링
- 동적 렌더링 구현하기
- 렌더링 경로 최적화하기
- 폴리필 및 차별적 제공 사용하기
- 의미 있는 HTTP 상태 코드
- 소프트 404 오류 피하기
- 정규 태그의 올바른 사용
- 로봇 메타 태그의 효과적인 사용
- 제목과 메타 설명 향상시키기
소개
자바스크립트 기술을 활용하여 놀랍고 인터랙티브한 웹사이트를 개발하는 데 수많은 시간을 투자했지만, 검색 엔진이 귀하의 콘텐츠를 효과적으로 색인할 수 없다는 사실을 발견한다고 상상해 보십시오. 자바스크립트가 웹 경험을 동적으로 만들어주지만 SEO(검색 엔진 최적화)에는 도전 과제를 도입하여 콘텐츠의 발견 및 순위에 방해가 될 수 있습니다. 웹사이트가 그 잠재력을 최대한 발휘할 수 있도록 자바스크립트 콘텐츠가 검색 가능하도록 보장하는 방법을 이해하는 것은 필수적입니다.
자바스크립트는 웹사이트 구축 방식을 혁신적으로 변화시켜 더 인터랙티브하고 매력적인 웹 환경을 제공합니다. 그러나 이러한 유연성은 비용을 수반하는 데, 검색 엔진이 자바스크립트를 처리하여 콘텐츠를 이해해야 하는데, 이는 자원 집약적이며 때때로 문제가 될 수 있습니다. 따라서 자바스크립트 콘텐츠가 검색 가능하도록 보장하는 것은 귀하의 사이트 가시성을 유지하고 더 넓은 청중이 귀하의 상품에 접근할 수 있도록 하는 중요한 단계입니다.
이 블로그에서는 자바스크립트 콘텐츠가 검색 엔진에 접근 가능하도록 보장하는 미로를 안내할 것입니다. 관련 프로세스를 공개하고 실행 가능한 전략을 탐색하며, 검색 엔진 가시성을 최적화하기 위한 모범 사례를 강조할 것입니다. 이 게시물이 끝나면 귀하는 자바스크립트 기반 웹사이트의 SEO를 향상시킬 수 있는 실용적인 통찰력과 실행 가능한 단계를 갖추게 될 것입니다. 함께 들어가 봅시다!
자바스크립트 SEO 기초 이해하기
자바스크립트는 동적이고 매력적인 웹 경험을 창출할 무한한 가능성을 제공합니다. 그러나 SEO에서는 고유한 도전 과제를 제시합니다. 자바스크립트에 의존하는 웹 애플리케이션을 검색 가능하게 만드는 것은 구글과 같은 검색 엔진을 통해 사용자를 유치하고 유지하는 데 필수적입니다. 구글봇과의 자바스크립트 상호작용을 이해하는 것이 자바스크립트 콘텐츠를 검색 가능하게 만드는 첫 번째 단계입니다.
구글봇의 세 가지 단계 여정
-
크롤링: 구글봇은 페이지를 가져옵니다. 처음으로 robots.txt 파일을 읽어 페이지를 크롤링할 수 있는지 확인합니다. 허용되면 진행합니다. robots.txt를 통해 중요한 자바스크립트 파일을 차단하면 구글이 콘텐츠를 렌더링하고 색인하는 것을 방해할 수 있습니다.
-
렌더링 대기 중: 초기 크롤 후 페이지는 렌더링을 위해 대기열에 배치됩니다. 이 단계는 구글의 자원에 따라 몇 초에서 더 길어질 수 있습니다.
-
렌더링 및 색인화: 크로미움의 최신 버전으로 렌더링되면 구글봇은 자바스크립트를 실행하고 HTML을 구문 분석하여 렌더링된 콘텐츠에서 URL을 추가적인 크롤링을 위해 대기열에 넣어 모든 동적 콘텐츠가 적절히 가시화되고 색인되도록 보장합니다.
이해는 자바스크립트를 검색 가시성을 위해 최적화하는 기초를 형성합니다.
검색 가능성을 보장하기 위한 팁과 모범 사례
서버 사이드 렌더링 (SSR) 또는 프리 렌더링
이 옵션들은 검색 엔진이 콘텐츠를 보다 효율적으로 크롤링할 수 있도록 해줍니다. 콘텐츠가 클라이언트에 도달하기 전에 서버 사이드에서 렌더링됩니다. 서버 사이드 렌더링은 검색 엔진이 완전히 렌더링된 HTML 파일을 받도록 보장하여 크롤링 및 색인을 쉽게 만듭니다. Next.js와 같은 인기 프레임워크는 서버 사이드 렌더링을 활용하여 SEO를 향상시킵니다.
동적 렌더링 구현하기
클라이언트 사이드에 남아 있어야 하는 사이트의 경우, 동적 렌더링이 대안이 됩니다. 이는 크롤러에게 정적 HTML 버전을 제공하면서 사용자는 동적 경험을 제공하는 것을 포함합니다. 구글은 클라이언트 사이드 렌더링을 지원하지만 자바스크립트에 많이 의존하면 렌더링이 지연되어 검색 가능성에 영향을 미칠 수 있습니다. FlyRank의 AI 기반 콘텐츠 엔진은 렌더링 전략을 효율적으로 보완할 수 있는 최적화된 콘텐츠를 생성하는 데 도움을 줄 수 있습니다. 우리의 콘텐츠 기능에 대해 더 알아보려면 여기를 클릭하십시오.
렌더링 경로 최적화하기
웹사이트 초기 HTML이 가시적이고 접근 가능한 콘텐츠를 신속하게 인식할 수 있도록 하십시오. 이는 간소화된 렌더링 전략을 채택하고 검색 엔진에 중요한 리소스를 쉽게 접근할 수 있도록 함으로써 달성됩니다. 중요 구성 요소에 대한 클라이언트 사이드 자바스크립트를 최소화하는 것과 같은 작업은 렌더링 시간을 단축시켜 콘텐츠가 봇에 더 접근 가능하게 만듭니다.
폴리필 및 차별적 제공 사용하기
JS 프레임워크는 빠르게 발전하고 있지만 모든 기능이 구글에 의해 충분히 렌더링되지는 않습니다. 폴리필을 통합하는 것은 다양한 브라우저 환경에서 기능이 작동하도록 보장합니다. 차별적 제공은 특정 브라우저에 기능을 맞춤 제공하여 검색 가능성에 영향을 미치지 않으면서 최적의 프레젠테이션과 기능성을 보장합니다.
의미 있는 HTTP 상태 코드
구글봇의 색인화 작업을 안내하기 위해 명확한 HTTP 상태 코드를 제공하십시오. 존재하지 않는 페이지에 대하여 404 오류를 활용하거나 이동된 콘텐츠에 대하여 301 리디렉션을 사용하는 것은 사이트 전반에 걸쳐 원활한 탐색과 색인을 보장합니다.
소프트 404 오류 피하기
싱글 페이지 애플리케이션(SPA)에서는 보기 간의 탐색을 위해 조각 대신 History API를 사용하여 소프트 404와 같은 함정을 피하고 URL이 검색 엔진이 색인할 수 있도록 접근 가능하고 명확하게 유지되도록 하십시오.
정규 태그의 올바른 사용
검색 엔진이 색인을 위한 적절한 URL을 식별할 수 있도록 정규 태그가 올바르게 구성되었는지 확인하십시오. 자바스크립트가 이러한 태그를 주입할 수 있지만 가능한 한 서버 사이드 방법론을 사용하는 것이 이상적입니다. 이를 통해 클라이언트 레벨에서 구성 문제를 피할 수 있습니다.
로봇 메타 태그의 효과적인 사용
중요한 페이지를 우연히 차단하지 않도록 색인 제어를 위해 로봇 메타 태그를 신중하게 사용하십시오. 적절한 자바스크립트 주입 기술은 동적 콘텐츠가 검색 엔진에 대해 접근 가능하면서도 가시성을 관리할 수 있도록 보장합니다.
제목과 메타 설명 향상시키기
자바스크립트는 페이지의 맥락에 맞는 메타 설명과 제목을 동적으로 생성할 수 있습니다. 독특하고 설명적인
및 메타 설명은 사용자와 검색 엔진이 귀하의 콘텐츠를 더 잘 해석할 수 있도록 도와줍니다.</p>
<h2>실제 사례 및 사례 연구</h2>
<p>이러한 원칙의 성공적인 적용을 보여주는 FlyRank는 여러 기업과의 협력을 통해 SEO 성과에서 놀라운 향상을 이끌어냈습니다.</p>
<ul>
<li><p>HulkApps 사례 연구에서는 FlyRank가 렌더링 최적화 및 구조적 콘텐츠 구현과 같은 전략을 통해 유기적 트래픽을 10배 증가시키는 데 도움을 주었습니다. <a href="https://flyrank.com/blogs/case-studies/hulkapps">여기</a>에서 자세히 알아보십시오.</p>
</li>
<li><p>마찬가지로 Releasit의 경우 FlyRank는 웹 존재감을 개선하고 참여 및 가시성을 크게 향상시켰습니다. <a href="https://flyrank.com/blogs/case-studies/releasit">여기</a>를 클릭하여 더 알아보십시오.</p>
</li>
</ul>
<p>이러한 예시는 자바스크립트 콘텐츠 가시성을 관리하기 위한 최첨단 기술을 사용하는 효과를 강조하며, 그 결과 색인화 및 성능이 개선됩니다.</p>
<h2>접근성의 역할</h2>
<p>웹사이트는 모든 사용자가 탐색하고 사용할 수 있어야 하며, 자바스크립트를 실행하지 않는 브라우저를 사용하는 사용자도 포함되어야 합니다. 필수 콘텐츠가 자바스크립트에 대한 중대한 의존 없이 제공되도록 하십시오. 도구를 사용하거나 텍스트 모드에서 렌더링을 보기 위한 테스트는 콘텐츠가 예상대로 나타나는지 확인하는 실용적인 전략입니다.</p>
<h2>결론</h2>
<p>자바스크립트 콘텐츠의 검색 가능성은 웹사이트가 검색 순위에서 성공하는 데 중요한 요소입니다. 렌더링 기술 및 SEO 원칙의 전략적 사용이 중요한 역할을 차지하지만, SEO의 진화하는 본질에 계속 적응하는 것이 똑같이 중요합니다.</p>
<p>핵심 자바스크립트 상호작용을 이해하고 서버 사이드 렌더링 또는 의미 있는 메타 구현과 같은 검증된 SEO 관행을 적용함으로써 귀하의 사이트는 지속적으로 가시성을 유지하고 관련성을 높이며 경쟁력을 갖출 수 있습니다. FlyRank의 데이터 기반 전략을 활용하면 <a href="https://flyrank.com/pages/our-approach">우리의 접근 방식을</a> 통해 사이트의 디지털 발판을 효과적으로 강화하고 동적 콘텐츠가 보다 넓고 참여하는 청중에게 도달할 수 있도록 보장합니다.</p>
<p>웹 애플리케이션의 SEO를 더욱 정교화하려면 FlyRank의 지역화 콘텐츠 제공을 활용하여 <a href="https://flyrank.com/pages/localization">지역화 서비스</a>를 통해 자연스럽게 국제 시장에 진입하고 지속할 수 있습니다.</p>
<h2>자주 묻는 질문 (FAQ)</h2>
<p><strong>질문 1: 메타 태그를 설정하는 데 자바스크립트를 사용할 수 있나요? 예를 들어 설명이나 정규 URL과 같은 항목 말입니다.</strong><br>네, 자바스크립트를 사용하여 정규 URL과 설명을 포함한 메타 태그를 동적으로 설정할 수 있습니다. 그러나 강력한 SEO를 위해 가능한 경우 서버 측에 배치하는 것을 고려하십시오. 일부 검색 엔진은 자바스크립트를 충분히 실행하지 않을 수 있습니다.</p>
<p><strong>질문 2: 서버 사이드 렌더링(SSR)이 자바스크립트 중심 웹사이트의 SEO를 어떻게 향상시킵니까?</strong><br>서버 사이드 렌더링(SSR)은 검색 엔진 봇에 미리 렌더링된 HTML 페이지를 제공하여 추가 자바스크립트를 실행하지 않고 콘텐츠에 직접 액세스할 수 있게 함으로써 크롤링 및 색인화 과정을 단순화합니다.</p>
<p><strong>질문 3: 이전 브라우저 호환성을 위해 자바스크립트 기능을 테스트해야 하나요?</strong><br>예, 폴리필을 사용하여 자바스크립트 기능이 기본 지원이 없는 오래된 브라우저에서도 올바르게 작동하도록 보장하여 사용자 경험 및 SEO의 검색 가능성을 향상시킵니다.</p>
<p><strong>질문 4: FlyRank는 글로벌 콘텐츠 도달 범위를 어떻게 향상시킬 수 있나요?</strong><br>FlyRank의 <a href="https://flyrank.com/pages/localization">지역화 서비스</a>는 다양한 언어와 문화에 맞게 귀하의 사이트를 조정하여 국제 청중을 위한 최적화된 전달 및 맥락 관련성을 보장하여 도달 범위와 참여를 확장합니다.</p>
<p>FlyRank가 제공하는 선도적인 SEO 전략과 함께 지속적으로 발전하는 것은 현재의 기준 준수 및 검색 엔진 기술의 향후 발전 준비를 보장합니다.</p>
</div>
<div class="lg:w-1/3 text-gray mt-16 sticky top-[112px] lg:h-screen">
<div class="bg-white text-center p-5 rounded-lg mb-8">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/envelope-icon.svg?v=1732181353"
alt="Envelope Icon"
class="mx-auto"
>
<div class="text-dark font-extrabold mb-5 uppercase text-xl">Enjoy content like this?</div>
<div class="text-dark text-xl mb-3">Join our newsletter and 20,000 enthusiasts</div>
<div class="sidebar-newsletter opacity-0 transition-opacity duration-500 h-[129px]">
<div id="shopify-block-AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ" class="shopify-block shopify-app-block"><div
id='AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ'
data-form-root='true'
data-forms-id='forms-root-254557'
data-forms-text-color='#0f1217'
data-forms-button-background-color='#0f1217'
data-forms-button-label-color='#ffffff'
data-forms-links-color='#1878b9'
data-forms-errors-color='#e02229'
data-forms-text-alignment='center'
data-forms-alignment='center'
data-forms-padding-top='5'
data-forms-padding-right='0'
data-forms-padding-bottom='0'
data-forms-padding-left='0'
></div>
<script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div>
</div>
</div>
<div class="bg-dark-800 text-center p-5 rounded-lg">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/download-icon.svg?v=1732109891"
alt="Download Icon"
class="mx-auto mb-3"
>
<div class="text-xl mb-8">
<span class="font-bold">DOWNLOAD FREE</span><br>
BACKLINK DIRECTORY
</div>
<a
href="/cart/41940050214979:1?checkout&attributes[first_visit]=%2Fko%2Fblogs%2Fseo-hub%2Fhow-to-ensure-javascript-content-is-crawlable"
class="btn btn-green w-full"
>
Download
</a>
</div>
</div>
</div>
</div>
</div>
<style>
table tr:first-child {
background-color: #86628d;
}
table th:first-child,
table td:first-child {
font-weight: bold;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
</style>
</section><div id="shopify-section-template--16867507732547__demo_promo_K9myJY" class="shopify-section demo"><div class=" px-6 md:px-8 py-12 lg:py-32 bg-green">
<div class="container text-dark text-center">
<div class="w-full md:w-8/12 mx-auto">
<h2 class="mb-8 text-4xl sm:text-5xl">브랜드를 새로운 차원으로 끌어올리자</h2>
<div class="mb-5"><p>소음을 뚫고 온라인에서 지속적인 영향을 미칠 준비가 되었다면, FlyRank와 힘을 합칠 시간입니다. 오늘 저희에게 연락주시면, 귀사의 브랜드를 디지털 지배의 길로 안내해 드리겠습니다.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/ko/pages/%EC%97%B0%EB%9D%BD%EC%B2%98">
데모 요청
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="shopify-section-footer" class="shopify-section footer"><div class="footer-container px-6 md:px-8 py-16 md:py-24 overflow-hidden relative">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/footer-background.png?v=1730813000"
alt="Image Background"
class="object-contain absolute w-full z-0 bottom-0 2xl:bottom-auto 2xl:top-1/3"
>
<div class="container flex flex-col-reverse md:flex-row z-10 relative flex-wrap">
<div class="w-full md:w-1/2 text-gray mt-16 md:mt-0">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/flyrank-logo-large.svg?v=1730983842"
alt="logo"
>
</div>
<div class="w-full md:w-2/3 my-12"><p>온라인에서 소음을 뚫고 지속적인 영향을 미치고자 한다면, FlyRank와 힘을 합칠 시간입니다.</p></div>
<div class="flex">
<a
href="https://x.com/flyrank_ai"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-twitter.svg?v=1729166778"
alt="twitter"
></a>
<a
href="https://www.facebook.com/people/FlyRank/61566930002846/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-facebook.svg?v=1729166777"
alt="facebook"
></a>
<a
href="https://www.instagram.com/flyrank.ai/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-instagram.svg?v=1729166777"
alt="instagram"
></a>
</div>
</div>
<div class="w-full md:w-1/2 grid gap-4 grid-cols-2 sm:grid-cols-3">
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">회사</div>
<ul>
<li class="mb-3">
<a href="/ko/pages/%EC%95%BD" class="text-gray-50 capitalize">
저희에 대해
</a>
</li>
<li class="mb-3">
<a href="/ko/pages/%EC%9A%B0%EB%A6%AC%EC%9D%98-%EC%A0%91%EA%B7%BC-%EB%B0%A9%EC%8B%9D-1" class="text-gray-50 capitalize">
우리의 접근 방식
</a>
</li>
<li class="mb-3">
<a href="/ko/pages/%EC%B6%94%EC%B2%9C" class="text-gray-50 capitalize">
추천
</a>
</li>
<li class="mb-3">
<a href="https://www.flyrank.com/pages/contact?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
연락하다
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">탐색</div>
<ul>
<li class="mb-3">
<a href="/ko/pages/%EC%BD%98%ED%85%90%EC%B8%A0" class="text-gray-50 capitalize">
기사
</a>
</li>
<li class="mb-3">
<a href="/ko/blogs/%EC%82%AC%EB%A1%80-%EC%97%B0%EA%B5%AC" class="text-gray-50 capitalize">
사례 연구
</a>
</li>
<li class="mb-3">
<a href="/ko/pages/%EA%B0%80%EA%B2%A9" class="text-gray-50 capitalize">
가격
</a>
</li>
<li class="mb-3">
<a href="/ko/pages/%EC%9E%90%EC%A3%BC-%EB%AC%BB%EB%8A%94-%EC%A7%88%EB%AC%B8" class="text-gray-50 capitalize">
자주 묻는 질문들
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">법률</div>
<ul>
<li class="mb-3">
<a href="/ko/policies/terms-of-service" class="text-gray-50 capitalize">
서비스 약관
</a>
</li>
<li class="mb-3">
<a href="/ko/policies/privacy-policy" class="text-gray-50 capitalize">
개인정보 처리방침
</a>
</li>
<li class="mb-3">
<a href="/ko/policies/refund-policy" class="text-gray-50 capitalize">
환불 보장
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
데모 요청
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="text-gray w-full mt-24 text-sm">© 2025 FlyRank - All Rights Reserved</div>
</div>
</div>
</footer>
<div
class="minicart-wrapper"
x-data
x-show="$store.global.isMinicartVisible"
x-on:click.outside="$store.global.isMinicartVisible = false"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="off-screen-right"
x-transition:enter-end="right-50"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="right-50"
x-transition:leave-end="off-screen-right"
x-cloak
:aria-hidden="$store.global.isMinicartVisible ? 'false' : 'true'"
aria-modal="true"
role="dialog"
>
<div id="shopify-section-minicart" class="shopify-section"><div
class="minicart"
data-ajax-cart-section
x-cloak>
<div class="title-row">
<h2 id="minicart-label" class="text-cloud-burst-500">
Cart
</h2>
<button @click="$store.global.isMinicartVisible = false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<div class="item-count-message">
You have
<span
class="count"
style="font-weight: 600"
x-data>0
</span>
<span x-data></span>
in your cart!
</div>
<hr/>
<ul class="items-list" data-ajax-cart-section-scroll>
</ul>
<hr/>
<div class="subtotal">
<p class="title">Subtotal
</p>
<p class="amount">$0.00
</p>
</div>
<a class="view-cart-details-link" href="/ko/cart">
View Cart Details
</a>
</div>
<style>
/* Animation classes */
.transition {
transition-property: all;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in {
transition-timing-function: ease-in;
}
.off-screen-right {
right: -100px;
transform: translateX(120%);
}
.right-50 {
right: 50px;
transform: translateX(0%);
}
@media(max-width: 576px) {
.right-50 {
right: 20px;
transform: translateX(0%);
}
}
/* Main styles */
.minicart-wrapper {
position: fixed;
top: 50px;
right: 50px;
z-index: 100;
}
@media(max-width: 576px) {
.minicart-wrapper {
right: 20px;
}
}
.minicart {
width: 288px;
height: auto;
padding: 20px;
background: #fff;
border-radius: 6px;
box-shadow: 0 30px 130px -8px rgba(0, 0, 0, 0.25);
}
.minicart .view-cart-details-link {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 100%;
height: 43px;
font-weight: 600;
background: white;
border: 2px solid black;
outline: none;
text-decoration: none;
}
.minicart .view-cart-details-link:hover {
cursor: pointer;
color: white;
background: black;
}
.minicart hr {
margin-bottom: 20px;
}
.minicart .title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.minicart .title-row h2 {
margin: 0;
}
.minicart .title-row button {
border: none;
background: transparent;
cursor: pointer;
}
.minicart .title-row button svg {
display: block;
height: 16px;
}
.minicart .items-list {
list-style: none;
padding-left: 0;
max-height: 300px;
overflow: auto;
}
.minicart .item-count-message {
margin-bottom: 10px;
font-size: 0.8em;
}
.minicart .item-count-message .minicart--item-count {
font-weight: 600;
}
.minicart .item {
display: flex;
margin-bottom: 10px;
width: 100%;
}
.minicart .item .product-thumb-wrapper {
width: 100px;
height: 120px;
position: relative;
flex: 0 0 100px;
}
.minicart .item .product-thumb-wrapper img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.minicart .item .item-details {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.minicart .item .item-details p {
margin: 0;
}
.minicart .item .item-details .option-label {
font-weight: 600;
}
.minicart .item .item-details .title {
font-size: 0.9em;
font-weight: 600;
margin-top: 0;
margin-bottom: 6px;
}
.minicart .item .item-details .options {
margin-bottom: 2px 0;
}
.minicart .item .item-details .option {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .quantity-row {
margin: 2px 0;
}
.minicart .item .item-details .quantity-row span {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .option:last-of-type {
margin-bottom: 0;
}
.minicart .item .item-details .price {
margin-top: auto;
}
.minicart .item .item-details .remove {
font-size: 0.6em;
margin-top: auto;
}
.minicart .subtotal {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.minicart .subtotal .title {
height: 16px;
margin: 0;
}
.minicart .subtotal .amount {
font-weight: 600;
font-size: 1.2em;
margin: 0;
}
.minicart a {
color: black;
text-decoration: none;
}
.minicart a:hover {
text-decoration: underline;
}
</style></div>
</div>
<div id="shopify-section-predictive-search-main" class="shopify-section site-header w-full shadow-md p-shell fixed top-0 z-30 bg-white">
<script src="//www.flyrank.com/cdn/shop/t/34/assets/predictive-search.js?v=82854867885586265471741865223" defer="defer"></script>
<predictive-search
x-data
x-cloak
id="predictive-search"
x-show="$store.global.isPredictiveSearchVisible"
x-trap.inert="$store.global.isPredictiveSearchVisible"
x-transition.opacity
aria-modal="true"
@keyup.escape="$store.global.isPredictiveSearchVisible = false"
>
<div
id="predictive-search-form-wrapper"
class="w-full bg-white fixed inset-x-0 top-0 z-40 pt-8 pb-14 shadow-md"
>
<h2 class="text-base !font-normal max-w-max mx-auto font-palatino mb-3">
우리가 찾는 것을 도와드릴까요?
</h2>
<form
action="/ko/search"
method="get"
role="search"
class="w-full max-w-[422px] mx-auto"
@click.outside="$store.global.isPredictiveSearchVisible = false"
>
<div class="flex gap-x-3 w-full relative">
<input
id="predictive-search-input"
class="slayed-input w-full"
type="search"
name="q"
value=""
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
>
<label for="predictive-search-input" class="sr-only"> Search </label>
<button
for="predictive-search-input"
class="pill-button"
>
Search
</button>
<button
type="button"
class="absolute -right-[15px] top-1/2 -translate-y-1/2 translate-x-full"
@click="$store.global.isPredictiveSearchVisible = false"
>
<span class="sr-only">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<input name="options[prefix]" type="hidden" value="last">
<div id="predictive-search-target" tabindex="-1"></div>
</form>
</div>
</predictive-search>
</div>
<div id="shopify-section-modal" class="shopify-section section-modal">
<dialog
id="dialog-modal-example"
x-data="modal"
x-init="init($el)"
class="max-w-md rounded-md"
@click="close($event)"
>
<form action="" class="p-12">
<div class="prose">
<h1>모달 제목</h1>
<p><p>모달 설명. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque totam cum cupiditate officia et quaerat blanditiis culpa? Hic, nesciunt id.</p></p>
<button type="button" @click="open = false" class="btn rounded-none">
Close
</button>
</div>
</form>
</dialog>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('modal', () => ({
componentElement: document.querySelector('#dialog-modal-example'),
open: false,
init(dialog) {
if (!dialog) {
return
}
Alpine.effect(() => {
if (this.open) {
dialog.showModal()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.setAttribute('aria-hidden', 'true')
element.setAttribute('inert', '')
})
document.querySelector('body').classList.add('overflow-hidden')
} else {
dialog.close()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.removeAttribute('aria-hidden')
element.removeAttribute('inert')
})
document.querySelector('body').classList.remove('overflow-hidden')
}
})
document.addEventListener('show-modal', () => {
this.open = true
})
document.addEventListener('close-modal', () => {
this.open = false
})
},
toggle() {
this.open = !this.open
},
close(event) {
if (event.target === this.componentElement) {
if (this.open) {
this.open = false
}
}
}
}))
})
</script>
<style>
#dialog-modal-example::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
</style></div>
<script type="application/json" data-ajax-cart-initial-state>
{"note":null,"attributes":{},"original_total_price":0,"total_price":0,"total_discount":0,"total_weight":0.0,"item_count":0,"items":[],"requires_shipping":false,"currency":"USD","items_subtotal_price":0,"cart_level_discount_applications":[],"checkout_charge_amount":0}
</script>
<div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div><div id="shopify-block-Aajk0TllTV2lJZTdoT__15683396631634586217" class="shopify-block shopify-app-block"><script
id="chat-button-container"
data-horizontal-position=bottom_right
data-vertical-position=lowest
data-icon=chat_bubble
data-text=no_text
data-color=#89608e
data-secondary-color=#ffffff
data-ternary-color=#6a6a6a
data-domain=www.flyrank.com
data-shop-domain=www.flyrank.com
data-external-identifier=5QqDPyGbw2L4LPYPH2LFgD67SjacIZkJCvvcz866Sws
>
</script>
</div></body>
</html>
