프론트엔드 개발자

한승찬

[서비스의 병목을 찾아내고 최적의 방법으로 해결하는 프론트엔드 개발자 입니다.]

- 프론트엔드 개발자로서 윈도윙 기법을 활용해 초기 렌더링 시간을 2초 이상 단축시키는 등 사용자 체감 성능 개선에 주력해왔습니다.
- 실제 사용자 데이터를 기반으로 성능 병목점을 분석하고, 최적화된 해결방안을 도출하여 서비스의 안정성을 향상시켰습니다.
- 지속적인 모니터링과 사용자 피드백을 바탕으로 서비스의 장기적인 발전 방향을 제시하고 실행하는데 집중하고 있습니다.

한승찬_프론트엔드_개발자_포토폴리오.pdf

한승찬_프론트엔드_개발자_이력서.pdf

github

velog

소개: 대규모 참가자 신청을 안정적으로 처리하는 국민일보 마라톤 대회 웹 서비스기술스택: Vue.js, Nuxt.js, TypeScript, Tailwind CSS, Auth.js주요성과:대규모 트래픽 처리<ul><li>신청 시작 시간대(오전 10시)에 집중되는 약&nbsp;1만 명의&nbsp;동시 접속자를 안정적으로 처리<ul><li>대기열 시스템을 구현하여 서버 부하를 분산시키고,실시간 대기 순번과 예상 대기 시간을 제공하여 사용자 이탈 방지</li><li>Web Worker를 활용하여 복잡한 대기열 계산을 백그라운드 스레드로 분리함으로써,메인 스레드의 부하를 줄여 화면 렌더링 속도 개선</li></ul></li></ul>안정적인 결제 시스템 구현<ul><li>토스페이먼츠 결제 위젯을 활용하여 개별/단체 결제 프로세스를 구현하고,다양한 결제 수단 통합으로 사용자 편의성 향상</li><li>결제 상태에 따른 페이지 라우팅과 실패 상황에 대한 사용자 친화적 에러 핸들링으로안정적인 결제 경험 제공</li></ul>

마라톤 대회 지원 시스템

소개: 총교우회 회원들의 소통과 정보 공유를 위한 커뮤니티 앱기술스택: Vue.js, Nuxt.js, TypeScript, Tailwind CSS, Socket.IO주요성과: <ul><li>이미지 최적화 및 관리<ul><li>이미지 리사이징과 압축을 통해 대용량 이미지 파일 처리 최적화</li><li>Lazy Loading 적용으로 초기 페이지 로드 시간 40% 단축</li><li>WebP 포맷 변환으로 이미지 용량 70% 이상 감소 및 이미지 불러오는 시간 40% 감소 </li></ul></li><li>성능 최적화 및 사용자 경험 개선<ul><li>쓰로틀링을 활용한 검색 기능 최적화로 서버 부하 감소 및 응답 속도 개선</li><li>쓰로틀링을 활용한 검색 기능 최적화로 API 호출 70% 감소에 따른 서버 부하 개선으로 검색 응답 시간 감소</li><li>스켈레톤 UI 적용으로 데이터 로딩 시 사용자 경험 향상</li></ul></li></ul>

고려대학교 최고경영자과정(AMP) 총교우회 앱 개발

소개: 부동산 개발 프로젝트에 개인이 참여할 수 있도록 돕는 플랫폼기술스택: React, TypeScript, Scss, styled-component, Storybook주요성과:빌드 성능 최적화<ul><li>CRA에서 Vite로 마이그레이션하여 로컬 개발 환경의 컴파일 속도 개선</li><li>레거시 코드 제거 및 리팩토링으로 번들 크기를 45% 개선 (2.8MB -&gt; 1.5MB)</li><li>로컬 컴파일 속도 85% (30초 -&gt; 5초) 단축, 빌드 시간 65% (8분 → 3분) 단축</li></ul>디자인 시스템 구축<ul><li>재사용 가능한 공통 UI 컴포넌트 10개 이상 개발로 DX 향상 </li><li>Storybook을 활용한 컴포넌트 문서화로 팀 내 커뮤니케이션 효율화</li><li>TypeScript와 styled-component를 활용한 타입 안정성 및 스타일 일관성 확보</li></ul>

