القائمة
프론트엔드 UI 작업 시 반응형 디자인을 적용합니다. PC를 기본으로 작성하되 모바일도 반드시 함께 고려합니다. FE 컴포넌트 작성/수정 시 항상 참고합니다.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | responsive-design |
| description | 프론트엔드 UI 작업 시 반응형 디자인을 적용합니다. PC를 기본으로 작성하되 모바일도 반드시 함께 고려합니다. FE 컴포넌트 작성/수정 시 항상 참고합니다. |
| triggers | ["컴포넌트 작성","컴포넌트 수정","UI 작업","프론트엔드","반응형","모바일"] |
모든 프론트엔드 UI 작업은 PC(데스크탑)를 기본으로 작성하고, 모바일에서도 사용 가능하도록 반드시 함께 고려합니다. 새 컴포넌트를 만들거나 기존 컴포넌트를 수정할 때 모바일 레이아웃을 빠뜨리지 않도록 반드시 이 가이드를 따릅니다.
| 접두사 | 최솟값 | 대상 기기 |
|---|---|---|
| (없음) | 0px | 공통 기본값 |
sm: | 640px | 큰 모바일 / 소형 태블릿 |
md: | 768px | 태블릿 |
lg: | 1024px | 데스크탑 (주요 타겟) |
xl: | 1280px | 와이드 데스크탑 |
// ❌ Bad - 모바일 대응 없음
<div className="grid grid-cols-3 gap-6 p-8">
// ✅ Good - PC 기본, 모바일에서 단일 열로 축소
<div className="grid grid-cols-3 gap-6 p-8 max-md:grid-cols-1 max-md:p-4">
max-md:= md(768px) 미만에서 적용 — Tailwind v3.2+의 max-width variant
// ✅ Good - PC: 가로 배치, 모바일: 세로 배치
<div className="flex flex-row gap-6 max-md:flex-col max-md:gap-4">
// ✅ Good - PC: 3열 그리드, 모바일: 1열
<div className="grid grid-cols-3 gap-6 max-md:grid-cols-1">
// ✅ Good - PC 기준 크기, 모바일에서 축소
<h1 className="text-4xl font-bold max-md:text-2xl">
<p className="text-base max-md:text-sm">
// ✅ Good - PC 기준 여백, 모바일에서 축소
<section className="px-16 py-12 max-md:px-4 max-md:py-6">
// ✅ Good
<nav className="w-56 shrink-0 max-md:hidden"> {/* PC: 고정 사이드바 */}
<button className="hidden max-md:flex">메뉴</button> {/* 모바일: 햄버거 버튼 */}
// ✅ Good
<button className="px-4 py-2 max-md:min-h-[44px] max-md:min-w-[44px]">
// ✅ Good
<div className="flex flex-row gap-4 max-md:flex-col">
<input className="max-md:w-full" />
<button className="max-md:w-full">제출</button>
</div>
// ✅ Good - 모바일 가로 스크롤
<div className="overflow-x-auto">
<table className="min-w-full max-md:min-w-[600px]">
// ✅ Good
<div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[480px] max-md:inset-0 max-md:w-full max-md:translate-x-0 max-md:translate-y-0">
// PC에서만 표시
<div className="block max-md:hidden">PC 전용</div>
// 모바일에서만 표시
<div className="hidden max-md:block">모바일 전용</div>
aria-label 명시type="button" 누락 금지 (form 내 버튼)outline-none만 사용 시 focus-visible:ring 대체 필수// ✅ Good
<button
type="button"
aria-label="메뉴 열기"
className="rounded-md p-2 focus-visible:ring-2 focus-visible:ring-ring"
>
<MenuIcon className="h-5 w-5" />
</button>
컴포넌트 작성/수정 후 아래 항목을 반드시 확인합니다.
aria-label 등 접근성 속성 누락 없음