미리보기

커머스 AI 스쿼드 소속의 프론트엔드 엔지니어로 재직 중에 있습니다.

• 홈쇼핑 영상 기반 AI 기술을 통해 추출한 클립들을 컷 편집할 수 있는 B2B 서비스 개발 및 고도화를 담당하고 있습니다.

• 클라이언트를 위한 어드민 페이지 개 및 고도화를 담당하고 있습니다.

• 프론트엔드 혼자서 기존 국내 어드민을 글로벌 통합 어드민에 이관하는 작업 및 신규 글로벌 통합 어드민 설계 / 개발 / 운영하였습니다.

• 이외에도 기존 마이뷰팁 웹 서비스와 요쿠스 홈페이지 유지보수 및 고도화, 마이뷰팁 랜딩페이지, 마이뷰팁+ 랜딩페이지를 개발하였습니다

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

프로젝트 개요

• 홈쇼핑 데이터 AI 기반 숏폼 편집 웹 애플리케이션

• 데모영상

주요 성과 및 역할

• 클립 및 컷 편집 기능 구현 (DnD, 구간 트리밍, 멀티 소스 관리)

• 디자인 요소 실시간 프리뷰 및 사용자 정의 편집 기능 개발 (텍스트, 스티커, 자막 등)

• Context API와 커스텀 UI 컴포넌트를 활용한 DnD, sorting 최적화

• 기존 툴의 페인포인트를 해결하며 빠르게 사용 가능한 직관적인 UI/UX 설계

1. UI/UX 개선 역량

   • 기존 편집툴 사용 유저의 러닝커브를 최소화하기 위해 직관적인 UI/UX를 설계하고 페인포인트를 해결.

2. 신기술 탐색 및 빠른 검증

   • 타임라인 관련 라이브러리를 탐색, 검증, 적용 후, 추가적인 기능은 커스텀 구현으로 개발하며 빠른 서비스를 제공

3. 복잡한 인터렉션 설계 경험

   • 클립 트리밍, 멀티 소스 관리, DnD 기반 자유 배치 등 복잡한 인터렉션를 사용자 친화적으로 설계 및 구현.

4. 확장성을 고려한 서비스 재설계

   • 초기에는 빠른 라이브러리 도입으로 개발 속도를 높였으나, 점차 요구되는 기능의 복잡성을 해결하기 위해 라이트하고 효율적인 자체 기능으로 전환 중

스택

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

프로젝트 개요

• 뷰티 커뮤니티 및 이커머스 서비스 관리용 글로벌 통합 어드민 설계 및 개발.

• 초기 React-Admin에서 Mantine 기반 어드민으로 이전 후, 커스텀 UI 컴포넌트를 통해 성능 및 요구사항 대응성 개선.

주요 성과 및 역할

• UI 개선: styled-components와 Compound Component 패턴을 활용해 재사용성 높은 UI 컴포넌트 개발.

• 데이터 관리 최적화: TanStack Query의 query-key-factory를 활용해 효율적인 데이터 요청 및 상태 관리 구현.

• 상태 관리 개선: Props Drilling 문제 해결을 위해 Slice 패턴 기반의 Zustand로 상태 관리 구조 설계.

• 폼 관리 최적화: React-Hook-Form과 Zod를 사용해 15개 이상의 입력 필드 유연하게 관리.

• 성능 최적화: Virtual Scroll을 도입해 변동성이 적은 대량 데이터의 렌더링 최적화.

스택

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

프로젝트 개요

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

• IT 관리자와 고객을 연결하는 실시간 미팅 및 협업 지원 서비스 개발.

Problem & Solution

• 문제: 서비스 기획 단계에서 모든 플로우를 한 번에 구현하려다 보니 시간 소모가 크고, 서비스 구조가 지나치게 복잡해지는 문제가 발생.

• 해결: 기획을 단계별로 나누고, 1단계 서비스 출시를 목표로 플로우를 단순화. 이를 중심으로 기획안을 재구성하고 구현 완료.

주요 성과 및 역할

• 미팅 및 협업 기능 구현: Twilio Video SDK를 활용한 실시간 미팅, 채팅, 화면 공유, 대기실 기능 개발.

• 효율적인 데이터 관리: Zustand로 클라이언트 사이드 상태 관리, React-Query로 서버 데이터 관리 최적화.

• 커스텀 캘린더 개발: 외부 디자인 요구에 맞춘 사용자 정의 캘린더 구현.

• SCSS 활용: 코드 재사용성을 높이고 개발 속도 향상.

• 기획 고도화: 외부 인력(기획, 디자이너)과 협업해 플로우를 단순화

