모바일 애플리케이션에서의 시각적 피드백

모바일 애플리케이션에서 시각적인 피드백은 사용자 경험을 더욱 향상시키며, 사용하기 재미있는 앱은 그렇지 않은 단순하고 지루한 앱보다 더 자주 출시됩니다. MobileTogether 빠른 모바일 앱 개발 Altova의 (RMAD) 프레임워크는 매력적인 시각적 피드백 기능을 갖춘, 다양한 플랫폼에서 사용할 수 있는 모바일 앱을 개발하는 데 필요한 모든 도구를 포함하고 있습니다.

MobileTogether 디자이너의 드래그 앤 드롭 컨트롤 팔레트에는 클릭 시 자동으로 모양이 변하는 버튼 컨트롤이 포함되어 있습니다. 또한, 앱이 실행되는 동안 버튼의 텍스트, 이미지 또는 기타 요소들을 추가하거나 변경하는 조건을 정의할 수 있습니다.

또한, 다른 여러 가지 컨트롤도 버튼처럼 정의하여 사용할 수 있습니다. 이 경우, 컨트롤을 클릭하면 하나 이상의 동작이 수행됩니다. 이와 관련하여 이전에 설명한 내용이 있습니다 아이콘 이미지를 도구 버튼으로 사용하는 것 모바일 앱에서 세련되고 우아한 도구 메뉴를 만들 수 있습니다. 이번 글에서는 도구 이미지에 인터랙티브 기능을 추가하여, 각 클릭에 대한 매력적인 시각적 피드백을 제공할 것입니다.

아래 스크린샷은 저희가 제작한 "Where Am I" 앱의 한 페이지를 보여주며, 이 앱은 이미지 버튼의 활용을 보여주기 위한 예시입니다.

화면 하단에 있는 파란색 이미지들은 각각 특정 기능을 수행하는 도구 버튼이며, 해당 위치에 대한 추가 정보를 제공하도록 설계되었습니다. 이는 API를 통해 데이터를 가져오거나, 외부 웹 페이지를 열어서 이루어집니다. 버튼을 짧게 클릭하면 해당 기능이 실행되고, 길게 클릭하면 해당 버튼에 대한 설명이 담긴 메시지 창이 열립니다

화면 왼쪽 하단에 있는 "날씨" 버튼은 클릭되었음을 나타내기 위해 색상이 변경됩니다. 짧게 클릭하면 이미지가 잠시 색상이 변한 후 해당 기능이 실행됩니다.

날씨 버튼을 짧게 누르면 OpenWeather API에 요청이 전송되고, 차트와 텍스트 형식으로 날씨 데이터를 보여주는 하위 페이지가 열립니다

모바일 애플리케이션에서 시각적 피드백의 정의

사용자가 이미지 버튼을 클릭하면, 해당 이미지 뒤의 배경색이 잠시 바뀌면서 시각적인 피드백을 제공합니다. 저희 앱의 이미지는 "MobileTogether Designer"의 일부 화면에서 볼 수 있듯이, 테이블 형태로 구성되어 있습니다

각 테이블 셀은 개별적으로 정의할 수 있는 일련의 속성을 가지고 있으며, 여기에는 테이블 셀의 배경색도 포함됩니다. 또한, 각 이미지에는 이미지를 클릭했을 때 수행되는 동작을 정의하는 고유한 설정이 있습니다.

날씨 예보 이미지에 클릭하면 "userButton"이라는 요소에 인덱스 번호를 기록할 수 있습니다. 그런 다음, "배경 색상" 속성에 정의된 XQuery 표현식에 따라 "userButton" 요소의 내용에 기반하여 셀의 배경색을 변경할 수 있습니다.

다음은 "날씨 예보" 도구에서 수행할 수 있는 기능 목록입니다

먼저, "userButton"이라는 이름의 요소의 값이 업데이트됩니다.

다음으로, 이미지의 외관을 실제로 변경하는 일련의 동작들이 실행됩니다. 이러한 동작들은 어떤 이미기가 클릭될 때마다 필요하므로, "버튼 플래시(Button Flash)"라는 별도의 동작 그룹에 저장됩니다.

MobileTogether는 어떤 동작 시퀀스가 완료된 후, "화면 업데이트" 동작을 자동으로 한 번 실행합니다. 시각적인 피드백을 제공하기 위해, 우리는 시퀀스 초기에 "화면 업데이트" 동작을 실행하여 배경색을 변경하고, 잠시 멈춘 후, 사용자 버튼 값을 초기화한 다음, 다시 "화면 업데이트" 동작을 실행하여 배경색을 지우려고 합니다.

