발화가 어려운 자폐 아동을 위한 보완대체의사소통(AAC) 앱 개발
시작 배경
발화가 어려운 자폐 아동을 위해 휴대폰과 태블릿으로 사용할 수 있는 보완대체의사소통(AAC) 앱을 개발했습니다.
진행한 일
1. 맞춤형 음성 출력 시스템(TTS) 구현
- 다양한 보이스 옵션 적용: Naver Clova Voice API를 연동하여 자폐 아동의 성별과 기호에 맞는 남아/여아 보이스 선택 및 설정 기능 구현
- 개별화된 사용자 경험 제공: 로그인 시 각 아동에게 설정된 고유 음성 데이터를 즉시 로드하여 개인화된 의사소통 환경 제공
2. 하이브리드 데이터 관리 및 다중 디바이스 동기화
- 스토리지 전략 최적화: Firebase(원격)와 LocalStorage(로컬)를 병행 활용하는 하이브리드 데이터 구조 설계
- 로컬: 오프라인 환경에서도 지연 없는 음성 출력 지원
- 원격: 로그인 기반의 설정을 Firebase에 저장하여 기기 변경 시에도 설정값이 유지되도록 구현
- 실시간 설정 동기화: 다중 디바이스 사용 환경에서 발생할 수 있는 설정 불일치 문제를 해결하기 위해, 앱 구동 시 Firebase 데이터 우선순위 적용 및 동기화 로직 구현
⭐ 업무 과정 [핵심]
이해관계자 조율 및 요구사항
- 디자인-기술 간 간극 조정: 개발 과정에서 발생한 디자인 가이드와 실제 구현 가능성 사이의 기술적 문제를 조기에 발견
- 기획/디자인 조율: 기획자 및 디자이너와 주도적인 미팅을 제안하여, 사용자 편의성을 해치지 않으면서도 개발 효율성을 높일 수 있는 대안적 UI/UX를 제시하고 반영
기술적 의사결정 — UX 개선 및 컴포넌트 재사용성 확보
1. 상황(Issue)
초기 AAC 앱의 속도 조절 슬라이더 디자인이 슬라이드 단계(점)를 너무 촘촘하게 배치하여, UI상 시인성이 떨어지고 실제 조작감이 불편할 것으로 판단되었습니다.
2. 의사결정 과정(Process)
- UX 관점의 설득: 구현 가능 여부를 떠나, 촘촘한 슬라이더는 사용자에게 불필요한 인지 부하를 줄 수 있다고 판단했습니다. 실제 기능적으로는 7단계의 속도 조절이 최적임을 확인하고, 이를 근거로 디자인 수정을 제안하였습니다.
- 기술적 타당성 확보: 해당 슬라이더를 공통 컴포넌트로 설계하여 앱 내 다양한 기능에서 재사용하고자 했습니다. 단계의 개수가 고정되어 있다면 유연성이 떨어지므로, 컴포넌트의 추상화와 유연한 파라미터 설계의 필요성을 디자이너와 공유하였습니다.
3. 결과(Result)
- 디자인 최적화: 7단계의 슬라이더로 디자인을 간결하게 개선하여 UX를 향상시켰습니다.
- 컴포넌트 아키텍처 개선: 슬라이더의 단계 개수를
prop으로 제어할 수 있도록 공통 컴포넌트를 설계하여, 다양한 환경에서 유연하게 재사용 가능한 모듈을 완성했습니다.
결과물
(화면 캡처 및 데모 링크 추가 예정)
성장한 점
성과
- 사용자 친화적 인터페이스 구축: 디자인 단계에서 발생한 UI 제약 사항을 사용자 인지 심리학과 실제 기능 요구사항(7단계 속도 제어)을 근거로 디자이너와 협업하여 개선했습니다. 이를 통해 사용자에게 불필요한 인지 부하를 줄이고 최적의 조작 환경을 제공했습니다.
- 공통 컴포넌트 아키텍처 도입: 슬라이더를 비롯한 핵심 UI 요소를
prop제어가 가능한 모듈형 공통 컴포넌트로 설계했습니다. 이를 통해 앱 전반에서 일관된 UX를 제공함은 물론, 향후 유지보수 및 기능 확장이 용이한 아키텍처를 구축했습니다. - 데이터 동기화 안정성 확보: Naver Clova의 음성 데이터와 Firebase를 연동하여, 네트워크 상태에 구애받지 않는 음성 안내 및 데이터 실시간 동기화 프로세스를 구현하여 서비스 안정성을 극대화했습니다.
키운 역량
- 기술적 커뮤니케이션 역량: 단순히 디자인 요구사항을 수용하는 것을 넘어, 개발자의 관점에서 UX 편의성과 컴포넌트 재사용성이라는 두 가지 목표를 위해 디자이너를 기술적으로 설득하는 협업 능력을 길렀습니다.
- 프론트엔드 컴포넌트 설계 능력: React Native 환경에서 상태값에 따라 유연하게 변하는 추상화된 UI 컴포넌트를 설계하며, 코드 중복을 최소화하고 재사용성을 극대화하는 프론트엔드 모듈화 역량을 확보했습니다.
- 도메인 특화 서비스 이해도: AAC라는 특수 도메인에서 아동 사용자의 인터랙션 패턴을 분석하고, 이를 서비스 기능으로 치환하는 사용자 중심의 서비스 설계 역량을 배웠습니다.