1. 정적 대시보드, 만들줄 알아야 하는 이유
2025년 12월 4일
Next.js를 사용해서 주어진 데이트를 활용해 정적 인터랙티브 대시보드를 만들고자 합니다.
저는 취업이 하고 싶습니다. 작업을 할 때, 각자 역할의 전문가들이 모여 팀을 이루고, 그 팀끼리 회의를 진행하고 저는 제 역할인 프론트 개발에 집중하고 소통하며 혼자서는 만들지 못하는 멋있는 작품을 만드는게 좋습니다.
팀원들, 동료들과 함께 한 프로젝트에 큰 애정을 쏟으며 열렬히 논의를 하고, 하나의 목표를 향해 각자의 자리에서 최선을 다하는 그런 조직.. 너무 멋있지 않습니까. (누군가는 회사생활 하면서 사람한테 치이는게 제일 힘들다는거를 깨달아봐야 정신차린다고 저한테 말하지만.. 전 짧은 인턴 생활과 현장실습때 다같이 으쌰으쌰하고 서로에게 도움이 되어주는.. 그게 너무 좋았습니다. 그래서 스포츠도 좋아하는듯.. 가슴이 웅장해지고 뜨거워지는 그런거..)
어쨌든 그래서 자주 고민합니다. 회사 입장에서 저 따위를 뽑는 것도 쉽지 않겠지만, 만약 뽑으면 뭘 시킬까
정적페이지. 대시보드. 백오피스. 이런 내용들이 가장 먼저 생각납니다.
정말 마음에 안들지만 어쨌든 이 쌩주니어개발자를 뽑아놨는데 뭐라도 시켜야 하는데 당장 프로젝트에 투입시키면 어떤 난리를 칠지 모르지 않습니까 사실. 뭐 브랜치 파서 일단 짜게 시키고, 마음에 들때까지 다시하고 pr보내라고 할 수 있겠지만.. 시니어분들이 주니어 코드리뷰를 그렇게 까지 하기에는 다른 할 일이 산더미시지 않을까요. 그리고 주니어가 정신나간 사람이면 ai한테 터미널도 조작시키게 해서 ai가 맘대로 force 같은걸 할 수도 있고.. 요즘 뭐 env 파일도 ai가 읽게 하는 사람들도 심심치않게 보이는것 같고..
저라면 메인 프로젝트에 바로 투입시키지 않고 이벤트 페이지, 정적 페이지, 혹은 대시보드(화면에 그래프 그리고, 어디에 보고하거나 회사 내에서 사용될 사이트) 같은 걸 시키지 않을까 생각합니다.
말이 길었지만, 그래서 저는 데이터 파일이 주어졌을 때, 이를 정리하고 시각화 할 수 있는 능력을 키우고자 이번 프로젝트를 시작합니다.
프로젝트 목표
Next.js를 사용해서 정적 홈페이지를 작성하는 것을 연습합니다.
데이터를 활용해서 인터랙티브한 대시보드를 구축해서 간단한 아이디어를 손쉽게 사람들에게 선보일 수 있는 능력을 향상 시키는 것이 목표입니다.
이를 위해서 다음과 같은 기능을 구현해야 합니다.
1.최소한 4개의 페이지(3개의 URL)를 가져야 합니다.
- index, about, dashboard, detail
2.데이터는 검색되어야 합니다.
- 검색 결과를 클릭하면 세부사항을 확인할 수 있어야(detail 페이지를 재활용하여 구현) 합니다.
3.Dashboard는 차트를 사용합니다.
4.배포해야 합니다.
프로젝트 기획
데이터는 공공데이터센터에서 경찰청 범죄 발생 시간대 및 요일 csv파일을 다운로드 받았습니다.
범죄 카테고리 별 시간대별 발생 건수, 요일별 발생 건수 정보가 포함되어 있습니다.
1. 프로젝트 개요
프로젝트명 : Crime Insight 2019
목표 : 범죄 발생의 시간적, 요일별 패턴을 분석하고, 사용자가 특정 범죄 유형을 검색하여 상세 통계를 확인할 수 있는 정적 웹사이트 구축
기술 스택: Next.js(App Router), Tailwind CSS, Recharts, TypeScript
2. 사이트맵
3. 상세 기획 및 데이터 구조화
① Home (/)
Hero Section: "언제, 어디서 범죄가 가장 많이 발생할까?" 문구와
Key Metric: 총 데이터 건수(예: "총 1,500,000건의 데이터 분석")를 큰 숫자로 표시.
Navigation: '대시보드' 버튼.
② About (/about)
Info: 공공데이터포털 경찰청 데이터셋에 대한 설명.
Tech Stack: Next.js, Tailwind CSS 아이콘 배치.
Developer: 프로필 링크.
③ Dashboard (/dashboard) - 핵심 페이지
검색창 (Search Bar): "범죄 유형을 검색하세요 (예: 사기, 절도)"
기능: 입력 시 실시간으로 리스트 필터링.
종합 차트 (Aggregate Charts):
요일별 발생 현황 (Bar Chart): 월~일요일 중 언제 범죄가 가장 많은지?
시간대별 발생 현황 (Area Chart or Line Chart): 하루 중 범죄 발생 피크 타임은?
범죄 대분류 비중 (Pie Chart): 지능범죄 vs 강력범죄 등 비율.
범죄 목록 리스트: 검색 결과에 따른 리스트 출력 (클릭 시 Detail 페이지로 이동).
④ Detail (/detail/[category_middle])
예: 사용자가 '절도'를 클릭했을 때
Header: "절도" 범죄 분석 보고서.
Specific Charts: 전체 평균과 비교한 해당 범죄의 특징.
(예: 전체 범죄는 밤에 많은데, '절도'는 낮에 많은가?)
Table: 구체적인 수치 데이터 테이블 표시.
위와 같이 기획을 마쳤고, 이제 구현을 시작하고자 합니다.