[WEMIX.Fi] UI 개발, - 사랑의 썰물

WEMIX.Fi는 무한한 확장성을 바탕으로 새롭고 차별화된 금융 서비스를 제공합니다.

또한 익숙하지 않은 경험을 접한 사용자를 위해 서비스의 가치를 쉽게 이해하고 즐길 수 있도록 BX를 그래픽으로 구성하였습니다.

UI 개발팀은 WEMIX.Fi의 설계 의도를 사용자에게 정확하게 전달하는 역할을 합니다.

사용자는 다양한 웹 환경에서 왜곡이나 손실 없이 완전한 서비스를 즐길 수 있습니다.

이번 글에서는 WEMIX.Fi UI 개발팀의 고민과 해결 과정에 대해 말씀드리고자 합니다.

쉬운 목차

'추천 관련글,

서비스 그래픽, 올바르게 표시하는 방법은 무엇입니까?

WEMIX.Fi의 전반적인 설계 개념은 투명성, 신뢰성 및 실체입니다.

이를 강조하기 위해 은은하게 번지는 그라데이션과 그림자 효과를 적용하여 화이트를 기반으로 UI 구성요소를 강조하였으며, 투명하고 투명한 유리 같은 느낌으로 사물의 움직임을 부드럽게 표현하였습니다.

그 중 단연 사용자의 시선을 사로잡는 요소는 움직임을 담은 모션 그래픽이다.

비디오 요소로 구현됩니다.

그래픽에서 동작을 구현하는 방법에는 여러 가지가 있습니다.

전통적인 GIF 이미지에서 비디오 요소, CSS3 키프레임이 있는 애니메이션, LottieFiles 및 Apng에 이르기까지 동적 요소로 웹 페이지에 생명을 불어넣을 수 있습니다!
무엇보다 UI 개발팀은 동영상 요소가 WEMIX.Fi의 디자인 특성을 가장 잘 표현할 수 있다고 판단했습니다.

동영상 요소에 태그를 지정한 후 테스트를 실행하여 적절한 형식을 선택했습니다.

웹 환경의 비디오 형식

동영상 파일의 확장자가 같아도 코덱에 따라 브라우저별 지원이 다릅니다.

따라서 웹 브라우저에서 동영상을 재생하기 위해서는 많은 사항을 확인해야 합니다.

현재 보편적으로 사용되는 비디오 확장 프로그램을 간략하게 요약했습니다.

웹: 좋은 품질을 제공할 수 있으며 자유롭게 사용할 수 있습니다.
mp4: 고화질 동영상 재생이 가능하며 대부분의 브라우저에서 재생이 가능하여 호환성이 좋습니다.
오그: 무료이지만 현재 webm 형식으로 인해 많이 사용되지 않습니다.

[WEMIX.Fi] UI 개발, 2 — * 2022년 9월 기준으로 크롬은 hevc를 지원하지만 하드웨어 디코더가 설치된 경우에만 가능합니다.

(관련 링크: https://bitmovin.com/google-adds-hevc-support-chrome/ )

WEMIX.Fi에 신청

다음은 각 영상 포맷의 속성을 WEMIX.Fi에 적용하는 시간이었습니다.

앞서 언급한 것처럼 WEMIX.Fi UI 개발에서 가장 중요한 부분 중 하나는 모션 그래픽의 디테일을 유지하면서 다른 화면 요소를 잃지 않고 사용자에게 디자인 의도를 전달하는 것이었습니다.

WEMIX.Fi의 일부 그래픽 요소는 그라데이션 배경에 조화롭게 맞아야 했습니다.

그러기 위해서는 배경을 투명하게 처리할 수 있는 영상 포맷으로 제작해야 했다.

첫 번째 mp4 확장자의 문제점은 투명 배경이 검은색이거나 특정 브라우저에서 그래픽이 전혀 표시되지 않는다는 점이었습니다.

콘텐츠 배경색과 동일한 색상코드를 적용하여 동영상 배경을 처리하여 해결을 시도하였으나 결과는 만족스럽지 못했습니다.

같은 색상값이라도 영상의 가장자리가 부각되거나, 사용자의 모니터 환경에 따라 약간의 차이가 있는 경우가 있습니다.

[WEMIX.Fi] UI 개발, 3 — hevc/mp4 파일을 테스트했는데 대부분의 브라우저에서 제대로 표시되지 않습니다.

문제를 해결하기 위해 많은 시행착오를 겪어야 했습니다.

모션 디자인팀과 함께 확장팩마다 영상을 제작하고 테스트하는 과정을 반복하면서 답을 찾았다.

마침내 호환성을 보장하기 위해 여러 확장을 함께 사용하는 방법을 찾았습니다.

테스트 결과 iOS 환경에서의 호환성 확보가 관건이었다.

대안으로 mov 확장자를 사용하여 아래와 같이 비디오 구성 요소를 만들었습니다.

// Video.tsx
<video autoPlay playsInline muted loop preload="auto" key={src}>
	<source src={resourceURL1} type="video/mp4; codecs=hvc1" />
	<source src={resourceURL2} type="video/webm" />
</video>

표준 HTML5 사양 구문에 따르면 소스 태그를 동영상 요소의 자식으로 선언하고 소스 경로를 다른 형식으로 지정하면 첫 번째 형식을 지원하지 않는 브라우저에서 액세스할 때 두 번째 소스 형식이 렌더링됩니다.

. 연결 환경에 영향을 받지 않는 호환성을 보장함으로써 일관된 사용자 경험을 제공할 수 있습니다.

자세한 내용은 HTML5의 동영상 요소를 참조하세요. 표준 사양통해 확인하실 수 있습니다

HTML 표준

html.spec.whatwg.org

WEMIX.Fi는 사용자가 새로운 금융 경험을 할 수 있도록 다양한 서비스를 출시할 계획입니다.

또한 호환성을 확보하여 왜곡이나 손실 없이 최상의 품질로 서비스를 이용하실 수 있도록 노력하겠습니다.

더 좋고 편리한 사용자 경험을 위한 UI 개발팀의 여정은 계속됩니다.

기사를 수정합니다.

임현경 – UX Author
그래픽. 정예지 – BX Designer

본 글은 블록체인 UX / Web 3.0 UX 디자인 전문 채널입니다.

pxd 수단영어로 볼 수 있습니다.