미리보기

• 자율주행 원격 개발 플랫폼 구축

  • WebRTC 기반 화면 공유 플랫폼 구축

  • WebRTC 파이프라인 개선으로 CPU 사용률 약 90% 감소

• 자율주행 DevOps 플랫폼 구축

  • Django Template에서 React/TypeScript로 프론트엔드 마이그레이션

  • 코드 스플리팅 및 최적화로 페이지 로드 시간 87% 단축

  • WebSocket 기반 실시간 통신 구현으로 사용자 경험 개선

  • CI/CD 파이프라인 구축으로 배포 프로세스 자동화

  • 사용자 요구사항 분석 및 랜딩페이지 제작

• 회사 홈페이지 개발 및 최적화

  • 반응형 웹 구현으로 모바일 이탈률 33% 개선

  • Next.js SSG/ISR 적용으로 페이지 성능 향상

  • 채용공고 관리 시스템 개발로 채용 프로세스 효율화

프로젝트 개요:

• 개발 인원: 풀스택 개발자 1명(본인), 자율주행 개발자 2명

• 자율주행 차량 원격 개발·운영 환경 구축

• 개발자가 물리적 접근 없이도 실시간 테스트 및 디버깅 가능한 시스템 개발

담당 작업 및 성과:

• 원격 개발 환경 구축

  • 문제: 자율주행 차량 내 개발 환경에 접근하기 위해 매번 모니터와 키보드를 연결해야 하는 번거로움으로 개발 속도와 실험 반복 효율 저하

  • 작업: 브라우저에서 직접 접속 가능한 웹 기반 개발 환경 구성

  • 성과: 직접 장비 연결 없이 웹에서 즉시 개발 환경에 접근 가능해져, 테스트 반복 속도와 개발 편의성 향상

• 화면 공유 기능 개발

  • 문제: 다양한 해상도의 차량 화면을 효율적으로 캡처하고 전송하는 기능 필요

  • 작업: GStreamer 기반 WebRTC 파이프라인 구성 및 하드웨어 가속 인코딩 적용

  • 성과: CPU 사용률 약 91.4% 감소, 고해상도 화면을 안정적으로 실시간 전송 가능

사용 기술: React, Django, WebRTC, Socket.io, Docker, Nginx, PyPI

프로젝트 개요:

• 개발 인원: 풀스택 개발자 3명(본인 포함), 자율주행 개발자 1명

• ROS 개발자를 위한 웹 기반 통합 개발 플랫폼 개발

• ROS2와 관련 패키지 자동 설치 및 다양한 개발 도구 제공으로 진입 장벽 낮춤

담당 작업 및 성과:

• 사용자 요구사항 분석

  • 문제: ROS 초보자들이 환경 설정에 평균 8시간 이상 소요, 진입 장벽 높음

  • 작업: 초보자 10명 인터뷰 진행 및 핵심 기능 우선순위화

  • 성과: 베타 출시 후 첫 달 사용자 50명 확보에 기여

• 랜딩페이지 제작

  • 문제: 서비스 소개 및 핵심 기능을 직관적으로 전달할 페이지 필요

  • 작업: React와 TypeScript를 활용한 반응형 랜딩페이지 구현

  • 성과: 페이지 방문자의 회원가입 전환율 25% 달성

• 소셜 로그인 기능 구현

  • 문제: 복잡한 회원가입 절차로 인한 사용자 이탈

  • 작업: Firebase Auth 기반 Google, GitHub 소셜 로그인 통합, JWT 기반 인증 시스템 구현

  • 성과: 가입 소요 시간 5분에서 30초로 단축

사용 기술: React, TypeScript, Firebase Auth

프로젝트 개요:

• 개발 인원: 풀스택 개발자 3명(본인 포함), 자율주행 개발자 1명

• 클라우드 환경에서 자율주행 모빌리티 소프트웨어 개발, 검증 및 운영을 위한 통합 DevOps 플랫폼 개발

• 자율주행 소프트웨어(ADS)에 대한 시뮬레이션 검증과 AI 성능평가 환경 제공

담당 작업 및 성과:

• UI 프레임워크 교체

  • 문제: Django Template 기반 프론트엔드의 한계로 복잡한 UI 구현 어려움

  • 작업: Django Template에서 React로 단계적 전환, 컴포넌트 기반 아키텍처 도입

  • 성과: 개발 생산성 향상으로 신규 기능 개발 주기 평균 3주에서 1주로 단축

