플러스프로젝트 배경
1) 문제점 - 레거시 jQuery 기반 구조로 화면 수정·신규 페이지 추가 시마다 중복 코드가 늘어 유지보수 비용 증가 - 디자인 가이드 부재로 버튼·폼·배치 등 UI가 페이지마다 제각각이라 일관성 저하 - 내부에 기획자·백엔드 개발자는 있으나 디자인/퍼블리셔가 없어, 200개가 넘는 화면의 프론트엔드 구현이 병목 2) 프로젝트 목표 - 컴포넌트화: 아토믹 디자인 시스템으로 공통 UI를 표준화해
프로젝트 성과
퍼블리싱 코드량 60% 감소
공통 컴포넌트화를 통해 페이지당 반복 마크업을 제거, 동일 기능 대비 코드량을 약 60% 절감
모바일 반응형 렌더링 성능 100점
Lighthouse 모바일 퍼포먼스 100점 달성, 인강 시청 이탈률 개선
신규 화면 제작 시간 약 50% 단축
표준 컴포넌트 재사용으로 신규 페이지 1건당 개발 소요 기산 대폭 감소
UI 문의 커뮤니케이션 40% 감소
Storybook 문서화로 개발자의 UI 구현 문의·재작업 요청 감소
핵심 기능
UI/UX 디자인 시스템 & 컴포넌트
- Primary 버튼의 상태별 정의, Input 필드, Badge, 타이포·컬러 토큰까지 정리한 아토믹 UI 키트
- 가이드 문서 형태로 일관된 화면 제작을 지원
- 가이드 문서 형태로 일관된 화면 제작을 지원
진행 단계
기획 및 요구사항 정의
2025.09.
200+ 화면 인벤토리 분석, 반응형 기준 및 컴포넌트 범위 확정
프로젝트 상세
▌국가기술자격증 준비 수험생을 위한 VOD 인강 & 학습관리 플랫폼 프론트엔드 전면 리빌딩 1) 포트폴리오 소개 - 낡은 jQuery 기반 사이트를 React 아토믹 디자인 시스템으로 재구축해, 200개가 넘는 화면의 렌더링 속도와 유지보수성을 극대화한 프로젝트입니다. 2) 작업 범위 - 화면 설계, UI/UX 디자인, 디자인 시스템 구축, Front-end 퍼블리싱 및 컴포넌트 개발, Stor
