미리보기

• 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% 상승

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

  • 홈의 레이아웃 배치, 메뉴 구성요소, 헤더, 푸터 등 몰의 UI요소와 주요 기능(상품·라이브 알림 등)을 실시간으로 변경 가능하도록 구현

  • UI 유연성 향상으로 클라이언트 배포없이 운영팀이 즉시 수정할 수 있어 운영 효율성 10배 향상, 몰 생성 및 오픈 기간 18일 단축

• 상품 UI 개발 담당자로서 상품 관련 페이지 개편

  • 상품 목록 스타일 5가지 지원, UI 구성 요소 및 제공될 상품 정보 등 동적으로 렌더링하도록 컴포넌트 구조화

  • 빈 화면 및 깜빡임 현상을 방지하기 위해 로딩 컴포넌트 구현하여 사용자 경험 개선

  • 상품 상세 페이지에 ‘더보기/접기’ 기능을 도입하여 초기 로딩 시간 최적화, 불필요한 이미지 로드 방지하고 사용자 경험을 개선

  • 상품 오픈 알림 신청 기능을 제공하여 신속한 쇼핑 경험과 구매 전환율 증가

• 각기 관리되던 21개 몰을 하나의 코드로 통합 개발 및 배포 자동화

  • Github Actions을 활용해 FTP 업로드를 자동화하여 배포 프로세스 개선, 개발 효율성 21배 향상

기술 스택

Vue, Vanilla JS, SCSS, FTP 및 GitHub Action

프로젝트 내용

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

주요 기여 및 성과

• 디자이너와 협업하여 컴포넌트 기반 디자인 시스템을 구축

  • 몰 전반의 UI 일관성을 유지할 수 있도록 공통 컴포넌트 개발

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

  • 서버 설정값에 따라 다양한 요구사항을 처리하며, UI 요소가 동적으로 조정되도록 유연한 컴포넌트 구조 설계

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

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

• 재사용 가능한 컴포넌트 구조 도입으로, 신규 페이지에 해당 컴포넌트를 적용하는 데 소요되는 개발 시간을 절반 이하로 단축

기술 스택

Vue, SCSS 및 GitHub Action

프로젝트 내용

상품 UI가 특정 페이지에 국한되어 사용되던 문제를 해결하기 위해, UI를 모듈화하여 모든 상품 관련 페이지에서 일관되게 UI를 제공•재사용할 수 있도록 개선한 프로젝트

주요 기여 및 성과

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

• 상품목록 전용 UI 컴포넌트를 확장 및 개선하여, 홈, 검색결과, 상품 목록, 상품 상세 (연관 / 추천 상품) 등 8개의 다양한 지면에서 재사용할 수 있도록 구현

  • 코드 중복 제거 및 유지보수성 향상

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

  • 가격표기 방식, 구매 버튼 노출 여부, 이미지 라운딩, 마우스오버 효과 등 5개 이상 의 UI 구성 요소

• 상품 가격, 구매버튼 등을 독립적인 UI 컴포넌트로 분리하여 재사용성 강화

  • 판매가, 할인가, 소비자가, 혜택 정보 등을 기반으로 일관된 방식으로 계산하는 로직을 모듈화

  • 다양한 페이지(상품 목록 / 상세, 최근 본 상품 페이지, 알림 신청 목록 등)에서 동일한 UI와 로직 활용 가능

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

• 모듈화를 통해 코드 중복을 제거하고 유지보수성을 개선하여, 상품 관련 UI 적용에 대한 신규 페이지 및 기능 개발 속도를 2일에서 1시간 이내로 단축

기술 스택

Vue, SCSS 및 GitHub Action

프로젝트 내용

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

주요 기여 및 성과

• 캘린더 및 이벤트 스케줄 관리 툴 개발

  • 수동으로 운영되던 공구 프로세스를 스케줄 등록만으로 사전 준비, 오픈, 종료 작업을 자동화함

  • 동일 인력 대비 운영 효율성 5배 이상 향상, 매출 400% 성장에 기여

• 이커머스 몰의 콘텐츠 관리 툴 개발

  • 팝업, 배너, 매거진 등 6가지 이상의 콘텐츠 관리 기능을 제공하여 콘텐츠 변경 요청 감소 및 운영 효율성 향상

• 이커머스 몰의 상품 옵션 이미지 관리 툴 개발

  • 상품 페이지에 옵션에 맞는 썸네일 및 상세 이미지를 등록하고 관리할 수 있도록 지원

  • Cafe24에서 제공되지 않는 새로운 기능을 구현함에 따라 고객의 선택 편의성을 높이고, 구매 전환율 향상

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

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

기술 스택

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

프로젝트 내용

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

주요 기여 및 성과

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

  • 백엔드 개발자와 협업하여 API를 설계하여 연동

    고객/매니저 리스트 및 그룹 관리 기능, 매니저 권한 및 역할 설정 관리 기능 구현

• 로그인/회원가입 및 이메일 인증 플로우를 개발

  • 사용자 권한 기반 접근 제어 시스템 적용

• PPT로 관리되던 스토리보드 및 화면 설계서의 한계를 개선하기 위해 Figma 도입

  • 기획서와 디자인 문서를 시각적으로 명확하게 공유하고, 팀 간 협업 효율성 약 30% 향상

기술 스택

Vue, Vuex, Vuetify 활용하여 개발

프로젝트 내용

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

주요 기여 및 성과

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

  • 초기 구현에는 1초마다 위치/시간 데이터를 저장하는 방식으로 진행하였으나, 불필요한 데이터 저장과 성능 이슈가 발생함

  • geolocation.watchPosition을 도입하여 이동 감지 시에만 데이터를 저장하도록 개선, 불필요한 연산을 줄여 성능 최적화

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

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

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

  • 최신순 조회 및 중복 카운트 없는 조회수/좋아요 수 제공될 수 있도록 API 로직 구현

• 사용자 활동 내역(내 게시글, 좋아요 / 산책 신청목록, 산책 일지) 조회 화면 및 API 개발

  • 활동 내역 테이블 설계

    캘린더 UI 적용으로 산책 일지 직관적으로 확인될 수 있도록 구현

• 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일간 기획, 디자인, 개발을 진행한 프로젝트

주요 기여 및 성과

• 감정 카테고리 기반 음악 추천 및 플레이어 기능 개발

  • YouTube Search API 를 활용해 음악을 추천하도록 구현

  • 음악 재생/정지/볼륨 조절이 가능한 플레이어 기능 구현

• LocalStorage를 활용하여 나만의 재생 목록을 저장하고 관리할 수 있는 기능 구현

• 사용자가 원하는 음악을 직접 검색할 수 있도록 검색 기능 구현

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

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

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

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

관련 링크

• Web

• Github

기술 스택

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