미리보기

• Server Driven UI 적용하여 이커머스 서비스몰 개편

  • 운영팀이 클라이언트 배포 없이 UI 변경 가능 -> 운영 효율 10배 향상, 몰 오픈 기간 18일 단축

  • UI/UX 개선을 통해 MAU 56% 상승, 순 방문자 대비 구매율 47% 상승

• 이커머스 서비스몰에서 사용 되는 10개 이상의 공통 UI 모듈 개발

  • 홈 상품 모듈(5가지), 이벤트 팝업(3가지), 검색 레이어(3가지), 푸터(3가지), 공통 모달(2가지) 등

• 상품 UI 컴포넌트 구조 개선 및 재사용성 강화

  • 기존 단일 페이지에서만 적용되던 UI를 공통화하는 개선 작업을 통해 다양한 지면에서도 활용 가능하도록 개선

  • 신규 페이지 및 기능 개발 속도 2일 -> 1시간 이내로 단축

• 이커머스 운영 효율화 백오피스를 구축하여 자동화 및 생산성 향상

  • 이벤트 스케줄 자동화적용으로 기존 대비 운영 생산성 5배 향상 및 매출 400% 성장 기여

• 신규 자산관리 백오피스 구축

  • 마이페이지, 공지사항, 매니저 관리 등 CRUD 및 권한 관리 기능 페이지 개발

  • 로그인/회원가입 및 권한 기반 접근 제어 시스템 개발

• 협업 효율 향상을 위해 Figma 도입 및 기획/디자인 개선 참여

프로젝트 내용

Cafe24의 디자인 템플릿 의존성과 반복되는 운영 이슈 및 개발 리소스를 절감하기 위해 Server Driven UI를 적용한 In-House 플랫폼을 구축하여, UI/UX를 향상시킨 프로젝트

주요 기여 및 성과

• 프로젝트 초기 멤버로 참여하여 전반적인 서비스 개발 및 배포, 서비스 출시/운영

• 기존 Cafe24 기반 서비스몰을 Vue 기반 반응형 구조로 개편하여 UI/UX 개선

  • MAU 56% 상승, 순 방문자 대비 구매율 47% 상승

• Server Driven UI 적용으로 몰의 UI 및 기능을 서버 설정값 기반으로 동적으로 제어할 수 있도록 개발

  • 홈 구성요소(배너, 상품 등), 헤더, 사이드 메뉴, 푸터 등의 UI를 서버 설정값에 따라 실시간으로 변경 가능하도록 구현

  • 상품 오픈 알림, 라이브 방송 알림 등의 기능을 서버 설정값 기반으로 동작하도록 개발하여, 몰 내 주요 기능을 동적으로 관리할 수 있도록 개선

  • 운영팀이 클라이언트 배포 없이 즉시 UI 수정 가능 -> 운영 효율성 10배 향상, 몰 생성 및 오픈 기간 18일 단축

• 상품 UI 개발 담당자로서 상품 목록 및 상세 페이지 개편

  • 서버 설정값을 기반으로 상품 UI 스타일, 구매 버튼, 상품 정보 등을 동적으로 렌더링하도록 개선

  • API 호출 완료 전 빈 화면 및 깜빡임을 방지하는 로딩 컴포넌트 구현하여 사용자 경험 향상

  • 상품 상세 이미지가 많을 경우 더보기/접기 기능을 적용하여 초기 로딩 최적화 및 불필요한 이미지 로드 방지

  • 서비스몰 내에서 상품 오픈 알림 신청 기능을 제공하여 유입 경로 확장

• 각기 관리되던 21개 몰의 코드를 하나의 코드베이스로 통합

  • 몰별 설정값에 따라 UI와 기능이 동적으로 적용될 수 있도록 조건부 렌더링 구조 설계

  • Github Actions 기반 FTP 업로드 자동화로 21개 몰을 한 번에 배포 가능 -> 배포 효율성 21배 향상

기술 스택

Vue, Vanilla JS, SCSS, FTP 및 GitHub Action

프로젝트 내용

이커머스몰에서 사용되는 공통 UI 컴포넌트를 Server Driven UI 구조로 적용하여 모듈화하고, 유지보수성과 확장성을 극대화한 프로젝트

주요 기여 및 성과

• 디자이너와 협업하여 컴포넌트 기반 디자인 시스템을 구축하고, 몰 전반의 UI 일관성 을 유지할 수 있도록 공통 컴포넌트 개발

