목차
  1. 기술 스택
  2. 새 콘텐츠 발행하는 법
  3. X(트위터)에서 동기화하기
  4. 로컬 미리보기

기술 스택

  • Astro: 정적 사이트 생성기(SSG). 글은 Markdown으로 작성하고 빌드하면 순수 정적 페이지가 나와서 로딩이 아주 빨라요.
  • UI 프레임워크 제로: React도, Tailwind도 쓰지 않았습니다. CSS 변수를 직접 작성했고, 색상과 폰트 크기는 최대한 Apple의 디자인 가이드라인에 가깝게 맞췄어요.
  • 인터랙션 및 모션: 홈 화면 애니메이션은 seek(t) 순수 함수로 만들었고, 닫힌 형식(closed-form) 스프링 물리 공식으로 각 속성을 계산해요. 페이지 전환에는 브라우저 네이티브 View Transitions를 사용합니다.

새 콘텐츠 발행하는 법

모든 콘텐츠는 src/content/ 아래에 들어있어요. 새 .md 파일을 만들기만 하면 됩니다:

발행할 콘텐츠 저장 위치 필수 필드
포스트 src/content/posts/ title, description, date, category (ai / code / life)
프롬프트 src/content/prompts/ title, date, model (본문이 프롬프트 원문)
작업물 src/content/works/ title, date, image, tool

이미지는 public/ 아래에 두고, 본문에서 참조할 때는 /works/xxx.jpg 형식으로 적어줍니다.

X(트위터)에서 동기화하기

X에 올린 긴 글, 프롬프트, 작업물은 명령어 한 줄로 동기화할 수 있어요:

npm run import:x

스크립트가 공개 포스트를 긁어와서 긴 글인지, 프롬프트인지, 작업물인지 자동으로 판별하고 이미지와 비디오를 로컬로 다운로드한 뒤 해당 Markdown 파일을 생성해 줍니다. 분류가 잘못된 글은 scripts/x-import.config.json에서 수동으로 지정해 주면 돼요.

로컬 미리보기

npm run dev

http://localhost:4321 에 접속하면 바로 확인할 수 있고, 파일을 수정하면 브라우저가 자동으로 새로고침됩니다.