좋습니다! "문제 해결방안"이 들어가면 진짜 연구개발 느낌이 확 살아납니다. 4단 구성으로 다시 작성하겠습니다.
| 항목 | 내용 |
|---|---|
| 과제명 | A-WORKS : 강소연구개발특구 기업지원 통합관리 플랫폼 연구개발 |
| 연구기간 | 2025.01.01 ~ 2025.12.31 (12개월) |
| 수행기관 | 아이피나우 |
| 세액공제 근거 | 조세특례제한법 제10조 (연구개발비 세액공제) |
강소특구 업무 프로세스 분석 및 A-WORKS 시스템 아키텍처 설계
강소연구개발특구 지원센터의 실제 업무 프로세스를 분석하고, A-WORKS 플랫폼의 전체 시스템 아키텍처를 설계한다. 기업 분류체계(연구소기업, 첨단기술기업, 국가전략기술기업, 후보기업, 기타기업)의 분류 기준을 정의하고, Next.js App Router 기반 중첩 라우팅 구조 및 데이터 모델을 설계한다.
[문제 1] 업무 영역 간 데이터 단절 문제 현업에서 기업관리, 전문가DB, 사업관리, 보고서, 예산이 각각 별도 엑셀로 관리되어, 동일 기업 데이터가 여러 파일에 중복 존재하고 정합성이 보장되지 않았다. → 해결: 단일 데이터 모델 계층 구조를 설계하여, 기업 ID를 중심으로 사업관리, 보고서, 예산이 참조 관계로 연결되는 통합 데이터 아키텍처를 수립했다.
[문제 2] 7개 모듈의 독립성과 통합성 동시 확보 대시보드, 기업관리, 전문가, 사업관리, 기술사업화, 보고서, 운영관리 등 7개 모듈이 각각 독립적으로 동작하면서도, 메인 대시보드에서는 전체 데이터를 통합 조회해야 하는 상충 요구사항이 존재했다. → 해결: Next.js App Router의 중첩 레이아웃(Nested Layout) 구조를 채택하여, 각 모듈별 독립 레이아웃을 유지하면서도 상위 레이아웃에서 공통 네비게이션과 전역 상태를 공유하는 설계 방식을 도출했다.
적응형 네비게이션 시스템 및 공통 UI 인프라 개발
A-WORKS 플랫폼의 근간이 되는 공통 인프라를 구축한다. URL 기반 카테고리 자동 감지 알고리즘을 연구하여, 사이드바와 상단 메뉴가 현재 페이지에 따라 동적으로 전환되는 적응형 네비게이션 시스템을 개발한다. 공통 UI 컴포넌트 라이브러리 40여 종을 구축하고, 다크모드/라이트모드 테마 시스템을 구현한다.
[문제 1] 6개 카테고리 간 네비게이션 전환 시 상태 유실 사용자가 "사업관리"에서 "보고서"로 카테고리를 전환할 때, 사이드바와 상단 메뉴가 동시에 바뀌어야 하는데, 기존 방식(수동 상태 관리)으로는 URL 변경과 UI 전환 사이 타이밍 불일치로 메뉴가 깜빡이거나 잘못된 카테고리가 표시되는 문제가 발생했다. → 해결: URL pathname을 단일 진실 원천(Single Source of Truth)으로 활용하는 카테고리 자동 매핑 알고리즘을 개발했다. pathname의 첫 번째 세그먼트를 파싱하여 카테고리를 결정하고, 이를 기반으로 사이드바/상단 메뉴/빵가루를 동기적으로 렌더링하여 전환 시 깜빡임 없이 즉시 반영되도록 했다.
[문제 2] 사이드바 메뉴의 깊은 중첩 구조에서 성능 저하 사이드바가 최대 3단계 깊이의 메뉴 트리를 가지며 카테고리별로 전혀 다른 메뉴를 렌더링해야 하는데, 전체 메뉴 데이터를 한 번에 렌더링하면 카테고리 전환 시 불필요한 리렌더링으로 UI가 버벅이는 문제가 있었다. → 해결: 현재 카테고리에 해당하는 메뉴만 선택적으로 렌더링하는 조건부 렌더링 패턴을 적용하고, 각 메뉴 트리의 접힘/펼침 상태를 독립적으로 관리하여 불필요한 리렌더링을 제거했다.
[문제 3] 데스크톱/모바일 간 네비게이션 UX 차이 데스크톱에서는 상시 표시되는 사이드바가 적합하지만, 모바일에서는 화면을 가리므로 다른 UX 패턴이 필요했다. → 해결: 화면 너비 768px를 기준으로, 데스크톱에서는 좌측 고정 사이드바 + 상단 버튼 메뉴, 모바일에서는 사이드바를 숨기고 상단 드로어(Sheet) 메뉴로 자동 전환되는 반응형 네비게이션 시스템을 구현했다.
강소특구 입주기업 5개 유형 분류 관리 시스템 개발
강소특구 입주기업을 5개 유형(연구소기업, 첨단기술기업, 국가전략기술기업, 후보기업, 기타기업)으로 분류하여 각각의 등록, 조회, 수정, 삭제 기능을 개발한다. 기업 목록의 검색/필터/정렬 공통 인터페이스를 설계하고, 기업 분류별 현황 및 증감 추이를 시각화하는 통계 대시보드를 구현한다.
[문제 1] 5개 기업 분류별 화면의 중복 코드 문제 연구소기업, 첨단기술, 전략기술, 후보, 기타 5개 분류 화면이 각각 목록 조회, 검색, 필터, 정렬 기능을 포함하는데, 이를 개별적으로 구현하면 동일한 로직이 5번 반복되어 유지보수가 어려워지는 문제가 있었다. → 해결: 검색/필터/정렬/페이지네이션 로직을 공통 인터페이스로 추출하고, 각 분류 화면에서는 분류 고유의 데이터 필드와 표시 항목만 정의하는 설정 기반(Configuration-driven) 패턴을 적용했다. 이를 통해 공통 기능은 한 곳에서 관리하면서도 분류별 특성은 유지할 수 있었다.
[문제 2] 기업 분류 간 이동(승격/변경) 시 데이터 추적 문제 후보기업이 연구소기업으로 승격되거나, 첨단기술기업이 전략기술기업으로 재분류될 때 기존 이력이 사라지는 문제가 있었다. → 해결: 기업 데이터에 분류 변경 이력 필드를 추가하여, 언제 어떤 분류에서 어떤 분류로 변경되었는지 시계열로 추적 가능하도록 설계했다. 통계 대시보드에서도 순수 신규 등록과 분류 변경을 구분하여 집계하도록 했다.
KPI 기반 종합 대시보드 및 복합 데이터 시각화 시스템 개발
A-WORKS 플랫폼의 진입점인 메인 대시보드를 개발한다. 6개 핵심 KPI 지표 카드와 7종의 복합 차트를 통해 강소특구 전체 현황을 실시간으로 파악할 수 있는 종합 대시보드를 구현한다. 여러 모듈의 데이터를 하나의 화면에서 통합 조회하는 크로스 모듈 데이터 집계 체계를 연구한다.
Recharts 기반 복합 차트 7종 개발:
[문제 1] 서로 다른 7개 모듈의 데이터를 하나의 대시보드에 집계하는 문제 대시보드에서 이노테크(연구소기업, 기술이전), 예산, 보고서, 기업관리 등 서로 다른 Store에 분산된 데이터를 하나의 화면에서 실시간 조회해야 하는데, 모든 Store를 동시에 구독하면 어느 하나의 Store만 변경되어도 대시보드 전체가 다시 렌더링되어 차트가 깜빡이는 심각한 성능 문제가 발생했다. → 해결: Zustand의 선택자(Selector) 패턴을 적용하여, 각 KPI 카드와 차트가 자신에게 필요한 데이터만 구독하도록 세분화했다. 예를 들어 연구소기업 KPI 카드는 이노테크 Store의 연구소기업 건수만 구독하고, 예산 차트는 예산 Store의 집행률만 구독하여, 관련 없는 데이터 변경 시 불필요한 리렌더링을 방지했다.
[문제 2] 7종 차트의 동시 렌더링으로 인한 초기 로딩 지연 대시보드 진입 시 6개 KPI 카드 + 7개 차트 + 일정 카드 + 보고현황이 한꺼번에 렌더링되면서 초기 로딩이 2초 이상 걸려 사용자 체감 속도가 매우 느린 문제가 있었다. → 해결: Skeleton 로딩 UI를 적용하여 데이터 로딩 전에 레이아웃 골격을 먼저 표시하고, 차트 컴포넌트를 우선순위에 따라 순차적으로 렌더링하는 방식을 도입했다. KPI 카드(핵심 지표)를 최우선 렌더링하고, 하단 차트들은 뷰포트에 진입할 때 렌더링되도록 하여 체감 로딩 시간을 크게 단축했다.
전문가 DB 분류체계 설계 및 통합검색 시스템 개발
강소특구 기술자문, 평가, 멘토링 등에 참여하는 외부 전문가를 체계적으로 관리하기 위한 전문가 DB 시스템을 개발한다. 분야별/기관별/역량별 3축 분류체계를 설계하고, 다중 조건 조합 검색이 가능한 통합검색 기능을 구현한다.
[문제 1] 3축 분류의 조합 폭발 문제 전문분야(10종) x 기관유형(5종) x 역량등급(3종) = 150가지 조합이 가능한데, 사용자가 "IT 분야 + 대학 소속 + 자문위원" 같은 다중 조건 검색을 할 때, 단순 필터링으로는 조건이 늘어날수록 검색 응답이 느려지는 문제가 있었다. → 해결: 각 축을 독립적인 필터 레이어로 분리하고, 사용자가 조건을 선택할 때마다 해당 축의 필터만 갱신하는 점진적 필터링(Progressive Filtering) 방식을 적용했다. 또한 이전 필터 결과를 캐싱하여 조건 추가/제거 시 전체 데이터를 다시 검색하지 않도록 최적화했다.
[문제 2] 동적 라우팅 기반 전문가 상세 페이지에서 존재하지 않는 ID 접근 처리 URL에 임의의 전문가 ID를 입력하여 존재하지 않는 전문가 페이지에 접근할 경우, 빈 화면이 표시되거나 에러가 발생하는 문제가 있었다. → 해결: 동적 라우팅 페이지에서 ID 유효성 검증 로직을 추가하고, 존재하지 않는 ID일 경우 "전문가를 찾을 수 없습니다" 안내 화면과 함께 목록 페이지로의 돌아가기 링크를 표시하는 에러 바운더리 패턴을 적용했다.
이노테크 사업 다단계 파이프라인 관리 엔진 및 칸반보드 시스템 개발
이노테크 사업의 핵심인 연구소기업 설립(7단계), 기술이전(5단계), 첨단기술기업 발굴의 3대 영역을 통합 관리하는 시스템을 개발한다. 대규모 상태관리 엔진(2,399줄)을 설계하고, 각 영역을 칸반보드 형태로 시각화하여 진행 단계를 직관적으로 파악할 수 있도록 한다.
이노테크 상태관리 엔진 설계 및 개발:
[문제 1] 2,399줄 규모의 상태관리 엔진에서 데이터 정합성 보장 문제 연구소기업, 기술이전, 첨단기술 3개 영역의 데이터가 하나의 Store에서 관리되면서, 연구소기업의 단계가 변경되면 목표 달성현황, 활동기록, 칸반보드 위치가 동시에 갱신되어야 하는데, 일부만 갱신되거나 순서가 꼬여 데이터 불일치가 발생하는 문제가 있었다. → 해결: 상태 변경을 원자적 트랜잭션(Atomic Transaction) 패턴으로 설계하여, 단계 변경 시 관련 데이터(단계 이동, 목표현황 갱신, 활동기록 추가)를 하나의 액션 안에서 일괄 처리하도록 했다. 이를 통해 중간 상태가 노출되지 않고 항상 정합성이 보장되도록 했다.
[문제 2] 7단계 칸반보드의 가로 스크롤 및 모바일 대응 문제 연구소기업 칸반보드가 7개 컬럼을 가로로 배치하는데, 일반적인 모니터(1920px) 화면에서도 컬럼이 좁아져 기업 카드 정보가 잘리고, 모바일에서는 사실상 사용이 불가능한 문제가 있었다. → 해결: 데스크톱에서는 가로 스크롤이 가능한 칸반보드를 유지하되 각 컬럼에 최소 너비를 보장하고, 모바일에서는 칸반보드 대신 단계별 접힘/펼침 리스트 뷰로 자동 전환되는 반응형 레이아웃을 구현했다. 또한 각 단계의 건수를 뱃지로 표시하여 전체 현황을 한눈에 파악할 수 있도록 했다.
[문제 3] 활동 메모의 시계열 정렬 및 중복 작성 방지 여러 담당자가 동일 기업에 대해 활동 메모를 동시에 작성할 경우, 시간순 정렬이 꼬이거나 유사한 내용이 중복 등록되는 문제가 있었다. → 해결: 활동 메모에 밀리초 단위 타임스탬프를 부여하여 정확한 시간순 정렬을 보장하고, 동일 작성자가 5분 이내에 동일 기업에 대해 메모를 작성할 경우 기존 메모에 내용을 추가할지 새로 작성할지 선택하는 확인 다이얼로그를 표시하도록 했다.
이노테크 기관별(ITL/UAD) 세부관리 시스템 및 사업 포트폴리오 관리 기능 개발
이노테크 사업의 기관별(ITL, UAD) 세부 관리 기능과 전용 레이아웃 시스템을 개발한다. 사업 프로젝트의 등록/수정/삭제 기능 및 사업별 상세 화면을 구현하여 전체 사업 포트폴리오를 통합 관리할 수 있도록 한다.
[문제 1] 이노테크 전용 레이아웃과 전체 플랫폼 레이아웃의 충돌
이노테크 섹션에 진입하면 전용 사이드바로 전환되어야 하는데, 전체 플랫폼의 메인 사이드바와 이노테크 전용 사이드바가 동시에 렌더링되거나 전환 시 레이아웃이 깨지는 문제가 발생했다.
→ 해결: Next.js의 중첩 레이아웃 계층을 활용하여, 이노테크 경로(/business-management/innotech-2025/*) 진입 시 상위 레이아웃의 사이드바를 유지하면서 콘텐츠 영역 내부에 이노테크 전용 서브 사이드바를 추가하는 2중 사이드바 구조를 설계했다. 이를 통해 전체 플랫폼 네비게이션과 이노테크 내부 네비게이션이 독립적으로 동작하면서도 자연스러운 UX를 제공하도록 했다.
[문제 2] 동일 데이터를 기관별(ITL/UAD)로 분리 조회하는 필터링 성능 연구소기업, 기술이전 데이터가 하나의 Store에 통합 저장되어 있는데, ITL 화면에서는 ITL 담당 건만, UAD 화면에서는 UAD 담당 건만 필터링해야 한다. 데이터 양이 늘어날수록 매번 전체 배열을 순회하는 필터링 비용이 증가하는 문제가 있었다. → 해결: Store 내부에 기관별 인덱스(index) 구조를 추가하여, 데이터 변경 시 기관별 인덱스를 사전 계산하고, 기관별 조회 시에는 인덱스를 통해 즉시 결과를 반환하도록 했다. 이를 통해 데이터 양에 관계없이 기관별 조회 성능을 일정하게 유지할 수 있었다.
기관별(ITL/UAD) 주간/월간 보고서 자동화 시스템 개발
기관별(ITL, UAD) 주간/월간 보고서를 체계적으로 작성, 저장, 관리할 수 있는 시스템을 개발한다. 보고서 전용 레이아웃과 데이터 저장소를 설계하고, 이노테크 사업 데이터와 연동하여 보고서 콘텐츠를 반자동으로 생성하는 기능을 연구한다.
[문제 1] 보고서 작성 시점과 실제 데이터 시점의 불일치 문제 주간보고서를 금요일에 작성하는데, 작성 중에도 이노테크 사업 데이터가 계속 변경되어 보고서 시작 시점과 완료 시점의 수치가 달라지는 문제가 있었다. 제출된 보고서의 수치를 나중에 검증할 수도 없었다. → 해결: 보고서 작성 시작 시 해당 시점의 데이터를 스냅샷(Snapshot)으로 캡처하여 보고서와 함께 저장하는 방식을 도입했다. 보고서에 표시되는 수치는 스냅샷 데이터를 기반으로 하며, 제출 후에는 스냅샷이 변경 불가(Immutable)하여 추후 감사나 검증 시에도 동일한 수치를 확인할 수 있도록 했다.
[문제 2] ITL/UAD 두 기관의 보고서 양식이 유사하지만 세부 항목이 다른 문제 두 기관의 주간보고서 구조가 90% 동일하지만 나머지 10%(특화 지표, 기관 고유 활동)가 달라서, 완전 공통화하면 기관 특성을 반영할 수 없고, 완전 분리하면 중복 코드가 과다해지는 딜레마가 있었다. → 해결: 보고서 템플릿을 공통 섹션(실적 요약, 주요 활동, 이슈사항)과 기관별 확장 섹션으로 분리하는 합성(Composition) 패턴을 적용했다. 공통 섹션은 재사용하고, 기관별 확장 섹션만 ITL/UAD 각각 구현하여 코드 중복을 최소화하면서도 기관 고유 특성을 반영할 수 있도록 했다.
기술사업화 지원 모듈 개발 (IP검색, SMK AI 작성, 기술가치평가, 계약관리)
강소특구의 핵심 기능인 기술사업화를 지원하기 위한 IP 검색, SMK(기술소개서) AI 작성, 기술가치평가, 기술이전 계약관리 모듈을 개발한다. 특허 데이터 검색 인터페이스, AI 기반 문서 자동 생성, 정량적 기술가치 시뮬레이션 기능을 구현한다.
[문제 1] IP 검색에서 키워드 + IPC + 출원연도 복합 조건 검색의 UX 복잡성 특허 검색은 전문적인 영역이라 일반 사용자가 IPC 분류코드를 직접 입력하기 어렵고, 키워드/출원인/IPC/연도를 모두 조합하면 검색 인터페이스가 과도하게 복잡해져 사용성이 떨어지는 문제가 있었다. → 해결: 검색 인터페이스를 기본 검색(키워드만)과 상세 검색(전체 조건)으로 2단계로 분리하고, IPC 분류는 직접 입력 대신 트리 형태의 선택 UI를 제공하여 대분류 → 중분류 → 소분류 순으로 drill-down 선택할 수 있도록 했다. 최근 검색 이력도 저장하여 반복 검색의 편의성을 높였다.
[문제 2] SMK AI 자동 생성 결과의 품질 편차 문제 AI가 생성한 기술소개서가 입력된 기술 정보의 양에 따라 품질 편차가 크고, 특정 섹션(시장 분석)이 지나치게 일반적인 내용으로 채워지는 문제가 있었다. → 해결: 입력 단계를 구조화하여 필수 입력(기술명, 핵심 기술 내용, 적용 분야)과 선택 입력(시장 규모, 경쟁 기술, 특허 번호)으로 나누고, 입력 정보의 충실도에 따라 AI 프롬프트의 상세 수준을 자동 조정하는 적응형 프롬프트(Adaptive Prompt) 방식을 적용했다. 또한 생성 후 섹션별로 "재생성" 버튼을 제공하여 불만족스러운 섹션만 선택적으로 재생성할 수 있도록 했다.
[문제 3] 기술가치평가 파라미터의 주관성 완화 문제 기술성/시장성/사업성 평가 점수를 사용자가 직접 입력하면 주관적 편향이 개입되어 평가 결과의 신뢰성이 떨어지는 문제가 있었다. → 해결: 각 평가 축에 대해 정성적 질문(예: "해당 기술의 대체 기술이 존재하는가?" → 5점 척도 선택)을 제시하고, 답변 조합에 따라 정량 점수를 자동 산출하는 방식을 도입했다. 평가자의 직관적 판단을 구조화된 점수로 변환하여 객관성을 높였다.
복합 예산 데이터 모델 설계 및 인라인 편집 예산관리 시스템 개발
사업별 예산의 편성, 집행, 분석을 통합 관리하는 예산관리 시스템을 개발한다. 연차별 정부출연금, 컨소시엄 기관별 분담금, 직접비 9개 비목 등 복합 예산 데이터 모델을 설계하고, 셀 단위 인라인 편집이 가능한 스프레드시트형 예산 테이블 UI를 연구 개발한다.
[문제 1] 5계층 깊이의 예산 데이터 모델에서 합계 자동 계산 정합성 문제 직접비 9개 항목 → 연차별 소계 → 기관별 소계 → 사업별 합계 → 전체 합계로 이어지는 5계층 합산 구조에서, 하위 항목 수정 시 상위 합계가 즉시 반영되지 않거나 중간 계층의 합산이 누락되는 정합성 문제가 발생했다. → 해결: 하위 데이터 변경 시 해당 셀에서 최상위 합계까지 역방향으로 자동 재계산하는 버블업(Bubble-up) 합산 알고리즘을 구현했다. 각 계층의 합계를 별도 저장하지 않고 하위 항목으로부터 실시간 계산하는 파생 데이터(Derived Data) 패턴을 적용하여, 어떤 셀을 수정하든 항상 올바른 합계가 표시되도록 했다.
[문제 2] 인라인 편집 시 숫자 입력과 포맷팅의 충돌 셀에 "150,000,000"으로 표시된 숫자를 편집할 때, 콤마가 포함된 문자열을 그대로 편집하면 커서 위치가 꼬이고, 콤마를 제거하면 자릿수 파악이 어려운 문제가 있었다. → 해결: 편집 모드에서는 콤마를 제거한 순수 숫자만 표시하여 입력 편의성을 확보하고, 편집 완료(Enter 키 또는 포커스 아웃) 시 자동으로 천 단위 콤마를 적용하여 표시하는 2모드(편집/표시) 전환 방식을 구현했다. 또한 숫자가 아닌 문자 입력을 실시간으로 차단하는 입력 검증 로직을 추가했다.
문서관리, 역할 기반 접근제어, 실시간 알림 시스템 개발
A-WORKS 플랫폼의 운영 지원 모듈인 문서관리(계약서/제안서), 역할 기반 사용자 접근제어(관리자/매니저/일반), 우선순위 기반 실시간 알림 시스템을 개발한다.
[문제 1] 역할별 메뉴 접근 제어에서 URL 직접 입력 우회 문제 사이드바 메뉴에서 권한이 없는 항목을 숨기더라도, 사용자가 URL을 직접 입력하면 권한 없는 페이지에 접근할 수 있는 보안 취약점이 있었다. → 해결: UI 레벨의 메뉴 숨김과 별도로, 각 페이지의 레이아웃 계층에서 현재 사용자의 역할을 검증하는 2중 접근 제어를 구현했다. URL 직접 접근 시에도 권한 검증이 수행되며, 권한이 없을 경우 "접근 권한이 없습니다" 안내 화면으로 리다이렉트하도록 했다.
[문제 2] 알림이 여러 화면에서 동시에 표시되어야 하는 동기화 문제 알림 뱃지(상단 메뉴), 알림 목록 페이지, 대시보드 알림 카드 등 3곳에서 동일한 알림 데이터를 표시하는데, 알림 목록에서 "읽음 처리"를 하면 상단 뱃지의 미읽음 수도 즉시 감소해야 하는 동기화 문제가 있었다. → 해결: 알림 Store를 단일 진실 원천으로 두고, 3곳의 UI가 모두 같은 Store를 구독하도록 설계했다. 어느 화면에서든 읽음 처리를 하면 Store 상태가 변경되고, 이를 구독하는 모든 UI가 자동으로 갱신되는 반응형 데이터 흐름을 구현했다.
[문제 3] 우선순위별 알림 표시 순서와 시간순 정렬의 충돌 "높음" 우선순위 알림을 항상 상단에 표시하면 시간순이 깨지고, 시간순으로 정렬하면 중요한 알림이 하단에 묻히는 UX 문제가 있었다. → 해결: 기본 정렬은 "우선순위 내 시간순"(높음 그룹 → 보통 그룹 → 낮음 그룹, 각 그룹 내에서는 최신순)으로 하되, 사용자가 "시간순", "우선순위순" 정렬을 토글할 수 있는 정렬 옵션을 제공했다. 또한 "높음" 우선순위 알림은 뱃지 색상을 빨간색으로 차별화하여 시간순 정렬에서도 시각적으로 눈에 띄도록 했다.
A-WORKS 플랫폼 통합 테스트, 성능 최적화 및 연구개발 결과 종합
1월~11월간 개발된 A-WORKS 플랫폼 전체(78개 화면, 61개 컴포넌트, 7개 모듈)를 대상으로 통합 테스트를 수행하고, 성능 최적화 및 접근성 개선을 적용한다. 12개월간의 연구개발 결과를 종합 정리하여 최종 보고서를 작성한다.
[문제 1] 모듈 간 데이터 연동 테스트에서 발견된 순환 의존성 문제 이노테크 Store의 연구소기업 데이터가 대시보드에 표시되고, 보고서에서도 참조되는데, 보고서 Store가 이노테크 Store를 참조하고 이노테크 Store가 보고서 제출 상태를 확인하기 위해 보고서 Store를 다시 참조하는 순환 의존성이 발견되어, 특정 조건에서 무한 갱신 루프가 발생했다. → 해결: Store 간 직접 참조를 제거하고, 대시보드 페이지 레벨에서 필요한 Store들을 각각 독립적으로 구독한 후 페이지 내부에서 데이터를 조합하는 방식으로 의존성 방향을 단방향으로 정리했다. 이를 통해 Store 간 결합도를 낮추고 무한 루프 가능성을 근본적으로 제거했다.
[문제 2] 78개 화면 전수 테스트에서 반복되는 유사 결함 패턴 통합 테스트 과정에서 "로딩 중 화면 전환 시 이전 데이터가 잠깐 표시되는 현상"이 다수 화면에서 반복 발견되었다. 개별 수정으로는 근본 해결이 어려웠다. → 해결: 원인을 분석한 결과, 상태관리 Store의 이전 데이터가 새 페이지에서 초기화되기 전에 렌더링되는 패턴임을 확인했다. 페이지 진입 시 Skeleton 로딩 UI를 우선 표시하고, 데이터 로딩이 완료된 후에 실제 콘텐츠를 표시하는 공통 로딩 패턴을 수립하여 전체 화면에 일괄 적용했다. 이를 통해 15개 로딩 UI가 일관된 사용자 경험을 제공하도록 표준화했다.
[문제 3] 모바일 환경에서 대시보드 차트의 터치 인터랙션 문제 데스크톱에서 마우스 호버로 동작하는 차트 툴팁이 모바일 터치 환경에서는 작동하지 않고, 차트 영역 터치 시 페이지 스크롤과 차트 인터랙션이 충돌하는 문제가 있었다. → 해결: 모바일 환경에서는 차트 툴팁을 호버 대신 탭(터치)으로 활성화하도록 이벤트 핸들링을 분기하고, 차트 영역 내부에서의 가로 스와이프는 차트 인터랙션으로, 세로 스와이프는 페이지 스크롤로 처리하는 터치 방향 감지 로직을 구현했다.
| 구분 | 수량 |
|---|---|
| 개발 완료 화면 | 78개 |
| 개발 완료 컴포넌트 | 61개 |
| 상태관리 엔진 | 7개 |
| 주요 모듈 | 7개 (대시보드, 기업관리, 전문가관리, 사업관리, 기술사업화, 보고서, 운영관리) |
| 데이터 시각화 차트 | 7종 |
| 로딩 UI | 15종 |
| 기술적 난제 해결 | 24건 (월별 2~3건) |
각 월별 4번 항목을 "문제 해결방안"으로 구성하여, 실제 개발 과정에서 부딪힌 기술적 난제와 이를 해결한 방안을 구체적으로 서술했습니다. 이런 형태가 연구개발의 불확실성과 창의적 문제 해결을 잘 보여주어 세액공제 증빙에 훨씬 적합합니다.
알겠습니다! 강소특구/이노테크 제거하고, 연구내용은 실제 개발한 화면/기능 중심으로, 해결방안은 3~4줄 서술형으로 다시 작성합니다.
| 항목 | 내용 |
|---|---|
| 과제명 | A-WORKS : 기업지원 통합관리 플랫폼 연구개발 |
| 연구기간 | 2025.01.01 ~ 2025.12.31 (12개월) |
| 수행기관 | 아이피나우 |
| 세액공제 근거 | 조세특례제한법 제10조 (연구개발비 세액공제) |
기업지원 업무 프로세스 분석 및 A-WORKS 시스템 아키텍처 설계
기업지원센터의 실제 업무 프로세스를 분석하고, A-WORKS 플랫폼의 전체 시스템 아키텍처를 설계한다. 기업 분류체계의 기준을 정의하고, Next.js App Router 기반 중첩 라우팅 구조 및 데이터 모델을 설계한다.
현업에서 기업관리, 전문가DB, 사업관리, 보고서, 예산이 각각 별도 엑셀로 관리되어 동일 데이터가 중복 존재하고 정합성이 보장되지 않는 문제가 있었다. 이를 해결하기 위해 기업 ID를 중심으로 사업관리, 보고서, 예산이 참조 관계로 연결되는 단일 데이터 모델 계층 구조를 설계하였다. 또한 7개 모듈이 독립적으로 동작하면서도 대시보드에서 통합 조회가 가능하도록, Next.js의 중첩 레이아웃 구조를 활용하여 모듈별 독립성과 데이터 통합성을 동시에 확보하는 아키텍처를 수립하였다.
적응형 네비게이션 시스템 및 공통 UI 인프라 개발
A-WORKS 플랫폼의 근간이 되는 공통 인프라를 구축한다. URL 기반 카테고리 자동 감지 알고리즘을 연구하여, 사이드바와 상단 메뉴가 현재 페이지에 따라 동적으로 전환되는 적응형 네비게이션 시스템을 개발한다.
사용자가 카테고리를 전환할 때 URL 변경과 사이드바/상단 메뉴 UI 전환 사이 타이밍 불일치로 메뉴가 깜빡이거나 잘못된 카테고리가 표시되는 문제가 발생하였다. URL pathname을 단일 진실 원천으로 활용하여 첫 번째 세그먼트를 파싱해 카테고리를 결정하고, 사이드바/상단 메뉴/빵가루를 동기적으로 렌더링하는 방식으로 해결하였다. 또한 사이드바가 최대 3단계 깊이의 메뉴를 가지면서 전체 메뉴를 한 번에 렌더링하면 카테고리 전환 시 UI가 버벅이는 문제가 있어, 현재 카테고리에 해당하는 메뉴만 선택적으로 렌더링하는 조건부 렌더링 패턴을 적용하여 성능을 개선하였다.
기업 5개 유형 분류 관리 시스템 개발
입주기업을 5개 유형으로 분류하여 각각의 등록, 조회, 수정, 삭제 기능을 개발한다. 기업 목록의 검색/필터/정렬 공통 인터페이스를 설계하고, 통계 대시보드를 구현한다.
5개 분류 화면이 각각 목록 조회, 검색, 필터, 정렬 기능을 포함하는데, 이를 개별적으로 구현하면 동일한 로직이 5번 반복되어 유지보수가 어려워지는 문제가 있었다. 검색/필터/정렬/페이지네이션 로직을 공통 인터페이스로 추출하고, 각 분류 화면에서는 분류 고유의 데이터 필드와 표시 항목만 정의하는 설정 기반 패턴을 적용하여 해결하였다. 또한 후보기업이 연구소기업으로 승격될 때 기존 이력이 사라지는 문제가 있어, 분류 변경 이력 필드를 추가하여 시계열로 추적 가능하도록 설계하였다.
KPI 기반 종합 대시보드 및 복합 데이터 시각화 시스템 개발
A-WORKS 플랫폼의 진입점인 메인 대시보드를 개발한다. 6개 핵심 KPI 카드와 7종의 복합 차트를 통해 전체 현황을 실시간 파악할 수 있는 종합 대시보드를 구현한다.
대시보드에서 여러 모듈의 Store를 동시에 구독할 때, 어느 하나의 Store만 변경되어도 대시보드 전체가 리렌더링되어 차트가 깜빡이는 성능 문제가 발생하였다. Zustand의 선택자 패턴을 적용하여 각 KPI 카드와 차트가 자신에게 필요한 데이터만 구독하도록 세분화하여 불필요한 리렌더링을 방지하였다. 또한 6개 KPI 카드와 7개 차트가 한꺼번에 렌더링되면서 초기 로딩이 느린 문제가 있어, Skeleton UI를 먼저 표시하고 KPI 카드를 최우선 렌더링한 후 하단 차트를 순차 렌더링하는 방식을 도입하여 체감 속도를 개선하였다.
전문가 DB 분류체계 설계 및 통합검색 시스템 개발
기술자문, 평가, 멘토링 등에 참여하는 외부 전문가를 체계적으로 관리하기 위한 전문가 DB 시스템을 개발한다. 3축 분류체계를 설계하고, 다중 조건 통합검색 기능을 구현한다.
전문분야(10종) x 기관유형(5종) x 역량등급(3종)의 다중 조건 검색 시 조건이 늘어날수록 검색 응답이 느려지는 문제가 있었다. 각 축을 독립 필터 레이어로 분리하고 사용자가 조건을 선택할 때마다 해당 축의 필터만 갱신하는 점진적 필터링 방식을 적용하였으며, 이전 필터 결과를 캐싱하여 조건 추가/제거 시 전체를 재검색하지 않도록 최적화하였다. 또한 동적 라우팅에서 존재하지 않는 전문가 ID 접근 시 빈 화면이 표시되는 문제가 있어, ID 유효성 검증 로직과 안내 화면을 추가하였다.
사업관리 다단계 파이프라인 엔진 및 칸반보드 시스템 개발
사업의 핵심 영역인 연구소기업 설립(7단계), 기술이전(5단계), 첨단기술기업 발굴의 3대 영역을 통합 관리하는 시스템을 개발한다. 대규모 상태관리 엔진을 설계하고, 칸반보드 형태로 시각화한다.
연구소기업, 기술이전, 첨단기술 3개 영역의 데이터가 하나의 Store에서 관리되면서, 단계 변경 시 목표 달성현황, 활동기록, 칸반보드 위치가 동시에 갱신되어야 하는데 일부만 갱신되어 데이터 불일치가 발생하는 문제가 있었다. 단계 변경 관련 데이터를 하나의 액션 안에서 일괄 처리하는 원자적 트랜잭션 패턴을 적용하여 정합성을 보장하였다. 또한 7단계 칸반보드가 일반 모니터에서도 컬럼이 좁아져 카드 정보가 잘리는 문제가 있어, 데스크톱에서는 가로 스크롤 칸반보드를, 모바일에서는 단계별 접힘/펼침 리스트 뷰로 자동 전환되는 반응형 레이아웃을 구현하였다.
기관별 세부관리 시스템 및 사업 포트폴리오 관리 기능 개발
기관별(ITL, UAD) 세부 관리 기능과 전용 레이아웃 시스템을 개발한다. 사업 프로젝트의 등록/수정/삭제 기능 및 사업별 상세 화면을 구현하여 전체 사업 포트폴리오를 통합 관리한다.
사업관리 전용 사이드바와 전체 플랫폼 메인 사이드바가 동시에 렌더링되거나 전환 시 레이아웃이 깨지는 문제가 발생하였다. Next.js 중첩 레이아웃을 활용하여 상위 레이아웃의 메인 사이드바를 유지하면서 콘텐츠 영역 내부에 전용 서브 사이드바를 추가하는 2중 사이드바 구조를 설계하여 해결하였다. 또한 동일 데이터를 기관별로 분리 조회할 때 매번 전체 배열을 순회하는 필터링 비용 문제가 있어, Store 내부에 기관별 인덱스 구조를 추가하여 데이터 변경 시 사전 계산하고 조회 시에는 인덱스를 통해 즉시 결과를 반환하도록 최적화하였다.
기관별 주간/월간 보고서 관리 시스템 개발
기관별(ITL, UAD) 주간/월간 보고서를 체계적으로 작성, 저장, 관리할 수 있는 시스템을 개발한다. 보고서 전용 레이아웃을 설계하고, 사업 데이터와 연동하여 보고서 콘텐츠를 반자동으로 생성하는 기능을 연구한다.
주간보고서 작성 중에도 사업 데이터가 계속 변경되어 보고서 시작 시점과 완료 시점의 수치가 달라지는 문제가 있었다. 보고서 작성 시작 시 해당 시점의 데이터를 스냅샷으로 캡처하여 함께 저장하고, 제출 후에는 스냅샷을 변경 불가하도록 하여 추후 검증 시에도 동일 수치를 확인할 수 있도록 하였다. 또한 두 기관의 보고서 구조가 90% 동일하지만 나머지 10%가 달라 완전 공통화와 완전 분리 사이 딜레마가 있어, 공통 섹션과 기관별 확장 섹션을 분리하는 합성 패턴을 적용하여 코드 중복을 최소화하면서 기관 특성을 반영하였다.
기술사업화 지원 모듈 개발 (IP검색, SMK AI 작성, 기술가치평가, 계약관리)
기술사업화를 지원하기 위한 IP 검색, SMK(기술소개서) AI 작성, 기술가치평가, 기술이전 계약관리 모듈을 개발한다. 특허 검색 인터페이스, AI 문서 자동 생성, 정량적 기술가치 시뮬레이션 기능을 구현한다.
IP 검색에서 키워드/출원인/IPC/연도를 모두 조합하면 인터페이스가 과도하게 복잡해지고, 특히 IPC 분류코드를 일반 사용자가 직접 입력하기 어려운 문제가 있었다. 검색을 기본 검색(키워드)과 상세 검색(전체 조건) 2단계로 분리하고, IPC는 트리 형태 선택 UI로 대분류→중분류→소분류 drill-down 방식을 적용하였다. 또한 기술가치평가에서 사용자가 직접 점수를 입력하면 주관적 편향이 개입되는 문제가 있어, 정성적 질문을 제시하고 답변 조합에 따라 정량 점수를 자동 산출하는 방식을 도입하여 객관성을 높였다.
복합 예산 데이터 모델 설계 및 인라인 편집 예산관리 시스템 개발
사업별 예산의 편성, 집행, 분석을 통합 관리하는 예산관리 시스템을 개발한다. 연차별 정부출연금, 기관별 분담금, 직접비 9개 비목 등 복합 데이터 모델을 설계하고, 셀 단위 인라인 편집이 가능한 스프레드시트형 예산 테이블 UI를 개발한다.
직접비 9개 항목 → 연차별 소계 → 기관별 소계 → 사업별 합계 → 전체 합계로 이어지는 5계층 합산 구조에서, 하위 항목 수정 시 상위 합계가 즉시 반영되지 않는 정합성 문제가 발생하였다. 하위 항목으로부터 실시간으로 합계를 계산하는 파생 데이터 패턴을 적용하여, 어떤 셀을 수정하든 최상위까지 자동 재계산되도록 하였다. 또한 인라인 편집 시 콤마가 포함된 숫자를 편집하면 커서 위치가 꼬이는 문제가 있어, 편집 모드에서는 순수 숫자만 표시하고 편집 완료 시 자동으로 천 단위 콤마를 적용하는 2모드 전환 방식을 구현하였다.
문서관리, 역할 기반 접근제어, 실시간 알림 시스템 개발
A-WORKS 플랫폼의 운영 지원 모듈인 문서관리, 역할 기반 사용자 접근제어, 우선순위 기반 실시간 알림 시스템을 개발한다.
사이드바에서 권한 없는 메뉴를 숨기더라도 URL 직접 입력으로 접근할 수 있는 보안 취약점이 있었다. UI 메뉴 숨김과 별도로 각 페이지 레이아웃에서 사용자 역할을 검증하는 2중 접근 제어를 구현하여 해결하였다. 또한 알림이 상단 뱃지, 알림 목록, 대시보드 카드 3곳에서 동시에 표시되는데, 한 곳에서 읽음 처리 시 나머지가 즉시 갱신되지 않는 문제가 있어, 알림 Store를 단일 진실 원천으로 두고 3곳의 UI가 모두 같은 Store를 구독하여 자동 동기화되는 반응형 데이터 흐름을 구현하였다.
A-WORKS 플랫폼 통합 테스트, 성능 최적화 및 연구개발 결과 종합
1월~11월간 개발된 A-WORKS 플랫폼 전체(78개 화면, 61개 컴포넌트, 7개 모듈)를 대상으로 통합 테스트를 수행하고, 성능 최적화 및 접근성 개선을 적용한다. 12개월간의 연구개발 결과를 종합하여 최종 보고서를 작성한다.
통합 테스트에서 사업관리 Store와 보고서 Store가 서로를 참조하는 순환 의존성이 발견되어 특정 조건에서 무한 갱신 루프가 발생하였다. Store 간 직접 참조를 제거하고 대시보드 페이지 레벨에서 각 Store를 독립 구독한 후 페이지 내부에서 데이터를 조합하는 방식으로 의존성 방향을 단방향으로 정리하였다. 또한 "로딩 중 화면 전환 시 이전 데이터가 잠깐 표시되는 현상"이 다수 화면에서 반복 발견되어, 페이지 진입 시 Skeleton UI를 우선 표시하고 데이터 로딩 완료 후 실제 콘텐츠를 표시하는 공통 로딩 패턴을 수립하여 전체 화면에 일괄 적용하였다.
| 구분 | 수량 |
|---|---|
| 개발 완료 화면 | 78개 |
| 개발 완료 컴포넌트 | 61개 |
| 상태관리 엔진 | 7개 |
| 주요 모듈 | 7개 (대시보드, 기업관리, 전문가관리, 사업관리, 기술사업화, 보고서, 운영관리) |
| 데이터 시각화 차트 | 7종 |
| 기술적 난제 해결 | 24건 |
강소특구/이노테크 명칭을 제거하고, 연구내용은 "화면을 개발하였다" 형태로 실제 개발한 화면과 기능을 서술하였으며, 문제 해결방안은 34줄 서술형으로 간결하게 정리했습니다.