Tistory
GitHub
빵범대
5인 팀 프로젝트 · 프론트엔드 2명 중 1명
영수증 리뷰와 수집품 미션을 결합한 대전 빵집 투어 서비스
React
TypeScript
TanStack Query
Redux
TailwindCSS
MSW카카오맵 SDK- 독립 렌더링·폰트 최적화로 LCP 2.8초 → 2.1초, 전송량 약 37% 감소
- 동일 상세 페이지 Lighthouse 성능 점수 83 → 89점
- MSW로 정상·오류 응답을 제공해 백엔드와 독립적으로 개발
소개
팀 개발 환경과 사용자 경험을 함께 개선하는 개발자가 되고 싶습니다.
팀이 기능을 쉽게 검증하고 개선할 수 있어야 사용자의 불편에도 빠르게 대응할 수 있다고 생각합니다.
팀의 개발 대기를 줄이기 위해 빵범대·Lumos에서 MSW를 활용했습니다. 백엔드 구현 전 화면·API 연동을 진행하고, 빵범대에서는 정상 응답과 인증·서버 오류를 재현해 화면과 오류 처리를 검증할 수 있는 환경을 구성했습니다.
코끼리공장 B2B 대시보드에서 기업 담당자와 직접 소통하며 자료 취합과 제안 준비의 불편을 파악했습니다. 자료 검색·조회 화면을 구현하고 UI 개선을 주도했으며, 팀이 만든 서비스는 프로젝트 종료 후 기업 내부 사용으로 이어졌습니다.
프로젝트
ReactTypeScriptTanStack QueryReduxTailwindCSSMSW카카오맵 SDK
On마음
팀 프로젝트 · 프론트엔드 / 데이터 처리
전력 사용 패턴으로 1인 가구의 이상 징후를 확인하는 돌봄 서비스
ReactTypeScriptTanStack QueryTailwindCSSSSEWeb Push
PWAPyArrow
Spark
HDFS
Tailscale- 고령층의 외출·귀가 조작을 버튼 한 번으로 단순화, 중복 요청 제한
- 처리 중·완료 상태를 구분하고 서버 반영 결과를 확인한 뒤 안내
- 30Hz → 1Hz 집계로 약 5.8TB를 36.60GB로 축소 (약 99.4%)
코끼리공장 B2B 대시보드프로젝트 화면 준비 중
코끼리공장 B2B 대시보드
로컬 AI 메이커스랩 · 프론트엔드 / UI 개선
분산된 기업 자료를 정리하고 ESG·CSR 협업 제안에 활용하는 서비스
Google Apps Script
Google Sheets
Gemini API- 기업 담당자 피드백 기준 자료 정리·제안 제작 시간 약 90% 단축
- 요구사항 조율과 자료 검색·조회 UI 개선 주도
- 기업 내부 사용으로 이어진 프로젝트, 최우수상 (전체 2위)
Demo
Gordi
팀 프로젝트 · 프론트엔드
아바타로 의상을 비교하고 함께 순위를 정하는 패션 서비스
React
JavaScriptTanStack Query
ZustandTailwindCSS
WebSocket · STOMP
LiveKit- 화면·레이아웃 차이로 어긋나는 협업 커서 위치 개선
- 요소 식별과 내부 상대 위치로 커서 좌표 공유 방식 재설계
- 서로 다른 UI에서도 같은 의상·순위를 가리키도록 동기화
MilliUlsan
(1인 개발, 반응형)
필요한 지역 정보를 골라 구성하는 울산 생활 정보 대시보드
ReactTypeScript
Styled-Components
Express.js
Recoil
AWSTanStack Query- 공통 카드·그리드를 조합하는 재사용 가능한 모듈 구조 설계
- 렌더링 제한으로 발생한 시계 초기화 누락 해결
- 3시간 주기 BFF 캐싱으로 외부 API 반복 호출 감소
다른 프로젝트 3개 보기
Lumos
SSAFY 관통 프로젝트 · 프론트엔드
야간관광 특화도시의 여행지를 찾고 AI 여행 코스를 추천받는 서비스
Vue.js
PiniaTanStack QueryMSWGoogle Maps API- 야간관광 특화도시의 여행지 정보·AI 코스 추천
- Vue.js·Pinia 기반 프론트엔드 개발 경험
- MSW를 적용해 백엔드 완료 전 API 코드 작성
MongoDB
여행다모아
(4인 팀 개발, 프론트엔드 개발 부분 70% 담당)
관광지 혼잡도 조회 웹 앱
HTML
CSSJavaScript- 관광 데이터 활용 공모전 장려상 수상
- 4인 팀에서 프론트엔드 개발 부분 70% 담당
- 데이터 구조 협의·진행 공유를 위한 협업 미팅 주도
핵심 역량
저장공간 한계를 해결한 데이터 처리 설계
On마음 · 전력 데이터 파이프라인
압축 해제 시 약 5.8TB로 늘어나는 데이터를 36.60GB로 축소해, 가용 저장공간이 500GB 이하인 노트북에서도 학습 데이터를 준비할 수 있게 했습니다.
원본을 한꺼번에 압축 해제하는 대신 필요한 데이터만 순차적으로 읽고 변환하도록 처리 흐름을 바꿨습니다.
학습에 필요한 해상도를 검토해 30Hz → 1Hz 집계를 적용하고, 결측·오류·시간 연속성 정보는 별도로 보존했습니다.
측정으로 병목을 찾고 화면 성능 개선
빵범대 · 상세 페이지 최적화
동일 상세 페이지의 Lighthouse 측정에서 LCP 2.8초 → 2.1초 개선을 확인했고, 렌더링·폰트·이미지 최적화로 전체 전송량을 약 37% 줄였습니다.
느린 API 하나가 화면 전체를 지연시키는 구조를 찾아, 데이터가 준비된 영역부터 표시하도록 바꿨습니다.
전체 전송량의 약 55.7%를 차지하던 폰트를 서브셋으로 나누고, 리뷰·추천 이미지는 필요한 시점에 불러오도록 조정했습니다.
학력·활동
학력
대구대학교
전기공학 전공 · AI응용 복수전공
2020.03 ~ 2024.02
교육
삼성 청년 SW·AI 아카데미
삼성전자
2026.01 ~ 2026.12
자격
정보처리기사
2025.06
자격
SQLD
2026.03
동아리
AIS 학술동아리
소프트웨어 동아리 운영
정기 기술 세미나·프로젝트 단계별 공유·회고 운영
수상
로컬 AI 메이커스랩
최우수상 (전체 2위)
코끼리공장 B2B 자료 분류·협업 대시보드
수상
2022 한국관광공사 관광데이터 활용 공모전
장려상
관광지 정보 및 혼잡도 제공 모바일 웹 (여행다모아)
교육
웹 표준·접근성 멘토링
코멘토
스크린리더 실습을 통한 보조기술·사용 환경을 고려한 UI 설계 학습
교육봉사
소프트웨어 교육봉사
네이버
초등학생 대상 코딩·로봇 실습 지도와 눈높이에 맞춘 기술 설명
전체 수상 내역펼치기접기
수상
2022 한국관광공사 관광데이터 활용 공모전
장려상
관광지 정보 및 혼잡도 제공 모바일 웹 (여행다모아)
수상
제11회 울산발명아이디어 경진대회
동상
산업현장 AI 위기감지 자동정지장치
수상
제6회 글로벌 이노베이터 페스타
우수상
아이디어톤
수상
2022 미래형 이동수단 자작 경진대회
기계IT대학장상
GPS, 영상처리 및 ROS를 활용한 자작자동차
수상
창의아이디어&발명디자인 경진대회
입선
보행자, 차량 감지를 통한 교통사고 경보시스템
수상
2022 Global Capstone Design Project
Creativity Award
토양 성분 측정 로봇
수상
2020 입문공학설계 경진대회
우수상
스마트 텀블러
수상
ICT 융복합 캡스톤 디자인 아이디어 경진대회
장려상
대구대학교 정보통신대학
수상
2021 공동 심화 창의 융합캠프
동상
영남대학교 공학교육혁신센터
수상
2021학년도 정보통신대전 학생작품경진대회
입선
대구대학교 정보통신대학
수상
제3회 경북도내 지역사회 현안문제 해결방안 경진대회
우수상
고창증 감지를 위한 스마트 축산 농가 시스템
수상
2021학년도 창업셀동아리 성과보고회
대상
대구대학교 LINC+
수상
2022년 글로벌 이노베이터 페스타
우수상
메이커톤
수상
제2회 소방안전 AI예측 경진대회
우수상
강원도 소방본부
수상
POLARIS SIF 2023
사업단장상
차세대반도체 디지털 혁신공유대학
수상
로컬 AI 메이커스랩
최우수상 (전체 2위)
코끼리공장 B2B 자료 분류·협업 대시보드
사용 기술
언어
TypeScriptJavaScript
Java
Python프론트엔드
React
Next.jsVue.jsTanStack QueryReduxZustandPinia스타일·시각화
TailwindCSS
SCSSStyled-Components
Three.js개발·협업
MSW
Jira
Git데이터·서버
FirebaseExpress.jsSparkHDFS