www.shopify.com

웹 수집: 2026-08-08

https://www.shopify.com/kr/blog/diy-ecommerce-store-design-as-a-beginner

내용

"2014년에 Sara Mote와 MOTE 에이전시를 설립했습니다. MOTE는 전자상거래에 특화되어 있으며, 세련된 디자인, 최첨단 엔지니어링, 그리고 끊임없이 변화하는 시장에 대한 최고 수준의 서비스를 제공합니다. 웹 개발자였던 경력을 활용하여 혁신에 대한 열정과 고객과의 지속적인 관계를 구축하고자 하는 브랜드를 위한 웹사이트 제작에 집중해 왔습니다. 26년의 경험을 통해 얻은 통찰력을 공유하겠습니다." 전자상거래 웹사이트를 디자인할 때, 아름답고 전략적인 요소를 모두 갖춘 것을 만들어야 합니다. Shopify는 코딩이나 디자인 경험이 없어도 두 가지 모두를 충족할 수 있는 전자상거래 웹사이트를 쉽게 만들 수 있도록 합니다. 선도적인 전자상거래 플랫폼인 Shopify는 판매자들이 사용자 정의 가능한 테마를 사용하여 온라인 스토어를 구축할 수 있게 합니다. 각 Shopify 웹사이트는 원클릭 결제 기능과 AI 기능이 제공되어 제품 설명, FAQ 질문에 대한 답변, 마케팅 이메일 작성을 도와줍니다. 이러한 도구는 사용하기에 간단하고, 지금 바로 DIY 사이트에서 판매를 시작할 수 있으며, 나중에 Shopify 스토어를 확장하면서 전문 디자이너를 고용할 수 있는 옵션도 있습니다. Shopify 웹사이트 디자인 방법 Shopify 사이트를 디자인할 때 가장 중요한 것은 성능과 사용 편의성에 중점을 두면서 브랜드를 확립하는 것입니다. 이를 통해 처음부터 시장에서 돋보일 수 있는 웹사이트를 구축해야 합니다. Shopify 웹사이트를 디자인하는 가장 좋은 방법은 다음과 같습니다. 1. 브랜드 스타일 가이드 만들기 웹사이트를 구축하기 전에 브랜드 관련 결정을 몇 가지 내려야 합니다. 이미 브랜드 가이드라인이 있다면 좋겠지만 없다면, 지금이 타이포그래피, 브랜드 색상, 로고를 확정할 때입니다. 타이포그래피 기본 상업용 글꼴과 같은 읽기 쉬우면서도 일반적이지 않은 글꼴로 시작하세요. 이는 Shopify 글꼴 라이브러리(현재 한국어 지원 안 됨)에서 제공하는 무료 글꼴로, The Row와 같은 고급 브랜드에서 사용됩니다. 타이포그래피는 매우 빠르게 개성을 전달할 수 있습니다. 글꼴 선택은 웹사이트의 그리드 레이아웃에도 영향을 미치므로, 그 레이아웃을 기반으로 시작하는 것이 현명합니다. 색상 선택한 색상 팔레트는 소비자가 브랜드에 대해 느끼는 감정과 사이트의 정보를 이해하는 방식에 영향을 미칠 수 있습니다. 대비가 강한 색상 팔레트는 가독성이 뛰어나고 접근성이 좋기 때문에 좋은 선택입니다. 예를 들어, 검정과 흰색을 브랜드 팔레트로 선택할 때 특정한 음영을 선택하여 분위기와 브랜드 정체성을 전달할 수 있습니다. 로고 로고는 브랜드 인지도와 인식을 구축하는 데 중요한 요소입니다. 로고를 만드는 데 시간을 투자하세요. 로고는 기억에 남아야 하며, 브랜드의 본질을 전달해야 합니다. 디자이너와 협력할 계획이라면, 디자이너에게 여러 방향을 제시받아 최종 로고를 고르는 데 도움을 받을 수 있습니다. 현재 디자이너를 고용한 예산이 충분하지 않다면, 온라인 로고 제작 도구를 사용하여 첫 로고를 만들 수 있습니다. 2. 테마 선택하기 Shopify 테마 스토어에는 다양한 선택지가 있으며, 유료 테마는 최대 450달러(약 65만 6,280원)까지 다양합니다. 어느 걸 선택해야 할지 모르겠다면, Dawn을 시도해 보세요. Dawn은 Shopify 스토어를 위한 완벽한 기본 틀로 전환율에 매우 중요한 뛰어난 모바일 성능을 가진 무료 Shopify 테마입니다. 테마를 비교할 때 고려해야 할 사항은 다음과 같습니다. 예산 자본이 제한적인 신규 사업자라면, 무료 테마로 시작하여 얼마나 성장할 수 있는지 확인하는 것이 좋습니다. 사업이 성장한 후 프리미엄 테마로 업그레이드할 수 있습니다. 그때는 어떤 기능에 비용을 지불할 의사가 있는지 더 잘 알게 될 것입니다. 더 많은 기능이 필요하지만 디자이너를 고용할 예산이 없다면, 프리미엄 테마가 좋은 선택이 될 수 있습니다. 제품 카탈로그 크기 테마 선택은 카탈로그에 있는 제품 수에 따라 결정됩니다. 대부분의 무료 및 유료 테마는 200개 이상의 제품을 지원하지만, 일부 품질 높은 테마(예: Dawn)는 최대 199개 제품까지 지원하며, 최대 9개 제품까지 지원하는 테마도 소수 있습니다. Shopify 테마 스토어에서 카탈로그 크기별로 테마를 쉽게 필터링할 수 있습니다. 웹사이트 기능 Shopify 스토어에 필요한 특정 기능, 예를 들어 고정 내비게이션, 동영상, 빠른 결제와 같은 기능이 있다면, Shopify 테마 스토어 내 검색창을 사용하여 해당 기능이 있는 테마만 찾아볼 수 있습니다. 모바일 경험 웹사이트 트래픽의 대부분이 Instagram이나 TikTok을 통해 제품을 찾는 경우처럼 모바일에서 발생한다면, 화려한 기능보다 빠른 로딩 속도를 우선시하는 것이 좋습니다. 모바일 사용자는 화려한 기능을 아예 사용하지 않을 수도 있으며, 사이트가 로딩되는 데 너무 오랜 시간이 걸리면 이탈할 가능성이 높습니다. 이는 검색 엔진 최적화(SEO)에도 도움이 됩니다. 테마를 비교할 때는 데모 테마의 모바일 버전을 꼭 확인하세요. 휴대전화로 확인해 보는 것을 추천합니다. 3. 브랜드 요소 추가하기 테마를 선택한 후, 브랜드 요소를 추가할 차례입니다. Shopify 사이트에 브랜드 요소를 추가하는 방법은 다음과 같습니다. 로고와 브랜드 색상 추가하기 Shopify 관리자 페이지에서 “설정 > 일반”을 선택한 후, 브랜드 자산 섹션에서 “관리하기”를 선택합니다. 그러면 로고와 브랜드 색상을 추가할 수 있습니다. 이들은 자동으로 Shopify 테마와 브랜드 API가 있는 다른 채널에 적용됩니다. 테마 사용자 지정하기 테마 편집기에서 Shopify 스토어를 추가로 사용자 지정할 수 있습니다. “온라인 스토어 > 테마”로 이동하여 편집할 테마를 클릭한 후, “테마 편집”을 선택합니다. 그런 다음 테마 설정 기어 아이콘을 클릭하여 글꼴부터 레이아웃 특성(수평 및 수직 간격 등)까지 모든 것을 사용자 지정할 수 있습니다. 브랜드 결제 경험 만들기 작은 디테일이 브랜드에 대해 많은 것을 말해줄 수 있습니다. 완전한 브랜드 경험을 위해서는 결제 경험을 사용자 지정해야 하며, 이는 결제 후 Shopify 스토어에 표시되는 감사 및 주문 상태 페이지를 포함합니다. 이들은 모두 웹사이트의 나머지 부분과 일치해야 합니다. “설정 > 결제 > 사용자 지정”으로 이동하여 로고를 추가하고 색상과 글꼴을 변경할 수 있습니다. 이메일 템플릿 편집하기 고객이 주문할 때, 그들과의 관계를 더욱 발전시킬 기회가 생깁니다. 일반적인 이메일을 보내는 대신, Shopify 관리 페이지에서 브랜드 이메일 템플릿을 만드세요. “설정 > 알림 > 고객 알림 > 이메일 템플릿 사용자 지정”으로 이동하세요. 로고와 브랜드 색상을 추가하여 이메일을 즉시 인식할 수 있게 합니다. 텍스트도 편집하여 고객에게 공유 가치를 상기시키거나 제품 교육을 통해 구매에 대한 기대감을 높이세요. 이메일에 브랜드 목소리와 개성을 담는 것도 잊지 마세요. 사진 활용하기 단순하고 직관적인 웹사이트라고 해서 꼭 지루하진 않습니다. 라이프스타일 및 제품 사진을 통해 많은 브랜드 개성을 전달할 수 있습니다. 제품 페이지의 이미지와 일관성을 유지하세요. 예를 들어, 각 제품을 동일한 색상 배경에서 같은 조명으로 촬영합니다. 고품질 제품 사진은 고객이 구매할 때 확신을 줄 수 있으며, 선택한 색상, 질감, 소품은 분위기를 조성하고 브랜드를 구축하는 데 큰 도움이 됩니다. 4. 성능 점검하기 세상에서 가장 아름다운 사이트를 만들 수 있지만, 제대로 로드되지 않으면 고객에게는 아무런 의미가 없습니다. 따라서 Shopify 스토어와 사이트를 디자인할 때는 웹사이트 기능이 항상 우선시되어야 합니다. 웹 성능을 측정하는 기준은 코어 웹 바이탈(Core Web Vital)입니다. 이는 Google이 사용자가 가장 중요하게 여기는 기본 기능인 로딩 속도, 상호 작용성, 시각적 안정성을 의미합니다. 코어 웹 바이탈이 좋지 않으면 웹사이트 방문자는 불편한 경험을 하거나 이탈할 수 있으며, 이로 인해 이탈률이 증가할 수 있습니다. 또한 웹 바이탈이 기준에 미치지 못하면 검색 엔진이 사이트의 우선순위를 떨어뜨릴 수 있습니다. Shopify 관리 페이지에서 “판매 채널 > 온라인 스토어 > 테마”로 이동하여 코어 웹 바이탈을 확인할 수 있습니다. Dawn과 같은 미니멀리스트 테마를 사용하는 장점 중 하나는 기본적으로 성능이 뛰어나다는 점입니다. (모든 Shopify 테마는 속도와 신뢰성을 검증받음) 견고한 성능 기준선에서 시작하면 변경 사항이 코어 웹 바이탈에 미치는 영향을 쉽게 확인할 수 있습니다. Shopify 웹사이트 디자인은 균형이 중요합니다. 예를 들어, 동영상은 매우 강력한 스토리텔링 매체가 될 수 있지만, 파일 크기가 커서 로딩 속도를 감소시킬 수 있습니다. 주얼리 브랜드 Jacquie Aiche의 경우, 인터넷 속도가 느린 사용자에게는 플레이스홀더 이미지를 보여주는 솔루션을 선택했습니다. 이렇게 하면 로딩 속도와 관계없이 사용자 경험이 저하하되지 않습니다. 동영상, 큰 이미지 및 기타 시각적 요소만이 사이트 속도에 영향을 미치는 것은 아닙니다. Shopify 사이트에 기능을 추가하거나 다른 플랫폼과 연결하는 타사 코드 조각인 플러그인도 사이트 속도를 저하시킬 수 있습니다. 웹 디자이너는 브랜드의 다른 사이트 경험을 개선하기 위해 성능 저하를 감수할 가치가 있는 기능과 웹 바이탈을 희생할 수 있는 기능 중에 절충안을 결정해야 합니다. 5. 큐레이션에 집중하기 온라인 스토어 소유자로서, 제품 구성 전략을 통해 고객의 선택에 영향을 미칠 수 있습니다. 큐레이션은 품질 높은 전자상거래 제품화의 핵심 요소입니다. 행동 경제학자들은 이를 “선택 구조”라고 부르며, 이는 Richard Thaler와 Cass Sunstein이 그들의 저서 “Nudge”에서 만든 용어입니다. 선택 구조의 예를 들어보겠습니다. 새로 들어온 제품 컬렉션이 있다고 가정해 보세요. 기본 순서대로 제품을 표시하는 대신, 함께 잘 어울리는 제품들이 나란히 배치되도록 수동으로 재배치할 수 있습니다. 이런 세심한 큐레이션은 고객의 신뢰를 구축하는 미세한 심리적 효과를 가져올 수 있습니다. 고객은 "새로 들어온 제품 페이지를 정리할 만큼 이 브랜드에 대해 신경 쓴다면, 내 패키지에도 신경 쓸 것이다."라고 생각할 수 있습니다. Shopify의 드래그 앤 드롭 테마 편집기를 사용하면 제품과 이미지를 재배치하여 최고의 고객 경험을 제공할 수 있습니다. 컬렉션 페이지만이 큐레이터로서의 능력을 보여줄 수 있는 유일한 공간은 아닙니다. Shopify의 검색 및 발견 앱을 사용하면, 모든 제품 페이지에 관련 제품을 표시할 수 있습니다. 예를 들어, 패션 스토어를 운영하고 있고, 누군가 티셔츠 제품 페이지를 보고 있다면, "이 티셔츠는 이 바지와 이 재킷과 잘 어울릴 것 같습니다."라고 말할 좋은 기회입니다. 보완적인 제품을 큐레이션 하는 것은 신뢰를 구축하는 데 도움이 될 뿐만 아니라, 평균 주문 금액을 증가시킬 가능성도 있습니다. 6. 채널 간 조화 이루기 Shopify 스토어는 고객이 전자상거래 사업을 찾을 수 있는 유일한 장소가 아닐 것입니다. 소셜 미디어나 다른 플랫폼을 사용하는 경우, Shopify 스토어를 더 큰 멀티 채널 판매 전략의 일환으로 고려하는 것이 중요합니다. 예를 들어, Instagram에서 인플루언서 마케팅 캠페인을 진행하고 있다면, 그 인플루언서의 사진을 홈페이지에 배치하세요. 이렇게 하면 고객이 Instagram을 통해 웹사이트에 도착했을 때 연속성을 느낄 수 있습니다. 그들의 기대가 충족되어 바로 신뢰를 구축할 수 있습니다. Shopify 앱 스토어에서는 Shopify 사이트를 Instagram, TikTok 등 다른 채널과 연결할 수 있는 앱을 찾아볼 수 있습니다. 이를 통해 모든 캠페인을 Shopify 관리 페이지에서 한 곳에서 관리할 수 있습니다. 모든 것을 한곳에 두면 브랜드 변경 사항을 일관되게 적용하기가 훨씬 쉬워집니다. Shopify 스토어를 위해 디자이너를 고용해야 하는 시기 브랜드가 성장함에 따라, 더 이상 웹사이트를 직접 관리하는 것이 의미가 없을 수 있습니다. Shopify 스토어를 위해 디자이너를 고용해야 할 때는 다음과 같습니다. - 사이트 작업에 드는 시간이 제품 디자인, 컬렉션 큐레이션, 직원 관리와 같은 중요한 사업 활동을 방해할 때 - Shopify 테마가 더 이상 요구 사항을 충족하지 못할 때 - 브랜드를 새롭게 단장하고 싶고, 그에 맞는 새로운 웹사이트가 필요할 때 좋은 디자이너나 개발자는 브랜드가 성장함에 따라 매달 분석 데이터를 확인하여 업데이트나 재디자인을 추천해 줄 것입니다. 그들은 또한 웹사이트의 요구 사항이 더욱 복잡해짐에 따라 기본 템플릿에서 찾을 수 없는 맞춤형 기능을 추가해 줄 수도 있습니다. *환율: 2026년 1월 기준 Shopify 웹사이트를 디자인하는 방법 FAQ Shopify 사이트를 구축하는 데 비용은 얼마나 드나요? Shopify Basic 플랜은 월 19달러(약 2만 7,709원)부터 시작하며, 사용자 정의 도메인으로 Shopify 사이트를 구축할 수 있습니다. 플랜 선택은 기본적으로 팀의 규모에 따라 다릅니다. - Shopify의 Basic 플랜은 하나의 Shopify 계정 사용자와 함께 제공됩니다. - Shopify Grow 플랜은 다섯 개의 추가 직원 계정을 포함합니다(월 49달러(약 7만 1,535원)). - Shopify Advanced 플랜은 15개의 추가 직원 계정을 제공합니다(월 299달러(약 43만 6,510원)). - 대량 판매자들은 무제한 직원 계정과 B2B 기능을 포함하는 Shopify Plus(월 2,300달러(약 335만 4,320원))로 업그레이드할 수 있습니다. Shopify 웹사이트를 만들기 위해 코딩 경험이 필요한가요? 아니요. Shopify 사이트를 만들고 자신의 온라인 스토어에서 판매를 시작하는 데 코딩 경험은 필요하지 않습니다. Shopify의 드래그 앤 드롭 테마 편집기를 사용하면 코딩 없이 전자상거래 웹사이트를 쉽게 사용자 지정할 수 있습니다.

