강예찬 |  Ye-Chan Kang

Introduction

• 이미지 동적 생성 오픈소스

Challenge & Experience

• API Query 값으로 SVG를 활용해 동적인 이미지 응답
• 하루 평균 100,000건 이상 요청
• 오픈 소스 사용 방법 및 예외 사항 등을 명시한 문서 제공
• Discussions을 나누며 에러나 기능사항에 대해 토론하고 적용시킴
• 서비스 에러 방지
  • 테스트 코드 작성
  • Github Action을 통해 테스트 결과(Coverage Report) 분석
• 사용자 편의 개선을 위한 Generator 제공
  • GitHub가 제공한 기존 Traffic 분석과 Generator 방문수 분리
  • 분리된 방문자를 더욱 자세히 파악하기 위해 Google Analytics 적용

Growth

• 추가적인 기능에 대해 Issue나 Discussion 등을 받아 의논해보고 혼자서는 발견하지 못했을 문제를 개선시키는 경험 을 얻을 수 있었습니다.
• 실수로 라이브 API에서 기능을 작동시키지 못하는 문제도 겪어보게 되면서 이를 계기로 테스트 코드의 중요성을 직접 깨닫고 프로젝트에 적용시켰습니다.
• husky를 이용해 Git 커밋 컨벤션을 일관되게 하고 Prettier Lint를 작동시킨 후 적용될 수 있게 노력했습니다.

Introduction

웹 오디오 에디터 오픈소스

Challenge & Experience

• 모노레포 구성
• 다양한 프레임워크 및 라이브러리 개발 효율성 극대화
• Canvas 렌더러 엔진 구축
• Web Audio API를 활용해 실시간 오디오 편집 및 재생 라이브러리
• 다양한 프레임워크 지원을 위한 스튜디오 패키지
• 객체지향 설계
• 코드의 모듈화와 유지보수성을 향상
• 독립적인 컴포넌트로 분리하여 재사용성
• demo 및 문서화를 위한 docs 사이트 개발

Introduction

• 성우 포트폴리오 관리 및 커뮤니티 플랫폼

Challenge & Experience

• React에서 Next로의 마이그레이션
  • 페이지 전환보다 첫 페이지 입장을 위한 마이그레이션 작업
  • 분리된 프로젝트 단순화시키면서 개발 시간과 테스트 감소
• 렌더링 속도 개선
  • 우선순위에 따라 Streaming 하며 첫 컨텐츠 렌더링 시간 0.9s → 0.3s 단축
  • 로딩 중 Skeleton UI를 만들어 CLS 와 사용자 경험 개선
• 컴포넌트 복잡도 개선
  • 컴포넌트 단위로 개발하면서 재사용성을 높이고 반복 작업 최소화
  • Storybook을 이용해 문서화하며 컴포넌트 종류 시각화
• 오디오 플레이어 상태 유지
  • 다양한 오디오 재생 컴포넌트들과 상태를 공유하면서 불필요한 재렌더링을 방지하고 페이지 이동에도 재생 유지

Introduction

• WebVR 환경에서의 3D 공간 Drawing

Role

• 프론트엔드 개발 (프론트엔드 3명, 백엔드 1명)
• 프로젝트 설계, WebVR 환경 구현, 드로윙 / 팔레트 기능을 중점으로 구현

Challenge & Experience

• 프로젝트 경량화
  • 서비스 요구사항 대비 불필요한 React 도입 고려
  • Preact 도입 효과를 정리하고 팀원들과 토론하여 설득
  • 렌더링 속도와 메모리 사용량 개선 시도
  • VR 환경 지원도 고려 가능해지면서 WebVR 기능 추가가 가능해짐
• 프레임 저하 개선
  • 데이터가 Drawing 작업에 맞추어 동적 증가되도록 하고 재렌더링 요청 작업을 불필요하게 만들면서 평균 초당 프레임(FPS) 10 → 60 개선
• 브라우저 환경간 선 굵기가 호환 문제 해결
  • Three.js 의 공식 Line 객체가 모든 브라우저에 호환되지 못하는 문제로, 라이브러리의 샘플 단계 Line2 와의 비교 분석을 통해 프로젝트에 도입하면서 브라우저 호환
• 3D 상의 Drawing 좌표계 문제 해결
  • 무한한 공간에서의 깊이와 시점으로 인한 좌표 변경을 카메라와 평행한 평면과 event와의 꼭짓점 계산으로 고정된 좌표를 얻어냄

Introduction

기술 및 프로젝트를 자유롭게 구성하기 위해 만든 블로그

Challenge & Experience

• SEO를 위한 시멘틱 태그 배치에 신경 씀
• sitemap, robots 생성 후 크롤러가 잘 읽어갈 수 있도록 구현
• open graph를 적용한 프리뷰로 유입 개선 시도
• 구조화된 JSON-LD 데이터 마크업 작성
• MDX를 활용하기 위해 rehype, remark 플러그인 구성
• 이미지, 코드, 주소 등을 최적화 된 컴포넌트로 재구성
• 각 Heading을 정리한 TOC 생성과 Observer 처리

Introduction

MORPG 협동 레이드 게임

Role

• 개발 및 팀장을 맡으며 총 13명의 다양한 직군을 모집해 6개월간 개발

Effort & Experience

• 분야를 가리지 않고 개발 열정을 다양하게 쏟아옴
• 생방송 당시 2만명이 넘게 시청
• 평균 동시접속자 35명과 1745명의 사용자 가입
• 순수한 개발 즐거움에 몰두하며 새로운 도전을 적극적으로 시도