PRIVIA 여행 서비스 Link↗

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

Next.js 14(app) tailwind TanStack Query i18next

기술적 도전을 통해 코드 품질을 개선했습니다.

• 상황에 따라 적절한 HTML Semantic 요소를 유연하게 사용할 수 있도록 다형성 컴포넌트 구현
  • @types/react 18.3.5 버전 이후로 다형성 컴포넌트에 forwardRef를 적용하면 타입 추론이 제대로 이루어지지 않는 문제를 발견
  • 타입스크립트의 Higher order type inference 기능을 활용한 forwardRef 타입 오버로딩으로 해결. 블로그 포스팅↗
• Next.js의 정적 최적화와 부분 프리렌더링을 활용할 수 있는 적응형 UI 구현
  • 동적 값(headers)으로 기기 유형을 판단하면 정적 최적화가 불가능, middleware에서 기기 유형을 판단하고 정적 값인 path로 관리하는 방식을 도입
  • path에 따른 조건부 렌더링을 통해 적응형 UI를 선언적으로 개발할 수 있는 RenderByDevice 컴포넌트 구현

현실의 제약을 기술로 해결했습니다.

• 기술 스택에 관계없이 복잡한 UI를 재사용할 수 있도록 웹 컴포넌트 도입
  • 여러 프론트엔드 팀의 물리적, 심리적 거리가 멀고, 기술 스택이 달라 UI 공유가 어려운 문제를 해결
  • 의사소통 비용을 고려해 최대한 간편하게 사용할 수 있는 인터페이스 설계
• 규정상 서버 간 통신만 가능하다는 제약 속에서 데이터 통신 방식을 설계
  • 서버 컴포넌트에서 프리페칭하는 방법과, route handlers를 프록시로 활용하여 클라이언트의 API 요청을 중계하는 방식으로 해결 블로그 포스팅↗

팀이 효율적으로 일할 수 있는 환경을 구축했습니다.

• 코드 품질 검사를 자동화하는 CI를 구축하여 코드베이스의 안정성 확보
  • 리뷰 과정에서 놓치는 오류가 배포 후에 발견되는 문제가 잦아, PR 생성 시 Lint, Test, TypeCheck를 병렬 실행
• 프로젝트 초기 기획-디자인 단계에서 디자인 시스템 구축을 주도
  • 페이지 디자인 확정 전에 발생하는 개발 공백 기간에 디자인 시스템 구축을 주도하여 이후 UI 개발 생산성을 크게 향상
  • 확정되지 않은 디자인에 유연하게 대응할 수 있도록 컴파운드 패턴으로 구현된 Radix UI(shadcn)를 사용

Kyte 서비스 Link↗

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

React emotion TanStack Query

빌드 속도를 개선하여 매달 프론트엔드 팀의 175시간을 절약했습니다.

• 메인 앱과 4개의 웹 컴포넌트들 병렬 빌드 중 메모리 부족으로 빌드가 실패하는 문제 발생
  • 순차적 빌드로 전환하여 해결했으나, 빌드 시간이 크게 증가하여 생산성 저하
  • CRA에서 Vite로의 마이그레이션을 통해 빌드 시간을 75% 단축(평균 10분 → 2분 30초)
  • TBD 환경에서 매일 인당 10회 이상 배포 진행, 이때 소모되는 빌드 시간을 줄임으로써 팀 전체의 월간 대기시간을 175시간 단축
  • 번들러에 대해 학습한 내용을 팀에 공유 블로그 포스팅↗

인사이트를 공유하여 팀 전체의 성장을 돕고 있습니다.

• '미친 사용성의 항공 예약 서비스'라는 아이디어로 CTA만 터치하다 보면 항공 예약이 완료되는 프로토타입↗을 구현하여 팀에 제안

LAIVE 서비스 Link↗

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

Next.js(page) tailwind TanStack Query

선언적인 코딩 스타일을 도입하여 동료의 코드를 쉽게 이해할 수 있도록 개선했습니다.

• ErrorBoundary와 Suspense를 팀에 전파, 비동기 상태 처리의 관심사를 분리하여 코드 품질을 개선 블로그 포스팅1↗, 블로그 포스팅2↗
• SwitchCase 컴포넌트를 도입하여 다중 조건부 렌더링의 가독성을 개선, Frontend Fundamentals↗ 논의에 참여

