좋은생각 UI/UX 개선 및 웹 에디터 기능 강화
- 오래된 디자인으로 사용자 경험 저하 (현행 홈페이지: Node.js + SPA, AWS 운영)
- 모바일 최적화 미흡
- 웹 에디터 기능 부족으로 편집실 콘텐츠 제작 비효율
- 관리자 시스템(XPlatform C/S)과 홈페이지 분리 → 데이터 이중 관리
- 브랜드 아이덴티티 반영한 현대적 디자인
- 반응형 웹으로 다양한 디바이스 지원
- 효율적인 콘텐츠 생산 도구
graph TD
A["좋은생각 디자인 컨셉<br/><br/>키워드: 따뜻함 | 정제됨 | 신뢰감 | 편안함"]
B["컬러 팔레트<br/><br/>Primary: #______ | Secondary: #______<br/>Accent: #______ | Background: #______"]
C["타이포그래피<br/><br/>제목: 본명조 / Noto Serif KR<br/>본문: 프리텐다드 / Pretendard"]
A --> B
A --> C
style A fill:#f9f9f9,stroke:#333,stroke-width:2px
style B fill:#f5f5f5,stroke:#999,stroke-width:1px
style C fill:#f5f5f5,stroke:#999,stroke-width:1px
| 영역 | 현재 | 개선 방향 |
|---|
| 메인 페이지 | 정보 과다 | 핵심 콘텐츠 중심, 여백 활용 |
| 글 읽기 | 가독성 낮음 | 최적 행간/자간, 집중 모드 |
| 네비게이션 | 복잡한 구조 | 직관적 메뉴, 검색 강화 |
| 모바일 | 최적화 미흡 | 모바일 퍼스트 설계 |
graph LR
A["Mobile<br/>~767px<br/><br/>1컬럼"]
B["Tablet<br/>768~1023px<br/><br/>2컬럼"]
C["Desktop<br/>1024~1439px<br/><br/>3컬럼"]
D["Wide<br/>1440px~<br/><br/>사이드바<br/>+ 3컬럼"]
A --> B
B --> C
C --> D
style A fill:#f0f0f0,stroke:#666,stroke-width:2px
style B fill:#e8e8e8,stroke:#666,stroke-width:2px
style C fill:#e0e0e0,stroke:#666,stroke-width:2px
style D fill:#d8d8d8,stroke:#666,stroke-width:2px
| 기능 | 설명 | 우선순위 |
|---|
| WYSIWYG | 실시간 미리보기 편집 | 필수 |
| 템플릿 | 좋은생각 스타일 템플릿 | 필수 |
| 이미지 | 드래그앤드롭, 자동 최적화 | 필수 |
| 인용구 | 좋은생각 스타일 인용 블록 | 필수 |
| 협업 | 다중 사용자 동시 편집 | 선택 |
| 버전 | 히스토리 관리, 복원 | 선택 |
graph TD
A["좋은생각 웹 에디터<br/><br/>[저장] [발행]"]
B["[B] [I] [U] │ [H1] [H2] │ [각주] [목록] │ [이미지] [링크] │ [템플릿]"]
C["제목을 입력하세요"]
D["─────────────────────────────────"]
E["본문을 작성하세요..."]
F["좋은 글귀를 인용합니다<br/><br/>- 작가명"]
A --> B
B --> C
C --> D
D --> E
E --> F
style A fill:#f9f9f9,stroke:#333,stroke-width:2px
style B fill:#f5f5f5,stroke:#999,stroke-width:1px
style F fill:#e8f4f8,stroke:#666,stroke-width:2px
| 지표 | 현재 (추정) | 목표 | 개선율 |
|---|
| 페이지 로딩 속도 | 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 경유 |
| 단계 | 기간 | 내용 |
|---|
| 1 | 1개월 | 디자인 시스템 정의, UI 설계 |
| 2 | 2개월 | 프론트엔드 개발 |
| 3 | 1개월 | 웹 에디터 개발 |
| 4 | 1개월 | 테스트 및 최적화 |
| 날짜 | 작성자 | 변경 내용 |
|---|
| 2026-02-26 | - | 초안 작성 (템플릿) |
| 2026-03-03 | 김명직 | 정량적 효과 추정값 채움, 기술 스택 ISP 권장안 반영 (Next.js+Tailwind+NestJS API), CMS 연동 현행 분석 반영 |
