핀로그 시드

핀로그 팀의 디자인 시드와 기록을 담는 사이트.

• 시드 — 색·활자·간격을 정한 기준과 그렇게 정한 이유
• 컬럼 — 만들면서 겪은 것을 담당자가 직접 쓴 글

실행

npm install
npm run dev      # http://localhost:3000

npm run build    # out/ 에 정적 파일 생성

정적 산출물이라 nginx로 띄우든 어디에 올리든 같은 결과물을 씁니다.

글 쓰기

content/column/_template.mdx를 복사해서 content/column/내-글.mdx로 만들고 채웁니다. 파일 이름이 주소가 되므로 영문 소문자와 하이픈만 씁니다. _로 시작하는 파일은 색인에 오르지 않으니, 쓰다 만 글은 _초안.mdx로 두면 됩니다.

앞머리(frontmatter)에 title·summary·date·author가 반드시 있어야 하고, 없으면 빌드가 실패합니다. 조용히 넘어가는 것보다 낫습니다.

---
title: Terraform을 안 쓰기로 한 이유
summary: 관리할 클라우드 자원이 없는데 프로비저닝 도구를 두면, 도구만 남습니다.
date: 2026-07-26
author: 인프라
role: 배포·운영
draft: true # 지우면 초안 표시가 사라집니다
---

색인 번호는 date 순으로 자동으로 매겨집니다. 오래된 것이 001이고, 목록은 최신순으로 보이지만 번호는 변하지 않습니다.

토큰 고치기

값은 전부 tokens/source.mjs 한 파일에 있습니다.

# 1. tokens/source.mjs 수정
npm run tokens
# 2. app/tokens.css 와 tokens/generated.json 이 다시 생성됨

app/tokens.css와 tokens/generated.json은 생성물입니다. 직접 고쳐도 다음 실행 때 덮어써집니다. 시드 문서 페이지의 색상표·활자 견본도 이 JSON을 읽어 그리므로, 소스를 고치면 문서가 같이 바뀝니다.

브랜드색은 브랜드 리소스의 네 색에서 왔습니다. Pin Navy #042142 · Log Mint #3BB7A2 · Paper White #FAF7F6 · Ink Gray #6D6663.

색을 바꿨다면 반드시 대비를 확인합니다.

npm run check:contrast   # 라이트·다크 30개 조합
npm run check            # 토큰 + 대비 + 타입 한 번에

public/brand/의 로고 원본은 색과 비율을 바꾸지 않습니다. 브랜드 가이드가 색 변경·비율 왜곡·회전을 금지합니다. 다크 배경에는 logo-white.png를 씁니다.

구조

tokens/source.mjs      값의 유일한 출처
scripts/build-tokens.mjs  → app/tokens.css, tokens/generated.json
content/seed/*.mdx     시드 문서
content/column/*.mdx   컬럼
lib/content.ts         MDX를 읽어 색인을 만든다
components/Specimen.tsx  토큰을 실물로 보여주는 것들
app/globals.css        디자인 전부

설계 메모

당근 seed-design에서 원칙만 가져왔습니다.

가져온 것	가져오지 않은 것
팔레트 → 역할 2계층 분리	rootage YAML 코드젠 엔진
팔레트 토큰이 라이트/다크를 쌍으로 소유	qvism 레시피 엔진
소스 하나, 나머지는 생성물	컴포넌트 패키지, 모노레포, Figma 동기화

6명이 MVP를 만드는 동안 유지할 수 있는 만큼만 두었습니다. 자세한 이유는 사이트의 시드를 두는 이유 문서에 있습니다.

알려진 것

• npm audit이 high 3건을 보고합니다. 전부 Next 내부 의존성(postcss·sharp)이고 npm audit fix --force는 Next을 9.x로 되돌립니다. Next 업데이트를 기다립니다.
• 폰트는 Google Fonts와 jsDelivr에서 받습니다. 외부 요청을 막아야 하면 self-host로 바꿔야 합니다.