프론트엔드 개발자

이경준

안녕하세요, 프론트엔드 개발자 이경준입니다.

사용자 경험을 중요하게 생각합니다. 

정보 전달의 흐름과 사용자의 몰입 경험을 고려하여 UI를 설계하고, 기술적으로 구현하는 과정을 좋아합니다.
React 기반의 웹 개발과 Zustand 상태관리, REST API 연동 등 실무 경험을 바탕으로, 로그인·회원 기능부터 무한스크롤, 필터링, 소셜 로그인까지 다양한 기능을 직접 구현해왔습니다.
단순히 기능을 만드는 것을 넘어서, "사용자가 언제 편하게 느끼고, 언제 이탈하는지"를 고민하며 설계하고자 합니다.

성실함

유연함

목표 지향적

긍정적

적응력

<ul><li>MSA아키텍처, ElasticSearch, Jenkins, Kubernetes 기술 관련 강의 수강 및 PBL 강의 진행</li><li>클라우드 환경을 활용한 기획-개발-배포 프로세스의 프로젝트 진행</li><li>현업 개발자 멘토분들의 리뷰</li></ul>

카카오엔터프라이즈 SW아카데미 6기

<ul><li>KKSC 동아리 프로젝트 “가천 길잡이” 앱 프론트엔드 파트 담당</li><li>Flutter, Dart 스터디 그룹 참여</li></ul>

KKSC

ENGLISH

JAPANESE

Github

포트폴리오

<h3>사용기술</h3><ul><li>언어: JS, SQL, HTML</li><li>프론트엔드: ejs, Figma</li><li>백엔드: Node.js / express</li><li>DB: Mysql</li><li>IDE: VSC, git</li><li>API: REST API, ChatGPT4</li><li>AI: GPT 4o</li></ul><h3>내용</h3><ul><li>재무관리 또는 실사용을 위해 카드를 발급하는 소비자들에게 ChatGPT AI Chatbot을 이용한 맞춤형 카드를 추천해주는 서비스를 제공하는 웹 어플리케이션</li><li>웹 페이지는 사용자 맞춤형 카드를 혜택별로 추천하고, 사용자에게 카드별 유용한 혜택 정보를 제공 또한</li><li>사용자는 챗봇을 이용해 원하는 혜택 정보에 대한 키워드를 입력하여 정보를 제공받을 수 있으며, 사용자 친화적인 사용자 인터페이스(UI)/사용자경험(UX)과 카드 검색 기능을 포함하여 개발</li><li>서비스를 이용함으로써 사용자는 개인 맞춤별 혜택을 받을 수 있는 카드 정보를 제공 받아 합리적인 소비 기대</li></ul><h3>나의 기여(50%/100%)</h3><ul><li>서비스 구조 및 사용자 흐름 설계<ul><li>아이디어 도출부터 유스케이스, 서비스 플로우, 비즈니스 로직까지 전체 서비스 기획에 참여</li><li>Figma 디자인을 기반으로 UI 구성 및 기능 흐름 설계</li></ul></li><li>프론트엔드 퍼블리싱 및 페이지 개발<ul><li>Figma 시안을 바탕으로 <code>EJS</code> 템플릿을 활용한 UI 퍼블리싱</li><li>연령대·소비 키워드·정부지원 여부 등에 따라 분류된 카드 추천 페이지 기능 개발<ul><li>예: 20대 대상 혜택 카드, 정부 지원 카드, 퍼스널 맞춤형 카드, 이벤트 카드 등</li></ul></li></ul></li><li>REST API 연동 및 백엔드 처리<ul><li>사용자 요청에 따라 동작하는 <code>GET</code>, <code>POST</code> 방식의 REST API 라우팅 구현</li><li><code>Express</code>와 <code>body-parser</code>를 활용해 프론트와 서버 간 데이터 송수신 처리</li><li>클라이언트 측 요청과 서버 측 응답 흐름을 이해하고, 실제 기능 작동을 위한 API 설계 및 연동 로직 구현</li></ul></li><li>데이터 크롤링 및 AI 연동<ul><li><code>puppeteer</code>를 활용해 카드사 웹사이트에서 카드 정보를 크롤링</li><li>크롤링한 데이터를 기반으로 AI 챗봇이 학습할 수 있는 구조로 가공하여 추천 정확도 향상에 기여</li></ul></li><li>협업 및 리더십 수행<ul><li>팀장의 부재로 인해 일정 관리, 역할 분배 등 실질적인 팀장 역할 수행</li><li>Git &amp; GitHub을 통해 프론트엔드–백엔드 협업 환경 정비 및 버전 관리 주도</li></ul></li></ul><h3>결과 및 성과</h3><ul><li>가천대학교 2024년도 P-실무프로젝트 장려상 수상</li></ul>