• 홈 상품 모듈, 팝업, 검색 레이어, 푸터, 상품 UI 등 10개 이상의 공통 UI 컴포넌트를 모듈화하여 관리

  • 서버 설정값을 기반으로 UI 요소를 동적으로 조정할 수 있도록 유연한 컴포넌트 구조 설계 및 개발

• 공통 알림 컴포넌트 (Alert, Toast) 개발

  • 커스텀 props 제공하여 유연한 사용 가능하도록 구현

• 공통 UI 컴포넌트 모듈화로 유지보수성을 높이고, 신규 페이지에 해당 컴포넌트를 적용하는 작업 기간을 절반 이하로 단축

기술 스택

Vue, SCSS 및 GitHub Action

프로젝트 내용

상품 UI가 특정 페이지에서만 사용되어 코드 중복과 유지보수성이 저하되는 문제를 해결하기 위해, UI를 모듈화하여 모든 상품 관련 페이지에서 일관되게 재사용할 수 있도록 개선한 프로젝트

주요 기여 및 성과

• 기존 2가지의 상품 UI 스타일을 5가지로 확장하며 컴포넌트 추가 개발

• 상품 목록 전용 컴포넌트를 확장하여 홈, 검색결과, 상품 목록, 상품 상세 등 8개의 다양한 지면에서 일관되게 재사용할 수 있도록 개선

• UI 구성요소를 더 유연하게 커스텀할 수 있도록 확장 구현

  • 상품 가격표기 방식, 구매 버튼 노출 여부, 이미지 라운딩, 마우스오버 효과 등 5개 이상의 상품 UI 요소를 커스텀 가능하도록 유연한 구조로 개선

• 상품 가격, 구매 버튼 등을 독립적인 UI 컴포넌트로 분리하여 다양한 상품 관련 페이지에서 동일한 UI 및 가격 계산 로직을 유지하도록 개선

  • 상품 오픈 상태에 따라 가격 및 구매 버튼 노출 여부를 동적으로 적용

  • 가격 및 혜택 데이터를 기반으로 판매가, 할인가, 소비자가 등을 일관된 방식으로 계산하는 로직을 모듈화

• UI 컴포넌트 모듈화를 통해 코드 중복을 제거하고 유지보수성을 개선하여, 새로운 상품 UI 및 기능 개발 속도를 2일 -> 1시간 이내로 단축

기술 스택

Vue, SCSS 및 GitHub Action

프로젝트 내용

인플루언서 커머스 운영에서 발생한 이벤트 스케줄 관리 및 데이터 누락 문제를 해결하기 위해, 자동화 시스템을 구축하고 서비스몰의 설정 및 관리 툴을 통합하여 운영 효율성을 극대화한 프로젝트

주요 기여 및 성과

• 공구 운영 자동화를 위한 캘린더 및 이벤트 스케줄 관리 툴 개발

  • 수동으로 운영되던 공동구매(공구)를 스케줄 등록만으로 사전 준비/오픈/종료 프로세스를 자동화

  • 동일 인력으로 기존 대비 약 5배 이상의 공구를 효율적으로 운영할 수 있게 되어, 매출 400% 성장에 기여

• 이커머스 서비스몰의 콘텐츠 관리 툴 및 알림 리스트 관리 페이지 개발

  • 팝업, 배너, 매거진 등 6가지 이상의 콘텐츠를 한 곳에서 직접 관리할 수 있도록 제공

  • 몰 생성 속도 70% 향상, 디자인 변경 요청 감소로 운영 효율성 개선

• 빌드 시스템 Vite로 마이그레이션

  • 기존 Webpack 기반의 빌드 시스템을 Vite로 마이그레이션하여 빌드 시간을 87.7% 단축

기술 스택

React, TypeScript, SWR, Recoil, VITE, Chakra UI, AWS Amplify 빌드

프로젝트 내용

기업 내 자산 관리 및 클라우드 인프라 운영을 효율화하기 위해, 통합 자산 관리 백오피스를 신규 구축한 프로젝트

주요 기여 및 성과

• 마이페이지, 공지사항, 고객 관리, 매니저 관리 페이지 개발

• 고객/매니저 리스트 및 그룹 관리 기능 구현

• 매니저 권한 설정 및 역할 관리 기능 개발

• 로그인/회원가입 및 이메일 인증 플로우를 개발하여 -> 사용자 권한 기반 접근 제어 적용

• 기존 PPT 기반 기획서를 Figma로 전환 -> 팀 간 협업 효율성 약 30% 향상

기술 스택

