MOMENT Studio
← 목록으로

모드가 바뀌면 화면 공기도 바뀐다

2025.09.29기술 기록#product-ui#content

모드 선택에 따라 배경 색상과 그라데이션이 동적으로 전환되도록 화면 구조를 재설계했다.

기존 구현에서는 모드를 변경해도 화면 배경이 단일 톤을 유지했다. 힐링과 명상처럼 성격이 다른 모드 간 전환에서 시각적 차별화가 없어 모드 선택의 맥락이 사용자에게 충분히 전달되지 않았다.

이번 작업에서는 모드 상태와 배경 시각을 직접 연결했다. 선택된 모드에 따라 배경 색상과 그라데이션이 동적으로 결정되며, 전환 시 이전 상태가 급격히 끊기지 않고 페이드로 교체되도록 처리했다. 색상 경계에서 발생하던 급격한 단절을 제거한 것이 핵심 변경점이다.

모먼트 화면도 함께 정비했다. 스크롤에 따라 상단이 자연스럽게 접히고 펼쳐지는 구조로 개선하고, 버튼 배치를 재정렬해 시각적 우선순위를 명확히 했다. 미니 플레이어의 위치도 다른 UI 요소와 일관성을 갖도록 조정했다.

전환 속도와 페이드 지속 시간 같은 세부 파라미터는 눈에 잘 띄지 않지만, 모드 전환 시의 인터페이스 일관성을 직접 결정하는 요소다.