미리보기

커머스 AI 스쿼드 소속의 프론트엔드 엔지니어로서

홈쇼핑 영상 기반 AI 기술을 통해 추출한 클립들을 컷 편집할 수 있는 B2B 서비스 개발하였습니다

프론트엔드 혼자서 기존 국내 어드민을 글로벌 통합 어드민에 이관하는 작업 및 신규 글로벌 통합 어드민 설계 / 개발 / 운영하였습니다.
이외에도 기존 마이뷰팁 웹 서비스와 요쿠스 홈페이지 유지보수 및 고도화, 마이뷰팁 랜딩페이지, 마이뷰팁+ 랜딩페이지를 개발하였습니다

스타트업의 첫 번째 프론트엔드 개발자로서 모든 웹 개발 프로젝트의 프론트엔드 업무(웹사이트, 백오피스, 블로그) 기획 / 개발 업무를 수행했습니다

홈쇼핑 데이터 AI 기반 숏폼 편집 AI 플랫폼

스택

• Next.js v14, tailwind, tanstack-query, dnd-kit, headless-ui, rc-slider, videojs, react-timeline-editor

개발

• 타임라인 라이브러리와 dnd-kit를 활용하여 클립 sorting, 클립과 BGM dnd 기능, BGM multi row로 관리, 각 요소 구간 리사이징, 프리뷰 연동, fade in-out기능 구현

• 숏폼에 필요한 디자인 요소들을 관리하여 실시간 프리뷰 구현

  • crop 비율 설정, 자막 및 헤드라인 디자인 요소 적용, 스티커 기능 적용

해외 뷰티 커뮤니티 및 이커머스 서비스 Mybeautip+ 관리를 위한 글로벌 통합 어드민

스택

• Next.js v14, mantine v6, styled-components, zustand, tanstack-query, typescript

개발

• 기존 어드민과 신규 글로벌 어드민의 통합을 위해 기존에 종속되어있는 react-admin 기반의 프로젝트를 초기 빠른 이전 작업을 위해 mantine ui 라이브러리 기반의 어드민으로 구축
• 서비스 안정화 이후 다양한 요구사항에 대응하기 위해서는 mantine으로는 비효율적인 코드가 많이 필요했고 이를 해결하기 위해 styled-components 기반의 ui 컴포넌트로 이전 작업 실시
• 서버 사이드 데이터 관리를 위해 tanstack-query와 이에 사용되는 key 값을 선언적으로 관리하기 위해 query-key-factory를 사용해 각 API들에 맞는
  커스텀 훅 구현
• props drilling과 세부적으로 나누어져 있는 데이터들를 응집도 있게 관리하기 위해 slice pattern을 활용한 zustand를 활용
• 특정 API들에서는 입력 필드를 15개 이상을 다루거나 조건에 따라 처리해야할 state들을 다룰경우 state와 유효성 체크 관리가 더욱 중요해지기 때문에 react-hook-form과 zod를 통해 유연하고 확장성있게 대응
• 재사용성과 유연하고 확장성 있는 compound component를 위해 관심사를 분리하고 선언적으로 관리
• 변동성이 적고 많은 데이터들을 virtual scroll을 통해 최적화

국내 첫 민간 투자특화형 청년창업사관학교 ‘대전 청창사’ 입교 기업 중 TOP 12 데모데이 선정 아이템

스택

• Next.js, SCSS, zustand, Twilio Video SDK, React-query, react-hook-form, typescript

Problem & Solution

• 문제
  • 총 서비스 기획에 따라 구현 도중 모든 단계를 고려하여 서비스를 구현하는 것은 시간적인 로스가 크고 서비스 구조가 너무 복잡하다는 분석
• 해결
  • 단계별로 나눠져 있던 서비스 중 1단계 서비스 출시를 목표로 플로우를 단순화하여 이를 중점으로 기획안을 재구성하여 플로우 작성 후 구현

개발

• 고객 유입을 위한 랜딩 페이지 개발
• Twilio Video SDK를 통한 미팅, 실시간 채팅, 화면 공유, 대기실 기능 구현
• zustand를 이용한 클라이언트 사이드 데이터 전역 관리
• react-query를 이용한 서버 사이드 데이터 관리
• SCSS 문법을 활용한 코드 재사용성 확보 및 개발 속도 향상
• 커스텀 디자인 적용을 위한 자체 캘린더 구현
• 외부 인력(기획, 디자이너) 과의 커뮤니케이션을 통해 기획을 고도화

자체 연구한 영어 회화 커리큘럼 기반, 단기간 집중 학습을 위한 영어 회화 서비스