XQuery의 sleep() 함수는 일시 정지 시간을 밀리초 단위로 설정합니다. 버튼 깜빡임이 끝나면 "날씨 예보 가져오기" 액션 그룹의 실행이 이어집니다. 이 액션 그룹은 날씨 예보 API에 쿼리를 보내어 특정 위도와 경도에 대한 5일간의 예보를 가져온 다음, 위에서 보이는 날씨 하위 페이지를 엽니다.

저희는 또한 이미지 위에서 길게 누르는 동작에 대한 시각적인 피드백을 원합니다. MobileTogether를 사용하면, 위와 같이 이미지 위에서 길게 누르는 동작에 대해 별도의 기능을 정의할 수 있습니다

위의 두 번째 스크린샷에서 볼 수 있듯이, 길게 누르는 동작의 결과는 메시지 창에 표시되며, 해당 창은 "날씨 정보 가져오기" 버튼의 기능을 설명합니다.

긴 터치 동작의 경우, 배경색을 변경하기 위해 단 하나의 "화면 업데이트" 기능만 필요하며, 별도의 일시 정지를 위해 "sleep()" 함수는 필요하지 않습니다. "화면 업데이트" 기능은 사용자가 메시지 창을 닫을 때 자동으로 실행되므로, 이미지 배경이 원래대로 복원됩니다.

모바일 애플리케이션에서 테이블 형태의 데이터가 반복적으로 표시될 때, 시각적인 피드백 제공 방식

API를 통해 받은 데이터를 기반으로 목록을 표시하는 페이지에서, 도구 아이콘을 식별하기 위해 동일한 인덱싱 기술을 사용할 수 없습니다. 예를 들어, 아래 스크린샷은 특정 위치 근처의 호텔 및 모텔 검색 결과를 보여줍니다

유사한 페이지로는 교통 정보 및 주변 문화 행사 정보가 제공되며, 각 항목에 대한 도구 이미지에 대한 시각적인 피드백을 제공하고 싶습니다. 예를 들어, 아래와 같이 특정 전화기 이미지에 대해 길게 누르면 해당 정보가 표시됩니다

이 페이지들에 대한 각 결과 집합은 스크롤 가능한 테이블 형태로 구성되며, 이 테이블은 반복되는 행으로 이루어져 있습니다. 우리는 이 테이블에 API 쿼리를 통해 얻은 정보를 표시합니다

MobileTogether에는 mt-rowgroup-index()라는 XQuery 확장 함수가 포함되어 있으며, 이 함수는 각 행에 있는 이미지를 식별하는 효과적인 방법을 제공합니다. 이 함수와 특정 값을 결합하여 테이블 내의 특정 열을 지정하고, 개별 이미지를 조작할 수 있습니다. 위에 강조 표시된 전화기 이미지는 다음과 같은 배경색을 가지고 있습니다

사용자가 어떤 검색 결과에 대해 전화 아이콘을 클릭하면, 먼저 userButton 요소의 값을 업데이트하고, "버튼 깜빡임" 동작 그룹을 실행합니다

저희는 행 그룹 인덱스에 300을 더하여 해당 행의 세 번째 이미지 열을 나타냈습니다. 검색 API에 대한 저희의 쿼리는 최대 50개의 결과를 요청하므로, 선택된 결과의 행 번호에 따라 해당 이미지에 대한 사용자 버튼 요소의 값은 301부터 350까지의 범위가 될 수 있습니다. 시각적인 피드백은 테이블 셀 배경색 정의에서 mt-rowgroup-index() 함수에 의해 결정된, 해당 이미지에만 적용됩니다.

MobileTogether에는 다른 다양한 기능들이 포함되어 있습니다 확장 함수 모바일 앱에서 자주 사용되는 기능들을 위해 개발자들이 표준 XPath, XQuery, XSLT 라이브러리를 확장하기 위해 사용자 정의 함수를 만들 필요 없이, XPath/XQuery 표현식에서 활용할 수 있는 기능들을 제공하여 개발자의 부담을 줄여줍니다.

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

모바일 애플리케이션에 시각적인 피드백을 추가하기 시작할 준비가 되셨다면, 무료로 사용할 수 있는 MobileTogether Designer를 다운로드하세요. 또한, MobileTogether 데모 페이지에서 동영상, 튜토리얼, 그리고 더 많은 데모 앱으로 연결되는 링크를 확인해 보세요. 이 게시글에서 설명하는 앱은 이 저장소에서 GitHub를 통해 다운로드하여 직접 사용해 볼 수 있습니다.