📞 Contact Info.
Email: [email protected]
🔗 Channel.
Github: https://github.com/yoouung
LinkedIn: https://www.linkedin.com/in/yoouung
Front-end Developer Skilled in React
About Me.
사용자 경험을 중시하여 웹 환경을 설계하는 프론트엔드 개발자
학부 시절 1년간 비정형 데이터 정제 웹 솔루션을 개발(2인)하여, 데이터 솔루션 기업과 기술 이전 협약을 체결하며 수익을 창출한 경험이 있습니다. 고객사와 여러 차례의 미팅을 주도하며, 팀원, 관계자들과 협력하여 프로젝트 요구사항 분석부터 UI 설계, 기능 구현까지 진행했습니다.
더불어, 3D 기반 추억 공유 커뮤니티를 개발하며 사용자의 피드백을 반영하여, 초기 로드 시간을 90% 단축하는 등의 최적화를 수행하여 트렌딩 프로덕트 1위를 달성한 경험이 있습니다. 짧은 기간 내에 완성하고자 애자일 방법론을 기반으로 스프린트별 목표를 설정하여 프로젝트를 진행했습니다.
저는 이러한 경험을 바탕으로 사용자 만족도와 성능을 극대화하는 웹 개발에 주력하고 있습니다.
Main Projects.
DAO
🔗 GitHub | 서비스 링크
3D 모델을 통해 추억을 공유하는 커뮤니티
- 기간: 2024.07.22~2024.12.13
Next.js, React, TypeScript, Three.js, Stomp, Zustand, TanStack Query- 팀 구성: 5인 (FE 2명, BE 3명)
- 담당 업무: 기획 및 프론트엔드 개발
- 성과:
- 디스콰이엇 트렌딩 프로덕트 1위 달성
- 사용자 53명 확보
- 개발 내용
- Three.js를 활용하여 3D 모델 렌더링
- Stomp를 활용한 실시간 채팅 및 SSE 알림 기능 구현
- Intersection Observer API를 활용하여 무한 스크롤 구현
- Next.js 마이그레이션
- 고민했던 내용 및 해결 방안
- 브라우저 성능 최적화
- Solving: 1. 3D 모델 경량화 2. React Memo 3. Lazy Loading을 적용하여 브라우저 메모리 사용량 91%(6GB→500MB) 절감, 로드 시간 90%(16초→1.6초) 단축
- Problem: 유저 데이터나 채팅 토큰 데이터 등 보안에 민감한 데이터를 Local Storage에 장기간 저장하고 있음
- Solving: Zustand를 도입하여 데이터를 애플리케이션 내에서 관리하며, 민감한 데이터를 브라우저에 노출시키지 않도록 함
- Problem: 이미 삭제된 라운지에 대한 초대를 수락할 경우, 라운지 상세 정보 조회 요청이 4번 반복되어 리다이렉트 지연 발생
- Solving: TanStack Query의 요청 재시도 횟수를 1회로 설정하여 불필요한 반복 요청을 방지하고 응답 속도 개선
- 공통 컴포넌트 모듈화를 통한 재사용성 향상
- 오브제 생성 및 수정 코드를 하나로 통합하고, 오브제 정보 입력 폼을 공통 컴포넌트로 분리해 코드 중복을 제거
P-Helper
🔗 GitHub | 서비스 링크
비정형 데이터에서 더티 데이터*를 정제해주는 웹 서비스
- 기간: 2023.02.20~2024.01.31
React, JavaScript, Styled-Component, Python- 팀 구성: 2인 (FE 1명, BE 1명)
- 담당 업무: 기획 및 프론트엔드 개발
- 성과:
- 한국IT서비스학회 및 해외 대학 발표 심포지엄 참여
- 교내 캡스톤 디자인 경진대회 대상 수상
- 데이터 솔루션 기업과 기술 이전 협약하여 500만원 수익 창출
- 개발 내용
- Media-Query 사용하여 반응형 웹 구현
- 보고서 생성 및 다운로드 기능 구현 (txt 및 pdf 형식)
- 정제 모듈: 부산대학교 맞춤법 검사기 API 및 정규식 등 활용하여 구현
- 웹 크롤링을 통해 데이터 수집 및 정제 모듈 성능 테스트
- 고민했던 내용 및 해결 방안
- Problem: 데이터 크기 차이가 큰 경우, 작은 데이터가 차트에서 눈에 띄지 않음
- Solving: Chart.js의 로그 스케일 기능을 도입해 y축 값을 비례적으로 조정하여, 작은 데이터도 시각적으로 명확히 보이도록 재설계
- Problem: Local Storage의 용량 제한(약 5MB)으로 인해 서버 응답 데이터(변환 결과)를 저장하지 못함
- Solving: 대규모 구조화 데이터를 저장할 수 있는 IndexedDB를 통해 브라우저 메모리의 용량 제한 문제를 해결
- Problem: 통계 페이지에서 새로고침 시 사용자가 선택했던 탭 정보가 초기화됨
- Solving: 사용자가 선택한 탭 정보를 Session Storage에 저장하여 사용자 상태를 유지하도록 개선
- Local Storage가 아닌 Session Storage를 사용한 이유: 탭 선택 정보는 브라우저를 닫으면 초기화되어야 하는 임시 데이터이기 때문입니다.
- 고객사 협업 및 프로젝트 관리
- 주기적으로 미팅하며, 추가 요구사항과 피드백을 신속히 반영
- 2주간 진행한 테스트에서 발생한 15건의 버그 해결
- 프로젝트 완료 후 270페이지 분량의 프로그램 매뉴얼을 작성하여 제공
*더티 데이터: 오탈자, 비속어, 개인정보, 중복 문구, 특수문자
Work Experiences.
스타트업코드 인턴
컨텐츠 기획 및 개발
- 기간: 2025.01~2025.03 (재직중)
- 교재 서빙 플랫폼 설계 및 개발 담당
- 팀 구성: 1인
- 화면 설계서 및 기능정의서 개발
- ERD, API 명세서 설계
- 프론트엔드 개발을 담당하여, 서비스 MVP 구축 진행중
IT서비스연구실 학부연구생
서울과학기술대학교
- 기간: 2021.11~2023.06 (약 20개월)
- 에너지 마이데이터 공유/거래 가이드라인 및 정보시스템 설계
- AMI 데이터를 활용한 에너지 서비스 모델 개발 연구
- 에너지 데이터 공유 및 거래를 위한 플랫폼 구조 및 기능 설계
- (2022) 하계종합학술대회, 한국정보기술학회, 우수논문상
- (2021) 추계종합학술대회, 한국정보기술학회, 우수논문상
- 딥페이크 기술을 이용한 얼굴 비식별화 연구