스택

• Next.js, styled-component, zustand, Vimeo SDK, Ant-design, typescript

Summary

• 영어 회화 커리큘럼을 바탕으로 단기간 집중 학습을 위한 영어 회화 서비스 작업 및 관리를 위한 프론트엔드 개발의 모든 부분을 맡아 서비스와 백오피스 구축

주요 업무 요약

💡 1차 개발- React.js

• AWS S3, cloudfront, route53을 통한 정적 웹사이트 호스팅
• AWS pipeline을 통한 CI/CD 구축
• PG사 심사 신청부터 결제 API 연동 후 결제까지 결제 프로세스 구축 (심사, 도입, 연동)
• 다날을 통한 본인 인증 프로세스 구축 (심사, 도입, 연동)

  💡 2차 개발- Next.js

• 간편한 동적 라우팅과 빌드설정 등 빠른 CI/CD 구축을 위해 AWS Amplify 채택
• React에서 Next로 마이그레이션을 통해 SEO, 개발 속도(routing, data fetching) 개선
• axios interceptor를 통해 상태 코드에 따른 에러 처리

  💡 3차 개발 - 지속적인 문제 분석 및 해결

• 간편한 로그인/회원가입을 위한 소셜 로그인 (네이버, 카카오) 프로세스 구축 (심사, 도입, 연동)
• 초기 유저 유입 유도 및 다양한 프로모션을 위해 쿠폰 기능 도입 (기획, 개발)
• 오프라인 모임을 타겟하여 영어 질문지 구성에 대한 페인 포인트를 포착하여 영어 질문지 자동 생성기 기능 도입 (기획, 개발)
  • 난이도, 질문 갯수를 동적으로 입력한 값을 png혹은 pdf로 변환, 공유, 다운 가능
• 기능단 외부 프리랜서와 협업을 위한 AWS IAM 도입하여 필요 권한만 허가
• 계정 보안 향상을 위한 AWS MFA 도입
• 유저 저니맵 작성하여 유저플로우를 분석 → AARRR 관점에서 각 단계별 문제점 파악 → 문제 해결을 위한 개선 방안 작성 → 구체적 방안 도출 → 개발에 적용
• 랜딩 페이지 분석하여 이탈률이 가장 많이 일어나는 영역 탐색하고 AB테스트를 통해 개선 시도

백오피스

• Ant-design 기반 백오피스 모든 기능 및 디자인을 기획/설계/구현
• 비디오 솔루션 Vimeo SDK을 이용해 영상 업로드 및 업데이트를 위해 백오피스 기능 기획/개발

Problem & Solution

• 문제 : 제품 출시 이후, 고객의 유입이 적은 문제 발생
• 해결 : 유저플로우를 통한 분석 후 여러 컨텐츠를 벤치마킹하여 방안들을 작성하고 내부 회의 및 스프린트를 통해 컨텐츠 수립 및 A/B 테스트를 통한 지속적인 수정/개발

입점사 - 클로코 -고객을 연결 시키는 온라인 패션 갤러리 플랫폼

Problem & Solution

💡 클라이언트의 복잡한 요구사항 대응

• 문제
  • 클라이언트의 복잡한 요구사항에 맞는 Clayful API가 존재하지 않는 문제
  • 입점사를 위한 전용 관리 페이지가 따로 존재하여 이 부분도 같이 고려해야하는 문제
• 해결
  • 자체 구축한 입점사 관리 API와 Clayful과의 지속적인 커뮤니케이션을 통한 구현 가능성을 체크를 통해 서비스를 구현
  • Clayful에도 관리자 페이지가 있었으며 최대한 관리자 페이지 내의 기능을 활용, 커스텀하여 클라이언트의 요구사항을 맞춤

    💡 통합 결제 솔루션 아임포트(현 포트원) 이슈 발견 및 대응

• 문제 : 해외 결제 테스트 중 발생한 결제 취소 동작에 대한 문제가 발생
• 해결 : 아임포트 해외 결제관련 이슈 발견 및 분석, 해결 기여

교육부 학생 창업유망팀 300(U300) 경진대회 창업도전형 최종 선정

• ROLE: 전반적인 프론트엔드 업무 담당
• Canvas library인 Fabric.js를 이용한 만화 번역 에디터 구현
• portal을 이용한 모달 기능 개선
• 서비스 기획과 정책 수립에 기여
• react-router-dom을 이용한 권한 별 페이지 접근 제한 구현
• masonry레이아웃 구현을 통한 자유로운 구성
• useRef를 이용한 무한 스크롤 구현