웹 프로그래밍

프로젝트 - 인터랙티브 대시보드 구축

nextjs
Published

December 8, 2025

Abstract

이 프로젝트는 Next.js를 사용하여 인터랙티브 대시보드를 구축하는 프로젝트에 관한 조건와 예시를 제시합니다.

Next.js를 사용해서 제출하게 될 개인 프로젝트에 관한 내용 입니다. 공개 데이터(JSON, DB) 등을 사용해서 인터렉션한 Dashboard를 작성하는 과제를 제출하려고 합니다. 데이터는 무엇이든 상관없습니다. 게임 관련 리뷰 모음도 좋고, 어떤 것이든 좋습니다. 단, 공개 가능한 데이터여야 합니다.

프로젝트 목표

Next.js를 사용해서 정적 홈페이지를 작성하는 것을 연습하는 것이 주요 목표입니다. 데이터를 활용해서 인터랙티브한 대시보드를 구축해서 간단한 아이디어를 손쉽게 사람들에게 선보일 수 있는 능력을 향상 시키는 것이 목표입니다. 이를 위해서 다음과 같은 기능을 구현해야 합니다.

  1. 최소한 4개의 페이지(3개의 URL)를 가져야 합니다.
    • index, about, dashboard, detail
  2. 데이터는 검색되어야 합니다(검색 기능은 선택 사항이 아님).
    • 검색 결과를 클릭하면 세부사항을 확인할 수 있어야(detail 페이지를 재활용하여 구현) 함
  3. Dashboard는 차트를 사용하지 않고, 일반 텍스트를 사용해서 데이터를 표현해도 됩니다.
    • 차트를 사용하면 가산점을 부여
    • 단, 데이터에 있는 내용을 기반으로 수치 자료 및 집계 항목이 제시되어야 함
  4. Github Pages 또는 Vercel을 통해 배포해야 합니다.
    • “Hello, World”가 출력되더라도 배포는 되어야 함
    • 별도의 서버가 있으면, 해당 서버에서 배포하셔도 됨

Next.js Learn 프로젝트를 참고하여 진행하셔도 되고, Figma Maker, Google의 stitch 등의 디자인 도구 등을 활용하셔도 됩니다. 단, 데이터를 선택하고 작은 인사이트를 제시하여 간단한 대시보드를 구축하여 사용자에게 배포를 완료하는 과정을 진행해야 합니다. 학습의 주요 목표는 대시보드가 아니라 “과정”을 통해서 웹 개발 능력을 향상 시키는 것 입니다.

프로젝트 제한 조건

프로젝트의 제한 조건은 아래와 같습니다.

  1. Next.js를 사용해서 웹 개발을 진행해야 합니다.
  2. App Router를 사용해서 반드시 컴포넌트로 구성된 UI로 설계되어야 합니다.
  3. UI 디자인 및 CSS는 Tailwind CSS를 사용해야 합니다.
    1. Tailwind CSS를 사용하지 않으면 0점 처리됩니다.
    2. 화려한 디자인 보다는 가시적으로 깔끔한 디자인을 선택하세요.
  4. Figma Maker, Google의 stitch 등의 디자인 도구를 사용할 수 있습니다.
    1. 디자인 도구를 최대한 활용하세요.
    2. 디자인 도구에서 제공하는 CSS와 컨포넌트를 최대한 활용하세요.

프로젝트 진행 계획(예시)

아래는 제시된 예제는 4주간의 진행할 것을 전제로 한 계획입니다. GitHub 등에 티켓을 생성하고 과제를 스스로 관리할 수 있도록 구성하였습니다. 각 단계별로 진행 상황을 관리한다고 가정하였고, 각 단계별로 필요한 ’작업’을 중심으로 제시합니다. 각 단계별로 필요한 ’작업’을 중심으로 제시합니다.

P.S 해당 과제의 “계획”은 예시일 뿐이며, 자신만의 방법이 있다면 해당 방법론을 적극적으로 활용하세요.

1단계: 기획 및 디자인, 프로젝트 설정

