SPEC Web

개요

웹사이트 제작을 넘어 운영 체계 자체를 제품 안에 내장한 사례입니다. 478 commits가 축적되었고 실제 운영에 사용되는 플랫폼으로 안정화되었습니다.

클라이언트 과제

클라이언트가 필요로 한 것은 보기 좋은 웹사이트 하나가 아니었습니다. 외부 방문자에게는 신뢰도 있는 브랜드 경험이 필요했고, 내부 운영팀에게는 콘텐츠 수정·출석 체크·과제 관리·활동 기록 누적을 한곳에서 처리할 수 있는 관리 도구가 필요했습니다. 운영 주체가 바뀌더라도 개발자 의존 없이 페이지와 데이터를 관리할 수 있어야 했고, 흩어진 도구를 오가며 생기는 운영 비용도 줄여야 했습니다.

솔루션

Next.js 15 App Router 기반 구조 위에 퍼블릭 페이지와 관리자 기능을 함께 배치하고, Supabase를 통해 인증과 데이터 흐름을 일원화했습니다. 비개발자 관리자 대시보드를 별도 기능으로 두어 운영팀이 직접 콘텐츠를 수정하고 게시할 수 있게 했으며, BlockNote와 Tiptap을 결합해 문서형 콘텐츠 작성 경험도 강화했습니다. 출석 관리와 과제 관리를 같은 대시보드로 통합했고, Padlet 연동으로 외부 협업 흐름을 연결했으며, 스레드형 로그 시스템으로 활동 기록이 지속적으로 축적되도록 만들었습니다.

아키텍처

리포지토리는 `app/`·`components/`·`lib/`·`supabase/`·`middleware.ts`를 축으로 구성됩니다. `app/`은 퍼블릭 페이지와 로그인 이후 운영 화면을 포함하는 라우팅 레이어로, 외부 노출 영역과 내부 관리 영역을 단일 코드베이스 안에서 함께 다룹니다. `components/`는 대시보드 UI·편집기 인터페이스·공통 화면 요소를 모듈 단위로 분리해 재사용성을 높이고, `lib/`는 데이터 접근·유틸리티·도메인 로직 계층으로 작동합니다. `middleware.ts`는 접근 제어와 세션 기반 분기를 처리해 관리자 기능과 일반 사용자 흐름을 구분합니다.

핵심 구현 하이라이트

• 비개발자도 직접 페이지와 운영 데이터를 다룰 수 있는 관리자 대시보드 구축으로 개발 의존도 감소
• 출석 관리와 과제 운영을 하나의 플랫폼으로 통합해 반복 운영 업무를 웹 안에서 일관되게 처리
• BlockNote·Tiptap 기반 편집 환경을 붙여 문서 작성과 게시 경험을 제품 내부로 끌어옴
• Padlet 연동으로 외부 협업 도구와 내부 운영 흐름이 끊기지 않도록 연결
• 스레드형 로그 시스템으로 활동 기록과 과제 이력을 구조적으로 축적
• Playwright 기반 검증 체계 + Vercel 배포로 실제 운영 환경 반영 속도 향상

성과 지표

개발 기간	2026-02-08 ~ 2026-04-13
개발 기간 기준 커밋	478 commits
운영 상태	실제 운영에 사용된 플랫폼
핵심 운영 기능	관리자 대시보드·출석·과제
외부 연동	Padlet
기록 자산화	스레드형 로그 시스템 구축

기술 스택

역량 태그

Next.js · TypeScript · Supabase · Admin Dashboard · Content Systems · Operations Platform · App Router