스택

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

프로젝트 개요

• 자체 영어 회화 커리큘럼 기반의 단기간 집중 학습 서비스와 관리용 백오피스 개발.

• 프론트엔드 설계부터 기획, 개발, 운영까지 전 과정을 주도.

Problem & Solution

• 문제: 제품 출시 후 유저 유입률 저조

• 해결: 유저 저니맵 작성 및 AARRR 분석을 통해 문제를 파악하고, AB 테스트 및 기능 개선으로 유입률과 전환율 개선 시.

주요 성과 및 역할

• 1차 개발 (React.js): AWS S3, Cloudfront, Route53을 통한 정적 웹사이트 호스팅 및 CI/CD 구축.

• 결제 프로세스 구축: PG사 심사 신청, 결제 API 연동 및 본인 인증 프로세스 (다날) 구축.

• 2차 개발 (Next.js): SEO 및 개발 속도 개선을 위해 React에서 Next.js로 마이그레이션. 동적 라우팅 및 빌드 설정 최적화.

• 3차 개발: 소셜 로그인(네이버, 카카오) 도입 및 쿠폰 기능 기획, 개발. 영어 질문지 자동 생성기 기능 도입하여 페인 포인트 해결.

• AWS IAM과 MFA 도입으로 보안 강화.

• 백오피스 구축: Ant-design 기반의 백오피스 설계 및 Vimeo SDK를 활용한 비디오 관리 기능 개발.

스택

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

프로젝트 개요

• 고객과 입점사를 연결하는 온라인 패션 갤러리 플랫폼 개발. 클라이언트 맞춤형 요구사항에 따른 입점사 관리 및 결제 솔루션 문제 해결 담당.

Problem & Solution

1. 복잡한 요구사항과 API 부재

   • 문제: 클라이언트 요구사항을 지원하는 Clayful API 부재 및 별도 입점사 전용 관리 페이지 필요.

   • 해결: 자체 구축한 입점사 관리 API와 Clayful 관리자 페이지를 커스텀하여 요구사항 맞춤형 구현. Clayful 팀과의 지속적 커뮤니케이션으로 API 확장 가능성 검토 및 문제 해결.

2. 통합 결제 솔루션 이슈

   • 문제: 아임포트(현 포트원)의 해외 결제 테스트 중 결제 취소 동작 문제 발생.

   • 해결: 해외 결제 관련 이슈를 분석하고, 아임포트 팀과 협력해 문제 해결 및 시스템 안정화에 기여.

주요 성과 및 역할

• Clayful API와 커스텀 관리자 페이지를 결합해 클라이언트 맞춤형 기능 설계 및 구현.

• 자체 입점사 관리 API 개발로 서비스 안정성과 개발 효율성 확보.

• 아임포트 해외 결제 문제를 분석 및 해결하며 결제 프로세스 안정화에 기여.

• 입점사 전용 관리 페이지 설계 및 클라이언트 요구사항 반영.

프로젝트 개요:

• 만화 번역 기능과 포트폴리오 관리 기능을 제공하는 SNS 서비스.

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

주요 성과 및 역할:

• 만화 번역 에디터 개발: Fabric.js를 활용해 번역 및 편집 도구 구현.

• 모달 기능 개선: React portal을 이용해 모달 창 관리 최적화.

• 권한 관리 구현: react-router-dom으로 권한 별 페이지 접근 제한 설정.

• UI/UX 개선: Masonry 레이아웃으로 사용자 중심의 자유로운 콘텐츠 배치 구현.

• 무한 스크롤 개발: useRef를 활용한 무한 스크롤 기능 구현.

• 서비스 기획 및 정책 수립 참여: 서비스의 방향성과 초기 정책 설계에 기여.

기술 스택

• React.js, Fabric.js, react-router-dom, TypeScript

항해 플러스 FE 3기 과정을 수료하였습니다

• JS를 활용한 React 및 관련 hook들을 구현하며 React의 매커니즘을 이해하였습니다.

• 클린 코드를 통해 함수형 프로그래밍에 대한 이해도를 높여 유연하고 확장 가능한 설계의 토대를 배웠으며 FSD를 통해 관심사를 분리하고 이에 맞는 아키텍처를 학습할 수 있었습니다.

• 테스트 코드를 통해 클린 코드에서 학습한 내용을 이용하여 함수들을 분리하였고 이를 통해 테스트 용이한 설계가 무엇인가를 학습했습니다.

• 성능을 확인할 수 있는 지표들과 이들을 최적화하기 위한 수단을 학습하여 실제로 적용, 비교하는 과정을 통해 성능 최적화를 학습했습니다.