프론트엔드 개발자

윤원빈

단순한 UI 구현을 넘어서, 기능의 완성도와 사용자 경험까지 고민하는 프론트엔드 개발자입니다.
Next.js와 TypeScript 기반의 서비스를 단독으로 개발하며, SSR과 CSR 환경 모두에서 안정적인 사용자 경험을 제공해왔습니다. Core Web Vitals 점수를 51점에서 93점으로 개선하는 등 퍼포먼스 최적화에 강점을 가지고 있으며, 콘텐츠 보안, 다국어(i18n) 적용, PG 결제 연동, AWS EC2 배포까지 실무 중심의 다양한 과제를 직접 해결해왔습니다. 디자인 가이드를 바탕으로 정밀한 UI를 구현하고, 디자이너와의 협업을 통해 일관된 사용자 경험을 완성하는 데 집중해왔습니다.

책임감

협업 지향

커뮤니케이션

자기 주도적

긍정적

관광통역안내사

컴퓨터활용능력

CHINESE

ENGLISH

<h2>"속도도 SEO도 놓칠 수 없어서, Vite 버리고 Next.js 14로 갈아탔습니다"</h2>담당 업무: 프론트엔드 개발 (단독 진행) 기술 스택: React, Next.js 14 (App Router), Zustand, AWS EC2, NginX, PM2, Tailwind CSS, Mui<h3>프로젝트 소개</h3>React+Vite로 개발된 기존 서비스가 SEO 및 성능 이슈로 성장에 한계가 있어, Next.js 14 (App Router)를 도입하여 전면 마이그레이션을 진행했습니다.<h3>해결 과제</h3><ul><li>SEO 최적화 부족: 기존 SPA는 메타 태그가 제대로 렌더링되지 않아 검색엔진 노출과 소셜 공유에 한계가 있었습니다.</li><li>느린 이미지 로딩 속도: 이미지 로딩이 지연되어 사용자 이탈률 증가 및 성능 저하가 발생했습니다.</li><li>복잡한 코드 관리: 여러 UI 라이브러리와 중복된 상태 관리(Zustand, Context API) 그리고 데이터 fetch에 두 가지 라이브러리 코드가 복잡하게 얽혀있어서 유지보수가 어려웠습니다.</li></ul><h3>주요 수행 작업</h3><ul><li>Next.js 14 App Router 도입<ul><li>서버 사이드 렌더링(SSR) 및 메타 데이터 관리로 SEO 문제를 해결했습니다.</li></ul></li><li>코드 최적화 및 단순화<ul><li>UI 라이브러리를 기존 3개에서 1개로 통합했습니다.</li><li>Zustand와 Context API의 중복 사용을 제거하고 상태 관리 구조를 단순화했습니다.</li><li>Tanstack query와 Axios 조합을 Fetch API 하나로 통일했습니다.</li></ul></li><li>Fetch API 커스텀 래퍼 구현<ul><li>Axios를 제거하고 Fetch API를 활용하여 인터셉터 로직을 커스텀 구현했습니다.</li></ul></li><li>AWS EC2로 동적 배포 및 무중단 배포 구축<ul><li>Next.js의 서버 렌더링 특성상 발생하는 AWS EC2 서버 배포 이슈를 해결했습니다.</li><li>pm2를 활용하여 배포하는 동안 서비스가 멈추는 이슈를 해결했습니다.</li></ul></li></ul><h3>달성 성과</h3><ul><li>SEO 향상: 정확한 메타 데이터 렌더링으로 검색엔진 노출이 개선되고, 소셜미디어 공유 시 링크 미리보기 품질이 향상되었습니다.</li><li>성능 개선: 이미지 로딩 속도 개선과 함께, Core Web Vitals 점수를 51점 → 93점으로 대폭 향상</li><li>유지보수 효율 증대: 간결하고 명료한 코드 구조로 향후 서비스 확장과 유지보수가 쉬워졌습니다.</li></ul>

React + Vite 웹 애플리케이션을 Next.js 14로 마이그레이션

