왓섭 – 돈을 관리하는 새로운 방법 

• Figma
• Amplitude
• MyData
• Openbank
• Lottie
• After Effect
• Photoshop
• Illustrator
• Protopie
• Sketch

• 회사 설립 시점부터 서비스 기획 및 디자인
• Hi-Fi 프로토타입을 통한 제휴 및 투자 미팅 지원
• Seed, Pre-A 투자 유치
• 스크래핑, 오픈뱅킹, 마이데이터와 같은 금융 데이터 활용
• 회원가입률 90%대, 연동률 60%대, 자연 유입 80%대의 높은 성과
• Lottie를 통한 애니메이션 제공
• Flow 구조 고안을 통한 플랫폼 최적화 된 구조 구축
• Amplitude를 통한 성과 추적

Whatssub Design System

• Figma
• Lottie
• After Effect
• Typescript
• React
• React-Native

• 설계부터 개발까지 단독 진행
• 피그마부터 타입스크립트 기반의 React, React-Native, Next.js 환경에서 이용 가능한 Lerna 모노레포 기반 라이브러리 구축
• React Native Reanimated 기반의 UI 스레드 애니메이션 최적화
• Recoil 기반의 전역 상태 제어 및 React Navigation과의 상호작용
• Lottie의 구조를 변형하여 자체 *.lottie.json 포멧 제작 및 리소스 오버라이드 추가

Whatssub Global 

• Figma
• Lottie
• Amplitude
• After Effect
• Photoshop
• Illustrator
• Hackle

• 해외 서비스 제공을 위한 서비스 기획 및 디자인 재설계
• Plaid를 통한 해외 20,000개 금융사 금융 데이터 활용
• 자체 구독 서비스 제공을 통한 매출 확보 개시
• Hackle을 통한 A/B 테스트 진행
• Amplitude를 통한 성과 추적 자동화

bang! – 해커톤 참여 

• Figma
• Typescript
• React-Native
• Plaid

• 블록체인을 활용한 결제 내역 기반의 리뷰 SNS 플랫폼 기획 및 디자인
• React Native Reanimated 기반의 UI 스레드 애니메이션 최적화
• OPL × SEI Web3 Hackathon 입상 (해외)

Whatssub Figma Plugin

• Figma
• Typescript
• Vite
• ESBuild
• React
• Amplitude
• Hackle

• 피그마 내에서 정기적인 유지보수 작업을 자동화 하기 위한 자체 플러그인 개발
• UI 환경은 Vite를 기반으로 하였으며, Plugin 환경은 ESBuild를 통해 번들링
• 화면 별 고유 ID 할당을 통한 성과 추적 자동화 및 안정성 부여

Whatssub Blog – 마크다운 파서 개발 

• Typescript
• Next.js
• React

• 신입 디자이너의 블로그 및 운영 기획, 디자인 과정 보조
• 콘텐츠를 위한 사진 촬영 보조
• 자체 상품 링크 등의 기능 지원을 위한 Markdown Parser 개발
• AST 라이브러리를 포크하여 신규 문법 지원 구문 추가 및 렌더 요소 디자인 및 개발

College Calendar

• Figma
• Lottie
• After Effect
• Typescript
• React-Native
• Supabase
• GCP
• Sentry
• Firebase
• Amplitude

• 서울과학기술대학교 출석 수업 확인을 위한 일정 관리 애플리케이션
• 기획부터 디자인, 애플리케이션 개발 및 서버, 데이터베이스 구축 및 운용까지 진행
• 서버리스 및 RDB 기반 서버, 데이터베이스 구축 및 함수 설계 최적화
• Google Cloud Platform, Supabase를 통한 이메일 기반 자체 인증 과정 구축
• Amplitude를 통한 성과 추적 및 Sentry를 통한 오류 로깅

Echoscript 

• Typescript
• Yarn
• Node
• Vite

• Yarn Script 실행 시 실행 스크립트 및 Depth를 로깅하는 Yarn 플러그인
• Yarn과 Node의 동작 원리에 대한 이해
• 오픈소스로 배포 및 각종 개인 프로젝트에서 활용

서울디자인고등학교 제 8회 졸업전시회 

• Final Cut Pro
• Motion

• 졸업전시회 준비 위원회로서 관련 그래픽 제작 및 전시회 준비
• 홍보 영상 제작 및 졸업전시 전시 배치, 전시관 장비 설치 등의 업무 수행

살아 움직이는 디자인 시스템, WDS – DESIGN OFF 

• WDS에 대해 컨퍼런스 발표
• 디자인 시스템의 초기 구축과 운용에 대해서 다룸

프라이드가 퀄리티를 만든다 – 왓섭 인터뷰 

• 왓섭 블로그 게시 및 채용 홍보를 위해 내부 인터뷰 진행
• 디자인 팀장으로서 인터뷰를 진행함

스케치, Semantic Color 적용기 – Medium 

• 스케치 Color Variable 도입 후, 이를 기반한 Semantic Color 설계에 대해 다룸
• Surfit 추천 게시글 선정