모바일 콘텐츠를 제작할 때 알아야할 4가지

모바일 콘텐츠를 제작하려면 터치 영역과 제스처를 비롯한 스마트폰 모바일 환경의 특징, 모바일 사용자의 특징, 모바일 콘텐츠의 특징, 모바일 앱의 제작 방식 등을 알 필요가 있습니다.

 

이러한 내용을 파악하고 모바일 웹이나 앱을 제작한다면, 어떤 콘텐츠를 어떤 방식의 UIUX로 제작해야하는지 도움을 얻을 수 있습니다. 또한 앱이나 웹을 제작하는 방식에 따른 장점과 단점도 정리해두었으니 참고해주세요.

 

이 글에서는 다음과 같은 내용을 알아보겠습니다.

1. 모바일 환경의 특징

 

모바일 환경은 PC보다 좁은 영역에서 UI를 구현해야 합니다. 따라서 터치 제스처, 각종 센서와 상호작용 하는 UX가 더욱 중요합니다.

 

모바일 환경은 특징은 다음과 같습니다.

 

• 모바일 기기 하드웨어와의 연관성
• 기기 센서와의 연관성
• 사용자가 항상 가지고 다닌다는 밀접성
• 휴대성
• 사용자와의 상호작용
• 모바일 전용 운영 체제
• 터치 제스처
• 오디오 입력

 

터치 영역 고려

 

모바일 기기가 PC와 가장 크게 다른 점은, 손가락을 이용한 상호작용 UI를 사용한다는 것입니다.

 

모바일 기기의 운영 체제별로 운영 체제는 모두 보편적으로 약속된 터치 제스처로 작동됩니다. 따라서 다양한 터치 제스처를 알아야, 제작하려는 모바일 콘텐츠의 자연스럽고 직관적인 UX로 적용할 수 있습니다.

 

 

터치 영역 이해

 

사용자와 사용자의 모바일에서 사용자의 상호작용을 최적화하려면, 터치 영역을 확인하면서 디자인을 해야 합니다.

 

보통 터치를 위해 필요한 영역은 10ml에서 14ml 정도이며, 아무리 작아도 7ml 정도는 되어야 엄지로 터치가 가능합니다.

 

 

손모양에 따른 터치 영역

 

터치 영역은 사용자가 기기를 잡는 손 모양에 따라서 달라집니다.

 

한 손으로 스마트폰을 사용할 때는 엄지가 가장 중요한 영역이고, 양손으로 사용하였을 때는 엄지와 검지를

사용하는 영역이 중요합니다.

 

한 손으로 사용하는 사람이 가장 많고, 한 손으로 들고 다른 손으로 화면을 조작하는 사람, 양손으로 사용하는 사람 순서입니다. 

 

 

또한 스마트폰의 크기나 비율에 따라서도 손의 위치 터치 영역이 달라집니다.

 

따라서 효율적이고 최적화된 터치 영역을 인지하고, 확보하는 것이 중요합니다. 

터치 제스처 고려

 

터치 제스처는 모바일 상호작용 UI의 기본 이므로, 제스처의 종류와 기능을 알아보겠습니다.

 

다음은 가장 보편적으로, 많이 사용되는 모바일 터치 제스처입니다.

 

• 탭 : 한 손가락으로 짧고 가볍게 터치하는 동작. 주로 무언가를 선택할 때.
• 더블 탭 : 화면을 빠르게 두 번 두드리는 동작. 화면을 확대하거나 축소, 현재 화면에서 빠져나갈 때. 
• 프레스(터치 앤 홀드) : 화면을 2초 이상 길게 누르는 동작. 메뉴나 팝업, 텍스트 확대&복사할 때.
• 팬 : 손가락을 터치한 채로 길게 끄는 동작. 오브젝트 이동, 여러 가지 개체 선택, 확대한 화면을 움직일 때.
• 드래그 : 특정 개체를 손가락으로 길게 끄는 동작. 아이템의 개별적 이동, 특정 영역으로 옮길 때.
• 스와이프 : 터치한 상태에서 손가락으로 미는 동작. 좌우로 슬라이드, 상하로 스크롤 할 때.
• 플릭 : 손가락을 터치하고 수평이나 수직으로 빠르게 스크롤을 하는 동작. 화면 이동, 페이지를 넘길 때.
• 핀치 : 두 손가락을 벌리거나 오므리는 동작. 화면 확대, 축소 할 때.

 

이 외에 다양한 터치 제스처는 static.lukew 사이트의 터치 제스처 문서에 정리되어 있습니다.

 

제품에 터치 제스처를 적용할 때는 전혀 색다른 것을 하기 보다는, 사람들이 많이 사용하는 것을 선택하는 것이 좋습니다.

 

또한 새로운 제스처를 개발해야한다면 현실에서와 밀접한 동작을 은유적으로 표현하는 것이 바람직합니다. 

 

 

2. 모바일 사용자의 특징

 

지금은 데이터 요금을 많이들 무제한으로 쓰시지만, 아닌 경우에는 데이터 요금때문에 필요한 정보를 빠르고 간단하게 얻기를 원합니다.

 

또한 기기가 작기 때문에, 방대한 정보를 보기보다는 단순화된 정보를 보고자 합니다. 이는 PC와는 다른점입니다.

 

