BX UX UI/케이스 스터디6 [마이크로 인터랙션] Protopie 프로토파이 : N26 따라한 모션은 클릭 한 번으로 전체 Visibility를 조절하는 것으로, 눈 모양의 아이콘을 선택하면 잔액과 입출금 내역을 숨길 수 있다. 이러한 설정 값은 다른 Flow(화면)으로 넘어갔을 때도, 적용되어 상세 페이지에서도 블러처리된 돈 내역을 확인할 수 있다. 이를 프로토파이에서 구현하기 위해 알아야하는 내용 1. 컴포넌트 설정 2. Variables 값 설정 3. Send & Receive 기능 우선 완성본이다 맨 위의 Current balance 옆에 있는 눈을 클릭하면 전체 내역에 블러 처리가 적용된다. 아쉬운 점은 피그마에서 프로토파이로 넘길 때 아이콘, 블러, 그라데이션 처리가 어긋나는 경우가 있어서 따로 조정해줘야 한다. 하지만 일단 모션 케이스 스터디가 중점이기에 너무 세부적인 부분은 .. 2023. 5. 29. [UX/UI 케이스 스터디] 핀테크 (3) : N26 독일에 거주하는 동안 유용하게 사용했던 N26. 유럽의 경우 행정, 금융 모든 것들이 느리기 때문에 N26의 존재가 매우 감사했었다. 그리고 외국인의 입장에서 은행 계좌를 개설하고 신용을 보장받는 과정은 매우 복잡했기에 안쓸 수가 없었던 서비스였다. N26의 주요 기능은 무료 계좌 개설, 송금이다. 유럽이라는 개방된 환경에 본사가 있다보니 인증과정도 다양한 언어로 진행할 수 있으며 가장 좋은 점은 독일 내 거주등록(Anmeldung)을 하지 않아도 진행가능하다. 한국에서는 계좌 개설을 위해서는 외국인 등록증이 필요한 것으로 알고 있어서 이 점이 N26의 가장 큰 장점인 것 같다. 물론 보편적으로 쓰는 송금 서비스는 페이팔이지만, 한국 20대의 대부분이 카카오뱅크 카드가 있는 것처럼 내 주변 아시아인들과 .. 2023. 4. 17. [마이크로 인터랙션] 2021 Apple Music : Scroll, Text Focus 예전에 했던 마이크로 인터랙션 분석 영상을 발견해서 관련 내용을 정리해봤다. '둘러보기' 기능을 브라우징 하는 과정에서 보이는 마이크로 인터랙션을 프로토파이에서 구현한 영상이다. Task : 스크롤 - 검색창 - 세부 카테고리(page scroll) 주의할만한 Apple Music의 마이크로 인터랙션 & 구현 방법 1. 상단 nav바의 Background Blur 적용(Range 값) - 원래는 오퍼시티 100의 단색이 초기 설정값 - 스크롤을 어느정도 내리면 오퍼시티 값이 내려가며 Background Blur가 적용됨(Apple의 글래스모피즘 UI) (영상에서 Range 값은 임의로 설정함) - 다시 초기 스크롤 값에 도달할 때, Reset 2. 검색 창 클릭시 '취소' 버튼이 오른쪽에서 나타났다가, .. 2023. 4. 10. [UX/UI 케이스 스터디] 핀테크 (2) : 뱅크샐러드 시중에 나온 핀테크 앱 중 관리(가계부)에 더 초점을 둔 서비스라 느껴진다. 유전자 검사 마케팅으로 인해 앱 설치율이 높은 편이다. 개인적으로 핀테크 앱 중에서 뱅크샐러드 사용률이 가장 높은데 아무래도 신용카드를 사용하지 않아, 핀테크앱을 가계부로만 사용하기 때문이다. 또한 가계부탭의 정리가 매우 잘되어 있다. 내역, 달력의 탭 변화가 매우 쉬운편이다. Contents 1. 뱅크샐러드 뱅크샐러드 서비스 소개 : 금융을 내 편으로/금융부터 건강까지 ~ 자산 관리의 측면에서 뛰어남 1.메인 2. 알림 3. 가계부 4. 기타 UX 다양한 보기 형식으로 자산 관리에 용이하게 만듦 유전자 검사와 같은 건강-리텐션 포인트가 확실 Key point 가계부의 내역, 달력, 예산 탭으로 편리한 자산 관리 유전자 검사 →.. 2023. 3. 20. [UX/UI 케이스 스터디] 마일리지/포인트앱 (1) : OK 캐쉬백, 엘포인트, CJ ONE 핀테크에서 빠질 수 없는 것이 'Earn to X'와 같은 보상형 기능들이다. 또한 이런 보상형 기능을 사용하여 '앱테크'를 하는 층도 유튜브, 블로그에서 심심치않게 볼 수 있다. 앱테크족이 사랑하는 마일리지/포인트앱 분석을 통해 유저 리텐션을 위한 UX와 컨텐츠(마게팅)를 잘 보여주기 위한 UI에 대해서 분석해보았다. Contents 1. 마일리지/포인트란 2. OK 캐쉬백 3. 엘포인트 4. CJ ONE 마일리지/포인트란 마일리지/포인트는 주요 가맹점과의 관계를 통해 리워드를 받을 수 있는 매커니즘이다. 이전에는 실물 카드, 쿠폰으로 접했지만 현재는 디지털 환경에서도 접할 수 있다. OK캐쉬백 서비스 소개 : 즐거움이 포인트다 (earn to X 포인트앱 → 앱테크/광고) 1. 메인 2. 상단 아이콘.. 2023. 3. 6. [UX/UI 케이스 스터디] 핀테크 (1): 카카오페이, 토스, 시럽 핀테크의 경우 코로나 시기 가장 수혜를 받았다고 생각하는 산업으로서, 시장의 많은 서비스를 가능하면 모두 분석을 해보고 싶다. 개인적으로 유럽에서의 N26 경험도 긍정적이었기에 해외 앱 분석도 여건이 된다면 발행해보고자 한다. 최근 마이크로 인터랙션에 대한 관심으로 전반적인 플로우보다는 UI 분석이 주를 이룰 것으로, 어떤 인터랙션 경험을 제공할 수 있을지 혜안을 얻고자 한다. Contents 1. 핀테크란 2. 카카오페이 3. 토스 4. 시럽 핀테크란? 핀테크는 기술을 이용하여 기존의 금융 서비스를 개선・확장한 서비스나 회사를 의미한다. 2019년 최종 수정으로 조금 시기가 지난 기사이지만 예시가 잘 나와있어 이해를 돕기 위해 뱅크 샐러드의 아티클을 첨부한다. 핀테크 개념 완벽 정리 | 뱅크샐러드 ww.. 2023. 3. 5. 이전 1 다음
