Next.js와 AI로 포트폴리오 사이트를 만든 과정

포트폴리오 사이트가 필요한 이유

개발자에게 포트폴리오 사이트는 이력서 이상의 역할을 합니다. 코드를 직접 보여주고, 프로젝트의 기획 의도와 결과물을 한눈에 전달할 수 있습니다. 특히 AI 도구를 활용한 개발 방식을 보여주기에는 직접 만든 사이트만 한 것이 없습니다.

이 사이트(airo.io.kr) 자체가 하나의 프로젝트이기도 합니다.

기술 선택과 그 이유

Next.js 14 App Router

Next.js를 선택한 가장 큰 이유는 SEO와 성능입니다.

• 서버 사이드 렌더링(SSR): 검색 엔진이 콘텐츠를 잘 인식합니다
• 정적 사이트 생성(SSG): 포트폴리오처럼 자주 바뀌지 않는 페이지는 빌드 시점에 HTML로 생성하여 빠르게 제공합니다
• App Router: 파일 기반 라우팅으로 페이지 추가가 간편합니다
• Image 최적화: next/image 컴포넌트가 자동으로 이미지를 최적화합니다

Tailwind CSS

CSS 프레임워크로 Tailwind를 선택한 이유는 속도입니다:

• 별도 CSS 파일을 관리할 필요 없이, HTML 안에서 바로 스타일링
• 반응형 디자인을 md:, lg: 접두사로 쉽게 구현
• 다크 모드를 dark: 접두사로 간편하게 적용
• 커스텀 디자인 시스템을 tailwind.config.ts에서 통합 관리

Framer Motion

단순한 정적 페이지보다는 약간의 동적 요소가 있는 것이 좋겠다고 판단했습니다. Framer Motion으로 스크롤 시 콘텐츠가 부드럽게 나타나는 애니메이션을 추가했습니다.

핵심은 과하지 않게 사용하는 것입니다. 모든 요소에 애니메이션을 넣으면 오히려 산만해집니다.

Glassmorphism 디자인

이 사이트의 주요 디자인 요소는 **글래스모피즘(Glassmorphism)**입니다. 반투명한 유리 느낌의 카드 디자인으로, 다크 모드와 라이트 모드 모두에서 세련된 느낌을 줍니다.

구현 방법은 CSS 변수를 활용했습니다:

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

다크 모드와 라이트 모드에서 각각 다른 CSS 변수 값을 설정하여, 테마 전환 시 자연스럽게 변합니다.

다크 모드 구현

next-themes 라이브러리를 사용하여 다크 모드를 구현했습니다. 이 라이브러리를 선택한 이유는 다음과 같습니다:

• 시스템 설정 자동 감지: 사용자의 OS 다크 모드 설정을 자동으로 따라갑니다
• 깜빡임 없음: SSR 환경에서 테마 전환 시 화면 깜빡임을 방지합니다
• localStorage 자동 저장: 사용자의 테마 선택을 기억합니다

Tailwind CSS의 darkMode: "class" 설정과 함께 사용하면, dark: 접두사로 다크 모드 스타일을 쉽게 정의할 수 있습니다.

AI 도구 활용

이 프로젝트에서 AI 도구를 적극 활용했습니다.

Cursor AI

코드 에디터 자체에서 AI 어시스턴트를 활용할 수 있어, 개발 흐름이 끊기지 않습니다. 특히 다음 작업에서 큰 도움을 받았습니다:

• 컴포넌트 구조 설계 및 코드 생성
• Tailwind CSS 클래스 조합 (복잡한 반응형 스타일링)
• TypeScript 타입 정의
• 버그 수정 및 코드 리팩토링

Claude

기획 단계에서 아이디어를 정리하고, 콘텐츠 구조를 잡는 데 활용했습니다. 사이트의 섹션 구성, 카피라이팅, SEO 메타데이터 작성 등에서 도움을 받았습니다.

배포 환경

Vercel을 배포 플랫폼으로 선택했습니다:

• GitHub 연동: push하면 자동으로 빌드 + 배포
• 커스텀 도메인: airo.io.kr 도메인을 연결하여 사용
• HTTPS 자동 적용: SSL 인증서를 자동으로 관리
• 성능 분석: Core Web Vitals 리포트 제공

개선 과정

처음부터 완벽한 사이트를 만들려고 하지 않았습니다. MVP(최소 기능 제품)를 빠르게 배포하고, 피드백을 반영하며 개선해나가는 방식을 택했습니다.

1. 1차: 기본 레이아웃 + 자기소개 + 프로젝트 카드
2. 2차: 다크 모드 + 애니메이션 + 반응형 최적화
3. 3차: SEO 강화 + 개인정보처리방침 + 이용약관
4. 4차: 블로그 섹션 추가 (현재 진행 중)

앞으로의 계획

• 블로그 콘텐츠 확충: 프로젝트 개발일지를 꾸준히 작성
• 프로젝트 추가: 새로운 AI 활용 프로젝트를 지속적으로 개발
• 성능 최적화: Lighthouse 점수 개선
• 접근성 강화: WCAG 가이드라인 준수

포트폴리오 사이트는 한 번 만들고 끝나는 것이 아니라, 지속적으로 성장하는 공간이라고 생각합니다.