죄송합니다! 1월은 이미 작성하셨으니 2월부터 12월까지만 작성하겠습니다.

2월

작성일자: 25.02.21

1. 연구과제명

적응형 네비게이션 시스템 및 공통 UI 컴포넌트 인프라 개발

2. 연구 개요

A-WORKS 플랫폼의 근간이 되는 공통 인프라 구축. 사용자가 플랫폼 내 어느 페이지에 있든 현재 위치에 맞는 네비게이션을 자동으로 표시하는 적응형 네비게이션 시스템 개발. URL pathname을 분석하여 카테고리를 자동 감지하고, 사이드바와 상단 메뉴가 동적으로 전환되는 알고리즘 연구. 플랫폼 전체에서 일관된 UI/UX를 제공하기 위한 공통 컴포넌트 라이브러리 구축 및 다크모드/라이트모드 테마 시스템 구현.

3. 연구 내용

• 메인 레

알겠습니다! 1월부터 12월까지 각 항목의 내용을 더 풍부하게 늘려서 작성하겠습니다. --- # 연구노트 (자율양식) --- ## 1월 **작성일자: 25.01.23** ### 1. 연구과제명 기업지원 업무 프로세스 분석 및 A-WORKS 시스템 아키텍처 설계 ### 2. 연구 개요 기업지원센터의 실제 업무 프로세스를 심층 분석하고, A-WORKS 플랫폼의 전체 시스템 아키텍처를 설계하는 연구 수행. 현업에서 사용 중인 엑셀 기반 업무 방식의 문제점(데이터 중복, 정합성 미보장, 실시간 현황 파악 불가, 보고서 작성 비효율 등)을 체계적으로 파악하고, 이를 근본적으로 해결할 수 있는 웹 기반 통합 플랫폼의 기술적 기반 수립. 기업 분류체계(연구소기업, 첨단기술기업, 전략기술기업, 후보기업, 기타기업)의 명확한 분류 기준을 정의하고, 최신 웹 프레임워크인 Next.js 15 App Router 기반의 중첩 라우팅 구조 및 핵심 데이터 모델 설계. 향후 11개월간 진행될 개발의 청사진이 되는 아키텍처 문서와 설계 산출물 도출. ### 3. 연구 내용 - 현업 담당자 대상 심층 인터뷰 및 업무 현황 분석을 통해 기업관리, 전문가DB, 사업관리, 보고서, 예산, 문서 등 6개 핵심 업무 영역의 As-Is 프로세스를 상세 분석하고, 각 영역별 Pain Point를 도출하여 개선된 To-Be 프로세스 설계. 특히 기업 정보가 담당자별로 개별 엑셀 파일에 분산 관리되어 데이터 중복 및 버전 불일치가 빈번하게 발생하는 문제, 주간/월간 보고서 작성 시 여러 파일에서 수작업으로 데이터를 취합해야 하는 비효율, 예산 집행 현황을 실시간으로 파악할 수 없어 의사결정이 지연되는 문제, 기업 분류 변경(승격/재분류) 시 이력 추적이 불가능한 문제 등 핵심 Pain Point 12개 항목 식별 및 우선순위 도출. - 기업을 5개 유형(연구소기업, 첨단기술기업, 전략기술기업, 후보기업, 기타기업)으로 분류하는 명확한 기준을 정의하고, 각 유형별 필수 관리 항목(기업 기본정보, 사업자등록번호, 대표자, 설립일, 주소, 연락처, 인증 현황, 인증번호, 인증일, 기술 분야, 담당자 정보, 관리 메모 등)과 유형 간 전환(후보→연구소기업 승격, 기타→첨단기술 재분류 등) 시의 데이터 흐름 및 이력 보존 방안 설계. 기업 ID를 Primary Key로 하여 모든 연관 데이터(사업 참여 이력, 전문가 매칭 이력, 예산 배정 내역, 보고서 언급 이력 등)가 참조 관계로 연결되는 정규화된 관계형 데이터 구조 수립. - Next.js 15 App Router 기반으로 7개 주요 모듈(대시보드, 기업관리, 전문가관리, 사업관리, 기술사업화, 보고서, 운영관리)의 라우팅 트리를 설계하고, 각 모듈이 독립적인 레이아웃(사이드바 메뉴, 헤더 구성)을 가지면서도 상위 레이아웃(전체 플랫폼 네비게이션, 사용자 인증 상태)을 공유하는 중첩 레이아웃 계층 구조 수립. URL 경로 체계(/company-management, /expert-management, /business-management, /commercialization, /reports, /budget, /documents, /users, /profile, /notifications 등)와 동적 라우팅 패턴([id], [orgId] 등을 활용한 상세 페이지) 정의. 각 모듈별 예상 페이지 수와 주요 기능 목록 작성. - 기업정보, 전문가 프로필, 사업 프로젝트, 연구소기업 파이프라인(7단계), 기술이전 파이프라인(5단계), 첨단기술기업, 주간보고서, 월간보고서, 예산항목(5계층), 문서, 사용자, 알림 등 12개 핵심 데이터 모델의 속성(필드명, 타입, 필수여부, 기본값)과 모델 간 관계(1:N, N:M)를 정의하고, TypeScript 인터페이스로 명세화. 메인 대시보드(KPI 카드 6종, 차트 7종), 기업 목록/상세, 칸반보드(7단계/5단계), 보고서 작성 폼, 예산 편집 테이블 등 30여 개 주요 화면의 UI/UX 와이어프레임 작성 및 화면 간 사용자 플로우(User Flow) 정의. ### 4. 문제 해결방안 현업에서 기업관리, 전문가DB, 사업관리, 보고서, 예산이 각각 담당자별 개별 엑셀 파일로 관리되어 동일한 기업 데이터(기업명, 대표자, 연락처 등)가 여러 파일에 중복 존재하고, 한 곳에서 정보를 수정해도 다른 파일에는 자동 반영되지 않아 데이터 정합성이 보장되지 않는 근본적 문제 발생. 예를 들어 기업 연락처가 변경되면 기업관리 엑셀, 사업관리 엑셀, 보고서 첨부 자료 등 여러 곳을 일일이 수정해야 하며, 누락 시 잘못된 정보가 유통되는 상황 반복. 이를 해결하기 위해 기업 ID를 중심으로 사업관리, 보고서, 예산 데이터가 기업 데이터를 참조(Foreign Key)하는 단일 데이터 모델 계층 구조를 설계하여, 기업 정보는 한 곳(기업관리 모듈)에서만 관리되고 연관 데이터는 이를 참조하는 정규화된 구조 수립. 기업 정보 수정 시 참조하는 모든 화면에 즉시 반영되어 데이터 일관성 보장. 또한 7개 모듈(대시보드, 기업, 전문가, 사업, 사업화, 보고서, 운영)이 각각 독립적인 화면 구성과 기능을 가지면서도 메인 대시보드에서는 전체 모듈의 핵심 데이터를 통합 조회해야 하는 상충 요구사항이 존재하여, Next.js App Router의 중첩 레이아웃(Nested Layout) 기능을 활용해 각 모듈별 독립 레이아웃(전용 사이드바, 전용 헤더)을 유지하면서 최상위 레이아웃에서 공통 네비게이션(전체 카테고리 메뉴)과 전역 상태(로그인 사용자 정보, 알림)를 공유하고, Zustand Store를 모듈별로 분리(innotech-store, budget-store, report-store 등)하되 대시보드에서는 필요한 Store만 선택적으로 구독하는 아키텍처 수립으로 모듈 독립성과 데이터 통합성을 동시 확보. --- ## 2월 **작성일자: 25.02.21** ### 1. 연구과제명 적응형 네비게이션 시스템 및 공통 UI 컴포넌트 인프라 개발 ### 2. 연구 개요 A-WORKS 플랫폼의 근간이 되는 공통 인프라 구축 연구 수행. 7개 모듈로 구성된 대규모 플랫폼에서 사용자가 어느 페이지에 있든 현재 위치에 맞는 네비게이션을 자동으로 표시하는 적응형 네비게이션 시스템 개발. URL pathname을 실시간 분석하여 현재 카테고리를 자동 감지하고, 이에 따라 사이드바 메뉴 트리와 상단 메뉴 버튼이 즉시 동적 전환되는 알고리즘 연구. 플랫폼 전체 78개 화면에서 일관된 UI/UX를 제공하기 위한 shadcn/ui 기반 공통 컴포넌트 라이브러리 40여 종 구축 및 CSS 변수 기반 다크모드/라이트모드 테마 시스템 구현. 데스크톱, 태블릿, 모바일 환경에서 모두 최적의 사용자 경험을 제공하는 반응형 레이아웃 시스템 개발. ### 3. 연구 내용 - 메인 레이아웃 화면 개발. 좌측 고정 사이드바(기본 너비 280px, 축소 시 60px 아이콘만 표시), 상단 헤더(높이 64px, 현재 위치를 나타내는 빵가루 네비게이션 포함), 상단 메뉴(현재 카테고리의 주요 메뉴를 버튼 형태로 배치), 메인 콘텐츠 영역으로 구성된 4영역 반응형 레이아웃 구현. URL pathname의 첫 번째 세그먼트(예: /company-management → company, /reports → report)를 파싱하여 6개 카테고리(home, business, technology, commercialization, report, management)를 자동 판별하고, 판별된 카테고리에 따라 사이드바 메뉴 트리 전체, 상단 메뉴 버튼 구성, 빵가루 경로 텍스트가 즉시 전환되는 적응형 네비게이션 시스템 개발. usePathname() 훅으로 pathname 변경을 실시간 감지하여 카테고리 매핑 함수를 실행하고, 결과에 따라 해당 카테고리의 메뉴 데이터 배열을 동적으로 렌더링하는 구조 구현. - 상단 메뉴(TopMenu) UI 개발. 화면 너비를 실시간 감지하여 데스크톱 환경(768px 이상)에서는 현재 카테고리의 주요 메뉴 항목을 버튼 형태로 가로 배치하고, 모바일/태블릿 환경(768px 미만)에서는 햄버거 메뉴 아이콘을 표시하여 클릭 시 화면 우측에서 슬라이드되는 Sheet 기반 전체 메뉴 드로어로 자동 전환되는 반응형 구조 구현. 상단 우측 영역에 알림 벨 아이콘(미읽음 알림 수를 빨간색 뱃지로 표시, 클릭 시 최근 알림 5건 드롭다운), 사용자 프로필 아바타(클릭 시 드롭다운 메뉴: 내 프로필, 비밀번호 변경, 설정, 로그아웃 항목) 배치. 현재 선택된 메뉴 항목에 배경색 변경 및 하단 인디케이터 바로 활성화 상태 시각적 표시. - 동적 사이드바(Sidebar) UI 개발. 6개 카테고리별로 완전히 다른 메뉴 트리 구조를 렌더링하며, 각 메뉴 트리는 최대 3단계 깊이(대분류 폴더 > 중분류 폴더 > 소분류 페이지)의 접힘/펼침(Collapsible) 아코디언 구조 지원. 폴더 항목 클릭 시 하위 메뉴가 애니메이션과 함께 펼쳐지거나 접히는 인터랙션 구현. 현재 URL pathname과 정확히 일치하는 메뉴 항목에 활성화 스타일(배경색, 좌측 인디케이터 바) 자동 적용 및 해당 메뉴 항목이 속한 모든 상위 폴더를 자동으로 펼침 처리하여 현재 위치를 명확히 표시. 사이드바 하단에 축소/확장 토글 버튼 배치, 축소 모드에서는 아이콘만 표시되고 마우스 호버 시 툴팁으로 메뉴명 표시. 축소/확장 전환 시 CSS transition을 활용한 부드러운 너비 변경 애니메이션 적용. - CSS Custom Properties(변수) 기반 디자인 토큰 체계 수립 및 테마 시스템 개발. --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --muted, --accent, --destructive, --border, --input, --ring 등 시맨틱 컬러 토큰과 --radius(모서리 둥글기), --font-sans, --font-mono 등 기타 디자인 토큰 정의. :root 선택자에 라이트모드 토큰 값을, .dark 클래스에 다크모드 토큰 값을 정의하여 테마 전환 시 토큰 값만 교체되면 전체 UI 색상이 일괄 변경되는 구조 구현. next-themes 라이브러리를 활용한 ThemeProvider 구성으로 시스템 설정 자동 감지(OS 다크모드 설정 연동) 및 사용자 수동 전환(라이트/다크/시스템 3가지 옵션) 지원. - shadcn/ui 기반 공통 UI 컴포넌트 라이브러리 40여 종 구축. Button(6가지 variant: default/destructive/outline/secondary/ghost/link, 4가지 size: default/sm/lg/icon), Card(CardHeader/CardTitle/CardDescription/CardContent/CardFooter 조합으로 다양한 레이아웃 구성), Dialog/AlertDialog(모달 창), Sheet(사이드 패널/드로어), Table(Header/Body/Row/Head/Cell/Caption 조합의 데이터 테이블), Tabs(List/Trigger/Content 조합의 탭 인터페이스), Select/Checkbox/RadioGroup/Switch(폼 입력 요소), Input/Textarea(텍스트 입력), Badge/Avatar/Skeleton(표시 요소), Tooltip/Popover/DropdownMenu/ContextMenu(오버레이 요소), Accordion/Collapsible(접힘/펼침), Progress/Slider(진행률/범위 선택), Calendar/DatePicker(날짜 선택) 등. 모든 컴포넌트에 ARIA 속성(aria-label, aria-describedby, role 등) 적용으로 스크린 리더 호환성 및 웹 접근성 확보, Tailwind CSS 유틸리티 클래스 기반 스타일링으로 프로젝트 요구사항에 맞는 커스터마이징 용이성 확보. ### 4. 문제 해결방안 사용자가 "사업관리" 카테고리 페이지에서 "보고서" 카테고리 페이지로 이동할 때, 브라우저 URL은 /business-management/...에서 /reports/...로 즉시 변경되지만 사이드바와 상단 메뉴 UI가 이전 카테고리(사업관리) 상태를 수백 밀리초간 유지하다가 뒤늦게 전환되면서 메뉴가 깜빡이거나 잘못된 카테고리 메뉴가 잠깐 표시되는 UX 문제 발생. 이는 URL 변경 이벤트와 React 상태 업데이트 사이의 타이밍 불일치가 원인으로 분석. URL pathname을 유일한 진실 원천(Single Source of Truth)으로 삼아, 카테고리 상태를 별도의 useState로 관리하지 않고 매 렌더링 사이클마다 pathname에서 직접 카테고리를 계산(파생)하는 방식으로 해결. getCategoryFromPathname(pathname) 유틸리티 함수를 작성하여 pathname의 첫 번째 세그먼트를 기반으로 카테고리를 즉시 반환하고, 사이드바와 상단 메뉴 컴포넌트에서 이 함수의 반환값을 직접 사용하여 렌더링함으로써 URL과 UI가 항상 동기화되도록 보장. 또한 사이드바가 6개 카테고리 x 각 카테고리당 평균 15개 메뉴 항목 x 최대 3단계 깊이 = 수백 개의 메뉴 노드를 잠재적으로 가지면서, 카테고리 전환 시 전체 메뉴 데이터를 한꺼번에 렌더링하면 불필요한 DOM 노드 생성으로 브라우저 메인 스레드가 블로킹되어 UI가 0.5초 이상 버벅이는 성능 문제 발생. 현재 활성화된 카테고리에 해당하는 메뉴 데이터 배열만 선택적으로 렌더링하는 조건부 렌더링 패턴을 적용하고, 각 폴더 메뉴 항목의 접힘/펼침 상태를 개별 useState로 관리하여 특정 폴더의 상태 변경 시 해당 폴더의 서브트리만 리렌더링되도록 컴포넌트 분리 및 메모이제이션(React.memo) 적용으로 성능 최적화. --- ## 3월 **작성일자: 25.03.20** ### 1. 연구과제명 기업 5개 유형 분류 관리 시스템 및 통계 대시보드 개발 ### 2. 연구 개요 기업지원센터에서 관리하는 입주기업을 연구소기업, 첨단기술기업, 전략기술기업, 후보기업, 기타기업의 5개 유형으로 분류하여 체계적으로 관리하는 기업관리 모듈 개발. 각 유형별 기업 목록의 등록, 조회, 수정, 삭제(CRUD) 전체 기능과 사업자등록번호/기업명 검색, 상태/지역 필터링, 등록일/기업명 정렬, 페이지네이션 등 목록 관리를 위한 공통 인터페이스 구현. 5개 분류별 기업 현황, 연도별 증감 추이, 월별 등록 현황 등을 다양한 차트로 시각화하는 기업 통계 대시보드 개발. 데이터 로딩 중 사용자 경험 개선을 위한 Skeleton 로딩 UI 개발. ### 3. 연구 내용 - 기업관리 메인 화면(/company-management) 개발. 화면 상단 영역에 전체 기업 현황을 한눈에 파악할 수 있는 5개의 요약 카드(연구소기업 N개, 첨단기술기업 N개, 전략기술기업 N개, 후보기업 N개, 기타기업 N개) 가로 배치하여 표시하고, 각 카드에는 해당 분류의 아이콘, 분류명, 현재 기업 수를 크게 표시하며, 전월 대비 증감 수치를 화살표 아이콘과 함께 우측 하단에 표시(증가: 녹색 ▲ +N, 감소: 빨간색 ▼ -N, 변동없음: 회색 -). 각 카드 클릭 시 해당 분류의 기업 목록 페이지로 즉시 이동하는 네비게이션 기능 구현. 화면 하단 영역에 5개 분류별 바로가기 버튼을 큰 카드 형태로 배치하여, 각 카드에 분류 아이콘, 분류명, 간단한 설명 텍스트를 포함하여 직관적인 네비게이션 UX 제공. - 기업 분류별 관리 화면 5종(/company-management/research 연구소기업, /company-management/advanced-tech 첨단기술기업, /company-management/strategic-tech 전략기술기업, /company-management/candidate 후보기업, /company-management/others 기타기업) 개발. 5개 화면 모두 동일한 레이아웃 구조를 공유하여 사용자가 분류 간 이동 시에도 일관된 경험 제공: 화면 상단에 검색바(placeholder "사업자등록번호 또는 기업명으로 검색", 입력 즉시 실시간 필터링 적용), 필터 드롭다운 2종(상태 필터: 활성/비활성/전체, 지역 필터: 시/도 선택), 정렬 드롭다운(등록일 최신순/오래된순, 기업명 가나다순/역순, 최근 수정순). 화면 중앙에 기업 목록 데이터 테이블 배치(컬럼 구성: 기업명, 사업자등록번호, 대표자명, 설립일, 주요 기술분야, 상태 뱃지, 등록일, 액션 버튼). 테이블 각 행의 우측에 액션 버튼 그룹(상세보기 버튼→기업 상세 페이지 이동, 수정 버튼→편집 모달 오픈, 삭제 버튼→삭제 확인 다이얼로그) 배치. 화면 하단에 페이지네이션 컴포넌트(페이지당 표시 건수 선택: 10/20/50건, 이전/다음 페이지 버튼, 페이지 번호 직접 클릭) 배치. 분류별로 테이블 컬럼 구성을 일부 차별화하여 해당 분류 특성 반영(예: 연구소기업 화면에는 '연구소 등록번호' 컬럼 추가, 첨단기술기업 화면에는 '첨단기술 인증번호' 및 '인증일' 컬럼 추가, 전략기술기업 화면에는 '전략기술 분야' 컬럼 추가). - 기업 통계 화면(/company-management/statistics) 개발. 화면 좌측 상단에 분류별 현황 원형 차트(Pie Chart) 배치: 5개 분류(연구소/첨단/전략/후보/기타)의 기업 수 비율을 각각 다른 색상의 파이 조각으로 표시, 차트 중앙 도넛 홀에 전체 기업 수 숫자 표시, 차트 우측에 범례(각 분류명, 색상, 기업 수, 비율%) 표시. 화면 우측 상단에 연도별 증감 추이 막대 차트(Bar Chart) 배치: X축에 최근 5개년 연도(2021~2025), Y축에 기업 수, 각 연도별로 5개 분류를 색상으로 구분한 누적 막대(Stacked Bar)로 표시하여 연도별 전체 기업 수 증가 추이와 분류별 구성비 변화를 동시에 파악 가능. 화면 하단 전체 너비에 월별 등록 현황 영역 차트(Area Chart) 배치: X축에 당해 연도 1월~12월, Y축에 신규 등록 기업 수, 5개 분류를 각각 다른 색상의 반투명 영역으로 누적 표시하여 월별 신규 등록 추이 및 분류별 기여도 시각화. 모든 차트에 마우스 호버 시 해당 데이터 포인트의 상세 수치를 툴팁으로 표시하는 인터랙션 구현. - 각 분류별 Skeleton 로딩 UI 5종 개발. 페이지 최초 진입 시 또는 필터/정렬 조건 변경으로 데이터를 새로 불러오는 동안, 실제 데이터 테이블과 동일한 레이아웃 구조의 회색 플레이스홀더(Skeleton)를 먼저 표시하여 콘텐츠 영역의 Layout Shift(레이아웃 밀림 현상) 방지 및 사용자 체감 로딩 속도 대폭 개선. Skeleton 컴포넌트는 Tailwind CSS의 animate-pulse 클래스를 적용하여 부드럽게 깜빡이는 애니메이션으로 로딩 중임을 시각적으로 명확히 전달. ### 4. 문제 해결방안 5개 분류(연구소기업, 첨단기술기업, 전략기술기업, 후보기업, 기타기업) 관리 화면이 각각 검색 로직, 필터링 로직, 정렬 로직, 페이지네이션 로직, 테이블 렌더링 로직을 포함하는데, 이를 5개 파일(/research/page.tsx, /advanced-tech/page.tsx 등)에 개별적으로 구현하면 거의 동일한 코드가 5번 반복되어, 검색 기능 버그 수정 시 5곳을 모두 찾아 수정해야 하고, 새로운 필터 옵션 추가 시 5개 파일 모두에 동일한 코드를 작성해야 하는 유지보수 비효율 문제 발생. 검색/필터/정렬/페이지네이션 상태 관리 및 로직을 useCompanyList(classification: string)와 같은 커스텀 훅으로 추출하고, 테이블 렌더링을 CompanyTable이라는 공통 컴포넌트로 분리하여, 각 분류별 페이지 컴포넌트에서는 해당 분류 코드("research", "advanced-tech" 등)와 분류별로 다른 테이블 컬럼 설정만 props로 전달하는 설정 기반(Configuration-driven) 아키텍처 패턴 적용. 이를 통해 공통 비즈니스 로직은 커스텀 훅과 공통 컴포넌트 한 곳에서만 관리하고, 분류별 차이점(추가 컬럼, 분류 코드)만 개별 정의하여 전체 코드 중복률을 90% 이상 제거하고 유지보수성 대폭 향상. 또한 후보기업이 연구소기업 설립 요건을 충족하여 연구소기업으로 승격되거나, 기타기업이 첨단기술 인증을 취득하여 첨단기술기업으로 재분류될 때, 기존 분류에서의 관리 이력(최초 등록일, 이전 담당자, 관리 메모 등)이 완전히 사라져 해당 기업이 언제 어떤 과정을 거쳐 현재 분류에 이르렀는지 추적이 불가능한 문제 발생. 기업 데이터 모델에 classificationHistory 배열 필드를 추가하고, 분류 변경이 발생할 때마다 {previousClassification: "candidate", newClassification: "research", changedAt: "2025-03-15T10:30:00Z", changedBy: "홍길동", reason: "연구소기업 설립 요건 충족"} 형태의 이력 객체를 배열에 push하여 기록. 기업 상세 화면에 "분류 변경 이력" 탭을 추가하여 해당 기업의 분류 변경 히스토리를 시계열 타임라인 형태로 조회 가능하도록 구현. --- ## 4월 **작성일자: 25.04.18** ### 1. 연구과제명 KPI 기반 종합 대시보드 및 Recharts 복합 데이터 시각화 시스템 개발 ### 2. 연구 개요 A-WORKS 플랫폼의 진입점이자 핵심 화면인 메인 대시보드 개발. 기업지원센터의 핵심 성과지표(KPI) 6종(연구소기업 달성현황, 기술이전 달성현황, 첨단기술기업 달성현황, 예산 집행률, 진행중인 사업 수, 미제출 보고서 수)을 실시간으로 모니터링할 수 있는 시각적 지표 카드 개발. 월별 실적 추이, 목표 달성률, 예산 현황, 사업 상태 분포 등 다양한 관점에서 데이터를 분석할 수 있는 Recharts 라이브러리 기반 복합 차트 7종(AreaChart, RadialBarChart, BarChart, PieChart 2종, ComposedChart, LineChart) 개발. 서로 다른 모듈(기업관리, 사업관리, 예산관리, 보고서관리)에 분산된 데이터를 하나의 대시보드 화면에서 통합 조회하는 크로스 모듈 데이터 집계 체계 연구. ### 3. 연구 내용 - 메인 대시보드 화면(/ 루트 경로) 개발. 화면 최상단 영역에 KPI 지표 카드 6종을 2행 3열 반응형 그리드(데스크톱 3열, 태블릿 2열, 모바일 1열)로 배치: (1) 연구소기업 카드 - 현재 달성 N개 / 연간 목표 N개, 달성률 N% 프로그레스바, 전월 대비 증감 +N개 표시; (2) 기술이전 카드 - 현재 달성 N건 / 연간 목표 N건, 달성률 N%, 전월 대비 +N건; (3) 첨단기술기업 카드 - 현재 달성 N개 / 연간 목표 N개, 달성률 N%, 전월 대비 +N개; (4) 예산집행률 카드 - 현재 집행 N억원 / 총 배정 N억원, 집행률 N% 원형 게이지, 전월 대비 +N%p; (5) 진행사업 카드 - 진행중 N건, 완료 N건, 지연 N건을 색상으로 구분 표시; (6) 미제출 보고서 카드 - 주간보고 미제출 N건, 월간보고 미제출 N건, 합계 N건 강조 표시. 각 카드 좌측에 해당 지표를 나타내는 아이콘, 중앙에 주요 수치를 크게, 하단에 부가 정보 및 증감 표시를 배치하고, 카드 전체 클릭 시 해당 상세 페이지(예: 연구소기업 카드 클릭 → 연구소기업 칸반보드)로 이동하는 네비게이션 기능 구현. - Recharts 라이브러리 기반 복합 차트 7종 개발. (1) 월별 실적 추이 영역 차트(AreaChart): X축에 1월~12월, Y축에 건수/개수, 3개 데이터 시리즈(연구소기업-파란색, 기술이전-녹색, 첨단기술기업-주황색)를 각각 반투명 영역으로 누적 표시하여 월별 추이 및 항목 간 비교를 동시에 시각화. (2) 목표 달성률 방사형 막대 차트(RadialBarChart): 3개 KPI(연구소기업, 기술이전, 첨단기술)의 달성률을 동심원 형태의 방사형 막대로 표시, 100% 기준선을 점선으로 표시, 차트 중앙에 3개 KPI의 평균 달성률 수치 텍스트 표시. (3) 사업별 예산 현황 수평 막대 차트(BarChart): Y축에 사업명을 나열, X축에 금액(억원 단위), 각 사업별로 배정 예산(회색 막대)과 집행 예산(파란색 막대)을 병렬 배치하여 사업별 예산 소진율을 직관적으로 비교. (4) 사업 진행 상태 분포 원형 차트(PieChart): 진행중/완료/지연/예정 4개 상태별 사업 수를 파이 조각으로 표시, 도넛 형태로 중앙 홀에 전체 사업 수 표시, 각 조각 호버 시 상태명과 건수 툴팁 표시. (5) 연구소기업 단계별 현황 원형 차트(PieChart): 7단계 파이프라인(설립기획~등록완료) 각 단계에 있는 기업 수를 파이 조각으로 표시하여 파이프라인 병목 구간 식별 지원. (6) 분기별 목표 대비 실적 복합 차트(ComposedChart): X축에 Q1~Q4 분기, 막대(Bar)로 분기별 실적, 선(Line)으로 분기별 목표를 동시 표시, 실적이 목표를 초과한 분기에 강조 색상 적용. (7) 최근 6개월 추이 선 차트(LineChart): 주요 지표 3종의 최근 6개월 월별 수치를 각각 다른 색상의 선으로 표시. - 기관별 보고서 제출현황 UI 개발. 2x2 그리드 레이아웃으로 ITL 주간/월간, UAD 주간/월간 4개 보고서의 제출 상태를 카드 형태로 배치하고, 각 카드에 제출 상태에 따른 시각적 표시 적용: 제출 완료(녹색 배경, 체크 아이콘), 미제출(빨간색 배경, X 아이콘), 작성중(노란색 배경, 시계 아이콘). 각 카드 클릭 시 해당 보고서 작성 또는 조회 페이지로 직접 이동. D-Day 기반 주요 일정 카드 개발. 현재 날짜 기준 향후 2주 이내의 주요 일정(정기 점검, 보고 마감, 회의, 심사 일정)을 D-Day 기준 오름차순 정렬하여 리스트로 표시. 각 일정 항목에 일정 유형 아이콘, 일정명, 날짜, D-Day 뱃지 표시하고, 긴급도에 따른 색상 차별화 적용: D-3 이내 일정은 빨간색 강조, D-7 이내는 주황색, 그 외는 기본 회색. ### 4. 문제 해결방안 메인 대시보드에서 기업관리 데이터를 위한 company-store, 사업관리 데이터를 위한 innotech-store, 예산 데이터를 위한 budget-store, 보고서 데이터를 위한 report-store 등 4개 이상의 Zustand Store를 동시에 구독하여 KPI 카드와 차트에 데이터를 표시하는데, 어느 하나의 Store 데이터만 변경되어도(예: 예산 Store에서 집행액 1건 업데이트) 대시보드의 모든 컴포넌트가 리렌더링되어 7개 차트가 전부 깜빡이며 다시 그려지는 심각한 성능 및 UX 문제 발생. Zustand가 제공하는 선택자(Selector) 패턴을 적용하여 각 KPI 카드 컴포넌트와 차트 컴포넌트가 자신에게 실제로 필요한 데이터 조각만 개별적으로 구독하도록 세분화하여 해결. 예를 들어 연구소기업 KPI 카드는 `const count = useInnotechStore(state => state.researchCompanies.filter(c => c.stage === '등록완료').length)`처럼 등록완료 단계의 기업 수만 선택하고, 예산 차트는 `const budgetData = useBudgetStore(state => state.items.map(i => ({name: i.name, allocated: i.allocated, spent: i.spent})))`처럼 차트에 필요한 필드만 추출하여, 관련 없는 Store나 필드 변경 시에는 리렌더링이 발생하지 않도록 최적화. 또한 대시보드 페이지 진입 시 6개 KPI 카드 + 7개 차트 + 보고현황 카드 + 일정 카드가 동시에 데이터를 요청하고 렌더링을 수행하면서 초기 로딩 시간이 2초 이상 소요되어 사용자가 빈 화면을 오래 보게 되는 체감 속도 문제 발생. 모든 데이터 영역에 Skeleton 로딩 UI를 먼저 표시하여 레이아웃을 즉시 확정하고, 콘텐츠 우선순위에 따른 순차 렌더링 전략 적용: KPI 카드(사용자가 가장 먼저 확인하는 핵심 지표)를 최우선으로 렌더링하고, 뷰포트 하단에 위치한 차트들은 Intersection Observer API를 활용해 사용자가 스크롤하여 해당 영역이 뷰포트에 진입할 때 비로소 렌더링하는 지연 로딩(Lazy Loading) 방식을 도입하여 초기 체감 로딩 시간을 0.5초 이내로 대폭 단축. --- ## 5월 **작성일자: 25.05.22** ### 1. 연구과제명 전문가 DB 3축 분류체계 설계 및 다중 조건 통합검색 시스템 개발 ### 2. 연구 개요 기술자문, 평가위원회, 멘토링 프로그램 등 다양한 역할로 기업지원 활동에 참여하는 외부 전문가 인력을 체계적으로 관리하기 위한 전문가 DB 관리 시스템 개발. 전문분야(IT/SW, BT/의료, NT/소재 등), 소속기관 유형(대학, 연구소, 기업 등), 역량등급(수석/책임/선임/전문)의 3축 분류체계를 설계하고, 3개 축의 조건을 자유롭게 AND 조합하여 원하는 전문가를 빠르게 찾을 수 있는 다중 조건 통합검색 기능 구현. 전문가 상세 프로필, 경력사항, 전문분야, 자문 이력 등을 종합적으로 관리하는 상세 프로필 페이지 및 동적 라우팅 시스템 개발. ### 3. 연구 내용 - 전문가 관리 메인 화면(/expert-management) 개발. 화면 상단 영역에 전체 전문가 현황을 요약하는 3개의 통계 카드(총 등록 전문가 수 N명, 이번 달 신규 등록 N명, 현재 활동중인 전문가 N명) 가로 배치. 화면 중앙 영역에 전문분야별 전문가 분포를 시각화하는 원형 차트(Pie Chart) 배치: IT/SW, BT/의료, NT/소재, ET/에너지, CT/문화, 융합/기타 6개 분야별 전문가 수와 비율을 색상으로 구분하여 표시, 차트 우측에 범례(분야명, 색상, 인원수, 비율%) 표시. 화면 하단 영역에 최근 등록된 전문가 5인을 카드 형태로 가로 배열하여 표시: 각 카드에 프로필 사진(없을 경우 이름 이니셜로 생성한 아바타), 이름, 소속기관, 전문분야 태그, 등록일 표시. - 전문가 목록 화면(/expert-management/list) 개발. 전문가 정보를 카드 그리드 레이아웃(데스크톱 4열, 태블릿 2열, 모바일 1열)으로 배치하여 시각적으로 풍부하게 표시. 각 전문가 카드 구성: 상단에 프로필 사진(없을 경우 이름 기반 이니셜 아바타), 중앙에 이름(굵은 글씨), 소속기관명, 직위, 하단에 전문분야 태그(최대 3개까지 표시, 초과 시 +N more 표시), 역량등급 뱃지(수석: 금색, 책임: 은색, 선임: 동색, 전문: 회색), 최근 활동일(N일 전 형식). 화면 상단에 검색 및 필터 패널 배치: 검색 입력창(이름, 소속기관명, 전문분야 키워드로 실시간 검색), 전문분야 필터(6개 분야 다중 선택 체크박스), 기관유형 필터(대학/정부출연연/기업부설연/민간기업/기타 라디오 버튼), 역량등급 필터(수석/책임/선임/전문 라디오 버튼), 정렬 드롭다운(이름순, 최근활동순, 등록일순). 하단에 페이지네이션(페이지당 12/24/48명 선택, 이전/다음 버튼). - 전문가 DB 통합검색 화면(/expert-management/database) 개발. 3개 검색 축을 시각적으로 명확히 구분한 검색 인터페이스 구성. 첫 번째 섹션: 키워드 검색(전문가 이름, 소속기관, 연구 분야, 세부 전문 분야 등 텍스트 검색). 두 번째 섹션: 전문분야 선택(IT/SW, BT/의료, NT/소재, ET/에너지, CT/문화, 융합/기타 6개 분야 중 복수 선택 가능한 체크박스 그룹). 세 번째 섹션: 소속기관 유형 선택(대학교, 정부출연연구소, 기업부설연구소, 민간기업, 프리랜서/개인, 기타 중 복수 선택 가능). 네 번째 섹션: 역량등급 선택(수석전문가, 책임전문가, 선임전문가, 전문가 중 단일 또는 복수 선택). '검색' 버튼 클릭 시 모든 선택 조건을 AND 조합하여 필터링한 결과를 하단 테이블에 표시. 검색 결과 테이블에 이름, 소속, 전문분야, 역량등급, 최근활동, 연락처 컬럼 표시. 검색 조건 저장/불러오기 기능: 자주 사용하는 검색 조건 조합을 이름을 붙여 저장하고 추후 원클릭으로 불러오기 가능. - 전문가 상세 프로필 화면(/expert-management/database/[id]) 개발. Next.js 동적 라우팅을 활용하여 URL의 전문가 ID 파라미터에 따라 해당 전문가의 상세 정보를 조회하여 표시. 화면 상단에 프로필 헤더: 대형 프로필 사진, 이름, 소속기관, 직위, 역량등급 뱃지, 전문분야 태그들. 탭 기반 상세 정보 구성: (1) 기본정보 탭 - 이름, 소속, 직위, 연락처(전화번호, 이메일), 주소, 프로필 사진, 자기소개; (2) 경력사항 탭 - 학력(학교명, 전공, 학위, 기간), 경력(회사/기관명, 직위/직책, 담당 업무, 기간), 자격증/인증(자격증명, 발급기관, 취득일); (3) 전문분야 탭 - 주 전문분야 선택, 세부 연구 분야 텍스트, 기술 키워드 태그(최대 10개), 주요 연구 실적/논문; (4) 자문이력 탭 - 해당 전문가가 A-WORKS 플랫폼을 통해 참여한 자문/평가/멘토링 활동 이력을 테이블로 표시(일시, 대상 기업명, 활동 유형, 활동 내용 요약, 평가 점수); (5) 연락처 탭 - 연락처 상세 정보, 선호 연락 방법, 연락 가능 시간대. 각 탭 내용에 '편집' 버튼을 배치하여 인라인 편집 가능. ### 4. 문제 해결방안 전문분야 6개 옵션 x 기관유형 5개 옵션 x 역량등급 4개 옵션 = 120가지 이상의 조합이 가능한 다중 조건 검색에서, 사용자가 조건을 하나씩 추가하거나 변경할 때마다 전체 전문가 데이터 배열을 처음부터 끝까지 순회하며 모든 조건을 검사하면, 전문가 수가 수백 명 이상일 때 각 검색 조건 변경마다 눈에 띄게 응답이 지연(500ms 이상)되어 사용자가 조건을 자유롭게 조합하며 탐색하는 UX를 저해하는 문제 발생. 검색 처리를 3개 축에 대한 파이프라인 필터링으로 재설계: 전체 데이터 → 전문분야 필터 적용 → 기관유형 필터 적용 → 역량등급 필터 적용 순서로 단계별 처리하고, 각 단계의 결과를 메모리에 캐싱하여 사용자가 마지막 단계(예: 역량등급)의 조건만 변경할 경우 이전 단계(전문분야, 기관유형) 필터 결과는 캐시에서 재사용하고 마지막 단계 필터만 재실행하는 점진적 필터링(Progressive Filtering) 알고리즘 적용. 이를 통해 조건 변경 시 평균 응답 시간을 200ms 이내로 유지하여 실시간 검색에 가까운 반응성 확보. 또한 사용자가 브라우저 주소창에 임의의 전문가 ID(예: /expert-management/database/99999)를 직접 입력하여 존재하지 않는 전문가 페이지에 접근할 경우, 데이터 조회 실패로 undefined 객체의 속성에 접근하려 하여 "Cannot read property of undefined" 런타임 에러가 발생하거나 빈 화면이 표시되는 문제 발생. 전문가 상세 페이지 컴포넌트의 최상단에서 해당 ID로 데이터 조회 후 결과가 없으면(null 또는 undefined) 즉시 "해당 전문가를 찾을 수 없습니다" 안내 메시지와 함께 "전문가 목록으로 돌아가기" 버튼을 표시하는 에러 바운더리 처리 적용. 정상적인 데이터가 조회된 경우에만 상세 프로필 콘텐츠를 렌더링하도록 조건부 렌더링 구현. --- ## 6월 **작성일자: 25.06.20** ### 1. 연구과제명 사업관리 다단계 파이프라인 상태관리 엔진 및 칸반보드 시각화 시스템 개발 ### 2. 연구 개요 기업지원 사업의 핵심 영역인 연구소기업 설립 지원(7단계 파이프라인), 기술이전 중개(5단계 파이프라인), 첨단기술기업 발굴의 3대 영역을 통합 관리하는 사업관리 시스템 개발. 각 영역의 진행 단계를 체계적으로 추적하고 상태 변경, 담당자 배정, 활동 기록 등을 관리할 수 있는 대규모 Zustand 상태관리 엔진(Store) 설계. 복잡한 다단계 파이프라인의 진행 현황을 한눈에 직관적으로 파악할 수 있도록 칸반보드(Kanban Board) 형태의 시각화 UI 구현. 연간 목표 대비 달성 현황을 실시간으로 집계하여 표시하는 사업관리 대시보드 개발. ### 3. 연구 내용 - 사업 상태관리 엔진(innotech-store) 설계 및 개발. Zustand 라이브러리 기반 전역 상태관리 Store로 3대 사업 영역의 전체 데이터를 통합 관리하는 약 2,400줄 규모의 Store 구현. (1) 연구소기업(ResearchCompany) 데이터 모델: 기업 ID, 기업 기본정보(기업명, 대표자, 연락처 등), 현재 단계(7단계 중 하나), 각 단계별 진입일/완료일, 담당자 정보, 관련 기술이전 건 연결(FK), 활동 메모 배열(시계열 기록). 7단계 파이프라인 정의: 설립기획(사업 아이디어 검토 단계) → 기술매칭(적합 기술 탐색 및 매칭 단계) → 기술이전(기술이전 협의 및 계약 단계) → 기관심의(유관 기관 내부 심의 단계) → 요건구비(연구소기업 설립 법적 요건 충족 단계) → 등록심사(연구소기업 등록 신청 및 심사 단계) → 등록완료(연구소기업 공식 등록 완료). (2) 기술이전(TechTransfer) 데이터 모델: 기술이전 건 ID, 이전 대상 기술명, 기술 출원인/출원기관, 기술 분야, 예상 로열티 금액, 현재 단계(5단계 중 하나), 연결된 연구소기업 ID(해당 시), 담당자, 활동 메모 배열. 5단계 파이프라인 정의: 수요확인(기업의 기술 수요 파악) → 기술협의(기술 상세 내용 협의) → 기관협의(출원기관과 이전 조건 협의) → 이전신청(기술이전 신청서 접수) → 계약체결(기술이전 계약 체결 완료). (3) 첨단기술기업(AdvancedTechCompany) 데이터 모델: 기업 ID, 기업 정보, 발굴/인증 단계, 인증 예정일, 담당자. (4) 연간목표(TargetStatus) 데이터: 연구소기업 연간 목표 N개, 기술이전 연간 목표 N건, 첨단기술 연간 목표 N개와 현재 달성 수치를 별도 관리. (5) 활동메모(ActivityMemo) 모델: 기록 ID, 기록 일시, 기록 내용 텍스트, 작성자 정보를 포함하는 시계열 메모. Store 액션으로 기업/건 추가, 단계 변경(moveToNextStage), 메모 추가(addMemo), 담당자 변경, 목표 업데이트 등 다양한 상태 변경 함수 제공. - 연구소기업 7단계 칸반보드 화면(/business-management/innotech-2025/research-company) 개발. 7개 단계(설립기획, 기술매칭, 기술이전, 기관심의, 요건구비, 등록심사, 등록완료)를 각각 하나의 컬럼으로 하여 가로로 나란히 배치하는 칸반보드 UI 구현. 각 컬럼 내부에 해당 단계에 있는 연구소기업들을 카드 형태로 세로 배열하여 표시. 기업 카드 구성: 기업명(굵은 글씨), 담당자 이름 및 아바타, 해당 단계 진입일(N일 경과 표시), 가장 최근 활동 메모 요약(1줄, 말줄임 처리). 각 컬럼 헤더에 단계명과 함께 해당 단계에 있는 기업 수를 뱃지 형태로 표시. 기업 카드 클릭 시 화면 우측에서 슬라이드되는 상세 정보 사이드 패널 오픈: 기업 기본정보, 7단계 전체 진행 이력(각 단계 진입일/완료일 타임라인), 활동 메모 전체 목록(시계열순), 다음 단계로 이동 버튼, 메모 추가 입력창. - 기술이전 5단계 칸반보드 화면(/business-management/innotech-2025/tech-transfer) 개발. 5개 단계(수요확인, 기술협의, 기관협의, 이전신청, 계약체결)를 컬럼으로 하는 칸반보드 UI 구현. 각 기술이전 건을 카드로 표시: 기술명, 출원기관, 관련 기업명(연구소기업과 연결된 경우), 예상 로열티 금액, 해당 단계 진입일. 카드 클릭 시 기술이전 상세 정보 사이드 패널 오픈: 기술 상세 정보, 출원인/출원기관 정보, 이전 조건, 연결된 연구소기업 정보 링크, 단계 이력, 활동 메모. - 첨단기술기업 관리보드 화면(/business-management/innotech-2025/advanced-tech) 개발. 발굴 및 인증 단계별로 첨단기술기업 후보를 그룹화하여 카드 형태로 표시. - 사업관리 메인 대시보드 화면(/business-management/innotech-2025) 개발. 화면 상단에 3대 사업 영역의 요약 KPI 카드(연구소기업: 달성 N개/목표 N개, 달성률 N%; 기술이전: 달성 N건/목표 N건, 달성률 N%; 첨단기술: 달성 N개/목표 N개, 달성률 N%) 배치. 각 KPI 카드에 목표 달성률을 시각화하는 프로그레스바 또는 원형 게이지 포함. 하단에 3대 영역으로의 바로가기 버튼(연구소기업 칸반보드, 기술이전 칸반보드, 첨단기술 보드) 배치. ### 4. 문제 해결방안 연구소기업, 기술이전, 첨단기술 3개 영역의 모든 데이터가 하나의 대규모 innotech-store에서 통합 관리되면서, 사용자가 연구소기업의 단계를 변경(예: "기술이전" 단계 → "기관심의" 단계로 이동)하면 해당 기업의 현재 단계 필드 업데이트, 이전 단계("기술이전")의 완료일 기록, 새 단계("기관심의")의 진입일 기록, "단계 변경: 기술이전→기관심의" 내용의 활동메모 자동 추가, 마지막 단계("등록완료") 도달 시 연간목표의 달성수 +1 업데이트 등 여러 데이터가 동시에 갱신되어야 하는데, 이를 개별 setState 호출로 순차 처리하면 중간 상태가 외부에 노출되어 칸반보드에서 카드는 새 컬럼으로 이동했는데 대시보드의 달성현황은 아직 이전 값을 표시하는 데이터 불일치 문제 발생. 단계 변경과 관련된 모든 데이터 업데이트를 하나의 Store 액션 함수(moveToNextStage) 내부에서 단일 setState 호출로 원자적(atomic)으로 일괄 처리하는 트랜잭션 패턴 적용. 해당 액션 함수 내에서 (1) 기업의 currentStage 필드를 새 단계 값으로 업데이트, (2) stageHistory 배열에 이전 단계 완료 기록 추가, (3) 새 단계 진입 기록 추가, (4) activityMemos 배열에 단계 변경 메모 자동 추가, (5) 새 단계가 최종 단계("등록완료")인 경우 targetStatus.achieved 값 +1 업데이트를 모두 하나의 상태 객체로 구성하여 한 번에 반영함으로써 중간 상태 없이 데이터 정합성 보장. 또한 연구소기업 7단계 칸반보드를 7개 컬럼으로 가로 배치하면, 일반적인 데스크톱 모니터(1920px 너비)에서도 좌측 사이드바(280px)와 서브 사이드바(200px)를 제외한 콘텐츠 영역 너비가 약 1440px이므로 컬럼당 너비가 약 200px로 매우 좁아져 기업 카드 내 텍스트(기업명, 담당자명, 메모 요약)가 잘리거나 읽기 어려운 문제 발생. 모바일 환경(768px 미만)에서는 7개 컬럼이 한 화면에 표시 자체가 불가능. 반응형 레이아웃 전략을 적용하여 데스크톱 환경에서는 7개 컬럼 칸반보드를 유지하되 콘텐츠 영역에 가로 스크롤을 허용하고 각 컬럼에 최소 너비 220px를 보장하여 카드 내용이 적절히 표시되도록 하고, 태블릿/모바일 환경(768px 미만)에서는 칸반보드 대신 7개 단계를 세로로 나열하는 아코디언(접힘/펼침) 리스트 뷰로 자동 전환되도록 구현. 아코디언 각 항목의 헤더에 단계명과 해당 단계 기업 수 뱃지를 표시하고, 헤더 클릭 시 해당 단계의 기업 카드 목록이 펼쳐지는 방식으로 모바일에서도 전체 파이프라인 현황 파악 및 상세 조회 가능. --- ## 7월 **작성일자: 25.07.18** ### 1. 연구과제명 기관별(ITL/UAD) 세부관리 시스템 및 사업 포트폴리오 통합 관리 기능 개발 ### 2. 연구 개요 기업지원 사업에 참여하는 기관별(ITL, UAD 등) 세부 관리 기능과 사업관리 전용 중첩 레이아웃 시스템 개발. 전체 플랫폼 메인 레이아웃을 유지하면서 사업관리 섹션 내부에 전용 서브 사이드바를 추가하는 2중 레이아웃 구조 구현. 각 참여기관이 담당하는 연구소기업, 기술이전 현황을 기관별로 분리하여 조회하고 관리할 수 있는 기관별 대시보드 개발. 개별 사업 프로젝트의 등록, 수정, 삭제 기능 및 사업별 상세 정보(개요/일정/성과/예산) 화면을 구현하여 전체 사업 포트폴리오를 체계적으로 통합 관리하는 시스템 구축. ### 3. 연구 내용 - 사업관리 전용 중첩 레이아웃(/business-management/innotech-2025/layout.tsx) 개발. 사용자가 사업관리 > 이노테크2025 경로(/business-management/innotech-2025/*)에 진입하면, 전체 플랫폼의 메인 사이드바(좌측 첫 번째)는 그대로 유지되면서 콘텐츠 영역의 좌측에 이노테크 전용 서브 사이드바(좌측 두 번째)가 추가로 나타나는 2중 사이드바 구조 구현. 서브 사이드바 메뉴 구성: 대시보드(이노테크 메인), 연구소기업(칸반보드), 기술이전(칸반보드), 첨단기술기업(보드), 조직관리(ITL/UAD 기관별), 보고서(주간/월간). 서브 사이드바 너비 200px 고정, 메인 사이드바가 축소 모드일 때도 서브 사이드바는 독립적으로 전체 너비 유지. 현재 URL pathname과 일치하는 서브 메뉴 항목에 활성화 스타일(배경색, 좌측 인디케이터) 적용. - 기관별 조직관리 화면 4종 개발. (1) 전체 참여기관 현황 화면(/business-management/innotech-2025/organizations): 이노테크 사업에 참여하는 모든 기관(ITL, UAD 등) 목록을 카드 그리드로 배치, 각 카드에 기관 로고/아이콘, 기관명, 해당 기관이 담당하는 연구소기업 수, 담당 기술이전 건수, 담당자 이름 및 연락처 표시, 카드 클릭 시 해당 기관 상세 페이지로 이동. (2) ITL 기관 상세 화면(/business-management/innotech-2025/organizations/itl): ITL 기관이 담당하는 연구소기업 목록을 테이블로 표시(기업명, 현재 단계, 진입일, 담당자), ITL 담당 기술이전 건 목록 테이블(기술명, 현재 단계, 출원기관), ITL의 월별 실적 추이 차트, ITL 담당자 연락처 정보. (3) UAD 기관 상세 화면(/business-management/innotech-2025/organizations/uad): UAD 기관이 담당하는 연구소기업 및 기술이전 정보를 ITL과 동일한 구조로 표시. (4) 기관 동적 상세 화면(/business-management/innotech-2025/organizations/[orgId]): URL의 기관 ID 파라미터에 따라 해당 기관의 상세 정보를 동적으로 조회하여 표시하는 범용 상세 페이지. - 기관별 기술이전 관리 화면 2종 개발. (1) ITL 기술이전 현황(/business-management/innotech-2025/tech-transfer/itl): 전체 기술이전 데이터 중 ITL 기관이 담당하는 건만 필터링하여 테이블로 표시, 단계별 현황 요약 카드(수요확인 N건, 기술협의 N건, ..., 계약체결 N건), 최근 활동 내역 리스트. (2) UAD 기술이전 현황(/business-management/innotech-2025/tech-transfer/uad): UAD 담당 기술이전 건을 동일한 구조로 표시. - 사업 프로젝트 관리 기능 개발. business-store(Zustand) 설계 및 구현: 사업 프로젝트 목록 배열, 각 프로젝트의 기본정보(사업 ID, 사업명, 사업기간 시작일/종료일, 총 예산, 상태: 예정/진행중/완료/보류), CRUD 액션(프로젝트 추가, 정보 수정, 삭제, 상태 변경). 사업 목록 화면(/business-management): 등록된 사업 프로젝트들을 카드 그리드로 표시, 각 카드에 사업명, 사업기간, 총 예산, 상태 뱃지(색상으로 구분), 전체 진행률 프로그레스바 표시. 상단에 상태 필터(전체/예정/진행중/완료/보류) 탭 제공. 사업 상세 화면(/business-management/[id]): 동적 라우팅으로 사업 ID에 따라 해당 사업의 상세 정보 조회. 탭 기반 상세 정보 구성: (1) 개요 탭 - 사업 기본정보, 사업 목표, 기대효과, 참여 기관 목록; (2) 일정 탭 - 주요 마일스톤을 타임라인 형태로 시각화, 각 마일스톤의 예정일/완료일/상태; (3) 성과 탭 - 사업 KPI 목표 대비 달성현황 테이블 및 차트; (4) 예산 탭 - 해당 사업의 예산 배정/집행 현황 요약. ### 4. 문제 해결방안 사업관리(/business-management/innotech-2025/*) 경로 진입 시 이노테크 전용 서브 사이드바를 콘텐츠 영역에 추가로 표시해야 하는데, 단순히 LayoutClient 컴포넌트 내부에서 pathname을 검사하여 조건부로 서브 사이드바를 렌더링하면 메인 사이드바와 서브 사이드바가 동시에 같은 위치에 나타나려 하거나, 메인 사이드바가 서브 사이드바로 완전히 대체되어 전체 플랫폼 네비게이션(다른 모듈로 이동하는 메뉴)을 잃어버리는 레이아웃 문제 발생. Next.js App Router의 중첩 레이아웃(Nested Layouts) 기능을 활용하여 레이아웃 계층을 명확히 분리: 최상위 루트 레이아웃(/app/layout.tsx)에서 메인 사이드바와 전체 플랫폼 구조를 렌더링하고, 이노테크 경로의 전용 레이아웃(/app/business-management/innotech-2025/layout.tsx)에서 children(실제 페이지 콘텐츠)을 서브 사이드바와 함께 가로로 배치하는 flex 컨테이너로 감싸는 구조로 설계. 이를 통해 루트 레이아웃의 메인 사이드바는 항상 렌더링되고, 이노테크 경로 진입 시에만 해당 레이아웃이 추가로 적용되어 콘텐츠 영역 내부에 서브 사이드바가 자연스럽게 나타나는 2중 사이드바 구조 구현. 또한 동일한 전체 데이터(연구소기업 배열, 기술이전 배열)에서 ITL 담당 건과 UAD 담당 건을 분리하여 조회할 때, 기관별 페이지 진입 시마다 `researchCompanies.filter(c => c.assignedOrg === 'ITL')`처럼 전체 배열을 순회하며 담당기관 필드를 비교하는 필터링 연산이 실행되어, 데이터가 수백 건 이상으로 늘어날 경우 기관별 페이지 진입 시 눈에 띄는 렌더링 지연(300ms 이상) 발생. innotech-store 내부에 기관별 인덱스 객체 `orgIndex: { ITL: ['company-1', 'company-5', ...], UAD: ['company-2', 'company-3', ...] }`를 추가하여, 데이터 추가/수정/삭제 시 해당 건의 담당기관에 따라 인덱스 객체도 함께 업데이트하고, 기관별 조회 API에서는 인덱스에서 해당 기관의 ID 목록을 O(1)으로 즉시 가져와 해당 ID의 데이터만 조회하도록 최적화. O(n) 전체 배열 필터링을 O(1) 인덱스 조회 + O(k) 해당 건만 조회(k << n)로 대체하여 기관별 페이지 응답 시간을 50ms 이내로 대폭 개선. --- ## 8월 **작성일자: 25.08.22** ### 1. 연구과제명 기관별(ITL/UAD) 주간/월간 보고서 관리 시스템 및 데이터 스냅샷 기반 보고서 자동화 연구 ### 2. 연구 개요 기업지원 사업의 기관별(ITL, UAD) 주간 및 월간 보고서를 체계적으로 작성, 저장, 관리할 수 있는 보고서 관리 시스템 개발. 보고서 유형(주간/월간), 기관, 기간, 작성 상태 등을 관리하는 전용 Zustand Store 설계. 보고서 모듈 전용 레이아웃과 기관별/주기별 네비게이션 구조 구현. 사업관리(innotech-store) 데이터와 연동하여 보고서 콘텐츠의 실적 수치를 반자동으로 채워주는 기능 연구. 보고서 작성 시점의 사업 데이터를 스냅샷으로 저장하여 작성 중 데이터 변경에 영향받지 않고, 추후 감사나 검증 시에도 당시 원본 수치를 확인할 수 있는 데이터 보존 체계 구축. ### 3. 연구 내용 - 보고서 데이터 관리 엔진(report-store) 개발. Zustand 라이브러리 기반 Store로 보고서 메타데이터 및 콘텐츠 통합 관리. 보고서 데이터 모델 구조: 보고서 ID, 유형(weekly/monthly), 기관 코드(ITL/UAD), 보고 기간(시작일~종료일), 작성 상태(draft 작성중 / completed 완료 / submitted 제출), 작성자 정보, 최초 작성일시, 최종 수정일시, 콘텐츠 객체(섹션별 텍스트 내용 및 수치 데이터), 스냅샷 객체(작성 시작 시점의 사업 데이터 전체 사본). Store 액션: 새 보고서 생성(createReport), 콘텐츠 수정(updateContent), 상태 변경(changeStatus), 스냅샷 캡처(captureSnapshot), 보고서 목록 조회(getReportsByOrgAndType), 특정 기간 보고서 조회(getReportByPeriod). - 보고서 전용 레이아웃(/reports/layout.tsx) 및 네비게이션 개발. 보고서 모듈(/reports/*) 진입 시 콘텐츠 영역 좌측에 보고서 전용 사이드바 표시. 사이드바 메뉴 구성: 주간보고 섹션(전체 현황, ITL 주간보고, UAD 주간보고), 월간보고 섹션(ITL 월간보고, UAD 월간보고), 보고서 현황(전체 보고서 목록 및 통계). 현재 선택된 보고서 유형/기관 메뉴에 활성화 스타일 적용. - 주간보고서 화면 3종 개발. (1) 전체 주간보고 현황(/reports/weekly): 이번 주 ITL/UAD 보고서 제출 상태를 카드로 표시(제출완료/미제출/작성중), 최근 4주간 제출 이력 테이블(주차, ITL 상태, UAD 상태), 미제출 보고서에 대한 알림 메시지. (2) ITL 주간보고(/reports/weekly/itl): ITL 기관의 해당 주차 보고서 작성 및 조회 화면. 보고서 콘텐츠 섹션 구성: [금주 실적] 연구소기업 진행현황(신규 N건, 단계이동 N건, 등록완료 N건), 기술이전 진행현황(신규 N건, 계약체결 N건), 첨단기술기업 현황; [주요 활동] 기업 상담/미팅, 기관 방문, 출장, 세미나/교육 등 활동 내역을 리치 텍스트 에디터로 입력; [이슈사항] 발생한 문제점 및 대응/해결 방안 기술; [차주 계획] 다음 주 예정 활동 계획. 각 섹션의 수치 항목 옆에 "데이터 불러오기" 버튼을 배치하여 클릭 시 innotech-store에서 해당 주간의 실제 데이터를 자동으로 채워주는 기능. (3) UAD 주간보고(/reports/weekly/uad): UAD 기관의 주간보고서를 동일한 구조로 작성/조회. - 월간보고서 화면 2종 개발. (1) ITL 월간보고(/reports/monthly/itl): 해당 월의 ITL 실적 종합 보고서 작성/조회 화면. 콘텐츠 섹션 구성: [월간 KPI 달성현황] 연구소기업/기술이전/첨단기술 목표 대비 실적을 테이블 및 달성률 차트로 표시; [사업별 진행현황] 연구소기업/기술이전/첨단기술 각 영역별 월간 활동 요약 및 주요 성과; [예산 집행현황] 월간 예산 배정 대비 집행 금액 테이블; [익월 계획] 다음 달 중점 추진 계획. (2) UAD 월간보고(/reports/monthly/uad): UAD 기관의 월간보고서를 동일 구조로 작성/조회. - 사업관리 내부 보고서 화면 2종 개발. (1) 이노테크 주간보고(/business-management/innotech-2025/reports/weekly): 사업관리 데이터(innotech-store)에서 해당 주의 변동 사항(단계 이동 건, 신규 등록 건, 완료 건 등)을 자동 집계하여 보고서 초안을 생성하는 기능. (2) 이노테크 월간보고(/business-management/innotech-2025/reports/monthly): 해당 월의 사업 데이터 스냅샷을 기반으로 월간 실적 보고서를 자동 생성. 메인 대시보드의 보고서 제출현황 카드와 report-store 데이터를 실시간 연동하여 제출 완료 시 녹색 체크 표시. ### 4. 문제 해결방안 주간보고서를 금요일 오전에 작성 시작하여 금요일 오후 또는 월요일에 최종 제출하는 업무 패턴에서, 작성 기간 중에도 사업관리 데이터(연구소기업 단계 변경, 기술이전 신규 등록, 계약 체결 등)가 실시간으로 계속 변경되어, 보고서 작성 시작 시점에 확인했던 실적 수치와 제출 직전에 확인하는 수치가 달라지는 문제 발생. 또한 제출된 보고서의 수치를 나중에(분기 검토, 연간 감사 등) 검증하려 해도 당시 원본 데이터가 남아있지 않아 해당 보고서의 수치가 정확했는지 확인 불가. 보고서 작성 시작 시 '스냅샷 저장' 버튼을 통해 해당 시점의 사업 데이터 전체(연구소기업 목록과 각 기업의 현재 단계, 기술이전 목록과 각 건의 현재 단계, 연간목표 달성현황 등)를 JSON 형태로 직렬화하여 보고서 레코드의 snapshot 필드에 함께 저장하는 스냅샷 기능 구현. 보고서 콘텐츠에 표시되는 모든 수치는 실시간 Store 데이터가 아닌 저장된 스냅샷 데이터를 기반으로 계산하여 렌더링함으로써, 작성 기간 중 실시간 데이터가 변경되어도 보고서 내용에는 영향 없음. 보고서 상태가 '제출(submitted)'으로 변경되면 해당 보고서의 스냅샷은 수정 불가(Immutable)하게 잠금 처리하여 추후 감사 시 제출 당시 원본 데이터 확인 가능. 또한 ITL과 UAD 두 기관의 보고서 양식이 대부분(약 90%)의 섹션(금주 실적, 주요 활동, 이슈사항, 차주 계획)에서 동일한 구조를 가지지만, 나머지 10%(기관 고유 특화 지표, 기관별 양식 차이)가 달라서, 두 기관의 보고서 컴포넌트를 완전히 동일하게 통합하면 기관 특성을 반영할 수 없고, 완전히 분리된 2개 컴포넌트로 만들면 90%의 코드가 중복되어 유지보수 비효율 발생. 보고서 UI 컴포넌트를 공통 섹션 컴포넌트(CommonReportSections: 실적 요약, 주요 활동, 이슈사항 섹션)와 기관별 확장 섹션 컴포넌트(ITLExtensionSection, UADExtensionSection: 기관 고유 내용)로 분리하는 합성(Composition) 패턴 적용. 기관별 보고서 페이지 컴포넌트에서 공통 섹션 컴포넌트를 재사용하고, 기관에 따라 해당 확장 섹션 컴포넌트만 추가로 렌더링하여 코드 중복을 최소화하면서 기관별 특성 반영. --- ## 9월 **작성일자: 25.09.19** ### 1. 연구과제명 기술사업화 지원 모듈 개발 (IP검색, SMK AI 작성, 기술가치평가, 계약관리) ### 2. 연구 개요 기업지원센터의 핵심 기능 중 하나인 기술사업화 지원 업무를 위한 4개 서브 모듈 통합 개발. (1) 특허청 데이터 등을 활용하여 기술/특허 정보를 검색할 수 있는 IP(지식재산) 검색 시스템, (2) AI를 활용하여 기술 정보를 입력하면 투자자/수요기업 대상 기술소개서(SMK: Smart Marketing Kit)를 자동으로 생성하는 도구, (3) 기술의 기술성/시장성/사업성을 정량적으로 평가하여 기술 가치를 시뮬레이션하는 기술가치평가 모듈, (4) 체결된 기술이전 계약의 현황과 로열티 수납 내역을 관리하는 계약관리 시스템 구현. ### 3. 연구 내용 - 기술사업화 종합 대시보드 화면(/commercialization) 개발. 화면 상단에 기술사업화 핵심 지표 카드 3종 배치: 보유 기술 수(등록된 이전 가능 기술 총 N건), 기술이전 완료 건수(계약 체결 완료된 기술이전 N건), 연구소기업 설립 수(기술이전을 통해 설립된 연구소기업 N개). 화면 중앙에 기술이전 추이 차트(AreaChart: 최근 12개월 월별 기술이전 계약 체결 건수 추이)와 기술분야별 분포 차트(PieChart: IT/SW, BT/의료, NT/소재, ET/에너지, CT/문화 등 분야별 보유 기술 비율) 배치. 화면 하단에 4개 서브 모듈(IP검색, SMK작성, 가치평가, 계약관리)로의 바로가기 카드를 가로로 배열, 각 카드에 모듈 아이콘, 모듈명, 간단한 설명 텍스트 포함. - IP 검색 화면(/commercialization/ip-search) 개발. 상단 검색 영역: 검색 모드 선택 라디오(키워드 검색 / 출원인 검색 / 발명자 검색 / 출원번호 검색), 검색어 입력 필드, 검색 실행 버튼. '고급 검색' 토글 버튼 클릭 시 확장되는 고급 검색 패널: IPC 국제특허분류 선택(트리 형태 UI로 섹션(A~H) > 클래스 > 서브클래스 순으로 drill-down 선택), 출원연도 범위 선택(시작년도~종료년도 이중 슬라이더), 등록 상태 필터(출원/등록/거절/소멸/포기 다중 선택 체크박스). 검색 결과 영역: 테이블 형태로 결과 목록 표시(컬럼: 출원번호, 발명의 명칭, 출원인, 출원일, IPC 분류, 등록 상태), 행 클릭 시 화면 우측에서 슬라이드되는 특허 상세 정보 사이드 패널 오픈(발명 상세 내용, 청구항, 출원인/발명자 정보, 패밀리 특허 등). 최근 검색 이력 자동 저장 기능: 최근 검색어 5개를 로컬에 저장하고 검색창 포커스 시 드롭다운으로 표시하여 원클릭 재검색 지원. - SMK AI 작성 도구 화면(/commercialization/smk) 개발. 화면 좌측에 입력 패널 배치: 기술명 입력 필드(필수), 기술 분야 선택 드롭다운(필수), 핵심 기술 내용 텍스트 영역(필수, 기술의 원리와 특징을 상세 기술), 관련 특허 번호 입력 필드(선택), 적용 가능 분야/산업 태그 입력(선택, 태그 형태로 복수 입력), 목표 시장 규모 정보(선택). 입력 완료 후 'AI 기술소개서 생성' 버튼 클릭. 화면 우측에 출력 패널 배치: AI가 생성한 기술소개서(SMK) 콘텐츠를 섹션별로 표시 - 기술 개요(1~2문단으로 기술 핵심 요약), 기술의 우수성(경쟁/대체 기술 대비 차별점 및 장점), 시장 분석(적용 시장 현황, 시장 규모, 성장 전망), 경쟁 기술 비교(표 형태로 자사 기술 vs 경쟁 기술 비교), 기대 효과(기술 도입 시 예상 효과). 각 섹션 우측에 '이 섹션만 재생성' 버튼을 배치하여 불만족스러운 섹션만 선택적으로 AI 재생성 요청 가능. 생성된 전체 내용은 사용자가 직접 인라인 편집 가능. 완성된 SMK를 PDF 또는 Word 문서로 내보내기 버튼. - 기술가치평가 화면(/commercialization/valuation) 개발. 3단계 입력 위자드 형태: (1단계) 기술성 평가 - "해당 기술의 완성도는 어느 수준입니까?", "특허 권리 범위가 넓습니까?", "기술 수명 주기상 어느 단계입니까?" 등 기술적 측면에 대한 정성적 질문 5개에 5점 척도(1: 매우 낮음 ~ 5: 매우 높음)로 응답; (2단계) 시장성 평가 - "목표 시장 규모는 어느 정도입니까?", "시장 성장률은?", "경쟁 강도는?" 등 시장 측면 질문 5개 응답; (3단계) 사업성 평가 - "수익 모델이 명확합니까?", "사업화 역량(인력, 자금)은 충분합니까?", "추가 투자 필요성은?" 등 사업화 측면 질문 5개 응답. 모든 질문 응답 완료 후 '평가 결과 보기' 버튼. 결과 화면: 기술성/시장성/사업성 3축 점수를 레이더 차트(Radar Chart)로 시각화, 종합 점수(100점 만점) 및 등급(A/B/C/D) 표시, 각 축별 상세 점수와 강점/약점 코멘트, 평가 결과 보고서 PDF 내보내기 버튼. - 기술이전 계약관리 화면(/technology-transfer/contract-management) 개발. 계약 목록 테이블: 계약번호, 이전 기술명, 기술 제공 기관(출원기관), 기술 도입 기업, 계약 체결일, 계약 금액(선급금 + 경상로열티), 현재 상태(협상중/체결완료/이행중/종료) 컬럼. 상단에 상태 필터(전체/협상중/체결완료/이행중/종료) 탭, 기간 필터(계약일 기준 시작일~종료일), 검색(기술명, 기관명 키워드). 테이블 행 클릭 시 계약 상세 화면으로 이동: 계약 기본정보(당사자, 계약일, 계약기간), 계약 조건(선급금 금액, 경상 로열티율, 최소 보장 로열티), 로열티 수납 이력 테이블(수납일, 수납 금액, 산정 기준, 비고), 계약서 원본 파일 첨부 및 다운로드. ### 4. 문제 해결방안 IP 검색에서 키워드, 출원인, 발명자, 출원번호, IPC 분류, 출원연도 범위, 등록 상태 등 다양한 조건을 조합하면 검색 인터페이스가 복잡해져 특허 검색에 익숙하지 않은 일반 사용자가 사용하기 어렵고, 특히 IPC 국제특허분류 코드(예: H04L 29/06)는 특허 전문가가 아니면 코드 의미를 알 수 없어 직접 입력이 사실상 불가능한 UX 문제 발생. 검색 인터페이스를 2단계로 분리하여, 기본 검색 모드에서는 검색 모드(키워드/출원인/발명자/출원번호) 선택과 검색어 입력만으로 단순하게 검색하고, '고급 검색' 버튼 클릭 시에만 IPC, 연도, 상태 등 전체 조건 패널이 펼쳐지는 점진적 공개(Progressive Disclosure) 패턴 적용. IPC 분류 코드는 사용자가 직접 입력하는 대신, 계층형 트리 UI를 제공하여 섹션(A: 생활필수품, B: 처리조작, ..., H: 전기) 선택 → 해당 섹션의 클래스 목록 표시 및 선택 → 해당 클래스의 서브클래스 목록 표시 및 선택 순으로 drill-down 방식으로 선택하도록 구현. 선택된 IPC 코드는 코드와 함께 사람이 이해할 수 있는 명칭(예: "H04L - 디지털 정보의 전송")을 함께 표시. 또한 기술가치평가에서 사용자가 기술성/시장성/사업성 각 축의 점수를 1~10점 범위에서 주관적으로 직접 입력하면, 평가자의 개인적 성향(낙관적/비관적)에 따라 동일한 기술에 대해서도 점수 편차가 크고, 평가 결과의 객관성과 일관성을 담보하기 어려운 문제 발생. 각 평가 축에 대해 추상적인 점수 대신 구체적인 상황 기반 정성적 질문(예: "해당 기술을 대체할 수 있는 경쟁 기술이 존재합니까?" → 1: 다수의 대체 기술 존재, 2: 일부 대체 가능, 3: 제한적 대체 가능, 4: 대체 어려움, 5: 대체 불가능)을 제시하고, 사용자는 현재 기술의 객관적 상황에 맞는 선택지를 고르도록 유도. 15개 질문(3개 축 x 5개 질문)의 응답 조합에 따라 사전 정의된 가중치 공식으로 각 축 점수와 종합 점수를 자동 산출하여, 평가자의 주관적 편향을 최소화하고 동일 조건의 기술이면 누가 평가해도 유사한 결과가 나오도록 객관성 확보. --- ## 10월 **작성일자: 25.10.17** ### 1. 연구과제명 복합 예산 데이터 모델 설계 및 인라인 편집 스프레드시트형 예산관리 시스템 개발 ### 2. 연구 개요 기업지원 사업의 예산 편성, 배정, 집행, 잔액 관리, 분석을 통합 관리하는 예산관리 시스템 개발. 국가 R&D 사업 예산 구조의 복잡성(연차별 정부출연금, 컨소시엄 기관별 분담금, 직접비 9개 세부비목 등)을 반영한 다계층 복합 예산 데이터 모델 설계. 현업에서 익숙한 엑셀처럼 테이블 셀을 클릭하여 즉시 숫자를 편집할 수 있는 인라인 편집 스프레드시트형 예산 테이블 UI 연구 및 개발. 사업별 예산 상세, 월별 집행 추이, 비목별 구성비 등 예산 현황을 다각도로 분석하는 대시보드 개발. ### 3. 연구 내용 - 복합 예산 데이터 모델 설계 및 상태관리 엔진(budget-store) 개발. 5개 계층으로 구성된 예산 데이터 구조 설계: (1계층) BudgetItem - 최상위 사업 단위, 사업 ID, 사업명, 총 예산 금액, 센터 배정액, 센터 집행액, 수탁기관 배정액, 수탁기관 집행액. (2계층) YearlyFunding - 연차별 재원 구성, 1차년도~5차년도 각각의 정부출연금, 기관부담금(현금 기여분, 현물 기여분). (3계층) ConsortiumOrganization - 컨소시엄 참여기관별 분담, 기관명, 역할(주관/참여), 현금 분담금, 현물 분담금(인력, 장비, 시설 등). (4계층) YearlyBudgetDetail - 연차별 세부 예산 배분, 해당 연차 총예산, 정부출연금, 기관부담금 항목별 배분. (5계층) DirectCostItem - 직접비 9개 비목 상세, 인건비(내부 연구원), 학생인건비(참여 학생), 연구장비비(구입비, 임차비), 연구재료비(소모품, 시약 등), 위탁연구비(외부 위탁), 국제공동연구비(해외 협력), 연구활동비(여비, 회의비 등), 연구수당(성과급), 기타(간접비 등). Zustand Store 액션: 사업별 예산 전체 조회, 특정 비목 금액 수정(updateDirectCostItem), 집행 내역 등록(addExpenditure), 합계 자동 계산(computed getter). - 인라인 편집 셀(EditableCell) 컴포넌트 개발. 평상시(읽기 모드): 셀에 금액을 천 단위 콤마가 적용된 형태(예: 150,000,000)의 읽기 전용 텍스트로 표시, 배경색은 테이블 기본색. 셀 클릭 시(편집 모드): 해당 셀이 input 요소로 변환되고 테두리 색상이 강조색으로 변경되어 편집 중임을 시각적으로 표시, 표시되는 값은 콤마가 제거된 순수 숫자(예: 150000000)로 변환하여 숫자 수정이 용이하도록 함. 편집 중 실시간 입력 검증: 숫자(0-9)와 마이너스(-), 소수점(.) 외의 문자 입력 시 즉시 차단. Enter 키 입력 또는 다른 셀 클릭으로 포커스 아웃 시: 편집 완료 처리, 입력된 숫자에 천 단위 콤마를 자동 적용하여 표시 모드로 복귀, 변경된 값을 budget-store에 즉시 업데이트(자동 저장). Esc 키 입력 시: 편집 취소, 원래 값으로 복원하고 표시 모드로 복귀. - 예산 현황 메인 화면(/budget) 개발. 화면 상단에 전체 예산 요약 정보 카드 영역: 총 배정 예산(전체 사업 배정액 합계), 총 집행 예산(전체 사업 집행액 합계), 총 잔액(배정-집행), 전체 집행률(%)을 원형 게이지 차트로 시각화. 화면 중앙에 사업별 예산 현황 테이블: 사업명, 배정액, 집행액, 잔액, 집행률 컬럼. 집행률 컬럼에 해당 값에 따른 색상 프로그레스바 표시(50% 미만: 빨간색 경고, 50~80%: 노란색 주의, 80% 이상: 녹색 정상). 테이블 행 클릭 시 해당 사업의 예산 상세 페이지로 이동. - 사업별 예산 상세 화면(/budget/[id]) 개발. 동적 라우팅으로 사업 ID에 따라 해당 사업의 예산 상세 정보 조회 및 편집. 탭 기반 상세 정보 구성: (1) 연차별 예산 탭 - 1차년도~5차년도 정부출연금/기관부담금(현금/현물) 테이블, 모든 셀 인라인 편집 가능; (2) 세부비목 탭 - 직접비 9개 비목별 배정액/집행액/잔액 테이블, 배정액 셀 인라인 편집 가능; (3) 집행 이력 탭 - 개별 집행 건 이력 테이블(집행일, 비목, 금액, 적요/사유, 증빙서류 첨부 여부), 신규 집행 등록 버튼; (4) 추이 분석 탭 - 연차별 배정/집행 추이를 Bar+Line 복합 차트로 시각화. - 월별 예산 분석 화면(/budget/monthly-analysis) 개발. 화면 상단에 분석 대상 월 선택 드롭다운(최근 12개월 목록). 선택된 월의 집행 현황 분석: 비목별 집행 금액 구성비 원형 차트(각 비목이 해당 월 집행액에서 차지하는 비율), 최근 12개월 월별 집행 추이 꺾은선 차트(월별 집행액 변화 추이), 전월 대비 증감 분석 테이블(비목별로 전월 집행액, 당월 집행액, 증감액, 증감률 표시). ### 4. 문제 해결방안 직접비 9개 비목 금액 → 해당 연차 비목 소계 → 연차별 합계 → 사업 전체 합계 → 플랫폼 총 합계로 이어지는 5계층 합산 구조에서, 사용자가 최하위 비목(예: 3차년도 연구재료비) 금액을 수정하면 그 상위 모든 계층(3차년도 직접비 소계, 3차년도 총계, 해당 사업 총계, 전체 예산 총계)의 합계가 즉시 연쇄적으로 재계산되어야 하는데, 각 계층의 합계 값을 Store에 개별 필드로 저장하고 하위 값 변경 시 상위 합계 필드들을 일일이 업데이트하는 방식은 어느 한 계층의 업데이트가 누락되기 쉽고 데이터 정합성 보장이 어려운 구조적 문제 발생. 최하위 비목 금액만 원본 데이터(Source of Truth)로 저장하고, 모든 상위 계층의 합계(비목 소계, 연차 합계, 사업 합계, 전체 합계)는 하위 데이터로부터 실시간으로 계산하는 파생 데이터(Derived Data / Computed) 패턴 적용. Zustand Store에 합계 값을 위한 getter 함수를 정의하여, 예를 들어 `get yearly3Total() { return this.directCosts.year3.reduce((sum, item) => sum + item.amount, 0) }`처럼 하위 데이터의 합을 즉시 계산하여 반환. 컴포넌트에서 합계를 조회할 때 이 getter를 호출하면 항상 최신 하위 데이터 기준의 정확한 합계가 반환되어, 어떤 비목을 수정하든 모든 상위 합계가 자동으로 일관성 있게 갱신됨을 보장. 또한 인라인 편집 모드에서 현재 표시된 "150,000,000"(천 단위 콤마 포함) 형태의 숫자 중간에 커서를 놓고 숫자를 삽입하거나 삭제하면, 콤마의 위치 때문에 커서가 예상과 다른 곳으로 점프하거나, 콤마가 숫자로 인식되어 잘못된 값이 입력되는 UX 문제 발생. 편집 모드와 표시 모드를 명확히 분리하는 2모드 전환 방식 구현: 셀 클릭으로 편집 모드 진입 시 저장된 원본 숫자 값(150000000)을 콤마 없이 순수 숫자로 표시하여 일반적인 숫자 입력처럼 자연스럽게 편집 가능하게 하고, Enter 키 또는 포커스 아웃으로 편집 완료 시 입력된 숫자에 toLocaleString() 등으로 천 단위 콤마를 자동 적용한 문자열(150,000,000)을 표시 모드에서 렌더링. --- ## 11월 **작성일자: 25.11.21** ### 1. 연구과제명 문서관리 시스템, 역할 기반 사용자 접근제어, 우선순위 기반 실시간 알림 시스템 개발 ### 2. 연구 개요 A-WORKS 플랫폼의 운영 관리 및 지원을 위한 3개 핵심 모듈 통합 개발. (1) 계약서, 제안서, 보고서 등 업무 문서를 분류별로 체계적으로 저장하고 버전 이력을 관리하는 문서관리 시스템, (2) 사용자 역할(관리자/매니저/일반 사용자)에 따라 접근 가능한 메뉴와 기능을 차별화하여 보안을 강화하는 역할 기반 접근제어(RBAC) 시스템, (3) 업무 마감일, 보고서 제출, 회의 일정, 점검 예정 등 중요 이벤트를 우선순위에 따라 사용자에게 실시간으로 알려주는 알림 시스템 구현. ### 3. 연구 내용 - 문서관리 시스템 개발. document-store(Zustand) 설계 및 구현: 문서 ID, 문서 제목, 분류 코드(contract 계약서 / proposal 제안서 / report 보고서 / other 기타), 파일 정보(파일명, 파일 크기, MIME 타입, 저장 경로), 현재 버전 번호, 작성자 정보, 최초 작성일시, 최종 수정일시, 버전 이력 배열(각 버전별 수정일, 수정자, 변경 내용 요약, 해당 버전 파일 경로). Store 액션: 문서 등록, 문서 정보 수정, 새 버전 업로드, 문서 삭제, 분류별/기간별 조회. 문서 메인 화면(/documents): 전체 문서 현황 요약 카드(분류별 문서 수: 계약서 N건, 제안서 N건, 보고서 N건, 기타 N건), 최근 등록/수정된 문서 5건 리스트. 분류별 문서 목록 화면 3종(/documents/contracts 계약서, /documents/proposals 제안서, /documents/recent 최근문서): 테이블 형태로 문서 목록 표시(문서명, 버전, 작성자, 작성일, 파일크기, 다운로드 버튼), 검색(문서명 키워드), 정렬(작성일순, 문서명순). 문서 상세 화면(/documents/[id]): 동적 라우팅으로 문서 ID에 따른 상세 정보 조회, 문서 기본정보(제목, 분류, 현재 버전, 작성자, 작성일), 버전 이력 타임라인 또는 테이블(버전 번호, 수정일시, 수정자, 변경 내용, 해당 버전 다운로드 버튼), 최신 버전 파일 미리보기(이미지/PDF인 경우) 또는 다운로드 버튼. - 사용자관리 시스템 개발. user-store(Zustand) 설계 및 구현: 사용자 ID, 이름, 이메일(로그인 ID), 역할 코드(admin 관리자 / manager 매니저 / user 일반사용자), 소속 부서, 프로필 이미지 URL, 메뉴별 접근 권한 배열. Store 액션: 사용자 등록, 정보 수정, 역할 변경, 권한 수정, 목록 조회(역할별/부서별 필터). 사용자 목록 화면(/users): 전체 사용자 테이블(이름, 이메일, 역할 뱃지, 부서, 등록일), 검색(이름/이메일), 필터(역할별, 부서별). 역할별 조회 화면(/users/by-role): 역할(관리자 / 매니저 / 일반)별로 그룹화하여 아코디언 형태로 표시. 부서별 조회 화면(/users/by-department): 부서별로 그룹화하여 표시. 권한 설정 화면(/users/permissions): 역할별 메뉴 접근 권한을 매트릭스 테이블로 표시 및 편집. 테이블 행: 역할(admin, manager, user), 테이블 열: 각 메뉴(대시보드, 기업관리, 전문가관리, 사업관리, ..., 사용자관리), 셀: 접근 허용 여부 체크박스. 체크박스 변경 시 해당 역할의 권한 즉시 업데이트. 사용자 상세 화면(/users/[id]): 동적 라우팅으로 사용자 상세 정보 및 활동 이력(최근 로그인, 최근 작업 내역) 조회. 프로필 관리 화면 3종: 내 정보(/profile) - 내 프로필 정보 조회 및 수정(이름, 이메일, 프로필 사진); 비밀번호 변경(/profile/password) - 현재 비밀번호 확인 후 새 비밀번호 설정; 환경설정(/profile/settings) - 알림 수신 설정(이메일/푸시/플랫폼내 알림 on/off), 테마 설정(라이트/다크/시스템), 언어 설정. - 알림 시스템 개발. notification-store(Zustand) 설계 및 구현: 알림 ID, 알림 유형 코드(deadline 마감임박 / report 보고서관련 / meeting 회의일정 / inspection 점검예정 / alert 일반경고), 알림 제목, 알림 내용 상세, 우선순위(high 높음 / medium 보통 / low 낮음), 발생 일시, 읽음 여부(boolean), 관련 페이지 링크 URL. Store 액션: 알림 생성, 읽음 처리(markAsRead), 전체 읽음 처리(markAllAsRead), 알림 삭제, 조회(유형별/우선순위별/읽음상태별 필터). 알림 화면(/notifications): 전체 알림 목록을 카드 또는 리스트로 표시, 상단에 필터 탭(전체 / 유형별: 마감/보고서/회의/점검/경고 / 우선순위별: 높음/보통/낮음 / 읽음상태: 안읽음/읽음), 전체 읽음 처리 버튼. 각 알림 항목 표시 정보: 유형별 아이콘, 알림 제목(굵은 글씨, 안읽음일 경우 더 굵게), 내용 요약(1줄, 말줄임), 발생 시간(n분 전 / n시간 전 / n일 전 형식), 우선순위에 따른 좌측 색상 바(high: 빨간색, medium: 노란색, low: 회색). 알림 항목 클릭 시 해당 관련 페이지로 이동 및 자동 읽음 처리. 상단 메뉴(TopMenu) 알림 아이콘 영역: 벨 아이콘에 미읽음 알림 수 빨간색 뱃지 실시간 표시(notification-store의 unreadCount 구독), 아이콘 클릭 시 최근 알림 5건을 드롭다운 팝오버로 표시, 드롭다운 하단에 "전체 알림 보기" 링크(/notifications로 이동). ### 4. 문제 해결방안 사용자 역할(admin/manager/user)에 따라 사이드바에서 접근 불가한 메뉴 항목을 렌더링하지 않거나 비활성화(disabled) 처리하는 UI 레벨 접근제어를 구현했으나, 사용자가 브라우저 주소창에 URL(예: 일반 사용자가 /users/permissions 입력)을 직접 입력하면 사이드바 메뉴에는 보이지 않지만 해당 페이지에 접근할 수 있는 보안 취약점 발생. UI 레벨의 메뉴 숨김/비활성화와 별도로, 보호가 필요한 각 페이지의 레이아웃 컴포넌트 또는 페이지 컴포넌트 최상단에서 현재 로그인 사용자의 역할을 검증하고, 해당 역할에 해당 페이지 접근 권한이 없으면 페이지 콘텐츠를 렌더링하지 않고 "접근 권한이 없습니다" 안내 메시지와 함께 대시보드 또는 이전 페이지로 리다이렉트하는 2중 접근제어 가드 로직 구현. 이를 통해 URL 직접 입력으로도 권한 없는 페이지 접근 차단. 또한 알림 데이터가 상단 메뉴의 알림 뱃지(미읽음 수), 알림 드롭다운(최근 5건), 알림 전체 목록 페이지(/notifications) 등 3곳 이상의 UI에서 동시에 사용되는데, 알림 목록 페이지에서 특정 알림을 클릭하여 읽음 처리하면 해당 페이지의 UI는 즉시 갱신되지만 상단 메뉴 뱃지의 미읽음 수는 페이지를 새로고침하거나 다른 페이지로 이동하기 전까지 이전 값(갱신 전 미읽음 수)을 유지하는 데이터 동기화 문제 발생. notification-store를 플랫폼 전체의 알림 데이터에 대한 단일 진실 원천(Single Source of Truth)으로 두고, 알림 뱃지 컴포넌트, 알림 드롭다운 컴포넌트, 알림 목록 페이지 컴포넌트가 모두 동일한 notification-store를 구독하도록 설계. 어느 화면에서든 읽음 처리 액션(markAsRead)을 실행하면 Store 상태가 변경되고, 이 Store를 구독하는 모든 컴포넌트가 Zustand의 반응성에 의해 자동으로 리렌더링되어 동기화. 특히 상단 메뉴 뱃지는 `const unreadCount = useNotificationStore(state => state.notifications.filter(n => !n.isRead).length)` 선택자로 미읽음 수만 구독하여 알림 내용 변경(제목, 내용 수정 등)에는 반응하지 않고 읽음 상태 변경에만 반응하도록 최적화. --- ## 12월 **작성일자: 25.12.19** ### 1. 연구과제명 A-WORKS 플랫폼 전체 모듈 통합 테스트, 성능 최적화 및 연구개발 결과 종합 ### 2. 연구 개요 2025년 1월부터 11월까지 개발된 A-WORKS 플랫폼의 전체 구성요소(78개 화면, 61개 재사용 컴포넌트, 7개 Zustand 상태관리 Store, 7개 주요 모듈)를 대상으로 종합 통합 테스트 수행. 개별 모듈 단위 테스트를 넘어 모듈 간 데이터 연동 정합성 검증, 실제 업무 시나리오 기반 End-to-End 테스트 실시. 초기 로딩 속도 개선, 불필요한 리렌더링 제거 등 사용자 경험 향상을 위한 성능 최적화 작업 수행. 데스크톱/태블릿/모바일 3개 환경 및 Chrome/Safari/Firefox/Edge 4개 브라우저에서의 반응형 디자인 및 크로스 브라우저 호환성 검증. WCAG 웹 접근성 가이드라인 기반 접근성 개선 작업 수행. 12개월간의 연구개발 과정과 결과를 종합 정리하여 최종 연구개발 보고서 작성. ### 3. 연구 내용 - 78개 화면 전수 통합 테스트 수행. 각 화면의 정상 렌더링 확인(빈 화면, 레이아웃 깨짐, 에러 메시지 없이 의도한 콘텐츠 표시), 데이터 로딩 확인(Store에서 데이터 조회 및 UI 반영), 사용자 인터랙션 동작 확인(버튼 클릭, 폼 입력, 드롭다운 선택, 탭 전환, 모달/사이드패널 오픈/닫기, 네비게이션 이동 등). 모듈 간 데이터 연동 정합성 테스트: 사업관리(innotech-store)에서 연구소기업 단계를 "등록완료"로 변경 → 메인 대시보드의 연구소기업 KPI 카드 달성 수 즉시 +1 반영 → 보고서 모듈에서 데이터 스냅샷 시 해당 변경 포함 → 예산 모듈의 해당 사업 집행 현황과 정합성 유지. 6개 카테고리 간 네비게이션 전환 테스트: 각 카테고리(홈, 사업관리, 기업관리, 기술사업화, 보고서, 운영관리) 간 이동 시 사이드바 메뉴 트리, 상단 메뉴 버튼, 빵가루 네비게이션이 해당 카테고리에 맞게 정확히 전환되는지 확인. 동적 라우팅([id]) 페이지의 유효/무효 ID 처리 테스트: 존재하는 ID 접근 시 정상 데이터 표시, 존재하지 않는 ID 접근 시 에러 안내 화면 표시 확인. - 성능 최적화 수행. (1) Skeleton 로딩 UI 15종 전체 화면 적용: 데이터 로딩 대기 중 회색 플레이스홀더를 먼저 표시하여 레이아웃 골격 즉시 확정, Layout Shift 방지 및 사용자 체감 로딩 속도 개선. (2) Zustand Store 구독 최적화: 7개 Store(innotech, company, expert, budget, report, document, notification, user) 전체에 선택자(Selector) 패턴 적용, 컴포넌트가 필요한 데이터 조각만 구독하여 관련 없는 Store 변경 시 불필요한 리렌더링 제거. (3) 코드 스플리팅 및 동적 임포트: 7개 주요 모듈을 Next.js dynamic()으로 분리하여 초기 번들에 모든 코드를 포함하지 않고, 해당 모듈 경로 진입 시에만 관련 코드를 로딩하도록 최적화, 초기 번들 사이즈 약 40% 감소. (4) 이미지 최적화: Next.js Image 컴포넌트 활용으로 자동 이미지 최적화(WebP 변환, 크기 조절), 뷰포트 밖 이미지 lazy loading 적용. - 반응형 디자인 크로스 브라우저 테스트 수행. 3개 대표 해상도(데스크톱 1920x1080, 태블릿 768x1024, 모바일 375x667)에서 전체 78개 화면의 레이아웃 정상 표시 확인: 사이드바 축소/숨김 동작, 그리드 컬럼 수 변경, 폰트 크기 가독성, 버튼/링크 터치 영역 적정성(모바일에서 최소 44x44px). 4개 주요 브라우저(Chrome, Safari, Firefox, Microsoft Edge) 각 최신 버전에서 렌더링 일관성 확인: CSS Flexbox/Grid 동작, JavaScript ES6+ 기능 동작, CSS 변수(Custom Properties) 동작, 애니메이션/트랜지션 부드러움. 발견된 호환성 이슈(예: Safari에서 특정 CSS gap 속성 미지원) 식별 및 대체 스타일 적용으로 해결. - 웹 접근성 개선 수행. ARIA(Accessible Rich Internet Applications) 속성 점검: 버튼에 명확한 aria-label, 모달/다이얼로그에 aria-modal 및 역할(role="dialog"), 폼 입력 필드와 레이블 연결(htmlFor-id 또는 aria-labelledby), 로딩 상태에 aria-busy 적용. 시맨틱 HTML 검증: 페이지 구조에 header, nav, main, aside, section, article, footer 등 시맨틱 태그 적절 사용, 제목 계층(h1~h6) 올바른 순서 유지. 키보드 네비게이션 테스트: Tab 키로 모든 인터랙티브 요소(링크, 버튼, 폼 필드, 메뉴 항목) 순차 접근 가능, Enter/Space 키로 활성화 가능, 모달 오픈 시 포커스 트랩(모달 내부에서만 Tab 이동) 동작 확인. 색상 대비 검증: 텍스트와 배경 간 색상 대비율 WCAG AA 기준(일반 텍스트 4.5:1, 대형 텍스트 3:1) 충족 확인, 색상만으로 정보를 전달하는 요소(예: 상태 표시)에 아이콘 또는 텍스트 레이블 병행. - 연구개발 결과 종합 및 최종 보고서 작성. 12개월간(1월~12월) 월별 연구개발 내용, 개발한 화면/기능/컴포넌트, 해결한 기술적 난제를 체계적으로 정리. 개발된 A-WORKS 플랫폼 최종 스펙 문서화: 78개 화면, 61개 컴포넌트, 7개 Zustand Store, 7개 주요 모듈, 7종 데이터 시각화 차트, 15종 Skeleton 로딩 UI. 향후 플랫폼 고도화 방향 제언: 실제 백엔드 서버 및 데이터베이스 연동, 사용자 인증/인가 시스템 고도화, AI 기반 데이터 분석 및 예측 기능, 모바일 앱(React Native 또는 PWA) 확장 등. ### 4. 문제 해결방안 78개 화면 및 7개 Store를 대상으로 한 통합 테스트 과정에서, innotech-store(사업관리 데이터)와 report-store(보고서 데이터)가 상호 참조하는 순환 의존성(Circular Dependency) 구조 발견. innotech-store에서 보고서 제출 여부를 확인하기 위해 report-store의 상태를 참조하고, report-store에서 보고서 작성 시 사업 데이터 스냅샷을 위해 innotech-store의 상태를 참조하는 구조에서, 양쪽 Store가 거의 동시에 업데이트되는 특정 시나리오(예: 사업 단계 변경 직후 보고서 자동 생성 트리거)에서 Store A 업데이트 → Store B 구독 콜백 실행 → Store B 업데이트 → Store A 구독 콜백 실행 → ... 무한 루프가 발생하여 브라우저 탭이 응답 없음 상태가 되는 치명적 버그 발생. Store 간 직접 참조(Store A 내부에서 useStoreB.getState() 호출)를 전면 제거하고, 여러 Store의 데이터가 필요한 경우 해당 데이터를 사용하는 페이지 컴포넌트 레벨에서 각 Store를 개별적으로 구독(useStoreA(), useStoreB())한 후, 컴포넌트 내부의 로컬 로직에서 두 데이터를 조합하여 사용하는 방식으로 아키텍처 전면 리팩토링. 예를 들어 대시보드에서 사업 현황과 보고서 제출 상태를 함께 표시할 때, 대시보드 컴포넌트가 `const innotech = useInnotechStore()`, `const reports = useReportStore()`로 각각 구독하고, 컴포넌트 렌더링 로직 내에서 두 데이터를 조합. 이를 통해 Store 간 결합도를 완전히 제거하고 데이터 흐름을 Store → 컴포넌트의 단방향으로 명확히 정리하여 순환 참조 가능성을 근본적으로 차단. 또한 78개 화면 전수 테스트 과정에서 "페이지 A에서 페이지 B로 이동할 때, 페이지 B의 데이터가 로딩되기 전 짧은 순간(수백 밀리초)동안 페이지 A에서 표시하던 이전 데이터가 페이지 B 화면에 잠깐 나타났다가 사라지는 현상"이 다수 화면에서 반복 발견. 원인 분석 결과, Store에 저장된 이전 데이터가 새 페이지 컴포넌트가 마운트되어 새 데이터를 요청하고 로딩 완료하기 전까지 잠깐 노출되는 것으로 확인. 모든 데이터 의존 페이지에 공통 로딩 처리 패턴을 적용: 페이지 컴포넌트 최상단에 isLoading 상태를 true로 초기화, 데이터 로딩 중에는 Skeleton UI 컴포넌트를 렌더링하고 실제 데이터 콘텐츠는 렌더링하지 않음, 데이터 로딩 완료(useEffect 내 데이터 fetch 성공) 후 isLoading을 false로 변경하여 Skeleton을 숨기고 실제 콘텐츠를 표시. 이 패턴을 15개 Skeleton UI 컴포넌트와 함께 전체 데이터 페이지에 일관되게 적용하여 로딩 경험 표준화. --- ## 연구개발 성과 총괄 | 구분 | 수량 | |------|------| | 개발 완료 화면 | 78개 | | 개발 완료 컴포넌트 | 61개 | | 상태관리 엔진(Zustand Store) | 7개 | | 주요 모듈 | 7개 (대시보드, 기업관리, 전문가관리, 사업관리, 기술사업화, 보고서, 운영관리) | | 데이터 시각화 차트 | 7종 (Area, Bar, Pie, Radial, Composed, Line, Radar) | | Skeleton 로딩 UI | 15종 | | 기술적 난제 해결 | 24건 (월 평균 2건) | --- 각 월의 4개 항목(연구과제명, 연구개요, 연구내용, 문제해결방안) 모두 내용을 대폭 보강하여 빈칸이 없도록 풍부하게 작성했습니다. 이미지의 연구노트 양식에 넣었을 때 각 항목이 충분히 채워지도록 분량을 늘렸습니다.