반갑습니다,
저는 방재호입니다.

[백오피스] 검색 태그 관리.

2024. 06 - 2024. 06

Description.

상품의 검색 태그를 관리하는 기능입니다.
기존에 MD 및 기확자가 해당 상품의 연관 검색어를 추가해달라고 해서 직접 데이터를 DB에 밀어넣고 있던 것을 백오피스에서 관리할 수 있게 기능을 추가했습니다.

Performance.

• 개발 1명
• 기여도: 백엔드 100% / 프론트엔드 100%
• 백오피스에 검색 태그 관리 추가
• 검색 태그 기능 완성
• MD들의 작업 시간이 최대 20% 단축

Tech Stack.

Javascript, PostgreSQL, FxJs, FxDom, Rune

[백오피스] 상품 옵션별 이미지 관리.

2024. 05 - 2024. 05

Description.

사내에서 구축한 Web API 기반 Frontend SDK인 Rune을 활용해 백오피스에 상품 옵션별 이미지를 관리하는 모달 구축

What did I do.

Rune을 활용해 상품 옵션별 이미지를 관리할 수 있는 기능 추가

Performance.

• 개발 1명
• 기여도: 백엔드 100% / 프론트엔드 100%
• 이미지 관리 기능을 활용해 하드코딩했던 상품 옵션별 이미지를 자동화함

Tech Stack.

Javascript, PostgreSQL, FxJs, FxDom, Rune

MARPPLE.

2024. 04 - 2024. 04

Description.

마이페이지, 구매내역 페이지 개편

What did I do.

마이페이지를 사용자의 니즈에 맞게 개편하였고, 구매내역 페이지도 기존엔 전체 리스트를 보여주던 것을 배송 상태별로 구분해서 볼 수 있게 개편하였습니다.

Performance.

• 개발 1명
• 기여도: 백엔드 100% / 프론트엔드 100%
• 마이페이지 졍보 표기 개편
• 배송 상태별 탭 UI 추가 및 배송 상태에 따른 쿼리 추가
• 마이페이지 및 구매내역 페이지 일정 내에 성공적으로 개편 완료

Tech Stack.

Javascript, PostgreSQL, FxJs, FxDom

PIXVAS.

2023. 05 - 2024. 01

Description.

Stable Diffusion을 기반으로 한 AI 이미지 에디터 개발.

Performance.

• PM 1명 / 기획 1명 / 개발 3명
• 기여도: 프론트엔드 70% / 백엔드 80%
• React와 Typescript를 활용한 이미지 에디터 UI 구현
• SWR을 활용한 데이터 페칭 및 캐싱 전략 구현
• Canvas API를 활용한 실시간 이미지 편집 기능 개발
• 레이어 시스템, 마스킹, 크롭, 리사이즈 등 이미지 조작 기능 구현
• Socket.IO와 Kafka를 이용한 실시간 이미지 생성 과정 모니터링 기능 개발
• Stable Diffusion, ControlNet, LoRA 등 다양한 AI 기술을 프론트엔드에 성공적으로 통합
• 프롬프트 기반 이미지 생성, 이미지 편집, 스타일 전이 등 기능 구현
• 이미지 처리(PSD 파일 생성, 마스크 생성)를 프론트에서 구현하여 서버 부하 감소

Troubleshooting

• 이미지 생성 과정이 길어 사용자 이탈율이 높았습니다. 이를 해결하기 위해 Socket과 Kafka를 이용해 실시간으로 이미지가 만들어지는 과정을 보여주는 기능을 추가했습니다. 그 결과, 사용자 대기 시간 동안의 이탈율이 약 30% 감소했습니다.
• 대용량 이미지 데이터의 Kafka 전송 문제 해결 문제: AI로 생성된 이미지의 base64 문자열이 Kafka 메시지 크기 제한(1MB)을 초과하여 제대로 전송되지 않았습니다.
  • base64 문자열을 여러 조각으로 분할하여 순차적으로 Kafka로 produce
  • 클라이언트에서 분할된 메시지를 수신하고 재조립하는 로직 구현
  • 메시지 순서와 무결성을 보장하기 위해 각 조각에 메타데이터(순서, 전체 조각 수 등) 추가
  • 크기 제한없이 고해상도 이미지(최대 20MB)도 안정적으로 전송 가능 이미지 전송 성공률 99.9% 달성 사용자에게 실시간으로 고품질 AI 생성 이미지 제공 가능

Tech Stack.

React, Typescript, Zustand, SWR, Ant Design, Styled-components, Vite

TAGNITY.

2022. 09 - 2023. 04

Description.

React Native와 TypeScript를 사용하여 NFT 기술 기반의 폐쇄형 커뮤니티 모바일 앱을 개발했습니다. 사용자 인증, 실시간 채팅, 게시물 관리 등의 기능을 구현했습니다.

Performance.

• PM 1명 / 기획 1명 / 개발 2명
• 기여도: 프론트엔드 80% / 백엔드 100%
• React Native를 이용한 크로스 플랫폼 애플리케이션 개발
• 커뮤니티 관리자를 위한 React 기반 백오피스 구축
• QR 코드를 이용한 간편 인증 프로세스 개발
• NFT를 활용한 사용자 인증 메커니즘 구현
• openfire를 이용한 실시간 채팅 시스템 구축
• TRTC(Tencent Real Time Communication)을 통한 실시간 화상 채팅 기능 구현
• CodePush를 도입하여 앱 업데이트 프로세스 간소화
• 게시물 작성, 수정, 삭제 기능 개발 이미지 및 비디오 업로드, 미리보기 기능 구현 댓글 시스템 및 좋아요 기능 추가