<h2>"결제 연동부터 콘텐츠 보안, 속도 최적화까지 — 혼자서 한 회사의 프론트엔드를 책임졌습니다" </h2>담당 업무: 프론트엔드 개발 (단독 진행) 프로젝트: 서비스 유지보수 및 신규 기능 개발 기술 스택: React.js, Next.js, Tailwind CSS, Vite, GA4, Figma 등<h3> 프로젝트 개요</h3>운영 중인 웹 서비스의 프론트엔드를 단독으로 맡아 기능 개선, 성능 최적화, 콘텐츠 보안 강화 등 전방위적인 개발을 수행했습니다. 특히 실제 유저 피드백과 사용 데이터에 기반한 업로드 속도 개선은 고객 만족도 향상에 큰 영향을 주었습니다.<h3>주요 수행 작업</h3><ul><li>PG 결제 서비스 연동<ul><li>나이스페이먼츠와 카카오페이를 안정적으로 연동하여 다양한 결제 수단을 지원하고, 결제 성공률을 향상시켰습니다.</li></ul></li><li>정밀한 UI 구현<ul><li>디자이너와 협업하여 디자인 시안에 맞춘 픽셀 단위의 UI 구현을 통해 일관된 사용자 경험을 제공했습니다.</li></ul></li><li>이미지 업로드 성능 대폭 개선<ul><li>초기 이미지 업로드 시 15초 이상 걸리던 문제를 해결하기 위해, 파일 처리 방식과 업로드 흐름을 전면 개선했습니다.</li><li>평균 업로드 시간을 3초 이내로 단축, 체감 속도를 80% 이상 향상시켜 사용자 만족도와 재방문율을 높였습니다.</li></ul></li><li>마케팅 분석 도구 연동<ul><li>GA4 및 Facebook Pixel 연동을 통해 방문자 행동 분석 및 캠페인 트래킹 기반을 마련했습니다.</li></ul></li><li>콘텐츠 보안을 위한 기능 추가<ul><li>유료 콘텐츠 보호를 위해 마우스 우클릭 방지, 캡처 버튼 비활성화 등의 클라이언트 사이드 보안 기능을 구현하여 불법 저장을 방지했습니다. </li></ul></li></ul><h3>성과 및 개선 효과</h3><ul><li>결제 연동 → 수익 창출 기반 마련 및 결제 경험 개선</li><li>속도 최적화 → 업로드 지연 문제 해결 및 사용자 이탈 방지</li><li>콘텐츠 보안 강화 → 유료 콘텐츠 무단 유출 위험 감소</li><li>UI 개선 → 브랜드 이미지 강화 및 전환율 상승 기여</li><li>데이터 기반 운영 → 사용자 분석 및 마케팅 효율성 증대</li></ul>

f862의 STOCK 서비스 유지보수 및 신규 기능 개발

<h2>"기획부터 디자인, 개발까지—혼자 만든 초정밀 인터랙티브 웹사이트" </h2>담당 업무: 기획(프로젝트 개요서), 디자인(와이어프레임, 공통 컴포넌트 등), 프론트엔드 개발(단독). 기간: 2025년 2월 ~ 2025년 4월 기술 스택: React, Next.js, TypeScript, Tailwind CSS, Figma <h3>프로젝트 소개</h3>우리 회사의 정체성과 다양한 서비스를 고객들에게 매력적으로 전달하기 위해, 기획부터 디자인, 개발까지 직접 주도한 회사 소개 웹사이트를 구축했습니다. <h3>해결 과제</h3><ul><li>스크롤 애니메이션 이슈<ul><li>애플의 매직마우스 및 트랙패드 사용 시 스크롤 애니메이션이 매끄럽지 않고 엉뚱하게 작동하는 문제를 마주했으나 해결했습니다. </li></ul></li></ul><h3>주요 수행 작업</h3><ul><li>기획 및 디자인 총괄<ul><li>전문적인 웹 디자인 강의를 수강하며 얻은 인사이트로 와이어프레임 및 디자인을 직접 제작했습니다.</li><li>프로젝트에 적합한 최신 디자인 트렌드를 적극 반영했습니다.<ul><li>예시: 그림자를 과하게 사용하지 않고, 아이콘 스타일을 통일하여 시각적 일관성을 유지했습니다.</li></ul></li><li>Figma를 능숙하게 다루며, 디자인 툴 활용 능력을 크게 향상시켰습니다.</li></ul></li><li>고급 스크롤 애니메이션 구현<ul><li>엔딩 크레딧 효과, 부분 원 페이지 스크롤, 그리고 다양한 인터랙티브 애니메이션을 구현했습니다.</li><li>매직마우스와 트랙패드를 포함한 다양한 입력장치와 기기에서 일관되게 동작하도록 최적화 작업을 진행했습니다. </li></ul></li></ul><h3>달성 성과</h3><ul><li>종합적 스킬 향상: 기획부터 배포까지 수행하면서 기획력, 디자인 감각, 프론트엔드 개발 역량을 골고루 발전시킬 수 있었습니다.</li><li>애니메이션 최적화: 애플 기기에서의 민감한 스크롤 애니메이션 이슈를 해결함으로써, 사용성 및 인터랙티브한 UX를 크게 개선했습니다.</li><li>프로젝트 주도 능력 입증: 회사 내부에서도 ‘디자인과 개발을 동시에 이끌 수 있는 프론트엔드 개발자’로 인정받았습니다.</li></ul>

