반응형

코딩자동화 2

ChatGPT로 반응형 마크업 10분 만에 끝내는 법

웹 퍼블리싱 업무를 하다 보면 디자인은 달라도 반복되는 작업이 많습니다. 카드 목록을 만들고, PC에서는 3열로 배치하고, 태블릿에서는 2열, 모바일에서는 1열로 바꾸는 작업도 그중 하나입니다.이런 작업은 어렵지는 않지만 HTML 구조를 만들고 클래스명을 정한 다음 반응형 CSS까지 작성하려면 생각보다 시간이 걸립니다.저는 요즘 반복적인 마크업 초안을 만들 때 ChatGPT를 활용하고 있습니다.잘 작성된 프롬프트를 사용하면 HTML과 CSS 초안을 10분 안에도 만들 수 있습니다. 다만 AI가 만들어준 코드를 그대로 사용하는 것이 아니라, 웹 접근성과 프로젝트 환경에 맞게 검수하고 수정하는 과정은 반드시 필요합니다. ChatGPT에게 “코드 만들어줘”라고만 하면 안 되는 이유 처음 ChatGPT를 사..

웹 퍼블리셔 전용 ChatGPT 프롬프트 모음

1. HTML 구조 생성용프롬프트: 접근성 기준에 맞는 관리자 테이블 구조 만들어줘 2. 반응형 계산용프롬프트:1920px 기준 28px을 320~1920 범위 clamp 값으로 계산해줘. 3. 리팩토링용프롬프트:아래 CSS 중복 제거하고 가독성 높게 정리해줘 4. 공공기관 기준 대응용프롬프트:웹 접근성 지침에 맞게 alt 텍스트 가이드 작성해줘.

반응형