AI Chatbot을 이용한 사용자별 맞춤 카드 추천 Service "Cardfit"

<h3>사용기술</h3><ul><li>Backend: Spring Boot 3.3.1, Java</li><li>Frontend: Flutter, Dart</li><li>Build Tool: Gradle Groovy 8.8</li><li>Java Version: Java 17</li><li>Packaging: Jar</li><li>Database: MySQL 8.3.0</li><li>Server: AWS</li></ul><h3>내용</h3><ul><li>사용자 관리 서비스 - 회원 가입, 로그인, 인증 기능, 프로필 보기 및 수정, 프로필 사진 업로드</li><li>실시간 위치파악 서비스 - 교내 셔틀버스 무당이 실시간 위치 파악</li><li>빈 강의실 확인 및 예약 서비스 - 빈 강의실 조회, 빈 강의실 예약 프로그램</li><li>시간표 및 강의별 채팅 서비스 - 수강신청 시간표 관리, 강의별 유저 간 채팅</li><li>공지사항 및 알림 서비스 - 학과별 공지사항 작성, 수정, 삭제, 새로운 공지사항 푸시 알림</li><li>일정 관리 캘린더 및 이벤트 등록 서비스 - 학교 이벤트 등록, 수정, 삭제, 참가 신청 및 참가자 관리</li><li>동아리 홍보 및 지원 서비스 - 동아리 홍보, 지원 페이지, 가천대학교 포트폴리오 관리 페이지</li></ul><h3>나의 기여(프론트엔드 파트 30%/100%)</h3><ul><li>Flutter 기반 공지사항 페이지 제작 및 UI 구현<ul><li>전체 레이아웃 및 디자인 직접 구성</li><li>학과별/학교별 공지사항 구분을 위한 카테고리 필터 기능 개발</li><li>선택한 카테고리에 맞는 공지사항을 동적으로 필터링하여 출력</li></ul></li><li>REST API 연동 및 데이터 매핑 처리<ul><li>서버에서 받은 JSON 데이터를 <code>fromJson</code>, <code>toJson</code> 메서드를 정의해 Dart 객체로 변환</li><li>변환된 데이터를 기반으로 리스트 뷰에 공지사항을 출력하는 로직 구현</li></ul></li><li>Python Beautiful Soup 활용 공지사항 크롤링<ul><li>학교 및 학과별 공지사항을 크롤링하고 JSON 형식으로 변환</li><li>서버 측에서 사용할 수 있도록 크롤링 데이터 구조 설계 및 연동</li></ul></li><li>Dart &amp; Flutter 실전 학습 및 적용<ul><li>프로젝트 참여 전 Dart 문법 및 Flutter 위젯 구조 학습</li><li>네비게이션, 리스트뷰, API 연동 등 실제 개발에 필요한 부분을 직접 구현</li></ul></li></ul><h3>결과 및 성과</h3><ul><li>프로젝트를 통한 개발 실무 경험과 협업 역량, 그리고 새로운 기술에 대한 빠른 적응력 향상</li></ul>

가천대학교 학생을 위한 커뮤니티 앱 Service “가천길잡이”