f862 회사 및 서비스 소개 페이지 개발

<h2>"문서 자동화, 서버 유지 자동화까지, 혼자서 풀스택으로 Gemgem Center를 구축했습니다"</h2>담당 업무: 풀스택 개발 (웹 개발 단독 진행) 팀 구성: 총 3명 (PM, 디자이너, 웹 개발자)기술 스택: Next.js, Supabase, Google API, Zod 등.<h3>프로젝트 개요</h3>Gemgem Center 사이트의 전체 웹 개발과 배포를 단독으로 진행했습니다. 특히 외부 서비스와의 API 연동, 자동화 및 문제해결 능력을 집중적으로 발휘하여 서비스 안정성과 업무 효율을 높였습니다.<h3>주요 수행 작업</h3><ul><li>전체 웹사이트 풀스택 개발 및 배포<ul><li>프론트엔드와 백엔드 개발을 모두 담당하여 서비스를 성공적으로 출시했습니다.</li></ul></li><li>Google Sheet &amp; Docs API 연동<ul><li>고객 문의가 발생하면 Google Sheet와 Google Docs에 자동 저장되는 시스템을 구축하여 업무 효율성을 크게 높였습니다.</li></ul></li><li>Supabase를 활용한 데이터 관리<ul><li>공지사항 업로드 및 조회 기능을 구현하여 운영자의 관리 편의성과 사용자의 정보 접근성을 강화했습니다.</li></ul></li><li>Cron Jobs를 활용한 서버 활성화 유지 자동화<ul><li>Supabase 무료 요금제 사용 시 발생하는 비활성화 문제를 발견하고, Vercel에서 Cron Job을 설정해 일주일 단위로 자동 요청을 수행하여 안정적인 서버 환경을 유지했습니다.</li></ul></li><li>네이버 서치어드바이저 색인 이슈 해결<ul><li>색인이 전혀 되지 않던 문제를 발견하고, 네이버 고객센터와 적극 소통하여 SEO 문제를 성공적으로 해결했습니다.</li></ul></li><li>첨부파일 포함 폼 구현 및 유효성 검증<ul><li>Zod 라이브러리를 도입하여 폼 입력의 유효성 검사를 강화하고, 파일 업로드 기능까지 추가하여 사용자 경험을 개선했습니다.</li></ul></li></ul><h3>성과 및 개선 효과</h3><ul><li>외부 API 연동으로 업무 프로세스 자동화 및 생산성 향상</li><li>자동화된 트래픽 유지 관리로 서버 운영 안정성 확보</li><li>네이버 검색 색인 문제 해결을 통한 검색 노출도 향상</li><li>파일 업로드와 유효성 검사 기능 추가로 사용자 편의성 증대</li></ul>

SI - Gemgem Center 사이트 만들기

