개인 포트폴리오 페이지를 구현해보자!

Next.js로 기술 블로그 만들기

어느덧 Next.js를 공부한지도 7주차가 되었다.

처음에는 단순히 React에서 한 단계 더 나아가기 위해 Next.js를 공부하기 시작했지만, App Router, Server Component, 파일 기반 라우팅, SEO, 정적 생성 같은 기능들을 하나씩 배우다 보니 이 기술을 활용해서 직접 하나의 프로젝트를 만들어보고 싶다는 생각이 들었다.

그러던 중 단순히 기능을 구현하는 프로젝트가 아니라, 나 자신을 보여줄 수 있는 사이트를 만들어보면 어떨까 하는 생각이 들었다.

지금까지 공부한 내용, 진행했던 프로젝트, 문제를 해결했던 과정, 프론트엔드 개발자로 성장해가는 기록들을 한곳에 모아두면 좋겠다고 생각했다. 기존에는 Tistory에 내용을 정리했지만, Tistory에서는 디자인 수정이 쉽지 않기도 하고, 원하는 글 형식을 제공하지 않아서 아쉽다는 생각이 많이 들었다.

그래서 이번에는 직접 블로그와 포트폴리오를 결합한 기술 블로그 사이트를 만들어보기로 했다.

이 사이트는 단순히 글을 올리는 공간이 아니라, 내가 어떤 기술을 공부하고 있는지, 어떤 프로젝트를 만들어왔는지, 그리고 어떤 문제를 어떻게 해결했는지를 기록하는 공간이 될 예정이다.

또한 Next.js를 공부하면서 배운 개념들을 실제 프로젝트에 적용해보는 실습 공간이기도 하다. App Router 기반의 페이지 구조를 설계하고, Markdown 또는 MDX로 글을 관리하며, 프로젝트 소개 페이지와 기술 글 목록 페이지를 직접 구현해보려고 한다.

이번 프로젝트를 통해 단순히 “Next.js를 공부했다”에서 끝나는 것이 아니라, Next.js를 활용해 실제로 하나의 서비스를 기획하고 구현하는 경험을 쌓아보고자 한다.

프로젝트 개요

Next.js 기반의 기술 블로그 겸 포트폴리오 사이트를 제작하는 개인 프로젝트이다.

블로그에는 프론트엔드 개발을 공부하면서 정리한 기술 글을 작성하고,
포트폴리오 영역에는 지금까지 진행했던 프로젝트들을 정리할 예정이다.
또한 나에 대한 소개를 랜딩페이지에 소개하여 향후 다른 이들에게 개발자인 "나"를 소개할때 사용할 수 있도록 할 것이다.

기술 블로그에서는 다음과 같은 내용을 다룰 계획이다.

React와 TypeScript, Next.js 등의 학습 기록
프로젝트 개발 과정
에러 해결 기록
프론트엔드 테스트와 최적화 경험
개인 프로젝트 회고

포트폴리오 영역에서는 단순히 프로젝트 결과물만 보여주는 것이 아니라, 프로젝트를 만들게 된 이유, 맡은 역할, 사용한 기술, 구현 과정, 문제 해결 경험, 아쉬운 점 등을 함께 정리하려고 한다.

즉, 이 사이트는 나의 학습 기록이자, 프로젝트 아카이브이며, 프론트엔드 개발자로서의 성장 과정을 보여주는 공간이 될 것이다.

왜 블로그와 포트폴리오를 함께 만들었는가

프론트엔드 개발을 공부하다 보면 많은 기술을 접하게 된다.

React, Next.js, TypeScript, Tailwind CSS, 상태 관리, API 연동, 성능 최적화, 테스트 코드 등 배워야 할 내용은 계속 늘어난다. 하지만 공부한 내용을 제대로 정리하지 않으면 시간이 지나면서 잊어버리기 쉽다.

특히 프로젝트를 진행하면서 겪었던 문제 해결 과정은 그 당시에는 치열하게 고민하지만, 기록하지 않으면 나중에 다시 떠올리기 어렵다.

그래서 내가 공부한 내용과 프로젝트 경험을 꾸준히 기록할 수 있는 공간이 필요하다고 느꼈다.