부동산 조각투자 플랫폼 구현

소개: 대규모 상품을 효율적으로 관리하고 표시하는 이커머스 플랫폼 개발 <a target="_blank" rel="noopener noreferrer nofollow" href="https://luxurypanda.co.kr">[링크]</a> 기술스택: Vue, Nuxt.js, Typescript, Tailwind CSS, Cypress주요성과:대규모 데이터 최적화 및 성능 개선<ul><li>서버를 거쳐 전달하던 이미지 업로드 방식을 프론트엔드에서 S3로 직접 전송하도록 개선함으로써 200만 개 상품 이미지 처리 시 서버 부하 30% 감소</li><li>5,000개 이상의 대량 체크박스 렌더링 시 발생하는 성능 저하를 윈도윙 기법으로 해결하여 화면에 보이는 영역의 요소만 렌더링하도록 최적화하여 DOM 노드 수 90% 감소</li><li>무한 스크롤이 적용된 페이지에서 다른 페이지로 이동했다가 돌아올 때, 가상 리스트를 활용하여 이전 스크롤 위치와 데이터를 복원함으로써 사용자 경험 개선</li><li>Intersection Observer API를 활용한 이미지 Lazy Loading 구현으로 초기 렌더링 성능 개선</li></ul>품질 관리 및 테스트 자동화<ul><li>로그인부터 결제 전 단계까지의 핵심 비즈니스 로직을 Cypress로 자동화하여 수동 테스트 대비 테스트 수행 시간 70% 단축</li><li>주요 컴포넌트와 함수에 대한 유닛 테스트 100개 이상을 구현하여 코드 변경 시 발생할 수 있는 잠재적 버그를 사전에 검출</li></ul>

럭셔리판다 쇼핑몰

소개: 네이버 키워드 데이터를 활용한 검색량 조회 및 키워드 분석 서비스기술스택: Next.js, TypeScript, Tailwind CSS, Zustand, Shadcn UI, Gemini AI역할:<ul><li>프론트엔드 개발 전담(1인)</li><li>요구사항 분석부터 설계, 개발, 배포까지 전체 프로세스 주도</li></ul>주요성과:AI 활용 연관 키워드 기능 구현<ul><li>Google Gemini API 연동하여 검색 키워드와 연관 키워드 간 관련도 점수 산출 시스템 개발</li><li>연관도 점수에 따른 키워드 분류 및 시각화로 사용자의 키워드 분석 효율성 향상</li><li>요청 제한을 고려한 큐 시스템과 재시도 로직 구현으로 API 호출 안정성 확보</li></ul>대규모 데이터 처리 최적화<ul><li>최대 100개 키워드를 동시에 처리할 수 있는 배치 처리 시스템 구현으로 API 요청 수 90% 감소</li><li>배치 처리 과정에서 진행률 표시 및 지연 로딩 기법을 적용하여 사용자 경험 개선</li><li>데이터 요청 디바운싱과 캐싱 전략으로 중복 요청 방지 및 응답 속도 50% 향상</li></ul>성능 최적화 및 사용자 경험 개선<ul><li>테이블 컴포넌트 메모이제이션과 선택적 렌더링으로 대용량 키워드 데이터 처리 성능 개선</li><li>react-beautiful-dnd 라이브러리를 활용한 테이블 컬럼 커스터마이징 기능 구현</li><li>반응형 디자인 적용으로 다양한 환경에서의 사용성 확보</li></ul>모듈화 및 재사용성 향상<ul><li>Shadcn UI 기반의 컴포넌트 시스템 구축으로 일관된 UI/UX 제공</li><li>상태 관리 로직과 UI 로직 분리를 통한 관심사 분리 및 코드 가독성 향상</li></ul>

