미리보기

인플루언서 커머스 회사로 여러 인플루언서와의 협업 및 약 10개의 브랜드 운영, 130억 시리즈 A 투자

운영 효율화

기존에 소유하고 있던 8개의 브랜드 및 셀러 페이지가 각각 다른 코드로 관리되고 있었고, 새로운 브랜드 및 셀러를 인수할 계획이지만 카페24 디자인 템플릿 선정 비용 및 소요 기간 과도하게 소요

• Server Driven UI를 통해 효율적인 커스텀 페이지 제공

• 개편 전 월 대비 구매건 수 56%상승, 순방문자 대비 구매율 47% 상승

• 카페24 디자인 템플릿 선정 소요기간 60% 단축 및 비용 대규모 단축

• 각각 다른 코드로 개발되었던 약 20개의 몰 페이지를 하나의 코드로 관리하면서 개발 효율성 증가

다양한 컨텐츠 제공

약 20개의 몰을 하나의 코드로 관리하기 때문에, 컨텐츠가 다양성 저하

• 매거진/포스트 페이지 개발을 통해, 각 브랜드&셀러 몰마다 다양한 컨텐츠 제공

• 페이지를 간단하게 만들 수 있는 툴을 선정하고, 각 몰에 해당 페이지를 바로 적용할 수 있는 백오피스 제공

• 댓글/대댓글 개발을 통해, 셀러/브랜드와의 유대감 형성 유도

이 외의 활동

• 충성 고객들을 위해 저렴한 가격에 상품을 판매하는 페이지 제공

• 백오피스 개발을 통해 카페24를 통해 관리하는 부분을 점진적 마이그레이션 및 수동으로 관리되어 발생하던 휴면 이슈 감소 및 관리자 효율성 증대

• 프론트엔드 팀 VITE, PWA 세미나 개최(이후 백오피스 SPA -> VITE로 변경)

반려견과의 소중한 산책 기록 및 근처 동네의 펫시터 연결 및 활동을 할 수 있는 웹뷰 기반 모바일 애플리케이션입니다. 풀스택 2명이서 진행했으며 전반적인 기술 선정부터 기획까지 A부터 Z까지 전부 참여했습니다.

기술스택

• Frontend: React-Native, NextJS, Tanstak Query, Typescript, TailwindsCSS, Recoil

• Backend: Bun, ElysiaJS, Prisma, Postgre SQL

링크

• 소개: 퍼피랑 소개 페이지

• IOS 애플리케이션: 앱스토어 퍼피랑

• Web: https://puppylang.netlify.app

• Github: github/puppylang

담당

Frontend

• SEO 및 FCP 단축 및 UX 향상을 위해 Server Side Rendering 추가

• 소셜 로그인(애플, 카카오, 네이버) 개발

• React Native 셋팅 및 웹뷰 통신 로직 개발

• 웹소켓을 이용한 채팅 플로우 및 화면 개발 및 Server Sent Event를 통해 채팅 알림 개발

• Sentry의 에러 데이터 커스텀을 통한 에러 모니터링 셋팅 및 개발

• 카카오 로컬 API를 통해 지역 검색 플로우 및 화면 개발

• 유저 신고 및 차단, 개인 정보 동의서 플로우 및 화면 개발

Backend

• JWT토큰, 소셜로그인을 이용한 유저 CRUD 개발

• Bun 서버 셋팅 및 Koyeb에 서버 및 DB 호스팅

• 공공데이터 / 카카오 Local API 를 이용해 지역 검색 로직 CRUD 개발

• 유저 신고, 차단 CRUD 개발

• 펫 CRUD 개발

• AWS S3 이미지 업로드 개발

• Socket를 이용해 채팅 로직 및 CRUD 개발

모의 주식 페이지로 주식을 구매 판매 할 수 있고 다음 날의 가격 변동에 대한 힌트를 통해 가격 변동을 예측하고 투자할 수 있습니다.

기술스택

• React, Typescript, ChartJS, Redux-toolkit, Firebase,

  Firebase RealtimeDatabase

링크

• 소개: 모의 주식 게임 소개

• Web: https://hyebin26.github.io/react_stockgame/

• Github: github/react_stockgame

개발 내용

• Firebase를 이용한 소셜 로그인 개발

• ChartJS를 이용해 주식 가격 변동 및 유저 소유 주식 시각화

• 랜덤 주식 변동 로직 및 가격 변동 폭에 맞는 힌트 로직 구현

• Redux-tookit을 이용한 전역 상태 관리

• gh-pages를 이용한 페이지 배포

• Firebase RealtimeDatabase에 힌트 및 유저 주식 정보 저장

13개의 스크롤 애니메이션을 쉽게 사용할 수 있는 라이브러리입니다. 총 5일동안 진행한 해커톤으로, 시니어 프론트엔드가 기획하는 프로젝트에 참여하여 제작했습니다.

기술스택

• React, Javascript, SASS

링크

• 소개: 스크롤 애니메이션 소개

• Web: scoll-animation-js-web

• NPM: NPM/scroll-animation-js

개발내용

• 페어 프로그래밍을 이용해 라이브러리 개발

• 해당 라이브러리에서 사용하는 스크롤 애니메이션을 SASS를 이용해서 구현

• 공식 홈페이지에 반응형, 버튼 애니메이션, usage 디자인 등 디자인를 추가

• 사용자가 간편하게 스크롤 애니메이션을 적용할 수 있도록 Readme 작성