위젯 디자인
Last updated
Last updated
위핀 워크스페이스를 통해 지갑 위젯을 손쉽게 커스터마이징하여, 여러분의 앱에 맞는 사용자 경험을 제공할 수 있습니다. 이 문서에서는 위핀 워크스페이스를 활용해 위젯의 디자인과 기능을 설정하는 방법을 단계별로 설명합니다.
먼저, 위핀 워크스페이스에서 위젯의 현재 적용된 기본 디자인을 확인할 수 있습니다. 디자인 수정에 들어가기 전, 위젯 디자인 메뉴에서 계정 상세, 메인, 로그인의 세 가지 주요 위젯 UI를 미리 확인할 수 있습니다.
계정 상세: 사용자가 보유한 특정 블록체인 계정의 잔액과 세부 정보를 확인할 수 있습니다. 이 화면에서 자산을 송금하거나 받을 수 있습니다.
메인: 여러 블록체인 네트워크의 자산 현황을 한눈에 볼 수 있는 화면입니다. 지갑과 NFT 목록이 표시됩니다.
로그인: 사용자가 다양한 소셜 로그인 옵션(Google, Apple, Naver, Discord 등)을 통해 위핀 지갑에 로그인할 수 있는 화면입니다.
위젯 디자인 메뉴에서 오른쪽의 ‘수정’ 버튼을 클릭하여 디자인 수정 화면으로 이동할 수 있습니다.
디자인 수정 페이지로 들어가면, 위젯의 컬러 테마를 선택할 수 있습니다. 다양한 컬러 옵션(Light, Dark, Mono, Pastel, Woody, DarkBerry)을 제공하며, 이 중 하나를 선택해 앱의 전반적인 디자인과 일치하도록 커스터마이징할 수 있습니다.
홈 레이아웃에서는 위젯의 콘텐츠 배치를 결정합니다. 예를 들어, 자산 목록과 NFT 위치를 상단 또는 하단에 배치할 수 있으며, 목록 1단, 목록 2단, 블록 1단 등 다양한 레이아웃을 선택할 수 있습니다. 이러한 레이아웃 옵션을 통해 사용자에게 필요한 정보를 가장 효율적으로 제공할 수 있습니다.
로고 이미지 탭에서는 위핀 위젯의 로그인 화면에 표시될 이미지를 설정할 수 있습니다. 여기에서 로고를 업로드하여 브랜드 정체성을 강화할 수 있습니다. 사용자가 설정한 로고는 실시간 미리보기를 통해 어떻게 표시될지 확인할 수 있습니다.
파일 규격: 120x120 픽셀, 5MB 이내의 PNG 또는 SVG 파일을 권장합니다.
모든 커스터마이징 작업을 완료한 후, "저장" 버튼을 클릭하면 변경된 디자인을 저장할 수 있습니다. 저장만으로는 즉시 서비스에 반영되지 않으며, 저장된 디자인과 현재 적용된 디자인을 비교하고, 최종적으로 서비스에 적용하는 과정이 필요합니다.
이미지에서 볼 수 있듯이, 저장된 디자인과 현재 서비스에 적용된 디자인을 비교할 수 있는 화면이 나타납니다. 이 화면에서는 두 가지 디자인을 나란히 비교할 수 있으며, 왼쪽에는 현재 서비스에 적용된 디자인이, 오른쪽에는 저장된 새 디자인이 표시됩니다.
예시에서는 다음과 같은 변경 사항이 적용되었습니다:
컬러 테마: Dark 테마로 변경되어, 위젯의 배경이 어두운 색으로 설정되었습니다.
NFT 위치: NFT 목록이 화면의 상단에 위치하도록 변경되었습니다.
이 비교 화면을 통해, 저장한 디자인이 원하는 대로 적용되었는지 시각적으로 확인할 수 있습니다. 디자인이 마음에 들면, "서비스 적용" 버튼을 클릭하여 새 디자인을 실제 서비스에 반영할 수 있습니다. 반영 후, 모든 사용자에게 변경된 디자인이 적용된 위핀 위젯이 표시됩니다.
이와 같이 위핀 워크스페이스를 통해 코드를 작성하지 않고도 위젯을 커스터마이징하는 것이 가능합니다. 추가적으로, 위핀은 위젯에서 사용하는 기능을 RESTful API로도 제공하고 있습니다. 만약 여러분이 보다 더 앱에 최적화된 지갑 환경을 구축하고 싶다면, RESTful API 페이지를 참고하세요.
