펫 보호자를 위한 Owner 웹/앱, 수의사 웹의 신규 기능 개발, QA 대응

Mixpanel, Microsoft Clarity를 활용하여 유저의 행동 패턴 수집 후 A/B Test, 퍼널 개선 과정에 참여

메인 기술 스택: Next.js, React, React Native, TypeScript

기업 랜딩페이지를 주도적으로 기획, 디자인, 개발

로보어드바이저 자산관리 앱 기획, 개발 참여

메인 기술 스택: Gatsby.js, React Native, TypeScript

라이브커머스 웹 서비스 기획, 개발 참여

사내 디자인 시스템 개발 및 npm 배포 경험

메인 기술 스택: Next.js, TypeScript

새로운 비즈니스 모델 발굴을 위한 MVP 페이지 개발

지역별 상담 가능한 재미 한인 수의사 목록 조회 기능 개발

로그인, 상담 기능, 타인들의 최근 질문 조회 등 초기 기능 개발

기존 백엔드, S3에 의존되어 있던 사이트맵 관리 로직들의 90% 이상을 클라이언트로 이관

유저에 의해 동적으로 생성되는 페이지들의 경우 백엔드에 별도의 사이트맵 API를 요청하여 Sitemap Index를 구성하는 방식으로 대응

특정 페이지들에 업데이트가 발생할 때마다 구글 크롤러 봇이 각 페이지들의 최신화된 lastmod를 감지하고 재크롤링할 수 있도록 Vercel KV, Cron Jobs를 활용하여 lastmod 업데이트 스케줄러 등록

기존 Hubspot 외부 도메인으로 인계되던 블로그를 Notion API를 도입하며 Owner 웹 내부로 편입

Notion API, Next.js의 API Routes를 활용하여 BFF 구성 후 블로그 메인 페이지 구현

react-notion-x 라이브러리를 활용하여 블로그 상세 페이지 구현

노션에서 블로그 아티클 작성 시 development, production 배포 여부를 핸들링할 수 있는 프로퍼티를 제공하여 아티클 작성자가 최종적으로 production 배포 여부를 결정할 수 있도록 개발

Privacy Policy, Terms of Service 등 클라이언트 내에 하드코딩되어 있던 페이지들을 개발자의 도움 없이 내용 수정이 가능하도록 Notion API 연동

라우터 구조, 프로젝트 폴더 구조, 기본 커스텀 훅 구성, 배포 라인 연동 등 초기 세팅

상세 페이지 대체용으로 사용되는 Side Sheet 외 다수의 공통 컴포넌트 개발

PWA를 적용하여 브라우저 네이티브 푸시알람 제공

Inbox 조회 기능, 로그인 페이지 퍼블리싱 및 기능 구현

반응형 UI 퍼블리싱

기존 상담 프로세스에서 사용되던 결제 관련 비즈니스 로직을 멤버십 페이지에서 재사용할 수 있도록 커스텀 훅으로 재구성

현재 상담 서비스가 무료화됨에 따라 멤버십 페이지가 제거됨 (백업본 링크)

반응형 UI 퍼블리싱

Query string을 이용하여 펫 종류별 & 증상별 필터 기능, 페이지네이션 구현

질문 검색 페이지에서 동일한 UI를 재사용할 수 있도록 페이지 구성 요소들을 공통 컴포넌트화

닥터테일의 메인 서비스인 ‘Ask a vet’ 상담 프로세스 개편

기존 일관된 프로세스 → 유저의 질문 답안 선택에 따라 다른 페이지로 이동되도록 분기처리

상담 프로세스 내 재사용되는 컴포넌트들을 공통 컴포넌트로 구성

Jotai를 활용한 상태관리로, 유저가 상담 진행 중 이탈 후 되돌아왔을 때도 이전에 진행하던 상담을 불러올 수 있도록 처리

