Magento 테마 개발 튜토리얼: 초보자를 위한 가이드

Author

TECHVIFY 팀은 기술과 혁신에 열정을 가진 경험 많은 전문가들로 구성되어 있습니다.

Magento 개발은 전자상거래 웹사이트를 만드는 데 있어 부인할 수 없이 중요한 역할을 합니다.

온라인 상점을 진정으로 업그레이드하려면, 기업은 Magento 테마 개발에 충분한 투자를 해야 합니다. 이는 웹사이트의 전체적인 외관, 분위기, 미적 요소를 디자인하는 데 결정적인 요소입니다.

TECHVIFY가 Magento 테마 개발을 위한 단계별 가이드를 소개합니다. 이 단계를 완전히 이해하면 전체 과정을 더 잘 파악할 수 있습니다.

더 알아보기: Top 7 Magento 개발 모범 사례

1단계: 테마를 포함하는 디렉토리 생성

/app/design/frontend로 이동하여 테마 패키지에 사용할 공급업체 이름으로 새 디렉토리를 만듭니다: /app/design/frontend/.
공급업체 디렉토리 아래에 테마 이름에 따라 디렉토리를 생성합니다.

app/design/frontend/

├── /

│ │ ├──…/

│ │ │ ├── …

이 구조를 만든 후에는 Magento가 테마가 존재함을 알 수 있도록 테마를 선언해야 합니다. Magento 백엔드에서 현재 테마로 설정할 수 있습니다.

2단계: 테마 선언

테마를 선언하려면 테마 이름이 포함된 theme.xml 파일을 생성해야 합니다. 테마가 상위 테마를 상속하는 경우 .xml 파일에 상위 테마 이름도 포함되어야 합니다. 필요 시 테마 미리보기 이미지도 필요합니다.

기존 theme.xml 파일을 추가하거나 복사하여 테마 디렉토리 app/design/frontend//에 넣습니다.
다음 예시를 참고하여 구성합니다:

m2-theme
    Magento/
    
    media/m2-theme-image.jpg