모바일 사용자는 앱의 지속적인 업데이트를 경험하므로, 새로운 UX나 정보가 제공되는 것에 익숙해 있습니다. 

 

그리고 새로운 정보 제공, 추천 서비스 등을 스팸으로 여기지 않고 개방적으로 받아들인다는 점도 PC 사용자와 구별되는 특징입니다.

 

 

 

3. 모바일 콘텐츠의 특징

 

모바일 콘텐츠는 PC 환경에서 제공하는 콘텐츠보다 콘텐츠의 단위를 최소화해서 서비스를 제공합니다.

 

그 중에서 콘텐츠를 분절해서 제공하는 형태를 앱이라고 합니다.

 

다음은 모바일 사용자의 속성을 고려한 모바일 콘텐츠의 특징입니다. 

 

• 개인화 : 사용자 개개인의 특성에 맞게 제공되는 콘텐츠, 전용 기기의 보안성
• 편재성 : 이동성이 있고, 시간이나 장소·공간의 제약이 없고 즉시 연결 가능
• 편의성 : 하드웨어, 전송 속도 개선 등 소프트웨어 진화로 편리함 제공
• 차별성 : 사용자의 패턴을 분석해서, 개인마다 차별화된 서비스 제공
• 지역 기반 : 위치 기반 gps로 사용자 주변의 유용한 정보 제공

 

이러한 모바일 사용자와 모바일 콘텐츠의 환경적인 요소를 고려해서, 사용자가 원하는 모바일 콘텐츠를 제작할 수 있습니다.

4. 모바일 앱의 제작 방식

 

최근에는 앱보다 반응형 웹을 많이 제작하지만, 앱으로 제작되어야 하는 경우에 모바일 앱의 종류를 알면 유리한 플랫폼이나 제작방식을 선택할 수 있습니다.

 

모바일 앱은 스마트폰, 태블릿, 스마트 워치, 웨어러블 기기 등에서 사용하는 응용 프로그램을 말합니다.

 

플랫폼에 따라서는 iOS와 안드로이드 앱으로 구분되며 각각 구글 플레이 스토어와 애플 앱스토어에서 다운로드 할 수 있습니다.

 

제작 방식에 따라서는 크게 네이티브 앱, 하이브리드 앱, 프로그래시브 웹 앱, 모바일 웹으로 구분됩니다.

 

네이티브 앱

 

네이티브 앱은 모바일 운영 모바일의 운영 체제를 만드는 제조사에서 제공하는 개발 언어로 제작된, 해당 운영 체제에서만 동작하는 앱을 말합니다. 

 

안드로이드 앱은 C#으로 개발하고, 아이폰 앱은 스위프트나 오브젝티브 C로 개발합니다.

 

네이티브 앱의 장점

 

• 다양한 기능, 빠른 속도, 안정성
• 기기의 카메라, 마이크, 나침반, 가속도센서, 스와이프, 제스처, 푸시 알림 등을 활용
• 운영 체제에 맞는 UIUX 규칙과 일관되게 제작 가능

 

네이티브 앱의 단점

 

• 플랫폼별로 제작하는 시간과 비용

 

이러한 네이티브 앱의 단점을 보완하고자, 마이크로소프트의 자마린이나 페이스북의 리액트 네이티브를 사용해서 여러 가지 플랫폼에서 작동하는 앱을 만들고 있습니다. 

하이브리드 앱

 

하이브리드 앱은 모바일 웹과 네이티브 앱의 장점을 합친 방식입니다. 한 번 개발해서 다수 다양한 플랫폼에 적용할 수 있다는 특징이 있고,  네이티브 앱의 기능을 필요한 만큼만 사용할 수 있습니다.

 

하이브리드 앱의 장점

 

• 네이티브 앱에 비해 개발 비용, 수정 보완 용이
• 동적 데이터 실시간으로 통신 가능
• 필요한 경우 푸시 알림이나 네이티브 앱의 기능을 탑재 가능

 

하이브리드 앱의 단점

 

• 각각 플랫폼 사용자에 따라 UX 대응 필요 = 고도의 UX 설계 또는 수정 비용이 네이티브 앱 제작 비용보다 클 수 있음
• 필요한 기능을 추가해야할 때 네이티브 앱을 중복 제작하는 비용이 들 수 있음

 

프로그래시브 웹 앱

 

프로그래시브 웹 앱은 하이브리드 앱과 유사하지만, 설치하지 않고도 브라우저에서 바로 사용할 수 있다는 차이가 있습니다. 

 

기존의 '웹 앱'은 인터넷이 없을 때는 사용할 수 없어서 없다는 단점이 있었는데, 프로그레시브 웹에은 한 번만 접속하면 브라우저 캐시에 다운로드되어 인터넷 연결이 없어도 사용할 수 있다는 특징이 있습니다.

 

 

모바일 웹

 

모바일 웹은 개발 기간이 짧고 업데이트나 수정이 용이하며, 설치가 따로 필요 없습니다. 그러나 스마트폰의 센서나 gps 등을 사용할 수 없다는 단점이 있습니다.

 

모바일 사용성이나 호환성을 위해 기본적으로 반응형 웹을 통한 모바일 웹을 구현할 필요가 있습니다.

이상으로 모바일 환경과 사용자, 콘텐츠의 특징과 더불어 모바일 앱을 제작하는 방식 등을 정리해보았습니다. 읽어주셔서 감사합니다.