키워드 허브

소개: 크래프톤 정글의 메타버스 플랫폼 개발기술스택: Next.js, React, Typescript, shadch/ui, Tailwind CSS, Zustand, Socket.IO, TanStack Query역할:<ul><li>프론트엔드 3명, 백엔드 2명으로 구성된 팀의 프론트엔드 개발자</li><li>UX/UI 디자인 시스템 설계</li></ul>주요성과:대규모 트래픽 처리<ul><li>Canvas 객체의 실시간 동기화 과정에서 발생하는 대용량 데이터 전송 문제를 Pako.gzip 라이브러리를  사용하여 대용량 데이터를 80% 압축시킴으여써 네트워크 트래픽 70% 감소 및 드로잉 성능 개선</li><li>Canvas 객체의 상태(위치, 크기, 각도)를 추적하는 상태 비교 알고리즘을 구현하여 변경이 발생한 객체만 선택적으로 렌더링함으로써 불필요한 리렌더링 방지</li><li>큐 시스템과 락 메커니즘을 도입하여 다중 사용자의 동시 드로잉 충돌을 방지하고 데이터 일관성 유지소켓 기반 실시간</li></ul>소켓 기반 실시간 통신 아키텍처 구현<ul><li>여러 탭에서 같은 사용자가 접속할 때 중복으로 연결되는 문제가 발생했고, Local Storage를 사용한 중복 연결 방지 시스템을 구현해 해결</li><li>Zustand로 소켓 인스턴스를 전역 상태로 관리하여 컴포넌트 간 실시간 데이터 공유 및 상태 동기화 효율성 향상</li></ul>개발 환경 표준화 및 품질 관리<ul><li>커밋 메시지 규칙을 도입하고 Husky로 검증을 자동화하여 팀원들이 코드 변경 이력을 빠르게 파악하고 효율적으로 디버깅할 수 있는 환경 구축</li><li>PR/이슈 템플릿을 설계하고 작업 내용, 진행 상황, 결과물을 체계적으로 문서화함으로써 팀 간 작업 공유와 진행 상황 파악이 용이하도록 개선</li></ul>

정글타워

위치 기반으로 근처 이웃과 배달 음식을 공유할 수 있는 커뮤니티 서비스 개발<code>React</code> <code>Reqct</code> <code>TypeScript</code> <code>styled-component</code> <code>recoil</code>프로젝트 관리 및 설계<ul><li>5인 팀의 프로젝트 리더로서 기획부터 개발 완료까지 전체 프로세스를 주도</li><li>매일 스크럼 회의를 진행해 팀원별 작업 현황을 공유하고 기술적 병목 구간을 파악 후 대응함으로써목표 기한 내 프로젝트 완수</li></ul>

쉐어 플레이트

[회사 소개]<ul><li>다양한 산업 분야에 맞춤형 IT 솔루션을 제공하는 시스템 통합(SI) 전문 기업입니다. </li><li>각 산업의 특성을 고려하여 맞춤형 시스템을 구축하고, 안정적인 운영 및 유지보수 서비스를 제공합니다.</li></ul>[담당 업무]<ul><li>이커머스 플랫폼, 투자 서비스, 커뮤니티 서비스 등 다양한 B2C/B2B 웹 서비스의 프론트엔드 개발을  담당했으며, 특히 반응형 웹 디자인과 하이브리드 앱 개발에서 전문성을 발휘했습니다.</li><li>프로젝트 전반에 걸쳐 요구사항 분석, UI/UX 설계, 프론트엔드 개발, 품질 검증까지  체계적인 개발 프로세스를 주도했습니다. </li><li>재사용 가능한 컴포넌트 라이브러리를 구축하여 개발 생산성을 향상시켰으며,  최신 프론트엔드 기술 스택을 도입하여 서비스 품질 개선에 기여했습니다.</li></ul>