<h3>사용기술</h3><ul><li>Language : Java, JavaScript, Python</li><li>Framework : React, Spring Boot, Fast API</li><li>Database : PostgreSQL, Redis, MongoDB, Qdrant, ElasticSearch</li><li>API GateWay : Spring Cloud Gateway</li><li>Infra, CI/CD : Github Actions, Jenkins, Docker, Kubernetes, AWS</li><li>Monitoring : ElasticSearch, Logstash, Kibana, Prometheus, Grafana</li><li>Messaging : Kafka</li><li>Testing : JUnit5, Postman</li><li>AI/LLM : Gemini, Qwen, LLama</li><li>Tools : Git, Slack, Jira, Confluence, Notion</li><li>Storage : Supabase, AWS S3</li></ul><h3>내용</h3><ul><li>프로젝트 이름: AlOG (AI + Blog)</li><li>프로젝트 설명: 개발자 매칭 AI 블로그 플랫폼</li><li>Alog는 개발자들이 자신의 역량을 효과적으로 표현하고, 협업과 커리티브 커뮤니티 활동을 통해 함께 성장할 수 있도록 지원하는 AI 기반 커리어 매칭 플랫폼</li><li>기술 블로그 작성, 포트폴리오 자동 생성, 이력서 완성, 협업 인재 추천 등 다양한 기능을 통해 개발자의 커리어 여정을 보다 간편하고 체계적으로 도와줌</li><li>블로그 / 글쓰기 서비스<ul><li>사용자가 기술 글을 작성하면 AI가 자동으로 내용을 요약하고, 키워드를 추출해 태그로 생성해 줌</li></ul></li><li>README 자동 생성<ul><li>GitHub의 코드를 기반으로 AST(Abstract Syntax Tree) 분석을 통해 핵심 로직만 추출하고, 이를 AI 모델(QwenCoder 등)이 README 문서로 자동 생성</li></ul></li><li>포트폴리오 / 이력서 자동 생성<ul><li>사용자의 GitHub 데이터와 게시한 블로그 글을 바탕으로 개인 맞춤형 포트폴리오 템플릿을 자동으로 완성</li></ul></li><li>매칭 서비스<ul><li>기술 스택, 관심 키워드, 사용자의 GitHub 활동 등을 기반으로 협업에 적합한 개발자를 추천해주는 매칭 시스템을 제공</li></ul></li><li>로드맵 제공<ul><li>사용자의 현재 경험과 진로 목표를 기반으로, 유사한 개발자들의 경로를 분석하여 AI가 커리어 로드맵 추천</li></ul></li><li>메시지 및 알림 기능<ul><li>사용자 간 1:1 메시지 전송 기능과, 새 글/댓글/추천 요청 등에 대한 알림 기능 포함</li></ul></li><li>전체 시스템 구성<ul><li>MSA(Microservice Architecture) 기반으로 서비스가 도메인별로 분리되어 있으며, API Gateway를 통해 통합 관리</li><li>모니터링은 Grafana(Prometheus), ELK(FileBeat, Kibana) 기반으로 구성하였으며, GitHub Actions와 Jenkins, Kubernetes를 통해 자동 배포(CI/CD) 구현</li></ul></li></ul><h3>나의 기여(프론트엔드 파트 50%/100%)</h3><ul><li>React 기반 프론트엔드 개발 및 UI 구현<ul><li>로그인, 회원가입, 마이페이지, 블로그, 포트폴리오 등 핵심 화면의 전체 구조 설계 및 컴포넌트 단위 UI 구현</li><li>Figma 시안을 기반으로 일관된 UI/UX 스타일 유지, 공통 UI 요소(Button, Modal, Input 등)를 모듈화하여 재사용성 확보</li><li>Framer Motion과 CSS Transition을 활용해 자연스러운 페이지 전환 애니메이션 적용</li></ul></li><li>REST API 연동 및 마이크로서비스 구조 대응<ul><li>Axios 기반으로 <code>user</code>, <code>blog</code>, <code>follow</code>, <code>alarm</code> 등 다양한 서비스 API 연동 구현</li><li>요청에 따른 로딩, 성공/에러 상태 처리 및 사용자 피드백 UI 설계</li><li>백엔드에서 제공하는 데이터 구조에 맞춰 프론트엔드에서의 시각화 및 UI 매핑 로직 구성</li></ul></li><li>Zustand를 활용한 전역 상태 관리<ul><li>로그인 상태, 사용자 정보, 토큰 등을 전역으로 관리하여 페이지 간 상태 유지를 자연스럽게 처리</li><li>상태 변화에 따라 UI가 즉각적으로 반응하도록 설계하여 사용자 경험 향상</li></ul></li><li>카카오 OAuth 로그인 연동 및 인증 흐름 구성<ul><li>카카오 API를 통한 소셜 로그인 기능 구현</li><li>발급된 accessToken 및 refreshToken을 전역 상태로 저장 및 활용하여 인증 요청 처리</li><li>로그인 성공/실패에 따라 라우팅 제어 및 세션 유지 구현</li></ul></li><li>사용자 중심의 인터페이스 설계 및 UX 개선<ul><li>API 호출 결과에 따른 다양한 시나리오(로딩, 실패, 빈 화면 등)에 대응하는 UI 구성</li><li>입력 유도, 오류 메시지, 성공 알림 등 세부적인 사용자 피드백 설계를 통해 전체 UX 완성도 향상</li></ul></li></ul><h3>결과 및 성과</h3><ul><li>사용자 중심의 UI/UX 설계 역량 강화</li><li>마이크로서비스 아키텍처 기반 협업 경험</li><li>예외 상황 대응 및 문제 해결 능력 향상</li><li>쿠버네티스 &amp; 클라우드 환경 경험</li><li>기술뿐 아니라 소통과 협업의 중요성 체감</li></ul>