조성진
Frontend Developer

안녕하세요, 프론트엔드 개발 5년차 조성진입니다. 어드민 개발, 커머스 개발, WebRTC 개발 경험이 있습니다. Terminal과 Vim과 Cli tool을 좋아합니다. 개발과 관련된 다양한 경험을 하고 싶은 개발자입니다. 저에 대해서는 제 개인 블로그 About Me 페이지를 확인해주세요. 개발과 관련된 이야기라면 언제든 커피챗을 요청해주세요.

Work Experience

08/2023 - 현재
LG Uplus
Tech Stack
Next.js 14, React 18, React-Query, Styled-Components, Turbo, Jest, MSW, Agora RTC SDK, Agora RTM SDK | Kubernetes, Docker, Github Actions

LG Uplus 아이들나라에서 화상클래스 서비스의 PoC 단계부터 직접 설계하고 서비스 런칭을 성공시켰습니다. 화상클래스는 WebRTC 기반의 화상회의 서비스로, 일반적인 회의 서비스(Zoom, Google Meet 등)에서 제공하지 않는 실시간 교육 환경을 구축했습니다. Agora RTC/RTM SDK를 활용하여 오디오·비디오 스트리밍, 참여자 상태 관리 기능을 개발하였으며, 웹뷰를 지원하여 PC, Tablet, Mobile 모든 환경에서 원활히 동작하도록 구현했습니다. 약 1년간 지속적인 기능 추가 및 성능 최적화를 수행하며 안정적인 서비스를 제공하고 있습니다.

  • 1. 다중 접속 환경에서의 성능 최적화

    20~40명 이상 접속 시 저사양 모바일 기기에서 발열 및 성능 저하 문제가 발생하였으며, Mobile 개발자들과 협업하여 접속자 수에 따른 CPU, RAM 사용량을 분석했습니다. 이를 기반으로 화면 내 비디오 개수를 최적화하고, 리소스 사용량을 줄이는 UI 설계를 적용하여 저사양 기기에서도 원활한 화상 수업이 가능하도록 개선했습니다.

  • 2. 네트워크 환경에 따른 화면 공유 품질 개선

    네트워크 상태에 따라 화면 공유 시 영상 품질이 불안정해지는 문제를 해결하기 위해 고정 해상도 및 FPS 설정을 조정하여 안정적인 화면 공유 환경을 구축하였습니다.

  • 3. 역할(Role) 기반 UI 설계

    학생, 선생님, 관리자 각 역할에 맞는 인터페이스를 설계하고, 권한별 기능 제어를 구현하여 사용성이 높은 UI를 완성했습니다. 예를 들어, 선생님은 학생들의 마이크/카메라를 개별적으로 제어할 수 있으며, 학생 화면에서는 불필요한 UI 요소를 제거하여 직관적인 경험을 제공했습니다.

  • 4. 화상 서비스 테스트 및 디버깅 환경 개선

    복합적인 기능들이 동시에 동작하는 화상 서비스의 개별 기능을 테스트할 수 있도록 데모 페이지를 개발하였으며, Jest 기반의 자동화 테스트 코드를 작성하여 서비스 안정성을 높였습니다. 또한 QA팀과 협업하여 매일 오전 Agora 서버 상태를 확인하는 자동화 테스트를 구축하였습니다.

  • 5. 비용 최적화 및 서비스 효율성 개선

    해상도, FPS 조합을 실험하여 비용을 최소화하면서도 품질을 유지할 수 있는 설정을 도출하였으며, 기존 외주 서비스였던 화상독서 대비 참여자 수는 2배 증가했음에도 불구하고 총 비용은 20% 수준으로 절감하는 성과를 달성하였습니다.

05/2022 - 08/2023
핏펫
Tech Stack
Next.js 11, React 17, React-Query, Styled-Components, Axios, Graphql | Github Actions

핏펫몰의 주요 커머스 기능(상품 검색, 상품 카드, 배너, 기획전 시스템 등)을 개발하고 성능 최적화를 수행했습니다. GraphQL 기반 데이터 구조 개선, 디자인 시스템 도입을 통해 개발 생산성과 유지보수성을 향상시켰습니다.

  • 1. 상품 카드 레거시 개선

    기존 상품 카드 컴포넌트는 API 응답 데이터와 강결합되어 있어 유지보수가 어렵고, 여러 페이지에서 공통으로 사용될 때 타입 에러 및 UI 버그가 발생하는 문제가 있었습니다. 이를 해결하기 위해 디자인 시스템에 상품 카드 컴포넌트를 추가하고, UI와 데이터를 완전히 분리하는 구조로 개선했습니다. API 요청 로직을 Hook으로 분리하여 GraphQL 응답이 변경되어도 기존 페이지에 영향을 주지 않도록 리팩토링하였으며, 이를 단계적으로 모든 페이지에 적용했습니다.

  • 2. 릴리즈 노트 자동 생성 시스템 도입

    릴리즈 노트 작성이 수작업으로 진행되어 비효율적이었으며, 프론트엔드와 백엔드 모두 통일된 배포 관리가 어려웠습니다. 이를 해결하기 위해 GitHub API를 활용한 자동 릴리즈 노트 생성 시스템을 개발하여 PR 제목, 작성자, Asana 태스크를 자동으로 정리하도록 했습니다. GitHub Actions 기반으로 제작하여 백엔드와 프론트엔드 모두 적용할 수 있도록 하였으며, PR 자동 생성, Labeler, Auto Assignee 등의 기능도 추가하여 개발 생산성을 크게 향상시켰습니다. (상세내용)

11/2020 - 04/2022
단비교육
Tech Stack
React 16, Antd 4, Webpack 4

유아 교육 서비스를 제공하는 단비교육에서 윙크개발팀에 소속되어 프론트엔드 개발을 담당했습니다. 통합관리자 시스템, 물류 시스템, 교사용 시스템, 고객관리 시스템 등 4개의 주요 백오피스 시스템을 개발 및 운영하였으며, 고객 및 내부 직원들의 사용성을 개선하는 데 기여했습니다.

  • 1. 통합관리자 시스템 개발

    회원 및 결제 관련 운영을 위한 통합관리자 시스템을 개발하였으며, 회원 검색, 회원 상세 조회, 결제 내역 관리 기능을 구현했습니다.

  • 2. 물류 시스템 개발

    윙크 단말기 및 교재, 학습지의 물류 관리를 위한 시스템을 개발하였으며, 재고 관리, 출고/입고 처리, 배송 관리 기능을 포함한 대시보드를 구축했습니다.

  • 3. 교사용 시스템 개발

    교사들이 학생을 관리할 수 있도록 교사용 시스템을 개발하였으며, 교안 관리 및 학습 데이터 확인 기능을 구현했습니다.

  • 4. 고객관리 시스템 개발

    고객 문의 및 상담을 관리할 수 있도록 고객관리 시스템을 개발하였으며, 상담 이력 및 콜백 관리 기능을 추가했습니다.

Education

성균관대학교 전자전기공학과 학사 졸업

Presentation

  • vimEnter 2023 발표
  • 2024 FEConf 라이트닝 스피커 발표