원소연

Frontend

감별마켓은 식품 카테고리에 특화된 B2C 커머스입니다. 커머스와 커뮤니티가 결합된 서비스에서 프론트엔드를 주도하며 안정적인 사용자 경험을 최우선으로 삼았습니다. 개발 과정에서 성능 병목을 줄이고, 이슈 발생 시 현상 해결에만 급급하기보다는 근본 원인 분석과 제거에 집중했습니다. 실제 사례로, 초기 릴리즈 무렵 반복되던 흰 화면/무한 로딩에 대해서는, 팀 내 초기 가설(새로고침 유발 로직)에서 벗어나 도커 배포 파일 교체 타이밍과 브라우저 캐시 충돌의 복합 원인으로 분석했습니다. 이를 바탕으로 배포 절차와 캐시 정책을 재정비하여 배포 직후에도 신규 세션에서 최신 버전이 즉시 반영되도록 했고, 동일 유형의 장애 재발을 차단했습니다. 또한 두 개 도메인 환경의 SSO 통합 로그인을 구현했습니다. 외부 인프라 제약으로 도메인 설정에 제한이 있었지만, 로컬 HTTPS 환경을 구축해 로컬 개발 단계에서부터 세션 지속성·쿠키 도메인/SameSite·캐시 동기화를 검증하며 진행했습니다. 그 결과 제한적인 환경에서도 메인/서브 도메인 간 일관된 세션 관리 및 안정성 테스트를 수행할 수 있었습니다.

• 감별마켓 커머스 프론트엔드 주도

  • WebView / PC 환경 통합 기능 개발
  • 통합 로그인(SSO) 구현 및 소셜 로그인 플로우 처리
  • 메인/서브 도메인 세션 동기화로 동일 세션 기반 서비스 이용 경험 제공
  • 가상 스크롤 기반 리스트 최적화로 대량 데이터 렌더링 비용 감소
  • 마케팅 배너/팝업 모듈화로 기획 변경 및 운영 반영 속도 단축
  • 도메인 간 이동 후 재진입 시 스크롤 위치 복원 기능 적용으로 상품 탐색 연속성 강화

• 개발 환경 고도화

  • Vue 3 + Vite 기반 개발 환경 구축으로 빌드 속도·개발 효율 개선
  • Mkcert를 활용한 로컬 HTTPS 환경 구성으로 운영 환경과 동일한 세션/쿠키 동작 검증 체계 마련
  • Husky + lint-staged 도입으로 빌드/린트 실패 사전 차단 및 코드 품질 관리

• 배포 환경 안정화

  • 배포 과정에서 교체 타이밍과 브라우저 캐시 충돌로 인해 발생한 흰 화면·무한 로딩 문제를 분석하고, Nginx 캐시 정책을 재정비하여 최신 버전이 즉시 반영되는 안정적 배포 환경 구축

• 카페24 템플릿 개발

  • 서비스 서브 도메인 확장을 고려한 프론트엔드 구조 설계 및 가이드 문서 제작
  • 카페24 기본 템플릿 기반 Vanilla JS 추가 기능 개발

Frontend

Vanilla JS 기반 웹 광고 SDK의 구조를 직접 설계·개발·배포하면서, 광고 트래킹·비디오 플레이어·외부 연동 가이드까지 전 과정을 담당했습니다. 이를 통해 광고 상품을 안정적으로 외부 파트너사에 공급하고 B2B 수익 창출에 기여했습니다. 이후에는 광고 관리 어드민, 오퍼월, 메신저, 커머스 등 다양한 웹뷰 프로젝트를 수행했습니다. 특히 광고 오퍼월 프로젝트에서는 웹뷰와 앱 간 통신(딥링크) 구조를 설계·개발하고, lazy loading을 통한 성능 최적화, 운영 어드민 구축까지 전 과정을 담당했습니다. 이 프로젝트는 릴리즈 후 6개월 만에 유저 트래픽 4배, 수익 3배 증가라는 직접적인 비즈니스 성과로 이어졌습니다. 또한 어드민/메신저/커머스 프로젝트를 수행하며 React, Next.js, TypeScript를 활용해 CRUD, 지표 시각화, 메시지 미리보기 등 다양한 기능을 구현했습니다. 개발뿐 아니라 UI/UX 기획 회의에 100% 참여하고, 노션 기반 개발 일정·릴리즈 버전 관리 문서화를 통해 협업의 효율성을 높였습니다. 인프라 측면에서는 AWS CodePipeline·S3·CloudFront·Route53을 활용한 CI/CD 배포 파이프라인을 직접 구축했습니다.

• 광고 SDK 개발

  • Vanilla JavaScript 기반 광고 SDK 구조 설계·개발·배포
  • 웹 배너, 비디오 광고 모듈 및 이벤트 트래킹(클릭, 스킵, 영상 재생 범위 등) 구현
  • 비디오 표준 규격 VAST XML 기반 플레이어(프로그레스바, 음소거, 스킵 등) 개발
  • 광고 백엔드 REST API 연동 및 오픈 연동 가이드 문서 제작, 외부 업체 QA 대응
  • 성과: 광고 SDK 상용화를 통해 안정적인 B2B 수익 창출

• 광고 관리 어드민

  • 광고 지면 관리 CRUD 기능 개발 및 유지보수
  • 광고 지표 차트·테이블 구현 (Recharts, Ant Design)
  • 성과: 광고주·운영팀의 효율적 캠페인 관리 지원

• 유저 참여형 오퍼월 프로젝트

  • Next.js 기반 웹뷰 프로젝트 구축·개발·배포
  • 웹뷰–앱 간 통신(Deep Link) 및 광고 어드민 개발
  • 이미지 Lazy Loading 적용으로 성능 최적화
  • UI/UX 회의 전면 참여, 노션 기반 일정·릴리즈 관리로 협업 효율화
  • 성과: 릴리즈 6개월 만에 유저 트래픽 4배, 수익 3배 증가
  • 성과: 광고 참여 → 캐시 획득 → 사내 커머스 이용으로 이어지는 선순환 구조 형성

• 메신저 프로젝트

  • 웹뷰 메신저(친구 리스트, 구독 채널 관리) 기능 개발
  • 메신저 어드민(메시지 관리, 미리보기) 개발
  • AWS CodePipeline · S3 · CloudFront · Route53 기반 정적 웹사이트 CI/CD 구축

• 커머스 프로젝트

  • 웹뷰 커머스 프로젝트 신규 개발 및 유지보수
  • 외부 솔루션 플랫폼 '샵바이' API 연동 및 데이터 처리
  • 커머스 관리 어드민 개발 및 유지보수

릴리즈 예정 • Next.js 기반

• • 글쓰기 에디터 기능 개발 (Tiptap 커스텀 구현)
  • Tiptap 기반 Rich Text Editor를 커스터마이징하여 게시글 작성/수정 기능 개발
  • 이미지·링크·정렬 등 편집 기능 확장 및 사용자 편의 UI 설계
  • iOS WebView 환경에서 발생하는 키보드/스크롤 이슈를 분석하고 안정적으로 동작하도록 개선
  • 에디터 입력·포커스·툴바 동작을 최적화하여 모바일 사용자 작성 경험(UX) 향상