태그에는 테마 이름을 입력합니다. <parent> 태그에는 폴백 용도로 상위 테마를 지정할 수 있습니다.</p><p><preview_image> 태그의 테마 이미지는 썸네일 이미지로, 테마 페이지 미리보기에 표시됩니다. 썸네일 이미지는 <em>app/design/frontend/<theme>/m2-theme/media/m2-theme-image.jpg</em>에 위치합니다.</p><p>theme.xml에서 테마 제목이나 상위 테마 정보를 변경한 후 테마가 이미 등록되어 있다면, 변경 사항을 데이터베이스에 저장하려면 Magento 관리자 페이지를 열거나 새로고침해야 합니다.</p><h2>3단계: Composer 패키지 만들기</h2><p>Magento 2 테마는 Composer 패키지로 배포되어 서버에 패키지로 등록됩니다. composer.json 파일을 추가하는 것은 선택 사항입니다.</p><p>composer.json 파일은 테마 의존성 정보를 제공합니다. 올바른 의존성과 버전은 현재 theme.xml 파일을 참조하세요.</p><p>테마 composer.json 파일 예시:</p><pre><code>{ "name": "<vendor>/m2-theme", "description": "Magento 2 테마 커스터마이징", "require": { "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4", "<vendor>/m2-theme": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "Registration.php" ] } }</code></pre><h2>4단계: registration.php 추가</h2><p>시스템에 테마를 등록하려면 테마 디렉토리에 registration.php 파일을 아래 내용으로 추가하세요:</p><pre><code><?php /** Copyright © Magento, Inc. All rights reserved. See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar:: register; \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/<Vendor>/<theme>', __DIR__ );</code></pre><p><Vendor>는 공급업체 이름이고 <theme>는 테마 코드입니다.</p><h2>5단계: 정적 파일용 디렉토리 구조 생성</h2><p>테마 패키지는 스타일, 폰트, JavaScript, 이미지 등 여러 유형의 파일로 구성됩니다. 각 유형은 테마 디렉토리 내 web 하위 디렉토리에 저장해야 합니다:</p><p><em>app/design/<area>/<Vendor>/<theme>/</em></p><p><em>├</em><em>──</em><em> web/</em></p><p><em>│ </em><em>├</em><em>──</em><em> css/</em></p><p><em>│ │ </em><em>├</em><em>──</em><em> source/</em><em></em></p><p><em>│ </em><em>├</em><em>──</em><em> fonts/</em></p><p><em>│ </em><em>├</em><em>──</em><em> images/</em></p><p><em>│ </em><em>├</em><em>──</em><em> js/</em></p><p>…/<theme>/web/images 디렉토리에는 일반적인 테마 관련 정적 파일을 저장합니다.</p><h2>6단계: 이미지 구성</h2><p>테마에서 사용하는 상품 이미지 크기 및 기타 속성은 view.xml 구성 파일에서 설정합니다. 테마에 필수이며, 상위 테마에 존재하면 선택 사항입니다.</p><p>테마의 상품 이미지 크기가 상위 테마와 다르거나 상속하지 않는 경우 view.xml을 추가해야 합니다.</p><p>상위 테마의 etc. 디렉토리에서 view.xml 파일을 복사하거나 Blank 테마에서 복사합니다. view.xml 파일에서 모든 스토어프론트 상품 이미지 크기를 구성하세요.</p><pre><code><image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image></code></pre><h2>7단계: 테마 로고 선언</h2><p>Magento 애플리케이션에서 로고 이미지의 기본 형식과 이름은 logo.svg입니다. 다른 이름과 형식의 로고 파일을 사용할 수 있지만 선언이 필요할 수 있습니다.</p><p>테마 로고를 선언하려면 Magento_Theme/layout 디렉토리를 만들고 default.xml 파일에 다음 코드를 추가하세요. default.xml 파일 경로는 <em>/app/design/frontend/<theme>/m2-theme/Magento_Theme/layout/default.xml</em>입니다.</p><pre><code><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/m2-logo.png</argument> <argument name="logo_img_width" xsi:type="number">350</argument> <argument name="logo_img_height" xsi:type="number">350</argument> </arguments> </referenceBlock> </body> </page></code></pre><h2>8단계: 테마 레이아웃 커스터마이징</h2><p>기본 테마 구조가 생성되면 이제 레이아웃을 커스터마이징하거나 덮어쓰고 새 테마에 맞는 디자인 레이아웃을 설정할 수 있습니다.</p><p>테마 레이아웃을 덮어쓰려면 동일한 이름의 레이아웃 파일을 다음 위치에 넣어야 합니다: <em>/app/design/frontend/Magento/<theme>/Magento_Theme/layout/default.xml</em></p><p>이 파일들은 다음 레이아웃을 덮어씁니다: <em>/<vendor>/m2-theme/Magento_Theme/layout/default.xml</em></p><h2>9단계: Magento 관리자 패널에서 테마 구성</h2><p>다음 단계는 Magento 관리자에서 생성한 커스텀 테마를 웹사이트에 적용하는 것입니다: 관리자->콘텐츠->디자인->구성</p><p>스토어 뷰에서 편집을 클릭하면 디자인 구성 페이지가 나타납니다. 기본 테마 탭에서 새로 만든 테마를 적용된 테마 드롭다운에서 선택하고 구성 저장을 클릭하여 테마를 적용합니다.</p><h2>10단계: 최종 배포</h2><p>테마를 Magento 스토어프론트에 표시하려면 다음 명령어를 실행하여 파일을 배포해야 합니다:</p><ol><li>Magento 스토어 SSH 계정에 로그인</li><li>Magento 루트 디렉토리로 이동하여 아래 명령어 실행:</li></ol><pre><code><em>php bin/magento setup:upgrade</em></code></pre><ol start="3"><li>테마 파일을 배포하기 위해 다음 명령어 실행:</li></ol><pre><code><em>php bin/magento setup:static-content:deploy</em></code></pre><p>이제 테마를 사용할 준비가 완료되었습니다.</p><p>이것이 <strong>Magento 테마 개발</strong> 과정에 대해 알아야 할 모든 것입니다. Magento 개발의 모든 최상의 기능을 활용하려면 절차를 세부적으로 숙지하세요.</p><figure><img decoding="async" class="aligncenter" src="https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_2_927bfdbaeb.jpg" alt="Magento Development vietnam" /></figure><p>이 과정이 너무 복잡하게 느껴진다면 신뢰할 수 있는 웹 개발 팀을 선택하는 것이 좋습니다. TECHVIFY Software는 <a title="Magento development services" href="https://techvify-software.com/all-you-need-to-know-about-magento-development/" rel="nofollow noopener" target="_blank">Magento 개발</a> 전문 업체로, 고객의 모든 요구사항을 충족하는 최고의 전자상거래 웹사이트를 만드는 것을 궁극적인 목표로 합니다. TECHVIFY와 함께라면 귀하의 온라인 상점이 안전한 손에 있음을 확신할 수 있습니다.</p><div class="tvf-box-cta"><p id="title">TECHVIFY – 글로벌 AI & 소프트웨어 솔루션 회사</p><p>스타트업부터 업계 리더까지: TECHVIFY는 단순한 결과물이 아닌 성과를 우선시합니다. 고성능 팀, AI(GenAI 포함) 소프트웨어 솔루션, ODC(오프쇼어 개발 센터) 서비스를 통해 시장 진입 시간을 단축하고 조기 ROI를 실현하세요.</p><ul><li><strong>이메일:</strong><a href="mailto:contact@techvify.com.vn">contact@techvify.com.vn</a></li><li><strong>전화:</strong><a href="tel:+842477762666">(+84)24.77762.666</a></li></ul><div><a href="#tvf-contact"><button class="tvf-cta-btn" type="button">문의하기</button></a></div></div></div><div class="mb-16 pt-8 border-t border-white/10"><h3 class="text-white font-medium text-lg mb-4">Categories & Tags</h3><div class="flex flex-wrap gap-3"><template id="P:a"></template><template id="P:b"></template></div></div></div></article></div><div class="min-h-screen"><div class="max-w-[866px] mx-auto px-4 sm:px-6 lg:px-8 py-24"><div class="space-y-8"><div class="h-6 bg-white/10 rounded w-48 animate-pulse"></div><div class="h-16 bg-white/10 rounded animate-pulse"></div><div class="h-80 bg-white/10 rounded animate-pulse"></div><div class="space-y-4"><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div></div></div></div></div></main><footer class="border-t border-[var(--color-p200)] relative overflow-hidden" style="background:radial-gradient(100% 100% at 50% 0%, #01010F 50%, #001372 100%), #050B1E"><div class="content-container pt-14 lg:pt-16 min-[1441px]:pt-[72px]"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.25fr_1fr_1fr_1.45fr] gap-9 min-[1441px]:gap-12"><div class="col-span-1 sm:col-span-2 lg:col-span-1"><div class="flex items-center "><img alt="Techvify" width="271" height="38" decoding="async" data-nimg="1" class="h-full w-auto object-contain" style="color:transparent;width:auto;height:auto" src="/images/logo/techvify_logo_white.svg"/></div><p class="mt-[26px] text-[#c4cadb] text-base leading-6 whitespace-pre-line max-w-[220px]">AI 기반 엔지니어링 파트너</p><div class="mt-7 text-base leading-[1.7]"><a href="/cdn-cgi/l/email-protection#81e2eeeff5e0e2f5c1f5e4e2e9f7e8e7f8afe2eeec" class="block text-[#c4cadb] hover:text-[var(--color-p200)] transition-colors duration-200"><span class="__cf_email__" data-cfemail="197a76776d787a6d596d7c7a716f707f60377a7674">[email protected]</span></a><a href="tel:+842477760688" class="block text-[#c4cadb] hover:text-[var(--color-p200)] transition-colors duration-200">(+84) 24 7776 0688</a></div><div class="mt-[30px] flex items-center gap-[22px]"><a href="https://www.linkedin.com/company/techvify/posts/?feedView=all" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="LinkedIn" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-linkedin.svg"/></a><a href="https://www.facebook.com/profile.php?id=61583081237369" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Facebook" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-facebook.svg"/></a><a href="https://x.com/Techvify" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Twitter" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-twitter.svg"/></a><a href="https://www.youtube.com/@techvifyglobal" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="YouTube" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-youtube.svg"/></a><a href="https://www.behance.net/techvifysoftware" target="_blank" rel="noopener noreferrer" aria-label="Behance" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Behance" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-medium.svg"/></a></div></div><div><h3 class="text-white font-semibold text-2xl mb-6">회사</h3><ul class="space-y-4"><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/about-us">회사 소개</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/leadership">리더십</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="https://careers.techvify.com/">채용</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/become-a-partner">파트너 되기</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/portfolio">포트폴리오</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="https://3dtour.techvify.com/">본사 가상 투어</a></li></ul></div><div><h3 class="text-white font-semibold text-2xl mb-6">서비스</h3><ul class="space-y-4"><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/software-development-services">AI 증강 소프트웨어 개발</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/ai-ml-services">AI 데이터 플랫폼 및 엔지니어링</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/iot-software-development-services">응용 AI 솔루션</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/cloud-devops-development-services">클라우드 및 DevOps</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/application-managed-services">AI 관리 서비스</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/kr/services/software-testing-qa-services">AI 트랜스포메이션 자문</a></li></ul></div><div><h3 class="text-white font-semibold text-2xl mb-6">오피스 위치</h3><div class="space-y-[18px]"><p class="text-base leading-[1.55]"><span class="text-white font-semibold">본사</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">F9 Tower A, HUDTOWER Building, 37 Le Van Luong Str, Thanh Xuan Ward, Hanoi, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">오피스</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">Dong Nhan Building, 90 Nguyen Dinh Chieu, Tan Dinh Ward, Ho Chi Minh City, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">다낭 딜리버리 센터</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">7th Floor, Block D, ICT1 Building, Software Park No.2, Nhu Nguyet Street, Hai Chau Ward, Da Nang City, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">싱가포르 오피스</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">18 Cross Street, #02-101, 18 Cross, Singapore 048423</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">후쿠오카(본사)</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">Hakata Ekimae City Building, 1-9-3 Hakata Ekimae, Fukuoka-shi, Fukuoka, Japan</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">도쿄 (지사)</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">Tensho Building 809, 3-9-10 Shimbashi, Minato-ku, Tokyo 105-0004 Japan</span></p></div></div></div><hr class="border-0 h-px bg-white/10 mt-11 mb-9"/><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[repeat(3,minmax(0,320px))] gap-6 mb-11"><a href="https://clutch.co/profile/techvify" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="Clutch" loading="lazy" width="113" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-clutch.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">평점 4.9/5</p></a><a href="https://www.goodfirms.co/company/techvify" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="GoodFirms" loading="lazy" width="215" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-goodfirms.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">평점 4.9/5</p></a><a href="https://techreviewer.co/companies/techvify-vietnam" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="TechReviewer" loading="lazy" width="220" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-techreviewer.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">평점 4.9/5</p></a></div></div><div class="border-t border-white/10"><div class="content-container pt-[26px] pb-[30px] flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4"><p class="text-[#9aa2bd] text-base">2026 © Techvify. 모든 권리 보유</p><span class="hidden sm:inline text-[#9aa2bd] text-base">|</span><button type="button" class="text-[#9aa2bd] text-base hover:text-white transition-colors cursor-pointer">쿠키 설정</button></div></div></footer></div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="0be83f4caca9d97d0d831c92-text/javascript">$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script type="0be83f4caca9d97d0d831c92-text/javascript">$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:1","S:1")</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"1d:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-[#01010f] flex flex-col\",\"children\":[[\"$\",\"$L21\",null,{\"servicesSections\":[{\"id\":\"service-categories\",\"title\":\"\",\"items\":[{\"id\":\"software-development-services\",\"title\":\"AI 증강 소프트웨어 개발\",\"href\":\"/services/software-development-services\"},{\"id\":\"ai-ml-services\",\"title\":\"AI 데이터 플랫폼 및 엔지니어링\",\"href\":\"/services/ai-ml-services\"},{\"id\":\"iot-software-development-services\",\"title\":\"응용 AI 솔루션\",\"href\":\"/services/iot-software-development-services\"},{\"id\":\"cloud-devops-development-services\",\"title\":\"클라우드 및 DevOps\",\"href\":\"/services/cloud-devops-development-services\"},{\"id\":\"application-managed-services\",\"title\":\"AI 관리 서비스\",\"href\":\"/services/application-managed-services\"},{\"id\":\"software-testing-qa-services\",\"title\":\"AI 트랜스포메이션 자문\",\"href\":\"/services/software-testing-qa-services\"}]},{\"id\":\"software-development-services-details\",\"title\":\"AI 증강 소프트웨어 개발\",\"items\":[{\"id\":\"bespoke-software-development\",\"title\":\"맞춤형 소프트웨어 개발\",\"href\":\"/services/software-development-services/bespoke-software-development\"},{\"id\":\"mobile-app-development\",\"title\":\"모바일 앱 개발\",\"href\":\"/services/software-development-services/mobile-app-development\"},{\"id\":\"mvp-development\",\"title\":\"MVP 개발\",\"href\":\"/services/software-development-services/mvp-development\"},{\"id\":\"offshore-software-development-odc\",\"title\":\"오프쇼어 소프트웨어 개발(ODC)\",\"href\":\"/services/software-development-services/offshore-software-development-odc\"},{\"id\":\"web-application-development\",\"title\":\"웹 애플리케이션 개발\",\"href\":\"/services/software-development-services/web-application-development\"},{\"id\":\"saa-s-application-development\",\"title\":\"SaaS 애플리케이션 개발\",\"href\":\"/services/software-development-services/saa-s-application-development\"}]},{\"id\":\"ai-ml-services-details\",\"title\":\"AI 데이터 플랫폼 및 엔지니어링\",\"items\":[{\"id\":\"ai-chatbot-development\",\"title\":\"AI 챗봇 개발\",\"href\":\"/services/ai-ml-services/ai-chatbot-development\"},{\"id\":\"ai-consulting-services\",\"title\":\"AI 컨설팅 서비스\",\"href\":\"/services/ai-ml-services/ai-consulting-services\"},{\"id\":\"agentic-ai\",\"title\":\"에이전틱 AI\",\"href\":\"/services/ai-ml-services/agentic-ai\"},{\"id\":\"generative-ai-development\",\"title\":\"생성형 AI 개발\",\"href\":\"/services/ai-ml-services/generative-ai-development\"},{\"id\":\"data-engineering\",\"title\":\"데이터 엔지니어링\",\"href\":\"/services/ai-ml-services/data-engineering\"},{\"id\":\"prompt-engineering\",\"title\":\"프롬프트 엔지니어링\",\"href\":\"/services/ai-ml-services/prompt-engineering\"}]},{\"id\":\"iot-software-development-services-details\",\"title\":\"응용 AI 솔루션\",\"items\":[{\"id\":\"io-t-consulting\",\"title\":\"IoT 컨설팅\",\"href\":\"/services/iot-software-development-services/io-t-consulting\"},{\"id\":\"service-item-1\",\"title\":\"IoT 앱 개발\",\"href\":\"/services/iot-software-development-services/service-item-1\"},{\"id\":\"aiot-development-services\",\"title\":\"AIoT 개발 서비스\",\"href\":\"/services/iot-software-development-services/aiot-development-services\"}]},{\"id\":\"cloud-devops-development-services-details\",\"title\":\"클라우드 및 DevOps\",\"items\":[{\"id\":\"cloud-consulting-services\",\"title\":\"클라우드 컨설팅 서비스\",\"href\":\"/services/cloud-devops-development-services/cloud-consulting-services\"},{\"id\":\"cloud-managed-services\",\"title\":\"클라우드 매니지드 서비스\",\"href\":\"/services/cloud-devops-development-services/cloud-managed-services\"},{\"id\":\"cloud-migration-services\",\"title\":\"클라우드 마이그레이션 서비스\",\"href\":\"/services/cloud-devops-development-services/cloud-migration-services\"},{\"id\":\"cloud-security-services\",\"title\":\"클라우드 보안 서비스\",\"href\":\"/services/cloud-devops-development-services/cloud-security-services\"},{\"id\":\"cloud-app-development\",\"title\":\"클라우드 앱 개발\",\"href\":\"/services/cloud-devops-development-services/cloud-app-development\"}]},{\"id\":\"application-managed-services-details\",\"title\":\"AI 관리 서비스\",\"items\":[{\"id\":\"application-managed-services\",\"title\":\"애플리케이션 매니지드 서비스\",\"href\":\"/services/application-managed-services/application-managed-services\"},{\"id\":\"software-modernization\",\"title\":\"소프트웨어 현대화\",\"href\":\"/services/application-managed-services/software-modernization\"},{\"id\":\"cloud-infrastructure-managed-services\",\"title\":\"클라우드 인프라 매니지드 서비스\",\"href\":\"/services/application-managed-services/cloud-infrastructure-managed-services\"},{\"id\":\"production-support\",\"title\":\"운영 지원\",\"href\":\"/services/application-managed-services/production-support\"}]},{\"id\":\"software-testing-qa-services-details\",\"title\":\"AI 트랜스포메이션 자문\",\"items\":[{\"id\":\"api-testing\",\"title\":\"API 테스트\",\"href\":\"/services/software-testing-qa-services/api-testing\"},{\"id\":\"automation-testing\",\"title\":\"자동화 테스트\",\"href\":\"/services/software-testing-qa-services/automation-testing\"},{\"id\":\"web-application-testing\",\"title\":\"웹 애플리케이션 테스트\",\"href\":\"/services/software-testing-qa-services/web-application-testing\"},{\"id\":\"performance-testing\",\"title\":\"성능 테스트\",\"href\":\"/services/software-testing-qa-services/performance-testing\"},{\"id\":\"mobile-application-testing\",\"title\":\"모바일 애플리케이션 테스트\",\"href\":\"/services/software-testing-qa-services/mobile-application-testing\"}]}],\"companySections\":[{\"id\":\"company-13\",\"title\":\"회사 소개\",\"description\":\"거의 10년 동안 우리는 스타트업부터 포춘 500대 기업까지 신뢰성과 세심함, 믿음을 중시하는 소프트웨어를 구축해왔습니다.\",\"items\":[{\"id\":\"about-us\",\"title\":\"회사 소개\",\"href\":\"/about-us\",\"description\":\"$undefined\"},{\"id\":\"leadership\",\"title\":\"리더십\",\"href\":\"/leadership\",\"description\":\"$undefined\"},{\"id\":\"careers\",\"title\":\"채용\",\"href\":\"https://careers.techvify.com/\",\"description\":\"$undefined\"},{\"id\":\"become-a-partner\",\"title\":\"파트너 되기\",\"href\":\"/become-a-partner\",\"description\":\"$undefined\"},{\"id\":\"portfolio\",\"title\":\"포트폴리오\",\"href\":\"/portfolio\",\"description\":\"$undefined\"},{\"id\":\"head-office-virtual-tour\",\"title\":\"본사 가상 투어\",\"href\":\"https://3dtour.techvify.com/\",\"description\":\"$undefined\"}],\"image\":\"$undefined\"}],\"industrySections\":[{\"id\":\"industry-20\",\"title\":\"산업\",\"description\":\"우리는 도메인 전문성과 강력한 엔지니어링 역량을 결합하여 다양한 산업에 맞춘 기술 솔루션을 제공합니다.\",\"items\":[{\"id\":\"manufacturing\",\"title\":\"제조\",\"href\":\"/industries/manufacturing\",\"description\":\"$undefined\"},{\"id\":\"bfsi\",\"title\":\"은행 및 금융\",\"href\":\"/industries/bfsi\",\"description\":\"$undefined\"},{\"id\":\"logistics\",\"title\":\"물류\",\"href\":\"/industries/logistics\",\"description\":\"$undefined\"},{\"id\":\"retail-ecommerce\",\"title\":\"소매 및 전자상거래\",\"href\":\"/industries/retail-ecommerce\",\"description\":\"$undefined\"},{\"id\":\"healthcare\",\"title\":\"헬스케어\",\"href\":\"/industries/healthcare\",\"description\":\"$undefined\"},{\"id\":\"insurance\",\"title\":\"보험\",\"href\":\"/industries/insurance\",\"description\":\"$undefined\"},{\"id\":\"education\",\"title\":\"교육\",\"href\":\"/industries/education\",\"description\":\"$undefined\"},{\"id\":\"energy\",\"title\":\"에너지\",\"href\":\"/industries/energy\",\"description\":\"$undefined\"},{\"id\":\"hospitality\",\"title\":\"호스피탈리티\",\"href\":\"/industries/hospitality\",\"description\":\"$undefined\"}]}],\"solutionsSections\":[{\"id\":\"solutions\",\"title\":\"\",\"description\":\"$undefined\",\"ctaLabel\":\"$undefined\",\"ctaHref\":\"$undefined\",\"items\":[{\"id\":\"optivise\",\"title\":\"Optivise\",\"description\":\"모든 쇼핑객을 위한 개인 맞춤형 제품 제안.\",\"href\":\"/solutions/optivise\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_4_6000272cc1.jpg\"},{\"id\":\"omnilink\",\"title\":\"OmniLink\",\"description\":\"모든 지원 채널을 하나의 AI 지원 인박스에서 관리합니다.\",\"href\":\"/solutions/omnilink\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_3_6b592def16.jpg\"},{\"id\":\"callwiz\",\"title\":\"CallWiz\",\"description\":\"고객의 언어에 능통한 AI 콜 에이전트입니다.\",\"href\":\"/solutions/callwiz\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_5_c02938b916.jpg\"},{\"id\":\"aiavatar\",\"title\":\"AI Avatar\",\"description\":\"방문자를 안내하고 업셀링하는 실감 나는 아바타입니다.\",\"href\":\"/solutions/aiavatar\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_1_7ea9c442a1.jpg\"},{\"id\":\"ai-internal-chatbot\",\"title\":\"Chatbot Solution\",\"description\":\"자신만의 지식으로 학습된 개인용 챗봇입니다.\",\"href\":\"/solutions/ai-internal-chatbot\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_6_45d278d377.jpg\"},{\"id\":\"automation\",\"title\":\"Automation Test\",\"description\":\"테스트를 작성, 실행 및 분석하는 AI.\",\"href\":\"/solutions/automation\",\"image\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/small_Techvify_Solution_AI_Powered_2_9853f7072e.jpg\"}]}],\"navigationItems\":[{\"id\":\"company\",\"title\":\"회사\",\"href\":\"$undefined\",\"menuType\":\"company\",\"order\":0},{\"id\":\"ai-consulting\",\"title\":\"AI 컨설팅\",\"href\":\"/ai-consulting\",\"menuType\":\"none\",\"order\":1},{\"id\":\"services\",\"title\":\"서비스\",\"href\":\"$undefined\",\"menuType\":\"services\",\"order\":2},{\"id\":\"solutions\",\"title\":\"솔루션\",\"href\":\"$undefined\",\"menuType\":\"solutions\",\"order\":3},{\"id\":\"industries\",\"title\":\"산업\",\"href\":\"$undefined\",\"menuType\":\"industries\",\"order\":4},{\"id\":\"newsroom\",\"title\":\"뉴스룸\",\"href\":\"/newsroom\",\"menuType\":\"none\",\"order\":5}]}],\"$L26\"]}]\n"])</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"27:I[31166,[\"4850\",\"static/chunks/4850-8b4510e062f65994.js\",\"182\",\"static/chunks/182-34f58bc3c6dd2bb7.js\",\"6550\",\"static/chunks/6550-d920bc1fb20c71cb.js\",\"9645\",\"static/chunks/9645-0ba6ae75d26cc454.js\",\"1224\",\"static/chunks/1224-656dc7d7ee9d1898.js\",\"9021\",\"static/chunks/9021-74de60b8ea3da478.js\",\"6764\",\"static/chunks/6764-31aff977f55d255a.js\",\"2549\",\"static/chunks/2549-ce284bd556194e82.js\",\"6688\",\"static/chunks/6688-de7592863f012d34.js\",\"7870\",\"static/chunks/7870-c685e38ef37bd6c7.js\",\"6838\",\"static/chunks/6838-80bed3558ec0264d.js\",\"8519\",\"static/chunks/app/%5Blocale%5D/%5Bslug%5D/page-43349172ffa96dc2.js\"],\"Button\"]\n"])</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"26:[\"$\",\"main\",null,{\"className\":\"flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-16 py-8 sm:py-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full max-w-[1312px] backdrop-blur-sm bg-gradient-to-br from-[#01010f]/40 to-[#0a0a1a]/20 rounded-xl px-6 sm:px-12 lg:px-16 py-12 sm:py-16 lg:py-20 flex flex-col items-center gap-6 sm:gap-8 lg:gap-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-[200px] sm:w-[280px] lg:w-[400px] h-[150px] sm:h-[210px] lg:h-[306px]\",\"children\":[\"$\",\"$L5\",null,{\"src\":\"/images/not-found/sleeping-techter.png\",\"alt\":\"Sleeping Techter - Page Not Found\",\"fill\":true,\"className\":\"object-contain\",\"priority\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 sm:gap-4 lg:gap-6 items-center text-center w-full max-w-[800px]\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-['Manrope'] font-semibold text-2xl sm:text-3xl lg:text-[56px] leading-[1.2] text-white capitalize\",\"children\":\"페이지를 찾을 수 없습니다\"}],[\"$\",\"p\",null,{\"className\":\"font-['Manrope'] font-normal text-sm sm:text-base text-white leading-[1.5] max-w-[600px] px-4\",\"children\":\"찾으시는 페이지가 존재하지 않거나 삭제되었습니다. 걱정하지 마세요, 다시 길을 찾아드리겠습니다!\"}]]}],[\"$\",\"$L27\",null,{\"href\":\"/\",\"icon\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house w-5 h-5\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"r6nss1\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"children\":\"홈페이지로 돌아가기\"}]]}]}]\n"])</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"28:I[80622,[],\"IconMark\"]\n"])</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"c:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Magento 테마 개발 튜토리얼: 초보자 가이드 - Techvify\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"온라인 상점을 업그레이드하려면 Magento 테마 개발에 투자하세요. 초보자를 위한 10단계 가이드입니다.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://techvify.com/kr/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://techvify.com/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"ja-JP\",\"href\":\"https://techvify.com/jp/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"6\",{\"rel\":\"alternate\",\"hrefLang\":\"de-DE\",\"href\":\"https://techvify.com/de/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"ko-KR\",\"href\":\"https://techvify.com/kr/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://techvify.com/magento-theme-development-tutorial\"}],[\"$\",\"meta\",\"9\",{\"name\":\"google-site-verification\",\"content\":\"DT3kCEBCV2m8KTwNxOjSbyI7VbnI-aXw0JFqo2ubDZo\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Magento 테마 개발 튜토리얼: 초보자 가이드 - Techvify\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"온라인 상점을 업그레이드하려면 Magento 테마 개발에 투자하세요. 초보자를 위한 10단계 가이드입니다.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://techvify.com/kr/magento-theme-development-tutorial\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Techvify\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:secure_url\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Magento 테마 개발 튜토리얼: 초보자를 위한 가이드\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:locale:alternate\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale:alternate\",\"content\":\"ja_JP\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:locale:alternate\",\"content\":\"de_DE\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"25\",{\"property\":\"article:published_time\",\"content\":\"2021-07-25T09:53:05.000Z\"}],[\"$\",\"meta\",\"26\",{\"property\":\"article:author\",\"content\":\"TECHVIFY Team\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:site\",\"content\":\"@Techvify\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:title\",\"content\":\"Magento 테마 개발 튜토리얼: 초보자 가이드 - Techvify\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:description\",\"content\":\"온라인 상점을 업그레이드하려면 Magento 테마 개발에 투자하세요. 초보자를 위한 10단계 가이드입니다.\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:image\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"512x512\"}],[\"$\",\"$L28\",\"33\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script type="0be83f4caca9d97d0d831c92-text/javascript">self.__next_f.push([1,"12:\"$c:metadata\"\n"])</script><title>Magento 테마 개발 튜토리얼: 초보자 가이드 - Techvify