Vue, Vuex, Vuetify 활용하여 개발

프로젝트 내용

반려견 보호자와 펫시터를 연결하고, 산책 기록과 추억을 관리할 수 있는 웹뷰 기반 모바일 애플리케이션

주요 기여 및 성과

• Kakao Map API & Geolocation API 활용하여 실시간 산책 기록 및 경로 저장 기능 개발

  • 실시간 산책 기록 구현 로직을 초기에는 1초마다 위치를 저장하는 방식으로 하였으나, 불필요한 데이터 저장 및 성능 이슈 발생

  • geolocation.watchPosition을 활용하여 이동 감지 시에만 위치를 저장하도록 개선, 불필요한 연산 제거 및 성능 최적화

• 동네 기반 펫시터 매칭 커뮤니티 및 API 개발

  • 사용자의 동네 설정을 기반으로 펫시터 구인 게시글 제공 및 매칭 기능 개발

  • IntersectionObserver를 활용하여 최적화된 무한 스크롤 기능 구현

  • 게시글 CRUD 및 상세 화면 개발, 펫시터 신청 기능 추가 구현

  • 조회수/좋아요 수 중복 카운트 로직 로직 개발

• 사용자 활동 내역 화면 및 API 개발

  • 내 게시글, 좋아요 목록, 산책 신청목록, 산책 일지 조회 API 및 화면 개발

  • 캘린더 UI를 적용하여 산책 일지를 직관적으로 확인할 수 있도록 구현

  • 활동 내역 API 및 데이터 테이블 설계 및 개발

• 디자이너 없이 다양한 레퍼런스를 참고하여 UI/UX 직접 설계 및 개발

관련 링크

• 애플리케이션 서비스 소개

• Github

• IOS 애플리케이션

• Web

• UI 디자인 Figma

기술 스택

• Front : NextJS, React-Native, TypeScript, TanStack Query, Recoil, TailwindCSS

• Server : Bun, ElysiaJS, Prisma, Postgre SQL

프로젝트 내용

회사 내 슬랙의 이모지 문화에서 영감을 받아, 사용자가 입력한 텍스트와 이미지를 활용해 SNS 썸네일, 블로그 배너 등 다양한 용도로 활용 가능한 커스텀 이미지를 생성 및 저장할 수 있는 웹 애플리케이션을 개발한 개인 프로젝트

주요 기여 및 성과

• 입력 도구 및 사용자 정의 기능 개발

  • 텍스트 스타일(폰트 크기, 두께, 색상) 및 정렬(좌/중앙/우) 설정

  • 배경 색상 설정 및 사용자 이미지 삽입 기능 제공

  • 패딩 설정을 추가하여, 텍스트 위치 및 여백을 유연하게 조정 가능

• Recoil을 활용한 실시간 상태 관리 및 동적 UI 업데이트 구현

• html2canvas를 활용하여 생성된 이미지를 캡처 후 다운로드 할 수 있는 기능 개발

관련 링크

• Web

• Github

기술 스택

React, TypeScript, Recoil, SCSS, Netlify

프로젝트 내용

그날의 분위기와 기분에 따라 음악을 추천해주는 뮤직플레이어로 3일간 기획, 디자인, 개발을 모두 진행한 개인 프로젝트

주요 기여 및 성과

• 오늘의 기분에 따라 음악을 추천하는 플레이리스트 및 플레이어 기능 개발

  • 감정 카테고리를 기반으로 관련 음악을 추천하며, 음악 재생/정지/볼륨 조절이 가능한 플레이어 기능 구현

  • 로컬 스토리지를 활용하여 나만의 재생 목록을 저장하고 개인 플레이리스트를 관리할 수 있도록 UI 제공

• 사용자 검색을 통한 음악 조회 및 재생 기능 구현

  • YouTube Search API를 활용하여 사용자가 원하는 음악을 직접 검색하고 재생할 수 있도록 지원

• Recoil을 활용한 전역 상태 관리 및 공통 UI 컴포넌트 개발

  • Sidebar, Loading, Modal, Player 등 공통 UI 컴포넌트 개발

  • 페이지 전환 시에도 특정 데이터(플레이어 상태, 감정 선택 값 등)를 유지할 수 있도록 전역 상태 관리 적용

• Figma를 활용해 UI를 설계하고, 전체 레이아웃과 프로젝트 컨셉 정의

관련 링크

• Web

• Github

• 프로젝트 소개

기술 스택

React, TypeScript, React-Query, Recoil, Youtube API, Netlify