<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
  • 오디오 엔지니어
• 주요기능
  • 음악 & 뇌파음 동시 재생
    • 클래식 음악과 함께 뇌파음을 동기화하여 재생
  • 화이트 노이즈 추가 기능
  • 음악 설정 저장 및 추천 기능
  • 구독 모델 적용
  • 유튜브 뮤직과 유사한 UI/UX 적용
  • 총 5개국의 언어에 맞춰 현지화
• 프로젝트의 문제 및 해결 과정

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

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

본인은 기재된 모든 내용이 사실임을 확인하며, 허위 사실이 없음을 서약합니다. 만약 허위 사실이 발견될 경우 이에 따른 모든 책임을 감수하겠습니다.