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

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

2024. 06 - 2024. 06

Description.

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

What did I do.

검색 태그를 추가, 수정, 삭제하는 기능을 구현
검색 태그를 추가할 때, 이미 존재하는 태그인지 중복 체크를 하도록 구현

Performance.

• 개발 1명
• 기여도: 백엔드 100% / 프론트엔드 100%
• 백오피스에 검색 태그 관리 추가

Results And Outcomes.

• 검색 태그 기능 완성
• 기존 개발자들이 요청을 받아서 DB에 밀어넣고 있던 반복 작업을 백오피스에서 자동화함으로 실수를 줄일 수 있게 되었음

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%
• 옵션별 이미지 추가, 삭제, 수정 기능 추가

Results And Outcomes.

• Rune을 팀 내에서 처음으로 백오피스에 성공적으로 도입
• 이미지 관리 기능을 활용해 하드코딩했던 상품 옵션별 이미지를 자동화함

Tech Stack.

Javascript, PostgreSQL, FxJs, FxDom, Rune

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

2024. 04 - 2024. 04

Description.

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

What did I do.

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

Performance.

• 개발 1명
• 기여도: 백엔드 100% / 프론트엔드 100%
• 마이페이지 졍보 표기 개편
• 배송 상태별 탭 UI 추가 및 배송 상태에 따른 쿼리 추가

Results And Outcomes.

• 마이페이지 및 구매내역 페이지 일정 내에 성공적으로 개편 완료
• 회사 코드를 빠르게 익혀 실무를 하게 되었음
• PostgreSQL을 처음으로 실무에서 사용

Tech Stack.

Javascript, PostgreSQL, FxJs, FxDom

[PIXVAS] AI를 통한 이미지 생성 서비스.

2023. 05 - 2024. 01

Description.

사내 R&D로 시작한 Stable diffusion를 기반의 AI Image Editor입니다.

What did I do.

총 3명이 개발하였으며, 주로 아키텍처 설계와 AI관련 기술 적용 및 백엔드 개발을 담당하였습니다.

Performance.

• 개발 3명
• 기여도: 백엔드 90% / 프론트엔드 30%
• 이미지 생성, 편집 관련 로직 구현
• hotjar를 이용한 사용자 Heatmap 분석으로 UI/UX 개선
• Socket과 Kafka를 이용해 실시간으로 이미지가 만들어지는 과정을 보여주는 기능 추가
• Stable Diffusion webui 모델을 세부 조정하여 학습하는 LoRA 학습 기법 도입하여 각 고객에 맞는 이미지를 생성할 수 있게 기여
• Controlnet 기술 도입. 유저가 원하는 구도로 이미지를 생성할 수 있게 기여
• Meta에서 발표한 Segmentation Anything 기술 도입하여 편집하고자 하는 이미지 영역을 손쉽게 선택할 수 있게 기여
• lama-cleaner를 이용해 원하는 물체 제거 기능 도입
• 사내 GPU 서버에 AI 관련 기능 구축 및 GPU 성능 테스트
• GPU의 상태 모니터링 시스템 구축
• GPU P2P 시스템 구축

Results And Outcomes.

• 이미지 AI 관련 기술 습득
• R&D 목표 달성 및 에디터 개발
• GPU P2P 기술 설계

Tech Stack.

Stable diffusion webui, Python, FastAPI, NodeJs, NestJs, Jenkins, Kafka, MongoDB, React, SWR, Ant Design, styled-components, Typescript

Detail Link.

PIXVAS 홈페이지

[TAGNITY] 인증 기반 커뮤니티.

2022. 09 - 2023. 04

Description.

NFT 기술을 활용한 커뮤니티 앱
각각의 커뮤니티의 소유 및 관리 권한은 초기 생성자가 가진 NFT 정보를 Klaytn의 스마트 컨트랙트에 적재하고 이를 통해 각각의 특성을 가진 독립적인 커뮤니티 생태계를 구축/관리하고, 커뮤니티에 자유롭게 연동하고 사용할 수 있는 ThirdPartyApp 을 제공합니다.

