안녕하세요. 개발자 이창훈입니다!

<aside>

👤 프로필

이창훈

33세 (1993년)

[email protected]

부산광역시 부산진구

https://leechanghoon3024.github.io/myBook/portfolio/so.html

</aside>

<aside>

🪪 기술스택

NextJs ReactJs NestJs NodeJs TypeORM TS JS Git MySQL AWS React+Native

</aside>

<aside>

📱주로 활용하는 라이브러리

@tanstack-reactquery react-hook-form yup redux zustand jotai typeorm emotionjs styled-component tailwindcss axios eslint framer-motion

</aside>

<aside>

💬 AI 아바타 채팅플랫폼

사용기술
- ReactJs Nextjs Nestjs TS ThreeJs OpenAi API MySQL Firebase Store
기여도
- 프론트엔드, 백엔드 및 AI 연동 전반적인 코어 기술과 프론트엔드 + 백엔드 개발 리드
- 3D 아바타 애니메이션 및 상호작용 구현
- OpenAI Realtime API 연동 및 채팅·음성 대화 기능과 문서 및 이미지 감지 기능 구현
팀원
- 프론트엔드 개발자
- 백오피스 + 백엔드 개발자
- 디자이너
- PM
주요기능
- 사용자 맞춤 3D 아바타 생성
  - 타사 3D 아바타 생성 플랫폼을 활용하여 사용자 개별 캐릭터 제작
- AI 기반 대화 기능
  - 사용자 입력(이름, 직업, 프롬프트)을 저장하고 OpenAI Realtime API를 활용해 AI와 대화 지속 및 내역 저장
  - 텍스트 채팅 및 음성 대화 지원
  - 사용자가 업로드한 문서 파일 및 이미지(사진) 분석 기능 제공
- 3D 아바타 음성 애니메이션
  - AI가 응답할 때 아바타의 입과 몸이 움직이며 말하는 애니메이션 구현
- Stripe를 이용한 구독과 크레딧
프로젝트의 문제 및 해결 과정
- 3D 아바타 다중 렌더링 문제
  - 아바타 선택창에서 여러 개의 아바타가 동시에 렌더링될 때 성능 저하 발생 → 사용자 경험 저하
  - 로딩 화면 추가: 사용자 경험을 개선하기 위해 초기 랜더링 요소들 로드하는동안 초기 로딩 화면 적용
  - 3D 아바타 프리패치: @react-three/drei의 prefetch을 사용하여 미리 데이터를 로드하여 실제 렌더링 시 부하를 줄임
- AI 응답 속도 개선 및 대화 흐름 최적화
  - OpenAI Realtime API를 활용하면서, AI 응답 속도가 사용자의 기대보다 느릴 수 있음
  - 음성 입력과 동시에 AI 처리 요청을 보내 대기 시간을 단축 3s → 1s
프로젝트의 전반적인 부분을 리드하며 참여했고, 주요기능을 구현했습니다. 해당 프로젝트를 통해 3D 렌더링, 실시간 AI 대화 시스템 구축, 음성 애니메이션 연동 등 다양한 기술적 도전을 해결하며 한층 성장할 수 있었습니다.

관련 이미지

관련 코드
- 여러개의 animation glb파일을 한번에 로드 시켜주는 커스텀 훅
  - https://github.com/leechanghoon3024/myBook/blob/master/portfolio/demo-code/use.animation.ts
- 각 아바타들의 자연스러운 눈 깜박임을 구현하기 위한 커스텀 훅
  - https://github.com/leechanghoon3024/myBook/blob/master/portfolio/demo-code/use.blink.animation.ts
- openAi를 통해받은 데이터중 코드 블럭이 있을 경우 마크다운으로 랜더링하는 컴포넌트
  - https://github.com/leechanghoon3024/myBook/blob/master/portfolio/demo-code/markdown.render.tsx

</aside>

<aside>

🎵 음악+명상 앱

사용기술
- ReactNative ReactJs Nestjs TS MySQL i18n
기여도
- 백오피스를 제외한 모바일 및 웹 앱 개발 (React Native, React.js) 리드
- 음악 재생 기능 및 사용자 인터랙션 최적화
- 플랫폼별 구독 모델 및 음악 설정 저장 기능 구현
팀원
- 백오피스 담당 개발자
- 디자이너
- PM
- 오디오 엔지니어
주요기능
- 음악 & 뇌파음 동시 재생
  - 클래식 음악과 함께 뇌파음을 동기화하여 재생
- 화이트 노이즈 추가 기능
  - 사용자 선택에 따라 새소리, 물소리, 빗소리 등의 화이트 노이즈 추가 가능
- 음악 설정 저장 및 추천 기능
  - 사용자가 선호하는 음악과 화이트 노이즈 설정을 저장하여 다음에도 동일한 환경에서 감상 가능하고, 유사한 음악을 추천
- 구독 모델 적용
  - 각 플랫폼(App Store, Play Store)별 구독 결제 시스템을 적용하여 음악 감상 가능
- 유튜브 뮤직과 유사한 UI/UX 적용
  - 직관적인 사용자 인터페이스와 부드러운 애니메이션을 적용하여 몰입감 향상
- 총 5개국의 언어에 맞춰 현지화
프로젝트의 문제 및 해결 과정
- 음악 & 뇌파음 동기화 문제
  - 오픈 라이브러리 중 여러 트랙을 동기화하여 동시에 재생할 수 있는 라이브러리가 없음
  - iOS에서는 Swift, Android에서는 Kotlin을 활용하여 네이티브 모듈을 직접 개발
  - 음악을 기준으로 재생바를 움직였을때 뇌파음과 정확히 동시에 시작하고 싱크를 맞추는 기능 구현
- 여러 개의 오디오 트랙을 동시에 재생하면 성능 저하 발생
  - 각 OS별 네이티브 모듈을 활용하여 음악 재생을 다른 프로세스로 처리
  - React Native에서 오디오 컨트롤만 담당하고, 실시간 오디오 처리는 네이티브에서 수행하여 렌더링 부하 최소화

프로젝트의 전반적인 부분을 참여했고, 주요기능을 구현했습니다. 이 프로젝트를 통해 네이티브 모듈을 활용한 React Native 최적화, 멀티 트랙 오디오 동기화, 사용자 인터렉션, 각 스토어에 런칭 등 다양한 기술적 도전을 해결하며 한층 성장할 수 있었습니다