미리보기

3D 콘텐츠 및 Unity WebGL 통합

• @google/model-viewer, @react-three/fiber, three.js를 활용하여 제품·아이템·캐릭터 등의 3D 모델 뷰어 기능을 웹에 자연스럽게 통합하였습니다.

• react-unity-webgl을 통해 Unity 콘텐츠를 웹 앱 내에 삽입하고, React 컴포넌트와 상호작용할 수 있도록 처리하였습니다.

관리자 페이지 개발 및 사용성 개선

• react-hook-form과 zod를 활용하여 입력 상태 관리 및 유효성 검증 로직을 모듈화하고, 반복되는 폼 로직을 줄여 코드량을 50% 이상 감소시켰습니다.

• Tailwind CSS와 @shadcn/ui를 도입하여 유틸리티 기반의 빠른 UI 개발과 일관된 디자인 시스템을 구현하였습니다.

Expo 기반의 React Native 앱 개발 및 유지보수

• Expo 및 React Native를 기반으로 크로스 플랫폼 앱을 개발하였으며, 단일 코드베이스로 iOS와 Android 앱을 안정적으로 운영하였습니다

• OTA(Over-The-Air) 업데이트 기능을 적용하여 앱스토어 심사 없이 빠른 기능 배포 및 핫픽스가 가능하도록 하였습니다.

• 다양한 디바이스 및 OS 환경을 고려하여 HLS, MPEG-DASH 등 멀티 포맷을 지원하는 스트리밍 플레이어를 구현하고, 플랫폼에 따라 최적화된 품질로 영상 재생을 제공하였습니다.

• Widevine (Android, Chrome) 및 FairPlay (iOS, Safari) DRM을 적용하여 콘텐츠 무단 복제를 방지하고 보안성을 강화하였습니다.

Presigned URL 및 멀티파트 업로드를 통한 대용량 파일 업로드 최적화

• AWS S3의 Presigned URL을 활용하여 클라이언트가 서버를 거치지 않고 직접 파일을 업로드할 수 있도록 개선하였습니다.

• S3 Multipart Upload를 적용하여 5GB 이상의 대용량 파일도 안정적으로 업로드할 수 있도록 구현하였으며, 네트워크 오류 발생 시에도 부분 재전송이 가능하도록 처리하였습니다.

• 업로드 완료 후 서버에서 객체를 조합하여 전체 파일 일관성을 유지하였고, 파일 업로드 중 UI 상태를 실시간 반영하여 사용자 경험을 개선하였습니다.

• 이 방식으로 파일 업로드 성공률을 높이고, 서버 부하를 줄이면서도 대역폭 비용을 절감하는 효과를 얻었습니다.

On-the-fly 이미지 리사이징을 통한 성능 최적화

• AWS Lambda@Edge와 S3, CloudFront를 활용해 이미지 리사이징 파이프라인을 구축하여, 고해상도 이미지 요청 시 자동으로 지정 크기로 변환 및 캐싱 처리

• CloudFront 캐싱으로 TTFB(Time to First Byte) 약 96% 개선, 전송 용량 약 98% 감소, 사용자 경험 및 트래픽 비용 모두 최적화

체스 엔진 및 터미널 기반 체스 게임 개발
TypeScript 기반의 모듈형 체스 엔진과 이를 활용한 터미널 기반 체스 게임을 개발하여, 다양한 플랫폼에서의 체스 게임 구현을 가능하게 했습니다.

• @chess-labs/core: 체스의 핵심 로직을 처리하는 경량의 독립형 엔진으로, 말 이동 규칙, 체크/체크메이트 판정, 캐슬링, 앙파상, 승격 등의 특수 규칙을 완벽하게 지원합니다. FEN 포맷을 통한 게임 상태의 저장 및 불러오기를 지원하며, UI에 종속되지 않아 다양한 환경에서 재사용이 가능합니다.

• @chess-labs/terminal: @chess-labs/core 엔진과 Stockfish를 통합하여 터미널에서 체스를 플레이할 수 있는 CLI 애플리케이션입니다. UCI 프로토콜을 통해 Stockfish와 연동되며, 가볍고 모듈화된 구조로 설계되어 유지보수와 확장이 용이합니다.

• 체스 게임의 로직과 인터페이스를 분리하여 개발함으로써, 다양한 사용자 인터페이스와의 통합을 용이하게 하며, 테스트와 유지보수의 효율성을 높였습니다.

Google Chat Webhook Action | GitHub

• GitHub Actions의 실행 결과를 Google Chat으로 자동 전송하는 GitHub Action을 개발했으며, cardsV2 포맷을 활용하여 시각적 완성도를 높였습니다.

• 카드 메시지에 커밋 메시지를 부제목으로 표시하고, 저장소·액션 실행·커밋으로 바로 이동할 수 있는 버튼을 추가하여 사용성과 접근성을 강화했습니다.

• 타입 안정성을 고려해 TypeScript로 작성했으며, 사용자 정의 제목 및 메시지 설정 기능을 통해 유연한 알림 구성이 가능합니다.

메이플랜드 아이템 검색 사이트 | GitHub

• Next.js 14 App Router, Server Action, Supabase, Vercel를 사용하여 1인 개발 및 배포했으며, 총 사용자수 3500명 이상을 기록했습니다.

• generateMetadata를 활용한 동적 메타 데이터 생성으로 SEO 향상 및 공유성 개선, Google 검색 클릭 수 2000회 이상을 기록했습니다.

• Supense fallback, Skeleton UI를 사용하여 적절하게 로딩 상태를 처리하고 및 CLS를 개선했습니다.

Slash 라이브러리에서 제공하는 헬퍼 함수인 buildContext에 잘못 작성되어 있는 예제 코드를 발견하여 수정하였습니다. (PR #361)