• VPMS – 숙박업의 미래

  Product Designer @vendit

  • Figma
  • Lottie
  • Amplitude

  • 다양한 고객층이 이용할 수 있는 호텔 PMS 기획
  • 모텔 사업자에게 제공되던 VCLOUD의 확장 버전인 VPMS 리뉴얼 디자인 및 기획
  • 호텔 자산 관리 시스템 체계 설계 및 정책 작성
  • 벤디트 브랜드 자산 체계화 및 컬러 스키마, 색약 대응이 가능한 디자인 시스템 구축
  • 여러 기능군을 필요에 따라 교차 활용할 수 있도록 하는 함수형 플로우 설계
  • Amplitude 기반 성과 추적을 위한 자체 Taxonomy 관리 및 플러그인 스니펫 개발

  2024년 11월 ~

  1년 7개월

  

• VKIOSK – 누구나 사용 가능한 첫 키오스크

  Product Designer @vendit

  • Figma
  • Lottie
  • Amplitude

  • 폭넓은 연령층 이용 및 장애 접근성 대응이 가능한 체크인 키오스크 기획
  • 여러 폼 팩터에서 사용할 수 있도록 하는 인터페이스 디자인
  • 키오스크 소프트웨어 리뉴얼 기획 및 디자인
  • 기존 판매 키오스크 폼 팩터와 하드웨어 대응 고려
  • 한국어, 중국어 간체와 번체, 영어, 일본어 및 저시력자 접근성 대응
  • 특정 하드웨어 구성이나 장애에 따라 교차 활용할 수 있도록 하는 함수형 플로우 설계
  • Amplitude 기반 성과 추적을 위한 자체 Taxonomy 관리

  2025년 5월 ~ 2025년 8월

  3개월

  

• Vendit Design System

  Product Designer @vendit

  • Figma
  • After Effect
  • TypeScript
  • React
  • Tailwind

  • 브랜드 리소스를 일원화, 누적된 요구사항을 반영하여 리뉴얼
  • Solid, Adaptive 등 약 8,000여 개 규모의 컬러 토큰 시스템
  • 웹, 대형 및 중형 터치 환경, 모바일 환경을 함께 지원
  • 라이트/다크 모드, 색약 대응, 키오스크 테마 컬러 변경 등 대응
  • 다국어 키오스크, 저시인성 모니터, 인쇄 환경에서도 일관성을 유지

  2024년 11월 ~

  1년 7개월

  

• Vendit Icon Glyph

  Product Designer @vendit

  • Figma
  • TypeScript

  • 그래픽 아이콘 약 500여 개를 신규 디자인
  • 바리에이션 아이콘 생성을 자동화, 약 1만여 개 규모의 아이콘 시스템 구축
  • 피그마에서 npm 패키지로 배포까지 반자동 파이프라인 구축
  • Tree Shaking 지원을 통한 퍼포먼스 최적화

  2024년 11월 ~

  1년 7개월

  

• Vendit Landing

  Product Designer & FE Engineer @vendit

  • Figma
  • Lighthouse
  • SEO
  • Amplitude
  • TypeScript
  • WordPress
  • PHP

  • 영업 및 마케팅의 유연한 대응을 위한 워드프레스 기반 홈페이지 제작
  • TypeScript, PHP 기반 컴패니언 런타임 제작 및 성과 추적
  • 영업 및 마케팅팀의 제품 실험을 위한 인터페이스 디자인 고도화와 추가 기능 제공
  • Lighthouse 기반 SEO 최적화 진행
  • Amplitude 기반 성과 추적 체계 구축 및 대시보드 기반 성과 리포트 제공
  • 이상 사용자 리포트를 통한 이탈 사용자 추적 및 지속적 개선

  2025년 8월 ~ 2025년 9월

  1개월

  

• Vendit IR

  Product Designer @vendit

  • Figma

  • 시리즈 A 투자 유치를 위한 IR 프레젠테이션 제작
  • 경영진 요청으로 향후 수정 용이를 위해 피그마로 제작

  2025년 3월

  1주

  

• Vendit Product Brochure

  Product Designer @vendit

  • Figma
  • InDesign
  • Illustrator

  • 자사 제공 제품 안내를 위한 브로슈어 제작 및 발주
  • 약 3,000부 발주 및 배부

  2025년 6월 ~ 2025년 8월

  2개월

  

• Hotel At Gangnam 사이니지

  Product Designer @vendit

  • Figma
  • Illustrator

  • 자사 운영 캡슐 호텔 사이니지 제작
  • 약 40개 아이콘 및 사이니지 콘텐츠, 인쇄물 등 제작
  • 호텔 내부에서 사용되는 다양한 콘텐츠 디자인

  2026년 1월

  2주

  

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

  Product Designer @whatssub

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

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

  2019년 7월 ~ 2024년 10월

  5년 3개월

  

• Whatssub Design System

  Product Designer & FE Engineer @whatssub

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

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

  2021년 2월 ~ 2024년 10월

  3년 8개월

  

• Whatssub Global

  Product Designer @whatssub

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

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

  2023년 1월 ~ 2024년 6월

  1년 5개월

  

• bang! – 해커톤 참여

  Product Designer & FE Engineer @whatssub

  • Figma
  • TypeScript
  • React-Native
  • Plaid

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

  2023년 9월

  

• Whatssub Figma Plugin

  FE Engineer @whatssub

  • Figma
  • TypeScript
  • Vite
  • ESBuild
  • React
  • Amplitude
  • Hackle

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

  2024년 1월 ~ 2024년 10월

  9개월

  

• Whatssub Blog – 마크다운 파서 개발

  FE Engineer @whatssub

  • TypeScript
  • Next.js
  • React

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

  2022년 10월 ~ 2024년 10월

  2년

  

사이드 프로젝트

• College Calendar

  Product Designer & Full-Stack Engineer

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

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

  2024년 7월 ~ 2024년 8월

  1개월

  

• Echoscript

  FE Engineer

  • TypeScript
  • Yarn
  • Node
  • Vite

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

  2023년 9월

  

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

  Graphic Designer

  • Final Cut Pro
  • Motion

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

  2019년 8월

  

활동

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

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

  2023년 5월

  

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

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

  2022년 7월

  

• 스케치, Semantic Color 적용기 – Medium

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

  2020년 10월