1. 버티컬 스택 (Vertical Stack)
- 세로줄로 콘텐츠를 정렬한다. 아래로 스크롤되는 형식이다.
- 가로길이 보다 세로가 긴 모바일 기기에서 활용하기 유용하다.
- 언제 사용하나요?
- 거의 대부분의 모바일 웹에서 사용한다. (게임과 같은 몰입형 콘텐츠 제외)
- 어떻게 활용할까요?
- 상단에 중요한 내용을 넣는다.
- 섬네일 이미지를 잘 활용할 수 있다.
- 버튼이나 텍스트의 크기가 커지거나 언어가 변경되어 길어지면 양 옆으로 분리시킨다.
2. 필름 스트립 (Filmstrip)
- 스와이프 하여 화면을 전환해서 콘텐츠를 배치한다.
- 언제 사용하나요?
- 종류나 분류가 같은 콘텐츠들이 대등한 위치에 있을 때 사용한다. (ex: 도시별 날씨, 이달의 베스트셀러 등)
- 어떻게 활용할까요?
- 내비게이션 등을 넣지 않기 때문에 공간을 줄여서 더 넓게 공간을 활용 가능하다.
- 스와이프로 화면을 넘길 수 있다는 것을 유저가 자연스럽게 알 수 있어야 한다.
3. 터치 툴 (Touch Tools)
- 유튜브, 넷플릭스처럼 동영상 스트리밍 사이트의 전채 화면 보기를 생각하면 된다.
- 유저가 화면을 터치할 경우 기능들을 보여준다.
- 언제 사용하나요?
- 동영상이나 게임 등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
- 어떻게 활용할까요?
- 툴들은 반투명하게 보여주는 것이 몰입감을 최대한 해치지 않는다.
4. 하단 내비게이션 (Bottom Navigation)
내가 만든 프로젝트이다. 자연스럽게 자랑한다.
- 어떤 화면에서든 볼 수 있는 내비게이션을 하단에 배치한다.
- 언제 사용하나요?
- 동영상이나 게임등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
- 어떻게 활용할까요?
- 상단은 화면 공간에서 매우 중요한 요소이다. 그래서 아래에 내비게이션을 넣어서 중요한 내용이 들어갈 공간을 확보한다.
5. 컬렉션 (Collections)과 카드 (Cards)
- 항목을 선택할 수 있는 사진과 카드를 나열하여 선택할 수 있게 한다.
- 언제 사용하나요?
- 복잡한 내용을 표시할 때 사용한다. 기사나 블로그 포스트 등이다.
- 유저들의 클릭 유도를 끌기에도 좋다.
- 어떻게 활용할까요?
- 섬네일을 왼쪽에, 텍스트를 오른쪽에 붙여 정렬한다.
- 화려한 색을 사용해도 좋다. 모바일의 작은 화면에서는 화려한 색도 잘 어우러진다.
6. 무한 리스트 (Infinite List)
- 유저가 스크롤하면서 계속 새로운 콘텐츠를 보여주는 방식이다.
- 언제 사용하나요?
- 모든 콘텐츠에 거의 적합하다.
- 만약 콘텐츠가 많아지면 검색 기능이 유용하다.
- 어떻게 활용할까요?
- 로딩이 될 때 인디케이터를 함께 사용하면 UX가 좋다.
- 어느 정도 위치에 스크롤이 내려가면 다음 콘텐츠를 로딩한다. 굳이 모든 데이터를 다 받아올 필요는 없다.