6-2. 콘텐츠 디자인 - Android

2. Android 콘텐츠 디자인

 1) Card

  (1) 기본 구성

   - 다양한 콘텐츠와 컴포넌트로 구성할 수 있는 콘텐츠 카드

   - 동일 수준의 카드 형태의 콘텐츠를 모아볼 수 있으며 이러한 모음을 카드 콜렉션이라 함 

  (2) 비교

반드시 모서리에 라운드/그림자 효과가 있어야 하며  삭제/재배열 가능	각진 모서리에 그림자 효과가 없는 것은 Tile

장식적 요소가 적어 정보 이해와 스킨이 용이	카트 형식을 선택해서 정보 스캔이 힘듦

그리드 타일을 통해 갤러리 이미지 정보 전달이 용이	갤러리의 경우 일반적으로 카드 형식을 사용하지 않음

  (3) 콘텐츠 구성

   - 이미지 위에 텍스트가 있을 경우 가독성 보장 

   - 각 콘텐츠 별 명확한 위계

   - 체크박스, 이미지, 다양한 텍스트, 액션 등이 배치 가능하며 사이즈 또한 다양

  (4) 스크롤링

   - 카드 콜렉션 스크롤은 상하 방향으로만 가능

  (5) 레이아웃

  (6) 적용 사례 

   - 별점 UI와 이미지 터치 영역을 포함한 디자인

   - 선택할 수 있는 버튼이 포함된 카드 디자인 

   - 슬라이더UI를 포함한 카드 디자인 

   - 고정 Tab Bar를 포함한 카드 디자인

 2) Dialogue

  - 특정 목적을 수행하는 역할로 텍스트와 UI 컨트롤러 등 포함

  (1) 일반 형태

  (2) Full-screen 

   - 여러가지 기능을 수행해야 할 경우 사용

   - 최종적으로 확인 버튼을 눌러야 결과 적용 (즉, 작업 취소 시 결과 반영하지 않음)

   - 작업 취소 시 변경사항이 있었을 경우 이를 저장할 지 묻는 Alert로 인지 시켜야 함 (변경사항이 없을 경우 불필요)

  - 자동저장구조 /수동저장구조

  (3) Alert

   - 구체적인 행동에 대한 결과를 예측하는 용어를 사용

   - 중요한 결정을 하는 경우에 주로 사용

  (4) Simple Menu

   - 리스트 아이템에 대한 옵션을 보여주는 역할 (옵션을 선택하면 결과가 즉시 반영) 

  (5) Simple Dialogue 

   - 리스트 아이템에 대한 옵션을 보여주는 역할로 Simple Menu와 기능은 동일하나

     보여주는 방식이 다름 (선택 시 바로 닫히고 결과 즉시 반영)

   - 바깥 영역을 터치하거나 Back버튼을 통해 닫을 수 있으므로 별도의 Close/Cancel 버튼 불필요

  (6) Confirm Dialogue

   - 옵션이 반영되기 전에 최종 확인을 받는 것을 목적으로 사용하는 경우

      (확인을 해야 설정 내용 적용)

* Date Picker도 확인 필요

 3) Grid List

  - 주로 이미지 관련 콘텐츠 나열 시 활용, 이미지가 너무 크지 않도록 주의 (특정 간격으로 수평/수직 반복)

  - 주요콘텐츠: 일반적으로 이미지 / 2차콘텐츠: 액션이나 텍스트 

  - 2차콘텐츠의 배치 위치

  - 스크롤은 상/하로만 진행 되며, 하단 이미지가 잘려보이는 형태로 레이아웃 구성

    (아래에 추가정보가 있다는 것을 사용자가 예측할 수 있도록) 

  - Single Line Grid List:

1줄 텍스트 추가	1줄 텍스트 + 아이콘 추가

  - 2 Line Grid List: 

2줄 텍스트 추가	2줄 텍스트 + 아이콘 추가

 4) Divider

  - 옅고 얇은 선으로 리스트, 레이아웃, 콘텐츠, 그룹 등을 구분하는 선

  (1) Full Bleed Divider 

   - 별개의 콘텐츠 섹션을 나누는 Divider

   - 아이콘 같은 시각적 포인트를 주는 요소가 없을 경우 단순히 텍스트 간격만 가지고는 시각적 

     구분이 확실치 않으므로 Divider를 활용하는 것이 효과적

  (2) Insert Divider 

   - 그룹화 된 콘텐츠를 구분하기 위한 Divider

   - 그룹화의 시작지점에 위치 

  (3) Sub Header & Divider

 5) List 

  - 콘텐츠 구성 배열 참고:

  - 싱글 칼럼으로 구성되며, 각각 Tile 성격으로 구성

  - 응용사례 참고:

 6) Menu

  - 임시 팝업 형태로 버튼, 액션 등으로 구성

  - 각 메뉴는 싱글 라인 텍스트로만 구성되어야 하며, 선택 시 바로 적용

 7) Bottom Sheets

  - 화면 하단에서 올라오는 Sheet로, 주로 하단으로부터 끌어올려 사용가능

  (1) Persistent bottom sheets 

   - 하단에 위치하고 있다가 필요에 따라 세부정보 노출 

   - 다른 페이지를 보고 있더라도 음악 정보를 표시하고 있음

  (2) Modal bottom sheets

   - 앱과 연계 기능이나 콘텐츠를 보여주는 역할로 활용

   - 뒷 화면을 활성화 시키기 위해서는 해당 Sheet를 닫고 활용 가능 (하단으로 끌거나 외부 영역을 

      터치해서 닫기 가능)

   - 콘텐츠 높이 만큼만 올라오면 충분하며, 콘텐츠보다 더 많이 올라오는 것은 지양

   - 단, 많은 수의 선택지가 주어지더라도 App Bar영역을 침범하면 안됨