Winsting 포트폴리오 홈페이지

개요

직접 만들어 운영하는 개인 포트폴리오입니다. winsting.kr 에서 돌아갑니다.

작업물 데이터는 코드가 아니라 Firestore 에 있습니다. /admin 화면에서 항목을 고치고 이미지를 올리고 순서를 끌어 옮깁니다. 항목을 하나 추가하려고 저장소를 열지 않아도 됩니다.

하이브리드 렌더링

정적 사이트인데 데이터는 원격에 있다는 게 문제였습니다. 처음에는 브라우저가 Firestore 를 읽어 그리게 했더니 검색엔진에는 빈 껍데기로만 보였습니다. 작업물 스물몇 개가 통째로 색인 밖이었습니다.

그래서 둘 다 하게 했습니다. 빌드 타임에 Firestore 를 읽어 작업물마다 정적 HTML 을 굽고(색인·OG 미리보기·첫 페인트), 브라우저에서는 같은 화면을 최신 데이터로 갈아 끼웁니다(재배포 없는 수정 반영). 자격증명이 없는 환경에서는 정적 페이지를 0개 만들고 빌드는 그대로 통과합니다.

신경 쓴 것

한국어 조판을 손봤습니다. 조사나 단위가 어색하게 끊기지 않도록 줄바꿈을 조정했습니다. 한국어는 단어 단위 줄바꿈이 기본이 아니라 그냥 두면 아무 데서나 접힙니다.

구조화 데이터는 작업물 종류에 따라 JSON-LD 타입을 갈아 냅니다. 게임은 VideoGame, 앱은 SoftwareApplication 입니다. 화면에 안 보이는 데이터라 깨져도 아무도 모르므로 단위 테스트로 못박았습니다.

보안 쪽은 이메일 가입이 프로젝트 레벨에서 열려 있어 "로그인했으면 통과" 규칙이 아무것도 막지 못합니다. 모든 쓰기를 관리자 UID 비교로 잠갔습니다.

캐시와 보안 헤더는 firebase.json 한 곳에 모았습니다. Netlify 규격 public/_headers 는 Firebase 가 조용히 무시하기 때문에, 그걸 모르면 헤더가 걸린 줄 알고 넘어갑니다.

스택

Astro 정적 출력에 순수 .astro 컴포넌트(런타임 프레임워크 없음), CSS 디자인 토큰, Firebase(Auth·Firestore·Storage)와 Hosting. 한국어와 영어 2개 로케일. 커밋 전 검증은 npm run check(vitest → astro check → build) 하나로 끝냅니다.