물론 Velog나 Notion 같은 좋은 플랫폼도 있지만, 직접 기술 블로그를 만들면 단순히 글을 쓰는 것 이상의 경험을 얻을 수 있다.

블로그 자체를 하나의 프론트엔드 프로젝트로 바라보고, 페이지 구조, 컴포넌트 설계, 콘텐츠 관리, SEO, 반응형 UI, 배포까지 직접 경험할 수 있기 때문이다.

하지만 기술 블로그만으로는 내가 어떤 프로젝트를 해왔고, 실제로 어떤 문제를 해결했는지 보여주기에는 조금 부족하다고 느꼈다.

반대로 포트폴리오 사이트만 만들면 프로젝트 결과물은 보여줄 수 있지만, 그 과정에서 어떤 고민을 했는지, 어떤 기술을 학습했는지, 어떤 시행착오를 겪었는지는 충분히 담기 어렵다.

그래서 블로그와 포트폴리오를 하나의 사이트 안에 함께 구성하기로 했다.

블로그에서는 학습한 기술과 문제 해결 과정을 기록하고, 포트폴리오에서는 실제 프로젝트 경험을 정리한다. 두 영역이 연결되면 단순한 자기소개 사이트보다 더 입체적으로 나를 보여줄 수 있다고 생각했다.

예를 들어 어떤 프로젝트에서 TanStack Query를 사용했다면, 포트폴리오 페이지에서는 해당 프로젝트에서 어떤 기능에 사용했는지를 설명하고, 블로그 글에서는 TanStack Query를 학습하며 정리한 개념을 더 자세히 다룰 수 있다.

이렇게 구성하면 프로젝트 경험과 기술 학습 기록이 서로 연결되는 구조를 만들 수 있다.

이번 프로젝트를 통해 얻고 싶은 것은 단순히 예쁜 블로그 사이트 하나가 아니다.

내가 배운 기술을 실제로 적용해보고, 그 과정을 다시 글로 정리하면서 기술을 더 깊게 이해하는 것이다.

만들고자 하는 사이트의 방향

이번 기술 블로그는 단순히 글을 나열하는 사이트가 아니라, 방문자가 나의 학습 흐름과 프로젝트 경험을 자연스럽게 볼 수 있는 구조로 만들고자 한다.

메인 페이지에서는 내가 어떤 개발자인지 간단히 소개하고, 최근 작성한 글과 대표 프로젝트를 보여줄 예정이다.

기술 글 목록 페이지에서는 카테고리와 태그를 활용해 글을 쉽게 탐색할 수 있도록 구성하려고 한다.

프로젝트 페이지에서는 지금까지 진행한 프로젝트들을 카드 형태로 보여주고, 상세 페이지에서는 프로젝트의 배경, 구현 과정, 문제 해결 경험을 정리할 계획이다.

전체적인 방향은 다음과 같다.

학습 기록을 체계적으로 정리할 수 있는 블로그
프로젝트 경험을 보여줄 수 있는 포트폴리오
Next.js 학습 내용을 실제로 적용하는 실습 프로젝트
꾸준히 확장 가능한 개인 웹사이트

현재 개발 중인 과정

현재는 기술 블로그의 전체 방향성을 정하고, 실제 구현에 들어가기 전 필요한 구조를 하나씩 잡아가는 단계이다.

처음부터 완성된 블로그를 만들기보다는, 블로그를 구성하는 핵심 기능을 단계별로 나누어 구현하려고 한다.

기술 블로그는 단순히 화면을 예쁘게 만드는 것보다, 글을 어떻게 관리할지, 사용자가 어떻게 글을 탐색할지, 프로젝트 경험을 어떻게 보여줄지에 대한 구조 설계가 중요하다고 생각했다.

그래서 현재는 다음과 같은 흐름으로 개발을 진행하고 있다.

프로젝트 초기 세팅

가장 먼저 Next.js 프로젝트를 생성하고 기본 개발 환경을 구성하고 있다.

이번 프로젝트는 Next.js App Router 기반으로 진행할 예정이다. App Router는 폴더 구조를 기준으로 페이지를 구성할 수 있기 때문에, 블로그처럼 페이지 구조가 명확한 프로젝트에 잘 어울린다고 생각했다.

기본적으로 다음과 같은 페이지 구조를 먼저 잡고 있다.

