History
5년간의 프론트엔드 개발 여정과 프로젝트 기록
Work History
Work
CompanyDAY1 COMPANY
RoleFastcampus B2C Frontend Part Lead
Period2023.10 – 2025.05
Work
CompanyDAY1 COMPANY
RoleZero-Base Team & LMS Admin Team Member
Period2020.12 – 2023.10
Work
Company홍단 디자인 스튜디오
RoleGraphic Designer
Period2016.06 – 2017.12
Education
Company국민대학교
Role시각디자인학과 (Visual Communication)
Period2011 – 2016
Awards
Award구름톤 해커톤 대상2025
AwardJNU RISEFLOW 아이디어톤 최우수상2025
Work Experience
#ProjectPeriod
T
- 기존 Axios 기반 구조에서 서버·클라이언트 환경별 API 호출 로직이 분산되어 불필요한 보일러플레이트 코드가 반복됨.
- Next.js 도입 시 성능 최적화의 핵심인 캐싱 정책을 적용하기에 구조적 한계가 존재함.
A
- HTTP Gateway 패턴을 적용하여 런타임 환경을 스스로 감지하고 적절한 통신 방식을 선택하는 통합 인터페이스 설계.
- 인증 토큰 관리, 에러 파싱 등 공통 기능을 중앙화하여 복잡성을 격리하고 Tanstack Query로 데이터 동기화 효율 극대화.
R
- Request Memoization을 적극 도입하여 서버 컴포넌트 내 중복 네트워크 요청을 최대 75% 감소시키며 시스템 부하를 획기적으로 경감.
- 개발자가 환경 설정 고민 없이 비즈니스 로직에만 집중할 수 있게 되어 개발 생산성 30% 향상 및 유지보수성 확보.
T
- 480여 개 컴포넌트에 비즈니스 로직이 파편화되어 있고 문서화가 부재하여, 전체 시스템 흐름 파악이 난해함.
- 신규 기능 개발 시 사이드 이펙트가 빈번하고, 신규 입사자의 업무 적응 기간이 평균 4주 소요되는 등 비효율 발생.
A
- 유관 부서 인터뷰와 데이터 역추적을 통해 숨겨진 비즈니스 규칙을 명시화하고, 26개 도메인별 API 모듈로 재설계하여 관심사의 분리(Separation of Concerns) 달성.
- 핵심 로직을 서버 컴포넌트로 이관하고 모든 정책을 문서화하여 신뢰할 수 있는 단일 진실 공급원(SSOT) 구축.
R
- 코드 복잡도 40% 감소 및 빌드 시간 50% 단축을 통해 기술적 부채를 대폭 해소.
- 타 부서 소통 비용 70% 절감 및 신규 입사자 온보딩 기간을 1.5주로 단축하여 조직 전체의 협업 효율성 증대.
T
- 서비스 진입 시 필수적인 프로필 생성 단계가 높은 장벽으로 작용하여 초기 이탈을 유발함.
- 페이지 접근 시마다 반복되는 서버 호출로 인해 로딩이 지연되고 사용자 경험이 저하됨.
A
- 점진적 온보딩(Progressive Onboarding) 전략으로 최초 진입 시 프로필을 자동 생성하고, 추가 정보는 지연 등록(Lazy Registration) 처리.
- 프리페칭(Prefetching) 기술을 도입하여 데이터를 미리 로드함으로써 대기 시간을 제거하고 즉각적인 반응성 제공.
R
- 회원·비회원 모두 막힘없이 이용 가능한 마찰 없는 진입(Frictionless Entry) 환경을 구현하여 참여율 증대.
- 불필요한 로딩 과정을 제거해 체감 성능을 획기적으로 개선하고 사용자 이탈률 최소화.
T
- 기능 의존성이 복잡하고, 기획 변경 잦아 팀 전체 우선순위와 컨텍스트 공유 어려움
A
- 유저 플로우 차트 제작, 도메인 단위로 업무 분배, 변경사항을 정기적으로 공유하며 차트 업데이트
R
- 6주 내 커뮤니티 MVP 출시 (질문·답변, 강사 메일링, 주간 랭킹, 프로필 기능 등)
- 변경사항에도 흔들리지 않는 협업 프로세스 확립
T
- 신규 페이지와 컴포넌트가 빠르게 늘어났으나 기존 구조와 혼재되어 개발 속도 저하
- 규칙 부재로 작업자 간 중복 컴포넌트 생성하는 이슈 발생
A
- template, route group 활용해 라우팅 아키텍처 분리
- app 라우트 내 컴포넌트를 segment 단위로 나누고 depth 제한, 네이밍 규칙 수립
R
- 컴포넌트 구조가 명확해져 중복 작업·커뮤니케이션 비용 감소
- 장기적 유지보수성과 확장성 개선
T
- HTML 문자열 저장 방식은 동적 기능 추가가 어렵고, 간단한 수정에도 개발자 개입과 재배포가 필수적인 비효율적 구조.
- 마케팅을 위한 기민한 페이지 개선이 어렵고, 단순 반복 작업으로 인한 개발 리소스 낭비가 심각함.
A
- HTML과 JSON 데이터를 이중화하는 Hybrid CMS 아키텍처를 설계하여 정적 콘텐츠와 동적 기능(React 컴포넌트)을 효율적으로 분리.
- TypeScript를 도입해 데이터 안정성을 보장하고, 점진적 마이그레이션 전략으로 시스템 전환 리스크 최소화.
R
- 신규 레이아웃 개발 시간을 80% 단축(6시간→1시간대)하고, 기획자가 백오피스에서 직접 수정 가능하도록 하여 운영 효율 극대화.
- 코드 재사용성 확대: 레이아웃 컴포넌트 모듈화로 FC 국내·글로벌·SHAREX 3개 사이트에서 동일 컴포넌트 공유 가능, 향후 NPM 패키지 배포 기반 마련
T
- 핵심 정보가 페이지 하단에 배치되어 사용자 이탈률이 높았으며, 백엔드 데이터가 프론트엔드에서 충분히 활용되지 못함.
- 사용자 경험 개선을 위한 데이터 기반의 의사결정보다는 직관에 의존한 기획이 주를 이루고 있었음.
A
- API 응답 분석으로 미사용 '미리보기' 데이터를 발굴하고, 신규 기능을 역기획하여 Above the Fold 영역 최적화.
- A/B 테스트를 통해 큐레이션 영역 신설 효과를 검증하고 데이터에 기반한 최적의 UI/UX 선정.
R
- 페이지 참여율 5.4%, 스크롤 유지율 6.8% 향상 및 미리보기 기능 도입으로 구매 전환율 1.8배 증대.
- 데이터를 근거로 가설을 세우고 검증하며 의사결정하는 문화를 팀 내에 정착시키는 계기 마련.
T
- 수동적인 이슈 관리와 배포 가시성 부재로 업무 누락 및 일정 관리에 어려움이 발생함.
- 배포 시마다 팀원 간 커뮤니케이션 비용이 과도하게 발생하고 릴리즈 과정이 불투명함.
A
- JIRA 워크플로우 최적화 및 11개 자동화 규칙 도입, Slack·CI/CD 연동으로 배포 상황 실시간 공유 체계 구축.
- 트렁크 기반 개발(Trunk-Based Development) 전략을 도입하여 작은 단위로 자주 배포하는 애자일 환경 조성.
R
- 릴리즈 안정성 확보 및 장애 원인 파악 시간 단축, 실시간 대시보드를 통한 협업 비용 절감.
- 빈번한 배포를 통해 사용자 피드백을 신속하게 반영하고 프로덕트 방향성을 검증하는 선순환 구조 정착.
T
- 산발적인 운영 이슈 인입으로 개발 리소스가 분산되어 핵심 프로젝트 일정에 차질 발생.
- 특정 개발자에게 이슈 대응이 집중되면서 도메인 지식 불균형 및 업무 과부하 심화.
A
- 운영 이슈 담당제(On-Call Rotation) 도입 및 소통 창구 일원화, 명확한 에스컬레이션 규칙 수립.
- JIRA를 활용해 버그 해결 과정을 체계적으로 기록하고 지식 베이스를 구축하여 노하우 자산화.
R
- 도메인 지식이 팀 전체로 공유되어 장애 대응 역량이 상향 평준화되고 특정인 의존도 해소.
- 운영 이슈 대응 리소스를 40% 절감하여 팀원들이 본연의 개발 업무에 집중할 수 있는 환경 조성.
T
- 주니어 개발자들이 문제 상황을 자발적으로 공유하지 못하는 상황
A
- 1 on 1 미팅 포맷을 구조화하고, 질문 가이드를 통해 심리적 안정감 제공
- 기술적 어려움 외에도 일정, 협업 이슈 등 다양한 주제 공유 유도
R
- 팀 내 협업 이슈 조기 발견, 문제 해결 속도 향상
- 주니어 개발자의 문제 해결 역량 및 자율성 강화
T
- 사내 타사이트의 복제 개발로 인해 보일러 플레이트. 파악하기 어려운 코드 구조
- 디자이너별 UI 편차로 코드 재사용성 저하 및 사용자 경험 일관성 부족
A
- 기존 사이트의 Atomic Design 기반 컴포넌트를 비즈니스 책임 기반 공통 컴포넌트로 재설계
- 모달·토스트 시스템 개발 및 문구 일관성 정리, 문서화
R
- 퍼블리싱 사이트 전반에 활용되는 디자인 시스템 컴포넌트로 확장
- 레거시 코드의 오버엔지니어링 요소 개선으로 가독성과 재사용성 향상