미리보기

블록체인 서비스 프론트엔드 구현 및 유지보수 담당

Vue.js에서 React.js로 기술 스택 전환 주도 및 최적화 (React의 보편성과 한국 내 채용의 용이성을 고려)

SEO 개선 및 초기 로딩 속도 최적화를 위해 Next.js를 활용한 SSR(서버 사이드 렌더링) 환경 구축 경험

AWS 기반의 CI/CD 환경을 구축하여 배포 프로세스 자동화 및 안정성 확보

Cloudflare R2, AWS S3를 이용한 이미지 등 업로드 개발 경험

포트원, Stripe, 코인베이스를 이용한 결제 서비스 프론트엔드 파트 담당

소셜 로그인 개발 및 통합 담당 (Google, Facebook, Kakao 등)

WalletConnect를 이용한 블록체인(Polygon) 지갑 연동 개발 경험

Notion을 활용한 문서화 체계를 구축하여 신규 입사자의 온보딩 효율화 및 협업 프로세스 표준화

디자인/백엔드 팀과의 협업 구조를 정립하여 원활한 커뮤니케이션 및 프로젝트 진행 지원

블록체인 경진대회 사전 교육 강사로 참여하여 ERC20, ERC721, DAO 및 Remix, Hardhat, Truffle, web3.js, ethers 교육 진행

영어, 중국어, 일본어 다국어 서비스 개발 경험

우리은행, 국민은행, KFA, 대홍기획 등 고객의 요구에 맞춘 기술 솔루션을 제공하고, 비즈니스 목표를 달성하기 위한 기술적 제안 및 의사결정 지원 경험

프로젝트의 요구 사항 분석 및 일정 관리, 우선순위 조정을 통해 효율적인 작업 배분 및 목표 달성을 이끈 경험

기술 스택: React.js

주요 경험 및 기여

• 자산 관리 기능 개발: 고객의 NFT, NFT 티켓, 토큰 자산을 조회·발행할 수 있는 프론트엔드 기능 구현

• 커뮤니티 및 티켓 검증 기능: NFT 전송 기능 및 커뮤니티 활동 연동, QR 기반 NFT 티켓 검증 페이지 개발

• 초기 세팅 및 기술 논의: React 기반 프로젝트의 초기 세팅 및 기술 스택 선정 논의에 참여

• 반응형 및 브릿지 연동: 모바일 환경 최적화된 반응형 구현 및 앱(WebView)과의 브릿지 통신 코드 개발

• 컴포넌트 설계: Atomic Design 패턴 기반의 컴포넌트 구조 설계로 UI 재사용성과 유지보수성 강화

• 라이브러리 및 형상 관리: 외부 라이브러리 도입 기준 수립 및 Git Flow 기반 형상 관리 주도

• CI/CD 구성: 환경별 배포 자동화를 위한 CI/CD 설정 및 운영 환경 구성

• 문서 기반 협업: 기능 목록 정의, 업무 분할 문서 작성 등 기획 단계부터 협업 문서화 체계 기여

• 테스트 및 QA: 단위/통합 테스트 케이스 작성 및 QA 테스트 수행, 결함 분석 및 대응 주도

• 문서화 및 품질 유지: 결함 관리 문서 작성 및 지속적인 유지보수로 품질 안정성 확보

• 기술적 성장: 은행권 고객사와의 협업을 통해 금융권 개발 프로세스 전반을 경험하고, 요구사항 분석부터 커뮤니케이션, 런칭까지의 실무 흐름을 직접 체득하며 프로젝트 성공적으로 마무리

기술 스택: React.js, TypeScript, WelletConnect, Lottie, AWS(S3, CloudFront, Route53)

주요 경험 및 기여

• 프로젝트 구조 설계: React 및 TypeScript 기반의 초기 세팅과 모듈화 중심의 아키텍처 설계를 통해 유지보수성과 확장성을 확보

• 블록체인 지갑 연동: WelletConnect 라이브러리를 활용해 Polygon 네트워크와의 지갑 연결 기능 구현

• SNS 로그인 개발: Google, Kakao, Naver 로그인 기능을 OAuth 흐름으로 통합, 예외 처리 및 실패 대응 로직 추가로 사용자 이탈 최소화

• 다국어 처리 자동화: i18next-scanner와 Google Sheet를 연동하여 다국어 번역 작업을 자동화하고, 운영자가 쉽게 관리할 수 있는 구조 구현