src/
  app/
    page.tsx
    posts/
      page.tsx
      [slug]/
        page.tsx
    projects/
      page.tsx
      [slug]/
        page.tsx
    about/
      page.tsx

이 구조에서 page.tsx는 메인 페이지, posts/page.tsx는 게시글 목록 페이지, posts/[slug]/page.tsx는 게시글 상세 페이지를 담당한다.

projects 경로는 포트폴리오 역할을 하는 프로젝트 목록과 상세 페이지를 담당하고, about 페이지에서는 나에 대한 소개와 기술 스택, 활동 경험 등을 정리할 계획이다.

처음부터 많은 페이지를 한 번에 구현하기보다는, 메인 페이지와 게시글 목록 페이지를 먼저 만들고 이후 프로젝트 페이지와 소개 페이지를 확장하는 방식으로 진행하고 있다.

UI 구조 설계

초기 세팅 이후에는 블로그의 전체 UI 구조를 설계하고 있다.

기술 블로그는 글을 읽는 경험이 중요하기 때문에 화려한 인터랙션보다는 가독성과 탐색 편의성을 우선으로 두고 있다. 방문자가 블로그에 들어왔을 때 내가 어떤 기술을 공부하고 있는지, 어떤 프로젝트를 진행했는지 빠르게 파악할 수 있어야 한다고 생각했다.

현재 생각하고 있는 기본 레이아웃은 다음과 같다.

공통 레이아웃
- Header
- Main Content
- Footer

메인 페이지
- Hero Section
- 최근 게시글
- 대표 프로젝트
- 관심 기술 스택

게시글 목록 페이지
- 게시글 카드 목록
- 카테고리 필터
- 태그 필터
- 검색 영역

게시글 상세 페이지
- 제목
- 작성일
- 태그
- 본문
- 코드 블록
- 목차

특히 게시글 상세 페이지는 기술 블로그의 핵심이기 때문에 본문 폭, 줄 간격, 제목 크기, 코드 블록 스타일 등을 신경 써서 구성하려고 한다.

기술 글은 일반 글보다 코드 예제와 설명이 많기 때문에, 작은 스타일 차이도 읽는 경험에 큰 영향을 준다고 생각했다.

공통 컴포넌트 개발

블로그에서 반복적으로 사용되는 UI는 공통 컴포넌트로 분리해서 관리할 계획이다.

예를 들어 게시글 카드, 태그, 카테고리 배지, 버튼, 섹션 제목, 레이아웃 컴포넌트 등은 여러 페이지에서 반복해서 사용된다.

현재는 다음과 같은 컴포넌트를 우선적으로 만들려고 한다.

components/
  common/
    Button.tsx
    Badge.tsx
    SectionTitle.tsx

  layout/
    Header.tsx
    Footer.tsx
    Container.tsx

  post/
    PostCard.tsx
    PostList.tsx
    PostTag.tsx
    PostMeta.tsx

  project/
    ProjectCard.tsx
    ProjectList.tsx

컴포넌트를 나누는 기준은 단순히 파일을 많이 만드는 것이 아니라, 각 컴포넌트가 어떤 책임을 가지는지 명확하게 구분하는 것이다.

예를 들어 PostCard는 게시글 하나를 카드 형태로 보여주는 역할만 담당하고, 게시글 목록을 순회하며 렌더링하는 책임은 PostList가 담당하도록 나눌 수 있다.

이렇게 하면 나중에 게시글 카드 디자인을 바꾸거나 목록 정렬 방식을 수정할 때도 영향을 받는 범위를 줄일 수 있다.

콘텐츠 구조 설계

기술 블로그에서 가장 중요한 부분은 글을 어떻게 관리할지이다.

초기에는 Markdown 기반으로 글을 작성하고, 각 글의 상단에 frontmatter를 작성하여 메타데이터를 관리할 계획이다.

예를 들어 게시글은 다음과 같은 구조로 작성할 수 있다.

---
title: "Next.js App Router 이해하기"
description: "Next.js App Router의 기본 구조와 동작 방식을 정리합니다."
category: "Next.js"
tags: ["Next.js", "App Router", "React"]
publishedAt: "2026-05-24"
published: true
---

본문 내용...

여기서 title은 게시글 제목, description은 글 설명, category는 글의 큰 분류, tags는 세부 키워드, publishedAt은 작성일을 의미한다.

