126 lines
3.8 KiB
Markdown
126 lines
3.8 KiB
Markdown
---
|
|
name: markup-base
|
|
description: |
|
|
화면 설명, 스크린샷, 텍스트 명세를 받아 시멘틱 HTML + Tailwind CSS 기반의
|
|
Nuxt SFC 마크업을 생성합니다. 팀 공통 컨벤션(7단계 클래스 순서, ARIA, 반응형)을 자동 적용합니다.
|
|
|
|
다음 상황에서 반드시 사용하세요:
|
|
- "이 화면 마크업해줘", "HTML 구조 만들어줘", "퍼블리싱해줘"
|
|
- 화면 설명이나 스크린샷을 받고 컴포넌트 골격을 잡을 때
|
|
- Figma 없이 텍스트 명세나 와이어프레임으로 마크업을 시작할 때
|
|
---
|
|
|
|
# 기본 마크업 가이드 (markup-base)
|
|
|
|
화면 명세 → 시멘틱 HTML + Tailwind → Nuxt `.vue` SFC 골격을 생성합니다.
|
|
|
|
## 언제 사용하는가
|
|
|
|
- Figma 디자인 없이 화면 명세/스크린샷으로 마크업을 시작할 때
|
|
- 신규 페이지/섹션의 기본 구조를 빠르게 잡을 때
|
|
- 기존 마크업을 팀 컨벤션에 맞게 리팩토링할 때
|
|
|
|
## 입력
|
|
|
|
- 화면 설명 (텍스트), 와이어프레임 이미지, 또는 스크린샷
|
|
- 반응형 분기점 요건 (없으면 Tailwind 기본값 사용: `sm` 640px / `md` 768px / `lg` 1024px)
|
|
- 접근성 요건 (없으면 WCAG 2.1 AA 기본 적용)
|
|
|
|
---
|
|
|
|
## 작업 순서
|
|
|
|
### Phase 1: 화면 구조 파악
|
|
|
|
1. 제공된 화면 명세 또는 이미지를 분석해 레이아웃 영역을 식별한다.
|
|
- 반복 블록 → 컴포넌트 후보 표시
|
|
- 상태가 있는 영역 (로딩, 에러, 빈 상태) 확인
|
|
2. 반응형 분기점을 파악한다.
|
|
- 모바일 우선(mobile-first) 여부 확인
|
|
- 중단점별 레이아웃 변화 정리
|
|
|
|
### Phase 2: 시멘틱 구조 설계
|
|
|
|
1. HTML 시멘틱 태그를 선택한다.
|
|
|
|
| 영역 | 권장 태그 |
|
|
|---|---|
|
|
| 페이지 헤더 | `<header>` |
|
|
| 주 내비게이션 | `<nav aria-label="...">` |
|
|
| 주 콘텐츠 | `<main>` |
|
|
| 사이드 | `<aside>` |
|
|
| 콘텐츠 섹션 | `<section aria-labelledby="...">` |
|
|
| 독립 콘텐츠 | `<article>` |
|
|
| 페이지 푸터 | `<footer>` |
|
|
|
|
2. 인터랙션 요소를 식별한다.
|
|
- 버튼: `<button type="button">` (폼 외부), `<button type="submit">` (폼 내부)
|
|
- 링크: `<a href="...">` (페이지 이동), `<button>` (동작 트리거)
|
|
|
|
### Phase 3: Tailwind 클래스 적용
|
|
|
|
클래스 순서는 아래 7단계를 따른다:
|
|
|
|
```
|
|
1. 레이아웃 : flex, grid, block, hidden
|
|
2. 크기 : w-*, h-*, max-w-*, min-h-*
|
|
3. 여백 : m-*, p-*, gap-*, space-*
|
|
4. 배경/보더 : bg-*, border-*, rounded-*, shadow-*
|
|
5. 타이포그래피 : text-*, font-*, leading-*, tracking-*
|
|
6. 색상 : text-{color}, fill-*, stroke-*
|
|
7. 상태/반응형 : hover:, focus:, sm:, md:, lg:
|
|
```
|
|
|
|
조건부 클래스는 `clsx` 또는 `cn` 유틸리티를 사용한다.
|
|
|
|
### Phase 4: ARIA 및 접근성 처리
|
|
|
|
- 아이콘 전용 버튼: `aria-label` 필수
|
|
- 모달/다이얼로그: `role="dialog" aria-modal="true" aria-labelledby="..."`
|
|
- 로딩 상태: `aria-live="polite"` 또는 `aria-busy="true"`
|
|
- 이미지: 의미 있는 이미지 `alt` 텍스트 / 장식용 `alt=""`
|
|
- 폼 레이블: `<label for="...">` 또는 `aria-label`
|
|
|
|
### Phase 5: Nuxt SFC 출력
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
// Props / Emits / 로컬 상태만 포함
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 시멘틱 구조 -->
|
|
</template>
|
|
```
|
|
|
|
- `<style>`은 Tailwind로 커버 불가한 경우에만 추가
|
|
- `scoped`보다 Tailwind 유틸리티 우선
|
|
|
|
---
|
|
|
|
## 출력 형식
|
|
|
|
```
|
|
## 마크업: <화면명>
|
|
|
|
### 구조 개요
|
|
- 레이아웃: [설명]
|
|
- 반응형 분기: [없음 / sm, md, lg 각각 설명]
|
|
- 컴포넌트 분리 후보: [목록]
|
|
|
|
### 코드
|
|
\`\`\`vue
|
|
<script setup lang="ts">
|
|
...
|
|
</script>
|
|
|
|
<template>
|
|
...
|
|
</template>
|
|
\`\`\`
|
|
|
|
### 추가 작업 필요 항목
|
|
- [ ] 이미지 alt 텍스트 확정 필요
|
|
- [ ] 컬러 토큰 디자인 시스템 확인 필요
|
|
```
|