안녕하세요,
프론트엔드 개발자 이상조입니다.

LAIVE link

Multi-Step-Form 형태의 인공지능 작곡 및 편집 웹 서비스 LAIVE의 개발을 담당하고 있습니다. 목적조직으로 일하고 있으며, 기획부터 디자인까지 폭넓게 관여하며 더 나은 제품을 만들기 위해 노력하고 있습니다.

• Multi-Step-Form 구현을 위한 핵심 로직 개발
  • step이 변경되면 라우팅 없이 단일 페이지 내부의 DOM만 수정하는 custom hook 개발
• 공통 컴포넌트 개발
  • <BottomSheet /> <Modal /> 등의 컴파운드 패턴의 Overlay 컴포넌트 개발
  • audio instance를 전역으로 관리하는 zustand store 및 <Playbar /> 컴포넌트 개발
• ErrorBoundary 도입 Blog Post
  • 에러 처리가 별도로 되어있지 않고, react-query에 의존하여 전역으로 에러가 throw되지만 않게 구현해두었던 코드를 리팩토링
  • 선언적인 에러 처리와 관심사 분리를 통해 가독성과 유지보수성이 높은 코드베이스 구현
  • 에러 로깅을 위한 sentry와 hotjar 도입 및 ErrorBoundry와 통합
• Auth 관련 로직 개발
  • 회원가입 로그인 로그아웃 유저 정보 관리 interceptor를 사용한 토큰 갱신 및 재요청 등 인증/인가와 관련된 모든 기능 개발
  • storage 이벤트를 활용해 다중 탭이 로그인 상태를 공유하는 로직 개발
  • 비로그인 유저의 접근 제한을 위한 withAuthServerSideProps 서버 사이드 함수 개발
    • getServerSideProps의 redirect를 사용하여 자연스럽게 로그인 페이지로 리다이렉트 시켜 사용자 경험 개선
• 선언적인 애니메이션 사용
  • framer-motion 라이브러리 도입 및 파트 내 기술 전파
  • 애니메이션의 디자인 토큰화 주도

VIODIO link

AI 배경음악 구독 서비스 VIODIO의 유지보수와 UX 개선을 담당하고 있습니다.

• 무한 스크롤에 데이터 캐싱과 뒤로가기 스크롤 위치 저장을 구현하여 UX 개선
  • 기존 로직은 데이터를 캐싱하지 않아 페이지 재방문 시 처음부터 다시 스크롤하며 데이터를 불러와야 했음
  • useInfiniteQuery로 마이그레이션하며 데이터를 캐싱하여 서버 통신 횟수를 축소하고, 유저가 스켈레톤 UI를 보는 불필요한 시간을 단축
  • 페이지 이탈 시의 스크롤 위치를 로컬스토리지에 저장하고, 재방문 시 저장된 위치로 스크롤을 이동시켜 UX를 개선
• 상태 변경으로 인한 리렌더링 시 발생하는 FOUT(폰트 깜빡임) 버그를 수정하여 UX를 개선
  • 페이지 리로드가 아니라, 상태 변경 등으로 인한 리렌더링에도 FOUT가 발생하며 레이아웃이 틀어짐
  • 원인은 styled-components가 런타임에 동적으로 스타일을 적용하기 위해 리렌더링 될 때마다 새로운 <style />태그를 생성하면서 발생
  • 폰트를 설정하는 부분만 scss로 분리하여 FOUT 개선
  • 이를 통해 레이아웃이 깨지면서 사용자들이 잘못된 영역을 클릭하는 실수를 방지
• 브라우저 렌더링의 Paint 과정 이전에 로직을 실행하도록 수정하여 리렌더링 시 애니메이션이 반복 재생되는 현상을 개선

component-library

사내 디자인시스템의 신규 컴포넌트 개발 및 유지보수를 담당하고 있습니다.

Interaction Team

TDS(Toss Design System) 애니메이션 컴포넌트를 제작하는 NEO-TDS에 참여하여 신규 컴포넌트를 개발하고, Framer에서 사용할 수 있도록 Framer 컴포넌트를 개발했습니다.

• <Tooltip /> <FullTooltip /> <Highlight /> <CTA /> 등 각종 Web, Framer 컴포넌트 개발 및 유지보수

Design Platform Team

TDS(Toss Design System)을 비롯하여 생산성을 위해 사용하고 있는 각종 사내 라이브러리를 유지보수, 개발했습니다.

• TDS-mobile 컴포넌트 유지보수 및 신규 기능 개발
  • Native 개발자와 Web 개발자 간 동일한 인터페이스를 사용하도록 컴포넌트를 수정하여 의사소통 비용 축소
• 토스페이스(토스의 이모지 폰트)를 Framer에 적용, 사용자(디자이너) 경험 개선
  • 이전까지 Framer에서 토스페이스가 적용되지 않아 디자인과 실제 개발된 화면 간의 차이가 존재, 지속적인 개선 요청 인입
  • TDS 컴포넌트를 Framer에 렌더하는 레이어에 폰트를 추가하는 방식으로 사내에서 디자인된 모든 Framer에 토스페이스를 적용
• 사내 Chrome Extension의 신규 기능 개발 및 유지보수
  • 개발자가 디자인 핸드오프에서 NEO-TDS가 사용된 부분을 인지하지 못하는 경우 발생
  • 디자이너의 의도와 다른 형태로 개발되거나, 불필요한 의사소통을 방지하기 위해, Extension에서 버튼 클릭 한 번으로 핸드오프 내의 모든 TDS(NEO-TDS) 컴포넌트에 라벨을 달아주는 framer-tds-label 및 framer-animate-label 패키지 개발
  • 해당 패키지는 디자인에서 TDS 컴포넌트 사용량을 확인하기 위한 로깅 용도로 쓰임 확장
• 문의채널 담당자로서 슬랙을 통해 인입되는 TDS, Chrome Extension 관련 이슈 대응

Resource Center Guild

토스의 모든 리소스가 모이는 Resource Center를 유지보수, 개발했습니다.

• 신규 내부 제품인 AI센터를 리소스센터에서 사용할 수 있도록 신규 카테고리 개발
• 서버 상태 관리를 위한 react-query 도입
• 버그가 존재했던 무한 스크롤 레거시 로직을 useInfiniteQuery로 마이그레이션
• 길드 슬랙 채널을 통해 사용자(디자이너)의 의견을 수렴, 다양한 UX 개선 작업 진행

콘텐츠 파트

에듀테크 플랫폼 '인프런'의 개발/프로그래밍 카테고리 MD로 지식공유자 섭외 및 컨설팅, 강의 기획, 판매전략 수립, 내부 마케팅, 고객 응대 등 강의 탄생부터 판매까지의 전 과정을 담당했습니다.

• 개발·프로그래밍 매출 전년비 91.9% 증가 (22.06.20 기준)
• 메이커준x인프런 이력서 워크샵, 프론트엔드 네트워킹 데이 심야FE 기획 및 운영
• 2022 인프런 연말어워드 슈퍼루키 지식공유자 부문 수상자 전원 소싱 및 운영
• SQL을 학습하여 MD파트 매출 데이터 대시보드(QuickSight) 제작 및 고도화
• 21년도 비공식 사내 칭찬하기 슬랙봇 ‘🌮Taco’ 1등

라이프사업부

국내 1위 홈쇼핑이자 종합몰인 GS홈쇼핑(GSSHOP)에서 가공식품, 육아/교육, 가전 카테고리 MD로 상품 기획, 소싱, 협력사 소통, 마케팅, 방송 운영 등 상품이 판매되기까지의 전 과정을 담당했습니다.