미리보기

• 학습관리(LMS, CMS)서비스 웹 어플리케이션 구축 및 유지보수

• 메타버스 플랫폼 웹 어플리케이션 개발

• AI 메타버스 심리상담 웹 어플리케이션 개발

• Kokkok Express 모빌리티 운송 플랫폼 앱 유지 및 보수
• Truck Doctor 트럭 정비 플랫폼 앱 유지 및 보수

• Fatal Bomb 공식 홈페이지 제작

• CJ와 연계한 KMFF 가상 패션 메타버스 웹 어플리케이션 개발

교육 영상 학습 관리를 위한 LMS(Learning Management System) 서비스 입니다.

역할 및 기여:

• 이메일 인증을 통한 로그인 및 회원가입 기능 구현 (JWT)

• 수강신청, 강의 시청, 관리자 대시보드 등 주요 UI/UX 페이지 설계 및 구현

• Next.js의 Data Fetching, Mutation 을 통한 API 통신 및 DB 동기화

• Container & Presentational 디자인 패턴을 적용하여 유지 보수성 향상

• framer-motion 사용한 인터랙티브 애니메이션 적용

• Vimeo API를 통한 영상 소스 관리 및 스트리밍

• 웹과 모바일 애플리케이션을 통합된 모노레포 구조로 구축하여 코드 재사용 및 관리 효율성 증대

성과 및 결과:

• 사용자 300명 이상 확보

• 번들링 크기 감소 및 페이지 렌더링 속도 향상

• 모노레포 구조 도입으로 코드 재사용 및 유지 보수 효율성 개선

기술 스택: Next.js, React, Tailwind, Typescript

도메인: 도메인

계정: hobinskyy@naver.com/qwer1234@

포트폴리오: 포트폴리오

chat gpt와 메타버스를 결합한 진로상담 및 교육 웹 어플리케이션입니다.

역할 및 기여:

• 3D WebGL 렌더링을 위해 Unity 빌드를 웹 애플리케이션에 통합하여 사용자와의 인터랙션 기능 구현

• 상담 프롬프트를 정의하고 ChatGPT API를 연동하여 AI 기반의 상담 기능 제공

• Figma를 이용해 디자인 및 기획자와 협업하여 페이지 UI/UX 설계 및 구현

• Cloudflare R2 스토리지와 비디오 스트리밍 API를 연동하여 이미지 및 비디오 업로드 및 렌더링

• 구독 서비스 구현 및 Toss 결제 시스템 연동

기술 스택: Next.js, React, Tailwind CSS, Typescript

도메인: 도메인

계정: guest/qwer1234@

크로스 플랫폼을 지원하는 운송 모빌리티 앱입니다.

역할 및 기여:

• Android 및 iOS를 위한 React Native 기반의 크로스 플랫폼 앱 개발

• 안정성과 유지보수를 위해 기존 코드베이스를 타입스크립트로 마이그레이션

• Figma를 사용한 모바일 UI/UX 디자인을 적용하여 사용자 경험 향상

• 블루투스 기능 및 영수증 프린트 기능 구현

• Facebook 광고를 통한 앱 다운로드 유저 트래킹 및 광고 데이터 수집

• Firebase를 사용하여 앱 푸쉬 알림 서비스 구현

• React Native 패키지 버전 관리 및 최신화, 앱 배포 전 기능 테스트와 디버깅

기술 스택: React Native, TypeScript, Firebase, Redux Toolkit, Axios

CJ와 연계하여 개발한 가상 패션 메타버스 웹 서비스 입니다.

역할 및 기여:

• React Three Fiber(R3F)를 활용하여 3D 모델 파일(glb, gltf)의 렌더링 및 애니메이션 구현

• 웹과 서버 간의 유저 데이터 통신 구현

• Redux Toolkit(RTK)을 도입하여 비동기 및 전역 상태 관리 시스템 구축

• Kakao, Naver, Google 소셜 회원가입 및 로그인 기능 구현

• 디자이너와 협업하여 반응형 UI/UX 디자인 구성

• Socket.io를 사용하여 유저 간 실시간 채팅 기능 구현

• react-transition-group 라이브러리를 사용한 페이지 인터렉티브한 라우팅 애니메이션 적용

• 외국인 이용자를 위한 Localization 기능 구현

기술 스택: React, TypeScript, Redux Toolkit, R3F, Axios, Styled-components

참고 블로그: 참고 블로그

사용자가 여행 일정을 작성하고 공유할 수 있는 서비스로, 지도 서비스와 무한 스크롤, 푸시 알림 등을 통해 사용자 경험을 향상시킵니다.

역할 및 기여:

• 팀 리더로서 프로젝트를 주도하고 백엔드 및 현직 디자이너와 협업

• Location API를 활용하여 Google Map 기반의 지도 서비스 개발

• 검색 및 카테고리 쿼리를 적용한 무한 스크롤 기능 구현

• Progressive Web App(PWA) 적용으로 웹 푸시 알림 기능을 통해 사용자 접근성 향상

• Compression 이미지 라이브러리를 적용하여 렌더링 속도 개선

• AWS S3, CloudFront, Route53을 사용하여 웹 페이지 배포

기술 스택: React, Redux, Axios, Google Map SDK, Styled-components

데모 영상: 데모영상

포트폴리오: 포트폴리오

국밥을 판매하는 모바일 웹 이커머스 서비스로, 사용자가 쉽게 주문하고 관리할 수 있는 기능을 제공합니다.

역할 및 기여:

• 외주 디자이너와 협업하여 로고, 회원가입, 로그인, 메인 페이지, 주문하기, 주문내역, 후기, 관리자 페이지 등 UI/UX 디자인 및 구현

• Firebase Authentication을 활용한 이메일 로그인 서비스 구현

• Cloud Firestore 및 Storage를 사용하여 고객 데이터 연동 및 패치

• Toss Payments를 통한 결제 시스템 구축

• Next.js 서버 API를 사용하여 풀스택 애플리케이션 구현

• React-Query를 도입하여 API 캐싱 및 데이터 패칭 최적화

• 재사용 가능한 컴포넌트 및 기능 로직 모듈화

기술 스택: React, Next.js, Firebase, TypeScript, React-Query, Emotion

도메인: 도메인

깃허브: Github

React Native로 개발한 투두 리스트 앱으로, 할일 리스트를 관리하고 수정할 수 있는 기능을 제공합니다.

역할 및 기여:

• Cloud Firestore를 사용하여 할일 리스트 저장 및 상세 페이지에서 수정 및 삭제 기능 구현

• react-navigation 라이브러리를 활용하여 화면 스택 관리 및 전환 처리

• react-native-gesture-handler 라이브러리를 사용하여 스와이프 제스처로 리스트 삭제 기능 구현

• StyleSheet API를 사용하여 직관적이고 사용자 친화적인 UI/UX 구현

기술 스택: React, React Native, TypeScript, Firebase

깃허브: Github