미리보기

미리캔버스 템플릿 및 디자인 페이지 개발

미리캔버스 웹서비스 내의 템플릿 검색 및 추천 도메인으로 경험하였습니다. GA 이벤트 로깅 및 이벤트 기반 리팩토링, 디자인 시스템 개선 등 또한 참여했습니다.

기술 스택: Typescript, React, Next.js, Jotai, react-query, styled-components, storybook, framer-motion

주요 도전 및 성과

• 페이지 성능 최적화

  • 코드 스플리팅, ISR 및 SSG를 도입하여 템플릿 페이지의 컴파일 속도 30%, 렌더링 속도 80% 이상 개선

  • CLS 문제로 Skeleton UI를 적용해, Lighthouse 성능 점수를 70점에서 90점 이상으로 개선

• 유지보수성 향상

  • 템플릿 페이지 내 클래스 컴포넌트를 함수형 컴포넌트로 전환하고, Context API와 Jotai를 활용해 Props Drilling 문제 해결 및 가독성 증가

  • 기존 여러 함수에 걸쳐 복잡하게 조건을 관리했던 로직에 ts-pattern match를 적용하여 ABT 그룹, 로그인 여부, 환경 변수 확인 로직을 리팩토링, 코드 가독성과 타입 안정성 강화

  • GA 전송을 필요할 때마다 호출하던 구조를 이벤트 기반으로 리팩토링해 확장성 강화

• 디자인 및 디자인 시스템 개선

  • ref 충돌로 호버 및 클릭이 일부 조건에서 되지 않던 디자인 시스템의 컴포넌트들을 forwardRef로 해결

  • 디자인 시스템의 Popover, Snackbar 컴포넌트를 개발

  • framer-motion을 활용하여 마이크로인터렉션이 가능한 스크롤 넛지 구현

• 오류 관리 체계 구축

  • 특정 검색어("반려동물 간식"과 같은 엣지 케이스)의 결과가 비어 있는 경우와 같이 템플릿 페이지 내 API의 응답이 빈 값이거나 오류가 뜨는 경우를 감지할 수 없어서, Datadog 대시보드와 Slack을 연동해 Dev 및 Staging 단계의 오류를 실시간 모니터링하여 대응

• 사내 스터디 참가

  • Next.js App router 기반 스터디 및 next/image 최적화 세미나 발표 진행

1~4차 광고 이메일 개발

메일 전송 서비스를 활용해 직접 템플릿을 제작하는 것은 자유로운 디자인의 이메일을 보낼 수 없었습니다. 이를 개선하기 위해 이메일 템플릿을 개발하고, 개인화된 추천 결과를 메일마다 자동으로 반영할 수 있는 프로세스를 구축했습니다.

기술 스택: HTML5, CSS, javascript

주요 도전 및 성과

• 호환성 문제 해결

  • Gmail, 네이버메일 등 메일 클라이언트의 CSS 해석 차이를 분석하고 테스트를 진행하여 범용적인 <table> 기반 이메일 템플릿을 개발

  • 다양한 환경에서도 일관된 스타일 유지로 호환성 문제 100% 해결 및 문제없는 스타일링 배포

• 자동화 프로세스 구축

  • 사용자 이름, UTM을 적용한 링크, 개인화된 정보(추천 템플릿, 최근 검색어 등)를 자동으로 삽입하는 JavaScript 기반 템플릿 생성기 구현

  • CSS 호환성 가이드와 템플릿 생성기 사용법을 문서화하여 사내 광고 이메일 템플릿 제작 프로세스를 표준화

공예쁨 - 공예품 거래 플랫폼

공예학과 대학생들의 과제 및 졸업전시 작품 처리를 돕는 서비스를 개발했습니다. 학생은 작품을 판매 등록하거나 템플릿 에디터를 활용해 기획전을 개최할 수 있고, 구매자는 채팅으로 주문 및 소통하거나 기획전을 관람할 수 있습니다. 알림 기능으로 채팅, 작품 좋아요, 주문 상태 변경 및 요청을 제공해 편리한 거래 환경을 지원합니다.

링크: https://github.com/SW-Palindrome/Leporem-art-FE

기술 스택: Flutter, React, React Helmet, Google Analytics, FCM, AWS S3, Socket.io

주요 도전 및 성과

• SEO 최적화

  • 랜딩페이지를 구현하고 홍보했지만 일일 접속 트래픽 200명대로 저조하여React Helmet을 활용해 metadata를 적용해 SEO 진행

  • "공예품 사이트" 키워드에서 경쟁사(아이디어스) 바로 하위인 검색 순위 2위 달성, 접속 트래픽 350% 증가

• 대용량 파일 업로드 지원

  • API Gateway는 10MB 라는 Body Size의 제한으로 인해 작품 등록에 필요한 동영상 및 사진 업로드가 불가능한 현상 존재

  • AWS S3의 Presigned URL을 활용해 우회하여 사진 및 동영상을 업로드 가능하도록 구현

• 실시간 채팅 개선

  • Polling 방식을 Socket.io 기반 실시간 채팅으로 전환해 채팅 누락률 0% 및 메모리 누수 문제 해결

• 푸시 알림 구현

  • FCM과 딥링크를 활용해 사용자 지정 페이지로 즉시 이동 가능한 푸시 알림 구현

• 마케팅 데이터 기반 성과 분석

  • Google Analytics로 사용자 행동 데이터를 분석, 실제 거래 30건 및 온라인 전시회 10회 개최

  • 오프라인 및 온라인 마케팅 전략 도입 후 앱 다운로드 500건, 사용자 가입 150명 달성

로스트아크의 확률 기반 재련 시스템에서 유저가 효율적으로 진행할 수 있도록 최적의 방법을 계산해 제안하는 프로젝트입니다. 로그인 없이 실시간 아이템 시세 조회 기능을 제공하여 편리한 아이템 거래와 자원 관리를 지원하며, 공지사항 및 이벤트를 제공하는 등의 다양한 편의 기능을 제공합니다.

링크: https://github.com/milkbottle0305/loffi-web

기술 스택: Typescript, React, Next.js, turbopack, pnpm, TailwindCSS, react-query, shadcn-ui

주요 도전 및 성과

• API 요청 최적화

  • 1분당 100회로 제한된 OpenAPI 요청을 효과적으로 관리하기 위해 SSR과 ISR을 적용

  • 아이템 시세 정보, 게임 내 이벤트 등의 정보를 서버에서 렌더링하여 데이터 로딩 속도 95% 단축

• DX, UX를 고려한 컴포넌트 구현

  • Grid Selector를 개발, 드래그 방식으로 아이템 선택을 간소화해 UX 향상

  • Tailwind CSS를 활용해 반응형 디자인을 적용, 모바일과 데스크톱 환경 모두에서 일관된 경험 제공

  • Slider와 Popover 와 같은 컴포넌트를 다른 상위 컴포넌트에서도 공유할 수 있도록 radix-ui를 사용한 컴포넌트를 커스텀해 재사용성 증대