나침반(Compass)

본 프로젝트는 AI 기반 개발 도구 Cursor를 활용하여 직접 기획·설계·개발한 프로젝트입니다. 업무 프로세스와 서비스 구조를 직접 설계하고, Cursor를 개발 보조 도구로 활용해 기능 구현과 코드 개선, 테스트 및 유지보수를 진행했습니다.

왜 만들었나

병원 업무에 필요한 공지, 업무 가이드, 각종 서식, 조직 및 부서 정보, 일정, 운영 자료는 여러 부서와 채널에 흩어지기 쉽습니다. 필요한 정보를 찾기 위해 담당 부서에 반복적으로 문의하거나, 오래된 파일과 최신 자료를 구분하는 데 시간이 소요되는 문제도 발생합니다.

나침반(Compass)은 이러한 정보 분산 문제를 해결하기 위해 기획·개발한 병원 내부용 위키 웹 플랫폼입니다. 임직원이 부서에 별도로 문의하지 않아도 업무에 필요한 정보와 자료를 한곳에서 검색하고, 이해하고, 즉시 활용할 수 있도록 설계했습니다. 서비스의 핵심은 단순히 파일을 저장하는 공간을 만드는 것이 아닙니다. 

공지, 업무 절차, 가이드라인, 서식, 부서별 정보, 일정, 운영 지식처럼 조직 안에 축적되는 다양한 정보를 구조화하고 연결하여, 구성원이 필요한 순간에 빠르게 찾아 활용할 수 있는 공통 업무 지식 기반을 만드는 데 목적이 있습니다. 사용자는 웹 브라우저에서 카테고리와 검색 기능을 통해 필요한 자료를 탐색하고, 업무에 필요한 문서와 안내 내용을 바로 확인할 수 있습니다. 관리자는 관리 화면에서 콘텐츠를 등록·수정·분류하며, 조직 내에서 최신 정보가 지속적으로 유지될 수 있도록 관리합니다.

나침반은 반복되는 문의와 자료 탐색 시간을 줄이고, 개인 또는 특정 부서에 머물던 업무 지식을 조직 전체가 활용할 수 있는 자산으로 전환하기 위해 개발되었습니다. 이를 통해 신규 직원의 업무 적응을 돕고, 부서 간 정보 접근성을 높이며, 병원 운영에 필요한 지식과 자료가 지속적으로 축적되는 환경을 지향합니다.
 

서비스 구성

사내 시스템에 접속한 직원은 인트로(/intro) 페이지를 통해 진입한 뒤, 메인 CTA를 거쳐 사내 포털의 중심인 홈(/home) 화면에 도달합니다. 홈 화면 상단의 공통 헤더(SiteHeader)는 전체 시스템의 내비게이션 허브 역할을 수행하며, 검색(/search), 캘린더(/calendar), 조직도(/org), 편의기능(/apps), 그리고 관리자 콘솔(/admin)을 비롯해 사내 아카이브(/archive)와 게시판(/board)까지 모든 핵심 서비스로의 라우팅 분기를 매끄럽게 연결합니다.

화면 설계 및 아키텍처 관점에서는 Next.js App Router의 라우트 그룹(Route Groups) 방식을 채택하여 URL 경로에 불필요한 세그먼트를 노출하지 않으면서도, 서비스 성격에 맞추어 (site)와 (archive)로 레이아웃 구조를 명확히 분리했습니다.

• 포털 및 업무 서비스 영역 (site): 홈 화면과 공통 헤더를 포함해 검색, 일정, 조직도, 편의기능 등 일상적인 사내 포털 기능을 하나의 공통 레이아웃 안에서 유기적으로 제공합니다. 특히 보안 인가가 필요한 관리자(/admin) 영역 또한 이 구조 내에 위치하지만, 미들웨어 수준의 세션 및 사내 IP 검증을 거쳐 엄격하게 통제됩니다.
• 자료 보관 및 게시판 영역 (archive): 방대한 데이터와 첨부파일 열람에 최적화된 아카이브(/archive)와 게시판(/board)을 별도 그룹으로 격리했습니다. 이를 통해 포털 기본 화면과는 차별화된 문서 탐색 전용 레이아웃을 독립적으로 적용하여 대량의 정보 열람 및 커뮤니케이션 효율을 극대화합니다.
   

