<head>
  <meta charset="UTF-8" />
  <title> 구글 시트 연동 학교 부서별 업무 링크 허브: opencare 배포 가이드 | 양파고 </title>
  <meta
    name="description"
    content="구글 스프레드시트와 앱스 스크립트(GAS)를 활용한 학교 부서별 업무 링크 허브 시스템(opencare)을 배포함. 부서 및 업무카드 마인드맵 시각화, 실시간 양방향 데이터 동기화, 모바일 최적화 트리 뷰까지 탑재된 교사 행정 업무 경감 도구 사용법을 확인해보셈."
  />
  <meta name="keywords" content="업무 링크 허브, opencare, 학교 업무 허브, 구글 시트 자동화, 구글 앱스 스크립트, 마인드맵 CMS, 교사 업무 경감, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta property="og:title" content="구글 시트 연동 학교 부서별 업무 링크 허브: opencare 배포 가이드" />
  <meta
    property="og:description"
    content="선생님의 행정 업무 효율을 극대화! 구글 시트와 실시간 연동되는 스마트 업무 링크 허브 'opencare'로 더 편리하고 직관적인 교직원 포털을 만들어보셈., 양파고, Yang Phago, 노션, 양파고 노션"
  />
  <meta property="og:image" content="<https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3A3e732381-575d-456d-ae6b-343462769126%3Aimage.png&blockId=2f562b09-b72b-8058-bf1f-ed15665732df>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/opencare-guide>" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 안티그래비티로 모든 담임 선생님들의 로망: 진실의 자리바꿈을 구현해보자!

진실의 자리 바꿈이란? ➡️ 같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템

</aside>

🚀 Open Workcare: 학교 부서별 업무 Link Hub 핵심 요약

📌 1. 프로젝트 개요

프로젝트명: Open Workcare (학교 부서별 업무 Link Hub)
한 줄 소개: 학교 내 수많은 행정 및 교육 웹페이지 링크를 마인드맵 형태의 시각적 캔버스 및 모바일 아코디언 트리 뷰로 직관적으로 관리할 수 있게 돕는 오픈소스 CMS 템플릿입니다.
특징:
- 특정 학교 전용이 아닌 범용적인 템플릿으로 설계되어 타 학교나 단체에서 복제(Fork)하여 바로 사용 가능합니다.
- 복잡한 DB 설정 대신 누구나 다루기 쉬운 Google Sheets(구글 스프레드시트)를 원격 데이터베이스로 사용합니다.

🛠️ 2. 핵심 기술 스택

프론트엔드: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, Lucide React (아이콘)
데이터 베이스: Google Sheets + Google Apps Script Web App API (양방향 연동)
인증 & 보안: Next.js Route Handler(서버 백엔드) + SHA-256 HMAC 세션 암호화 + HttpOnly 세션 쿠키 + XSS 방어 필터 적용
성능 최적화: 5분 단위 조회 캐시 정책 도입 (Google Sheets API의 트래픽 초과 및 로드 지연 방지)

🌟 3. 주요 기능

방사형 마인드맵 캔버스 (데스크톱)
- 마우스 드래그를 이용한 캔버스 이동 및 마우스 휠 스크롤을 이용한 확대/축소(Zoom)를 지원합니다.
- 부서 노드와 자식 업무카드를 SVG 베지어 곡선(점선)으로 시각화합니다.
- 10px 그리드 단위 스냅 정렬 기능으로 카드가 겹치지 않고 정돈된 배치를 유지합니다.
- 1단계 부서 노드를 드래그하면 2단계 업무카드들이 함께 이동합니다.
모바일 자동 트리 뷰 전환 (모바일)
- 화면 폭 768px 미만 접속 시 자동으로 모바일에 최적화된 아코디언 트리 구조 뷰로 자동 전환되어 모바일 터치 사용성을 확보합니다.
Google Sheets 양방향 실시간 동기화
- 로그인한 관리자가 노드를 드래그하여 배치를 바꾼 후 '위치 저장'을 누르거나, 노드를 추가/수정/삭제 시 구글 시트에 실시간 자동 저장(POST)됩니다.
강력한 보안 및 편집 권한 관리
- 일반 접속자는 읽기 전용 모드로 안전하게 링크를 열람하고, 관리자 로그인을 한 상태에서만 카드 추가/수정/삭제 및 드래그 편집 권한이 활성화됩니다.
- 초기 테스트 계정: ID admin / PW teacher