What did I do.

총 3명이서 개발하였으며, React Native를 이용한 앱 개발 및 백엔드 개발을 담당하였습니다.

Performance.

• PM 1명 / 기획 1명 / 개발 4명
• 기여도: 백엔드 70% / 프론트엔드 40%
• React Native를 이용한 iOS, AOS 어플리케이션 구축
• 커뮤니티 관리자를 위한 백오피스 구축
• 커뮤니티 관리자가 지정한 인증 방법을 통과한 유저들로만 커뮤니티를 구성할 수 있는 인증 센터 구축
• 커뮤니티 관리자가 자신의 커뮤니티에 연동할 수 있는 Third-party App 시스템 구축 및 App 제작
• 커뮤니티 관련 서버 API 구축
• 커뮤니티 관리자용 백오피스 개발
• TRTC(Tencent Real Time Communication)를 통한 화상 채팅 기능 도입
• CodePush 도입
• 오픈소스 머신러닝 코드를 이용해 비속어 체크 구축

Results And Outcomes.

• R&D 완료
• React-Native를 이용해 iOS, AOS 앱 출시

Tech Stack.

React-Native, react-native-ui-kitten, CodePush, Firebase, NestJs, MongoDB, Jenkins, SWR, Recoil

[MINIPIE] 시스템 아키텍처 개선 작업.

2022. 04 - 2022. 06

Description.

운영이 지속됨에 따라 기존 서비스에 대한 기능 확장, 서버 Scale out/up, 새로운 서버 추가에 따른 요구 사항 반영, 이에 따른 서버간 통신에 대한 복잡성이 증가하면서 구조적 취약점을 해결하기 위한 시스템 아키텍처 개선 작업에 참여하였습니다.
쿠버네티스 환경을 처음 접해봐서 공부가 많이 되었던 프로젝트였습니다.

What did I do.

총 4명이서 개발하였으며, 아키텍처 설계 및 백엔드 개발을 담당하였습니다.

Performance.

• 개발 5명
• 기여도: 인프라 20%
• Tencent Cloud에서 제공하는 TKE(Tencent Kubernetes Engine)을 활용하여 쿠버네티스 클러스터 환경 구축에 기여
• Tencent Cloud에서 제공하는 TCR(Tencent Container Registry)를 활용하여 Private Docker hub 구축
• Jenkins와 ArgoCD를 활용한 배포 시스템 구축에 기여
• TKE(Tencent Kubernetes Engine)를 활용한 Auto Scaling 구축
• ELK를 이용한 로깅 시스템 구축

Results And Outcomes.

• 아키텍처를 개선하여 트래픽에 따른 유연한 서버 확장이 가능해짐
• 로깅을 통한 이슈 파악이 가능해짐

Tech Stack.

NestJS, Tencent Cloud, MongoDB ReplicaSet, Docker, Kubernetes, Elasticsearch, Logstash, Kibana, ArgoCD, Apache Kafka, React, styled-compoment, Antd, swr, recoil, Typescript

[MINIPIE] 위챗 생태계 기반 풀필먼트 솔루션.

2020. 02 - 2021. 10

Description.

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

What did I do.

백오피스와 배송 및 세관 신고 관련 기능을 구축에 관여하였습니다.

Performance.

• PM 1명 / 기획 2명 / 운영 3명 / 디자인 1명 / 개발 12명
• 기여도: 백엔드 20% / 프론트엔드 30%
• Miniprogram framework 기반으로 쇼핑몰 구축 기여
• 쇼핑몰 관리자를 위한 React + Typescript 기반의 백오피스 구축에 기여
• Tencent Cloud 기반의 서버 환경 구축 기여
• 쇼핑몰 상품 관련 API 구축 기여
• 장바구니 관련 API 구축 기여
• 세관신고를 위한 주문 API 구축
  * (세관 신고 API를 요청보낼 때 고객의 이름/신분증 번호를 함께 보내야하고, 고객이 weChat Pay에 등록한 이름/신분증 번호가 서로 일치해야지 정상적으로 세관 통과 가능)