프로젝트의 목표와 설계 그리고, Next.js 개발 환경을 구축합니다. 디자인 도구를 사용하여 모든 페이지의 UI를 확정합니다.

  1. [기획] 주제 선정 및 데이터 수집
    • 대시보드에서 다룰 주제를 정합니다(서울시 공공 자전거 ‘따릉이’ 이용 현황, 영화진흥위원회 박스오피스 데이터 등).
    • 사용할 공개 데이터(JSON, CSV 또는 공공 API)를 확정하고 수집하세요.
    • 데이터를 함께 제출해야 하기 때문에, 가능하면 데이터를 30MB 미만으로 한정하세요.
  2. [디자인] Figma/Stitch를 사용한 UI/UX 설계
    • 필수 4페이지(Home, About, Dashboard, Detail)의 와이어프레임 및 최종 디자인 목업(mockup)을 완성합니다.
    • 모바일/데스크톱 반응형 디자인을 고려합니다.
  3. [디자인] 컴포넌트 식별
    • 디자인 목업을 기반으로 재사용할 공통 컴포넌트를 식별합니다. (예: Header, Footer, Sidebar, ChartCard, SearchBar)
    • 컴포넌트 식별을 위해서 세부 내용을 ’하드 코딩’하세요.
  4. [개발] Next.js 프로젝트 생성
    • npx create-next-app@latest 명령어로 App Router를 사용하는 Next.js 프로젝트를 생성합니다.
    • 단, Next.js 버전 및 기본적으로 제공하는 의존성 패키지(보다 버전이 낮은 것을 허용하지 않으니 주의하세요.
  5. [개발] 기본 라우팅 및 레이아웃 설정
    • app/ 디렉터리 내에 4개 페이지의 기본 폴더와 page.tsx 파일을 생성합니다.
      • /app/page.tsx (Home)
      • /app/about/page.tsx (About)
      • /app/dashboard/page.tsx (Dashboard)
      • /app/detail/page.tsx (Search)
    • app/layout.tsx 파일에서 공통 Header와 Footer를 포함하는 루트 레이아웃을 구현합니다.
  6. “/” 라우트를 정적으로 구성하세요.

2단계: 정적 페이지 구현 및 데이터 연동 준비

디자인 목업을 기반으로 정적인 페이지를 구현하고, 수집한 데이터를 애플리케이션에서 불러올 준비를 합니다.

  1. [개발] 공통 컴포넌트 구현
    • 1단계에 식별한 Header, Footer 등 공통 UI 컴포넌트를 components/ 폴더 내에 구현합니다.
  2. [개발] ‘Home’ 페이지 구현
    • Figma 디자인에 맞춰 app/page.tsx를 정적 컨텐츠로 구현합니다.
  3. [개발] ‘About’ 페이지 구현
    • Figma 디자인에 맞춰 app/about/page.tsx를 정적 컨텐츠로 구현합니다.
  4. [데이터] 데이터 로딩 전략 수립
    • 수집한 데이터(JSON 파일, API 등)를 어떻게 가져올지 결정합니다.
    • 파일이라면 data/ 폴더에 위치시킵니다.
  5. [개발] ‘Dashboard’ / ‘Search’ 페이지 UI 스켈레톤
    • 차트와 데이터가 들어갈 자리에 임시 ‘placeholder’ UI를 배치하여 ‘Dashboard’ 및 ‘Search’ 페이지의 기본 레이아웃을 완성합니다.

3단계: 핵심 기능 구현 - 대시보드와 검색

애플리케이션의 핵심인 데이터 시각화와 검색 기능을 구현합니다. 이 단계부터 페이지가 ’인터랙티브’해집니다.

  1. [개발] ‘Search’ 기능 구현
    • (필수) Client Component: 검색은 사용자 입력에 즉시 반응해야 하므로, use client 지시어를 사용하고 useState로 검색어를 관리합니다.
    • 검색 결과를 리스트 형태로 렌더링합니다.
  2. [개발] ‘Dashboard’ 데이터 연동
    • 가져온 데이터를 간단한 테이블이나 리스트로 먼저 출력해봅니다.
  3. [개발] 차트 라이브러리 연동
    • 차트 컴포넌트는 사용자와 인터랙션(툴팁 등)이 필요하므로 use client를 사용한 별도의 컴포넌트로 분리합니다.
  4. [개발] ‘Dashboard’ 시각화
    • 불러온 데이터를 가공하여, 최소 2개 이상의 의미 있는 차트(막대, 라인, 파이 등)로 시각화하여 대시보드 페이지에 렌더링합니다.

4단계: 정교한 스타일링 및 배포

애플리케이션의 완성도를 높이고, 사용자 경험을 개선하며, GitHub Pages 또는 Vercel을 통해 외부에 배포합니다.

  1. [개발] ‘Dashboard’ 인터랙션 추가
    • 대시보드에 필터(드롭다운, 날짜 선택 등)를 추가합니다.
    • 필터 값 변경에 따라 차트가 동적으로 업데이트되도록 useState와 useEffect (또는 URL Query)를 활용합니다.
  2. [스타일] 반응형 디자인 및 스타일링
    • Figma 디자인과 100% 일치하도록 Tailwind CSS 또는 CSS를 세밀하게 다듬습니다.
    • 모바일, 태블릿, 데스크톱 환경에서 UI가 깨지지 않는지 확인하고 수정합니다.
  3. [개선] 로딩 및 에러 상태 처리
    • 데이터를 불러오는 동안 로딩 스피너(Loading UI)를 보여줍니다.
    • Next.js의 loading.tsx 파일 또는 Suspense를 활용합니다.
    • 데이터 로딩 실패 시 에러 메시지를 보여주는 UI를 구현합니다. (Next.js의 error.tsx 활용)
  4. [개선] SEO 및 메타데이터
    • layout.tsx 및 각 page.tsx에 metadata 객체를 추가하여 페이지 제목과 설명을 설정합니다.
  5. [배포] GitHub Pages 또는 Vercel 배포
    • 프로젝트를 GitHub 레포지토리에 푸시합니다.
    • Vercel에 가입하고 GitHub 레포지토리를 연동하여 프로젝트를 배포합니다.
  6. [문서] 최종 점검 및 README 작성
    • 배포된 URL을 확인하고, 모든 기능이 정상 동작하는지 테스트합니다.
    • README.md 파일에 프로젝트 설명, 사용한 기술, 실행 방법, 배포 링크 등을 상세히 작성합니다.