미리보기

- 신사업 개발팀 프론트엔드 단독 개발 진행 (23.11 ~.24.03)

- 인플카 개발팀 풀스택 개발 (22.11 ~. 23.11)

[Description]
실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스

[Work]
- 초기 페이지 로딩 속도 개선 : 초기 화면에 고해상도 이미지로 인해 로드 시간이 느려지는 문제를 해결하기 위해, next/image 컴포넌트를 사용하여 AVIF와 WebP 형식으로 이미지를 최적화하고, lazy loading과 priority 속성을 적용하여 초기 페이지 로드 시간을 약 4초에서 0.97초로 개선하였습니다.
- 시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선 : 로딩 화면이 오래 지속되는 문제로 인한 사용자 경험 저하를 해결하기 위해 API 호출 로직을 수정하여 실시간으로 이미지를 생성하고 사용자에게 지속적으로 업데이트를 제공함으로써 사용자 경험을 개선하였습니다.
- 사용자를 위한 데이트 시각화 차트 개발 : 인플루언서의 팔로워 수 등락을 시각적으로 표현하기 위해 ApexCharts.js 라이브러리를 도입하여 데이터 시각화를 위한 차트를 개발하였습니다. 이를 통해 사용자들이 데이터를 더 쉽게 이해하고 분석할 수 있게 하였습니다.
- 링크 공유 시 필터링 조건 유지 기능 구현 : 기존 상태 관리 방식을 개선하여 쿼리 파라미터를 활용한 URL 필터링 기능을 구현하고, 재사용 가능한 useQueryParams 커스텀 훅을 개발하여 팀 간 협업과 코드 유지보수성을 향상시켰습니다.
- 크레딧 및 멤버십 결제 기능 구현 : 포트원 모듈을 사용하여 구매 정책을 위한 결제 기능 구현하였습니다. 이를 통해 안전하고 편리한 결제 시스템을 구축하였습니다.

[Tech Stack]
Next.js 13, TypeScript, Tailwind CSS, TanStack Query, Recoil

[Description]
인플루언서들이 팬들과 소통하고 독자전인 콘텐츠를 제공하는 개인용 소셜미디어 플랫폼

[Work]
- 이미지 업로드 모듈 개선 : 이미지 업로드 모듈의 편의성을 개선하였습니다. 사용자가 여러 장의 이미지를 등록한 후 수정할 때, 순서를 원하는 대로 지정할 수 있도록 이미지에 인덱스 기능을 추가하고, 체크박스 선택 여부에 따라 순서를 자유롭게 조정할 수 있게 하여 사용자 경험 개선 하였습니다.
- 인턴 멘토링 및 팀 협업 경험 : 멘토로서 인턴 두 명과 함께 프로젝트를 수행하며 효과적인 팀 협업을 경험했습니다. 모르는 부분에 대해 적극적으로 공유하고, 코드 리뷰를 통해 코드를 개선하고 향상시켰습니다.

[Tech Stack]
Next.js 12, TypeScript, Tailwind CSS

[Description]
포스팅 커머스 플랫폼

[Work]
- 웹 퍼블리싱 및 페이지 구현 : 프로젝트 전반의 웹 퍼블리싱을 담당하여, 디자인 시안에 맞춰 모든 페이지를 구현하였습니다.
- 업무용 API 개발 : 회원 정보 수정, 이벤트 관리, 상품 등록 등을 위한 업무용 API를 개발하여 내부 운영 효율성을 높였습니다.
- 관리자 리스트 화면 개발 및 데이터 관리 : 회원 목록, 포스팅 검수, 이벤트 관리 등의 업무에 필요한 리스트 화면을 개발하여 관리자들이 쉽게 데이터를 관리하고 모니터링할 수 있도록 하였습니다.
- 데이터 시각화 차트 도입을 통한 UI/UX 개선 및 데이터 분석 지원 : 일자별 매출, 회원 수 등락, 등급별 유저 현황 등을 기존 수치로만 보여주던 부분에서 시각화 차트 도입하여 한눈에 파악할 수 있도록 UI/UX 개선하였습니다. 이를 통해 관리자들이 데이터를 더 쉽게 이해하고, 빠르게 의사 결정을 할 수 있도록 지원하였습니다.

[Tech Stack]
Spring Boot, Thymeleaf, jQuery, JPA, Mybatis, Bootstrap