• 코드 품질 및 타입 안정성 강화

  • 문제: JavaScript 코드베이스의 타입 불일치로 인한 런타임 오류 빈번

  • 작업: JavaScript에서 TypeScript로 마이그레이션, 타입 정의 파일 작성

  • 성과: 타입 관련 오류 월 평균 15건에서 3건으로 감소, 코드 유지보수성 향상

• 프론트엔드 번들 최적화

  • 문제: 대규모 JavaScript 번들로 인한 느린 페이지 로드 시간

  • 작업: 코드 스플리팅, 트리 쉐이킹, 지연 로딩 적용, 정적 에셋 최적화

  • 성과: 페이지 로드 시간 4초에서 0.5초로 단축

• 개발 환경 및 배포 프로세스 개선

  • 문제: 수동 배포 프로세스로 인한 시간 지연 및 휴먼 에러 발생

  • 작업: DockerHub, GitHub Actions 기반 CI/CD 파이프라인 구축

  • 성과: 배포 시간 15분에서 2분으로 단축, 배포 관련 장애 월 평균 3건에서 0.5건으로 감소

• 백엔드 성능 최적화

  • 문제: 대용량 센서 데이터 처리 시 메모리 부족 현상 발생

  • 작업: StreamingHttpResponse 활용한 청크 기반 파일 처리 구현, 코드 품질 개선

  • 성과: 대용량 파일 처리 시 서버 메모리 사용량 피크 8G에서 1G로 감소

• 실시간 데이터 통신 개선

  • 문제: 서버 응답 지연으로 인한 UX 저하

  • 작업: polling 방식에서 WebSocket(socket.io) 방식으로 실시간 통신 전환, Skeleton UI 적용

  • 성과: 실시간 데이터 업데이트 지연시간 2초에서 0.5초로 단축

사용 기술: React, TypeScript, Django, WebSocket, Docker, Nginx, GitHub Actions

프로젝트 개요:

• 개발인원: 디자인 1명, 개발 1명(본인)

• 회사 소개 및 채용 정보를 제공하는 반응형 웹사이트 개발 및 유지보수

• 채용공고 조회, 지원서 제출 및 관리 시스템 구축

담당 작업 및 성과:

• 모바일 최적화 및 반응형 웹 구현

  • 문제: 모바일 최적화되지 않은 기존 사이트로 인한 높은 이탈률(42%)

  • 작업: CSS Grid/Flexbox 활용한 반응형 레이아웃 구현

  • 성과: 모바일 이탈률 42%에서 28%로 감소

• 채용공고 관리 시스템 개발

  • 문제: 이메일 기반 수동 채용 프로세스로 인한 관리 비효율

  • 작업: Django 기반 채용공고 및 지원서 관리 시스템 개발

  • 성과: 지원자 응대 시간 평균 2일에서 1일로 단축

• API 성능 최적화

  • 문제: 서버 이전 후 네트워크 대역폭 변화로 목록 조회 API 성능 저하

  • 작업: 필요한 정보만 조회하도록 API 리팩토링

  • 성과: 데이터 용량 1/80, 로딩 시간 1/10으로 감소

• Next.js SSG/ISR 적용

  • 문제: 백엔드 서버 부하 및 페이지 로딩 속도 개선 필요

  • 작업: 정적 페이지 생성 및 동적 생성 전략 구현, 백엔드 연동

  • 성과: Google PageSpeed 점수 65점에서 85점으로 향상

사용 기술: Next.js, Django, MariaDB, Nginx

프로젝트 개요:

• 개발 인원: 개발자 1명(본인)

• 다양한 해상도의 화면을 효율적으로 캡처하고 녹화할 수 있는 Python 라이브러리 개발

• CLI 및 Python API를 통해 손쉽게 사용 가능한 스크린 레코딩 도구 제공

• 회사 프로젝트의 화면 캡처 요구사항을 해결하기 위해 개발한 오픈소스 라이브러리

• 저장소: Github, PyPi

담당 작업 및 성과:

• 화면 캡처 코어 라이브러리 설계

  • 문제: 다양한 해상도의 차량 화면을 효율적으로 캡처하고 전송하는 기능 필요

  • 작업: OpenCV, NumPy, MSS 등 라이브러리를 활용한 효율적인 화면 캡처 및 처리 엔진 개발

  • 성과: 안정적인 스크린 캡처 엔진 구현으로 다양한 해상도의 화면 공유 가능해짐

• PyPI 패키지 배포

  • 문제: 개발한 라이브러리를 쉽게 설치하고 활용할 수 있는 배포 방식 필요

  • 작업: 패키지 구조화, 문서화, 테스트 및 PyPI 배포 프로세스 수행

사용 기술: Python, OpenCV, NumPy, MSS, PyPI, GitHub Actions

