GitHub/Gumball12
shj.rip
resume.shj.rip
[email protected]
(한 줄 소개)
Work Experience
네오사피엔스
AI TTS SaaS
웹 프런트엔드
- 08 - 재직 중
TTS 에디터 리뉴얼 프로토타이핑
- 미국 캘리포니아 San Mateo 출장
- 구성원 5명과 대표가 모여 작은 초기 스타트업처럼 진행
- 실제 해외 영어권 유저 인터뷰를 진행하며 인사이트를 얻고, 이를 프로토타입에 반영
- 3주간 16개 프로토타입과 15번 인터뷰 진행
- 초기 스타트업에 필요한 것이 무엇인지 감 잡음
- 유저가 중요하고
- 내가 이해하고 있는 것과 유저가 이해하는 것이 대부분 다름 (유저와 멀리 떨어져 있으면 안된다)
- “왜”는 항상 중요(개발, 디자인, 기획 모든 부분에서)
- 대표(적어도 방향을 결정할 수 있는 Owner는)는 멀리 떨어져 있으면 안된다
- 대표가 인식한 것과, 구성원들이 인식한 부분이 다름
- 특히 빠르게 치고 들어가야 하는 분야에서는 이게 더욱 중요
- 속도도 빠르고, 방향도 더 잘 이해되고, 서로 align도 되고
- 회사가 커지더라도 이러한 기조는 유지해야 함
- 불확실한 긴 논의보다 빠르게 만들어서 검증하는 것이 올바름
- 그렇다고 논의를 짧게 한 건 아니지만
- 데모 끝내고 평균 2~3시간 논의했는데
- 유저가 왜 그런 행동 했는지 이야기
- 어떤 방향이 맞는지 논의
- 새로운 방향이나 다음 데모 때 어디까지 보여줄지 MVP 정의
- 결국 언젠가 대부분의 SaaS는 미국으로 나갈 수 밖에 없다
- 한국은 좁고, 한계가 명확하고, 그리고 죽어가는 시장
- 영어는 필수구나
- 개발자로서도 성장
- 어떻게 새로운 기술을 학습해야 하는가
- 공식으로 제공하는 예시든, 유저가 만들었지만 신뢰성있는 예시든, 그런 것들을 보며 어떤 방향으로 사용해야 하는지 감 잡고
- 실제 내가 원하는 부분에 적용해보며 학습
- 어떻게 소통해야 하는가
- 여유가 있을 때(컨텍스트 스위칭 우려가 없을 때), 아주 짧게 시간을 명확히 잡고(5~10분), 내 이해와 상대방 이해를 일치시키는 것이 중요
- 이를 위해 사안이 명확히 정리가 되어 있어야 함
- 특히 이번에는 sync 시간이 거의 없었기에 매우 중요
- 어떻게 일해야 하는가
- 어떻게 개발할 것인지 청사진을 먼저 그리고
- 논의한 다음 그대로 진행
- 이렇게 하면 구성원들 간 리뷰 속도가 크게 빨라짐
- 당연한 것이지만 놓쳤음, 급할수록 올바르게
- 당연하다고 생각하지 마라, 실제로 이러한 것들이 지켜지지 않는 회사가 적지 않음
위자드 초기 세팅
2024-04
- 글로벌 타깃으로 타입캐스트 서비스를 개발
- 특정 케이스를 해결하는 여러 작은 애플리케이션으로 구성되어 있으며, 각각을 위자드라고 지칭
- 프로젝트 초기 세팅을 담당
- 모노리포 및 Turborepo 설정
- Vite 설정
- 구성원 의견을 듣는 자리를 마련해 프로젝트 구성 룰 정의
- 디렉터리 구조, 린트 룰, 커밋 컨벤션, PR 컨벤션 및 템플릿, 사용할 디펜던시 등
- 프로젝트 시작 가이드를 위한 컨트리뷰팅 문서 작성
- 시작하기, 커밋 컨벤션, 구성된 자동화 스크립트, 모노리포 환경에서 일하는 방법
- 디펜던시 버전 관리 및 마이그레이션
VoiceoverVideo 위자드 개발
- VV 위자드 개발
- vv가 뭐냐? voiceover video 약자
- 음성 오디오 에셋 + 비디오 보여주는 타임라인 구현
- ios 14+ 포함, 모든 모던 브라우저에서 동작하는 썸네일 생성 로직 구현
구 타입캐스트 웹 프런트엔드 영상 편집 기능
Description
영상 편집을 브라우저에서 수행할 수 있도록 모듈? 개발 작업을 수행했습니다.
What did I do
- 프로젝트 초기 설계 및 개발 진행
- 기존 음성 편집 목적의 성우 스크립트 에디터에 영상 편집 기능 통합
- 자막, 영상 및 이미지 에셋, BGM, 다운로드 영상 미리보기 등 비즈니스 요구사항에 맞춰 기능 개발
Tech Stack
TypeScript, SceneJS, Vite, Vitest
타입캐스트 웹 프런트엔드 개선
Description
네오사피엔스 AI TTS 서비스인 “타입캐스트” 프런트엔드 개발, 유지보수, 그리고 개선 작업을 수행했습니다.
What did I do
- AI TTS 성우 캐스팅 페이지 렌더링 성능 개선 및 개선율 팀 내 공유
- 프로파일링을 통해 수 백 개의 성우 목록을 렌더링할 때 발생함을 확인
- 가상 스크롤을 이용, 페이지 첫 진입 시 12~14배 성능 개선 (1000~1100ms → 70~90ms, iPhone 13 모바일 사파리 15.5 버전 기준)
- 스크롤 시 리렌더링에 50~60ms(20fps)이 소요된다는 트레이드 오프를 설명한 후, 의견을 종합해 개선된 버전을 적용
- 멀티리포로 관리되던 내부 패키지와 애플리케이션을 하나의 모노리포로 마이그레이션
- 분량이 큰 작업이었기에 패키지 매니저 교체, 모노리포 마이그레이션, 배포 파이프라인 수정 세 단계로 나눠 진행 및 과정 팀 내 공유
- 총 8일에 걸쳐 작업을 수행했으며, 성공적으로 정착되어 개발자 생산성에 긍정적인 영향을 미침
- (블로그 아티클 링크도 있으면 좋을듯)
- Webpack 4 및 Node 14 기반 개발 환경을 Webpack 5 및 Node 16으로 마이그레이션
- Vue Composition API를 도입해 컴포넌트에 강하게 결합되어 있던 비즈니스 로직 분리 및 테스트 작성
Tech Stack
TypeScript, PNPM, Turborepo, Vue 2.7, Pinia, Vitest
채용 프로세스 개선
Description
채용 프로세스 중 과제 테스트 과정에 대한 개선을 진행했습니다.
What did I do
- (면접 진행하며 과테에 문제가 있다는 것을 알아챈 것 관련)
- 팀 구성원들이 생각하는 레벨별 채용 기준에 대한 의견 수립 및 해당 조건에 부합하는 새로운 과제 테스트 제안
- 채용에 참여할 수 있는 모든 인원이 동일한 지식 수준을 갖추도록 진행 흐름 명문화
- 지속적으로 개선
개인 프로젝트
text-vide
2022
Description
단어 일부분을 하이라이트해 가독성을 향상시키는 기법인 Bionic-Reading에 대한 JavaScript 구현체입니다. 매달 약 22k의 다운로드 숫자, 그리고 54개의 Dependents와 함께 안정적으로 기능을 제공중입니다.
새로운 GitHub 릴리즈 시 GitHub Actions를 이용해 CJS, ESM, 그리고 IIFE 세 가지 포맷의 파일들을 자동으로 NPM 배포하고 있으며, 접근성 향상을 위해 Online Sandbox 또한 제공하고 있습니다.
Tech Stack