총 5부작 시리즈 중 **[3부: 실무 프롬프트 예시 및 입출력 데이터 시나리오]**를 시작합니다. 이번 단계는 디자인 데이터를 실제 코드로 변환할 때 AI에게 어떤 '지시'를 내려야 최상의 결과물을 얻을 수 있는지에 초점을 맞췄습니다.
시맨틱 마크업 자동 생성을 위한 프롬프트 전략
1. 퍼블리싱 현장의 핵심 페인포인트(Pain Point)
- 의미 없는 div의 남발: 자동 변환 도구들이 구조적 맥락을 이해하지 못해
<div>만 가득한 'div 지옥'을 생성함. - 네이밍 컨벤션 불일치: 프로젝트마다 다른 클래스 네이밍 규칙(BEM, Utility-first 등)을 일일이 수정하는 데 과도한 시간 소요.
- 반응형 로직의 부재: 피그마의 오토 레이아웃이 브레이크포인트(Breakpoint)별 미디어 쿼리로 매끄럽게 전환되지 않음.
2. AI 도구의 구체적 기능 및 작동 방식
AI 에이전트는 피그마 API를 통해 추출된 **JSON 데이터(레이어 이름, 속성, 계층 구조)**를 입력값으로 받아, 사용자가 설정한 프롬프트 규칙에 따라 코드를 생성합니다.
[시나리오: 피그마 컴포넌트를 React + Tailwind CSS로 변환]
① 입력 데이터 (Input Context)
- Design Data: 피그마 내 'Product_Card' 컴포넌트의 JSON 트리
- Context: 상품 이미지, 상품명(h3), 가격(span), 장바구니 버튼(button)
② 실행 프롬프트 예시 (Expert Prompt)
"너는 10년 차 시니어 웹 퍼블리셔이자 프론트엔드 개발자야. 제공된 피그마 JSON 데이터를 바탕으로 코드를 생성해줘.
[제약 사항]
- HTML: 반드시 HTML5 시맨틱 태그를 사용해. 카드 전체는
<article>로, 제목은<h3>로 구성할 것.- CSS: Tailwind CSS를 사용하고, 모바일 퍼스트(Mobile-first) 전략을 적용해. (기본: 1열, lg: 3열)
- Naming: 모든 클래스는 BEM 방식과 Tailwind를 혼합하여
card__container,card__title형태로 주석을 달아줘.- Accessibility: 이미지에는 피그마의 description 속성을
alt값으로 넣고, 버튼에는aria-label을 추가해."
③ 출력 결과물 (Output Scenario)
<!-- AI가 생성한 시맨틱 구조 -->
<article class="card__container w-full lg:w-1/3 p-4 border rounded-lg shadow-sm">
<div class="overflow-hidden rounded-md">
<img src="{item.imageSrc}" alt="{item.description}" class="object-cover w-full h-48">
</div>
<div class="mt-4">
<h3 class="card__title text-lg font-bold text-gray-900">{item.name}</h3>
<p class="mt-1 text-sm text-gray-500">{item.price}원</p>
<button type="button" aria-label="장바구니에 담기" class="card__btn mt-4 w-full bg-blue-600 text-white py-2 rounded">
담기
</button>
</div>
</article>
3. 도입 시 기대효과
- 작업 시간 80% 절감: 수동으로 태그를 쓰고 클래스명을 입력하던 단순 반복 작업이 1분 이내로 단축됩니다.
- 코드 표준화: AI가 사전에 정의된 프롬프트 규칙(BEM 등)을 엄격히 따르므로, 팀원 간 코드 스타일 차이가 사라집니다.
- 웹 접근성 상향 평준화:
alt,aria-label,role등 놓치기 쉬운 접근성 속성을 AI가 자동으로 체크하여 품질을 높입니다.
💡 오늘의 핵심 요약 및 실무 적용 팁
[핵심 요약]
- AI 에이전트의 성능은 **'디자인 데이터의 구조화'**와 **'구체적인 제약 사항이 담긴 프롬프트'**의 조합에 달려 있습니다.
- 단순히 "코드로 바꿔줘"가 아니라, **역할(Persona), 기술 스택(Stack), 컨벤션(Convention)**을 명시해야 합니다.
[실무 적용 팁]
- 피그마 레이어 정리부터: 피그마에서 레이어 이름을
Frame 1,Group 5가 아닌Card,Btn_Submit처럼 의미 있게 명명하면 AI의 시맨틱 태그 추론 정확도가 비약적으로 상승합니다. - 프롬프트 템플릿화: 팀 내 공통 CSS 방법론을 프롬프트 템플릿으로 만들어 공유하세요. 누구나 동일한 퀄리티의 코드를 뽑아낼 수 있습니다.
다음 **[4부: 디자인 시스템(Design System) 연동 및 변수 최적화]**에서는 피그마의 변수(Variables)와 토큰(Tokens)을 어떻게 코드의 변수 시스템으로 자동 매핑하는지 다루겠습니다. 기대해 주세요!