시안부터 마크업까지 AI ChatGPT로 처리하기(2)

시안부터 마크업까지 AI로 처리하는 퍼블리셔
 GPT 코드예시

 

 

시안 생성용 (DALL·E 또는 ChatGPT + Figma 연계용)

GPT 프롬프트:

"쇼핑몰 메인 배너에 들어갈 카드 UI 시안 요청. 상단 이미지, 제목, 설명, CTA 버튼 포함. 밝고 미니멀한 디자인. 데스크탑/모바일 모두 고려."

"Figma에 적용할 수 있는 카드형 UI 와이어프레임. 제품 이미지, 제품명, 가격, 리뷰, 장바구니 버튼 포함. 그리드 형태 3열 구성."

 

마크업 생성용 (ChatGPT or GitHub Copilot)

GPT 프롬프트:

"HTML5 시멘틱 태그로 구성된 카드형 UI 마크업 작성. 구성요소: 이미지, h2 제목, p 설명, a 태그 버튼. Tailwind CSS 사용. 반응형 적용. 접근성 고려 (alt, aria-label 포함)."

"위에서 만든 카드형 UI를 반응형 레이아웃으로 3개 나열된 그리드로 구성. Tailwind CSS만 사용해서 모바일에서도 1열로 정렬되게 작성해줘."

 

실험에 사용된 코드 예시 (Tailwind + 시멘틱 HTML)

<article class="max-w-sm bg-white border border-gray-200 rounded-lg shadow p-4">
    <figure>
        <img class="w-full h-48 object-cover rounded" src="https://via.placeholder.com/400x200" alt="제품 이미지" />
    </figure>
    <div class="mt-4">
        <h2 class="text-xl font-semibold">AI 자동화 UI 카드</h2>
        <p class="text-gray-600 text-sm mt-2">AI를 활용한 자동화 마크업 생성 사례입니다. 빠르고 정확하게 구현됩니다.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700" aria-label="자세히 보기">자세히 보기</a>
    </div>
</article>​

 

이 코드는 GPT가 자동 생성할 수 있으며, 기본적인 디자인 시스템 적용 후 쉽게 확장 가능합니다.