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

PRIVIA 여행 서비스 link

현대카드와 제휴를 맺은 종합 온라인 여행 서비스입니다. 24년 12월 완료 예정인 서비스 전면 리뉴얼 프로젝트에서 항공 서비스 파트의 개발에 참여하고 있습니다. 기술 스택 선택부터 디자인 시스템 구축, 프론트엔드 개발까지 전반적인 영역을 담당 중입니다.

Next.js 14(app) tailwind react-query

• 다형성 컴포넌트 구현
  • Radix UI(shadcn)로 구축한 디자인 시스템에서 복잡한 디자인 요구사항으로 인한 Render Delegation 방식의 한계 인식
  • 다형성 컴포넌트를 구현하여 상황에 따라 적절한 HTML Semantic 요소를 유연하게 사용할 수 있도록 개선
  • 다형성 컴포넌트를 wrapping하여 또 다른 다형성 컴포넌트를 구현할 경우, 타입 추론이 제대로 이루어지지 않는 문제 발생
    • 타입스크립트의 Higher order type inference from generic functions 기능을 활용하기 위해 forwardRef의 타입을 오버로딩하여 해결
• 서버 간 통신(Server-to-Server)만 가능하다는 제약을 해결하기 위한 데이터 페칭 패턴 구축
  • 사내 규정상 서버 간 통신만 가능하며, 통신에 필요한 모듈이 server-only로 정의되어 클라이언트에서 호출할 수 없는 문제
  • 서버 컴포넌트에서 react-query의 prefetchQuery로 데이터를 미리 불러온 후, 클라이언트 컴포넌트에서 프리페칭한 데이터를 사용하여 해결
  • 프리페칭에 실패할 경우 route handler를 통해 클라이언트-서버-서버 통신으로 대체
  • route handler를 도입하면서 학습한 내용을 팀 내에 공유 블로그 포스팅

Kyte 서비스 link

전 세계 항공권, 호텔, 투어&티켓 등 여행에 필요한 다양한 상품을 판매하는 여행 서비스 Kyte의 유지보수를 담당했습니다. 신규 기능 개발이 중단된 상황에서 기술 부채 해소에 집중했습니다.

React emotion react-query

• CRA → Vite 마이그레이션
  • 기존에는 메인 앱뿐만 아니라 4개의 웹 컴포넌트까지 하나의 job에서 병렬로 빌드하여 과도하게 메모리를 사용 (활성 상태 보기의 node 메모리 사용량 약 13GB)
  • 현재 인프라팀의 지원이 불가하여 각 빌드가 별도의 job에서 병렬로 진행되도록 개선이 어려운 상황
  • 순차적 빌드로 변경하여 메모리 사용량을 4GB 미만으로 줄였으나, 전체 빌드 과정이 평균 10분가량 소요되는 문제 발생
  • rollup을 활용한 빌드 속도 개선, deprecated 예정인 CRA의 기술 부채 해소를 목적으로 Vite 마이그레이션
  • 마이그레이션 과정에서 유지보수가 중단된 레거시 CJS 패키지들을 최신 ESM 패키지로 교체하고, 결합도를 낮추기 위해 추상화 레이어 적용
  • 여전히 순차적 빌드를 유지하지만 빌드 시간 75% 감소 평균 10분 → 2분 30초
  • 번들러를 교체하며 학습한 내용을 팀 내에 공유 블로그 포스팅
  • 추후 인프라팀의 지원을 통해 각 빌드가 별도의 job에서 병렬로 진행되도록 개선 예정

LAIVE 서비스 link

Multi-Step-Form 형태의 인공지능 작곡 및 편집 웹 서비스 LAIVE의 Zero to One 개발을 담당했습니다. 기획부터 디자인까지 폭넓게 관여하며 더 나은 제품을 만들기 위해 노력했습니다.

Next.js(page) tailwind react-query

• Multi-Step-Form 구현을 위한 퍼널 관리 로직 구현
  • 선택된 step에 해당하는 요소를 반환하여 단일 페이지에서 라우팅 없이 퍼널을 이동하는 custom hook 개발
• 공통 컴포넌트 개발
  • BottomSheet Modal 등 UI의 구조가 유동적인 컴포넌트는 컴파운드 패턴으로 설계하여 재사용성을 높임
  • render props 패턴으로 List와 Item간의 결합도를 느슨하게 설계, 유지보수가 용이하도록 개발
• ErrorBoundary 기술 전파 및 적용 블로그 포스팅
  • 별도의 에러 처리가 없고, react-query에 의존하여 에러가 전역까지 전파되지만 않게 구현해 두었던 레거시 코드를 리팩토링
  • 선언적인 에러 처리와 관심사 분리를 통해 가독성과 유지보수성이 높은 코드베이스 구현
  • 모니터링을 위해 sentry 도입 및 에러 로깅을 ErrorBoundry와 통합
• Suspense 기술 전파 및 적용 블로그 포스팅
  • Data fetching 로딩 처리를 Suspense에 위임하여 컴포넌트가 성공한 경우만 고려하도록 작성

VIODIO 서비스 link

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

React styled-components react-query

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

Interaction Team

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

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

Design Platform Team

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

• TDS-mobile 컴포넌트 유지보수 및 신규 기능 개발
  • Native 개발자와 Web 개발자 간 동일한 인터페이스를 사용하도록 컴포넌트를 수정하여 의사소통 비용 축소
• Framer에서 토스페이스(토스 이모지 폰트)를 확인할 수 있도록 개선
  • 이전까지 Framer에 토스페이스가 적용되지 않아 디자인과 실제 개발된 화면 간의 차이가 존재, 사용자(디자이너)로부터 지속적인 개선 요청 인입
  • TDS 컴포넌트를 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로 상품 기획, 소싱, 협력사 소통, 마케팅, 방송 운영 등 상품이 판매되기까지의 전 과정을 담당했습니다.