10. 레이아웃

1. 모바일 레이아웃

 1) Touch 최소 사이즈

  - iOS: 44 X 44 Point

  - Android: 48 X 48 dp (7~10mm)

  - 디자인 시 따르지 못하게 되는 경우 주변 여유공간으로 해결

 2) 화면구성 그리드

  - 각 위치별 구성되는 정보가 다름

  - App Bar/Bottom Button 부분과 Contents영역은 간격을 두는 것이 좋은 데, 터치 오류 및 시각상 구분을

    위해 활용  

  - 좌우 여유영역 또한 시각적 여유공간과 터치 오류를 줄이기 위한 용도, 또한 시각적 흐름을 통해 

    빠른 정보 파악을 위한 여유공간

  - 시각적 그룹핑을 위한 구성 

2. UI 디자인의 이해

 

 1) UI 디자인 프로세스

  (1) 요구사항, 관련정보 수집

   - 구체적인 요구사항, 내부목표, 관련 담당자 미팅 등을 통해 구체적 목표, 관련정보 수집

  (2) Flow Chart, IA구성 

  (3) Paper Wire-Frame Sketch

   - 취합 정보를 근거로 모바일 화면 스케치를 통한 프로토타입 제작

  (4) 필요시 Digital Wire-Frame 제작 

  (5) GUI 디자인 

 2) UI시나리오

  - 콘텐츠, 레이아웃, 페이지 간 네비게이션 등을 구체적으로 표현한 문서

  - 서비스 & 비즈니스 목표, 사용자 정의, 주요 기능 등 요소 포함

  - IA 예시:

  - 페이지 레이아웃 예시:

 3) UI Design Pattern

  - 이전에 누군가가 해결해 놓은 사례를 참조하여 진행하는 업무에 활용, 문제를 해결하는 것을 의미

  - 디자인 패턴을 통해 적절한 레이아웃 구성에 용이

  - 단, 새로운 UI 패턴을 고민하지 않을 단점이 존재하기에 활용에 유의