Frontend Developer

처음 뵙겠습니다
“현용찬” 입니다

“현” 재를 통해 미래를 만드는 개발자,
“용” 기 있는 도전과 밝은 에너지로 새로운 길을 개척합니다.
“찬” 란한 성장과 함께 발전해 나가고 싶습니다.

About Me

[의미를 찾는 프론트엔드]

모든 일에는 뜻이 있다고 믿습니다. 기능을 넘어 왜 이 경험이 필요한지부터 질문하고, 사용자와 비즈니스가 얻는 가치를 설계에 반영합니다.

[행동으로 길을 여는 사람]

가만히 있기보다 작더라도 실행합니다. 빠르게 가설을 세우고 검증하며, 주도적으로 문제를 정의하고 해결해 나갑니다.

[성장에 진심인 개발자]

매 프로젝트마다 배움을 기록하고 개선합니다. 오늘의 선택이 내일의 기준이 되도록, 더 나은 코드와 경험을 꾸준히 쌓아갑니다.

Tech Stack

HTML5

2+ years

80%

CSS3

2+ years

80%

JavaScript (ES6+)

2+ years

85%

TypeScript

2+ years

90%

Experience

실무 경험과 프리랜서 프로젝트

(주) 한국 기타가와
프리랜서
2025.08 - 2025.11

(주) 한국 기타가와

프론트엔드 개발 / 웹 퍼블리싱 / PM · 프리랜서

15년 이상 방치된 PHP 레거시 사이트를 Next.js/TypeScript로 전면 재구축하고, 1,000개 이상의 제품 데이터를 관리하는 관리자 페이지까지 기획·개발·QA 참여 및 진행 수행하였습니다.

핵심 작업 영역

레거시 리뉴얼관리자 페이지 개발On-Demand ISRDiscord 봇 연동GCS · CDNSEO 최적화
TypeScriptNext.jsZustandTailwind CSSEmotionGCSOn-Demand ISRVercel

[주요 역할 및 성과]

- 레거시 전면 재구축 (PHP → Next.js): 15년 된 PHP 서버를 Next.js/TypeScript로 완전 대체하고 SSL(HTTPS) 적용 및 보안 취약점을 개선하여 모던 웹 아키텍처 기반의 안정성을 확보했습니다. - 대규모 데이터 렌더링 최적화 (SSG + On-Demand ISR): 1,000개 이상의 제품 데이터 렌더링 시 발생하는 서버 부하 병목을 SSG(generateStaticParams) + 부분적 On-Demand ISR 방식으로 해결하여 관리자가 제품을 수정·추가하면 실시간으로 홈페이지에 반영되도록 구현했습니다. Lighthouse 성능 12점→94점 (683%↑), 초기 로딩 4.8s→1.0s (79%↓) 달성 - 관리자 페이지 + Discord 봇 실시간 알림: 제품 CRUD·문의 관리 기능을 갖춘 관리자 페이지를 독자 설계하고, 제품 데이터 변경·추가 시 Discord 봇이 담당자에게 실시간 알림을 전송하는 모니터링 시스템을 구축했습니다. - Cloud 인프라 (GCS · CDN): 로컬 스토리지 한계 극복을 위해 Google Cloud Storage API를 연동하여 Admin 제품 이미지 CRUD 및 Contact Us 파일 첨부 기능을 서버 부하 없는 확장형 아키텍처로 구현했습니다. - SEO 비즈니스 성과: Core Web Vitals(LCP·INP·CLS) 주간 추적, 시멘틱 마크업 및 메타데이터 동적 생성 구현으로 구글·네이버 검색 월 노출 0→1,900회, CTR 11.41% 달성 - DevOps: Vercel CI/CD 파이프라인 구축 및 MX 레코드 설정을 통한 기업 메일 시스템 최적화

Publications & Awards

논문 등재 및 수상 이력

논문2025.06

한국엔터테인먼트산업학회

사용자 선호 기반 맞춤형 길 찾기 및 장소 추천 서비스 — AI 기반 인포테인먼트 기술을 활용한 정보 편의성 향상 방안

졸업 작품 '내길만' 프로젝트의 기술적 독창성과 서비스 설계를 학술 논문으로 정리하여 학회에 등재 및 발표하였습니다.

논문 보기
수상2024.09

전국 연합 동아리 SW 해커톤

전국 연합 동아리 SW 해커톤 1등 (단장상)