• 애니메이션 구현: Lottie를 활용해 주요 사용자 흐름에 인터랙티브 애니메이션을 적용, 전환 시 시각적 피드백 제공으로 UX 향상

• 운영 환경 구성: S3, CloudFront, Route53을 이용해 HTTPS 적용, 정적 리소스 최적화, 도메인 연결 등 배포 환경 구축 및 안정성 확보

• 배포 안정성 개선: 배포 전 자동 점검 로직을 CI 파이프라인에 연계해 운영 중 오류 발생 가능성을 사전에 차단

• 기술적 성장: 실서비스 수준에서 블록체인 지갑 연동, 인증/인가, 클라우드 인프라, 다국어 처리 자동화까지 다양한 기능을 직접 구현하며, 사용자 접근성과 글로벌 서비스 대응력을 동시에 고려한 프론트엔드 실무 역량을 강화함

기술 스택: Next.js, TypeScript, AWS(EC2)

주요 경험 및 기여

• 프로젝트 구조 설계: Next.js와 TypeScript 기반으로 초기 세팅 및 아키텍처 설계, 페이지 라우팅 구조와 컴포넌트 계층 정의

• 프론트엔드 리딩: 전체 프론트엔드 개발 방향성 수립 및 코드 품질 관리, 협업 효율을 위한 코드 규칙 및 리뷰 체계 도입

• 사용자 정보 입력 개발: React Hook Form과 Zod를 활용한 입력 폼 구축, 필드 단위 유효성 검사 및 에러 핸들링 로직 구현으로 폼의 안정성과 사용자 피드백 향상

• 테마 UI 개발: 사용자별 테마 설정 값을 API로 불러와 CSS 변수로 반영하는 방식으로 기업 맞춤형 동적 테마 시스템 구현

• 기술적 성장: 사용자 입력 폼의 구조적 구성과 검증 로직에 대해 실무에서 깊이 있게 학습했으며, 단순한 다크/라이트 모드 수준을 넘는 유연한 테마 시스템을 직접 설계하고 적용하는 경험을 통해 UI 커스터마이징 역량을 강화함

기술 스택: React.js, TypeScript, MSW, Storybook, Figma, AWS(S3, CloudFront, Route53)

담당 역할: 디자인 시스템 구축, 아키텍처 설계, 컴포넌트 개발, SNS 로그인, 운영환경 구성

주요 경험 및 기여

• 디자인 시스템 구축: Figma를 활용해 웹 디자인과 디자인 시스템을 구축, 컴포넌트 기반 UI 설계를 위한 가이드라인 수립

• 프로젝트 초기 세팅: React 및 TypeScript 기반으로 초기 프로젝트 구조 설계 및 폴더 구조, 라우팅 체계 정립

• Mocking 환경 구축: MSW를 이용한 API Mocking 환경 구성으로 프론트엔드 개발 속도 향상 및 테스트 효율 개선

• 컴포넌트 개발: Storybook 기반으로 Atomic Design 패턴에 따라 컴포넌트를 설계 및 문서화하여 재사용성과 가독성 향상

• SNS 로그인 개발: Google, Kakao, Naver의 OAuth2 기반 SNS 로그인 기능 구현 및 예외 처리 플로우 구성

• 운영 환경 구성: S3, CloudFront, Route53을 이용한 정적 웹 배포, HTTPS 적용 및 도메인 연결을 포함한 인프라 운영

• 기술적 성장: 디자인 시스템부터 컴포넌트 개발, 인프라 설정까지 제품 전체 흐름을 직접 다뤄보며 서비스 완성도를 높이는 과정을 실무에서 체득했으며, MSW와 Storybook을 활용한 테스트 및 문서화 기반 개발 방식에 익숙해졌음

기술 스택: Nuxt.js, TypeScript, Vuex, , AWS(EC2)

주요 경험 및 기여

• 프로젝트 구조 설계: Nuxt.js와 TypeScript 기반으로 초기 프로젝트 세팅 및 아키텍처 설계, 라우팅과 상태관리 구조 정의

• SNS 로그인 개발: Google OAuth2 기반 소셜 로그인 기능 구현 및 사용자 인증 흐름 구성

• 운영 환경 구성: EC2, ELB, Route53을 활용해 서버 인프라 설정 및 도메인 연결, HTTPS 적용 등 배포 환경 구성

• 기술적 성장: Nuxt.js 기반 SSR 환경과 Vuex 중심 상태 관리 구조를 실무에 적용하며 Vue 생태계에 대한 이해도를 높였고, AWS 인프라 구성 및 인증 연동 과정을 통해 프론트엔드 외의 운영 환경까지 경험의 폭을 확장함

