PC 및 모바일 UX/UI 가이드라인: 웹디자인 기본 사이즈와 스타일 가이드
1. 웹디자인에서 PC와 모바일 UX/UI의 중요성
오늘날 웹사이트는 다양한 기기에서 접근되기 때문에 반응형 웹디자인이 필수가 되었습니다. 모바일과 PC 사용 환경은 큰 차이가 있기 때문에 각 기기에 맞춘 UX/UI 설계가 중요하며, 이를 통해 사용자는 더 직관적이고 편리한 경험을 할 수 있습니다. 이 글에서는 모바일과 PC 각각의 UX/UI 가이드라인을 제공하여 화면 사이즈와 요소 간 여백, 텍스트 크기, 그리고 반응형 설정에 대해 어느정도 알아볼 수 있는 시간을 가져보려고 합니다. 웹 디자인을 하신다면 한번 쯤은 보시면 좋으리라 생각합니다.
2. 모바일 UX/UI 디자인 기본 가이드
모바일 UX/UI 디자인에서는 기기의 화면 크기와 터치 중심의 상호작용을 고려해야 합니다. 작은 화면에서 사용자들이 더 쉽게 웹사이트를 탐색할 수 있도록 기본 사이즈와 여백, 요소 간 간격 등을 명확히 설정하는 것이 중요합니다.
모바일 주요 CSS 스타일 가이드
css코드
섹션 패딩: 16px (p-4)
좌우 여백: 16px-24px (px-4 ~ px-6)
요소간 간격: 16px (gap-4)
/* 헤더/푸터 */
헤더 높이: 48-56px (h-12 ~ h-14)
하단 네비게이션: 64px (h-16)
/* 터치 영역 */
최소 버튼 크기: 44x44px
아이콘 버튼: 48x48px (w-12 h-12)
/* 폰트 사이즈 */
작은 텍스트: 12px (text-xs)
본문: 14px (text-sm)
제목: 16px (text-base)
큰 제목: 20px (text-xl)
모바일 터치 영역 및 버튼 디자인
모바일 환경에서는 터치 영역이 충분히 커야 사용자가 불편 없이 원하는 요소를 선택할 수 있습니다.
- 최소 터치 영역: 44x44px (손가락 터치가 용이한 크기)
- 아이콘 버튼 크기: 48x48px (일관성 있게 설정하여 시각적 안정성 부여)
모바일용 폰트 사이즈 가이드
모바일에서 가독성을 유지하려면 폰트 크기를 적절히 설정해야 합니다.
- 작은 텍스트: 12px
- 본문 텍스트: 14px
- 제목 텍스트: 16px 이상
- 큰 제목: 20px (큰 텍스트를 사용할 때는 강조하는 데 효과적임)
3. PC UX/UI 디자인 기본 가이드
PC 디자인은 넓은 화면을 고려하여 그리드 시스템과 다양한 레이아웃 구성을 사용할 수 있는 장점이 있습니다. 여기서는 PC 화면에 맞춘 여백, 그리드, 텍스트 크기 등의 가이드라인을 제시합니다.
PC 주요 CSS 스타일 가이드
css코드
최대 컨텐츠 너비: 1200-1320px (max-w-6xl ~ max-w-7xl)
섹션 패딩: 24-32px (p-6 ~ p-8)
그리드 갭: 24px (gap-6)
/* 헤더/네비게이션 */
헤더 높이: 64-80px (h-16 ~ h-20)
네비게이션 간격: 32px (gap-8)
/* 여백 */
섹션 간격: 48-64px (gap-12 ~ gap-16)
카드 패딩: 24px (p-6)
/* 폰트 사이즈 */
본문: 16px (text-base)
소제목: 18px (text-lg)
제목: 20px (text-xl)
큰 제목: 24-30px (text-2xl ~ text-3xl)
그리드 시스템과 최대 너비
- 최대 너비: 콘텐츠는 보통 1200~1320px로 설정해 가독성을 유지합니다.
- 그리드 간격: 24px 정도의 간격을 두어 요소들이 지나치게 밀집되지 않도록 합니다.
폰트 사이즈 및 여백 설정
PC 화면은 모바일보다 넓기 때문에 텍스트 크기를 약간 더 크게 설정하는 것이 좋습니다.
- 본문 텍스트: 16px 이상 (일반적으로 16px을 사용)
- 소제목: 18px
- 제목: 20px
- 큰 제목: 24-30px (페이지의 주요 헤드라인이나 중요한 섹션 제목에 적합)
4. 반응형 브레이크포인트와 Tailwind 설정
반응형 디자인에서 브레이크포인트는 화면 크기에 따라 스타일을 변경하여 사용자 경험을 개선하는 중요한 요소입니다. Tailwind CSS의 기본 브레이크포인트를 활용해 PC와 모바일, 태블릿에서 최적의 디자인을 구현할 수 있습니다.
Tailwind 기본 브레이크포인트
css코드
sm: 640px // 모바일 가로
md: 768px // 태블릿
lg: 1024px // 작은 데스크톱
xl: 1280px // 큰 데스크톱
2xl: 1536px // 많이 큰 디스플레이
미디어쿼리와 반응형 스타일 예시
css코드@media (min-width: 768px) {
/* 태블릿 이상 스타일 */
}
@media (min-width: 1024px) {
/* 데스크톱 이상 스타일 */
}
Tailwind 반응형 클래스 예시
화면 크기에 따라 여백을 조정하여 일관된 레이아웃을 유지합니다.
html코드 복사<div class="p-4 md:p-6 lg:p-8">
<!-- 콘텐츠 영역 -->
</div>
위 코드는 화면 크기에 따라 패딩이 자동으로 변경되도록 설정합니다. 모바일에서는 16px 패딩(p-4), 태블릿에서는 24px 패딩(p-6), PC에서는 32px 패딩(p-8)을 적용하여 각 화면에 맞게 여백을 조정할 수 있습니다.
5. 마무리 및 요약
PC와 모바일 환경에서 각각 최적화된 UX/UI 디자인을 제공하기 위해서는 화면 크기에 맞춘 여백, 폰트 사이즈, 레이아웃 설정이 필수적입니다. 또한 반응형 디자인을 위해 CSS 미디어 쿼리와 Tailwind CSS의 반응형 클래스 사용을 권장합니다. 보통 권장 사이즈 권장 크기를 잘 알지 못해 어느 정도 본인들이 정해놓은 사이즈를 맞춰가면서 할때가 많은데요, 디자이너 적으로 절대적인 규칙이란 없지만 사람들이 편하게 지켜보는 디자인이 있고 그에 따라 암묵적으로 지켜지는 룰이 있는 것 같습니다.
참고상식
em과 rem의 차이점
- em: 해당 요소의 직속 부모 폰트 크기를 기준으로 크기를 설정합니다.
- 예시: 만약 부모 요소의 폰트 크기가 16px이고 자식 요소에서
1.5em을 사용했다면, 자식 요소의 폰트 크기는 16px × 1.5 = 24px이 됩니다. - 적용 시점: 특정 요소가 부모 요소의 크기에 비례하도록 설정하고 싶을 때 사용합니다.
- 예시: 만약 부모 요소의 폰트 크기가 16px이고 자식 요소에서
- rem: 최상위 HTML 요소의 폰트 크기를 기준으로 크기를 설정합니다.
- 예시: 브라우저 기본 폰트 크기가 16px일 때,
1rem은 16px로 계산됩니다. 따라서1.5rem은 16px × 1.5 = 24px이 됩니다. - 적용 시점: 전체 페이지에서 일관된 크기를 유지하고 싶을 때 사용합니다.
- 예시: 브라우저 기본 폰트 크기가 16px일 때,
em과 rem 예시 코드
1. em을 사용한 예시
아래 예시에서는 부모 요소의 폰트 크기를 기준으로 자식 요소의 크기를 설정합니다.
html코드 <div style="font-size: 20px;">
<p style="font-size: 1em;">이 텍스트는 20px입니다.</p> <!-- 부모의 100% 크기 -->
<p style="font-size: 1.5em;">이 텍스트는 30px입니다.</p> <!-- 부모의 150% 크기 -->
</div>
- 부모 요소(
div)의 폰트 크기를 20px로 설정했기 때문에,1em은 20px,1.5em은 30px로 계산됩니다.
2. rem을 사용한 예시
아래 예시에서는 전체 페이지의 기본 폰트 크기를 기준으로 크기를 설정합니다.
html코드 <html style="font-size: 16px;">
<body>
<p style="font-size: 1rem;">이 텍스트는 16px입니다.</p> <!-- HTML 폰트 크기의 100% -->
<p style="font-size: 1.5rem;">이 텍스트는 24px입니다.</p> <!-- HTML 폰트 크기의 150% -->
</body>
</html>
- HTML 요소의 폰트 크기를 16px로 설정했기 때문에
1rem은 16px,1.5rem은 24px로 계산됩니다.
