본문으로 건너뛰기

배포와 유지보수

zenoPortfolio는 정적 사이트입니다.
서버에서 DB를 조회하거나 API를 실행하지 않고, HTML/CSS/JS 파일을 그대로 배포합니다.

정적 사이트란?​

정적 사이트는 빌드된 HTML, CSS, JS, 이미지 파일을 브라우저가 그대로 내려받는 구조입니다.

브라우저
  -> index.html 요청
  -> CSS/JS/images 다운로드
  -> 브라우저에서 JS 실행

Laravel 같은 서버 렌더링 프로젝트와 달리, 서버에서 DB를 조회해 HTML을 새로 만들지 않습니다.

GitHub Pages 배포​

README 기준으로 zenoPortfolio는 GitHub Pages 배포를 사용합니다.

장점:

  • 별도 서버 관리가 거의 없음
  • 정적 파일 배포에 적합
  • HTML/CSS/JS 포트폴리오와 잘 맞음

배포 전 체크리스트​

1. 경로 확인​

정적 사이트에서는 상대 경로가 중요합니다.

<link rel="stylesheet" href="css/common.css">
<script type="module" src="components/index.js"></script>

GitHub Pages에서 저장소 하위 경로로 배포될 경우, 절대 경로(/css/...)보다 상대 경로가 안전할 때가 많습니다.

2. 이미지 경로 확인​

카드 데이터는 이미지 경로를 문자열로 가집니다.

image: 'images/openGraph.png'

파일명이 바뀌거나 이미지가 빠지면 카드 이미지가 깨집니다.

3. 외부 링크 확인​

작업물 카드의 href는 외부 링크와 내부 포트폴리오 페이지가 섞여 있습니다.

href: 'https://zenoblog-production.up.railway.app/'
href: 'portfolio/site/starbucks/index.html'

배포 후 클릭해서 실제로 열리는지 확인해야 합니다.

4. SEO/OG 태그 확인​

index.html에는 기본 SEO와 OG 태그가 있습니다.

<meta name="description" content="Zeno - 웹 디자이너이자 퍼블리셔...">
<meta property="og:title" content="Zeno · Portfolio">
<meta property="og:image" content="images/openGraph.png">

링크 공유 시 미리보기 이미지가 잘 나오는지 확인합니다.

5. 접근성 확인​

확인할 것:

  • 버튼에 aria-label이 있는가?
  • 모달에 aria-hidden이 업데이트되는가?
  • 이미지에 적절한 alt가 있는가?
  • 키보드로 메뉴를 닫을 수 있는가?

현재 메뉴는 ESC로 닫을 수 있어 좋은 구조입니다.

유지보수 방식​

새 작업물을 추가할 때:

  1. 이미지를 images/에 추가
  2. portfolioItems 배열에 객체 추가
  3. category, tech, order 확인
  4. 로컬에서 필터/모드/무한스크롤 확인
  5. 배포 후 링크 확인

문서 사이트와 연결​

zenoDocument에는 이 프로젝트를 설명하는 문서가 있습니다.

docs/Web/zenoPortfolio/

포트폴리오 코드를 고친 뒤에는 문서도 같이 업데이트하는 것이 좋습니다.