1편 · 김새준 — PDF 포트폴리오를 GitHub Pages 사이트로

만든 것

주소는 https://saejuun.github.io/ 입니다. 첫 화면, 연도별 작업 목록(/work/), 작업 11개의 상세 페이지(/work/<작업>/), 소개(/about/)로 나눴습니다.

작업 목록은 최근에 끝난 작업부터 연도별로 묶고, UX·UI · 브랜드 · 광고 · 패키지 · 편집 · 공공 여섯 분야로 걸러 볼 수 있습니다. 상세 페이지 끝에는 시간순으로 이전·다음 작업을 둡니다.

구조: JSON 두 개와 빌드 스크립트

사이트를 이어서 고칠 사람은 개발자가 아닌 디자이너라서, 프레임워크 없이 내용을 JSON 두 개로 모았습니다. works.json 에는 작업마다 제목, 분야, 시작·끝 날짜, 설명, 이미지를 적고, profile.json 에는 소개와 경력·수상을 적습니다.

build.mjs 는 의존성 없는 Node 스크립트로, 이 두 파일을 읽어 페이지 HTML 과 404.html, sitemap.xml, robots.txt 를 _site 폴더에 만듭니다.

content/works.json  ─┐
content/profile.json ─┼─ node build.mjs ─→ _site/ ─→ GitHub Actions ─→ GitHub Pages
assets/work/*.jpg   ─┘

GitHub Pages 에서 주소 나누기

GitHub Pages 는 서버에서 주소를 처리해 주지 않습니다. 그래서 자바스크립트 라우터 대신, 빌드할 때 작업마다 /work/<작업>/index.html 을 미리 만들어 둡니다. 새로고침이나 링크 공유를 해도 그 페이지가 바로 열리고, 검색 엔진도 페이지마다 제목과 설명을 읽습니다.

main 에 올리면 Actions 가 node build.mjs 를 실행하고 _site 만 배포합니다. 빌드 결과는 저장소에 올리지 않습니다.

타임라인과 분야 거르기

작업마다 start·end 날짜를 두고, 끝난 날이 최근인 작업부터 정렬해 연도별로 묶습니다. 날짜를 모르는 작업은 맨 아래 "기간 미정"에 모입니다.

분야 거르기는 스무 줄 남짓한 스크립트로, 고른 분야가 아닌 카드를 숨기고 카드가 하나도 남지 않은 연도 제목도 함께 숨깁니다.

PDF 에서 이미지 꺼내기

받은 자료는 슬라이드형 포트폴리오 PDF 와 842×596 페이지 이미지였습니다. 페이지 이미지는 사이트에 쓰기엔 작아서, PyMuPDF 로 PDF 를 200dpi 로 다시 렌더링한 뒤 작업마다 대표 이미지를 잘라 가로 1600px JPG 로 저장했습니다.

작업 방식

친구가 저장소에 협업자로 초대해 주고, 작업은 별도 작업 트리의 브랜치에서 한 뒤 PR 로 main 에 합칩니다. 비밀번호는 주고받지 않았습니다.