AI랑노는 또또
2025. 7. 13. 15:48
2025. 7. 13. 15:48
실무용 GPT 마크업 프롬프트 모음
- 복붙해서 바로 ChatGPT에 입력하세요!
- 목적별로 분류되어 있습니다.
기본 레이아웃 템플릿 요청
- 반응형 3단 카드 리스트
Tailwind CSS로 반응형 3단 카드 UI를 만들어줘.
PC에서는 3개, 태블릿은 2개, 모바일은 1개씩 보이게 하고, 각 카드에는 이미지, 제목, 버튼이 포함되어야 해.
- 그리드 기반 레이아웃
그리드 시스템을 활용해서 좌측 사이드바와 우측 콘텐츠 영역으로 나뉜 반응형 레이아웃 HTML을 Tailwind CSS로 작성해줘. 사이드바는 고정이고, 콘텐츠 영역은 스크롤 가능해야 해.
인터랙션 요소 요청
- 탭 UI 구조
웹페이지 상단에 탭 UI를 만들고 싶어. 탭은 3개(공지사항, 이벤트, FAQ)이고, 클릭 시 해당 내용이 아래에 보이도록 해줘. 접근성과 키보드 내비게이션도 고려해줘. Tailwind CSS와 JavaScript로 작성해줘.
- 모달 팝업
버튼을 클릭하면 가운데에 모달이 뜨는 구조로 HTML과 Tailwind CSS를 작성해줘. 모달 안에는 제목, 내용, 닫기 버튼이 포함되어 있고 배경 오버레이도 있어야 해.
- 아코디언 FAQ
FAQ 섹션을 만들고 싶어. 아코디언 형태로, 질문을 클릭하면 답변이 열리는 구조로 만들어줘. HTML, Tailwind CSS, JavaScript를 함께 사용해줘.
마크업 + 접근성(ARIA) 포함 요청
- 접근성 탭 UI
WAI-ARIA 규격을 적용한 탭 UI HTML 코드를 만들어줘. 탭은 3개이며 각각 role="tab" / role="tabpanel"을 포함하고 키보드 접근성이 적용된 구조로 작성해줘.
- 웹 접근성을 고려한 버튼 리스트
여러 개의 버튼이 있고 각각의 역할이 다르지만 모두 버튼 태그로 마크업 되어야 해. 각 버튼에는 aria-label을 붙여 시각장애인도 기능을 파악할 수 있도록 구성해줘.
디자인 시안 없이 퍼블리셔 단독 요청
- 뉴스 목록 구조
뉴스 리스트를 HTML로 만들어줘. 리스트는 썸네일 이미지, 뉴스 제목, 날짜, 간략한 요약으로 구성되어 있어. 반복 가능한 구조로 마크업 해줘. 디자인 시안은 없고, Tailwind CSS로 스타일링해줘.
- 다국어 대응 구조
다국어 대응을 고려한 HTML 구조를 만들어줘. 영어/한국어 탭을 선택하면 언어별 콘텐츠가 바뀌도록 구성해줘. 콘텐츠는 텍스트 위주이며, 기본 로직은 JavaScript로 처리해줘.
템플릿 제작용 구조 요청
- 공통 헤더/푸터 마크업
웹사이트의 공통 헤더와 푸터를 HTML과 Tailwind CSS로 작성해줘. 헤더에는 로고, 네비게이션 메뉴, 햄버거 아이콘이 포함되어 있고, 푸터에는 회사 정보, 개인정보처리방침, SNS 아이콘이 들어가 있어.
- 게시판형 테이블 마크업
게시판 테이블을 HTML로 만들어줘. 컬럼은 번호, 제목, 작성자, 날짜, 조회수로 구성되어 있어. 반응형이고 모바일에서는 카드형태로 변경되도록 Tailwind CSS로 스타일링해줘.
함께 쓰면 좋은 사용 팁
1. 명확한 요구조건을 줄수록 더 정교한 결과가 나옴
2. 구조 설명 → 디자인 요소 → 특이사항 순서로 요청
3. 자주 쓰는 프롬프트는 Notion, Obsidian 등에 저장해서 반복 활용
