모바일 앱에서의 이미지, 아이콘, 그리고 도구 버튼

이전에 저희는 API와 모바일 앱 통합을 통해 사용자에게 풍부하고 즐거운 경험을 제공하는 방법에 대해 설명했습니다. 이전 게시물 이후로, 저희는 GPS 데모 앱을 지속적으로 개선하여 현재 날씨 정보와 주변 지역의 예정된 이벤트 정보를 제공할 수 있도록 추가적인 API 기능을 추가했습니다.

이러한 다양한 기능을 작은 모바일 화면에 제공하는 데 있어 가장 큰 어려움 중 하나는 앱 내의 모든 화면에서 사용자에게 명확하고 일관성 있으며 사용하기 쉬운 탐색 방식을 제공하는 것입니다.

모바일 앱에서 아이콘 이미지를 도구 버튼으로 사용하는 것은 세련되고 우아한 탐색 메뉴를 만들 수 있는 효과적인 방법입니다. 특히, 널리 알려져 있고 일반적으로 통용되는 규칙에 따라 아이콘을 선택하는 것이 중요합니다. 예를 들어, 왼쪽을 가리키는 화살표는 "뒤로 가기" 기능을 나타내는 경우가 많고, 플로피 디스크 아이콘은 데이터를 저장하는 기능을 나타내는 경우가 많습니다. 이러한 기능은 최종적으로 새로운 파일이나 디스크에 저장되지 않더라도 마찬가지입니다.

이번 글에서는 MobileTogether를 사용하여 모바일 앱에서 이미지 아이콘을 활용하여 플랫폼에 구애받지 않는 탐색 메뉴와 도구 버튼을 만드는 방법을 설명하겠습니다.

아래 스크린샷은 "Where Am I" 앱이 Apple iOS와 Android 스마트폰에서 실행되는 모습을 보여줍니다.

각 화면에서 사용자는 현재 GPS 좌표를 획득했으며, 도구 버튼으로 표시된 동일한 옵션 목록을 확인할 수 있습니다

선택한 확대 수준에 따라 해당 지역의 위성 사진을 확인하세요
현재 위치 정보를 담은 문자 메시지를 보내세요
현재 위치에서 기본 지도 애플리케이션을 실행합니다
현재 위치를 기준으로 일반적인 웹 검색을 수행합니다
해당 지역의 현재 날씨 정보를 확인하세요
주변에서 열리는 예정된 행사 목록을 확인하세요
MapQuest 검색 API를 사용하여 주변 지역을 검색하세요

모바일 앱 개발 도구인 MobileTogether Designer를 사용하여 앱 내의 도구 버튼들이 정의되고 설정됩니다. 이 도구를 통해 개발자는 앱의 레이아웃을 미리 보고, 개발 과정 중 언제든지 복잡한 실행 로직을 테스트할 수 있습니다.

저희의 탐색 메뉴는 일련의 테이블로 구성되어 있으며, 아래 그림은 MobileTogether 디자이너의 페이지 디자인 창에서 보여주는 예시입니다

도구 아이콘을 사용하여 메뉴를 만들 때, 특히 다양한 화면 크기와 픽셀 해상도를 가진 여러 모바일 기기에서 일관되고 예측 가능한 사용자 경험을 제공하기 위해 고려해야 할 몇 가지 사항이 있습니다.

무엇보다 중요한 것은 각 이미지가 클릭했을 때 수행될 기능을 명확하게 나타내야 한다는 것입니다.

둘째, 이미지는 다양한 크기의 손가락을 가진 사용자도 쉽게 사용할 수 있도록 충분히 커야 합니다. 모바일 사용자들은 종종 "제 손이 서툴러서" 실수로 터치를 하는 경우가 발생합니다. 하지만 사용자가 정말 서투른 것일까요, 아니면 앱의 디자인이 너무 작고 복잡해서 사용하기 어려운 것일까요?

마지막으로, 여러 화면과 다양한 도구 버튼을 표시하는 앱의 경우, 페이지 전체에 걸쳐 일관된 레이아웃과 기능은 앱 사용성을 훨씬 더 직관적으로 만들어줍니다.

저희 "Where Am I" 데모 앱은 도구 아이콘의 크기와 레이아웃을 관리하기 위해 두 가지 컨트롤 속성의 기능을 전략적으로 결합했습니다.