런타임

사내 PC를 사용하는 직원이 시스템에 접속하면 가장 먼저 Vercel의 엣지 네트워크를 통해 트래픽이 유입됩니다. 사용자는 인트로(/intro) 페이지와 홈(/home) 화면을 거쳐 상단 공통 헤더(SiteHeader)를 통해 검색, 캘린더, 조직도, 편의기능은 물론 사내 아카이브(/archive) 및 게시판(/board)과 같은 핵심 업무 서비스로 이동하게 됩니다.

이 과정에서 요청이 애플리케이션에 도달하기 전 Next.js Middleware가 전면에 배치되어 동작합니다. 미들웨어는 각 요청의 세션과 접근 권한을 선제적으로 검증하여 일반 사내 서비스 진입을 제어할 뿐만 아니라, 보안(Security) 영역으로 분리된 관리자 페이지(/admin)에 비인가 사용자가 접근하지 못하도록 안전하게 차단하고 라우팅합니다.

검증을 통과한 요청은 Next.js 서버 및 애플리케이션 레이어로 전달되어 비즈니스 로직을 처리한 뒤, 데이터와 미디어 특성에 맞추어 각각 최적화된 백엔드 인프라로 연결됩니다. 사용자의 신원 확인과 역할(Role) 기반 권한 제어는 Supabase Auth가 전담하며, 게시글, 일정, 조직 정보, 메타데이터와 같은 정형 비즈니스 데이터는 Supabase의 PostgreSQL에 저장되어 RLS(행 단위 보안) 정책에 따라 안전하게 읽기 및 쓰기 작업이 이루어집니다.

한편 아카이브 자료나 게시판에 첨부되는 문서, 이미지 등 대용량 미디어 파일은 Cloudflare R2 오브젝트 스토리지로 직접 분기되어 데이터베이스 부하를 낮추고 전송 비용 효율을 극대화합니다. 마지막으로 주기적인 백그라운드 작업은 Cron 스케줄러가 맡아 캘린더 관련 알림 발송이나 만료된 임시 데이터 삭제, 아카이브 자료의 자동 보관 및 정리 작업을 안정적으로 수행합니다.
 

주요기능

• 찾기 쉬운 정보 구조 : 업무 자료를 목적과 분류에 맞춰 정리하여, 처음 방문한 사용자도 필요한 정보에 접근할 수 있도록 구성합니다.
• 검색 중심 탐색 : 아카이브·게시판·조직도·캘린더를 한 검색에서 탐색합니다.
• 업무 아카이브와 게시판 분리 : 반복해서 참고하는 표준 자료는 아카이브로, 시의성이 있는 전달 사항은 게시판으로 운영합니다.
• 조직·일정 정보 제공 : 조직도와 월간 캘린더(공휴일 포함)를 제공합니다.
• 미디어·첨부 한도 : 대표 썸네일 500KB, 첨부파일 3MB(초과 시 첨부 링크 안내). 본문 이미지 등은 별도 한도를 둡니다.
• 관리자 콘텐츠 운영 : 일반 사용자가 자료를 소비하는 흐름과 관리자가 콘텐츠를 유지·관리하는 흐름을 분리합니다.
• 일관된 화면 경험 : 공통 레이아웃과 디자인 시스템을 기반으로 페이지별 사용 경험을 정리합니다.

페이지 안내

기술 스택

프로젝트 구조

src/
├── app/
│ ├── (site)/ # 인트로, 홈, 검색, 조직, 일정, 앱, 관리자
│ ├── (archive)/ # 아카이브·게시판(사이드바 셸)
│ ├── api/ # Route Handlers (admin · push · cron)
│ ├── auth/ # 인증 콜백·확인·비밀번호
│ └── layout.tsx # 전역 레이아웃·헤더
├── components/ # 화면·UI 컴포넌트
├── lib/ # 도메인·DB·스토리지·인증
├── styles/ # 토큰·테마
└── types/
supabase/migrations/ # 스키마·RLS
docs/ # CODEMAP · 디자인 · Archify 다이어그램
scripts/ # 검증·마이그레이션·하네스
public/ # 정적 에셋·조직도 SVG·PWA