이렇게 글 데이터를 구조화해두면 게시글 목록 페이지에서 카드 UI를 만들 때도 사용할 수 있고, 상세 페이지의 SEO 메타데이터에도 활용할 수 있다.

또한 태그와 카테고리를 기반으로 필터링 기능을 구현할 수 있기 때문에, 글이 많아져도 사용자가 원하는 내용을 쉽게 찾을 수 있다.

게시글 목록 페이지 구현 계획

게시글 목록 페이지는 블로그의 중심이 되는 페이지이다.

이 페이지에서는 작성한 글들을 최신순으로 보여주고, 사용자가 카테고리나 태그를 기준으로 원하는 글을 찾을 수 있도록 만들 예정이다.

게시글 카드에는 다음 정보를 표시할 계획이다.

- 게시글 제목
- 게시글 설명
- 작성일
- 카테고리
- 태그 목록
- 예상 읽기 시간

처음에는 전체 게시글을 최신순으로 보여주는 기능부터 구현하고, 이후 검색과 필터 기능을 추가할 예정이다.

검색 기능은 제목과 설명을 기준으로 동작하도록 만들고, 필터 기능은 카테고리와 태그를 기준으로 동작하게 할 계획이다.

예를 들어 사용자가 Next.js 카테고리를 선택하면 Next.js와 관련된 글만 보여주고, React, 성능 최적화, 테스트 같은 태그를 선택하면 해당 태그가 포함된 글만 보여주는 방식이다.

이 기능을 통해 단순한 글 목록이 아니라, 사용자가 원하는 글을 쉽게 찾을 수 있는 블로그를 만들고자 한다.

게시글 상세 페이지 구현 계획

게시글 상세 페이지에서는 Markdown으로 작성한 본문을 실제 페이지로 렌더링한다.

상세 페이지는 단순히 글을 보여주는 화면이 아니라, 기술 글을 읽기 좋은 형태로 가공하는 역할을 해야 한다.

따라서 다음과 같은 요소를 함께 구현할 계획이다.

- 게시글 제목
- 작성일
- 카테고리
- 태그
- 본문 렌더링
- 코드 블록 스타일링
- 목차
- 이전 글 / 다음 글 이동
- 관련 글 추천

특히 코드 블록 스타일링은 기술 블로그에서 중요한 요소라고 생각한다.

프론트엔드 기술 글에는 코드 예제가 자주 들어가기 때문에, 코드가 읽기 어렵다면 글 전체의 가독성이 떨어질 수 있다. 따라서 코드 하이라이팅을 적용하고, 필요하다면 파일명 표시나 복사 버튼도 추가할 계획이다.

또한 글이 길어질 경우를 대비해 목차 기능도 고려하고 있다. 제목 구조를 기준으로 목차를 자동 생성하면 사용자가 글의 전체 흐름을 파악하기 쉬워진다.

프로젝트 페이지 구현 계획

이 블로그는 단순한 기술 글 저장소가 아니라 포트폴리오 역할도 함께 하도록 만들 계획이다.

그래서 별도의 프로젝트 페이지를 만들고, 지금까지 진행한 프로젝트들을 정리하려고 한다.

프로젝트 목록 페이지에서는 각 프로젝트를 카드 형태로 보여준다.

- 프로젝트명
- 한 줄 소개
- 진행 기간
- 맡은 역할
- 사용 기술
- 주요 기능
- GitHub 링크
- 배포 링크

프로젝트 상세 페이지에서는 단순히 결과물을 보여주는 것이 아니라, 프로젝트를 만들게 된 이유와 구현 과정, 문제 해결 경험을 중심으로 작성할 예정이다.

예를 들어 프로젝트 상세 글은 다음과 같은 흐름으로 구성할 수 있다.

- 프로젝트 소개
- 프로젝트를 시작한 이유
- 맡은 역할
- 사용한 기술
- 주요 기능
- 구현 과정
- 문제 해결 경험
- 아쉬운 점
- 개선 방향

이렇게 작성하면 단순히 “이런 프로젝트를 만들었다”에서 끝나는 것이 아니라, 프로젝트를 진행하면서 어떤 고민을 했고 어떤 방식으로 문제를 해결했는지를 보여줄 수 있다.

