UI

기획서상 UI

실제구현 UI

---

소리 비서 : Sori (Sound Assistant)

청각 장애인을 위한 소리 시각화 및 음성 인식 보조 애플리케이션입니다. 주변 환경의 소리를 시각적으로 보여주고, 대화 상대방의 음성을 인식하여 감정과 함께 텍스트로 변환해줍니다.

주요 기능 (Key Features)

1. 홈 화면 (Home Screen)

• 모드 선택: '환경 소리 모드'와 '음성 인식 모드'를 선택할 수 있는 직관적인 카드 UI를 제공합니다.
• 커스텀 디자인: 'Tenada' 폰트와 커스텀 아이콘을 사용하여 친근하고 깔끔한 디자인을 적용했습니다.
• 인터랙션: 버튼 클릭 시 배경색이 변경되는 반응형 UI를 구현했습니다.

2. 환경 소리 모드 (Environmental Sound Mode)

• 레이더 뷰 (Radar View): 주변 소리의 방향과 거리를 레이더 형태로 시각화하여 직관적으로 파악할 수 있습니다.
• 안전 모니터링: 자동차 경적, 초인종 등 주의가 필요한 소리를 감지하여 카드 형태로 알려줍니다.
• UI 개선: 레이더 크기를 최적화하고, 카드 배경을 흰색으로 설정하여 가독성을 높였습니다.

3. 음성 인식 모드 (Voice Recognition Mode)

• 실시간 자막: 상대방의 말을 실시간으로 텍스트로 변환하여 보여줍니다.
• 감정 분석: 대화의 감정을 '긍정', '부정', '중립'으로 분석하여 아이콘과 텍스트로 표시합니다.
• 메신저 스타일 UI: 친숙한 메신저 형태의 말풍선 디자인을 적용했습니다.
  • 상대방 메시지 상단에 감정 상태(아이콘 + 텍스트) 표시
  • 메시지 전송 시간(타임스탬프) 표시

최근 업데이트 내역 (Recent Updates)

UI/UX 디자인 리뉴얼

• 전체 테마: 밝고 깨끗한 화이트 톤의 배경과 파스텔 톤의 포인트 컬러(연한 빨강, 연한 파랑)를 적용했습니다.
• 아이콘: 각 모드와 감정 상태에 맞는 커스텀 벡터 아이콘을 적용했습니다.
• 헤더 스타일링: 각 모드 진입 시 홈 화면의 버튼 색상과 매칭되는 헤더를 적용하여 통일감을 주었습니다.
• 폰트: 가독성이 좋고 개성 있는 'Tenada' 폰트를 타이틀에 적용했습니다.

기능 개선

• 내비게이션 바: 하단 내비게이션 바의 아이콘과 선택 상태에 따른 색상 변경을 적용했습니다.
• 데이터 연동: 대화 목록에 타임스탬프 데이터를 추가하고, 감정 분석 결과를 UI에 반영했습니다.

기술 스택 (Tech Stack)

• Language: Kotlin
• UI Framework: Jetpack Compose
• Architecture: MVVM (Model-View-ViewModel)