문제와 상황을 깊이 이해하고 실용적인 솔루션을 찾고자 노력합니다.

Work Experience

네오사피엔스

AI TTS SaaS

웹 프런트엔드

08 - 2024.12

TTS 에디터 리뉴얼 프로토타이핑

https://www.notion.so/neosapience/Sync-14a1a45e1d258058b813e2ae6a784d36?pvs=4#14a1a45e1d25806b8ca8f522b3576fee

미국 캘리포니아 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+ 포함, 모든 모던 브라우저에서 동작하는 썸네일 생성 로직 구현
  - 진행하며 iOS Safari에서 이상하게 동작하는 비디오 썸네일 생성 로직 관련 블로그 글도 씀
  - https://shj.rip/article/how-to-generate-video-thumbnails-correctly-in-ios-safari.html

구 타입캐스트 웹 프런트엔드 영상 편집 기능

Description

영상 편집을 브라우저에서 수행할 수 있도록 모듈? 개발 작업을 수행했습니다.

What did I do

프로젝트 초기 설계 및 개발 진행
기존 음성 편집 목적의 성우 스크립트 에디터에 영상 편집 기능 통합
자막, 영상 및 이미지 에셋, BGM, 다운로드 영상 미리보기 등 비즈니스 요구사항에 맞춰 기능 개발

Tech Stack

TypeScript, SceneJS, Vite, Vitest

개인 프로젝트

text-vide

2022

Description

단어 일부분을 하이라이트해 가독성을 향상시키는 기법인 Bionic-Reading에 대한 JavaScript 구현체입니다. 매달 약 22k의 다운로드 숫자, 그리고 54개의 Dependents와 함께 안정적으로 기능을 제공중입니다.

새로운 GitHub 릴리즈 시 GitHub Actions를 이용해 CJS, ESM, 그리고 IIFE 세 가지 포맷의 파일들을 자동으로 NPM 배포하고 있으며, 접근성 향상을 위해 Online Sandbox 또한 제공하고 있습니다.