코코지 하우스코코지 하우스

프로젝트 개요

코코지 하우스는 어린이를 위한 오디오 콘텐츠 플랫폼으로, IoT 하드웨어(코코지 하우스)와 모바일 앱을 결합한 크로스 플랫폼 서비스입니다. 부모가 직접 녹음한 이야기나 큐레이션된 오디오 콘텐츠를 '아띠'라는 NFC 피규어에 담아 아이들이 스스로 재생할 수 있는 에듀테인먼트 솔루션입니다.

본 프로젝트는 React Native + Expo를 기반으로 총 71개의 화면을 구현한 모바일 퍼블리싱 작업으로, 직관적인 UI/UX와 복잡한 네비게이션 구조를 체계적으로 설계했습니다.

서비스 흐름도

주요 기능

1. 코코지 하우스 IoT 연동

• AP 모드 기반 Wi-Fi Direct 연결 프로세스. 앱이 디바이스의 AP에 직접 접속하여 Wi-Fi 설정을 전달하고, 디바이스는 이를 통해 가정 내 네트워크에 연결됩니다.
• 제품 정품 인증 및 중복 등록 방지. 시리얼 번호 기반 검증으로 한 디바이스가 여러 계정에 등록되는 것을 차단합니다.
• 실시간 재생 상태 동기화 (재생/일시정지/셔플/반복). 앱에서 제어한 내용이 즉시 하드웨어에 반영되며, 하드웨어의 물리 버튼 조작도 앱 화면에 표시됩니다.
• 다락방 불빛 컨트롤 및 수면 모드 자동화. 취침 시간에 맞춰 자동으로 볼륨을 낮추고 불빛을 꺼주는 스케줄링 기능을 제공합니다.

2. 아띠(NFC 피규어) 관리

• 매직아띠 NFC 태깅 기반 등록 시스템. 스마트폰을 피규어에 가까이 대면 자동으로 인식하고 등록 화면으로 이동합니다.
• 아띠별 플레이리스트 커스터마이징. 각 피규어에 서로 다른 콘텐츠 묶음을 할당하여 아이가 원하는 이야기를 직관적으로 선택할 수 있게 합니다.
• 드래그앤드롭 방식의 재생 순서 변경. 터치로 아이템을 길게 누르고 이동하여 플레이리스트 순서를 쉽게 조정할 수 있습니다.
• 프로필 편집 및 플레이리스트 교체. 아띠의 이름, 아이콘을 변경하거나 연결된 플레이리스트를 다른 것으로 바꿀 수 있습니다.

3. 이야기 녹음 및 관리

• 최대 3분 길이의 고품질 오디오 녹음. 카운트다운 후 녹음이 시작되며, 실시간으로 파형을 시각화하여 녹음 상태를 직관적으로 확인할 수 있습니다.
• 내 이야기 / 게스트 이야기 분류 관리. 호스트가 녹음한 콘텐츠와 게스트가 공유한 콘텐츠를 별도로 관리하여 접근 권한을 구분합니다.
• 호스트 선택 및 체크리스트 기반 공유 프로세스. 공유할 이야기를 선택하고, 대상 호스트를 지정한 뒤, 최종 확인 단계를 거쳐 안전하게 전송합니다.

4. 플레이리스트 시스템

• 이야기 불러오기를 통한 플레이리스트 생성. 녹음된 이야기 목록에서 원하는 항목들을 선택하여 새로운 재생 목록을 만들 수 있습니다.
• 아띠에 연결하여 NFC 태깅으로 즉시 재생. 생성한 플레이리스트를 특정 피규어에 할당하면, 아이가 그 피규어를 하우스에 올려놓는 것만으로 자동 재생됩니다.
• 플레이리스트 편집/삭제/순서 변경. 기존 목록의 이름을 바꾸거나, 불필요한 목록을 삭제하고, 콘텐츠 순서를 재배치할 수 있습니다.
• 하우스와 실시간 동기화. 앱에서 수정한 플레이리스트 내용이 즉시 IoT 디바이스에 전달되어 최신 상태를 유지합니다.

5. 사용자 관리

• 호스트/게스트 역할 기반 권한 관리. 호스트는 모든 설정과 콘텐츠를 관리할 수 있고, 게스트는 제한된 범위 내에서 이야기를 공유하고 재생할 수 있습니다.
• 게스트 초대 및 프로필 관리. 이메일 또는 코드를 통해 가족 구성원을 초대하고, 각자의 프로필을 설정할 수 있습니다.
• 알림 설정 및 하우스 정보 조회. 푸시 알림 수신 여부를 제어하고, 등록된 디바이스의 상태와 버전 정보를 확인할 수 있습니다.

플랫폼 구성

기술적 선택과 이유

React Native + Expo 선택 이유

• iOS/Android 동시 개발로 개발 기간 50% 단축
• Expo의 OTA 업데이트로 앱스토어 심사 없이 빠른 버그 수정 가능
• 풍부한 커뮤니티 라이브러리로 NFC, 오디오 녹음 등 네이티브 기능 구현

Emotion 기반 CSS-in-JS

• TypeScript와의 완벽한 타입 추론으로 안정적인 스타일 관리
• 컴포넌트 단위 캡슐화로 145개 파일의 유지보수성 향상
• React Native의 StyleSheet보다 유연한 동적 스타일링

복잡한 내비게이션 구조

• Bottom Tabs (4개 메인 탭) + Material Top Tabs (이야기/플레이리스트) + Stack Navigator (모달/상세) 혼합 구조
• 71개 화면의 복잡한 사용자 플로우를 직관적인 계층으로 정리
• 각 화면을 독립적인 컴포넌트로 분리하여 재사용성 향상

도메인 중심 폴더 구조

• screens 내부를 기능별로 분류 (kokozi-house, Arti, story, mypage)
• 각 도메인별 blank/no-blank 상태 분기 처리로 로딩 상태 관리
• components를 global/sub/list-items로 분류하여 컴포넌트 재사용

프로젝트 특징

1. IoT 하드웨어 연동

• AP 모드를 통한 디바이스 디스커버리 및 Wi-Fi 프로비저닝 구현
• 정품 인증 로직으로 불법 복제 방지
• 실시간 양방향 통신으로 앱-하드웨어 상태 동기화

2. 어린이 친화적 UX

• 큰 터치 영역과 직관적인 아이콘 디자인
• 복잡한 기능을 단계별 가이드로 분할 (예: 하우스 세팅 9단계)
• 도움말 툴팁과 에러 상황별 친절한 안내 메시지

3. 체계적인 상태 관리

• blank(빈 상태) / no-blank(데이터 존재) 상태를 명확히 분리
• 각 화면별 독립적인 렌더링 로직으로 불필요한 리렌더링 방지
• 전역 플레이어 컴포넌트로 앱 전체에서 일관된 재생 경험

4. 확장 가능한 아키텍처

• 컴포넌트/데이터/스크린을 분리한 레이어드 구조
• 공통 로직을 common, components/global에 추상화
• 새로운 기능 추가 시 최소한의 코드 수정으로 확장 가능

5. 프로덕션 수준의 완성도

• 총 71개 화면 중 70개 완성 (98.6% 완성도)
• ESLint + TypeScript로 코드 품질 보장
• 실제 디자인 시스템 기반의 일관된 UI 컴포넌트