미리보기

웹 서비스의 프론트엔드 개발 및 유지보수를 담당하며, 디자인 시안 구현과 협업 커뮤니케이션을 통해 제품 완성도를 높이는 역할을 수행했습니다.

담당 프로젝트 및 역할

1. 리픽 (프론트엔드 개발자)

2023.12 ~ 2024.02 | 백엔드 1명, 서버 1명, 프론트 1명 | 기여도 70%

링크: 서비스 바로가기 | Figma 시안

• Vue.js + TypeScript 기반 UI 개발 및 성능 최적화

• Pinia를 통한 상태 관리 및 API 연동으로 데이터 흐름 안정화

• 컴포넌트 기반 설계로 유지보수성과 재사용성 확보 → 개발 속도 40% 향상

• Storybook으로 UI 컴포넌트 문서화 → 디자이너와의 협업 효율 증대

• 불필요 렌더링 제거 및 리팩토링을 통해 페이지 로딩 속도 30% 개선

2. 인천교육청 교육이음 (웹디자이너 & 프론트엔드)

2023.11 ~ 2024.01 | 디자인, 페이지 개발 | 기여도 90%

링크: 사이트 링크 | 개발 페이지 리스트 | 관리자 페이지 리스트

• XD를 활용한 교육 플랫폼 UI/UX 디자인 및 프로토타이핑

• HTML, CSS, JavaScript로 반응형 퍼블리싱 및 웹접근성 대응

• 웹 표준, 크로스 브라우징, 유지보수성 고려한 마크업

• 사용자 편의성 및 관리자 UI 개선 작업 수행

유지보수 프로젝트 리스트

웹 접근성 및 기능 개선 중심의 유지보수 프로젝트

디자인, 마크업, 프론트엔드 전반에 참여, 기존 레거시 코드 개선 및 웹 접근성(A11Y) 강화, 기능 추가 수행

• 양구 수목원

  링크: 개발 페이지 리스트 | 관리자 페이지 리스트

• 환경책임투자 종합플랫폼

  링크: 운영 사이트 | 개발 페이지 리스트

• 한국이민재단

  링크: 운영 사이트 | 개발 페이지 리스트

• 사회보장정보원

  링크: 운영 사이트 | 개발 페이지 리스트

• 코네틱(KONETIC)

  링크: 운영

  사이트 | 개발 페이지 리스트

주요 프로젝트 및 역할

1. Cosmostation Chrome 확장 프로그램 개발 (크롬 웹 익스텐션 부서)  

React + TypeScript 기반의 멀티체인 암호화폐 지갑 개발 보조

• Web3 애플리케이션과 상호작용을 위한 개인 토큰 추가 및 자산 관리 대시보드 기능 구현

• 상태 관리 흐름 개선 및 불필요한 리렌더링 제거 → 특정 자산 조회 시 렌더링 횟수 40% 감소

• 컴포넌트 구조 및 이벤트 처리 방식 리팩토링 → 전체 렌더링 반응 속도 1.5초 → 0.8초로 단축

• 번들링 최적화 및 의존성 관리 → 최종 번들 사이즈 30% 감소, 크롬 스토어 배포 대응 속도 향상

2. Mintscan 대시보드 개발 (Mintscan 부서)  

Svelte 기반의 블록체인 네트워크 데이터 시각화 대시보드 개발

• API 기반 실시간 데이터 업데이트 기능 구현

• 아토믹 설계 기반 재사용 가능한 UI 컴포넌트 설계 → 전체 코드량 약 25% 절감

• 상태 의존성 명확화 및 렌더링 최적화 → 평균 렌더링 시간 30% 단축

• SWR을 통한 데이터 캐싱 적용 → 페이지 전환 시 로딩 시간 2초 → 0.7초로 개선

주요 업무 및 기여

교내 웹사이트 유지보수 & 리뉴얼 사이트 구조 개선 및 UI 최적화 경험

• HTML, CSS, JavaScript, jQuery를 활용해 중복된 UI 구조 통합 및 재설계