프로젝트 개요:

• 개발 인원: 프론트엔드 개발자 4명(본인포함), 백엔드개발자 8명

• 음식주문 O2O 서비스

• 저장소: 유저앱, 점주앱

담당 작업 및 성과:

• 실시간 알림 기능 개발

  • 작업: SSE(Server-Sent Events) 기반 실시간 주문 알림 기능 구현, 타임아웃 설정을 통한 안정성 확보

  • 성과: 페이지 새로고침 없이 실시간 정보 제공으로 사용자 경험 개선, 서버 자원 효율적 사용

• API 모킹 환경 구축

  • 문제: 백엔드 개발 완료 전 프론트엔드 개발 및 테스트 진행의 어려움

  • 작업: MSW(Mock Service Worker)를 활용한 API 모킹 환경 구축 및 핸들러 구현

  • 성과: 백엔드 의존성 없이 프론트엔드 개발 병렬 진행으로 개발 기간 단축, 다양한 API 응답 시나리오 테스트 가능

• 리뷰 관리 기능 개발

  • 작업: 리뷰 목록 페이지 설계 및 퍼블리싱, 리뷰 조회 API 연동

• 프로젝트 구조 최적화

  • 문제: 일관성 없는 폴더 구조와 네이밍으로 인한 개발 효율성 저하

  • 작업: 폴더명, 페이지 컴포넌트 네이밍 규칙 수립 및 프로젝트 구조 재정립

• 최종발표에서 최우수 프로젝트로 선정

사용기술: Nextjs, Typescript, Zustand, tailwindcss, TanStack Query, MSW, GitHub Actions

프로젝트 개요:

• 개발 인원: 프론트엔드 개발자 1명(본인)

• React 기반 토스트 알림 컴포넌트 라이브러리 개발

• 기존에 자주 사용하던 토스트 라이브러리의 동작 방식을 이해하기 위해 직접 오픈소스 라이브러리로 개발

• 실제 배포 가능한 수준의 라이브러리를 구현하여 npm에 공개

• 저장소: Github, npm

담당 작업 및 성과:

• 토스트 컴포넌트 설계 및 구현

  • 문제: 다양한 환경에서 재사용 가능하면서도 커스터마이징이 용이한 토스트 UI 컴포넌트 구현 필요

  • 작업: 다양한 타입(success, error, info 등)을 지원하는 토스트 컴포넌트와 애니메이션 구현

  • 성과: 가볍고 직관적인 API를 제공하는 독립적인 토스트 컴포넌트 라이브러리 완성

• 테스트 자동화 구현

  • 문제: 라이브러리의 안정성 및 신뢰성 확보를 위한 체계적인 테스트 방법 필요

  • 작업: Vitest를 활용한 단위 테스트 및 컴포넌트 테스트 코드 작성

  • 성과: 90% 이상의 테스트 커버리지 달성으로 코드 품질 및 안정성 향상

• CI/CD 파이프라인 구축

  • 문제: 지속적인 통합 및 배포를 위한 자동화된 워크플로우 필요

  • 작업: GitHub Actions를 활용한 빌드, 테스트, 배포 자동화 구현

  • 성과: 코드 변경 시 자동 테스트 실행 및 성공적인 테스트 후 자동 배포 환경 구축

• npm 패키지 배포 자동화

  • 문제: 수동 버전 관리의 번거로움과 일관된 배포 프로세스 필요

  • 작업: semantic-release를 이용한 자동 버저닝 및 npm 배포 프로세스 구현

  • 성과: 커밋 메시지 컨벤션에 따른 자동 버전 관리 및 npm에 성공적으로 배포한 첫 오픈소스 프로젝트 완성

사용 기술: React, TypeScript, Vite, Vitest, GitHub Actions, semantic-release, pnpm

활동 내용:

• 개발자 커뮤니티 터틀넥 연구소에서 CS 기초 지식 콘텐츠 기획 및 연재

• 자료구조, 실행 컨텍스트, HTTP 등 실무에서 유용한 개념을 쉽고 재미있게 설명

• 짧고 직관적인 콘텐츠로 개발 입문자들도 부담 없이 학습할 수 있도록 구성

활동 배경

• 컴퓨터공학을 전공했지만,CS 지식은 면접용이라고 생각했습니다.
  하지만 실무에 들어가 보니 기초가 곧 실력이라는 걸 깨달았습니다.
  같은 시행착오를 겪는 개발자들이 줄어들길 바라며, CS 개념을 더 쉽고 친근하게 전달하는 콘텐츠를 만들기 시작했습니다.