첫 해커톤 도전에서 무박 2일간 건강한 수분 섭취 습관 형성 서비스 '물렐루야!'를 기획·개발하여 팀을 1등으로 이끌었습니다.

Projects

Dreamics.ai - AI 꿈 웹툰 헬스케어 플랫폼

[주요 역할 및 성과]

- 멀티모달 AI 3종 동시 통합: GPT-5-nano(장면 분해·감정 분석), DALL-E 3(웹툰 이미지 생성), Whisper(음성→텍스트 변환)를 하나의 파이프라인으로 연결하여, 꿈 한 편을 20초 이내에 4컷 웹툰으로 자동 완성하는 End-to-End 시스템을 구현했습니다. - 초기 로딩 40% 개선 및 번들 최적화: 코드 스플리팅(Dynamic Import)과 Lazy Loading, React.memo·useMemo·useCallback 기반 메모이제이션을 적용하여 초기 번들 크기를 387KB, 로딩 시간을 2.1초로 달성했습니다 (목표 3초 대비 30% 초과 달성). - TypeScript 100% 커버리지로 런타임 안정성 확보: 20개 이상의 인터페이스(DreamScene, DreamAnalysis, DreamHealthIndex 등)를 중앙 타입 정의로 관리하여 컴파일 타임 에러 제로를 달성하고, 4개 Zustand 스토어(Auth·Dream·Chat·Health)로 복잡한 상태를 모듈화했습니다. - 헬스케어 비즈니스 모델 설계: 글로벌 디지털 헬스케어(2030년 $6,600억) + 웹툰·AI만화 시장(2030년 $483억)을 분석하고, Freemium(월 1,990원~) + B2B SaaS(수면클리닉·심리상담센터 월 50만원) 이중 수익 구조를 설계하여 MAU 10,000명 기준 MRR 1,000만원 달성 로드맵을 수립했습니다.

League of Gacha - 롤 프로게이머 랜덤 가챠 게임

[주요 역할 및 성과]

- 런칭 14일 만에 누적 사용자 2,600명 달성: 바이브 코딩(AI 협업)으로 기획~배포 전 과정을 단 2일 만에 완성하고 즉시 서비스를 오픈하여, 빠른 실행력과 높은 초기 사용자 유입을 동시에 증명했습니다. - 데이터 기반 UX 개선 사이클 구축: Microsoft Clarity(히트맵·세션 녹화)와 Google Analytics(사용자 행동 퍼널)를 연동하여 실사용자 데이터를 수집하고, 이를 바탕으로 UI 개선 및 신규 기능(SNS 공유 미리보기, 페이커 모드 등)을 지속 배포하는 운영·유지보수 체계를 구축했습니다. - Firebase 기반 실시간 커뮤니티 플랫폼 구현: Firebase Realtime Database를 도입해 로스터 공유·좋아요·댓글 기능을 구현하고, 커뮤니티 스토리지 아키텍처를 직접 설계하여 확장 가능한 서비스 구조를 마련했습니다. - 한/영 이중 언어 SEO 최적화: 시멘틱 HTML, OG 이미지 자동 생성, RSS 피드, sitemap 등록을 통해 국내외 검색 유입을 극대화하고, Cloudflare Pages를 활용한 글로벌 CDN 배포로 안정적인 성능을 확보했습니다.

개인 포트폴리오 웹사이트 제작

[주요 역할 및 성과]

- 성능 최적화: 빌드 프로세스 최적화를 통해 Lighthouse 성능 점수 95점 이상을 달성하고, 초기 로딩 번들 크기를 102KB까지 감소시켰습니다. - UI/UX 설계 및 개발: 재사용 가능한 컴포넌트 아키텍처를 설계하여 유지보수성을 높이고, Framer Motion의 whileInView 옵션으로 스크롤 애니메이션을 최적화하여 부드러운 사용자 경험을 제공했습니다. - 배포 및 운영: 직접 도메인을 구매하고 Google Search Console에 사이트맵을 등록하는 등 SEO 작업을 통해 실제 검색 엔진에 노출되는 라이브 서비스를 운영하고 있습니다.

[Vibe coding] 운빨 고양이 달리기 게임

[주요 역할 및 성과]

