미리보기
기본 정보
[서비스의 병목을 찾아내고 최적의 방법으로 해결하는 프론트엔드 개발자 입니다.] - 프론트엔드 개발자로서 윈도윙 기법을 활용해 초기 렌더링 시간을 2초 이상 단축시키는 등 사용자 체감 성능 개선에 주력해왔습니다. - 실제 사용자 데이터를 기반으로 성능 병목점을 분석하고, 최적화된 해결방안을 도출하여 서비스의 안정성을 향상시켰습니다. - 지속적인 모니터링과 사용자 피드백을 바탕으로 서비스의 장기적인 발전 방향을 제시하고 실행하는데 집중하고 있습니다.
기술 스택
React, Next.js, vue, Nuxt.js, JavaScript, TypeScript, Cypress, playwright, TailwindCSS, scss, storybook, Socket.io, gemini
경력
오프너드 주식회사
매니저 | 코어개발팀
2022.11. ~ 2024.08. (1년 10개월)
[회사 소개]
다양한 산업 분야에 맞춤형 IT 솔루션을 제공하는 시스템 통합(SI) 전문 기업입니다.
각 산업의 특성을 고려하여 맞춤형 시스템을 구축하고, 안정적인 운영 및 유지보수 서비스를 제공합니다.
[담당 업무]
이커머스 플랫폼, 투자 서비스, 커뮤니티 서비스 등 다양한 B2C/B2B 웹 서비스의 프론트엔드 개발을 담당했으며,
특히 반응형 웹 디자인과 하이브리드 앱 개발에서 전문성을 발휘했습니다.프로젝트 전반에 걸쳐 요구사항 분석, UI/UX 설계, 프론트엔드 개발, 품질 검증까지 체계적인 개발 프로세스를 주도했습니다.
재사용 가능한 컴포넌트 라이브러리를 구축하여 개발 생산성을 향상시켰으며, 최신 프론트엔드 기술 스택을 도입하여 서비스 품질 개선에 기여했습니다.
프로젝트
마라톤 대회 지원 시스템
오프너드
2024.04. ~ 2024.08.
소개: 대규모 참가자 신청을 안정적으로 처리하는 국민일보 마라톤 대회 웹 서비스
기술스택: Vue.js, Nuxt.js, TypeScript, Tailwind CSS, Auth.js
주요성과:
대규모 트래픽 처리
신청 시작 시간대(오전 10시)에 집중되는 약 1만 명의 동시 접속자를 안정적으로 처리
대기열 시스템을 구현하여 서버 부하를 분산시키고,실시간 대기 순번과 예상 대기 시간을 제공하여 사용자 이탈 방지
Web Worker를 활용하여 복잡한 대기열 계산을 백그라운드 스레드로 분리함으로써,메인 스레드의 부하를 줄여 화면 렌더링 속도 개선
안정적인 결제 시스템 구현
토스페이먼츠 결제 위젯을 활용하여 개별/단체 결제 프로세스를 구현하고,다양한 결제 수단 통합으로 사용자 편의성 향상
결제 상태에 따른 페이지 라우팅과 실패 상황에 대한 사용자 친화적 에러 핸들링으로안정적인 결제 경험 제공
고려대학교 최고경영자과정(AMP) 총교우회 앱 개발
오프너드
2024.01. ~ 2024.04.
소개: 총교우회 회원들의 소통과 정보 공유를 위한 커뮤니티 앱
기술스택: Vue.js, Nuxt.js, TypeScript, Tailwind CSS, Socket.IO
주요성과:
이미지 최적화 및 관리
이미지 리사이징과 압축을 통해 대용량 이미지 파일 처리 최적화
Lazy Loading 적용으로 초기 페이지 로드 시간 40% 단축
WebP 포맷 변환으로 이미지 용량 70% 이상 감소 및 이미지 불러오는 시간 40% 감소
성능 최적화 및 사용자 경험 개선
쓰로틀링을 활용한 검색 기능 최적화로 서버 부하 감소 및 응답 속도 개선
쓰로틀링을 활용한 검색 기능 최적화로 API 호출 70% 감소에 따른 서버 부하 개선으로 검색 응답 시간 감소
스켈레톤 UI 적용으로 데이터 로딩 시 사용자 경험 향상
부동산 조각투자 플랫폼 구현
오프너드
2023.11. ~ 2024.01.
소개: 부동산 개발 프로젝트에 개인이 참여할 수 있도록 돕는 플랫폼
기술스택: React, TypeScript, Scss, styled-component, Storybook
주요성과:
빌드 성능 최적화
CRA에서 Vite로 마이그레이션하여 로컬 개발 환경의 컴파일 속도 개선
레거시 코드 제거 및 리팩토링으로 번들 크기를 45% 개선 (2.8MB -> 1.5MB)
로컬 컴파일 속도 85% (30초 -> 5초) 단축, 빌드 시간 65% (8분 → 3분) 단축
디자인 시스템 구축
재사용 가능한 공통 UI 컴포넌트 10개 이상 개발로 DX 향상
Storybook을 활용한 컴포넌트 문서화로 팀 내 커뮤니케이션 효율화
TypeScript와 styled-component를 활용한 타입 안정성 및 스타일 일관성 확보
럭셔리판다 쇼핑몰
오프너드
2023.01. ~ 2023.11.
소개: 대규모 상품을 효율적으로 관리하고 표시하는 이커머스 플랫폼 개발 [링크]
기술스택: Vue, Nuxt.js, Typescript, Tailwind CSS, Cypress
주요성과:
대규모 데이터 최적화 및 성능 개선
서버를 거쳐 전달하던 이미지 업로드 방식을 프론트엔드에서 S3로 직접 전송하도록 개선함으로써 200만 개 상품 이미지 처리 시 서버 부하 30% 감소
5,000개 이상의 대량 체크박스 렌더링 시 발생하는 성능 저하를 윈도윙 기법으로 해결하여 화면에 보이는 영역의 요소만 렌더링하도록 최적화하여 DOM 노드 수 90% 감소
무한 스크롤이 적용된 페이지에서 다른 페이지로 이동했다가 돌아올 때, 가상 리스트를 활용하여 이전 스크롤 위치와 데이터를 복원함으로써 사용자 경험 개선
Intersection Observer API를 활용한 이미지 Lazy Loading 구현으로 초기 렌더링 성능 개선
품질 관리 및 테스트 자동화
로그인부터 결제 전 단계까지의 핵심 비즈니스 로직을 Cypress로 자동화하여 수동 테스트 대비 테스트 수행 시간 70% 단축
주요 컴포넌트와 함수에 대한 유닛 테스트 100개 이상을 구현하여 코드 변경 시 발생할 수 있는 잠재적 버그를 사전에 검출
키워드 허브
개인
2025.03. ~ 2025.03.
소개: 네이버 키워드 데이터를 활용한 검색량 조회 및 키워드 분석 서비스
기술스택: Next.js, TypeScript, Tailwind CSS, Zustand, Shadcn UI, Gemini AI
역할:
프론트엔드 개발 전담(1인)
요구사항 분석부터 설계, 개발, 배포까지 전체 프로세스 주도
주요성과:
AI 활용 연관 키워드 기능 구현
Google Gemini API 연동하여 검색 키워드와 연관 키워드 간 관련도 점수 산출 시스템 개발
연관도 점수에 따른 키워드 분류 및 시각화로 사용자의 키워드 분석 효율성 향상
요청 제한을 고려한 큐 시스템과 재시도 로직 구현으로 API 호출 안정성 확보
대규모 데이터 처리 최적화
최대 100개 키워드를 동시에 처리할 수 있는 배치 처리 시스템 구현으로 API 요청 수 90% 감소
배치 처리 과정에서 진행률 표시 및 지연 로딩 기법을 적용하여 사용자 경험 개선
데이터 요청 디바운싱과 캐싱 전략으로 중복 요청 방지 및 응답 속도 50% 향상
성능 최적화 및 사용자 경험 개선
테이블 컴포넌트 메모이제이션과 선택적 렌더링으로 대용량 키워드 데이터 처리 성능 개선
react-beautiful-dnd 라이브러리를 활용한 테이블 컬럼 커스터마이징 기능 구현
반응형 디자인 적용으로 다양한 환경에서의 사용성 확보
모듈화 및 재사용성 향상
Shadcn UI 기반의 컴포넌트 시스템 구축으로 일관된 UI/UX 제공
상태 관리 로직과 UI 로직 분리를 통한 관심사 분리 및 코드 가독성 향상
정글타워
개인
2024.12. ~ 2025.01.
소개: 크래프톤 정글의 메타버스 플랫폼 개발
기술스택: Next.js, React, Typescript, shadch/ui, Tailwind CSS, Zustand, Socket.IO, TanStack Query
역할:
프론트엔드 3명, 백엔드 2명으로 구성된 팀의 프론트엔드 개발자
UX/UI 디자인 시스템 설계
주요성과:
대규모 트래픽 처리
Canvas 객체의 실시간 동기화 과정에서 발생하는 대용량 데이터 전송 문제를 Pako.gzip 라이브러리를 사용하여 대용량 데이터를 80% 압축시킴으여써 네트워크 트래픽 70% 감소 및 드로잉 성능 개선
Canvas 객체의 상태(위치, 크기, 각도)를 추적하는 상태 비교 알고리즘을 구현하여 변경이 발생한 객체만 선택적으로 렌더링함으로써 불필요한 리렌더링 방지
큐 시스템과 락 메커니즘을 도입하여 다중 사용자의 동시 드로잉 충돌을 방지하고 데이터 일관성 유지소켓 기반 실시간
소켓 기반 실시간 통신 아키텍처 구현
여러 탭에서 같은 사용자가 접속할 때 중복으로 연결되는 문제가 발생했고, Local Storage를 사용한 중복 연결 방지 시스템을 구현해 해결
Zustand로 소켓 인스턴스를 전역 상태로 관리하여 컴포넌트 간 실시간 데이터 공유 및 상태 동기화 효율성 향상
개발 환경 표준화 및 품질 관리
커밋 메시지 규칙을 도입하고 Husky로 검증을 자동화하여 팀원들이 코드 변경 이력을 빠르게 파악하고 효율적으로 디버깅할 수 있는 환경 구축
PR/이슈 템플릿을 설계하고 작업 내용, 진행 상황, 결과물을 체계적으로 문서화함으로써 팀 간 작업 공유와 진행 상황 파악이 용이하도록 개선
쉐어 플레이트
개인
2022.07. ~ 2022.10.
위치 기반으로 근처 이웃과 배달 음식을 공유할 수 있는 커뮤니티 서비스 개발
React Reqct TypeScript styled-component recoil
프로젝트 관리 및 설계
5인 팀의 프로젝트 리더로서 기획부터 개발 완료까지 전체 프로세스를 주도
매일 스크럼 회의를 진행해 팀원별 작업 현황을 공유하고 기술적 병목 구간을 파악 후 대응함으로써목표 기한 내 프로젝트 완수
포트폴리오
교육
크래프톤 정글
사설 교육 | SW 개발자 양성과정
2024.09. ~ 2025.01. | 수료
코드스쿼드
사설 교육 | 프론트엔드 개발자 양성과정
2022.01. ~ 2022.06. | 수료
전주대학교
대학교(학사) | 체육
2018.03. ~ 2018.06. | 중퇴
중경고등학교
고등학교 | 인문계
2015.03. ~ 2018.02. | 졸업
자기소개
성능 최적화
브랜드 선택 인터페이스의 성능 최적화를 통해 대규모 데이터 처리 시의 사용자 경험을 개선했습니다.
백엔드에서 JSON 형태로 제공되는 5,000개 이상의 브랜드 데이터를 체크박스 형태로 표시해야 하는 상황에서,
모든 요소를 동시에 렌더링하다 보니 과도한 DOM 노드 생성으로 인해 브라우저의 성능이 저하되고
사용자의 인터랙션에 지연이 발생하는 문제가 있었습니다.
이를 해결하기 위해 윈도윙 기법을 도입했는데, 사용자의 스크롤 위치를 실시간으로 감지하여
현재 뷰포트에 보이는 영역과 그 전/후 영역의 브랜드 체크박스만을 선택적으로 렌더링하도록 구현했습니다.
특히 스크롤 이벤트 발생 시 새로운 영역의 요소들을 부드럽게 렌더링하고 화면 밖으로 벗어난 요소들은
필요한 시점에 다시 렌더링하는 방식으로 최적화했습니다.
이를 통해 초기 5,000개 이상의 DOM 노드를 500개 이하로 줄여 프로젝트의 성능을 획기적으로 개선했습니다.
이러한 최적화로 대용량 데이터를 다루는 상황에서도 페이지 로딩 시간을 1초 이내로 단축하고,
스크롤 시에도 끊김 없는 부드러운 사용자 경험을 제공할 수 있게 되었습니다.
UX 최적화
저는 이커머스 서비스의 상품 리스트 페이지를 디바이스별로 최적화하여, 모바일 사용자의 체류 시간을
증가시킨 경험이 있습니다. 초기 UX 데이터 분석 결과, 모바일 사용자의 이탈률이 PC 사용자보다 훨씬 높다는 문제점이 있었습니다. 세부적인 행동 패턴을 분석한 결과, 모바일 환경에서는 페이지네이션 버튼을 조작하는 데 어려움을 겪는 사용자들이 많았다는 점이 주요 원인으로 파악되었습니다.
이를 해결하기 위해 PC와 모바일 각각의 사용 환경에 맞는 UI/UX 개선을 진행했습니다.
모바일에서는 사용자의 터치 기반 탐색을 고려하여 무한 스크롤 방식을 도입했고,
PC에서는 사용자들에게 익숙한 페이지네이션 방식을 유지했습니다.
이 프로젝트를 통해 데이터 기반의 의사결정 중요성을 배웠으며, 사용자들의 실제 사용 패턴과
디바이스 특성을 고려한 최적화된 경험 제공의 가치를 깊이 이해하게 되었습니다. 특히 같은 기능이라도
사용 환경에 따라 다른 접근 방식이 필요할 수 있다는 점을 실제 경험을 통해 배울 수 있었습니다.
주도적인 경험
테스트 코드 도입을 주도하여 팀의 개발 생산성 향상을 이끌어냈습니다. 당시 팀은 신규 기능 개발 후
예상치 못한 버그가 자주 발생하여 유지보수 비용이 증가하고, 이로 인해 전반적인 개발 생산성이
저하되는 상황이었습니다.
이러한 문제를 해결하기 위해 팀원들에게 테스트 코드 작성 방법과 필요성에 대해 세미나를 주최했습니다.
처음에는 "시간이 없어서 작성할 여유가 없다"는 의견도 있었지만, 제가 솔선수범하여 e2e 테스트를 작성하고
공유하면서 팀 전체가 테스트 코드 작성에 참여하게 되었습니다.
결과적으로 테스트 코드 작성은 팀의 자연스러운 문화가 되었고, 개발 프로세스의 필수 단계로 자리잡았습니다. 이는 잠재적인 버그를 사전에 발견하고 해결하는 체계적인 방법이 되었습니다. 특히 테스트 코드 작성이
습관화되면서 팀원 모두가 자신의 코드에 대한 확신과 자신감을 가질 수 있게 되었습니다.
팀워크 경험
크래프톤 정글의 개발자 양성 과정의 정글타워 프로젝트를 통해 팀워크란 서로의 부족함을 보완해주며
더 나은 방향으로 나아가는 것임을 알게 되었습니다.
메타버스를 주제로 5명의 팀원과 함께 5주간의 개발 프로젝트를 진행했습니다. 프론트엔드 3명(본인 포함),
백엔드 2명으로 구성된 팀에서, 저는 효과적인 프로젝트 관리를 위해 데일리 스크럼 미팅을 주도적으로
운영했습니다.
매일 아침 진행된 스크럼 미팅에서는 각 팀원이 기술적 이슈나 개발 과정에서 발생하는 문제점을 명확하게 공유했습니다. 이러한 개방적인 의사소통 체계는 프로젝트의 잠재적 위험요소를 조기에 발견하고 해결하는 데
큰 도움이 되었습니다.
이러한 소통 체계는 복잡한 메타버스 프로젝트에서 매우 중요한 역할을 했습니다. 실시간 렌더링,
사용자 인터랙션 등 기술적으로 도전적인 요소들이 많았지만, 일일 스크럼을 통해 문제를 조기에 발견하고
팀 전체의 지식과 경험을 활용하여 해결할 수 있었습니다.
체계적인 일일 스크럼 운영을 통해 프론트엔드와 백엔드 팀 간의 원활한 커뮤니케이션이 이루어졌고,
이를 바탕으로 모든 기능을 마감기한 내에 완성도 있게 구현할 수 있었습니다.
이러한 프로젝트 수행 능력을 인정받아 과정 내에서 가장 우수한 평가를 받게 되었습니다.
서로의 고충과 지식, 경험을 나누는 팀워크를 통해 효율적인 업무 수행이 가능했던 이 경험을 바탕으로,
입사 후에는 동료의 어려움에 먼저 다가가고 실질적인 도움을 주는 개발자가 되겠습니다.