• 광저우 지역해관 신고 API 구축 및 ElectronJS를 통한 자동 신고 프로세스 구축
• 위해 지역해관 신고 프로세스 구축
• 외부 배송추적 API 연동
• 백오피스 구축 기여

Results And Outcomes.

• 국내 최초로 Miniprogram Framework 기반으로 커머스 구축
• 국내 최초로 미니프로그램 기반 커머스 플랫폼 구축
• 월 매출 최고 10억 달성
• 누적 매출 100억 달성

Tech Stack.

ExpressJs, jenkins, Tencent cloud, MongoDB, React, style-component, Antd, Redux, Redux-saga, Typescript, Miniprogram

Terraform을 이용한 커머스 플랫폼 인프라 구축.

2023. 11 - 2023. 12

Description.

IaC 도구인 Terraform을 이용하여 커머스 플랫폼 인프라 구축 기존에 구성되어 있던 인프라 환경을 그대로 Terraform 코드로 작성하여 손쉽게 인프라를 구성할 수 있도록 작업

What did I do.

Terraform 도입 계획 설립 및 수행

Performance.

• 개발 1명
• 기여도: 100%
• Tencent Cloud 인프라 코드화

Results And Outcomes.

• Terraform을 통해 인프라를 손쉽게 확장 가능해짐
• 사내에 첫 Terraform 도입 및 사내 교육

Tech Stack.

AWS, TC, Terraform

개발 클라우드 환경을 사내 물리서버로 이전.

2023. 09 - 2023. 10

Description.

클라우드(AWS, Tencent Cloud) 비용 절감을 위한 개발 환경을 사내 물리 서버로 이전하는 작업

What did I do.

클라우드 개발 환경 인프라 이전 계획 및 실행

Performance.

• 개발 1명
• 기여도: 100%
• Docker를 이용한 배포 시스템 구축
• 대규모가 아닌 중소규모의 컨테이너들을 관리하기 위해 구축 리소스가 적게 드는 Docker Swarm 도입
• pipeline의 각 스텝이 도커 환경으로 동작하는 Drone CI 도입
• 컨테이너를 관리할 수 있는 서비스인 Portainer 도입
• Docker 이미지를 사내망에 관리할 사내 nexus docker registry 구축

Results And Outcomes.

• 사내에 남는 서버를 이용했기 때문에 클라우드 비용이 절약됨 약 10% (약 $24,000 -> 약 $22,000)

Tech Stack.

Docker Swarm, Sonatype Nexus, Portainer, Drone CI

대한양궁협회.

2023. 08

Description.

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

What did I do.

총 6명이서 저는 프론트엔드 모바일 버전 웹과 백오피스를 맡아 개발하였습니다.

Performance.

• 기존 일정 대비 30% 단축

Tech Stack.

React, Typescript, Zustand, SWR, Vite, Antd

Detail Link.

대한양궁협회

VIP 자산운용사.

2023. 03

Description.

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

What did I do.

총 3명이서 저는 프론트엔드 반응형 웹과 백오피스를 맡아 개발하였습니다.

Performance.

• 기존 일정 대비 10% 단축
• SI 전용 보일러플레이트 레포 개발 및 사내 공유

Tech Stack.

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

Detail Link.

VIP 자산운용사

한화생명 보이는 GA World.

2021. 11 - 2022. 01

Description.

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

What did I do.

총 4명이서 개발하였으며, 파트장으로서 파트원 관리 및 백엔드 개발을 담당하였습니다.

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.

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

What did I do.

타 부서의 긴급 백업요청으로 총 5명이서 3주간 스프린트로 프론트엔드 백오피스를 개발하였습니다.

Performance.

• 기간 내 성공적 클로징

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