기술 스택: Next.js, TypeScript, MUI, AWS(EC2)

주요 경험 및 기여

• 마이그레이션 리딩: 기존 Nuxt.js 프로젝트를 Next.js로 이전하며 페이지 구조 및 라우팅 최적화, 서버 사이드 렌더링 환경 구성

• 결제 연동: Stripe, Portone, Coinbase 기반의 결제 기능 구현, 결제 흐름 설계 및 연동 테스트 진행

• NFT 관련 기능 개발: NFT 발행 페이지 및 상세 페이지 개발, 이미지/메타데이터 처리 포함

• SNS 로그인 개발: Google, Kakao, Naver OAuth2 기반 로그인 기능 통합 및 인증 흐름 구현

• 이미지 업로드 개발: Cloudflare Worker 및 R2를 활용해 대용량 이미지 업로드 기능 구현, 서명 기반 업로드 및 보안 처리 적용

• 다국어 처리 자동화: i18next-scanner와 Google Sheet를 연동하여 다국어 번역 작업을 자동화하고, 운영자가 쉽게 관리할 수 있는 구조 구현

• 기술적 성장: Vue 생태계에서 React/Next.js 기반 환경으로 전환하는 과정을 직접 경험하며 프레임워크 간의 차이를 실무에 적용해 이해했으며, 결제 및 인증/파일 업로드 등 실서비스에서 핵심 기능들을 안정적으로 구현하며 서비스 품질에 대한 실전 감각을 높임

기술 스택: Nuxt.js, Vuex, , AWS(EC2)

주요 경험 및 기여

• 프로젝트 구조 설계: Nuxt.js 기반으로 초기 프로젝트 세팅 및 아키텍처 설계, 페이지 라우팅 및 상태관리 구조 정립

• NFT 민팅 기능 개발: 사용자 친화적인 민팅 페이지 구현, 메타데이터 처리 및 블록체인 연동 설계

• 결제 연동: Toss, Stripe, Ethereum, Aergo 기반 결제 시스템 구현 및 멀티 결제 플로우 구축

• 본인인증 연동: 외부 인증 모듈 연동을 통해 실명 인증 기능 구현 및 보안 고려한 사용자 흐름 구성

• SNS 로그인 개발: Google, Kakao, Naver 소셜 로그인 기능 구현 및 인증 흐름 통합

• 이벤트 트래킹: GA 활용해 사용자 행동 기반 이벤트 트래킹 로직 구성

• 운영 환경 구성: EC2, ELB, Route53을 활용한 배포 환경 구성 및 HTTPS 적용, 도메인 연결 등 서버 운영 안정화

• 외부 연동 개발: 국민은행 앱 유입 사용자에 대해 OAuth 기반 로그인 및 토큰 발급 기능 구현, 외부 앱에서 NFT 정보 조회 가능하도록 연동 처리

• 기술적 성장: NFT 민팅, 다중 결제 시스템, 인증 및 사용자 트래킹까지 실제 커머스 수준의 서비스 운영에 필요한 전반적인 기능을 경험하며 프론트엔드 실무 능력과 서비스 운영 관점의 시야를 함께 확장함

기술 스택: Nuxt.js, Vuex

주요 경험 및 기여

• 프로젝트 구조 설계: Nuxt.js 기반으로 초기 프로젝트 세팅 및 아키텍처 설계, 페이지 및 상태관리 구조 설계

• 프론트엔드 리딩: 개발 방향성과 코드 품질 기준을 수립하고 팀 내 협업 및 리뷰 체계 주도

• SNS 로그인 개발: Google, Kakao, Naver 소셜 로그인 기능 구현 및 인증 흐름 통합

• GA 연동: Google Analytics를 활용해 사용자 트래픽 및 행동 분석을 위한 이벤트 트래킹 구성

• 운영 환경 구성: EC2, ELB, Route53을 이용한 정적 웹 배포 및 HTTPS 기반 안정적 운영 환경 구성

• 기술적 성장: 초기 서비스 아키텍처 설계부터 배포까지 전 과정을 직접 경험하며, 사용자 인증, 트래킹, 인프라 운영 등 프론트엔드 개발자의 서비스 구축 전반에 대한 실무 감각을 체득함

기술 스택: Nuxt.js, TypeScript, Vuex, Apollo.js, GraphQL

주요 경험 및 기여

