김성현

• 토이프로젝트에서 시작한 회사를 DAU 1만, 월 매출 3억원 규모로 함께 성장시켜 인수되기까지의 과정을 함께했습니다.

제품 기능과 운영 개선

• "AI로 유저 설정 빠르게 만들기" 기능을 제안하고 구현: 유저 패턴과 커뮤니티 반응, 서비스 사용 경험을 종합해 진입 장벽 지점 특정
• 채팅 데이터 동기화 문제 해결: 분산되어 있던 채팅 조회, 스트리밍 처리, 캐시 갱신 로직을 통합하고 서버 데이터가 SSOT가 되도록 재설계
• 업데이트 공지와 CS 처리 절차 수립 및 서비스 내 채널로 이관: 외부 SNS에 의존하던 운영방식을 기능 구현과 함께 개편

제품 성능 개선

• 네트워크 전송량 50% 이상 절감: API 중복 호출 제거, 스트리밍 완료시 데이터 갱신 방식 개선
• 메인 페이지 Lighthouse 성능 점수 35점 → 70점: 컨테이너 너비를 JS로 측정한 뒤 요소를 렌더링하던 로직을 CSS 기반으로 전환, 로딩 스켈레톤 도입, 폰트 lazy loading 등의 최적화 적용
• 스트리밍 토큰마다 리렌더링되는 메시지 최소 20개 → 1개로 최적화: 목록 전체가 재생성되던 구조를 참조 분리해 갱신 중인 메시지만 리렌더링
• 채팅 내 검색 결과로 이동시 네트워크 요청 최대 50회 → 1회: 페이지를 순차 요청하던 방식을 서버 양방향 페이지네이션 도입으로 대체

개발 환경 개선

• MobX, zustand, SWR, TanStack Query가 혼재한 레거시 구조를 zustand와 TanStack Query 기반으로 통합하고 미사용 코드를 정리해 프로덕션 코드 약 4만 줄 순감소
• 서버와 클라이언트의 데이터 경계, 쿼리 키 관리, 스트리밍 처리 등 정책을 정의하고 문서화해 팀 컨벤션으로 정착
• 유저 작성 JSX 컴포넌트의 보안 문제 해결: AI 사전 검수와 iframe 격리를 제안해 적용, 이후 발생한 미디어 쿼리 문제를 CSS 컨테이너 쿼리로 대응

• i18n 구축 및 국가별 창작자 수익 정산 퍼널 전체 정책 분기를 담당자와 설계하고 구현
• 만화 매장의 고객 입장/퇴장 관리 시스템의 복잡한 요금 정책을 모듈화해 변경에 강한 구조로 재편
• 매장 팀원들과 소통하며 퇴장 처리 복구, 메모, 문의 응대용 매크로, 재고 갱신 자동화 등 현장에 실질적으로 필요한 기능을 추가

• 보험 용어 검수 등 팀의 반복 업무를 자동화하는 도구를 개발하고 팀에 공유해 수작업 시간 50% 이상 단축
• 디자인 요구사항에 맞춰 키보드 조작, 접근성(a11y), 타입을 고려한 TimePicker 등의 컴포넌트 제작

• Next.js로 블로그를 직접 구축하고 remark 플러그인 제작을 통한 목차 생성, 이미지 경로 변경 자동화 🔗 정리 글 링크
• 블로그에 AI 기반 자동 번역 시스템 구축, 영어 지원을 통해 글로벌 확장성 강화 🔗 정리 글 링크
• 빌드 실패 원인이 번들 사이즈임을 파악하고 설계 변경, 서드파티 코드 작성을 통해 번들 사이즈 70% 감축 🔗 정리 글 링크

• 강의 출석, 과제 제출 등을 처리하는 API 서버를 Go 기반에서 Nest.js, Prisma 기반으로 재작성
• 비대면 강의를 위한 출석 봇을 discord.js 라이브러리로 구현 후 서버와 함께 배포

• Prisma 하이라이팅 플러그인을 작성해 공식 서드파티로 등재 highlight.js PR #4252
• Yorkie JS SDK 모노레포의 ESLint 설정을 flat config로 마이그레이션 yorkie-js-sdk PR #1045
• lodash를 es-toolkit으로 교체해 Yorkie JS SDK 예제 번들 크기 98% 감축 yorkie-js-sdk PR #1101
• MDN 문서의 `@@unscopables` 관련 역사적 서술 오류 수정 mdn/content PR #34646
• MDN 문서의 `NaN` 관련 역사적 서술 오류 수정 mdn/content PR #35496
• JavaScriptCore 엔진 소스 주석의 오류 수정 WebKit PR #25696
• JavaScript의 역사에 관한 약 120쪽 분량의 논문 번역과 배포 🔗 배포 링크

• 글또 프론트엔드 반상회, '나의 방식으로 네트워킹 시작하기' 🔗 발표 자료 링크
• BBConf, 컴퓨터/네트워크/웹의 간략한 역사를 소개하고 오해를 바로잡는 발표 🔗 발표 자료 링크
• 블로그를 오랫동안 운영하는 동력을 얻고 좋은 글을 쓰기 위한 노하우에 대한 발표 🔗 발표 자료 링크
• 신촌 지역 대학생 약 100명을 대상으로 겨울방학 알고리즘 강의 진행 🔗 강의자료 링크

• JavaScript의 특수한 주석 형식에 관한 글, 네이버 FE News 2024년 2월 큐레이션 선정 🔗 큐레이션 링크
• 클로저의 역사에 딥다이브하여 튜링 기계부터 JavaScript까지 되짚어 올라오는 글, 글또 10기 3회차 큐레이션 선정 🔗 글 링크
• 타입 시스템의 가변성을 TypeScript로 설명한 글, 글또 9기 1회차 큐레이션 선정 🔗 글 링크