검색과 필터 기능 계획

블로그에 글이 많아질수록 탐색 기능은 중요해진다.

처음에는 글이 많지 않기 때문에 최신순 목록만으로도 충분할 수 있지만, 장기적으로 기술 글이 쌓이면 원하는 글을 빠르게 찾기 어려워질 수 있다.

그래서 검색과 필터 기능을 초기 설계 단계부터 고려하고 있다.

검색은 다음 기준으로 동작하도록 만들 계획이다.

- 제목 검색
- 설명 검색
- 태그 검색
- 카테고리 검색

필터는 카테고리와 태그를 기준으로 구현할 예정이다.

예를 들어 카테고리는 React, Next.js, TypeScript, CSS, 회고처럼 큰 주제로 나누고, 태그는 App Router, Server Component, Tailwind CSS, TanStack Query처럼 더 세부적인 키워드로 구성할 수 있다.

이렇게 카테고리와 태그를 분리하면 글을 더 체계적으로 관리할 수 있고, 방문자도 관심 있는 주제의 글을 더 쉽게 탐색할 수 있다.

SEO와 메타데이터 설정 계획

기술 블로그는 검색을 통해 유입되는 경우가 많기 때문에 SEO도 함께 고려할 예정이다.

Next.js에서는 각 페이지마다 메타데이터를 설정할 수 있고, 게시글 상세 페이지에서는 글의 제목과 설명을 기반으로 동적인 메타데이터를 생성할 수 있다.

예를 들어 게시글의 frontmatter에 작성한 title과 description을 활용해 페이지의 메타데이터를 구성할 수 있다.

export async function generateMetadata({ params }: Props) {
  const post = getPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.description,
  };
}

이렇게 설정하면 각 게시글마다 다른 제목과 설명을 검색 엔진에 전달할 수 있다.

또한 추후에는 Open Graph 이미지, sitemap, robots.txt도 함께 설정하여 검색과 공유 환경에서 더 자연스럽게 노출되도록 개선할 계획이다.

앞으로의 개발 계획

현재는 블로그의 전체 구조와 핵심 기능을 설계하는 단계이며, 이후에는 다음 순서로 개발을 진행할 계획이다.

Next.js 프로젝트 초기 세팅
공통 레이아웃 구현
메인 페이지 구현
Markdown 게시글 구조 설계
게시글 목록 페이지 구현
게시글 상세 페이지 구현
코드 블록 스타일링 적용
프로젝트 목록 페이지 구현
프로젝트 상세 페이지 구현
검색 및 필터 기능 구현
SEO 메타데이터 설정
반응형 UI 개선
배포

우선은 블로그의 핵심 기능인 게시글 목록과 상세 페이지를 먼저 완성하는 것을 목표로 하고 있다.

그 이후 프로젝트 페이지와 소개 페이지를 추가하고, 검색과 필터 기능을 붙이면서 사용성을 높일 예정이다.

마지막으로 반응형 UI와 SEO를 정리하고 배포까지 진행하면 1차 버전의 기술 블로그가 완성될 것이다.

나만의 블로그를 완성하는 그날까지 화이팅!!

'Next.js' 카테고리의 다른 글

Next.js 스타일링 전략: Tailwind CSS, shadcn/ui, 그리고 CSS-in-JS (0)	2026.05.17
Next.js에서의 인증 전략과 쿠키 vs 토큰 (0)	2026.05.10
Next.js 데이터 페칭과 Server Actions (2)	2026.04.09
렌더링 전략 완전 이해 - SSG, ISR, PPR, Cache Components (0)	2026.03.29
Next.js App Router 라우팅 & Proxy 완벽 이해하기 (0)	2026.03.17

Next.js로 기술 블로그 만들기

프로젝트 개요

왜 블로그와 포트폴리오를 함께 만들었는가

만들고자 하는 사이트의 방향

현재 개발 중인 과정

프로젝트 초기 세팅

UI 구조 설계

공통 컴포넌트 개발

콘텐츠 구조 설계

게시글 목록 페이지 구현 계획

게시글 상세 페이지 구현 계획

프로젝트 페이지 구현 계획

검색과 필터 기능 계획

SEO와 메타데이터 설정 계획

앞으로의 개발 계획

'Next.js' 카테고리의 다른 글

티스토리툴바