각 아이콘의 컨트롤 폭을 "fill_parent"로 설정하면, 모든 화면 크기에 대해 하나의 이미지 파일을 사용할 수 있습니다. 저희 앱에서 각 아이콘은 192x192 픽셀의 .png 이미지 파일이며, "fill_parent"는 이미지를 자동으로 크기 조정하여 모든 사용자 기기의 열 폭에 맞춰 표시합니다.

각 도구 아이콘의 테이블 열 너비는 XPath 표현식을 통해 정의됩니다. 우리는 영구 데이터 트리 내의 특정 요소를 사용하여 도구 아이콘의 열 너비를 지정했습니다. 이를 통해 테스트마다 각 열 너비 속성을 개별적으로 수정하는 대신, 데이터 트리 내의 값을 재정의하여 다양한 기기에서 다양한 크기를 실험할 수 있었습니다. 전체적으로 앱에서 세 가지 크기의 아이콘을 사용했습니다. 열 너비가 저장된 데이터 트리 부분은 다음과 같습니다

이 표에는 각 도구 아이콘 주변에 여백을 만들기 위한 빈 열들이 포함되어 있습니다. 여백의 열 너비는 비워져 있으며, 이는 남은 모든 공간이 균등하게 분배된다는 의미입니다. 또한, 아이콘 행들 사이에 수직 여백을 만들기 위해 행 간에 간격 조절 기능을 추가했습니다.

또한, 도구 아이콘 이미지 파일을 앱 파일에 직접 포함시키거나, 이미지를 모바일투게더 서버에 별도로 업로드하는 방법도 선택할 수 있습니다.

모바일 앱에서 도구 버튼에 대한 동작 정의하기

도구 아이콘을 클릭했을 때 수행될 작업을 정의하는 것은 간단합니다. MobileTogether를 사용하면 버튼 컨트롤과 마찬가지로 모든 컨트롤을 클릭 가능하게 만들 수 있습니다. 컨트롤의 동작은 오른쪽 클릭 메뉴를 통해 정의됩니다

위에서 선택한 버튼은 모바일 기기의 기본 지도 애플리케이션을 실행하며, GPS 좌표를 중심으로 지도를 표시하는 기능을 합니다. 하지만 이 기능은 일반적인 클릭과 더불어, 터치 또는 일반적인 클릭, 그리고 길게 누르는 동작에 대한 별도의 정의를 포함하여 개선되었습니다.

사용자 설정에 따라, 버튼을 클릭하면 내장된 MobileTogether 사운드 라이브러리에서 버튼 소리가 재생될 수 있습니다. 일반적인 클릭은 지도를 열지만, 길게 누르면 버튼의 기능을 설명하는 메시지 상자가 열립니다.

모바일 앱에서 도구 버튼의 크기를 다양하게 설정할 수 있습니다

페이지 내에서 도구 버튼이 텍스트나 다른 컨트롤과 공간을 공유하는 경우를 대비하여, 더 작은 크기의 도구 버튼이 필요했습니다. 예를 들어, 여기에서 보여드리는 검색 페이지와 검색 결과 페이지에서와 같이 말이죠

이 페이지에 표시되는 도구 아이콘들은 "영구 데이터 트리"에서 정의된 작은 아이콘 크기 요소를 사용하여 열 형태로 배치되었습니다.

자세히 알아보고 직접 사용해 보세요

이전 게시글에서 모바일 앱에 API를 통합하는 방법에 대해 설명했는데, 놓치셨다면 여기에서 확인하실 수 있습니다. 또는, MobileTogether를 처음 사용하시는 분들은 MobileTogether 데모 페이지를 방문하여 동영상, 튜토리얼, 그리고 다양한 데모 앱에 대한 링크를 확인해 보세요.

저희 데모 앱을 자세히 살펴보시면 모바일 앱에서 도구 버튼을 어떻게 구현했는지 정확히 확인하실 수 있으며, 지도, 검색, 날씨, 이벤트 관련 API를 살펴보실 수도 있습니다. 무료로 사용 가능한 MobileTogether Designer를 다운로드하시고, 이 저장소(https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I)에서 저희 앱의 코드를 GitHub에서 다운로드하여 확인해 보세요