framer-motion을 활용하여 페이지 전환 애니메이션 처리 (현재는 Clarity 관련 이슈로 제거됨)

결제 페이지 UI/UX 개선 (페이지 전체를 리뉴얼된 디자인으로 퍼블리싱)

가격, free trial 기한을 달리 설정하여 A/B 테스트 진행 (Mixpanel 활용)

기존 단건 결제 비즈니스 로직과 구독 비즈니스 로직들을 별도의 hook으로 분리하여 유지보수성 개선

빠른 기능 구현을 위해 결제 및 구독 관리 페이지는 stripe의 built in page 사용

"펫에 관한 질문이라면 무엇이든 물어보세요"를 슬로건으로 걸고, ChatGPT API를 활용한 웹 MVP 페이지 개발

Framer-motion 라이브러리, Lottie를 활용하여 답변 전 로딩 애니메이션 처리

React Query를 이용한 전역 에러 핸들링

비회원 JWT가 만료되는 시점에 질문 API 호출 시 에러 UI와 토스트 메세지가 출력되는 이슈를 발견.
유저가 JWT 만료 시점에 질문 → 내부적으로 403 에러가 발생하지만 유저에게는 Loading UI를 노출 → (유저가 제출했던 질문 데이터를 잠시 Pending → 내부적으로 새로운 JWT 발급 완료 → 새로운 JWT를 Header에 실어 질문 재요청) → 요청 Success 순으로 이슈 해결 (axios interceptor 활용)

Mixpanel, Hotjar 등 유저 트래킹 툴을 이용하여 유저 행동 패턴 분석, Next Step 실행

해당 서비스로 마땅한 비즈니스 모델을 찾지 못하여 현재는 제거됨

메인페이지 전체 UI 퍼블리싱

페이지 전역에서 공통적으로 재사용되는 Header, Footer, SideBar 등 컴포넌트 재구성

Swiper 라이브러리를 이용한 Carousel, keyframes를 이용한 Infinite Auto Carousel 등 구현, Intersection Observer API를 이용하여 유저의 Viewport 내에 Infinite Auto Carousel이 존재하지 않을 시 애니메이션을 실행시키지 않도록 하여 브라우저의 불필요한 리소스 낭비 방지

디자인팀과 Figma를 통해 협업하며 공통 컴포넌트 재구성, 유지보수 진행 - Button, Checkbox, Radio, Label, Dialog, Toast, TextField, SelectBox 등

복잡성이 높거나 다양한 형태로 변경되어 사용될 수 있는 컴포넌트들에 한하여 Compound Pattern 적용

React Portal을 사용하여 Toast, Dialog 컴포넌트 구성

타 프로젝트에서 실험적으로 사용했었던 Tailwind CSS의 장점들을 느끼고 팀원들 간 합의 후 도입

코드 가독성 및 추후 유지보수성을 고려하여 class-variance-authority 라이브러리 도입

기존 구조

개선 구조

사이트 내 URL Hierarchy 수정

Lighthouse를 참고하여 Meta tag 정리

페이지 별 Canonical tag 삽입으로 중복 페이지 색인 방지

질문 페이지의 유저 평가(모달을 통해 질문 페이지가 도움이 되었는지 평가)에 따라, 퀄리티가 낮다고 판단되는 페이지들을 걸러내어 크롤링 및 색인처리 되지 않도록 Meta tag 설정

Organic 유저 획득 시 핵심으로 작용하는 메인 페이지, 질문 상세 페이지의 Light House SEO 점수를 기존 70점대 → 100점으로 향상(크롬 시크릿 모드 기준)

클라이언트에서 매 배포 시마다 이루어지던 사이트맵 생성을 백엔드에서 처리하도록 협의 → 백엔드에서는 매일 정해진 시간마다 전체 페이지들의 사이트맵을 생성 → S3에 사이트맵 업로드 → Google Search Console에 사이트맵을 다시 색인하도록 요청 자동화 → 클라이언트에서는 구글 크롤러 봇이 S3에 저장된 사이트맵에 접근 가능하도록 Next.js의 API Routes를 활용하여 사이트맵 렌더링