0to1 특성상 잦은 UI 변경에 대응하기 위해 유연한 컴포넌트를 설계했습니다.

• BottomSheet과 Modal 등 UI의 구조가 유동적인 컴포넌트는 컴파운드 패턴으로 설계하여 변칙적인 디자인에 유연하게 대응
• 목록 UI는 Render Props 패턴으로 결합도를 낮춰 기능의 추가 및 변경에도 쉽게 대응할 수 있도록 구현

데이터가 흐르는 조직을 만들었습니다.

• Mixpanel과 Hotjar를 도입하여 사용자 행동을 분석하고 제품을 개선
  • 이탈률이 높은 퍼널을 발견하고 사용자 행동 패턴을 분석하여 개선 가설을 수립하는 프로세스를 팀에 전파
  • PM, 디자이너에게 분석 도구 활용법을 공유하여 메이커 조직의 데이터 기반 의사결정 문화 정착

VIODIO 서비스 Link↗

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

React styled-components TanStack Query

유저의 불편함을 주도적으로 찾고, 개선했습니다.

• 음악 목록의 무한 스크롤에 TanStack Query로 캐싱 적용, 불필요한 서버 통신과 스켈레톤 UI 노출 감소
  • 세션스토리지에 스크롤 위치를 저장하여 상세 화면에서 목록으로 돌아올 때 이전 위치부터 탐색을 이어갈 수 있도록 개선
• 사용 빈도가 높은 백오피스 제품에서 레이아웃 시프트로 인해 잘못된 곳을 클릭하는 오류가 팀의 생산성을 저해
  • styled-components의 설정 오류로 FOUT가 빈번하게 발생하고 있어, 폰트 로드만 scss로 분리하는 방식으로 해결

팀 전체의 성장을 위한 환경을 만들었습니다.

• 프론트엔드 파트에 월간 회고와 이달의 PR 세션 문화 도입
  • 매달 KPT 회고를 통해 좋은 사례는 파트 전체에 적용하고, 개선점을 업무 프로세스에 반영
  • 이달의 PR 세션으로 서로의 코드베이스에 대한 이해도를 높이고 기술 공유의 기회 마련

Design Platform Team

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

토스팀 전체가 사용하는 컴포넌트를 만들고, 유지보수 했습니다.

• Tooltip Highlight CTA 등 각종 Web, Framer 컴포넌트 개발 및 유지보수
• Native 개발자와 Web 개발자 간 동일한 인터페이스를 사용하도록 컴포넌트를 수정하여 의사소통 비용 감소

생산성을 저해하는 문제를 찾고, 해결했습니다.

• Framer에 토스페이스(토스 이모지 폰트)가 적용되지 않아 디자인과 실제 개발된 화면 간의 차이가 존재, 디자이너로부터 지속적인 개선 요청 인입
  • 디자인 시스템 컴포넌트를 Framer에 렌더하는 레이어에 폰트를 추가하는 방식으로 사내에서 디자인된 모든 시안에 토스페이스를 적용. 디자이너 경험 개선
• 개발자가 디자인 핸드오프에서 NEO-TDS(애니메이션 컴포넌트 디자인 시스템)가 사용된 부분을 인지하지 못하는 문제 발생
  • 디자이너의 의도와 다른 형태로 개발되거나, 불필요한 의사소통을 방지하기 위해, Chrome Extension 버튼 클릭 한 번으로 핸드오프 내의 모든 디자인 시스템 컴포넌트에 라벨을 달아주는 패키지 개발
  • 해당 패키지는 디자인 시스템 컴포넌트 사용량을 확인하기 위한 로깅 용도로 쓰임 확장
• 문의 채널 담당자로서 슬랙을 통해 인입되는 TDS, Chrome Extension 관련 이슈 대응
• 리소스 센터 길드 슬랙 채널을 통해 사용자(디자이너)의 의견을 수렴, 버튼 클릭 영역 조정부터 Lottie 썸네일 선택 기능 구현 등 다양한 UX 개선 작업 진행

콘텐츠 파트

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

라이프사업부

⚠️ 비개발 직군 경력 ⚠️
GS홈쇼핑(GSSHOP)에서 가공식품, 육아/교육, 가전 카테고리 MD로 상품 기획, 소싱, 협력사 소통, 마케팅, 방송 운영 등 상품이 판매되기까지의 전 과정을 담당했습니다.