Troubleshooting

• 앱 업데이트 과정에서 사용자 이탈이 발생하는 문제가 있었습니다. 이를 해결하기 위해 CodePush를 도입하여 실시간 업데이트가 가능하도록 했습니다. 그 결과, 앱 스토어 심사 없이 빠른 업데이트가 가능해졌고, 사용자 이탈율을 20% 줄였습니다.
• 고해상도 이미지 업로드 시 앱 성능 저하 및 네트워크 부하 발생
  • React Native Image Compressor를 사용하여 클라이언트 측 이미지 압축 구현
  • 이미지 업로드 전 자동 압축 프로세스 도입 결과, 이미지 업로드 속도 향상 및 서버 저장 공간 30% 절감
• iOS와 Android 간 일부 UI 컴포넌트 및 기능 불일치 발생
  • Platform API를 활용한 조건부 렌더링

Tech Stack.

React, Typescript, Recoil, SWR, React Native, React Native UI Lib

MINIPIE.

2020. 02 - 2021. 10

Description.

위챗 내에서 구동되는 미니프로그램(샤오청쉬)를 기반으로 기획, 쇼핑몰 구축/관리, 결제, 배송, 광고 등의 풀필먼트 솔루션 제작에 참여했습니다.
처음으로 참여한 프로젝트로 프론트엔드와 백엔드 가리지 않고 업무를 맡아 개발에 관한 경험을 쌓고 커머스관련 도메인 지식을 쌓았습니다

Performance.

• PM 1명 / 기획 2명 / 운영 3명 / 디자인 1명 / 개발 12명
• 기여도: 프론트엔드 20% / 백엔드 10%
• Miniprogram framework 기반 프론트엔드 개발
• React와 Typescript를 활용한 관리자용 백오피스 구축
• 위챗 페이를 통한 결제 기능 도입

Troubleshooting

대규모 상품 데이터로 인한 페이지 로딩 속도 저하 문제가 있었습니다. 이를 해결하기 위해 가상 스크롤 기법을 도입하여 렌더링 최적화를 진행했습니다. 그 결과, 페이지 로딩 속도를 30% 개선하고 사용자 경험을 향상시켰습니다.

Tech Stack.

React, Typescript, Ant Design, Redux, Miniprogram framework

대한양궁협회.

2023. 08

Description.

기존 대한양궁협회 사이트 리뉴얼

Performance.

• PM 1명 / 디자인 2명 / 개발 6명
• 기여도: 프론트엔드 20%
• 기존 일정 대비 30% 단축

Tech Stack.

React, Typescript, Zustand, SWR, Vite, Antd

Detail Link.

대한양궁협회

VIP 자산운용사.

2023. 03

Description.

기존 VIP 자산운용사 사이트 리뉴얼

Performance.

• PM 1명 / 디자인 1명 / 개발 3명
• 기여도: 프론트엔드 40%
• 기존 일정 대비 10% 단축
• SI 전용 보일러플레이트 레포 개발 및 사내 공유

Tech Stack.

React, Typescript, Recoil, React Query, Vite, Antd

Detail Link.

VIP 자산운용사

한화생명 보이는 GA World.

2021. 11 - 2022. 01

Description.

보험 설계사 분들을 위한 서비스 구축
회원가입이나 앱 설치 없이 스마트폰에서 한화생명 콜센터에 전화를 걸면 전화번호를 통한 인증을 통해 보이는 ARS 페이지 접속 가능

Performance.

• PM 1명 / 기획 1명 / 개발 4명
• 기여도: 백엔드 80% / 프론트 20%
• 백엔드 설계 및 개발, 파트 리딩
• 보이는 ARS 화면 및 백오피스 구축
• 63빌딩 한화생명 파견 근무
• Node.Js의 ExcelJs를 통해 엑셀 데이터 업로드 기능 구축

Results And Outcomes.

• 첫 파트장으로 파트원 관리
• 약 10만 명의 보험 설계사가 사용할 수 있는 서비스 구축

Tech Stack.

Node.js, ExpressJs, MongoDB, Jenkins, React, SWR, Recoil, Ant Design, Gitlab, Gitlab CI

인천e지.

2021. 05 - 2021. 06

Description.

인천 내 여행일정 추천 및 증강현실을 이용한 관광 서포트 앱

Performance.

• PM 1명 / 디자인 1명 / 개발 5명
• 기여도: 프론트엔드 20%
• 기간 내 성공적 클로징

Tech Stack.

React, Typescript, Redux, React Query, Webpack, Antd

퍼블리싱.

2018. 03 - 2020. 01

Description.

각종 클라이언트 이벤트 페이지 작업

What did I do.

• 현대백화점
• AK PLAZA
• 롯데 면세점
• 롯데 백화점
• 한섬
• 신세계 이랜드
• 세이브존

Results And Outcomes.

• HTML, CSS, JS 등의 기초 지식 습득

Tech Stack.

HTML5, CSS3, Javascript