선을 넘는 과학:음악편

닉네임 입력 → 장르 선택 → 감정 키워드 선택(최대 3개) → 완성곡 감상

Keyword

키워드선택, 닉네임입력, 음악감상

Design Direction

복잡하지 않고 간단한 버튼 선택 단계로 작곡을 할 수 있는 컨셉. 선택과 관련된 설명위주의 레이아웃.

Visual Elements

키비주얼의 블랙대신 블루톤의 배경으로 가시성과 공간컬러 맞춤. 키오스크 유휴화면에 이미지로 구분.

화면설계서 · 전체 플로우

음악제목이 랜덤으로 송출된다는 기술적 문제점을 보완하기 위한 타이틀 배치

예외 처리 팝업 & 입력 설계

측정기 착용 안내 → 뇌파 측정(로딩) → 결과 확인

Keyword

뇌파측정, 측정별결과도출

Design Direction

뇌파 측정기의 착용부터 측정까지 단계 안내. 각 키오스크 유휴화면에 이미지로 구분.

Visual Elements

키비주얼의 블랙대신 퍼플 톤으로 공간 컬러 맞춤.

화면설계서 · 전체 플로우

측정 시간 동안 사용자 이탈을 방지하고 몰입감을 유지하기 위해 시각적 피드백이 있는 측정 화면과 로딩 게이지를 제공.
음악 감상 중 시각적 지루함을 줄이고 몰입감을 높이기 위해 회전하는 CD 애니메이션 적용.

골전도 이어폰 착용 안내 → 표정 측정 → 결과에 따른 컬러 피드백

Keyword

표정 측정, 측정별결과도출

Design Direction

표정측정을 위한 안내, 골전도 이어폰 착용 안내, 각 키오스크 유휴화면에 이미지로 구분.

Visual Elements

앞의 키오스크 컬러와 유사한 시리즈로 컬러 지정. 표정 +- 정도에 따른 다른 컬러로 분석 결과에 따른 시각적 효과.

화면설계서 · 전체 플로우

측정 시간 동안 사용자 이탈을 방지하고 몰입감을 유지하기 위해 시각적 피드백이 있는 측정 화면과 로딩 게이지를 제공.
결과값에 따라 다른 색상과 게이지량에 차이를 두고 음량 게이지 형태의 애니메이션을 주어 음악을 들으면서 지루하지 않은 화면 구성.

음악 검색/신청 → 재생 리스트 확인 → 대형 쇼케이스 화면 송출

Keyword

음악플레이, 검색기능

Design Direction

플레이 중 정지나 뒤로 가기 버튼이 없어 리스트에서 직접 항목을 다시 선택하도록 유도. 두 기기에서 검색 기록이 공유될 수 있어, 검색 결과와 디자인을 각각 대응되도록 구성.

Visual Elements

뮤직 쇼케이스에서 음악을 전시하는 컨셉에 맞춰, 기존보다 더 화려하고 선명한 컬러 사용.

화면설계서 · 전체 플로우

사용자가 무대를 이용 중에 음악이 멈추지 않도록 조작 버튼을 제거하여 구성. 음악 재생 시간 동안 다른 사용자에게 남은 시간을 인지시킬 수 있도록 상단에 플레이 타임 게이지를 시각적으로 배치.
기다리는 동안 무대에 조명이 반짝이는 애니메이션을 적용하여 정적인 화면에 생동감을 부여하고 재생 중임을 직관적으로 전달.
음악이 끝날 때까지 되돌아갈 수 없는 구조와 터치 슬라이딩 UI를 고려하여, 선택 즉시 자동 재생되지 않도록 설정하고 '재생하기' 버튼을 별도로 노출하여 사용자 조작의 명확성과 편의성 향상.