한화솔루션 큐셀 부문은 토탈 에너지 솔루션 프로바이더로서, 태양광 셀, 모듈 생산부터 ESS(에너지 저장 시스템) 발전소 개발, 전력 리테일, 태양광 파이낸싱 등 다양한 사업을 주요 글로벌 시장에서 활발하게 추진하고 있습니다.

뿐만 아니라 큐셀은 Energy Management Software인 Q.OMMAND를 제공합니다. 이 플랫폼은 설치 기사들의 쉽고 빠른 하드웨어 설치 및 모니터링을 위한 Q.OMMAND PRO와 홈 오너들의 효율적인 에너지 관리를 위한 Q.OMMAND HOME 두 가지 플랫폼으로 이루어져 있으며, 각 사용자들로 하여금 에너지 자립의 삶을 몸소 실현할 수 있도록 합니다.

이처럼 Q.OMMAND 플랫폼은 ‘사용자가 에너지를 친숙하게 느낄 수 있게 하자'라는 지향점을 가지고 있기에, Q.OMMAND 화면 전반에 에너지를 시각화한 Lottie 애니메이션을 활용하고 있습니다. 움직이고 살아있는 듯한 에너지를 담은 Q.OMMAND의 Lottie 애니메이션을 소개합니다.

Lottie 애니메이션을 통한 UX 데이터 시각화 개선

Q.OMMAND 소프트웨어는 생활 속 신재생 에너지 자가발전을 제공해 주는 서비스입니다. 글로 표현하기 어려운 에너지 정보를 오차 없이 전달하는 동시에 쉽게 파악할 수 있도록 돕는 장치가 필요했습니다. 눈에 보이지 않는 에너지 흐름을 누구나 이해하기 쉽게 설명하고, 실시간 데이터를 전달하기엔 모션 애니메이션을 활용하는 것이 가장 적합한 방법이라고 생각했습니다.

Lottie Animation 1: Energy Flow

집에 하드웨어 제품을 설치한 고객이 실시간으로 에너지 흐름을 확인할 수 있는 화면입니다. 집과 하드웨어 일러스트는 실물 형태를 본떠 제작했으며, 에너지가 흐르는 길은 제품이 실제 설치되는 위치와 전기 회로도의 논리를 반영했습니다. 그리고 모션 애니메이션으로 사용자들이 에너지 흐름을 쉽게 이해할 수 있도록 UX를 개선할 수 있었습니다.

Lottie Animation 2: Energy Validation

제품 설치 기사가 설치한 하드웨어의 작동 여부를 확인하고, 에너지가 올바르게 흐르고 있는지 검증하는 화면입니다. 배치를 간결하게 구성하고, 모션 애니메이션으로 에너지 흐름을 한눈에 정확하게 파악할 수 있도록 하였습니다. 제품마다 색상을 다르게 부여하여 여러 흐름이 교차하는 해당 화면에서 사용자가 개별 케이스를 뚜렷하게 구분할 수 있도록 UX를 개선하였습니다.

Lottie Animation 3: EV Charging

Lottie 파일 포맷이 제공하는 투명도 및 그라데이션 표현을 활용해 EV 충전기 내부의 에너지가 태양광과 일반 전력으로 충전될 때의 차이를 애니메이션으로 구현하였습니다. 같은 모션 애니메이션에 색상만 다르게 적용할 수 있어, 적은 공수로 큰 UX 개선 효과를 낼 수 있었습니다.

Lottie Animation 4: Battery

배터리에 내장된 전기의 양(SoC)과 배터리 충방전 상태를 보여주는 화면입니다. 일반적으로 정적인 배터리 아이콘과 충전량을 퍼센트(%)로 환산해 SoC 레벨을 보여주는 경우가 많은데, 동적인 Lottie 애니메이션으로 SoC를 표현해 전달력을 높이는 UX로 개선할 수 있었습니다.

전기를 물에 비유한다는 점에 착안해 전기를 액체처럼 표현하려 했으며, 흐르는 특성을 애니메이션으로 표현하였습니다. Lottie가 벡터 기반 포맷이기에 이러한 특성을 고화질로 완벽하게 구현할 수 있었습니다.

글로벌 사용자를 위한 Digital UX

Q.OMMAND는 글로벌 사용자를 고려하여, 텍스트로 쓰여 있지 않더라도 애니메이션을 통해 사용자가 현재 화면에서 마주한 상황을 쉽게 파악할 수 있도록 설계되었습니다. 지루한 과정에 대한 상태 표시와 실시간 응답을 시각적으로 제공하여 사용자가 유효한 피드백을 받을 수 있게 도와줍니다. 로딩 중이나 다운로드 중에도 사용자가 이탈하지 않도록 다양한 애니메이션을 활용하여 현재 진행 상황을 명확하게 전달하며, 이를 통해 사용자 경험을 향상시키고 사용자 유지율을 높이고 있습니다.

Lottie 를 선택한 이유: 오픈 소스의 장점

LottieFiles 애니메이션은 사용자 뿐만 아니라 제작자인 디자이너와 개발자가 효율적인 작업 환경을 구축하는데 큰 도움을 줍니다. 특히 Lottie 파일 포맷의 활용은 다른 확장자를 활용했을 때 보다 작업 시간 단축과 파일 관리 측면에서 큰 이점을 얻게 되었습니다.

• 정주연 디자이너: LottieFiles를 업무에 활용해 얻은 가장 큰 장점은 작업 시간의 단축입니다. LottieFiles 장점 중 하나는 기존 작업 환경으로 활용했던 Adobe Illustration → Adobe AfterEffects 작업 플로우 이상으로 새로운 방식인 LottieFiles ↔ Figma 작업 플로우로 빠른 애니메이션 디자인 제작이 속도를 내는 데 도움이 되었습니다. 또한 LottieFiles의 여러 디자인 오픈 소스를 활용하여 모션 애니메이션을 App과 Web 내에 빠르게 적용하고, Preview 기능을 통해 작업 중인 파일의 최종 모습을 미리 확인하고 추출할 수 있어 재 작업을 방지 할 수 있었습니다.

  
  

• 이준영 개발자: 안드로이드, iOS, 웹에서 모두 동일한 JSON 형식의 Lottie 파일을 사용해, 하나의 파일로 모든 OS에 적용할 수 있어 효율적입니다. 또한, 에너지 플로우 애니메이션은 복잡한 애니메이션임에도 불구하고 용량이 가벼운 Lottie 포맷 덕분에 앱에서 끊김 없이 가볍게 작동하였습니다. 안드로이드 개발자 입장에서는 Compose와 같은 새로운 UI 개발 기술을 사용했을 때 다른 오픈 소스 라이브러리들은 빠르게 대응하지 못하는 경우도 있지만, LottieFiles는 즉각적으로 지원해 주어 쉽게 사용할 수 있었습니다.

  
  

Sustainable Energy Life with Qcells

에너지를 쉽게 이해시키고 다가갈 수 있게 돕는 것이 Product Design 파트의 목표입니다. 경쟁사에 비해 차별화된 사용자 경험을 구축하기 위한 방법 중 하나로, Q.OMMAND는 에너지의 특징을 쉽게 시각화하는데 적합한 LottieFiles 애니메이션을 적극 활용하고 있습니다. 앞으로도 Qcells는 사용자로 하여금 에너지 자립의 삶을 긍정적으로 느끼게 하고, 이를 통해 인류가 지속 가능한 삶을 누릴 수 있도록 기여하려 합니다.