사용자 웹, 편집자용 관리자, API를 하나의 모노레포로 묶은 뉴스 플랫폼을 기획부터 배포ㆍ운영까지 맡아 구축했습니다. 1) 서비스 구성 - 주제별 피드: 카테고리 탭으로 분야를 나누고, 헤드라인과 요약을 카드로 보여줘 빠르게 훑을 수 있게 구성 - 기사 상세: 글자 크기 조절과 공유 기능 등 읽기 도구 제공 - 편집자 대시보드: 기사 작성ㆍ수정ㆍ발행과 콘텐츠 관리 - 지표 화면: 방문과 콘텐츠 실적을 확인하는 분석 화면 - 모바일 우선: 한 손 조작을 기준으로 화면과 동선을 설계 2) 담당 범위 - Next.js 15ㆍReact 19ㆍTypeScript 기반 사용자 웹과 관리자 화면 개발 - NestJSㆍTypeORMㆍMySQL 기반 API 서버 설계와 구현 - CKEditor 기반 기사 편집 환경 구성 - 배포 파이프라인 구성과 운영 3) 기술적 이슈와 해결 - 기사 목록은 방문자가 가장 많이 보는 화면이라, 자주 바뀌지 않는 영역을 미리 만들어 두는 방식으로 첫 화면 로딩을 줄였습니다. - 편집자가 쓰는 에디터와 사용자 화면의 표시가 달라지는 문제를, 저장 형식을 정해 두고 양쪽이 같은 규칙으로 렌더링하도록 맞췄습니다. - 사용자 웹ㆍ관리자ㆍAPI를 한 저장소에서 관리하면서 공통 타입을 공유해, 화면과 서버가 서로 어긋나는 일을 줄였습니다. [배경과 목표] 1) 문제점 - 기사 작성과 발행, 사용자 화면이 따로 움직여 편집자가 결과를 확인하기 번거로움 - 모바일에서 기사를 훑기 어려운 구조 - 방문ㆍ콘텐츠 실적을 따로 확인해야 해 운영 판단이 늦어짐 2) 프로젝트 목표 - 읽는 경험과 편집 운영을 한 제품 안에서 처리 - 모바일에서 한 손으로 훑고 읽는 동선 - 운영 지표를 같은 화면에서 확인 3) 주안점 - 목록 화면의 초기 로딩 속도 - 에디터 저장 형식과 사용자 화면 표시의 일치 - 모노레포 공통 타입으로 화면ㆍ서버 불일치 방지 [주요 기능] - 주제별 피드와 기사 상세: 카테고리 탭과 카드형 목록으로 빠르게 훑고, 상세에서는 글자 크기 조절ㆍ공유 같은 읽기 도구를 제공합니다. - 편집자 대시보드: 기사 작성ㆍ수정ㆍ발행을 한 화면에서 처리하고, 저장 형식을 정해 사용자 화면과 같은 모습으로 표시됩니다. - 운영 지표 화면: 방문과 콘텐츠 실적을 같은 제품 안에서 확인해, 어떤 기사가 읽히는지 바로 판단할 수 있습니다. [성과] - 편집 화면과 사용자 화면 표시 일치: 저장 형식을 정해 양쪽이 같은 규칙으로 렌더링하도록 맞춰, 편집 결과가 달라 보이던 문제를 해결했습니다. - 기사 목록 초기 로딩 단축: 자주 바뀌지 않는 영역을 미리 만들어 두어, 방문자가 가장 많이 보는 목록 화면을 빠르게 띄웁니다. [진행 과정] - 2025.01. 요구사항 정의: 카테고리 구조와 기사 편집 방식, 지표 항목을 확정했습니다. - 2025.03. 모노레포ㆍAPI 설계: 사용자 웹ㆍ관리자ㆍAPI를 한 저장소로 묶고 공통 타입과 데이터 구조를 설계했습니다. - 2025.06. 사용자 웹ㆍ관리자 개발: Next.js 화면과 NestJS API, CKEditor 편집 환경을 개발했습니다. - 2026.01. 배포 및 운영 전환: 배포 파이프라인을 구성하고 실제 기사 발행 흐름으로 운영에 들어갔습니다. [프로젝트 정보] - 기간: 2025.01 ~ 2026.09 - 역할: 풀스택 개발ㆍ운영 - 기술: next.js, MySQL, TypeScript, Nestjs * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

News Network 뉴스 플랫폼 대표 이미지

독자용 기사 상세 - 글자 크기 조절, 인쇄, 공감ㆍ공유 기능

기사 목록 홈 - 최신기사ㆍ경제동향ㆍ기업경영 분류별 탐색

기사 목록 홈 (동일 화면) - 분류 탭과 기사 수 표시