--- title: "모바일 앱에서 서명 정보를 수집하세요" date: "2015-12-23" categories: - "mobile" - "xquery" tags: - "mobile-development" - "mobiletogether" - "software-tools" description: Altova MobileTogether 2.0을 사용하여 모바일 앱에 서명 기능을 구현하는 방법을 알아보세요. 다양한 플랫폼에서 사용할 수 있는 기능과 서명 저장 방식에 대해 자세히 알아보십시오. --- Status: #blog Tags: #mobile-development #mobiletogether #software-tools Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [xpath+xquery](/blog/ko/category/xpathxquery.md) # 모바일 앱에서 서명 정보를 수집하세요 최근에 신용카드 결제를 하거나 택배 배송을 받으면서 전자 서명을 사용하신 적이 있을 것입니다. 이제 [Altova MobileTogether 2.0](https://www.altova.com/ko/whatsnew_mobiletogether.html)을 통해 모든 플랫폼에서 여러분의 모바일 앱에 서명 기능을 통합할 수 있습니다. ![서명](/blog/images/signature.png) 원격 지역에서 데이터를 수집하거나, 청원서를 배포하거나, 계약을 승인하거나, 단순히 실제 상황을 기록하는 모바일 앱은 모두 서명 기능을 활용할 수 있습니다. GPS 기능을 보여주는 Altova Parcel Delivery 샘플 앱은 배송 확인을 위해 서명 기능을 추가하여 업데이트되었습니다. Parcel Delivery 앱은 Altova MobileTogether 데모 서버에 설치되어 있으며, [MobileTogether Client 앱](https://www.altova.com/ko/mobiletogether/app.html)을 통해 사용자의 모바일 기기에서도 실행할 수 있습니다. "택배 배송 서비스"의 작동 방식을 시뮬레이션하는 "택배 배송" 앱은 수령인에게 운전자의 모바일 기기에 표시되는 서명란에 서명을 요청하여 배송 확인을 진행합니다. 아래는 안드로이드 태블릿에서 캡처한 화면 이미지입니다. ![Altova Parcel Delivery 모바일 앱에서의 서명 캡처 기능](/blog/images/Screenshot-1.png) 택배 배송 경로 전체가 완료되면, "택배 배송" 앱은 배송 요약 정보를 표시하며, 수령인 서명을 통해 배송 확인을 할 수 있습니다. ![Altova Parcel Delivery 모바일 앱에서의 서명 확인 기능](/blog/images/Screenshot-2.png) 이 스크린샷은 모바일 앱에서 서명을 사용하는 가장 일반적인 방식을 보여줍니다. 서명이 캡처되고 저장된 후, 나중에 특정 시점과 장소에서 다시 표시됩니다. 대부분의 경우, 서명이 획득된 장치와 다른 장치에서 서명이 다시 표시됩니다. 예를 들어, 직원은 모바일 앱을 사용하여 서명된 경비 보고서를 제출하고, 관리자가 해당 보고서를 확인하고 승인합니다. 또는 구매 담당자가 전자 서명으로 구매 주문서를 작성하고, 해당 사본을 구매 데이터베이스에 저장할 수 있습니다. MobileTogether는 개발자가 여러 플랫폼에서 서명을 표시할 수 있도록 지원하는 기능을 제공합니다. 이 기능을 보여주기 위해, 저희는 간단한 앱을 개발하여 서명을 파일에 저장하고 다양한 기기에서 다시 표시할 수 있도록 했습니다. 예를 들어, 안드로이드 폰으로 획득한 서명을 아이패드에 표시하거나, 윈도우 10에서 실행되는 앱으로 획득한 서명을 모든 모바일 기기에서 확인할 수 있습니다. 아래는 "서명" 앱의 시작 페이지 일부를 보여주는 화면으로, 사용자는 새로운 서명을 획득하거나 이미 저장된 서명을 확인하는 옵션을 선택할 수 있습니다. "획득" 및 "확인" 버튼을 누르면 해당 기능에 대한 하위 페이지가 열립니다. !["Signatures" 크로스 플랫폼 데모 모바일 앱의 시작 화면](/blog/images/Screenshot-3.png) **서명 캡처 기능** 서명 캡처 서브 페이지의 디자인은 매우 간단하며, 상단에 레이블, 서명 입력 필드, 그리고 서명을 저장하거나 삭제하고 다시 시도할 수 있는 두 개의 버튼으로 구성되어 있습니다. !["서명 기능 데모 모바일 앱을 위한 화면 디자인"](/blog/images/Capture-Page-Design.png) 서명 입력 필드는 "MobileTogether Controls" 도우미 창에서 아이콘을 끌어서 해당 서브 페이지에 추가됩니다. 이 필드는 자동으로 시뮬레이션에 사용될 기기의 화면 폭에 맞춰 크기가 조정되며, 특별한 속성을 정의할 필요가 없습니다. 서명 입력 필드의 색상은 기기의 기본 설정에 따라 결정됩니다. 위 예시에서는 iOS 기기가 디자인에 사용되었으며, 기본 색상은 검은 배경에 흰색 잉크입니다. 나중에 앱이 Android에서 실행될 때, 기본 색상은 회색 배경에 검은색 잉크가 되고, Windows Phone에서는 흰색 배경에 검은색 잉크가 됩니다. 위의 "페이지 소스" 도우미 창에서는 서명 이미지를 저장하기 위해 정의한 요소와, 해당 이미지의 색상 정보 및 장치에 대한 추가 데이터를 기록하는 요소들을 확인할 수 있습니다. 이러한 정보는 나중에 검토를 위해 표시하는 데 유용할 수 있습니다. 앱의 워크플로우에 따라 현재 날짜와 시간, 또는 서명과 함께 지리 위치 정보를 기록하는 것이 필요할 수도 있습니다. 저희 앱은 각 새로운 서명을 MobileTogether 서버의 "signatures.xml" 파일의 끝에 추가합니다. 이 간단한 예에서는 모든 사용자가 동일한 파일을 사용합니다. 앱을 디자인할 때, 일부 사용자가 서명을 생성하고 다른 사용자가 다른 기기에서 이를 검토하는 경우, 검토자가 사용하는 기기의 기본 크기와 색상으로 서명을 표시하는 것이 가장 좋습니다. MobileTogether는 이러한 기능을 지원하기 위해 "mt-change-image-colors"라는 특별한 기능을 제공합니다. **서명 표시 기능** 캡처된 서명은 서명 입력란 또는 이미지 형태로 표시될 수 있습니다. 어떤 방식을 사용하든, 원본 서명은 자동으로 모든 디스플레이 장치에 맞게 크기가 조정됩니다. 따라서 태블릿에서 캡처된 서명은 자동으로 휴대폰 화면에 맞춰 표시되며, 그 반대도 마찬가지입니다. 아래 스크린샷은 아이폰에서 촬영되었으며, iOS 기본 설정인 흰색 배경에 검은색 글씨로 표시된 서명 내용을 보여줍니다. 원래 이미지는 안드로이드 기기에서 검은색 배경에 회색 글씨로 촬영된 것입니다. ![Altova Signatures 데모 버전의 크로스 플랫폼 모바일 앱을 사용하여 캡처된 서명을 확인하세요](/blog/images/Capture-Review-Signature-with-expression.png) 오른쪽에는 색상을 변환하는 과정이 표시되어 있습니다. 주목할 점은 잉크와 캔버스 색상 모두 한 번의 과정으로 처리된다는 것입니다. 색상 변환 과정에서 두 가지 색상을 반전시켜야 하는 경우에는 반드시 한 번의 과정으로 처리해야 합니다. 만약 두 번의 과정으로 처리하면, 검은색 잉크가 흰색으로 변하고 캔버스 색상과 일치하게 될 수 있습니다. 하지만 이 경우, 중간 단계에서는 단순한 사각형만 나타나고 서명은 사라지게 됩니다! **맞춤 색상** 기본 색상으로 제한되지 않습니다. 각 서명 컨트롤에 대한 속성 도움말 창에서, "텍스트 색상" 필드는 서명 잉크의 색상을, "배경 색상" 필드는 서명 영역의 배경색을 정의합니다. XPath 변수를 사용하여 나중에 변환에 필요한 값을 저장할 수 있습니다. ![캡처된 서명에 사용할 색상을 정의하는 스타일 도우미 창](/blog/images/Styles-Helper-Window.png) 저희는 시그니처 데모 앱에 새로운 기능을 추가하여 사용자가 콤보 박스에서 원하는 색상을 선택할 수 있도록 했습니다 ![Altova 서명 데모 모바일 앱에서 사용자 정의 서명 색상 기능을 향상시켰습니다](/blog/images/custom-colors-capture.png) [무료 MobileTogether Designer를 다운로드하여](https://www.altova.com/ko/download/mobiletogether-designer.html) 단시간 내에 자체 크로스 플랫폼 모바일 앱에 서명 캡처 기능을 추가할 수 있습니다. 설치 과정에서 MobileTogether 데모 서버에 설치된 모든 예제 앱의 디자인 파일이 함께 제공됩니다. 이 글에서 설명된 서명 데모 앱을 확인하고 싶으시다면, GitHub에서 다음 주소로 다운로드할 수 있습니다: [https://github.com/altova/MobileTogether-signature-capture](https://github.com/altova/MobileTogether-signature-capture) **MobileTogether 모바일 앱** 해당 앱을 다운로드하려면, 사용하시는 기기에 맞는 앱 스토어를 방문하십시오 **무료** 앱: [![Google Play 스토어에서 제공되는 안드로이드 앱](/blog/images/googleplay.gif)](https://play.google.com/store/apps/details?id=com.altova.mobiletogether) [![애플 앱스토어에 등록된 iOS 앱](/blog/images/Download_on_the_App_Store_Badge_US-UK_135x40.png)](https://itunes.apple.com/us/app/altova-mobiletogether/id904018222?) [![Windows 스토어에서 제공되는 Windows Phone 8용 앱](/blog/images/258x67_WPS_Download_cyan.gif)](http://www.windowsphone.com/s?appid=49ef6685-f3bc-4df3-ac2a-99ae567979ca) [![Windows 스토어에서 제공되는 Windows 8용 앱](/blog/images/Windows8_Green.png)](http://apps.microsoft.com/windows/en-us/app/altova-mobiletogether/9775f49c-3db4-4fe4-8e7b-19ae77f537bb)