미리보기

토스 내 100개 이상의 서비스에서 사용하는 디자인 시스템 TDS를 유지보수하고 있습니다. 주로 React Native, React 환경에서 동작하는 인터렉션 라이브러리를 다루고 있습니다.

• 아티클

크리에이터를 위한 커스터마이즈 솔루션을 제공하는 마플코퍼레이션에서 노코드 NFT 프로젝트 발행 툴인 OMNUUM, 크리에이터 이코노미를 위한 커뮤니티 툴 CIETY를 개발했습니다.
두 서비스 모두 시작 단계에서 합류해 기획/디자인 레벨까지 참여하여 유저에게 더 나은 가치를 전달하는 데 폭넓게 기여하였습니다.
개발 아티클 공유 문화 조성, 코드 리뷰 의무화, 배포 알림 등의 슬랙 봇 제작, 팀 온보딩 가이드 문서화 등의 활동으로 동료와 함께 성장하는 환경, 병목 없는 협업 환경을 만들기 위해 노력하였습니다.

Description

• 토스 서비스 전반적으로 사용되는 플랫폼 공통 인터렉션 라이브러리 Rally와 다양한 인터렉션 컴포넌트를 React Native와 React 환경에서 구현 및 유지보수 (관련 아티클)

• 디자인 시스템 컴포넌트에 인터렉션 스펙 주입

• 인터렉션 스펙을 코드로 제너레이팅하는 스크립트 작성

• 라이브러리 문서화 작업 및 검수

Description

AI 기술과 인터렉션을 접목한 디자인 컨퍼런스 페이지 (Website)

Experience (Article)

• 인터렉션 흐름을 구조화해 재사용 가능한 구성 요소 정의

• Mobile Safari, Samsung Internet 등 다양한 브라우저 대응

• 에셋 로드 최적화 작업 및 렌더링 속도 저하 개선

Description

2024년 세계 장애인의 날을 맞아 별자리를 테마로 스크린리더 경험을 체험해보는 이벤트 (링크)

Experience

• 전반적인 플로우 및 사운드 인터렉션 구현

• 청각장애인/시각장애인 접근성 대응

Description

블록체인 자산 보유 여부 체크, 라이브 스트리밍, DM 등의 기능을 제공하는 크리에이터 팬 커뮤니티 툴 (Website)

Experience

• PC, 모바일 웹뷰 플랫폼에서 사용 가능한 DM, 검색, 유저 온보딩, 어드민 세팅, 라이브 스트리밍 등의 전반적인 커뮤니티 기능 개발

• 다중 웹뷰 간 데이터 공유 로직 개선 작업으로 개발 프로세스 단순화에 기여

• 의존성 캐싱을 통해 CI 시간 70% 단축

• 대규모 공용 모듈 리팩토링으로 기술 부채 해소

Tech Stack

Web: React TypeScript Redux Tailwind CSS Storybook
App: React Native TypeScript Recoil Styled Component

Description

NFT 프로젝트 발행 및 구매 웹사이트 빌딩 등의 기능을 제공하는 NFT 종합 솔루션 툴 (Website)

Experience

• Canvas API 기반의 대용량 랜덤 이미지 생성 및 블록체인 업로드기능 개발

• Hexagonal Architecture 기반 리팩토링

• 백오피스 이메일 UI 제너레이터 개발

Tech Stack

React Remix TypeScript RxJS Tailwind CSS

Description

기술 학습 및 아카이빙 용도의 개인 블로그 (GitHub, Website)

Experience

• 기술 스택 변경 및 도메인 이전 작업(Jekyll -> Gatsby -> Next.js)
• Three.js 기반의 3D 인터렉티브 키 비주얼 제작

Tech Stack

React Next.js TypeScript Three.js Tailwind CSS