지금 개발 현장에서는 많은 일이 일어나고 있습니다.
모델에게 지저분한 WordPress 사이트를 React로 전환해 달라고 요청하고 이제 깨달음을 얻었다고 생각하는 AI 전도사도 있습니다. 5년 후에는 아무도 코딩을 할 줄 모르고 인터넷이 붕괴할 것이라고 확신하는 부머 세대가 있습니다. 그리고 AI를 사용하여 12분 안에 아무에게도 알리지 않고 내부 도구를 배송하고 일찍 퇴근하는 조용한 사람들도 있습니다.
저는 그 어느 쪽에도 속하지 않습니다. 의 진영에 있습니다: AI는 도구다. 사용하세요. 능력에 대한 망상으로 가득 찬 멋진 자동 완성 기능일 뿐입니다.
이 게시물은 AI를 사용하여 새로운 Adobe EDS( Edge Delivery Services ) 블록을 바이브 코딩하는 방법과 더 중요한 것은 잘못된 부분을 수정한 방법을 보여줍니다.
농부에게 배우기
저는 농장에서 자랐습니다. 팜 로직은 간단합니다:
고장이 나면 직접 고치세요.
아마존은 없고, 기울어질 정도로 많은 물건으로 가득 찬 오래된 헛간만 있을 뿐입니다. 교체품을 주문할 여유도 없고 완벽한 복제품을 만드는 방법을 배울 시간도 없습니다. 무작위로 금속 조각과 남북전쟁보다 오래된 망치, 그리고 덕트 테이프를 가져옵니다. 여러분이 만들어 보세요. 즉흥적으로, 적응하고, 극복하세요.
그렇기 때문에 헛간에는 150년 동안의 도구와 "잠재적으로 유용한" 개체가 축적되어 있습니다. 아버지는 이렇게 말씀하셨죠: "언제 필요할지 모르니까요."
요점은 이렇습니다:
처음부터 도구를 위조하는 방법을 알 필요는 없습니다. 하지만 고장 났을 때 고칠 수 있을 정도의 지식은 있어야 합니다.
AI가 생성한 코드도 마찬가지입니다.
AI가 구현을 생성할 수 있습니다. 수리, 조정 및 업그레이드할 수 있을 만큼만 이해하면 됩니다.
바이브 코딩이란 무엇인가요?
바이브 코딩은 우리 모두가 서서히 인정하고 있는 워크플로입니다:
원하는 것을 대략적으로 설명하세요 -> AI가 요리하게 하세요 -> 혼란을 해결하세요 -> 배송하세요.
"프롬프트 엔지니어링이 아닙니다." "AI 기반 개발이 아닙니다." 말 그대로 분위기 + 컨텍스트 + 취향 + 당신입니다.
저는 이를 "바이브 코딩" 이라고 부르는데, 사양을 작성하거나 엄격한 테스트 개요를 따르는 것이 아니라 그런 느낌이기 때문입니다. 인공지능과 함께 80% 거기에서 무언가를 얻은 다음, 판단력과 경험을 사용하여 실제로 좋은 결과를 만들어내는 것입니다. 매우 자신감이 넘치지만 때때로 틀릴 수 있는 파트너와 함께 즉흥적으로 협업하는 것입니다(우리 둘 다 그렇죠).
내가 생각하는 바이브 코딩의 세 가지 규칙
- HTML은 알지만 기억력이 금붕어 수준인 사람을 가르치듯 직무를 설명하세요.
자세히 설명하세요. 지나치게 설명합니다. IKEA 사용 설명서를 작성한다고 가정해 보세요. - 모델에게 러프컷을 맡기세요.
모양은 이미 만들어져 있으니 샌딩만 하면 됩니다. - 실제 기술을 사용하여 스케치한 부분을 수정하세요.
이 모델은 결국 저주받은 일을 하게 될 것입니다.
모델 및 코드 생성에 대한 나의 경험
같은 작업 공간에서 프롬프트 + 코드를 작성하는 것은 셰프의 키스이기 때문에 저는 이 모든 작업을 Windsurf에서 하고 있습니다. Cursor 또는 GitHub Copilot이 포함된 VSCode와 같이 AI가 내장된 다른 IDE도 있으니 취향에 맞게 선택하세요. 윈드서핑은 가격 경쟁력도 뛰어나고 바로 사용할 수 있었습니다.
클로드 소네트 4.5: 현실을 놓치지 않고 사용 가능한 초안을 제공하는 왕입니다. Sonnet이 더 빠르고 제 필요에 맞게 작동하기 때문에 Opus로 많은 테스트를 해보지는 않았습니다.
GPT: 설명이나 문서 작성과 같은 자연어 작업에는 적합하지만, 제 경험상 시간이 너무 오래 걸리고 프롬프트도 잘 따르지 않습니다.
DeepSeek: 저는 부엌에서 너구리를 믿는 것과 같은 방식으로 이 서비스를 신뢰합니다.
Grok: 유망하지만 아직 윈드서핑에 대한 이미지 입력 기능이 없어 벤치마킹 중입니다.
쌍둥이자리 2.5: 시도했습니다. "이 작업을 할 일 목록에 추가하여 진행 상황을 계속 업데이트하겠습니다. 파일 만들기부터 시작하겠습니다. 먼저 blog-featured-hero.js 파일을 만들겠습니다. 그런 다음 blog-featured-hero.css 파일을 만들겠습니다. ". 이 글을 쓸 당시에는 Gemini 3를 사용할 수 없었지만 소문에 의하면 불을 뿜는다고 하니 다음에는 사용해 봐야겠습니다.
내면의 테리 데이비스를 끌어내고 싶다면 괜찮은 장비를 갖춘 셀프 호스팅 경로를 선택할 수 있습니다(VRAM이 가장 중요하지만 필요한 경우 일부 처리를 RAM으로 오프로드할 수 있으며 속도가 상당히 느리지만 작동합니다). Ollama - CLI 또는 GUI(https://ollama.com/)로 시작하여 몇 가지 사용자 지정 모델을 던지고(저는 자연어 작업으로 gemma3:27b를 사용했습니다 - https://ollama.com/library/gemma3), 계속(https://github.com/continuedev/continue)과 같은 VS Code의 플러그인을 사용하는 것을 권장합니다. 기본 제공 IDE의 모든 기능을 사용할 수는 없지만 적어도 데이터가 어디로 가는지는 알 수 있습니다. 아니요, 광고가 아닙니다.
EDS & AI가 PB처럼 함께 가는 이유&J
EDS 블록은 다음과 같은 이유로 AI 드래프팅에 이상적입니다:
- 블록은 말 그대로 HTML + CSS + 바닐라 JS입니다.
이것이 바로 LLM이 교육받는 내용입니다. 원시 HTML과 컨텍스트를 제공하시나요? 브르르르. - EDS에는 명확한 패턴이 있습니다.
모델은 말 그대로 패턴을 발견하기 위해 만들어졌습니다. 이것이 바로 그들이 하는 일입니다. - 최종 마무리 작업은 회원님(예, 회원님)이 직접 관리합니다.
AI가 80%. 당신의 뇌는 마지막 20% 부끄럽지 않게 만들어 줍니다.
명확한 예시가 포함된 좋은 프롬프트 = 더 나은 결과물.
자, 이 영웅 블록을 만들어 봅시다
블로그에 새로운 블로그 추천 영웅 블록을 만들고 싶습니다:
- 전체 너비 배경 이미지
- 왼쪽의 이미지 캐러셀
- 제목 + 부제목 + 설명 + "자세히 보기" 버튼이 있는 흐린 글라스 카드
- 반응형 + 접근성
- 미래의 내가 과거의 나를 싫어하지 않도록 EDS 패턴을 따릅니다.
EDS는 이를 다음과 같이 원시 사전 장식 HTML로 변환합니다:
<div class="blog-featured-hero block" data-block-name="blog-featured-hero" data-block-status="loaded">
<div>
<div>
<picture>
<source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="eager" alt="" src="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&format=jpg&optimize=medium" width="5464" height="3640">
</picture>
</div>
</div>
<div>
<div>
<p>
<a href="/en/blog/adaptto-2025-recap" title="">
<picture>
<source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&format=webply&optimize=medium">
<source type="image/png" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&format=png&optimize=medium" width="2862" height="1583">
</picture>
</a>
</p>
<h3 id="">
<picture>
<source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&format=jpg&optimize=medium" width="1768" height="877">
</picture>
</h3>
<p>
<picture>
<source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&format=jpg&optimize=medium" width="1776" height="1184">
</picture>
</p>
</div>
</div>
<div>
<div>
<h3 id="recap-of-adaptto-2025---the-hard-core-aem-developers-conference"><a href="/en/blog/adaptto-2025-recap" title="Recap of adaptTo() 2025 - the hard-core AEM Developers Conference">Recap of adaptTo() 2025 - the hard-core AEM Developers Conference</a></h3>
</div>
</div>
<div>
<div>
<p>Highlights, New Releases, and Takeaways</p>
</div>
</div>
<div>
<div>
<p>A recap of the top sessions of the adaptTo() 2025 Conference, with everything you should catch up on to further your AEM career. AI refactoring for cloud migrations, Edge Workers for EDS, a replacement for the Groovy console, a deep
dive on <a href="https://blog.arborydigital.com/en/blog/what-is-document-authoring-for-edge-delivery" title="Document Authoring (DA)">Document Authoring (DA)</a>, as well as a presentation from our own on the <a href="https://blog.arborydigital.com/en/podcast/solving-china-web-performance"
title="China Web Performance Problem">China Web Performance Problem</a> - what are you waiting for, let's dive in!</p>
</div>
</div>
</div>
프롬프트
다음은 제가 Claude에게 제공한 내용을 정리한 버전입니다(DA의 스크린샷 포함):
Create an Adobe Edge Delivery Services (EDS) block using vanilla JavaScript and CSS.
## Block Requirements
**Name**: blog-featured-hero
**Purpose**: Featured blog hero with background image and content overlay
## Learn from Existing Blocks
Examine css and js file in /blocks/hero/, /blocks/columns/, /blocks/blog-post-hero/,
and /blocks/carousel/ for EDS patterns.
## Raw HTML from EDS (before our JS/CSS decoration)
[raw html here]
## Your Task
Transform this raw HTML into:
- Row 1 image becomes full-width background
- Overlay container with:
- LEFT: Row 2 images as carousel with minimal navigation icons, no background just chevrons
- RIGHT (glass card): Row 3 Title/Link, Row 4 Subtitle, Row 5 Description,
Button "Read More" linking to Row 3 URL
## JavaScript Requirements
Parse the block's child divs (rows) and reconstruct into the layout above.
Use vanilla JavaScript only - no frameworks.
Handle missing rows gracefully.
## CSS Requirements
- Mobile responsive (stack on small screens)
- glass background on card
- high contrast mode
Generate blog-featured-hero.js and blog-featured-hero.css files.
인공지능의 첫 번째 초안
Claude는 두 파일을 모두 삭제했습니다. 솔직히 말해서요? 꽤 견고했습니다.
좋았던 점
- 레이아웃은 기본적으로 정확했습니다.
- 캐러셀 작동
- 배경 이미지 로직: 처리됨
- 반응형 스태킹: 처리됨
사람의 손길이 필요한 것
그래도 문제가 있었습니다:
- 시각적 광택: 색상이 일치하지 않고 타이포그래피를 새로 고칠 수 있습니다.
- UX 문제: 캐러셀이 자동 재생되지 않음, 링크 또는 버튼에 마우스오버 전환이 없음
- 성능: 배경 이미지가 부적절하게 로드됨
- 레이아웃: 왼쪽 열을 div의 상단에 세로로 정렬합니다.
그래서 일을 시작했습니다.
블록 연마(실제로 월급을 받는 곳)
글로벌 스타일 재정의
한 가지 발견한 것이 있습니다: 클로드는 캐스케이드에 대한 기억이 없다는 것입니다. 글로벌 스타일이 등장하여 이를 해체하기 전까지는 완전히 이해되는 규칙을 생성합니다.
EDS에는 글로벌 최대 너비 + 패딩이 있어 섹션을 약 1200픽셀로 제한합니다. 클로드의 초안에는 이런 점을 고려하지 않았기 때문에 영웅은 실제로 피를 흘리지 않았습니다. !important대신 main 을 선택기 앞에 붙여서 구체성을 높였습니다:
/* My fix - higher specificity wins */
main .blog-featured-hero-container {
width: 100%;
padding: 0;
margin: 0;
}
main .blog-featured-hero-wrapper {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
main .blog-featured-hero {
position: relative;
width: 100%;
min-height: 500px;
overflow: hidden;
}
영웅 = 전체 출혈. 캐스케이드 = 오염되지 않음.
시각적 광택: 색상, 타이포그래피, 버튼
브랜드 그린을 교체하고 타이포그래피를 강화했으며 자세히 보기 버튼의 일부 특수성 문제를 다시 수정했습니다. 버튼이 글로벌 옵션보다 조금 더 간결하게 보이길 원했습니다. 또한 하나님의 의도대로 마우스오버 시 ease-in-out 전환을 추가했습니다.
/* Read More button */
.featured-content-card .featured-read-more {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--link-hover-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
text-transform: uppercase;
font-family: var(--heading-font-family);
letter-spacing: -1px;
font-size: var(--font-size-sm);
font-weight: 600;
transition: all 0.3s ease-in-out;
}
.featured-content-card .featured-read-more:hover {
background-color: var(--link-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
UX 수정: 캐러셀 타이밍
캐러셀이 자동 재생되지 않는 문제를 해결하기 위해 로직을 추가했습니다:
- 5초마다 슬라이드 자동 진행
- 마우스오버 및 키보드 포커스 일시정지
- 수동 탐색 후 다시 시작
- 화살표 키 탐색
자동 재생은 슬라이드가 여러 개인 경우에만 실행되며, 모든 일시 중지/재개 로직은 사용자 상호 작용을 방해하지 않고 원활한 UX를 보장합니다.
let autoplayInterval = null;
const startAutoplay = () => {
if (autoplayInterval) return;
autoplayInterval = setInterval(() => {
const currentSlide = parseInt(carousel.dataset.activeSlide || '0', 10);
showSlide(carousel, currentSlide + 1);
}, 5000);
};
const stopAutoplay = () => {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
}
};
// Pause on hover and focus
carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('mouseleave', startAutoplay);
carousel.addEventListener('focusin', stopAutoplay);
carousel.addEventListener('focusout', startAutoplay);
// Arrow key navigation
carousel.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') handlePrev();
if (e.key === 'ArrowRight') handleNext();
});
startAutoplay();
성능
블록을 구축한 후 Lighthouse를 통해 페이지를 실행했습니다. 성능 점수는 99점이었지만(여기서 말하는 것은 EDS입니다), 여전히 약간의 최적화가 필요했습니다.
배경 이미지가 먼저 로드되어야 했지만 우선순위 힌트 없이 폭포 아래로 밀려나고 있었습니다. 수정 사항은 브라우저에 이 이미지가 중요하다는 것을 알리는 것이었습니다:
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" 는 브라우저에 이 이미지를 다른 이미지보다 우선시하도록 지시하고 loading="eager" 는 뷰포트에 들어갈 때까지 기다리지 않고 즉시 로드되도록 합니다.
캐러셀의 경우 첫 번째 슬라이드만 열심히 로드하고 나머지는 바로 보이지 않기 때문에 느리게 로드하는 반대의 방식을 사용했습니다.
레이아웃
컨테이너가 플렉스를 사용하고 자식이 세로로 중앙에 있어야 하므로 align-items: center 로 세로 정렬을 수정했습니다.
.featured-carousel .featured-carousel-slides {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
align-items: center;
}
다음은 "작동합니다" 와 "실제로 좋습니다를 구분하는 세부 사항입니다."
최종 결과
깨끗해 보입니다.
AI가 나를 80%. 내가 조정한 결과 100%.
직접 체험해보고 싶으신가요?
작게 시작하세요. 카드 그리드나 추천 슬라이더와 같은 간단한 블록을 선택합니다. 이 구조를 클로드(또는 선택한 모델)에게 전달합니다:
- AI에게 코드베이스에서 유사한 블록의 예제 2~4개를 찾아보라고 지시하세요.
- 작업 중인 원시 HTML 붙여넣기
- 레이아웃 변환을 일반 영어로 설명하세요.
- 바닐라 JS 및 CSS 요청(프레임워크 없음)
그런 다음 브라우저 콘솔을 열고 실제로 테스트합니다. 찾습니다:
- 타이밍 문제(누적된 시간 초과 확인)
- 레이아웃 이동/성능 문제(라이트하우스가 이를 포착합니다)
- 색상/간격 불일치(눈으로 확인할 수 있음)
고장난 부분을 수정하세요. 배송합니다. 반복합니다.
사이드 노트
저는 자바스크립트에 관해서는 창고에서 가장 날카로운 도구는 아니지만, 누가 그런지 아세요? 인공지능이 학습한 것은 바로 인터넷입니다. 따라서 막히거나 무슨 일이 일어나고 있는지 잘 모르겠다면 인공지능의 도움을 받아보세요. 하지만 과거에 실제 사람들이 문제를 해결한 적이 있는지, 어떻게 해결했는지 다시 한 번 확인하는 것을 잊지 마세요. 삽을 과도하게 설계하는 것일 수도 있습니다. AI 솔루션이 이상하게 복잡하게 느껴진다면 아마도 그럴 가능성이 높습니다.
최종 생각
AI 코드 생성은 계속 발전하고 있으며, 새로운 모델이 나올 때마다 더 빠르고 더 좋아지고 있습니다. 이는 일상적인 배송 작업에 유용합니다. 시스템 작동 방식을 깊이 이해하는 것이 그 어느 때보다 중요합니다.
AI는 도구입니다. 마법이 아닙니다. 하나처럼 사용하세요.
트랙터의 작동 원리를 알아보세요. 로봇이 부품을 만들어 고치도록 합니다.
엣지 전송 서비스에 대해 더 자세히 알아보고 싶으신가요?
엣지 전송을 위한 문서 작성에 대한 블로그를 확인하거나 YouTube에서 팟캐스트 토론을 들으며 콘텐츠 전송을 어떻게 혁신할 수 있는지 알아보세요.
저자 소개
프랭크 타운센드
프런트엔드 개발자 & 아보리 디지털의 A/V 닌자
Frank는 웹 사이트 개발 및 디자인 분야에서 탄탄한 경력을 쌓았습니다. Arbory에 합류하기 전에는 InstantOrder에서 디자인 및 개발 업무를 담당하며 프리랜서로 일한 경험이 있습니다. 새로운 기회를 갈망하던 Frank는 협력적이고 역동적인 분위기가 마음에 들어 Arbory Digital로 자리를 옮겼습니다. 업무 외의 취미로는 목공, 사진, 비디오 촬영, 농사, 올웨이즈 로레타 쇼의 투어 관리 및 기타 부업 프로젝트가 있습니다.