개발 초기 빠른 UI 개발을 위해 MSW를 활용하여 API Mocking

로그인 기능

채널 별 질문 리스트 조회 (페이지네이션) 기능

질문 카드에서 해당 유저의 이전 질문 조회 기능(모달)

질문 상세 페이지 조회 기능

답변 등록 기능

질문 검색 기능(유저 ID, 질문 ID로 검색)

PWA 적용

Firebase를 이용한 알람 기능

Jotai, React Portal을 활용하여 모달, 토스트 메세지 관리포인트 중앙화

React ErrorBoundary, Sentry를 이용한 에러 처리 세분화

Redux 사용 시 Server State와 Client State가 혼합 관리되어 복잡성이 증대됨 → 스터디 및 팀원 간 합의 후 React Query 도입

기존 Redux(RTK) Thunk를 통해 이루어지던 API 요청 라인들을 React Query로 일괄 대체하여 전역 상태값 약 60-70% 감소

페이지의 느린 로딩 속도는 유저의 이탈률을 높일 수 있다는 문제를 제기하고 작업 진행

기존 getServerSideProps가 적용되고 있던 페이지들에 대하여 getStaticProps + getStaticPaths를 사용하는 방법으로 변경 (컨텐츠 리스트에서 상세 페이지 Prefetch)

페이지 로딩 속도 약 72% 개선 (크롬 시크릿모드 기준 - 변경 전, 후 TTFB 10회씩 측정하여 평균값 도출)

에러 트래킹을 위해 Sentry 도입 중 기존 Amplify Console과의 Webpack 관련 버전 호환 이슈가 발견되어 배포 툴을 Vercel로 대체

Vercel 대체 후 배포 속도를 기존 약 10분에서 3분으로 70% 가량 개선

커뮤니티 탭 메인 (FlatList 컴포넌트를 활용한 Infinite Scroll)

게시물 상세 페이지 (게시물 상세 조회, 댓글 입력, 좋아요)

게시물 작성 페이지 (글 작성 및 사진 첨부)

게시물 수정 페이지 (글 및 사진 수정)

게시물 댓글 수정 기능

커뮤니티에 노출되는 유저 닉네임 변경 기능

현재는 Lounge 탭으로 대체되었습니다.

앱 패키지 내에 사용되지 않고 존재하던 50여개의 레거시 컴포넌트 및 코드들을 일괄 제거

모노레포 환경(Lerna + Yarn workspace) 아래 앱 패키지 전역에서 약 700여개에 달하던 Type Error, ESLint Error들을 일괄 제거

husky에 pre-commit shell script를 작성/세팅하여 커밋 전 코드 내 에러 필터링

투자성향 설문조사(단계별 process) 및 결과 UI & Logic 구현 (Lottie, Reanimated를 활용한 애니메이션 구현)

설정 탭의 전반적인 UI & Logic 구현 (유저 프로필 확인 및 변경 등)

GraphQL Codegen, Apollo Client를 사용한 Data Query & Mutation 경험

기업 소개 랜딩 페이지를 주도적으로 기획, 디자인, 개발

Intersection Observer API를 사용하여 스크롤 애니메이션 구현

Lighthouse를 참고하여 Performance, Acessibility, SEO 점수 개선

가비아, AWS Amplify Console을 이용한 도메인 호스팅 및 프로젝트 배포

프로젝트 초기 세팅

페이지 전역에서 공통으로 사용되는 SideBar 개발

사내 디자인 시스템 구축 및 라이브러리 NPM 배포 경험

Naver Cloud Platform의 Live Station을 활용한 라이브 스트리밍 방송 송출 및 수신 테스트

Balsamiq을 사용하여 프로젝트 기획 / Wire Frame 작성