미리보기
기본 정보
React와 Next.js를 활용한 웹 애플리케이션 개발 경험을 바탕으로 퍼포먼스 최적화, 사용자 경험 개선에 집중했습니다. 이외에도 AI 챗봇 개발 같은 다양한 프로젝트에 참여하며, 새로운 기술을 탐구하고 도입하는데 흥미를 느꼈습니다. 다양한 사람들과 소통하며 프로젝트를 주도했던 PM 경험을 바탕으로 효율적인 협업 구조를 만듭니다. 팀 리더로서 구두 소통의 오해를 줄이기 위해 데일리 스크럼을 도입하고, GitHub Issues와 Discussion으로 업무를 체계화해 커뮤니케이션 리소스를 최대 60% 감소하고 협업 생산성을 높였습니다. 이러한 노력으로 팀원들에게 ‘함께 일할 때 든든하다’는 평가를 받았습니다.
기술 스택
JavaScript, TypeScript, React, Next.js, Redux, redux-toolkit, React Context, zustand, react-query, TailWindCSS, supabase, Figma
경력
(주)펄핏
인턴 | 개발팀
2024.10. ~ 2024.11. (2개월)
개요
기개발된 3D 그래픽 SDK를 활용한 신발 가상 착화 모바일웹 서비스 개발
담당 역할
SDK 통합 및 초기화 최적화
Recoil 상태 관리 및 커스텀 훅 개발로 SDK 생명주기 효율적 관리 및 메모리 누수 방지
🔗 동적 스크립트 로드 전략 구현 → SDK 카메라 재초기화 문제 해결
SDK 초기화 진행률 기반 프로그래시브 로딩 UI 구현
🔗 이미지 캡쳐 및 공유 기능 개발 → 크로스 브라우징 호환성 확보
UX/UI 향상을 위한 🔗 단계별 로딩 전략 설계
React Suspense를 사용한 로딩 경험 개선 및 Lottie 애니메이션 최적화
Framer Motion으로 자연스러운 화면 전환 효과 구현
아키텍처 설계 및 모듈화
아토믹 디자인 패턴 채택 → 컴포넌트 재사용성 향상
Custom Hook으로 비즈니스 로직과 UI 분리 → 유지보수성 개선
사용 기술
Next.js, TypeScript, Recoil, React Query, Tailwind CSS, i18next
(주)엠티엘컴퍼니
팀원 | 콘텐츠팀
2021.07. ~ 2023.06. (2년)
온오프라인 이벤트 기획 및 PM
프로젝트
PAi (Personal Ai Assistant)
스파르타 코딩클럽 | FE 5명, Designer 1명
2024.07. ~ 2024.08.
개요
AI 챗봇으로 일정을 작성, 추천받는 통합 일정 관리 서비스
담당 역할
Team Leader로서 아키텍쳐 설계 및 모듈 구조화
OPEN AI 기반 챗봇 개발
JSON 기반 프롬프팅 → 투두리스트 작성, 추천, 저장 챗봇 기능 구현
채팅 제목 자동 생성 및 업데이트 기능
채팅 데이터 리스팅 무한스크롤 적용 → 대용량 데이터 효율적 처리
10개의 알림을 하나의
🔗 공용 모달 Custom Hook 으로 개선
UI 및 디자인 시스템 구축 → 디자인과 개발 간 협업 및 확장성 강화
동적 레이아웃 헤더 및 공통 컴포넌트 설계 → 재사용성 및 유지보수성 확보
디자인 시스템 정립 → 스타일 일관성 유지
반응형 UI 레이아웃 설계 및 유지보수
PWA 웹앱 구축 및 배포
트러블슈팅
1. 문제 상황 : 유저 테스트 중 채팅 응답 로딩 개선 요구
시도 1 : 최신 챗봇 응답에 로딩 UI 적용 시도
AI 응답 처리 속도의 불규칙성으로 인해 로딩 UI가 일시적으로 사라지거나 불규칙하게 표시되는 문제
비효율적인 필터링과 불필요한 상태 관리 로직 추가
시도 2 : optimimstic update 적용
자연스러운 로딩 UI 구현 및 상태 관리 감소화
결과 : VOC 10건 → 0건으로 감소, 사용자 경험 대폭 개선 및 시스템 안정성 확보
2. 문제 상황 : 🔗 서버와 클라이언트 사이의 투두리스트 데이터 동기화 오류
시도 1 : 커스텀훅 사용 시도
Mutation 커스텀훅을 사용해 서버와 클라이언트 간 데이터 일치 시도했으나, React 훅의 구조적 제약으로 실패
시도 2 : DB 데이터 저장 후 관련 쿼리 무효화 적용
서버는 기존 로직을 유지하고, 클라이언트에서 저장 시 채팅뿐만 아니라 투두리스트 쿼리도 함께 무효화하여 동기화 문제 해결
결과 : 서버-클라이언트 간 데이터 일관성 유지 및 실시간 UI 업데이트로 사용자 경험 크게 개선
사용 기술
Next.js, TypeScript, Zustand, React Query, Supabase, Supabase Realtime, Tailwind CSS, Vercel, OpenAI API, PWA
CyTunes (음악 공유 커뮤니티 플랫폼)
스파르타 코딩클럽 | FE 5명
2024.07. ~ 2024.07.
개요
사용자들끼리 음악을 추천하고 들어볼 수 있으며, 아티스트, 노래를 검색해 찾아볼 수 있는 음악 공유 커뮤니티 플랫폼
담당 역할
Team Leader, PM → 기획, 일정 조율, 팀 내 커뮤니케이션 관리
Supabase 기반 백엔드 설계 및 데이터베이스 관리
React Query 활용한 데이터 캐싱 → 비동기 데이터 처리 효율 개선
🔗 네트워크 요청 최적화 custom fetch 및 ISR 적용 -> 속도 50% 감소 (1800ms → 900ms)
좋아요 기능에 Optimistic Update 적용 → UX 향상
🔗 Spotify API 의 사이드 이펙트 문제 해결 및 성능 최적화
API 요청 Promise.all 병렬 처리 → 속도 79% 개선 (6550ms -> 1350ms)
캐러셀 UI 플레이리스트 및 트랙 플레이어 구현 → 사용자 경험 강화
트러블슈팅
문제 상황 1 : 🔗 데이터 요청 속도 차이로 인한 불규칙한 로딩 UI
해결 과정 :
비동기 요청 병렬 처리 : useQueries와 Promise.all을 활용하여 API 요청을 최적화
SSR 활용 사전 데이터 로딩 : prefetchQuery로 필요한 데이터를 미리 불러와 불필요한 요청 제거
결과 : 로딩 일관성 확보 및 코드 구조화
문제 상황 2 : 🔗 여러 페이지에서 반복되는 댓글 CRUD
해결 과정:
재사용 가능한 Custom Hook 모듈화 : CRUD 로직을 하나의 훅으로 통합하고, 공통된 인자를 넘여주는 방식으로 각 페이지에서 손쉽게 재사용 가능하도록 구성
결과 : 코드 재사용성 및 유지보수성 대폭 향상
사용 기술
Next.js, TypeScript, Zustand, React Query, Supabase, Tailwind CSS, Vercel, Spotify API
포트폴리오
자기소개
1. 다각도로 사용자 경험을 고민하고, 유연한 해결책을 제시합니다.
건축 디자인을 전공하며 쌓은 사용자 경험에 대한 이해와 기획자로서의 경험을 바탕으로, 개발에서도 사용자 중심의 사고를 실천합니다. CyTunes 프로젝트에서는 Spotify API의 기술적 한계를 미리듣기 기능과 직관적인 툴팁 UI로 보완했으며, 복잡한 API 호출 구조는 Promise.all을 통한 병렬 처리와 React Query의 캐싱 전략으로 성능을 최적화했습니다.
최근에는 OPEN AI 기반 챗봇 프로젝트에서 프롬프트 제어 문제를 직관적인 시스템 버튼과 상황별 에러 메시지로 개선하여, 기술 구현과 사용자 경험 모두를 고려한 솔루션을 제공했습니다. 이처럼 저는 기술적 문제에 직면했을 때 사용자 중심의 접근으로 실용적인 해결책을 찾고 이를 효과적으로 구현하는 것에 강점이 있습니다.
2. 어려운 문제를 주도적으로 해결하며 협업합니다.
인턴십에서 가상 신발 착화 서비스를 개발할 때 처음 접하는 SDK와 제한된 문서로 인한 어려움을 극복한 경험이 있습니다. 특히 캡처 메소드 오작동 문제에서는 SDK 구조를 직접 분석하고, 해결이 어려울 때는 문제 상황을 명확히 문서화하여 사수와 효과적으로 소통했습니다.
크로스 브라우징 이슈 해결을 위해 주요 라이브러리들을 비교 분석했고, html2canvas의 object-fit 미지원 문제는 대체 CSS 속성을 적용하는 창의적인 방식으로 해결했습니다. 이 과정에서 주도적인 문제 해결을 시도하되, 시간 관리와 협업의 균형을 고려해 적절한 시점에 도움을 요청하는 판단력을 키웠습니다. 이를 통해 혼자만의 해결 시도와 팀 협업 사이의 균형 잡힌 접근 방식을 체득할 수 있었습니다.
3. 코드 품질 개선을 위해 끊임없이 고민합니다.
좋은 코드는 협업과 유지보수가 용이해야 한다고 생각합니다. 이를 실천하기 위해 명확한 네이밍과 일관된 구조를 중요시합니다. 실제 프로젝트에서는 tableName, queryKeys, errorMessages 등 상수들을 별도 폴더로 분리하여 체계적으로 관리했습니다.
또한 단일 책임 원칙(SRP)을 준수하여 formatTime과 같은 유틸리티 함수들을 모듈화하고, API 요청의 공통 로직을 함수로 모듈화하여 재사용성을 높이고 코드 중복을 줄였습니다. 컴포넌트 설계에서는 비즈니스 로직과 UI를 분리하는 원칙을 적용해, 데이터 처리는 커스텀 훅으로 분리하고 컴포넌트는 UI 렌더링에만 집중하도록 구현했습니다. 이러한 방식으로 팀과 함께 성장할 수 있는 코드 작성을 위해 구조화, 재사용성, 가독성을 모두 고려합니다.
교육
한국예술종합학교
대학교(학사) | 건축
2014.03. ~ 2021.02. | 졸업
대외활동
[내일배움캠프] 웹 프론트엔드 과정 수료
스파르타 코딩클럽
JavaScript, React, Next.js 기반 FE 과정
구현형 과제, 코드 리뷰를 통한 학습
Github, Slack, Notion, Figma를 활용한 다수의 팀 프로젝트 진행
외국어
영어
비즈니스 회화 가능
자격증
IELTS Academic
C1 | 주한영국문화원
2017.04.