LG Skin Care

LG Skin Care는 전용 기기로 얻은 피부 측정 결과와 기록, 환경 정보를 모바일에서 시각화하는 제품입니다. 성격이 다른 정보를 점수, 그래프, 기록 화면 등 각 정보에 맞는 형태로 정리해 하나의 GUI 안에 구성했습니다.

제품 전체 UX 흐름과 와이어프레임은 기획팀에서 전달받았고, 그 구조를 바탕으로 GUI를 제작했습니다. 그래프 종류와 데이터 표현 방식을 정하고 일러스트레이션, 아이콘, 모션도 직접 제작했습니다. 2017년 실제 제품으로 출시되었습니다.

측정 결과의 정보 위계를 설계하다

결과 화면에는 종합 점수, 부위별 측정값, 피부 나이, 피부 타입, 케어 레벨처럼 성격이 다른 정보가 함께 표시됩니다. 종합 점수는 숫자로, 부위별 값은 막대로, 여러 피부 지표는 레이더 그래프로 나누어 표현하고 한 화면 안에서 시각적 우선순위를 정했습니다.

실제 제품용으로 제작한 측정 결과 데이터 표현과 상태 변화 모션. 2017.

LG Skin Care 측정 결과 데이터 표현 데모

종합 점수와 Cheek·Under Eye·Forehead 측정값, 6개 피부 지표 레이더 그래프, 피부 나이·타입·케어 레벨을 한 화면에 보여주며, 세 가지 예시 결과 상태에 따라 점수·막대·레이더 그래프·피부 나이·케어 레벨이 함께 변화하는 포트폴리오 재구성 데모.

포트폴리오 설명용으로 재구성한 데이터 표현 데모

한 번의 측정 결과뿐 아니라 점수 추이, 케어 시간, 날짜별 측정·케어 기록처럼 시간에 따라 변하거나 쌓이는 정보도 있었습니다. 현재 상태와 과거 기록을 구분해 보여주기 위해 추이 그래프와 날짜, 기록 카드를 각각의 역할에 맞게 배치했습니다.

실제 제품용으로 제작한 케어 시간과 기록 데이터 변화 모션. 2017.

UV와 습도는 모두 환경 정보지만 상태와 변화를 보여주는 방식은 다릅니다. UV는 광선과 시간대별 상태로, 습도는 액체의 높이와 추이 그래프로 표현하며 데이터 종류에 따라 서로 다른 시각 방식을 적용했습니다.