software

포트폴리오 현대화: 바닐라 PHP에서 Next.js까지 (그리고 내 서버가 내가 DDOSing 하는 것으로 착각한 이유)

발행: (2026년 1월 13일 오전 05:43 GMT+9)
6 min read
원문: Dev.to

Source: Dev.to

왜 재디자인을 했나요?

새롭고, 깔끔하고, 빠르고, 부드럽습니다. 수많은 창의적인 디자이너들이 영감을 주지만, 이번 전환은 하나의 이정표가 됩니다. 이는 제가 (Spring Boot) 개발자로서 성장해 온 모습을 반영합니다. Vanilla PHP는 오랫동안 잘 작동했지만, 원활한 사용자 경험과 최적화된 렌더링을 위해 기술 전환이 필요했습니다. Next.js 로 전환하면서 정적 사이트 생성(Static Site Generation, SSG) 을 활용하게 되었습니다.

  • 이전: 모든 요청마다 서버‑사이드 렌더링을 수행해 소중한 밀리초를 낭비했습니다.
  • 현재: 미리 렌더링된 HTML 페이지를 즉시 제공해 “즉시‑온” 경험을 제공합니다. 필요할 때는 클라이언트‑사이드 API 로 동적 데이터를 가져올 수 있습니다.

SEO 최적화: 기술적 기반

좋은 SEO는 부가 기능이 아니라 아키텍처 깊숙이 뿌리내려 있습니다. 독일어 Devs용 SEO 전략에서 영감을 받아 다음을 구현했습니다:

  • 구조화된 데이터: 중앙 Person 스키마가 제 포트폴리오를 Blogkurs(제 블로그)의 도구와 sameAs와 rel="me"를 사용해 연결해 도메인 간 신원을 검증합니다.
  • 시맨틱 HTML: , , ```, 그리고 적절한 헤더 계층(h1‑h6)을 사용해 크롤러가 콘텐츠의 관련성을 추측 없이 이해하도록 돕습니다.
  • Next.js 메타데이터 API: 모든 서브페이지에 동적으로 최적화된 메타 태그와 OpenGraph 이미지를 제공해 순위와 소셜 공유 미리보기를 개선합니다.
  • 성능: 이미지 최적화(WebP/AVIF), 폰트 프리로드, 렌더링 차단 스크립트 제거를 통해 Core Web Vitals에서 최고 점수를 달성합니다.

Note: 접근성(accessibility)은 아직 더 개선이 필요합니다.

공유 호스팅에서의 프리페칭

JavaScript 프레임워크로 전환하면 복잡성이 증가합니다. 정적 내보내기를 위한 .htaccess 설정 및 하이드레이션 오류 처리는 SEO 손실을 방지하기 위해 깊은 기술 지식이 요구됩니다.

  • 자동 프리페칭: 기본적으로 Next.js는 페이지가 뷰포트에 나타나는 즉시 모든 연결된 페이지를 프리페칭합니다.
  • Apache 공유 호스팅에서의 문제: 짧은 시간에 대량의 요청이 발생해 mod_evasive나 fail2ban 같은 보안 모듈이 트래픽을 DDOS 공격으로 오인할 수 있습니다.

정적 내보내기 중 서버가 자동으로 제 IP를 차단했습니다. 해결 방법은 프리페칭을 비활성화하는 것이었습니다:

import Link, { LinkProps } from 'next/link';
import { ReactNode } from 'react';

interface SafeLinkProps extends LinkProps {
  children: ReactNode;
  className?: string;
}

export default function SafeLink({ children, ...props }: SafeLinkProps) {
  return (
    
      {children}
    
  );
}

클래식 CMS에서 MDX 로

WordPress 같은 클래식 CMS는 워크플로우를 제한합니다. 무거운 WYSIWYG 편집기와 복잡한 메뉴는 개발자에게 익숙하지 않은 환경을 만들며, 창의성과 속도를 방해하는 구조를 강요합니다.

선택한 아키텍처

  • 표준으로서의 Markdown (MDX): 코드를 작성하듯이 IDE에서 콘텐츠를 작성합니다. 빠르고, 깔끔하며, 버전 관리가 가능합니다.
  • 디자인 자유도: React와 Tailwind CSS 로 각 페이지를 커스터마이징하면 더 빠르고 여유롭게 작업할 수 있습니다.
  • Git을 통한 버전 관리: 모든 콘텐츠 업데이트가 커밋이 되어 전체 히스토리, 브랜치, 깔끔한 배포를 제공합니다.

결론

Next.js 로의 전환은 단순히 최신 기술을 쓰기 위해서가 아니라, 제 프로젝트를 웹 상에서 신뢰받는 존재로 자리매김하기 위한 기반이었습니다. 현대 소프트웨어는 검색 엔진의 언어에 능숙해야 합니다. 전통적인 CMS 환경에 불편함을 느끼는 개발자에게 정적 사이트 생성기는 궁극적인 자유를 제공합니다.

원본은 독일어로 제 포트폴리오에 게시되었습니다: Hendrik Haustein Portfolio.

Back to Blog

관련 글

더 보기 »