6.4. 프론트엔드 리뉴얼
프론트엔드 리뉴얼
섹션 제목: “프론트엔드 리뉴얼”좋은생각 UI/UX 개선 및 웹 에디터 기능 강화
제안 배경
섹션 제목: “제안 배경”현재 문제점
섹션 제목: “현재 문제점”- 오래된 디자인으로 사용자 경험 저하 (현행 홈페이지: Node.js + SPA, AWS 운영)
- 모바일 최적화 미흡
- 웹 에디터 기능 부족으로 편집실 콘텐츠 제작 비효율
- 관리자 시스템(XPlatform C/S)과 홈페이지 분리 → 데이터 이중 관리
개선 필요성
섹션 제목: “개선 필요성”- 브랜드 아이덴티티 반영한 현대적 디자인
- 반응형 웹으로 다양한 디바이스 지원
- 효율적인 콘텐츠 생산 도구
제안 내용
섹션 제목: “제안 내용”1. UI/UX 개선
섹션 제목: “1. UI/UX 개선”디자인 방향
섹션 제목: “디자인 방향”
개선 항목
섹션 제목: “개선 항목”| 영역 | 현재 | 개선 방향 |
|---|---|---|
| 메인 페이지 | 정보 과다 | 핵심 콘텐츠 중심, 여백 활용 |
| 글 읽기 | 가독성 낮음 | 최적 행간/자간, 집중 모드 |
| 네비게이션 | 복잡한 구조 | 직관적 메뉴, 검색 강화 |
| 모바일 | 최적화 미흡 | 모바일 퍼스트 설계 |
2. 반응형 웹 디자인
섹션 제목: “2. 반응형 웹 디자인”
3. 웹 에디터 기능 강화
섹션 제목: “3. 웹 에디터 기능 강화”에디터 요구사항
섹션 제목: “에디터 요구사항”| 기능 | 설명 | 우선순위 |
|---|---|---|
| WYSIWYG | 실시간 미리보기 편집 | 필수 |
| 템플릿 | 좋은생각 스타일 템플릿 | 필수 |
| 이미지 | 드래그앤드롭, 자동 최적화 | 필수 |
| 인용구 | 좋은생각 스타일 인용 블록 | 필수 |
| 협업 | 다중 사용자 동시 편집 | 선택 |
| 버전 | 히스토리 관리, 복원 | 선택 |
에디터 UI 컨셉
섹션 제목: “에디터 UI 컨셉”
기대 효과
섹션 제목: “기대 효과”정량적 효과
섹션 제목: “정량적 효과”[참고] 추정치
현행 홈페이지 트래픽/성능 수치는 인터뷰 및 GA 데이터 확인 후 보정이 필요합니다.
| 지표 | 현재 (추정) | 목표 | 개선율 |
|---|---|---|---|
| 페이지 로딩 속도 | 4~6초 (SPA 초기 로딩) | 2초 이내 (SSR+CDN) | 50~70% 단축 |
| 모바일 트래픽 비중 | ~40% (미최적화 상태) | 60% 이상 지원 | 모바일 퍼스트 |
| 콘텐츠 작성 시간 | 30~60분/건 | 15~30분/건 | 50% 단축 |
| 이탈률 | ~60% (추정) | ~40% | 20%p 감소 |
정성적 효과
섹션 제목: “정성적 효과”- 브랜드 이미지 현대화
- 사용자 만족도 향상
- 콘텐츠 품질 일관성 확보
- 편집자 업무 효율 개선
구현 방안 (안)
섹션 제목: “구현 방안 (안)”기술 스택 제안
섹션 제목: “기술 스택 제안”| 영역 | 기술 | 선정 이유 |
|---|---|---|
| Framework | Next.js (App Router) | SEO 최적화 (SSR/SSG), ISP 권장 스택, 관리자 시스템과 TypeScript 통일 |
| Styling | Tailwind CSS | 일관된 디자인 시스템, 빠른 프로토타이핑 |
| Editor | TipTap / Editor.js | 확장성, 커스터마이징, 좋은생각 스타일 블록 구현 |
| CMS 연동 | 통합 DB API (NestJS) | 현행 CMS 13t(ptcms_*) 통합 관리자 시스템 API 경유 |
[참고] ISP 연계
홈페이지 프론트엔드는 웹 시스템 아키텍처의 “홈페이지 SPA” 레이어에 해당합니다. 관리자 시스템과 동일한 NestJS 백엔드 API를 공유하되, 코드베이스는 분리합니다.
단계별 구현
섹션 제목: “단계별 구현”| 단계 | 기간 | 내용 |
|---|---|---|
| 1 | 1개월 | 디자인 시스템 정의, UI 설계 |
| 2 | 2개월 | 프론트엔드 개발 |
| 3 | 1개월 | 웹 에디터 개발 |
| 4 | 1개월 | 테스트 및 최적화 |