<h2>"글로벌 유저를 위한 i18n 적용과 UX 개선으로 서비스 가치를 높였습니다"</h2>담당 업무: 프론트엔드 개발 기술 스택: Next.js, Tailwind CSS 등<h3>프로젝트 개요</h3>글로벌 사용자를 위한 다국어 지원(i18n)과 UX/UI 중규모 개선을 수행했습니다. 또한, 이미지 및 비디오 API 변경에 따른 프론트엔드 코드 개편과 신규 결제 옵션(PayPal) 연동을 통해 사용자 경험과 서비스 확장성을 동시에 확보했습니다.<h3>주요 수행 작업</h3><ul><li>다국어 지원 (i18n) 구축<ul><li>글로벌 사용자를 위한 국제화 작업을 통해 영어 사용자의 접근성과 사용성을 높였습니다.</li></ul></li><li>UX/UI 중규모 개선<ul><li>i18n 작업으로, 한국어가 아닌 다른 언어 사용 시 망가지는 UI를 발견하여 개선 작업을 했습니다.</li><li>그 외, 에러 페이지, SNS 공유 기능 추가 등 사용자의 피드백을 기반으로 UX/UI를 개선했습니다.</li></ul></li><li>이미지 및 비디오 API 통합에 따른 코드 리팩토링<ul><li>변경된 이미지 및 비디오 API에 맞춰 프론트엔드 코드를 효율적으로 리팩토링하여 유지보수성을 높였습니다.</li></ul></li><li>PayPal 결제 시스템 연동<ul><li>글로벌 결제 옵션을 추가하여 서비스의 수익성을 강화하고, 사용자들에게 더욱 편리한 결제 환경을 제공했습니다.</li></ul></li></ul><h3>성과 및 개선 효과</h3><ul><li>다국어 지원을 통한 글로벌 사용자 확보 및 서비스 접근성 향상</li><li>UX/UI 개선을 통해 사용자 경험 향상</li><li>효율적인 API 통합 및 코드 리팩토링으로 서비스 안정성과 유지보수성 증대</li><li>PayPal 결제 연동을 통해 글로벌 결제 대응력 강화 및 수익성 증대</li></ul>

글로벌 서비스 개발 및 중규모 UX/UI 개선

<h2>"이미지에서 비디오로, 콘텐츠 비즈니스의 확장을 직접 구현했습니다" </h2>담당 업무: 프론트엔드 개발 기술 스택: React.js, ffmpeg.wasm, AWS EC2, NginX<h3> 프로젝트 개요</h3>기존에 이미지 기반의 스톡 콘텐츠를 제공하던 플랫폼에서, 동영상 콘텐츠 판매라는 신규 비즈니스 영역을 개척하기 위해 비디오 전용 플랫폼을 새롭게 개발했습니다. <h3>주요 수행 작업</h3><ul><li>ffmpeg.wasm을 이용한 비디오 처리 기능 구현<ul><li>WebAssembly(ffmpeg.wasm)를 활용하여 비디오 압축 및 워터마크 추가 작업을 클라이언트에서 처리함으로써, 서버의 인코딩 부담을 줄였습니다.</li></ul></li><li>AWS EC2를 활용한 React 애플리케이션 배포<ul><li>AWS EC2 환경에 React 앱을 정적 배포하여 신속하고 안정적인 서비스 출시를 성공적으로 이끌었습니다. </li></ul></li></ul><h3>성과 및 개선 효과</h3><ul><li>동영상 콘텐츠 처리 및 업로드 기능을 통해 신규 서비스 런칭에 기여</li><li>사용자 환경 내 비디오 처리로 서버 운영 비용 절감 및 사용자 경험 향상</li><li>AWS 환경에 안정적이고 효율적인 배포로 서비스의 빠른 시장 진입 지원</li></ul>

f862 Video 플랫폼 개발

<h3>“기획부터 배포까지, 프론트엔드 혼자서 다 해봤습니다”</h3>단독 프론트엔드 개발자로 근무하며 총 6개의 웹 프로젝트를 주도적으로 수행했습니다. Vite 기반 SPA를 Next.js 14 App Router로 마이그레이션하고, SSR·SEO 최적화, 퍼포먼스 개선(업로드 속도 80% 단축), PG/PayPal 결제 연동, 콘텐츠 보안(우클릭·캡처 방지), i18n(다국어 지원) 등 다양한 실무 과제를 해결했습니다. 또한 AWS EC2, Vercel, PM2 기반의 배포 자동화부터 Supabase·Google API·Cron Job을 활용한 백엔드 연동, WebAssembly(ffmpeg.wasm) 기반 동영상 처리까지 경험했습니다. 디자인 시스템 없이도 Figma와 협업해 UI/UX를 구현하며, GA4 및 Facebook Pixel 등 마케팅 도구 연동으로 운영에도 기여했습니다.