AI가 만든 디자인 시스템: 모바일 퍼스트 접근법

왜 모바일 퍼스트인가?

국내 웹 트래픽의 상당 부분이 모바일에서 발생합니다(인터넷진흥원(KISA) 인터넷이용실태조사 참고). 그런데 많은 서비스가 여전히 데스크톱 먼저 디자인하고 모바일에 "맞추는" 방식을 사용합니다. 이 접근은 모바일에서 결정적인 UX 결함을 만듭니다.

유나의 디자인 원칙

1. 터치 영역 최소 48px

모바일에서 버튼, 링크, 인터랙티브 요소의 최소 터치 영역을 48×48px로 설정합니다. 이보다 작으면 오터치율이 급격히 증가합니다.

2. 컨텐츠 계층 구조 우선

모바일 화면에서는 한 번에 하나의 핵심 정보만 보여야 합니다. 데스크톱의 사이드바 정보는 아코디언이나 탭으로 변환합니다.

3. 다크 모드 기본

OLED 기기에서 배터리 효율을 높이고, 야간 사용자의 눈 피로를 줄이기 위해 다크 모드를 기본값으로 설정합니다.

4. word-break: keep-all

한국어 콘텐츠에서 단어가 중간에 잘리면 가독성이 크게 저하됩니다. word-break: keep-all을 모든 텍스트 블록에 적용합니다.

AI가 자동으로 검사하는 항목

• 색상 대비 비율 (WCAG AA 기준 4.5:1 이상)
• 터치 영역 크기 검증
• 폰트 사이즈 최소 13px 확인
• 이미지 alt 텍스트 존재 여부
• 키보드 네비게이션 가능 여부