Plask SD [https://plask.ai/](https://plask.ai/) 기간: 2023.03 ~ 현재 참여 인원: 2 (FE) 포즈 추출 AI 모델, Stable Diffusion AI 모델을 활용한 이미지 생성 툴입니다. 사용자는 포즈 데이터와 텍스트를 통해 이미지를 생성할 수 있습니다. 한 달 만에 빠르게 개발하여 운영 중입니다. 툴 전반을 담당하여 개발했습니다. 사용 기술 HTML ,SCSS, Typescript, React.js, Next.js, Recoil, React-query 기여 & **경험** - 이미지 업로드, 포즈 선택, 포즈 추출, 이미지 추출 등 사용자가 이미지를 추출하는 과정 모든 기능과 커뮤니티 포스팅 기능 개발 - 다양한 비동기 처리에 대한 상태 관리를 선언적으로 처리 - Serverside rendering - 복잡한 Form 관리 디바운스를 통해 자동 저장을 최적화했고 react-hook-form을 사용해 uncontrolled, controlled를 조합하여 설계했습니다. Plask Motion [https://motion.plask.ai/](https://motion.plask.ai/) 기간: 2021.11 ~ 23.02 참여 인원: 4 (FE) AI를 활용한 애니메이션 에디팅 툴입니다. 비디오에서 추출한 모션을 애니메이션에 입혀, 애니메이션 제작 비용을 절감합니다. 애니메이션 에디팅 UI 개발 및 유지보수를 담당했습니다. **사용 기술** HTML ,SCSS, Typescript, React.js, Next.js, Babylon.js, Redux, Redux-saga 기여 & **경험** - 애니메이션 레이어, 키프레임 수정 기능 유지보수 애니메이션 데이터를 다루면서 Mutable한 객체를 리덕스에서 관리했는데, UI 상태를 다루는 데이터와 겹쳐 사이드 이펙트를 다루기 힘들었고 애니메이션을 다루는 엔진팀과 책임이 겹쳐지면서 유지보수도 힘들었던 문제가 있었습니다. 관심사 분리가 얼마나 중요한지 알 수 있는 경험이었습니다. - 온보딩, 공지 모달, 긴급 알림 모달 UI 개발 첫 화면에서 여러 개의 UI를 여러 개의 조건에 맞게 렌더링 해야 했는데, 제너레이터로 추상화하여 해결했습니다. 제너레이터 함수를 사용하는 컴포넌트에서는 뒤에 어떤 UI가 렌더링 되는지 신경 쓰지 않고 next 함수만 호출할 수 있도록 추상화했습니다. - 애니메이션 모델, 모션 캡처 파일, 폴더 등 파일 관리 UI 코드베이스 개선 코드 천 줄이 넘는 하나의 컴포넌트를 각각의 비지니스 로직을 가지는 컨테이너와 UI만 책임지는 컴포넌트로 분리하여 유지보수를 쉽게 하도록 주도적으로 개선했습니다. - 큰 단위의 컴포넌트들을 관심사별로 작게 분리 기존의 코드는 너무 많은 기능을 하나의 컴포넌트가 가지면서 너무 많은 props를 받게 되고, 컴포넌트 내부 로직은 분기처리로 가득하게 되어 가독성이 떨어졌습니다. 관심사별로 분리하여 가독성과 재사용성을 높였습니다. - 모노레포 도입 Homepage, Dashboard, App을 운영하는 중에 같은 기술 스택을 사용함에도 서로 다른 개발 환경을 가지는 불편함과 같은 디자인을 사용함에도 각자 컴포넌트를 지니는 중복을 발견하여 주도적으로 도입하였습니다.

더보기

동영상이나 이미지를 쉽게 리뷰 할 수 있도록 돕고 버전 관리, 프로젝트 관리, 커뮤니케이션 기능을 지원합니다. 초기 멤버로 합류하여 두 명의 개발자와 협업하며 주요 기능들을 개발했습니다. 1년간 제품을 개발하여 D.Camp 우승, 스파크랩스 선정 및 씨드 투자 유치에 성공했습니다. **사용 기술** HTML, SCSS, Javascript, Vue2, Vuex, Nuxt.js, Firebase(Node.js) **기여 & 경험** - 컨텐츠 위에 어노테이션 리뷰 및 코멘트, 멤버 초대, 프로젝트 대시보드, 공유 링크, Payple 결제 연동, 결제 UI 등 다수의 기능 개발 - 의미 있는 구조로 마크업, 일부 반응형으로 구현 - 번들 사이즈 5.16MB -> 803.72KB로 개선 대부분 Tree-shaking을 통해 해결했습니다. 흔히 쓰이는 라이브러리도 잘 알고 사용해야 한다는 것을 알게 된 경험이었습니다. - 복잡한 데이터 흐름을 vuex를 이용해 단순화하여, 코드의 일관성을 높이고 유지보수가 쉽도록 리팩토링

더보기

우아한 형제들 교육 인턴으로 참여하여 프로젝트 위주로 자기 주도적 학습을 진행하였습니다. 풀리퀘스트를 통해 치열하게 팀원들과 소통하고, 바닐라 자바스크립트로 프로젝트를 진행하며 옵저버 패턴, 부분 렌더링 등을 고민하고 구현할 수 있었던 값진 경험이었습니다.

더보기

**사용 기술** PHP, Javascript - 홈페이지 리뉴얼 - 이벤트 페이지 개발

더보기