이태윤
Product Designer@vendit2019년 6월 ~7년 1개월차산업기능요원 진행 중
- Figma
- Lottie
- Protopie
- After Effect
- Photoshop
- Illustrator
- Sketch
- Framer
- Final Cut Pro
- Motion
- TypeScript
- React Native
- React
- Tailwind
- Styled-Components
- StyleX
- Yarn
- Pnpm
- Node
- GCP
- Next.js
- Vite
- ESBuild
- SEO
- Lighthouse
- Supabase
- Sentry
- MyData
- Openbank
- Plaid
- Wordpress
- Amplitude
- Hackle
경력
주식회사 왓섭
Lead Product Designer
FE Engineer(RN)2020년 3월 ~ 2024년 10월4년 8개월Product Designer (계약)2019년 6월 ~ 2020년 2월9개월
학력
시각디자인과2017년 ~ 2020년서울디자인고등학교
과학중점반2017년용산고등학교
수상 내역
제 2회 핀테크 아이디어 공모전 금융위원장상, 대상
금융위원회2019년 10월OPL × SEI Web3 Hackathon 입상 (해외)
onepiece labs2023년 9월Protopiethon 입상
스튜디오 XID (프로토파이)2019년 7월
자격증
한국산업인력공단2023년 9월정보처리기능사
한국산업인력공단2019년 7월컴퓨터그래픽스운용기능사
서울특별시경찰청2021년 8월자동차운전면허 (1종 보통)
프로젝트
VPMS – 숙박업의 미래
Product Designer @vendit- 다양한 고객층이 이용할 수 있는 호텔 PMS 기획
- 모텔 사업자에게 제공되던 VCLOUD의 확장 버전인 VPMS 리뉴얼 디자인 및 기획
- 호텔 자산 관리 시스템 체계 설계 및 정책 작성
- 벤디트 브랜드 자산 체계화 및 컬러 스키마, 색약 대응이 가능한 디자인 시스템 구축
- 여러 기능군을 필요에 따라 교차 활용할 수 있도록 하는 함수형 플로우 설계
- Amplitude 기반 성과 추적을 위한 자체 Taxonomy 관리 및 플러그인 스니펫 개발

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

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

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

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

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

Vendit Product Brochure
Product Designer @vendit- 자사 제공 제품 안내를 위한 브로슈어 제작 및 발주
- 약 3,000부 발주 및 배부

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

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

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

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

bang! – 해커톤 참여
Product Designer & FE Engineer @whatssub- 블록체인을 활용한 결제 내역 기반의 리뷰 SNS 플랫폼 기획 및 디자인
- React Native Reanimated 기반의 UI 스레드 애니메이션 최적화
- OPL × SEI Web3 Hackathon 입상 (해외)

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

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

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

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

서울디자인고등학교 제 8회 졸업전시회
Graphic Designer- 졸업전시회 준비 위원회로서 관련 그래픽 제작 및 전시회 준비
- 홍보 영상 제작 및 졸업전시 전시 배치, 전시관 장비 설치 등의 업무 수행

활동


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