PROGRESS REPORT

과업 수행 보고서

평생교육 정보 접근 격차 시각화 플랫폼

2026년 3월 과업 수행 내역

평생교육 정보 접근 격차 시각화 플랫폼

상관분석 및 디자인 개선 보고서

(주)옥소폴리틱스 · tobl.ai

1. 과업 개요 및 성과 요약

1.1 3월 과업 목표

2월에 구현한 Choropleth 지도 대시보드와 지역 비교 기능을 기반으로, 시군구 수준의 지역 특성 변수(범죄율, 1인당 GRDP, 공시지가, 대졸이상 비율, 생활만족도)와 정보접근 지표 간의 상관성 분석 기능을 구현하였습니다. 또한 모바일 반응형 레이아웃을 전면 적용하여 다양한 디바이스에서의 접근성을 확보하였습니다.

1.2 주요 구현 성과

  • 상관분석 페이지: 정보접근 5개 지표와 지역 특성 5개 변수 간 산점도, 상관계수 매트릭스, 복수 지역 프로파일 비교 기능
  • 지역 특성 데이터 통합: 229개 시군구의 범죄율·GRDP·공시지가·대졸비율·생활만족도 데이터를 플랫폼에 적재
  • 모바일 반응형 레이아웃: shadcn/ui 도입, 사이드바 접이식 전환, 통계 패널 접기/펼치기, 범례 토글 등 전면 모바일 최적화
  • 지도 상세 패널 확장: 지도에서 지역 클릭 시 정보접근 지표와 지역 특성 변수(범죄율·GRDP·공시가·대졸비율·만족도)를 함께 표시
  • 복수 지역 비교: 최대 5개 지역을 선택하여 선택 지역 프로파일 테이블 및 레이더 차트로 비교
  • 크로스 인터랙션: 상관계수 매트릭스 셀 클릭 시 산점도가 해당 변수 조합으로 즉시 전환

1.3 지도 상세 패널 확장

지도에서 시군구 클릭 시, 기존 정보접근 지표 5개와 함께 지역 특성 변수 5개를 한 패널에서 확인할 수 있습니다.

지도 페이지 지역 클릭 시 정보접근 지표와 지역 특성 변수가 함께 표시되는 상세 패널
그림 3. 지도에서 시군구 클릭 시 정보접근 지표 + 지역 특성 변수를 함께 표시하는 상세 패널

2. 상관분석 기능 구현

2.1 상관분석 페이지 구성

정보접근 지표와 지역 특성 변수 간의 상관성을 탐색할 수 있는 전용 페이지(/correlation)를 구현하였습니다. 사용자가 X축(지역 변수)과 Y축(정보접근 지표)을 자유롭게 선택하여 산점도를 확인하고, 전체 상관계수 매트릭스를 통해 변수 간 관계를 한눈에 파악할 수 있습니다.

컴포넌트기능
ScatterPlotRecharts ScatterChart 기반 산점도. 정보접근 지표(Y축)와 지역 특성 변수(X축) 선택 가능. 피어슨 상관계수(r) 실시간 표시.
CorrelationMatrix5×5 상관계수 매트릭스. 양의 상관(빨강)·음의 상관(파랑) 색상 코딩, 유의수준(*, **, ***) 표시. 셀 클릭 시 산점도가 해당 변수 조합으로 즉시 전환.
VariableSelector정보접근 지표 5개, 지역 특성 변수 5개를 버튼 토글로 선택하여 산점도 축을 동적 전환.
RegionSearchBox시도별 그룹핑된 드롭다운으로 지역 선택. 검색과 산점도 클릭을 병행하여 최대 5개 지역 선택.

2.2 상관분석 페이지 화면

상관분석 페이지 전체 화면 - 산점도, 상관계수 매트릭스, 지역 선택기
그림 1. 상관분석 페이지: 산점도(좌)와 상관계수 매트릭스·지역 선택기(우)

2.3 통계 분석 방법