원문 자막 펼치기

<!DOCTYPE html><html lang="ko" dir="ltr"><head><script data-pre-hydration-monitor="true">(()=>{try{if(typeof MutationObserver>"u")return;const r=20,f=120,s={injectedElements:[],removedElements:[],attributesChanged:[]},c=t=>t?t.length>f?`${t.slice(0,f)}...`:t:"",N=["cdn.shopify.com","shopify.com","shopifycloud"],b=t=>t?N.some(e=>t.includes(e)):!1,m=t=>{const e=t.nodeName;if(!e||e==="#text"||e==="#comment")return null;const n=t.id?`#${t.id}`:"";let o="";if(t.className&&typeof t.className=="string"){const p=t.className.trim().split(/\s+/).slice(0,2).join(".");p&&(o=`.${p}`)}const u=t.getAttribute?.("src"),l=t.getAttribute?.("href"),g=t.getAttribute?.("type"),i=[];u?i.push(`src=${c(u)}`):l&&i.push(`href=${c(l)}`),g&&i.push(`type=${g}`);const E=i.length>0?`[${i.join(",")}]`:"",A=u||l||"";return{desc:[e,n,o,E].filter(Boolean).join(""),internal:b(A)}},d=t=>{const{target:e}=t,n=e.nodeName||"";return e.id?`${n}#${e.id}`:n},y=t=>{for(const e of t.addedNodes){const n=m(e);!n||n.internal||s.injectedElements.length<r&&s.injectedElements.push(`${n.desc} -> ${d(t)}`)}},$=t=>{for(const e of t.removedNodes){const n=m(e);!n||n.internal||s.removedElements.length<r&&s.removedElements.push(`${n.desc} <- ${d(t)}`)}},v=t=>{const e=d(t),n=t.target.getAttribute?.(t.attributeName)||"",o=`${e}.${t.attributeName}=${c(n)}`;s.attributesChanged.length<r&&s.attributesChanged.push(o)},h=new MutationObserver(t=>{for(const e of t){const n=e.type==="childList",o=e.type==="attributes";if(n){y(e),$(e);continue}o&&v(e)}}),a=()=>{h.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a(),window.__preHydrationData=s,window.__stopPreHydrationMonitor=()=>{h.disconnect(),document.removeEventListener("DOMContentLoaded",a),delete window.__preHydrationData,delete window.__stopPreHydrationMonitor}}catch{}})();
</script><title>쇼피파이 쇼핑몰 디자인 가이드 - Shopify 대한민국</title><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="Accept-CH" content="ECT, Save-Data, Device-Memory, Downlink"/><meta name="description" content="전문 디자이너를 영입하든 영입하지 않든 간에 Shopify 웹사이트를 디자인하는 방법은 쉽습니다. 이 글의 Shopify 쇼핑몰 디자인 가이드를 참고하세요."/><meta property="fb:pages" content="20409006880"/><meta property="fb:app_id" content="847460188612391"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Shopify"/><meta property="og:title" content="쇼피파이 쇼핑몰 디자인 가이드 - Shopify 대한민국"/><meta property="og:description" content="전문 디자이너를 영입하든 영입하지 않든 간에 Shopify 웹사이트를 디자인하는 방법은 쉽습니다. 이 글의 Shopify 쇼핑몰 디자인 가이드를 참고하세요."/><meta property="og:image" content="https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg"/><meta name="twitter:image" content="https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg"/><meta property="og:url" content="https://www.shopify.com/kr/blog/diy-ecommerce-store-design-as-a-beginner"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="Shopify"/><meta name="twitter:account_id" content="17136315"/><meta name="twitter:title" content="쇼피파이 쇼핑몰 디자인 가이드 - Shopify 대한민국"/><meta name="twitter:description" content="전문 디자이너를 영입하든 영입하지 않든 간에 Shopify 웹사이트를 디자인하는 방법은 쉽습니다. 이 글의 Shopify 쇼핑몰 디자인 가이드를 참고하세요."/><link href="https://cdn.shopify.com" rel="preconnect"/><link href="https://cdn.shopify.com" rel="preconnect" crossorigin="anonymous"/><link href="https://gtm.shopify.com" rel="preconnect"/><link href="https://www.googletagmanager.com" rel="preconnect"/><meta name="robots" content="index, follow, max-image-preview:large"/><link rel="alternate" hreflang="ko" href="https://www.shopify.com/kr/blog/diy-ecommerce-store-design-as-a-beginner"/><link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/world/brochure/production-blog/assets/blogRedesign-BM67mmbd.css"/><script data-async-css-loader="true">(function(){function n(e){if(!e||e.media==="all")return;function t(){e.media="all"}e.sheet?t():e.addEventListener("load",t,{once:!0})}document.querySelectorAll("link[data-async-css]").forEach(n),typeof MutationObserver<"u"&&new MutationObserver(function(e){e.forEach(function(t){t.addedNodes.forEach(function(a){a.nodeType===1&&a.tagName==="LINK"&&a.hasAttribute("data-async-css")&&n(a)})})}).observe(document.head,{childList:!0,subtree:!0})})();
</script><link rel="icon" href="https://cdn.shopify.com/b/shopify-brochure2-assets/61cc781fe73f11e9d4bd160d27cc627b.png" type="image/png"/><link rel="apple-touch-icon" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="120x120" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="114x114" href="https://cdn.shopify.com/b/shopify-brochure2-assets/b13486e5693b246af63c66ab047a6b6b.png"/><link rel="apple-touch-icon" sizes="72x72" href="https://cdn.shopify.com/b/shopify-brochure2-assets/8734d76c98437c8ae8a628bbeed3750a.png"/><link rel="apple-touch-icon" sizes="57x57" href="https://cdn.shopify.com/b/shopify-brochure2-assets/193f18e4855704ef1716dc0cd750c1ee.png"/><link rel="canonical" href="https://www.shopify.com/kr/blog/diy-ecommerce-store-design-as-a-beginner"/></head><body class="overscroll-y-none"><script>window.__brochureDuxConfig={"eventHandlerEndpoint":"/.well-known/dux?v2&_pri=1"}</script><div class="absolute top-2 left-2 z-[100] pointer-events-none"><a href="#main" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-dark-primary-text bg-button-dark-primary-bg border-button-dark-primary-border ring-button-dark-primary-border hover:text-button-dark-primary-text-hover hover:bg-button-dark-primary-bg-hover hover:border-button-dark-primary-border-hover hover:ring-button-dark-primary-border-hover focus:text-button-dark-primary-text-focus focus:bg-button-dark-primary-bg-focus focus:border-button-dark-primary-border-focus focus:ring-button-dark-primary-border-focus active:text-button-dark-primary-text-active active:bg-button-dark-primary-bg-active active:border-button-dark-primary-border-active active:ring-button-dark-primary-border-active disabled:text-button-dark-primary-text-disabled disabled:bg-button-dark-primary-bg-disabled disabled:border-button-dark-primary-border-disabled disabled:ring-button-dark-primary-border-disabled transition-transform duration-300 translate-y-[-200%] motion-reduce:transition-none focus:translate-y-0" data-component-name="button" data-mode="dark" target="">콘텐츠로 건너뛰기</a></div><div class="relative"><header class="font-sans absolute h-full w-full pointer-events-none z-50" data-component-name="global-nav" data-viewable-component="true" data-component-extra-variant="brochureV2-newNav-header" data-has-secondary-navigation="true"><div class="after:absolute after:top-0 after:left-0 after:will-change-opacity after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 w-full z-50 [&amp;:has(.level1-item:hover)]:after:opacity-100 [&amp;:has(.level1-item:focus-within)]:after:opacity-100 after:bg-white text-black after:opacity-100 -top-global-header pointer-events-auto before:absolute before:top-0 before:left-0 before:will-change-opacity before:pointer-events-none before:h-full before:w-full before:z-100 before:transition-opacity before:duration-200 before:opacity-0 before:translate-y-full [&amp;:has(.level1-item:hover)]:before:opacity-100 [&amp;:has(.level1-item:focus-within)]:before:opacity-100 [&amp;:has(.level1-item)]:before:delay-[350ms] [&amp;:has(.level1-item:hover)]:before:delay-100 [&amp;:has(.level1-item:focus-within)]:before:delay-100 before:bg-[linear-gradient(180deg,#fff_0px,transparent_40px)] sticky"><div class="h-global-header px-margin xl:px-auto-xl flex items-center z-20 relative"><div class="relative flex shrink-0 items-center mr-8"><a href="/kr" data-component-name="logo-home" class="inline-block shrink-0 relative z-20"><img src="https://cdn.shopify.com/b/shopify-brochure2-assets/b2e2f48c81f4ae49a1f1f3c128238f50.svg" alt="Shopify" class="h-9 lg:h-9" data-component-name="shopify-logo"/></a></div><nav class="max-lg:hidden flex h-full grow" aria-label="주요" itemscope="" itemType="https://schema.org/SiteNavigationElement" data-click-outside="dismiss" data-component-name="desktop-main-navigation" data-viewable-component="true"><ul class="flex h-full group"><li class="text-base shrink-0 mr-7 min-[1300px]:mr-8 level1-item z-30 hover:z-40 before:absolute before:bottom-0 before:left-0 before:w-full before:h-6 before:pointer-events-none hover:before:pointer-events-auto"><div class="relative flex h-full items-center gap-x-0.5 lg:group-hover:opacity-50 lg:group-hover:hover:opacity-100 lg:[.level1-item:hover_&amp;]:opacity-100 lg:transition-opacity lg:duration-300 before:absolute before:top-0 before:left-0 before:w-[calc(100%+4rem)] before:h-full before:-translate-x-8"><span class="font-semi-medium whitespace-nowrap">Shopify를 선택해야 하는 이유</span><svg class="pointer-events-none w-4 h-4 mt-[3px] shrink-0 transition-transform duration-200 [.level1-item:hover_&amp;]:-scale-y-100 [.level1-item:focus-within_&amp;]:-scale-y-100 text-black"><use href="#icon-chevron"></use></svg></div><div class="level2-wrapper absolute top-0 start-0 w-full overflow-hidden pointer-events-none max-lg:h-full lg:top-global-header lg:[.level1-item:hover_&amp;]:pointer-events-auto lg:max-h-[calc(90vh-72px)] lg:no-scrollbar lg:overflow-y-auto lg:pb-9 lg:before:shadow-xl lg:before:pointer-events-none lg:before:absolute lg:before:bottom-9 lg:before:start-0 lg:before:h-9 lg:before:w-full lg:before:opacity-0 lg:before:transition-opacity lg:before:duration-300 lg:before:delay-0 lg:before:will-change-[opacity] lg:[.level1-item:hover_&amp;]:before:opacity-100 lg:[.level1-item:hover_&amp;]:before:duration-[300ms] lg:[.level1-item:hover_&amp;]:before:delay-[350ms] lg:[.level1-item:focus-within_&amp;]:before:opacity-100 lg:[.level1-item:focus-within_&amp;]:before:duration-[300ms] lg:[.level1-item:focus-within_&amp;]:before:delay-[350ms]" data-component-name="global-nav-level2" data-viewable-component="true"><input type="checkbox" id="bk-nav-Shopify를 선택해야 하는 이유" class="peer hidden" aria-hidden="true"/><div class="gap-y-[68px] text-sm opacity-0 pt-[76px] px-margin max-sm:flex max-sm:flex-col sm:gap-x-10 sm:pt-[104px] md:relative max-lg:transition-opacity max-lg:duration-[300ms] max-lg:overflow-y-auto max-lg:h-full max-lg:peer-checked:opacity-100 max-lg:peer-checked:pointer-events-auto max-lg:will-change-[opacity] lg:pt-10 lg:opacity-100 lg:-translate-y-[calc(100%+1px)] lg:transition-transform lg:duration-[300ms] lg:ease-ease-out-cubic lg:will-change-transform lg:delay-[150ms] lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-200 lg:[.level1-item:focus-within_&amp;]:delay-200 lg:will-change-transform xl:px-auto-xl level2-media-container flex max-lg:flex-col max-lg:gap-y-10 max-lg:pb-20 lg:items-start lg:overflow-hidden text-[#18181b] bg-white"><ul class="[grid-area:items] lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[250ms,300ms] lg:[.level1-item:focus-within_&amp;]:delay-[250ms,300ms] max-md:flex max-md:flex-col max-md:gap-y-1.5 md:grid grid-cols-3 grid-rows-[1fr] md:gap-x-4 lg:gap-x-6 lg:mb-10"><li class="max-md:relative"><label for="bk-nav-Shopify를 선택해야 하는 이유" class="flex items-center cursor-pointer z-20 absolute -top-8 max-md:-translate-y-full sm:-top-10 md:top-10 start-0 md:start-margin lg:hidden before:absolute before:-inset-5"><svg class="pointer-events-none w-5 h-5 shrink-0 ltr:rotate-90 rtl:-rotate-90"><use href="#icon-chevron"></use></svg>뒤로</label><a class="level3-link max-sm:pe-4 max-md:grid max-md:grid-cols-[min-content_1fr] max-md:grid-rows-[min-content] max-md:gap-x-3 max-md:py-6 max-md:ps-4 max-md:rounded-2xl sm:max-md:pe-12 max-md:bg-[#fafafa] max-md:border max-md:border-[#f4f4f5]" href="/kr/start"><picture class="flex items-center justify-center aspect-[1.049] mb-2 overflow-clip max-md:hidden rounded-2xl lg:rounded-xl lg:max-h-[321px] lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:flex lg:[.level1-item:focus-within_&amp;]:flex"><img class="w-full h-full object-cover lg:hover:scale-125 lg:transition-transform lg:duration-500" alt="빠르게 시작하세요" decoding="async" loading="lazy" src="https://cdn.shopify.com/b/shopify-brochure2-assets/35d24a52160348807e95f1d335e9e295.png?width=421" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/35d24a52160348807e95f1d335e9e295.png?width=842 2x"/></picture><svg class="pointer-events-none row-start-[span_2] w-7 h-7 shrink-0 md:hidden"><use href="#icon-drag-and-drop"></use></svg><p class="flex items-center mb-0.5 text-base max-md:self-end max-md:z-20">빠르게 시작하세요<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate] max-sm:hidden max-md:absolute max-md:w-6 max-md:h-6 max-md:opacity-100 max-md:top-1/2 max-md:-translate-y-1/2 max-md:end-4 max-md:rtl:-scale-x-100"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a] max-md:z-20">내일부터 바로 판매할 수 있습니다.</p></a></li><li class="max-md:relative"><a class="level3-link max-sm:pe-4 max-md:grid max-md:grid-cols-[min-content_1fr] max-md:grid-rows-[min-content] max-md:gap-x-3 max-md:py-6 max-md:ps-4 max-md:rounded-2xl sm:max-md:pe-12 max-md:bg-[#fafafa] max-md:border max-md:border-[#f4f4f5]" href="/kr/sell"><picture class="flex items-center justify-center aspect-[1.049] mb-2 overflow-clip max-md:hidden rounded-2xl lg:rounded-xl lg:max-h-[321px] lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:flex lg:[.level1-item:focus-within_&amp;]:flex"><img class="w-full h-full object-cover lg:hover:scale-125 lg:transition-transform lg:duration-500" alt="Shopify로 전환하세요" decoding="async" loading="lazy" src="https://cdn.shopify.com/b/shopify-brochure2-assets/b4995abc3f73dd8442f579e10023a4df.png?width=421" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/b4995abc3f73dd8442f579e10023a4df.png?width=842 2x"/></picture><svg class="pointer-events-none row-start-[span_2] w-7 h-7 shrink-0 md:hidden"><use href="#icon-boost"></use></svg><p class="flex items-center mb-0.5 text-base max-md:self-end max-md:z-20">Shopify로 전환하세요<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate] max-sm:hidden max-md:absolute max-md:w-6 max-md:h-6 max-md:opacity-100 max-md:top-1/2 max-md:-translate-y-1/2 max-md:end-4 max-md:rtl:-scale-x-100"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a] max-md:z-20">더 많은 고객을 확보해 더 많은 매출을 올려보세요.</p></a></li><li class="max-md:relative"><a class="level3-link max-sm:pe-4 max-md:grid max-md:grid-cols-[min-content_1fr] max-md:grid-rows-[min-content] max-md:gap-x-3 max-md:py-6 max-md:ps-4 max-md:rounded-2xl sm:max-md:pe-12 max-md:bg-[#fafafa] max-md:border max-md:border-[#f4f4f5]" href="/kr/enterprise"><picture class="flex items-center justify-center aspect-[1.049] mb-2 overflow-clip max-md:hidden rounded-2xl lg:rounded-xl lg:max-h-[321px] lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:flex lg:[.level1-item:focus-within_&amp;]:flex"><img class="w-full h-full object-cover lg:hover:scale-125 lg:transition-transform lg:duration-500" alt="엔터프라이즈급 브랜드가 신뢰하는 플랫폼" decoding="async" loading="lazy" src="https://cdn.shopify.com/b/shopify-brochure2-assets/91fd2e27323b7a94d9fdb2a7973e668e.png?width=421" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/91fd2e27323b7a94d9fdb2a7973e668e.png?width=842 2x"/></picture><svg class="pointer-events-none row-start-[span_2] w-7 h-7 shrink-0 md:hidden"><use href="#icon-sales-up"></use></svg><p class="flex items-center mb-0.5 text-base max-md:self-end max-md:z-20">엔터프라이즈급 브랜드가 신뢰하는 플랫폼<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate] max-sm:hidden max-md:absolute max-md:w-6 max-md:h-6 max-md:opacity-100 max-md:top-1/2 max-md:-translate-y-1/2 max-md:end-4 max-md:rtl:-scale-x-100"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a] max-md:z-20">규모, 복잡성 또는 목표와 상관없습니다.</p></a></li></ul><div class="relative [grid-area:aside] before:absolute before:-top-10 before:start-0 before:bottom-0 before:z-0 before:pointer-events-none max-sm:mt-2 sm:before:w-[calc(100%+var(--margin,var(--spacing-margin)))] xl:before:w-[50vw] max-lg:before:content-none lg:pb-10 lg:ps-10 lg:before:-bottom-5 before:bg-[#fafafa] after:bg-[#f4f4f5]"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold relative mb-6 lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[350ms,400ms] lg:[.level1-item:focus-within_&amp;]:delay-[350ms,400ms] sm:max-lg:w-1/2 sm:w-64">모든 스토어에 기본 탑재</p><ul class="relative flex lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[350ms,400ms] lg:[.level1-item:focus-within_&amp;]:delay-[350ms,400ms] max-md:gap-x-2 max-lg:w-full max-lg:gap-x-4 lg:gap-y-6 lg:flex-col"><li class="max-lg:w-1/2"><a href="/kr/checkout" class="level3-link gap-y-1 max-sm:flex max-sm:flex-col max-sm:min-h-[176px] sm:max-lg:grid sm:max-lg:grid-cols-[1.5fr_1fr] sm:max-lg:grid-rows-[auto] sm:max-lg:gap-x-3 sm:max-lg:min-h-[129px] max-lg:border max-lg:rounded-2xl max-lg:h-full max-lg:p-6 lg:flex lg:flex-col lg:w-[190px] max-lg:bg-[#fafafa] max-lg:border max-lg:border-[#f4f4f5]"><video muted="" playsinline="" preload="none" poster="https://cdn.shopify.com/b/shopify-brochure2-assets/07baf8219532d81f6d6725151f9e3482.png?width=434" class="rounded-lg pointer-coarse:pointer-events-none max-sm:w-full lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:block lg:[.level1-item:focus-within_&amp;]:block max-lg:pointer-events-none max-lg:hidden lg:mb-1 lg:h-[87px] lg:aspect-[2.17] bg-[#f2f2f0]"><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/5a751065b0c61a7ef84271640431b54a.webm" type="video/webm; codecs=av01.0.08M.08"/><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/6b1441a90dc0d0215f138f66d6dc18bb.mp4" type="video/mp4"/></video><p class="flex items-center mb-0.5 max-lg:relative max-lg:z-10 text-pretty sm:max-lg:self-end">세계 최고의 결제 시스템<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a] max-lg:relative max-lg:z-10 max-sm:mb-3 sm:max-lg:row-start-2">검증된 전환율 향상 효과를 경험하세요.</p><img class="relative z-10 w-[118px] aspect-[3.333] rounded max-sm:mt-auto sm:row-start-[span_2] sm:self-center sm:justify-self-end sm:w-[100px] sm:max-lg:justify-self-center max-lg:shadow-[0_8px_48px_0_rgba(24,24,27,0.24),_0_4px_8px_0_rgba(24,24,27,0.16)] md:w-[133px] lg:hidden" src="https://cdn.shopify.com/b/shopify-brochure2-assets/ecabe88f01662a8048799d22f2c6aa99.svg" alt="세계 최고의 결제 시스템"/></a></li><li class="max-lg:w-1/2"><a href="/kr/sidekick" class="level3-link gap-y-1 max-sm:flex max-sm:flex-col max-sm:min-h-[176px] sm:max-lg:grid sm:max-lg:grid-cols-[1.5fr_1fr] sm:max-lg:grid-rows-[auto] sm:max-lg:gap-x-3 sm:max-lg:min-h-[129px] max-lg:border max-lg:rounded-2xl max-lg:h-full max-lg:p-6 lg:flex lg:flex-col lg:w-[190px] max-lg:bg-[#fafafa] max-lg:border max-lg:border-[#f4f4f5]"><video muted="" playsinline="" preload="none" poster="https://cdn.shopify.com/b/shopify-brochure2-assets/b759ef6f62237393d768ad362888875f.png?width=434" class="rounded-lg pointer-coarse:pointer-events-none max-sm:w-full lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:block lg:[.level1-item:focus-within_&amp;]:block max-lg:pointer-events-none max-lg:hidden lg:mb-1 lg:h-[87px] lg:aspect-[2.17] bg-[#f2f2f0]"><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/90ccaa3754ed4c1f485353f1853faaa9.webm" type="video/webm; codecs=av01.0.08M.08"/><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/952301edf0f8a5a57f90d6a395dd4a10.mp4" type="video/mp4"/></video><p class="flex items-center mb-0.5 max-lg:relative max-lg:z-10 text-pretty sm:max-lg:self-end">Sidekick<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a] max-lg:relative max-lg:z-10 max-sm:mb-3 sm:max-lg:row-start-2">상거래에 최적화된 AI 어시스턴트를 만나보세요.</p><img class="relative z-10 w-[70px] aspect-square max-sm:translate-y-2.5 max-sm:-mt-2.5 sm:w-[80px] sm:self-center sm:justify-self-end sm:row-start-[span_2] sm:max-lg:justify-self-center lg:hidden" src="https://cdn.shopify.com/b/shopify-brochure2-assets/8aca5aedd28634c235a5fd3a74ac1cd2.png?width=80" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/8aca5aedd28634c235a5fd3a74ac1cd2.png?width=160 2x" alt="Sidekick"/></a></li></ul></div></div></div></li><li class="text-base shrink-0 mr-7 min-[1300px]:mr-8 level1-item z-30 hover:z-40 before:absolute before:bottom-0 before:left-0 before:w-full before:h-6 before:pointer-events-none hover:before:pointer-events-auto"><div class="relative flex h-full items-center gap-x-0.5 lg:group-hover:opacity-50 lg:group-hover:hover:opacity-100 lg:[.level1-item:hover_&amp;]:opacity-100 lg:transition-opacity lg:duration-300 before:absolute before:top-0 before:left-0 before:w-[calc(100%+4rem)] before:h-full before:-translate-x-8"><span class="font-semi-medium whitespace-nowrap">제품</span><svg class="pointer-events-none w-4 h-4 mt-[3px] shrink-0 transition-transform duration-200 [.level1-item:hover_&amp;]:-scale-y-100 [.level1-item:focus-within_&amp;]:-scale-y-100 text-black"><use href="#icon-chevron"></use></svg></div><div class="level2-wrapper absolute top-0 start-0 w-full overflow-hidden pointer-events-none max-lg:h-full lg:top-global-header lg:[.level1-item:hover_&amp;]:pointer-events-auto lg:max-h-[calc(90vh-72px)] lg:no-scrollbar lg:overflow-y-auto lg:pb-9 lg:before:shadow-xl lg:before:pointer-events-none lg:before:absolute lg:before:bottom-9 lg:before:start-0 lg:before:h-9 lg:before:w-full lg:before:opacity-0 lg:before:transition-opacity lg:before:duration-300 lg:before:delay-0 lg:before:will-change-[opacity] lg:[.level1-item:hover_&amp;]:before:opacity-100 lg:[.level1-item:hover_&amp;]:before:duration-[300ms] lg:[.level1-item:hover_&amp;]:before:delay-[350ms] lg:[.level1-item:focus-within_&amp;]:before:opacity-100 lg:[.level1-item:focus-within_&amp;]:before:duration-[300ms] lg:[.level1-item:focus-within_&amp;]:before:delay-[350ms]" data-component-name="global-nav-level2" data-viewable-component="true"><input type="checkbox" id="bk-nav-제품" class="peer hidden" aria-hidden="true"/><div class="gap-y-[68px] text-sm opacity-0 pt-[76px] px-margin max-sm:flex max-sm:flex-col sm:gap-x-10 sm:pt-[104px] md:relative max-lg:transition-opacity max-lg:duration-[300ms] max-lg:overflow-y-auto max-lg:h-full max-lg:peer-checked:opacity-100 max-lg:peer-checked:pointer-events-auto max-lg:will-change-[opacity] lg:pt-10 lg:opacity-100 lg:-translate-y-[calc(100%+1px)] lg:transition-transform lg:duration-[300ms] lg:ease-ease-out-cubic lg:will-change-transform lg:delay-[150ms] lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-200 lg:[.level1-item:focus-within_&amp;]:delay-200 lg:will-change-transform xl:px-auto-xl sm:[--bk-l2-rows:2] sm:grid sm:items-start sm:grid-cols-[1fr_1fr] sm:grid-rows-[repeat(var(--bk-l2-rows),min-content)] sm:[grid-template-areas:&quot;items_aside&quot;_&quot;belt_aside&quot;] max-md:pb-10 md:gap-y-8 md:[--bk-l2-rows:1] md:grid-cols-[2fr_1fr] md:[grid-template-areas:&quot;items_aside&quot;_&quot;belt_belt&quot;] md:max-lg:overflow-x-hidden lg:[--bk-l2-rows:2] lg:grid-cols-[3fr_1fr] text-[#18181b] bg-white"><ul class="[grid-area:items] lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[250ms,300ms] lg:[.level1-item:focus-within_&amp;]:delay-[250ms,300ms] flex flex-col gap-y-[68px] w-full md:max-h-[686px] md:flex-wrap md:gap-x-10 md:gap-y-10 lg:max-h-[546px] [@media(max-height:771px)_and_(min-width:1200px)]:max-h-[417px] [@media(max-height:771px)_and_(min-width:1200px)]:gap-y-8"><li class="max-md:relative max-md:before:w-full max-md:before:h-px max-md:before:absolute max-md:before:-bottom-[25px] max-sm:before:start-0 md:w-[calc((100%-40px)/2)] lg:w-[calc((100%-80px)/3)] max-md:before:bg-[#f4f4f5] md:order-1"><label for="bk-nav-제품" class="flex items-center cursor-pointer z-20 absolute -top-8 max-md:-translate-y-full sm:-top-10 md:top-10 start-0 md:start-margin lg:hidden before:absolute before:-inset-5"><svg class="pointer-events-none w-5 h-5 shrink-0 ltr:rotate-90 rtl:-rotate-90"><use href="#icon-chevron"></use></svg>뒤로</label><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold">웹사이트 구축</p><ul class="level3-container"><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/website/builder" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-drag-and-drop"></use></svg><span class="flex items-center">웹사이트 빌더<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="https://themes.shopify.com/?locale=ko" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-design"></use></svg><span class="flex items-center">테마<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/domains" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-domain"></use></svg><span class="flex items-center">도메인<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/customer-accounts" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-user-profile"></use></svg><span class="flex items-center">고객 계정<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/sidekick" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-ai"></use></svg><span class="flex items-center">Sidekick<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li></ul></li><li class="max-md:relative max-md:before:w-full max-md:before:h-px max-md:before:absolute max-md:before:-bottom-[25px] max-sm:before:start-0 md:w-[calc((100%-40px)/2)] lg:w-[calc((100%-80px)/3)] max-md:before:bg-[#f4f4f5] md:order-4 lg:order-3 lg:mb-10"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold">어디서든 판매</p><ul class="level3-container"><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/online" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-online"></use></svg><span class="flex items-center">온라인<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/agentic-storefronts" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-ai-chats"></use></svg><span class="flex items-center">AI 채팅<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/pos" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-pos-tick"></use></svg><span class="flex items-center">POS(Point of Sale)<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/shop" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-shop-app"></use></svg><span class="flex items-center">Shop 앱<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/channels" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-social"></use></svg><span class="flex items-center">소셜 및 마켓플레이스<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/international" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-global"></use></svg><span class="flex items-center">전 세계<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/plus/solutions/b2b-ecommerce" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-sales-up"></use></svg><span class="flex items-center">B2B<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/markets" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-global-markets"></use></svg><span class="flex items-center">Markets 전체에 적용하기<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li></ul></li><li class="max-md:relative max-md:before:w-full max-md:before:h-px max-md:before:absolute max-md:before:-bottom-[25px] max-sm:before:start-0 md:w-[calc((100%-40px)/2)] lg:w-[calc((100%-80px)/3)] max-md:before:bg-[#f4f4f5] md:order-5 lg:order-4"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold">마케팅 및 분석</p><ul class="level3-container"><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/marketing" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-marketing"></use></svg><span class="flex items-center">광고 및 캠페인<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/marketing-automation-tools" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-users"></use></svg><span class="flex items-center">이메일 및 고객 채팅<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/discounts" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-discount"></use></svg><span class="flex items-center">할인<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/analytics" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-analytics"></use></svg><span class="flex items-center">분석<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li></ul></li><li class="max-md:relative max-md:before:w-full max-md:before:h-px max-md:before:absolute max-md:before:-bottom-[25px] max-sm:before:start-0 md:w-[calc((100%-40px)/2)] lg:w-[calc((100%-80px)/3)] max-md:before:bg-[#f4f4f5] md:order-2"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold">비즈니스 운영</p><ul class="level3-container"><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/orders" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-inventory-synced"></use></svg><span class="flex items-center">주문 및 재고<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/shipping" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-shipping"></use></svg><span class="flex items-center">배송<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/flow" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-save-time"></use></svg><span class="flex items-center">워크플로 자동화<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/mobile" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-mobile"></use></svg><span class="flex items-center">모바일<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li></ul></li><li class="max-md:relative max-md:before:w-full max-md:before:h-px max-md:before:absolute max-md:before:-bottom-[25px] max-sm:before:start-0 md:w-[calc((100%-40px)/2)] lg:w-[calc((100%-80px)/3)] max-md:before:bg-[#f4f4f5] md:order-3 lg:order-5"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold">결제 받기</p><ul class="level3-container"><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/checkout" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-credit-card"></use></svg><span class="flex items-center">결제<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li><li class="lg:transition-opacity lg:duration-300 lg:will-change-[opacity] lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100"><a href="/kr/payments" class="level3-link flex items-center sm:items-start gap-x-4 py-2.5 will-change-[opacity] max-sm:text-base [@media(max-height:771px)_and_(min-width:1200px)]:py-1.5"><svg class="pointer-events-none w-5 h-5 shrink-0"><use href="#icon-money"></use></svg><span class="flex items-center">지급<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></span></a></li></ul></li></ul><ul class="[grid-area:belt] gap-y-8 max-md:flex max-md:flex-col md:relative md:pt-6 md:pb-12 md:grid md:gap-x-10 md:grid-cols-3 md:max-lg:grid-rows-[min-content] md:max-lg:gap-y-6 md:max-lg:before:absolute md:max-lg:before:w-[200vw] md:max-lg:before:h-px md:max-lg:before:z-10 md:max-lg:before:top-0 md:max-lg:before:left-1/2 md:max-lg:before:-translate-x-1/2 lg:[--belt-calc:calc((100%-416px)/3)] lg:grid-cols-[var(--belt-calc)_var(--belt-calc)_var(--belt-calc)_296px] lg:sticky lg:py-6 lg:z-20 lg:before:absolute lg:before:w-[200vw] lg:before:h-10 lg:before:top-0 lg:before:left-1/2 lg:before:-translate-x-1/2 lg:before:-translate-y-full lg:before:pointer-events-none lg:before:z-10 lg:after:absolute lg:after:w-[200vw] lg:after:h-full lg:after:top-0 lg:after:left-1/2 lg:after:-translate-x-1/2 lg:after:pointer-events-none lg:after:ring-1 lg:after:ring-inset [@media(width&gt;=1420px)]:[--belt-calc:calc((75%-110px)/3)] [@media(width&gt;=1420px)]:grid-cols-[var(--belt-calc)_var(--belt-calc)_var(--belt-calc)_calc(25%-10px)] md:max-lg:before:bg-[#f4f4f5] lg:after:ring-[#f4f4f5] lg:after:bg-white lg:-bottom-9 lg:before:bg-[linear-gradient(0deg,#fff_0px,transparent_40px)]"><li class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] text-[#008060] font-semibold lg:opacity-0 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[300ms,350ms] lg:[.level1-item:focus-within_&amp;]:delay-[300ms,350ms] lg:-translate-y-0 lg:z-10 mb-0 max-lg:w-full md:max-lg:col-span-3 lg:leading-[1.8]">Shopify 맞춤 설정 및 확장</li><li class="lg:opacity-0 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[300ms,350ms] lg:[.level1-item:focus-within_&amp;]:delay-[300ms,350ms] lg:-translate-y-0 lg:z-10"><a href="/kr/ucp" class="level3-link"><p class="flex items-center">에이전트 전용 상거래<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a]">에이전트 도구로 구축하세요</p></a></li><li class="lg:opacity-0 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[300ms,350ms] lg:[.level1-item:focus-within_&amp;]:delay-[300ms,350ms] lg:-translate-y-0 lg:z-10"><a href="https://apps.shopify.com/?locale=ko" class="level3-link"><p class="flex items-center">Shopify App Store<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a]">최대 규모의 상거래 에코시스템</p></a></li><li class="lg:opacity-0 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[300ms,350ms] lg:[.level1-item:focus-within_&amp;]:delay-[300ms,350ms] lg:-translate-y-0 lg:z-10"><a href="https://shopify.dev" class="level3-link"><p class="flex items-center">Shopify.dev<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a]">개발자 설명서, CLI 등</p></a></li></ul><div class="relative [grid-area:aside] before:absolute before:-top-10 before:start-0 before:bottom-0 before:z-0 before:pointer-events-none max-sm:mt-2 sm:before:w-[calc(100%+var(--margin,var(--spacing-margin)))] xl:before:w-[50vw] px-4 max-sm:pb-10 max-sm:before:rounded-lg max-sm:before:bg-none max-sm:before:w-full sm:ps-10 sm:pe-0 sm:self-stretch sm:before:-top-[104px] sm:before:-bottom-10 sm:after:absolute sm:after:-top-10 sm:after:start-0 sm:after:bottom-0 sm:after:w-px sm:after:bg-no-repeat sm:after:z-10 sm:after:will-change-[opacity] md:before:-bottom-[32px] md:after:-bottom-[32px] before:bg-[#fafafa] after:bg-[#f4f4f5]"><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold relative mb-6 lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[350ms,400ms] lg:[.level1-item:focus-within_&amp;]:delay-[350ms,400ms] sm:w-64">멈추지 않는 혁신</p><ul class="relative flex lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[350ms,400ms] lg:[.level1-item:focus-within_&amp;]:delay-[350ms,400ms] gap-y-10 flex-col sm:w-64"><li class=""><a href="/editions/spring2026" class="level3-link"><video muted="" playsinline="" preload="none" poster="https://cdn.shopify.com/b/shopify-brochure2-assets/095b0536eb3a264c83761008f47aecbd.png?width=512" class="rounded-lg pointer-coarse:pointer-events-none max-sm:w-full lg:hidden lg:transition-[display] lg:transition-discrete lg:duration-[450ms] lg:[.level1-item:hover_&amp;]:block lg:[.level1-item:focus-within_&amp;]:block mb-3 aspect-[1.706] sm:h-[150px] bg-[#f2f2f0]"><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/88ca374851be502b9cf03e43dc3a4239.webm" type="video/webm; codecs=av01.0.08M.08"/><source src="https://cdn.shopify.com/b/shopify-brochure2-assets/a47f449c4807b685632d92c0684c994b.mp4" type="video/mp4"/></video><p class="flex items-center mb-0.5">Shopify Editions<svg class="w-3.5 h-3.5 shrink-0 opacity-0 pointer-events-none rtl:-scale-x-100 lg:[.level3-link:hover_&amp;]:opacity-100 lg:[.level3-link:hover_&amp;]:translate-x-1/2 rtl:lg:[.level3-link:hover_&amp;]:-translate-x-1/2 lg:transition-[opacity,translate] lg:duration-300 lg:will-change-[opacity,translate]"><use href="#icon-arrow"></use></svg></p><p class="text-sm text-pretty leading-[18px] text-[#71717a]">Shopify는 매년 두 차례, 150개 이상의 업데이트를 진행합니다.</p></a></li><li class=""><p class="text-xs text-pretty uppercase tracking-[.72px] leading-[1.2] mb-3.5 text-[#008060] font-semibold relative mb-6 lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level1-item:hover_&amp;]:delay-[350ms,400ms] lg:[.level1-item:focus-within_&amp;]:delay-[350ms,400ms] sm:w-64">최신 업데이트</p><ul class="level3-container flex flex-col"><li class="lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100 relative py-3 first:pt-0 last:pb-0 before:absolute first:before:top-1.5 before:top-3 before:h-[calc(100%+12px)] before:start-1.5 before:w-px ltr:before:-translate-x-1/2 rtl:before:translate-x-1/2 last:before:hidden lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level2-wrapper:hover_&amp;]:delay-0 before:bg-[#d4d4d8] lg:[.level1-item:hover_&amp;]:delay-[400ms,450ms] lg:[.level1-item:focus-within_&amp;]:delay-[400ms,450ms]"><a href="/editions/spring2026?utm_source=homepage&amp;utm_medium=content&amp;utm_campaign=spring26edition-launch_Q226SETPNZ&amp;utm_content=dotcom-nav-agentic-storefronts-insights-v1#agentic-storefronts-insights" class="relative flex ps-6 text-pretty before:start-[3px] before:top-1 before:translate-y-1/2 before:absolute before:w-1.5 before:h-1.5 before:rounded-full before:z-20 after:start-0 after:top-1 after:absolute after:w-3 after:h-3 after:rounded-full after:z-10 after:transition-colors after:duration-300 after:delay-0 before:bg-[#a1a1aa] before:ring-white before:ring-2 hover:before:bg-[#008060] after:bg-[#d4d4d8] hover:after:bg-[#008060]">Agentic Storefronts</a></li><li class="lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100 relative py-3 first:pt-0 last:pb-0 before:absolute first:before:top-1.5 before:top-3 before:h-[calc(100%+12px)] before:start-1.5 before:w-px ltr:before:-translate-x-1/2 rtl:before:translate-x-1/2 last:before:hidden lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level2-wrapper:hover_&amp;]:delay-0 before:bg-[#d4d4d8] lg:[.level1-item:hover_&amp;]:delay-[450ms,500ms] lg:[.level1-item:focus-within_&amp;]:delay-[450ms,500ms]"><a href="/editions/spring2026?utm_source=homepage&amp;utm_medium=content&amp;utm_campaign=spring26edition-launch_Q226SETPNZ&amp;utm_content=dotcom-nav-campaign-autopilot-v1#introducing-campaign-autopilot" class="relative flex ps-6 text-pretty before:start-[3px] before:top-1 before:translate-y-1/2 before:absolute before:w-1.5 before:h-1.5 before:rounded-full before:z-20 after:start-0 after:top-1 after:absolute after:w-3 after:h-3 after:rounded-full after:z-10 after:transition-colors after:duration-300 after:delay-0 before:bg-[#a1a1aa] before:ring-white before:ring-2 hover:before:bg-[#008060] after:bg-[#d4d4d8] hover:after:bg-[#008060]">Campaign Autopilot</a></li><li class="lg:[.level3-container:hover&gt;&amp;]:opacity-50 lg:[.level3-container:hover&gt;&amp;]:hover:opacity-100 relative py-3 first:pt-0 last:pb-0 before:absolute first:before:top-1.5 before:top-3 before:h-[calc(100%+12px)] before:start-1.5 before:w-px ltr:before:-translate-x-1/2 rtl:before:translate-x-1/2 last:before:hidden lg:opacity-0 lg:-translate-y-6 lg:delay-[50ms,0ms] lg:transition-[opacity,translate] lg:duration-300 lg:ease-ease-out-cubic lg:will-change-[opacity,translate] lg:[.level1-item:hover_&amp;]:opacity-100 lg:[.level1-item:focus-within_&amp;]:opacity-100 lg:[.level1-item:hover_&amp;]:translate-y-0 lg:[.level1-item:focus-within_&amp;]:translate-y-0 lg:[.level2-wrapper:hover_&amp;]:delay-0 before:bg-[#d4d4d8] lg:[.level1-item:hover_&amp;]:delay-[500ms,550ms] lg:[.level1-item:focus-within_&amp;]:delay-[500ms,550ms]"><a href="/editions/spring2026?utm_source=homepage&amp;utm_medium=content&amp;utm_campaign=spring26edition-launch_Q226SETPNZ&amp;utm_content=dotcom-nav-shopify-ai-toolkit-for-devs-v1#shopify-ai-toolkit-for-developers" class="relative flex ps-6 text-pretty before:start-[3px] before:top-1 before:translate-y-1/2 before:absolute before:w-1.5 before:h-1.5 before:rounded-full before:z-20 after:start-0 after:top-1 after:absolute after:w-3 after:h-3 after:rounded-full after:z-10 after:transition-colors after:duration-300 after:delay-0 before:bg-[#a1a1aa] before:ring-white before:ring-2 hover:before:bg-[#008060] after:bg-[#d4d4d8] hover:after:bg-[#008060]">개발자용 Shopify AI Toolkit</a></li></ul></li></ul></div></div></div></li><li class="text-base shrink-0 mr-7 min-[1300px]:mr-8 lg:group-hover:opacity-50 lg:group-hover:hover:opacity-100 lg:[.level1-item:hover_&amp;]:opacity-100 lg:transition-opacity lg:duration-300 z-20"><div class="flex h-full items-center"><a class="flex items-center text-black hover:text-black" href="/kr/pricing">요금제</a></div></li><li class="text-base shrink-0 mr-7 min-[1300px]:mr-8 lg:group-hover:opacity-50 lg:group-hover:hover:opacity-100 lg:[.level1-item:hover_&amp;]:opacity-100 lg:transition-opacity lg:duration-300 z-20"><div class="flex h-full items-center"><a class="flex items-center text-black hover:text-black" href="/kr/enterprise">Enterprise</a></div></li><li class="text-base shrink-0 mr-7 min-[1300px]:mr-8 lg:group-hover:opacity-50 lg:group-hover:hover:opacity-100 lg:[.level1-item:hover_&amp;]:opacity-100 lg:transition-opacity lg:duration-300 z-20"><div class="flex h-full items-center"><a href="/editions/spring2026" class="self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 border-2 ring-button-light-secondary-border hover:ring-button-light-secondary-border-hover focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:bg-button-light-secondary-bg-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled group flex items-center py-2 pl-[13px] pr-[13px] gap-x-1 ring-0 hover:ring-0 focus:ring-0 bg-transparent text-black border-[#D4D4D8] hover:bg-transparent hover:text-black hover:border-black focus:bg-transparent focus:text-black focus:border-black lg:max-[1280px]:px-2" data-component-name="button" data-mode="light" target=""><picture data-component-name="image"><img alt="" class="w-[18px] h-[18px] shrink-0 pointer-events-none -translate-y-[.5px]" height="18" src="https://cdn.shopify.com/b/shopify-brochure2-assets/d35240ac8553d40d3c6f986b3a47e8bb.png?originalWidth=36&amp;originalHeight=36&amp;width=18&amp;height=18" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/d35240ac8553d40d3c6f986b3a47e8bb.png?originalWidth=18&amp;originalHeight=18 1x, https://cdn.shopify.com/b/shopify-brochure2-assets/d35240ac8553d40d3c6f986b3a47e8bb.png?originalWidth=36&amp;originalHeight=36 2x" width="18"/></picture><span class="pointer-events-none lg:hidden min-[1280px]:inline-flex">2026년 봄 Edition</span></a></div></li></ul></nav><div class="ml-auto transition-opacity duration-200 opacity-100 delay-100"><ul class="lg:flex hidden items-center"><li class="me-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="/login?ui_locales=ko" data-component-name="login">로그인</a></li><li class="leading-[0]"><a href="https://admin.shopify.com/signup?locale=ko&amp;language=ko&amp;signup_page=https%3A%2F%2Fwww.shopify.com%2Fkr%2Fblog%2Fdiy-ecommerce-store-design-as-a-beginner&amp;signup_types%5B%5D=paid_trial_experience" class="inline-block self-center overflow-hidden max-w-full ring-inset rounded-button font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled py-2 px-5 text-base whitespace-nowrap" data-component-name="start-free-trial" data-mode="light" target="">무료 체험 시작</a></li></ul><ul class="flex items-center lg:hidden mr-[-15px]"><li><a href="https://admin.shopify.com/signup?locale=ko&amp;language=ko&amp;signup_page=https%3A%2F%2Fwww.shopify.com%2Fkr%2Fblog%2Fdiy-ecommerce-store-design-as-a-beginner&amp;signup_types%5B%5D=paid_trial_experience" class="mr-4 text-base underline text-black" data-component-name="start-free-trial" aria-label="외부 소스: 무료 체험 시작">무료 체험 시작</a></li><li><button class="flex h-12 w-12 cursor-pointer select-none flex-col items-center justify-center gap-1" aria-label="메뉴" aria-expanded="false" aria-haspopup="true" type="button" data-component-name="navigation-toggle-open"><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div></button></li></ul></div></div></div><div class="top-0 w-full z-20 before:absolute before:top-0 before:left-0 before:pointer-events-none before:w-full before:h-global-header-with-border before:z-20 after:absolute after:top-0 after:left-0 after:will-change-opacity after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 after:bg-white text-black before:border-y before:border-black/20 after:opacity-100 pointer-events-auto before:opacity-0 sticky"><div class="h-global-header container flex items-center relative z-20"><div data-component-name="secondary-navigation" class="flex items-center gap-x-8 w-full h-14 sm:h-global-header text-black"><a href="/kr" data-component-name="logo-home" class="inline-block shrink-0 absolute left-0 top-1/2 -translate-y-1/2 transform-opacity will-change-opacity duration-200 z-20 w-9 opacity-0 pointer-events-none"><img src="https://cdn.shopify.com/b/shopify-brochure2-assets/cac815e4ee0f383f7b4b5302b5a7a29a.svg" alt="Shopify" class="h-9" data-component-name="shopify-logo"/></a><nav aria-label="Secondary" class="hidden lg:block h-full transition-transform will-change-transform duration-200 translate-x-0" data-click-outside="dismiss"><ul class="flex items-center gap-x-8 h-full"><li class="relative flex flex-col items-center h-full border-black/30"><a href="/kr/blog/" class="font-bold flex items-center h-full hover:underline outline-4 outline-state-focus focus-visible:outline">블로그</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/kr/blog/topics/비즈니스-시작하기" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">비즈니스 시작하기</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/kr/blog/topics/비즈니스-아이디어-찾기" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">비즈니스 아이디어 찾기</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/kr/blog/topics/온라인으로-수익-창출" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">온라인으로 수익 창출</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/kr/blog/latest" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">최신 정보</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><button type="button" aria-expanded="false" aria-haspopup="true" class="h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1"><span class="flex items-center">더 보기<svg fill="none" viewBox="0 0 20 20" aria-hidden="true" icon="chevron" height="64" width="64" class="rotate-180 shrink-0 w-5 h-7 ml-2"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 13 6-6 6 6"></path></svg></span></button><div id="id_더 보기_4" class="absolute top-[80px] duration-500 left-0 rounded-lg transition-all box-content opacity-0 -translate-y-6 pointer-events-none w-[256px] bg-white text-black shadow-light"><ul class="p-4 w-[224px] box-content"><li class="py-3 px-4 rounded-lg"><a href="/kr/blog/topics/마케팅" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">마케팅</a></li><li class="py-3 px-4 rounded-lg"><a href="/kr/blog/topics" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">모든 주제 보기</a></li></ul></div></li></ul></nav><div class="hidden lg:block ml-auto"><button type="button" class="hidden lg:flex flex-row items-center text-base cursor-pointer blog-navbar-navigation" aria-label="검색" aria-expanded="false">검색<span style="width:16px;height:16px;display:inline-block"></span></button><div class="mb-6 lg:mb-0 lg:absolute lg:bottom-0 lg:left-0 w-full z-50 bg-white lg:hidden"><div class="lg:container lg:h-[71px] flex items-center"><div class="flex flex-row items-center text-base relative w-full border-b border-[#ccc]"><form method="get" action="/kr/blog/diy-ecommerce-store-design-as-a-beginner" class="flex lg:block w-full -mt-4 lg:mt-0" novalidate="" data-component-extra-search-value="" role="search" aria-label="검색" data-discover="true"><input class="outline-0 text-base relative z-20 bg-transparent w-full lg:placeholder:text-transparent py-2 placeholder-[var(--color-shade-500,#71717a)]" type="text" name="header-search" autoComplete="off" placeholder="검색" aria-label="검색 입력" aria-describedby="search-instructions" value=""/><button type="submit" class="lg:hidden p-6 -mr-6" aria-label="검색 제출"><span style="width:16px;height:16px;display:inline-block"></span></button></form><div class="hidden lg:flex absolute z-10 top-1/2 left-0 -translate-y-1/2 flex-row items-center text-base text-[var(--color-shade-500,#71717a)]" id="search-instructions" aria-hidden="true">찾으려는 항목을 입력하세요.<span style="width:16px;height:16px;display:inline-block"></span></div><button type="button" class="hidden lg:block p-2 cursor-pointer ml-auto" aria-label="검색 닫기"><span style="width:20px;height:20px;display:inline-block"></span></button></div></div></div></div><div class="pl-8 app-signup-links transform-opacity duration-200 relative before:h-[22px] before:bg-shade-30 before:w-[1px] before:absolute before:left-0 before:top-[1/2] before:translate-[-1/2] opacity-0 lg:hidden"><ul class="flex items-center"><li class="me-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="/login?ui_locales=ko" data-component-name="login">로그인</a></li><li class="leading-[0]"><a href="https://admin.shopify.com/signup?locale=ko&amp;language=ko&amp;signup_page=https%3A%2F%2Fwww.shopify.com%2Fkr%2Fblog%2Fdiy-ecommerce-store-design-as-a-beginner&amp;signup_types%5B%5D=paid_trial_experience" class="inline-block self-center overflow-hidden max-w-full ring-inset rounded-button font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled py-2 px-5 text-base whitespace-nowrap" data-component-name="start-free-trial" data-mode="light" target="">무료 체험 시작</a></li></ul></div></div></div></div></header><main role="main" id="main" tabindex="-1" class="focus-visible:outline-none"><div><div class="fixed top-0 left-0 h-[6px] z-50 bg-blog-highlight" style="width:null%"></div><section class="grid grid-cols-full bg-component-section-bg text-component-section-content relative z-1 featured-blogs gap-y-0 pb-0 pt-36" data-section-name="" data-component-name="diy-ecommerce-store-design-as-a-beginner" data-viewable-component="true"><div class="relative overflow-hidden bg-marketingBg" data-component-name="blog-header-banner"><div class="container relative flex flex-col items-center text-center pt-16 tablet-xl:pt-12 pb-12 px-[40px] tablet-xl:px-[130px] desktop:px-[210px]"><p class="richtext uppercase font-medium font-aktivgroteskextended mb-2 text-2xl tablet:text-3xl max-w-[680px]">지금 바로 Shopify로 판매를 시작하세요</p><p class="richtext max-w-[680px] text-sm mb-4">지금 바로 Shopify 무료 체험을 시작한 다음, 과정의 모든 단계에서 여러분을 안내할 다양한 자료를 활용하세요.</p><div data-component-name="button-group" class="text-base relative z-20" data-mode="light"><div class="flex gap-y-sm flex-wrap gap-x-sm justify-center"><a href="https://admin.shopify.com/signup?locale=ko&amp;language=ko&amp;signup_page=https%3A%2F%2Fwww.shopify.com%2Fkr%2Fblog%2Fdiy-ecommerce-store-design-as-a-beginner&amp;signup_types%5B%5D=paid_trial_experience" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled" data-component-name="button" data-mode="light" target="">무료 체험 시작</a><a href="/kr" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline hover:ring-1 disabled:hover-ring-0 border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:bg-button-light-secondary-bg-hover hover:border-button-light-secondary-border-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:bg-button-light-secondary-bg-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:bg-button-light-secondary-bg-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled" data-component-name="button" data-mode="light" target="">자세히 알아보기</a></div></div></div></div><article id="article" itemscope="" itemType="https://schema.org/Article" class="bg-white"><meta itemProp="mainEntityOfPage" content="/kr/blog/diy-ecommerce-store-design-as-a-beginner"/><meta itemProp="dateModified" content="2026-01-16T06:20:00.000Z"/><meta itemProp="datePublished" content="2026-01-16T00:00:00.000Z"/><meta itemProp="image" content="https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg"/><div class="relative"><div class="pt-xl pb-xl md:text-center" data-mode="light"><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-md gap-y-2xl bg-component-grid-bg" data-component-name="grid"><div class="col-span-4 xs:col-span-4 sm:col-span-8 md:col-span-12 col-start-1 md:max-w-2xl lg:max-w-3xl md:mx-auto"><nav class="uppercase text-black text-eyebrow-md pb-xs"><a data-component-name="link" class="group focus:outline-state-focus outline-2 outline-offset-2 transition-colors duration-150 ease-in-out font-component-link text-component-link-content hover:text-component-link-content-hover active:text-component-link-content-active disabled:text-component-link-content-disabled text-component-link-sm no-underline [&amp;_span]:no-underline" style="widows:2" href="/kr/blog/"><span class="inline underline hover:no-underline">블로그</span></a><span class="px-xs">•</span><a data-component-name="link" class="group focus:outline-state-focus outline-2 outline-offset-2 transition-colors duration-150 ease-in-out font-component-link text-component-link-content hover:text-component-link-content-hover active:text-component-link-content-active disabled:text-component-link-content-disabled text-component-link-sm no-underline [&amp;_span]:no-underline" style="widows:2" href="/kr/blog/topics/브랜드"><span class="inline underline hover:no-underline">브랜드</span></a></nav><h1 class="text-theme-content text-t2"><span itemProp="headline">쇼피파이 쇼핑몰 디자인 가이드</span></h1><p class="text-theme-content text-body-lg mt-sm opacity-60">전문 디자이너를 영입하든 영입하지 않든 간에 Shopify 웹사이트를 디자인하는 방법은 쉽습니다. 이 글의 Shopify 쇼핑몰 디자인 가이드를 참고하세요.</p><div class="lg:hidden mt-md flex items-center gap-md w-full md:justify-center" itemProp="author" itemscope="" itemType="https://schema.org/Person"><img src="https://www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=200&amp;d=404" alt="" width="48" height="48" class="size-12 md:size-14 rounded-full object-cover shrink-0"/><div class="flex flex-col text-left"><span class="text-theme-content text-t7"><a data-component-name="link" class="group focus:outline-state-focus outline-2 outline-offset-2 transition-colors duration-150 ease-in-out font-component-link text-component-link-content hover:text-component-link-content-hover active:text-component-link-content-active disabled:text-component-link-content-disabled text-component-link-sm no-underline [&amp;_span]:no-underline" style="widows:2" href="/kr/blog/authors/shopify-팀"><span class="inline underline hover:no-underline"><span itemProp="name">Shopify 팀 작성</span></span></a></span><span class="text-body-sm text-theme-content-body">2026년 1월 16일<!-- --> • 읽는 데 8분</span></div></div></div></div></div><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-md gap-y-2xl bg-component-grid-bg" data-component-name="grid"><div class="col-span-4 xs:col-span-4 sm:col-span-8 md:col-span-12 col-start-1"><div class="-mx-margin md:mx-0 overflow-hidden flex justify-center"><img class="" src="https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782" alt="분홍색 배경에 컴퓨터 모니터와 쇼핑백이 가득 차 있는 쇼핑 카트가 있습니다." loading="eager" decoding="async" width="1848" height="782" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=200 200w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=400 400w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=600 600w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=800 800w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=1000 1000w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=1200 1200w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=1400 1400w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=1600 1600w, https://cdn.shopify.com/b/shopify-brochure2-assets/567372939f51aa69af3b5189dd49bb50.jpg?originalWidth=1848&amp;originalHeight=782&amp;width=1800 1800w" data-component-name="auto-responsive-image"/></div></div></div></div><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-y-2xl bg-component-grid-bg gap-x-xl my-xl" data-component-name="grid"><div class="col-span-4 xs:col-span-4 sm:col-span-8 md:col-span-4 lg:col-span-3 col-start-1" data-component-name="blog-left-sidebar"><nav aria-label="이 페이지에서" data-component-name="blog-left-sidebar-nav" class="space-y-2xl rounded-lg bg-warm-gray-50 p-md md:sticky md:top-[calc(var(--header-height)*2)] md:max-h-[calc(100vh-var(--header-height))] md:overflow-auto md:rounded-none md:bg-transparent md:p-0"><div class="bg-blog-bannerBg p-md"><p class="text-theme-content richtext text-t5">지금 온라인 비즈니스를 시작하세요.</p><p class="text-theme-content richtext text-t5 font-bold">무료입니다.</p><a data-component-name="link" class="group focus:outline-state-focus outline-2 outline-offset-2 transition-colors duration-150 ease-in-out font-component-link text-component-link-content hover:text-component-link-content-hover active:text-component-link-content-active disabled:text-component-link-content-disabled text-component-link-lg group mt-sm flex items-center justify-between border-b border-black pb-0 [&amp;_span]:no-underline [&amp;_span]:flex [&amp;_span]:w-full [&amp;_span]:items-center [&amp;_span]:justify-between" style="widows:2" aria-label="외부 소스: 무료 체험 시작 " rel="noopener noreferrer" href="https://admin.shopify.com/signup?locale=ko&amp;language=ko&amp;signup_page=https%3A%2F%2Fwww.shopify.com%2Fkr%2Fblog%2Fdiy-ecommerce-store-design-as-a-beginner&amp;signup_types%5B%5D=paid_trial_experience"><span class="inline underline hover:no-underline">무료 체험 시작<svg fill="none" viewBox="0 0 20 20" aria-hidden="true" icon="chevron" width="20" height="20" class="text-component-icon rotate-90"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 13 6-6 6 6"></path></svg></span></a></div></nav></div><div class="col-span-4 xs:col-span-4 sm:col-span-8 md:col-span-8 lg:col-span-6 col-start-1"><div id="article-content" class="text-body-base text-theme-content-body [&amp;_h2]:text-t3 [&amp;_h2]:mt-xl [&amp;_h2]:mb-md [&amp;_h2]:text-black [&amp;_.heading--2]:text-t5 [&amp;_.heading--2]:text-black [&amp;_.heading--2]:mb-md [&amp;_h3]:text-t4 [&amp;_h3]:mt-xl [&amp;_h3]:mb-md [&amp;_h3]:text-black [&amp;_h4]:text-t5 [&amp;_h4]:mt-xl [&amp;_h4]:mb-md [&amp;_h4]:text-black [&amp;_h5]:text-t6 [&amp;_.heading--4]:text-t5 [&amp;_.heading--4]:text-black [&amp;_.heading--4]:tracking-[-.02em] [&amp;_p]:mb-md [&amp;_p]:[overflow-wrap:anywhere] [&amp;_hr]:mb-md [&amp;_a]:text-black [&amp;_a]:font-[550] [&amp;_a]:underline [&amp;_a:hover]:no-underline [&amp;_sup_a]:no-underline [&amp;_sup_a:hover]:underline [&amp;_.marketing-button]:text-white [&amp;_.marketing-button]:no-underline [&amp;_strong]:font-medium [&amp;_strong]:text-black [&amp;_img]:my-lg [&amp;_img]:inline-block [&amp;_figure]:mb-lg [&amp;_figure&gt;img]:mb-0 [&amp;_a&gt;img]:mt-3 [&amp;_a&gt;img]:mb-lg [&amp;_a&gt;img]:h-[revert-layer] [&amp;_a&gt;img]:inline-block [&amp;_p_img:not(#text-cta_*)]:!mt-0 [&amp;_p_img:not(#text-cta_*)]:!mb-md [&amp;_figcaption]:mb-lg [&amp;_figcaption]:text-body-sm [&amp;_figcaption]:mt-2 [&amp;_ul]:list-disc [&amp;_ul]:mb-xs [&amp;_ul]:pl-4 [&amp;_ul_li]:pl-1 [&amp;_ol]:list-decimal [&amp;_ol]:mb-xs [&amp;_ol]:pl-4 [&amp;_ol_li]:pl-1 [&amp;_ol_li::marker]:font-bold [&amp;_li+li]:mt-xs [&amp;_ul+p]:mt-md [&amp;_ol+p]:mt-md [&amp;_iframe]:max-w-full [&amp;_iframe]:mt-3 [&amp;_iframe]:mb-lg [&amp;_.aspect-video_iframe]:mt-0 [&amp;_.container]:m-0 [&amp;_.container]:flex [&amp;_.container]:gap-5 [&amp;_.container]:flex-wrap [&amp;_.green]:text-[green] [&amp;_.red]:text-[red] [&amp;_.pros]:bg-[#eafaea] [&amp;_.pros]:rounded-[10px] [&amp;_.pros]:p-5 [&amp;_.pros_h3]:mt-2 [&amp;_.cons]:bg-[#ffebe6] [&amp;_.cons]:rounded-[10px] [&amp;_.cons]:p-5 [&amp;_.cons_h3]:mt-2 [&amp;_.pros]:tablet:flex-[1_0_calc(50%-10px)] [&amp;_.pros]:flex-[1_0_100%] [&amp;_.cons]:tablet:flex-[1_0_calc(50%-10px)] [&amp;_.cons]:flex-[1_0_100%] [&amp;_.pros_.grid-container]:grid [&amp;_.cons_.grid-container]:grid [&amp;_.grid-container]:gap-[5px] [&amp;_.grid-container]:grid-cols-[15px_auto] [&amp;_.pros_.grid-container]:p-[5px] [&amp;_.cons_.grid-container]:p-[5px] [&amp;_[id^=&quot;article-source-&quot;]]:scroll-mt-40 article-content [&amp;_.truncated-text]:relative [&amp;_.truncated-text]:max-h-[300px] [&amp;_.truncated-text]:overflow-hidden [&amp;_.truncated-text]:mb-6 [&amp;_.truncated-text::before]:absolute [&amp;_.truncated-text::before]:content-[&quot;&quot;] [&amp;_.truncated-text::before]:bottom-0 [&amp;_.truncated-text::before]:w-full [&amp;_.truncated-text::before]:h-[150px] [&amp;_.truncated-text::before]:bg-gradient-to-t [&amp;_.truncated-text::before]:from-white [&amp;_.truncated-text::before]:from-50% [&amp;_.truncated-text::before]:to-transparent [&amp;_.truncated-text\_\_toggle]:absolute [&amp;_.truncated-text\_\_toggle]:bottom-0 [&amp;_.truncated-text\_\_toggle]:w-full [&amp;_.truncated-text\_\_toggle]:text-center [&amp;_.marketing-code]:bg-[#f0f1f2] [&amp;_.marketing-code]:font-bold [&amp;_.marketing-code]:p-1 [&amp;_.marketing-code.marketing-code--block]:p-4 [&amp;_.marketing-code--block]:block [&amp;_.marketing-code--block]:max-w-full [&amp;_.marketing-code--block]:overflow-x-scroll [&amp;_.marketing-code--block]:mb-5 [&amp;_.partners-signup]:mt-6 [&amp;_.partners-signup]:mb-12 [&amp;_.partners-signup]:bg-gray-200 [&amp;_.partners-signup]:p-3 [&amp;_.partners-signup]:md:p-6 [&amp;_.table]:block [&amp;_.table]:overflow-x-scroll [&amp;_.table]:max-w-full [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]]:flex [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]]:flex-col [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]]:gap-md [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_.marketing-button]:self-start [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_:is(p,h2,h3,h4)]:!my-0 [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_.heading--4+p]:!-mt-2 [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_.heading--4+p]:md:!-mt-4 [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_.heading--4]:!text-t4 [&amp;_[data-component-name=&quot;blog-cta-marketing&quot;]_p]:!text-body-base [&amp;_.blog-cta-shopify-logo]:!font-normal [&amp;_.blog-cta-shopify-logo]:!text-t6 [&amp;_.blog-cta-shopify-logo]:!mb-md [&amp;_.blog-cta-shopify-logo]:!ml-0 [&amp;_.blog-cta-container_[data-component-name=&quot;message&quot;]]:!pt-sm [&amp;_.blog-cta-container_[data-component-name=&quot;message&quot;]]:!ml-0 [&amp;_.blog-cta-container_[data-component-name=&quot;message&quot;]]:!text-body-sm [&amp;_.blog-cta-container_[data-component-name=&quot;message&quot;]_span]:!text-body-sm [&amp;_[data-email-signup]_br]:hidden [&amp;_[data-email-signup]_.marketing-block]:!my-xl [&amp;_[data-email-signup]_.heading--4]:!mb-2 [&amp;_[data-email-signup]_.heading--4]:!ml-0 [&amp;_[data-email-signup]_form&gt;p]:!mb-0 [&amp;_[data-email-signup]_[data-component-name=&quot;join-waitlist-form-button&quot;]]:!bg-black [&amp;_[data-email-signup]_[data-component-name=&quot;join-waitlist-form-button&quot;]]:!text-white [&amp;_[data-email-signup]_[data-component-name=&quot;join-waitlist-form-button&quot;]]:hover:!bg-[#3f3f46] [&amp;_[data-email-signup]_[data-component-name=&quot;join-waitlist-form-button&quot;]]:active:!bg-[#71717a] [&amp;_[data-component-name=&quot;blog-read-more&quot;]]:!my-lg [&amp;_[data-component-name=&quot;blog-read-more&quot;]]:font-sans [&amp;_[data-component-name=&quot;blog-read-more&quot;]_h2]:!font-sans [&amp;_[data-component-name=&quot;blog-read-more&quot;]_h2]:!text-t4 [&amp;_[data-component-name=&quot;blog-read-more&quot;]_a]:!text-body-base [&amp;_[data-component-name=&quot;blog-read-more&quot;]_a]:!text-component-link-content [&amp;_[data-component-name=&quot;blog-read-more&quot;]_a]:hover:!text-component-link-content-hover [&amp;_[data-component-name=&quot;blog-read-more&quot;]_li]:!mt-sm [&amp;_#faq-section]:!my-xl [&amp;_:is([data-component-name=&quot;blog-cta-marketing&quot;],.blog-cta-container,[data-email-signup]_.marketing-block,[data-component-name=&quot;blog-read-more&quot;],#faq-section,[data-guide]&gt;div)]:!p-lg [&amp;_[data-guide]&gt;div]:!font-sans" itemProp="articleBody"><div><p>"2014년에 Sara Mote와 <a href="https://mote.agency/" rel="nofollow noopener noreferrer" target="_blank">MOTE</a> 에이전시를 설립했습니다. MOTE는 전자상거래에 특화되어 있으며, 세련된 디자인, 최첨단 엔지니어링, 그리고 끊임없이 변화하는 시장에 대한 최고 수준의 서비스를 제공합니다. 웹 개발자였던 경력을 활용하여 혁신에 대한 열정과 고객과의 지속적인 관계를 구축하고자 하는 브랜드를 위한 웹사이트 제작에 집중해 왔습니다. 26년의 경험을 통해 얻은 통찰력을 공유하겠습니다."</p>
<p>전자상거래 웹사이트를 디자인할 때, 아름답고 전략적인 요소를 모두 갖춘 것을 만들어야 합니다. Shopify는 코딩이나 디자인 경험이 없어도 두 가지 모두를 충족할 수 있는 <a href="/kr/website/builder">전자상거래 웹사이트를 쉽게 만들 수 있도록</a> 합니다.</p>
<p>선도적인 전자상거래 플랫폼인 Shopify는 판매자들이 <a href="https://themes.shopify.com?locale=ko">사용자 정의 가능한 테마</a>를 사용하여 온라인 스토어를 구축할 수 있게 합니다. 각 Shopify 웹사이트는 <a href="/kr/checkout">원클릭 결제</a> 기능과 <a href="/kr/magic">AI 기능</a>이 제공되어 제품 설명, FAQ 질문에 대한 답변, 마케팅 이메일 작성을 도와줍니다. 이러한 도구는 사용하기에 간단하고, 지금 바로 DIY 사이트에서 판매를 시작할 수 있으며, 나중에 Shopify 스토어를 확장하면서 전문 디자이너를 고용할 수 있는 옵션도 있습니다.</p><div id="text-cta"></div>
<div class="marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [&amp;_h2]:!mt-0 [&amp;_h2]:mb-6 [&amp;_h2]:text-t5 [&amp;_h3]:!mt-0 [&amp;_h3]:mb-6 [&amp;_h3]:text-t7 [&amp;_h4]:!mt-0 [&amp;_h4]:mb-6 [&amp;_h4]:text-t8 [&amp;_ul]:!mt-0 [&amp;_ul]:mb-6 [&amp;_ul:last-child]:mb-0 [&amp;_ol]:!mt-0 [&amp;_ol]:mb-6 [&amp;_ol:last-child]:mb-0 [&amp;_p]:!mt-0 [&amp;_p]:mb-6 [&amp;_p:last-child]:mb-0 border-blog-highlight">
<p><strong>목차</strong></p>
<ul>
<li><a href="#7">Shopify 웹사이트 디자인 방법</a></li>
<li><a href="#8">Shopify 스토어를 위해 디자이너를 고용해야 하는 시기</a></li>
<li><a href="#9">Shopify 웹사이트를 디자인하는 방법 FAQ</a></li>
</ul>
</div>
<p><img src="https://cdn.shopify.com/s/files/1/0841/2764/5718/files/image9_bd50881f-87b6-4c46-9b4b-7e9164786fa4.jpg?v=1768630573" alt="Shopify는 스토어를 위해 다양하고 스타일리쉬한 테마를 제공합니다." style="float: none;" class="border block--bordered"></p>
<h2 id="7"><strong>Shopify 웹사이트 디자인 방법</strong></h2>
<ol>
<li><a href="#1">브랜드 스타일 가이드 만들기</a></li>
<li><a href="#2">테마 선택하기</a></li>
<li><a href="#3">브랜드 요소 추가하기</a></li>
<li><a href="#4">성능 점검하기</a></li>
<li><a href="#5">큐레이션에 집중하기</a></li>
<li><a href="#6">채널 간 조화 이루기</a></li>
</ol>
<p>Shopify 사이트를 디자인할 때 가장 중요한 것은 성능과 사용 편의성에 중점을 두면서 브랜드를 확립하는 것입니다. 이를 통해 처음부터 시장에서 돋보일 수 있는 웹사이트를 구축해야 합니다.</p>
<p>Shopify 웹사이트를 디자인하는 가장 좋은 방법은 다음과 같습니다.</p>
<h3 id="1"><strong>1. 브랜드 스타일 가이드 만들기</strong></h3>
<p>웹사이트를 구축하기 전에 브랜드 관련 결정을 몇 가지 내려야 합니다. 이미 <a href="/kr/blog/brand-guidelines">브랜드 가이드라인</a>이 있다면 좋겠지만 없다면, 지금이 타이포그래피, 브랜드 색상, 로고를 확정할 때입니다.</p>
<h4><strong>타이포그래피</strong></h4>
<p>기본 상업용 글꼴과 같은 읽기 쉬우면서도 일반적이지 않은 글꼴로 시작하세요. 이는 <a href="https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#shopify-font-library">Shopify 글꼴 라이브러리</a>(현재 한국어 지원 안 됨)에서 제공하는 무료 글꼴로, <a href="https://www.therow.com/ko-kr" rel="nofollow noopener noreferrer" target="_blank">The Row</a>와 같은 고급 브랜드에서 사용됩니다.</p>
<p>타이포그래피는 매우 빠르게 개성을 전달할 수 있습니다. 글꼴 선택은 웹사이트의 그리드 레이아웃에도 영향을 미치므로, 그 레이아웃을 기반으로 시작하는 것이 현명합니다.</p>
<h4><strong>색상</strong></h4>
<p>선택한 색상 팔레트는 <a href="/kr/blog/color-psychology">소비자가 브랜드에 대해 느끼는 감정</a>과 사이트의 정보를 이해하는 방식에 영향을 미칠 수 있습니다. 대비가 강한 색상 팔레트는 가독성이 뛰어나고 <a href="/kr/blog/web-accessibility">접근성</a>이 좋기 때문에 좋은 선택입니다.</p>
<p>예를 들어, 검정과 흰색을 브랜드 팔레트로 선택할 때 특정한 음영을 선택하여 분위기와 브랜드 정체성을 전달할 수 있습니다.</p>
<h4><strong>로고</strong></h4>
<p>로고는 브랜드 인지도와 인식을 구축하는 데 중요한 요소입니다. <a href="/kr/blog/how-to-design-logo">로고를 만드는 데</a> 시간을 투자하세요. 로고는 기억에 남아야 하며, 브랜드의 본질을 전달해야 합니다.</p>
<p>디자이너와 협력할 계획이라면, 디자이너에게 여러 방향을 제시받아 최종 로고를 고르는 데 도움을 받을 수 있습니다. 현재 디자이너를 고용한 예산이 충분하지 않다면, <a href="/kr/blog/online-logo-makers">온라인 로고 제작 도구</a>를 사용하여 첫 로고를 만들 수 있습니다.</p>
<p><img src="https://cdn.shopify.com/s/files/1/0841/2764/5718/files/image8_3c29a13f-a468-47cc-9abd-b762a79a6fdf.jpg?v=1768630573" alt="패션 브랜드 The Row는 Shopify 글꼴의 기본 상업용 글꼴을 사용합니다." style="float: none;" class="border block--bordered" loading="lazy"></p>
<h3 id="2"><strong>2. 테마 선택하기</strong></h3>
<p><a href="https://themes.shopify.com/themes?locale=ko">Shopify 테마 스토어</a>에는 다양한 선택지가 있으며, 유료 테마는 최대 450달러(약 65만 6,280원)까지 다양합니다.</p>
<p>어느 걸 선택해야 할지 모르겠다면, <a href="https://themes.shopify.com/themes/dawn/presets/dawn?locale=ko">Dawn</a>을 시도해 보세요. Dawn은 Shopify 스토어를 위한 완벽한 기본 틀로 <a href="/kr/blog/120261189-conversion-rate-optimization">전환율</a>에 매우 중요한 뛰어난 모바일 성능을 가진 무료 Shopify 테마입니다.</p>
<p>테마를 비교할 때 고려해야 할 사항은 다음과 같습니다.</p>
<h4><strong>예산</strong></h4>
<p>자본이 제한적인 신규 사업자라면, 무료 테마로 시작하여 얼마나 성장할 수 있는지 확인하는 것이 좋습니다. 사업이 성장한 후 프리미엄 테마로 업그레이드할 수 있습니다. 그때는 어떤 기능에 비용을 지불할 의사가 있는지 더 잘 알게 될 것입니다. 더 많은 기능이 필요하지만 디자이너를 고용할 예산이 없다면, 프리미엄 테마가 좋은 선택이 될 수 있습니다.</p>
<h4><strong>제품 카탈로그 크기</strong></h4>
<p>테마 선택은 카탈로그에 있는 제품 수에 따라 결정됩니다. 대부분의 무료 및 유료 테마는 200개 이상의 제품을 지원하지만, 일부 품질 높은 테마(예: Dawn)는 최대 199개 제품까지 지원하며, 최대 9개 제품까지 지원하는 테마도 소수 있습니다. <a href="https://themes.shopify.com?locale=ko">Shopify 테마 스토어</a>에서 카탈로그 크기별로 테마를 쉽게 필터링할 수 있습니다.</p>
<h4><strong>웹사이트 기능</strong></h4>
<p>Shopify 스토어에 필요한 특정 기능, 예를 들어 고정 <a href="/kr/blog/website-navigation">내비게이션</a>, 동영상, 빠른 결제와 같은 기능이 있다면, Shopify 테마 스토어 내 검색창을 사용하여 해당 기능이 있는 테마만 찾아볼 수 있습니다.</p>
<h4><strong>모바일 경험</strong></h4>
<p>웹사이트 트래픽의 대부분이 Instagram이나 TikTok을 통해 제품을 찾는 경우처럼 모바일에서 발생한다면, 화려한 기능보다 <a href="/kr/blog/website-load-time-statistics">빠른 로딩 속도</a>를 우선시하는 것이 좋습니다.</p>
<p>모바일 사용자는 화려한 기능을 아예 사용하지 않을 수도 있으며, 사이트가 로딩되는 데 너무 오랜 시간이 걸리면 이탈할 가능성이 높습니다. 이는 <a href="/kr/blog/seo-checklist-online-store">검색 엔진 최적화</a>(SEO)에도 도움이 됩니다. 테마를 비교할 때는 데모 테마의 <a href="/kr/blog/mobile-website">모바일 버전</a>을 꼭 확인하세요. 휴대전화로 확인해 보는 것을 추천합니다.</p>
<p><img src="https://cdn.shopify.com/s/files/1/0841/2764/5718/files/image4_c614fb06-c627-46e0-bd80-77c28f9afb01.jpg?v=1768630573" alt="Dawn은 Shopify의 고성능 무료 테마입니다." style="float: none;" class="border block--bordered" loading="lazy"></p>
<h3 id="3"><strong>3. 브랜드 요소 추가하기</strong></h3>
<p>테마를 선택한 후, 브랜드 요소를 추가할 차례입니다. Shopify 사이트에 브랜드 요소를 추가하는 방법은 다음과 같습니다.</p>
<h4><strong>로고와 브랜드 색상 추가하기</strong></h4>
<p>Shopify 관리자 페이지에서 “설정 &gt; 일반”을 선택한 후, 브랜드 자산 섹션에서 “관리하기”를 선택합니다. 그러면 로고와 브랜드 색상을 추가할 수 있습니다. 이들은 자동으로 Shopify 테마와 브랜드 API가 있는 다른 채널에 적용됩니다.</p>
<h4><strong>테마 사용자 지정하기</strong></h4>
<p><a href="https://help.shopify.com/ko/manual/online-store/themes/theme-structure/theme-settings">테마 편집기</a>에서 Shopify 스토어를 추가로 사용자 지정할 수 있습니다. “온라인 스토어 &gt; 테마”로 이동하여 편집할 테마를 클릭한 후, “테마 편집”을 선택합니다. 그런 다음 테마 설정 기어 아이콘을 클릭하여 글꼴부터 레이아웃 특성(수평 및 수직 간격 등)까지 모든 것을 사용자 지정할 수 있습니다.</p>
<h4><strong>브랜드 결제 경험 만들기</strong></h4>
<p>작은 디테일이 브랜드에 대해 많은 것을 말해줄 수 있습니다. 완전한 브랜드 경험을 위해서는 <a href="/kr/blog/ecommerce-checkout">결제 경험</a>을 사용자 지정해야 하며, 이는 결제 후 Shopify 스토어에 표시되는 감사 및 주문 상태 페이지를 포함합니다.</p>
<p>이들은 모두 웹사이트의 나머지 부분과 일치해야 합니다. “설정 &gt; 결제 &gt; 사용자 지정”으로 이동하여 로고를 추가하고 색상과 글꼴을 변경할 수 있습니다.</p>
<h4><strong>이메일 템플릿 편집하기</strong></h4>
<p>고객이 주문할 때, 그들과의 관계를 더욱 발전시킬 기회가 생깁니다. 일반적인 이메일을 보내는 대신, Shopify 관리 페이지에서 브랜드 이메일 템플릿을 만드세요.</p>
<p>“설정 &gt; 알림 &gt; 고객 알림 &gt; 이메일 템플릿 사용자 지정”으로 이동하세요.</p>
<p>로고와 브랜드 색상을 추가하여 이메일을 즉시 인식할 수 있게 합니다. 텍스트도 편집하여 고객에게 <a href="/kr/blog/brand-values">공유 가치</a>를 상기시키거나 제품 교육을 통해 구매에 대한 기대감을 높이세요. 이메일에 <a href="/kr/blog/brand-voice">브랜드 목소리</a>와 개성을 담는 것도 잊지 마세요.</p>
<h4><strong>사진 활용하기</strong></h4>
<p>단순하고 직관적인 웹사이트라고 해서 꼭 지루하진 않습니다. <a href="/kr/blog/lifestyle-photography">라이프스타일</a> 및 <a href="/kr/blog/12206313-the-ultimate-diy-guide-to-beautiful-product-photography">제품 사진</a>을 통해 많은 브랜드 개성을 전달할 수 있습니다. <a href="/kr/blog/what-is-pdp-in-ecommerce">제품 페이지</a>의 이미지와 일관성을 유지하세요. 예를 들어, 각 제품을 동일한 색상 배경에서 같은 <a href="/kr/blog/natural-lighting-product-photography">조명</a>으로 촬영합니다.</p>
<p>고품질 제품 사진은

이 자료가 속한 분류

브랜드 전략·포지셔닝 테마 선택·설치 스토어 디자인·브랜딩 적용 사이트 속도·모바일 UX

← 돌아가기