디자인 리소스
Width
페이지 콘텐츠 영역의 최대 너비를 3가지 모드로 관리합니다. 콘텐츠 유형에 따라 적절한 너비를 선택하세요.
너비 모드
| Mode | Max Width | Tailwind | 설명 |
|---|---|---|---|
| Full | 100% | w-full | 대시보드, 테이블, 지도 등 최대 영역 활용 |
| Standard | 1280px | max-w-[1280px] | 기본 콘텐츠 페이지. 대부분의 페이지에 적용 |
| Narrow | 768px | max-w-[768px] | 폼, 설정, 상세 뷰 등 집중형 레이아웃 |
언제 어떤 너비를 쓸까?
Full
100%
조건
대시보드, 테이블, 지도 등 최대 영역 활용
대시보드데이터 테이블지도캘린더
Standard
1280px
조건
기본 콘텐츠 페이지. 대부분의 페이지에 적용
목록 페이지콘텐츠 페이지상세 + 사이드바
Narrow
768px
조건
폼, 설정, 상세 뷰 등 집중형 레이아웃
로그인 / 가입설정프로필 상세입력 폼
너비 비교 데모
전체화면으로 봐야 Full과 Standard의 차이를 체감할 수 있습니다
Standard — max-width: 1280px(이 컨테이너 안에서는 차이가 보이지 않을 수 있습니다)
페이지 매핑
어떤 페이지 유형이 어떤 너비를 사용하는지 가이드
| 페이지 | Mode | 이유 |
|---|---|---|
| 대시보드 | full | 차트·위젯이 화면을 꽉 채워야 함 |
| 테이블 뷰 | full | 열이 많은 데이터를 넓게 표시 |
| 목록 + 상세 | standard | 사이드 패널과 함께 균형있게 배치 |
| 콘텐츠 페이지 | standard | 읽기 편한 줄 길이 유지 |
| 로그인 / 가입 | narrow | 입력 폼에 집중 |
| 설정 페이지 | narrow | 설정 항목을 순차적으로 배치 |
| 프로필 상세 | narrow | 단일 엔티티 정보 표시 |