• 프론트엔드 개발: Nuxt.js 기반으로 전체 UI 및 사용자 흐름 구현, GraphQL과 Apollo 클라이언트를 활용한 데이터 통신 구조 설계

• 결제 연동: 유료 콘텐츠 구매를 위한 PG 연동 기능 구현, 결제 완료 후 리디렉션 처리 및 상태 반영 로직 설계

• 기술적 성장: GraphQL 기반의 클라이언트-서버 데이터 처리 방식에 익숙해졌고, 실제 결제 플로우를 구현하면서 프론트엔드에서의 결제 처리 흐름과 사용자 경험 설계 역량을 키움

스마트 컨트랙트 이론 강의: ERC-20, ERC-721, DAO 등의 핵심 개념과 실제 구현 방식에 대한 이론 중심 교육 진행

블록체인 개발 환경 실습: Remix, Hardhat, Truffle을 이용한 스마트 컨트랙트 개발 실습 지도

프론트엔드 연동 강의: Web3.js, Ethers.js를 활용한 스마트 컨트랙트와 웹 프론트엔드 연동 방식 설명 및 실습

참가자 수준에 맞춘 커리큘럼 구성: 블록체인 입문자도 따라올 수 있도록 기본 개념부터 실전 개발까지 단계별 흐름으로 강의 구성

현업 경험 기반 사례 공유: 실제 서비스에서의 개발 사례와 문제 해결 경험을 바탕으로 실무 적용 관점에서 교육 내용 보강

Q&A 및 코드 리뷰 세션 운영: 참가자들의 질문에 대한 실시간 피드백 제공 및 코드 리뷰를 통해 학습 효과 증대

기술적 성장: 블록체인 핵심 개념을 체계적으로 정리하고 전달하는 과정을 통해 기술을 구조화하는 능력을 키웠으며, 다양한 수준의 학습자들과 소통하며 실무 경험을 지식으로 전환하는 커뮤니케이션 역량을 강화함

발표 주제: 블록체인 난수 생성 엔진을 통한 Oracle Problem 해결 방안

프로젝트 주도: 블록체인의 Oracle Problem을 해결하기 위한 난수 생성 엔진 개발을 주도하여 설계, 구현, 테스트를 수행

발표 자료 제작: 복잡한 기술 개념을 청중이 이해하기 쉽게 시각화하고 체계적으로 정리한 발표 자료를 직접 제작

발표 및 질의응답: 최종 발표회에서 프로젝트 결과를 발표하고, 심사위원 및 청중의 질문에 전문적으로 답변하여 프로젝트의 가치를 효과적으로 전달

수상 성과: 이러한 노력을 인정받아 우수상을 수상하며, 블록체인 기술 분야에서의 혁신성과 문제 해결 능력을 입증

기술적 성장: 난수 생성 로직과 블록체인에서의 보안적 한계(Oracle Problem)에 대한 기술적 문제를 탐구하고 직접 해결하며, 기술 개념을 효과적으로 설명하고 설득력 있게 전달하는 발표 커뮤니케이션 능력까지 함께 향상됨

웹 개발 기초 학습: HTML, CSS, JavaScript, Node.js 기반의 웹 프론트엔드 및 백엔드 개발 기초 습득

블록체인 이론 및 실습: 이더리움 블록체인의 구조 이해 및 스마트 컨트랙트 개발을 위한 Solidity 문법 학습

토큰 개발 실습: ERC-20, ERC-721 기반 토큰의 구조와 기능을 학습하고 직접 구현

개발 도구 활용: Remix, Hardhat, Truffle 등 블록체인 스마트 컨트랙트 개발 툴의 실전 활용법 습득

프론트엔드 연동 실습: Web3.js, Ethers.js를 활용하여 스마트 컨트랙트와 웹 프론트엔드 간의 연동 기능 구현

버전 관리 학습: Git, GitHub 기반 협업 환경에서 버전 관리 및 브랜치 전략 실습

팀 프로젝트 수행: 블록체인 기반 DApp(탈중앙화 애플리케이션)을 기획·설계·구현하는 팀 프로젝트 참여

발표 및 코드 리뷰: 팀 프로젝트 발표와 코드 리뷰를 통해 문제 해결력과 협업 능력 향상

기술적 성장: 블록체인의 이론부터 실제 DApp 개발까지 전체 흐름을 경험하며 블록체인 개발 전반에 대한 이해도를 높였고, 팀 단위 프로젝트를 통해 실무 중심의 협업 역량을 강화함