- 상태 동기화 문제 해결: React UI와 Canvas 게임 로직 간의 상태 동기화 문제를 Zustand를 도입하여 100% 해결하고, 정확한 게임 일시정지 및 능력치 업데이트를 구현했습니다. - Canvas 렌더링 최적화: 다수의 객체 렌더링으로 인한 FPS 저하 문제를 '오프스크린 Canvas'와 '객체 컬링' 기법으로 해결하여, 모든 스테이지에서 안정적으로 60 FPS를 유지하도록 성능을 개선했습니다. - AI 워크플로우 구축: 기획(Perplexity), 디자인(Gemini), 개발(Copilot) 등 전 과정에 AI를 활용하여 아이디어를 빠르게 프로토타이핑하고 완성하는 새로운 개발 방식을 성공적으로 구축했습니다.

[Vibe coding] 별똥별 게임

[주요 역할 및 성과]

- 초기 로딩 성능 개선: 동적 임포트(Dynamic Import)를 활용해 초기 번들 크기를 40% 감소시키고, 모바일 환경의 초기 로딩 시간을 3초 이상에서 1초 이내로 단축하여 Lighthouse 성능 점수를 92점까지 향상시켰습니다. - 상태 관리 시스템 구축: 복잡한 게임 상태로 인한 버그를 해결하기 위해 TypeScript와 Zustand를 결합한 타입-안전 전역 상태 관리 시스템을 구축하여 상태 관련 버그를 90% 이상 감소시켰습니다. - 1인 서비스 런칭: 기획, 개발뿐만 아니라 직접 도메인을 구매하고 Google SEO 작업을 완료하여, 검색 엔진에 노출되는 실제 라이브 서비스를 배포하고 운영하는 경험을 했습니다.

[멋쟁이사자처럼13기 중앙 해커톤]TOOR - 너와 나의 투어를 잇는 토박이

[주요 역할 및 성과]

- 데이터 기반 기획: 실제 타겟층 대상 설문조사를 진행하여 얻은 데이터로 기획의 방향성을 설정하고 기능 명세서를 작성하여, 감이 아닌 데이터에 기반한 서비스를 기획하는 능력을 증명했습니다. - 초기 로딩 성능 60% 개선: React Lazy Loading을 활용한 코드 스플리팅을 적용하여 초기 번들 크기를 줄이고, 첫 화면 렌더링 시간을 3초에서 1초 이하로 단축하여 쾌적한 사용자 경험을 제공했습니다.

[Capstone] 내길만 - AI 기반 맞춤형 경로 추천 서비스

[주요 역할 및 성과]

- PM 및 UI/UX 설계: 시장 조사를 통해 서비스의 방향성을 수립하고 Notion으로 기획을 구체화했습니다. Figma를 활용하여 전체 서비스의 UI/UX 설계를 직접 담당하며 사용자 중심의 인터페이스를 구축했습니다. 또한 Figma를 통해 인터랙티브 프로토타입을 제작하여 사용자 흐름과 주요 인터랙션을 실제처럼 검증했습니다. - 코드 안정성 및 협업 효율 개선: TypeScript를 전면 도입하여 복잡한 상태 데이터로 인한 런타임 에러를 70% 감소시키고, 명확한 타입 정의를 통해 팀원 간의 커뮤니케이션 비용을 줄였습니다. - 학술적 성과 인정: 프로젝트의 기술적 독창성과 정보 편의성 향상 방안을 인정받아, 한국엔터테인먼트산업학회에 "사용자 선호 기반 맞춤형 길 찾기 및 장소 추천 서비스 AI 기반 인포테인먼트 기술을 활용한 정보 편의성 향상 방안" 주제로 논문을 등재하고 직접 발표하는 성과를 거두었습니다.

[전국 연합 동아리 SW 해커톤 1등] 물렐루야! - 물은 답을 알고 있다.

[주요 역할 및 성과]

- 전국 연합 동아리 SW 해커톤 1등(단장상) 수상: 첫 해커톤 도전에서 팀의 1등 수상을 이끌었습니다. - PM : 팀장으로서 아이디어 기획부터 최종 발표까지 프로젝트 전 과정을 책임졌습니다. 무박 2일이라는 짧은 시간 동안 팀원들의 역할을 조율하고 동기를 부여하며 성공적으로 프로젝트를 완수했습니다. - FE Lead : React 기반의 프론트엔드 개발을 리드하며, 메인 대시보드, 음료 기록, 통계 UI 등 사용자의 핵심 경험을 구성하는 주요 기능들을 직접 구현했습니다.

Let's Work Together

새로운 프로젝트나 협업 기회에 대해 이야기 나누고 싶습니다.
언제든 연락주세요.