피어슨 상관계수(Pearson's r)를 사용하여 두 연속 변수 간의 선형 상관관계를 측정합니다. t-검정을 통해 유의수준을 판별하며, 229개 시군구 데이터를 기반으로 산출합니다.

유의수준기준표기
p < 0.05t > 1.960*
p < 0.01t > 2.576**
p < 0.001t > 3.291***

3. 지역 특성 데이터 적재

3.1 지역 특성 변수 정의

229개 시군구의 사회경제적 특성을 반영하는 5개 변수를 수집하여 플랫폼에 적재하였습니다. 각 변수는 정보접근 수준과의 상관관계 분석에 활용됩니다.

변수명단위기준연도설명
총범죄율건/10만명2024인구 10만명당 총 범죄 발생 건수
1인당 GRDP백만원2022시군구별 1인당 지역내총생산
공동주택 공시지가원/㎡2025공동주택 면적당 공시가격
대졸이상 비율%2025전체 인구 대비 대졸 이상 학력 비율
생활만족도점 (1-10)2024지역의 전반적인 생활에 대한 만족도

3.2 데이터 연계 방식

지역 특성 데이터는 sigungu-regional.json으로 적재되며, 기존 정보접근 지표 데이터(sigungu-indicators.json)와 시도|시군구 복합 키를 통해 결합됩니다. 229개 시군구 중 매칭되는 전체 레코드를 대상으로 상관분석을 수행합니다.

4. 복수 지역 프로파일 비교

4.1 복수 지역 프로파일 비교

최대 5개 시군구를 동시에 선택하여 정보접근 지표와 지역 특성 변수를 종합적으로 비교할 수 있습니다. 산점도 클릭과 검색 기반 추가를 병행하여 직관적인 지역 선택이 가능합니다.

기능설명
산점도 클릭 선택산점도의 점을 클릭하여 해당 시군구를 선택/해제. 선택된 지역은 빨간색으로 하이라이트.
검색 기반 추가시군구명 검색으로 지역을 추가. 순위 정보 함께 표시.
프로파일 테이블선택된 지역들의 정보접근 지표 5개 + 지역 특성 변수 5개를 나란히 비교하는 상세 테이블.
프로파일 레이더지역 특성 변수와 IA Index를 퍼센타일 기준으로 정규화하여 오버레이 레이더 차트로 비교.
다중 색상 코딩최대 5개 지역을 구분 색상(KNU RED, 블루, 그린, 오렌지, 퍼플)으로 식별.

4.2 복수 지역 비교 화면

선택 지역 프로파일 테이블과 레이더 차트
그림 2. 지역 선택 시 프로파일 테이블(좌)과 퍼센타일 레이더 차트(우)

4.3 퍼센타일 정규화

레이더 차트에서 스케일이 크게 다른 변수들(예: 공시지가 vs 생활만족도)을 동일한 축으로 비교하기 위해, 전체 229개 시군구 데이터에서 각 변수별 퍼센타일 순위를 계산하여 0–100 범위로 정규화합니다. 이를 통해 절대값이 아닌 상대적 위치를 기준으로 지역 간 프로파일을 비교할 수 있습니다.

5. 모바일 반응형 최적화

5.1 모바일 반응형 개선 사항

shadcn/ui를 도입하고 Tailwind CSS의 반응형 유틸리티를 활용하여 모든 페이지에 모바일 반응형 레이아웃을 적용하였습니다. 주요 브레이크포인트는 sm(640px), md(768px), lg(1024px)입니다.

영역이전개선
사이드바항상 표시 (데스크톱 전용)햄버거 메뉴로 접이식 전환, 오버레이 방식
통계 패널하단 고정, 높이 고정접기/펼치기 토글, 컴팩트 헤더 모드
범례항상 표시정보 버튼으로 토글, 모바일에서 가로 배치
지역 검색고정 너비반응형 너비, 터치 친화적 버튼 크기
비교 페이지2열 고정 레이아웃1열/2열 반응형 전환
상관분석 페이지3열 → 1열 반응형, 변수 버튼 wrap 처리

5.2 도입 라이브러리

패키지용도
@radix-ui/react-*shadcn/ui 기반 컴포넌트 프리미티브 (Sheet, Collapsible 등)
class-variance-authorityTailwind 클래스 변형 관리
clsx / tailwind-merge조건부 클래스명 조합 유틸리티

6. 파일 구조

6.1 신규·수정 파일 목록

3월 과업에서 신규 생성 및 주요 수정된 파일 목록입니다. 상관분석 기능 13개 파일과 모바일 반응형 관련 다수 파일이 추가·수정되었습니다.

파일 경로설명
src/app/correlation/page.tsx상관분석 메인 페이지 (변수 선택, 산점도, 매트릭스, 프로파일)
src/components/correlation/ScatterPlot.tsx산점도 차트 (Recharts ScatterChart, 지역 클릭 선택)
src/components/correlation/CorrelationMatrix.tsx5×5 상관계수 매트릭스 (색상 코딩, 유의수준)
src/components/correlation/VariableSelector.tsxX축/Y축 변수 선택 버튼 그룹
src/components/correlation/RegionSearchBox.tsx시군구 검색 기반 지역 추가 컴포넌트
src/components/correlation/RegionProfilePanel.tsx선택 지역 프로파일 비교 테이블
src/components/correlation/ProfileRadar.tsx지역 프로파일 레이더 차트 (퍼센타일)
src/hooks/useRegionalData.ts지역 특성 데이터 로드 훅 (캐시 포함)
src/utils/correlation.ts피어슨 상관계수, 유의성 검정 유틸리티
src/types/index.tsRegionalData, RegionalVarKey 타입 추가
src/utils/colorScale.ts지역 변수 라벨, 단위, 포맷 함수 추가
public/data/2024/sigungu-regional.json229개 시군구 지역 특성 데이터 (5개 변수)
src/components/layout/Header.tsx네비게이션에 상관분석 메뉴 추가