• 공지사항과 이벤트 전달률 향상을 위해 팝업 UI 직접 디자인 및 구현  

  → 기존 대비 클릭률 2배 이상 증가 (Google Analytics 기준)

• 레거시 코드 리팩토링: 불필요한 JS 로직 제거 및 CSS 클래스 네이밍 정리  

  → 페이지 로딩 속도 개선, UI 렌더링 오류 발생률 감소

실시간 모임 플랫폼 서비스 | 프로젝트 설계부터 배포까지 전방위 리딩

팀장 (FE 4명 / BE 1명 / DE 1명)  - 팀 빌딩, 설계, 개발, 최적화, 배포까지 End-to-End 주도

"프로젝트를 '잘 만드는 것'을 넘어서,  함께 성장하고 싶은 팀장이 되고자 한 2개월이었습니다."

기술스택

Next.js, Typescript, Tailwind CSS, React-Query, Zustand, Framer Motion, Webpack, PWA, Jest + RTL, Cypress, CircleCI, Sentry, Codecov, Google Analytics, robots.txt / sitemap, IndexedDB (idb), Jira

링크

배포 링크 | 깃허브 | 시연 영상 | 프로젝트 위키

설계 및 개발 리딩

• Next.js 기반 아키텍처 설계 및 기술 스택 결정 → 프로젝트 방향과 구조 정의

• 컴포넌트 & 상태관리 리팩토링 → 단일 책임 원칙 적용, 가독성 및 재사용성 향상

• Zustand + React Query 병행 전략 설계 → 불필요 렌더링 50% 감소, API 호출량 40% 절감  

• SSR + ISR 최적화 → FCP 3.2s → 1.2s 단축, SEO 대응 완료

• PWA 적용 → 모바일 최적화 및 크로스 플랫폼 UX 강화

• Jest + RTL, Cypress 기반 테스트 환경 구축 → QA 자동화 및 안정성 확보

팀 리딩 & 협업

• Jira 기반 스프린트 관리 → 주간 단위 이슈 트래킹과 우선순위 조정

• 정기 회의 운영, 일정 체크, PR, 코드 리뷰, 짝프로그래밍 문화 정착 → 전체 일정 마감률 100%, 팀원 생산성 유지 

• 백엔드 및 디자이너와의 능동적 협업 주도 → 

  API 설계, 로직 분리, 인터랙션 연결 등 다방면 조율

• 항상 유쾌하고 밝은 분위기를 유지해 팀 내 심리적 안정감 형성

• 최신 기술, 아티클, 로직 구조 등을 공유하며 팀 전체 기술 성장 유도

쿠버네티스 기반 실시간 커뮤니케이션 플랫폼 구축  

채팅 · WebRTC · PWA · 네트워크 최적화 전방위 주도  

기술스택

React , TypeScript , Redux Toolkit , SWR , React-query, Tailwind CSS , Framer Motion , WebSocket (SockJS + STOMP) , WebRTC (simple-peer) , Axios , Firebase , Webpack , PWA (Workbox) , Jest + RTL , Cypress , pnpm , Jira

링크

배포 링크 | 깃허브 | 프로젝트 위키

사용자 페이지 구현 및 상태 관리

• React + Redux 기반의 사용자 상태 관리 시스템 구축

• WebSocket 이벤트 기반의 실시간 유저 상태 반영

  • 초기에는 SWR의 캐싱 전략을 활용해 API 호출 최소화 및 리렌더링 감소

    → 이후 React Query로 마이그레이션하여 비동기 상태 관리 및 캐싱 전략을 더욱 세분화

  • Redux를 활용한 글로벌 상태 공유로 데이터 복구 및 접근성 강화

채팅 & 실시간 소통 기능

• WebSocket 기반 채팅 시스템 구축  

  → 최신 메시지, 유저 상태 동기화 유지 및 서버 부하 최소화

• WebRTC를 통한 실시간 미디어 스트리밍 구현  

  → 화면 공유, 음성/영상 통화 지원

