강예찬 | Ye-Chan Kang
- 010-5236-7457
- kyechan99@gmail.com
- github.com/kyechan99
- kyechan99.github.io
일일 평균 100,000 요청량 이상의 오픈소스를 관리하고 있습니다.
개발자로서 무엇을 해결하는지를 넘어 근본적인 문제와 창의적인 해결책에 고민합니다.
이를 바탕으로 오픈소스에 관심이 많아 개발하면서 도전과 성장을 즐기고 있습니다.
가치를 창출하는 코드를 위해 지속적인 학습과 실천에 적극적입니다.
생각을 행동으로 거침없이 옮기면서 현재는 활성 사용자 18,000명 이상의 프로그램을 서비스하고 있습니다.
PROJECT
Introduction
- 이미지 동적 생성 오픈소스
Role
Owner & Maintainer
Challenge & Experience
- API Query 값으로 SVG를 활용해 동적인 이미지 응답
- 하루 평균 100,000건 이상 요청
- 오픈 소스 사용 방법 및 예외 사항 등을 명시한 문서 제공
- Discussions을 나누며 에러나 기능사항에 대해 토론하고 적용시킴
- 서비스 에러 방지
- 테스트 코드 작성
- Github Action을 통해 테스트 결과(Coverage Report) 분석
- 사용자 편의 개선을 위한 Generator 제공
- GitHub가 제공한 기존 Traffic 분석과 Generator 방문수 분리
- 분리된 방문자를 더욱 자세히 파악하기 위해 Google Analytics 적용
Introduction
- 성우 포트폴리오 관리 및 커뮤니티 플랫폼
Role
Owner & Maintainer
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 처리
- GitHub Action으로 자동 빌드 Workflow 구성
- 다크모드 구현
Introduction
MORPG 협동 레이드 게임
Role
- 개발 및 팀장을 맡으며 총 13명의 다양한 직군을 모집해 6개월간 개발
Effort & Experience
- 분야를 가리지 않고 개발 열정을 다양하게 쏟아옴
- 생방송 당시 2만명이 넘게 시청
- 평균 동시접속자 35명과 1745명의 사용자 가입
- 순수한 개발 즐거움에 몰두하며 새로운 도전을 적극적으로 시도
Activities
J2KB 코딩 스터디 5th2022
- React 스터디에 참가하면서 주간 목표를 정해 포스팅하거나 경험해본 내용을 가지고 공유하는 시간을 가졌습니다.
- 공부한 내용을 가지고 프로젝트 개발에 참여하면서 Scribubble 을 개발했습니다.
- 독창적인 기획과 서비스 완성도로 찬사를 받으며 대상을 수상했습니다.
국방 오픈소스 아카데미 OSAM2020
- 군 복무중 비어있는 시간을 활용하기 위해 공부하면서 참가하게 되었습니다.
- 자동 모자이크 웹 서비스를 개발하면서 프레임워크 Vue.js를 처음 접하게 되었고 웹 공부를 시작했습니다.
- 프로젝트의 구조나 개발자들끼리의 작업 분배에 대해 고민해보는 경험이 되었습니다.
기타 오픈소스 활동
- [직접 개발] : 브라우저 확장 프로그램 활성 자용자수 18,000 명 도달 - chzzk-plus
- [직접 개발] : 드래그시 도우미를 띄워주는 Vue.js 컴포넌트 배포 - npm package
- [직접 개발] : 평소 자주 사용하는 최소한의 디자인 및 기능 프레임워크 - DOCS
- [Merge] : devhints의 sass 치트시트 내용 추가 - #1481
- [Merge] : naver/fe-news 11월 경로 수정 - #35
- [Open] : graphql-kr 한국 문서 수정 - #4
SKILL
HTML / CSS(SCSS) / CSS-IN-JS
- SCSS 를 사용한 프레임워크를 만들어 보기도 하며 Semantic Markup을 준수하며 사용합니다.
- Styled-Component 및 Emotion 을 활용한 프로젝트를 설계 할 수 있고 선호합니다.
- SEO 에 신경쓰며 프로젝트를 진행하며 사용자 유입 분석을 위해 시도합니다.
Javascript / Typescript
- ES6 문법을 활용해 웹 어플리케이션을 개발하는 데 익숙합니다.
- TypeScript 를 이용해 데이터 타입과 문법 등을 준수하며 개발하는 것을 선호합니다.
React / Next
- 크거나 작은 규모의 웹 프로그램에서 다양하게 설계합니다.
- CSR과 SSR에 대해 고민하며 개발합니다.
- 작은 단위로 개발해 상향적 조립에 노력하며 Storybook을 도입해본 경험이 있습니다.
ETC
- 확장프로그램, Discord 봇, Electron을 사용한 데스크톱 앱 등 필요한 SW를 직접 만들어 사용합니다.
- Node.js/Express.js 를 사용해 간단한 REST API를 구축해 프로젝트를 진행해보기도 합니다.
- Git 컨벤션을 정리해 협업을 진행하며 Github Action을 사용해 관리합니다.
- 취미로 C#, Unity를 이용해 게임을 만듭니다.
- 스스로 학습하고 해결하는 것을 즐기면서도 동료나 스승이 있음을 잊지 않습니다
EDUCATION
국민대학교 소프트웨어학과2018.03 - 2024.02 (졸업)
한국게임과학고 프로그래밍과2015.03 - 2018.02 (졸업)