[5강] 모바일 UI/GUI 디자인 컴포넌트 (1)

참고하면 좋은 사이트 : https://velog.io/@oneook/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EB%B0%98%EB%93%9C%EC%8B%9C-%EC%95%8C%EC%95%84%EB%91%90%EC%96%B4%EC%95%BC-%ED%95%A0-32%EA%B0%80%EC%A7%80%EC%9D%98-UI-%EC%9A%94%EC%86%8C-%EB%B2%88%EC%97%AD

프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)

 

1. 모바일 컴포넌트의 특징

 

*모바일 디바이스의 특성에 따라 컴포넌트들은 표준화 되어있으며, 이러한 차이가 웹 디자인과 비교했을 때 가장 큰 차이점이라고 할 수 있음

• 작은 디스플레이
• 손으로 들고 사용하는 방식
• 손가락으로 조작

2. 모바일 컴포넌트 종류

 

* 모바일은 웹 디자인과 달리 다양한 컴포넌트들이 표준화 되어있음. 

 

• 1) 구조 구성 컴포넌트 

 

• 2) 콘트롤 컴포넌트

• 3) 콘텐츠 디자인

• 4) 아이콘 디자인

3. 아이폰의 컴포넌트 

*  아이폰 컴포넌트 종류 : 스테이터스 바, 네비게이션 바, 툴 바 , 탭 바, 서치 바, 스코프 바

출처: https://m.blog.naver.com/vinylx/220020798349

• 스테이터스 바 : 아이폰의 스테이터스 바는 투명하게 적용되며, 네비게이션 바와 합쳐서 보여진다. 디폴트는 검정 글자이며 흰색으로 적용할 수도 있음.

• 네비게이션 바 : 아이폰의 네비게이션 바 또한 투명하게 적용되며, 스테이터스 바와 합쳐서 보여짐. 네비게이션 바를 통해 중앙에 현재 윛, 좌측에 이전 위치, 우측에 추가 기능(툴바)을 배치함.(텍스트만으로 표현이 되므로, 글자 간의 충분한 간격이 나오는지 확인해야함, 네비게니션 바의 디자인 스타일은 모든 페이지에서 동일하게 표현되도록 함)

• 네비게이션 바 최상단의 경우 :  앱 구조상 최상단에 위치할 경우, 혹은 적은 페이지의 경우는 아래 이미지처럼 현재 위치를 별도로 표현하지 않기로 함.

• 네비게이션 바 입력창 : 필요에 따라 기존 페이지를 덮고 특정행동을 취하게 할 수있음, 그럴경우 아래 이미지처럼 입력창이 네비게이션 바에 나타남

• 네비게이션 바 사라짐 : 사용자가 콘텐츠에 집중하고자 할때 네비게이션 바를 사라지게 할 수 도 있음.

• 툴바 : 네비게이션 바 우측 혹은 화면 최하단에 액션을 수행하는 아이콘의 형태로 툴 바가 위치함. 하단에 배치된 툴 바의 경우 키보드가 나타날 때 화면에서 키보드에 가려지는 형태가 되기도 함

아이폰의 경우

아이패드의 경우 : 네비게이션 바가 길기 떄문에 위의 이미지와 같이 우착에 다양한 아이콘을 배치하기도 함

• 탭바 : 하단의 탭 바를 통해서 쉽게 다른 페이지 뷰로 이동하거나, 모드 혹은 별도의 액션을 실행함(* 5개 이상의 아이코은 배치하면 안되고, 5개 이상일 경우는 아래 이미지처럼 More 아이콘에 관련 내용을 넣어야 함/ 가로,세로 모드 모두 동일한 갯수의 탭 바 아이콘을 제공해야 함)

• 서치바 : 서치바를 통해 사용자들은 서치를 할 수 있음 , Clear 버튼을 배치할 수 도 있고, 프롬프트(텍스트 정보 제공)를 제공할 수 있음

• 스코프 바 : 스코프 바는 일반적으로 서치바와 함꼐 사용되며, 서치의 범위를 설정하는데 사용

4. 안드로이드의 컴포넌트 

*  아이폰 컴포넌트 종류 : 툴 바 , 바텀 툴 바, 앱 바, 스테이터스 바 , 사이드 네비, 탭 바

 

• 툴 바: 툴 바는 굉장히 다양하게 사용됨, 디폴트 사이즈 혹은 확장된 사이즈로도 가능

기본 툴바

칼럼 너비로 사용할 수있고, 카드 보드 형식으로 툴바를 사용할 수있음

콘텐츠 위에 플로팅 툴 바로 사용할 수 도있고, 분리형 툴 바로도 사용 가능함.

• 바텀 툴 바 : 바텀 툴 바는 화면의 하단에 배치되며, 키보드가 나타날 경우에는 키보드 위에 배치할 수 있음.

키보드형 바텀 툴 바

책장(쉘프)형 바텀 툴바 형태도 가능. 아래에서 위로 필요정보가 올라옴

• 앱 바 : 과거에 '액션 바' 로 불렸지면 이제 '앱 바' 로 명칭이 바뀜. 툴 바의 한종류로 분류되며 브랜딩. 네비게이션, 서치 그리고 액션과 관련된 요소가 배치되는 곳

• 스테이터스 바: 최상단에 위치햐며, 좌측에는 노티피케이션 아이콘이 보여지며, 우측에는 시스템 아이콘 및 시간이 보여짐 / 일반적으로 스테이터스 바는 앱 바에 쓰인 컬러보다 어두운 톤으로 적용되나, 희망할 경우 다른 컬러를 적용하거나 투명하게 할 수 도 있음

일반적인 컬러를 사용한 스테이터스 바

밝은 컬러의 스테이터스 바를 선택한 경우 아이콘은 어둡게 설정한다

• 사이드 네비 : 사이드 테비는 입시로 나타나거나, 화면 사이즈에 따라 고정형으로 나타나기도 함. 죄측/우측 양쪽에 나타날 수 있음(좌측 : 네비게이션,아이덴티티 중심의 내용이 배치되어야 함 / 우칙 : 해당 페이지에서 필요로 하는 부가적인 내용)

• 탭바 : 콘텐츠의 카테고르에 따라 구분되어지는 고정 탭 바에는 간결한 명칭을 기입해야 하며, 다양한 형태로 구현 가능