모바일 앱을 위한 자동 링크 감지 기능

모바일 앱과 전 세계 웹의 방대한 정보 자원을 통합하면 사용자 경험이 더욱 편리하고 효율적으로 개선됩니다. 특히, 특정 웹 콘텐츠가 자주 업데이트되는 경우에 이러한 효과가 더욱 두드러집니다.

Altova사의 로우코드(low-code) 플랫폼인 MobileTogether의 최신 버전이 출시되었습니다 크로스 플랫폼 모바일 개발 프레임워크, 이 기능은 라벨 내의 URL 및 이메일 주소를 자동으로 감지하여 지원합니다. 링크를 클릭하거나 탭하면 해당 웹사이트 페이지가 브라우저 창에서 열리거나, 기기의 이메일 앱에서 새 메시지 초안이 새 창으로 열립니다. 이때 모바일 앱은 종료되지 않습니다. 개발자는 별도의 특별 코드를 추가할 필요가 없습니다.

자, 어떻게 작동하는지 살펴보겠습니다.

MobileTogether에서 "라벨"은 텍스트를 포함하는 레이아웃 컨트롤입니다. 길이는 단일 문자부터 상세 정보가 포함된 여러 줄까지 다양할 수 있습니다. 내용의 경우, 개발자가 미리 정의한 정적인 내용일 수도 있고, 페이지의 특정 요소나 계산된 값에 따라 동적으로 변하는 내용일 수도 있습니다.

라벨의 표시 방식은 한 줄로 제한될 수도 있고, 텍스트 양에 따라 확장될 수도 있으며, 개발자는 표시되는 최대 줄 수를 설정하여 앱 UI 디자인 시 더욱 다양한 옵션을 제공할 수 있습니다.

각 레이블은 개별적으로 정의된 속성을 가지고 있으며, 아래와 같이 스타일 및 속성 창에서 선택할 수 있습니다.

"자동 링크 감지" 속성은 "없음", "명시적 링크만", 또는 "모든 링크"로 설정할 수 있습니다.

저희는 각 옵션을 보여주기 위해 샘플 앱을 만들었습니다. 아래 스크린샷은 MobileTogether Designer의 시뮬레이터 창에서 실행 중인 앱을 보여줍니다. 각 텍스트 줄은 개별적인 레이블이며, 세 그룹으로 나뉘어 각 자동 링크 감지 설정을 보여줍니다.

검출된 링크에는 자동으로 밑줄이 표시되며, 해당 링크를 클릭할 수 있습니다.

긴 텍스트 블록 내에서의 자동 링크 감지 기능

레이블에는 더 긴 텍스트 블록이 포함될 수 있으며, 이 텍스트 블록에는 여러 개의 링크가 포함될 수 있습니다. 아래 그림은 "모든 링크" 설정을 기반으로, 여러 개의 링크가 감지된 하나의 레이블을 보여줍니다

계산된 텍스트 내에서 자동으로 링크를 감지하는 기능

라벨에 표시되는 텍스트는 XQuery 표현식을 기반으로 계산될 수 있습니다. 저희가 시연을 위해 개발한 "어디에 있나요" 앱은 이러한 기능을 보여주는 예시입니다 외부 API 데이터와 연동 다음은 계산된 텍스트를 포함하는 몇 가지 레이블의 예시입니다

이 기능은 사용자가 선택한 내용에 따라 특정 정보로 템플릿 하위 페이지를 채울 수 있도록 합니다. 아래 스크린샷은 안드로이드 기기에서 실행되는 하위 페이지를 보여줍니다. 사용자가 API 키를 수정하기 위해 "설치/업데이트" 버튼 중 하나를 클릭하면, 하위 페이지가 팝업 창으로 열립니다. 또한, 모든 링크에 대한 자동 링크 감지 기능을 통해 사용자는 API 제공업체의 설명 웹 페이지를 브라우저 창에서 열 수 있습니다.

자동 링크 감지 기능을 직접 사용해 보세요 무료 MobileTogether 디자이너를 다운로드하세요 여러분이 첫 번째 크로스 플랫폼 모바일 앱 개발을 시작할 수 있도록!