• PWA 적용 → 크로스 플랫폼 UX 최적화 및 성능 개선  

• Webpack 코드 스플리팅 및 번들 최적화 → 초기 로딩 속도 향상

배포 및 인프라 협업

• 쿠버네티스 기반 마이크로서비스 배포 대응  

• 카나리 배포 적용 → 트래픽 점진 전환으로 무중단 배포 실현  

• DevOps 스터디 환경 내 프론트엔드와 인프라 연계 실습 주도

개발자를 위한 대시보드 기반 스크럼 관리 시스템  

프론트엔드 및 디자인 단독 개발 (FE 1명 / BE 4명)  

기술 스택  

Vue, JavaScript, Pinia, SpringBoot, Spring Security, Kafka, Redis, MariaDB, n8n, Jenkins, Kubernetes, Istio, Prometheus, Grafana, Nginx

링크

배포 링크 | 깃허브 링크 | 시연 영상 | 발표 자료

프론트엔드 개발 및 성능 최적화

• Vue 기반 대시보드 시스템  → 스크럼 관리, 채팅, 실시간 알림, AI 기능을 통합한 복합형 웹서비스 구현  

• 100개 이상 API 연동 + 프론트엔드 전담 개발  

  → 대규모 SPA 구조 설계, 비동기 데이터, 상태 관리 최적화

• Vue 컴포넌트 구조 설계 및 emit 기반 이벤트 전달 체계 구축  

• Pinia 도입 → 상태 관리 체계 통합 및 모듈 분리로 유지보수성 향상  

DevOps 및 백엔드 협업 기여

• Kafka 기반 채팅 기능 구현 지원 → 실시간 데이터 송수신 구조 협업 설계  

• Jenkins 파이프라인 구성 지원 → CI/CD 자동화 실습 및 적용  

• Prometheus + Grafana 기반 백엔드 모니터링 시스템 구축 지원  

AI 기능 통합

• n8n 활용 AI 챗봇 기능 기획 및 구현  

  → 업무 알림, 미팅 요약 등 자동화 시나리오 제작  

  → 사용자 경험 및 업무 흐름 보조 기능 강화

스터디 기록 링크

• 매주 프론트엔드 성능 개선 & 최적화 주제 선정 → 팀원들과 심층 학습 & 실습

• Wiki 문서화 + 발표 시스템 운영 → 학습한 내용을 체계적으로 정리하여 지식 공유

• 주요 학습 주제:

  • React 렌더링 최적화 → useTransition, useDeferredValue, SWR 활용

  • TDD & 테스트 자동화 → Jest, RTL, Cypress 실습

  • CI/CD & 번들링 최적화 → Webpack 트리 쉐이킹, 코드 스플리팅, 빌드 성능 개선

스터디 기록 링크

[모던 자바스크립트 딥다이브], [우아한 타입스크립트 리액트], [모던 리액트 딥다이브]

• 매주 책을 읽고 학습한 개념을 코드로 구현 & 발표

• 학습 내용을 실제 프로젝트에 적용하여 실무 활용도 극대화

블로그 링크

• 프론트엔드 & 백엔드 개발자들이 서로 풀스택 개념을 가르쳐주는 학습 방식 도입

  • 프론트엔드는 API 설계 & DB 설계 학습

  • 백엔드는 React 컴포넌트 & 상태 관리 학습

• 1주 1기술 개인 블로그 작성 & 발표 → 최신 기술 트렌드 & 실무 경험 공유

[ 링크 ] 배포 링크, 깃허브 링크

프론트엔드, 백엔드, 디자이너 협업 해커톤 | 20시간 MVP 개발 & 배포

• 기획 ~ 개발 ~ 배포까지 전 과정 20시간 내 완료

  • 실시간 협업 & 애자일 방식 적용하여 빠른 의사결정과 개발 진행

  • 디자이너 & 백엔드 개발자와 원활한 협업을 통해 최적의 UI/UX 및 API 연동 구현