gitmoru 사이트

gitmoru 를 소개하는 사이트입니다.

pnpm install
pnpm dev      # 개발 서버
pnpm check    # 타입 검사 + 빌드
pnpm shots    # 앱 화면 다시 찍기
pnpm og       # 공유 카드 다시 만들기

올리기 전에 pnpm check 를 돌리세요. astro build 는 타입을 안 봅니다. 그래서 사전 문구를 엉뚱한 자리에 넣어도 빌드는 통과하고 화면만 빈칸이 돼요. 실제로 그렇게 두 군데가 비어 있었습니다.

구조

한 장으로 밀어넣지 않고 나눴습니다. 사고가 난 사람은 시작하기 만 필요하고, 도입을 고민하는 사람은 왜 판정 안 하나 부터 읽거든요. 필요한 데로 바로 보낼 수 있어야 합니다.

주소	무엇	흙
/	소개, 실제 출력, 30초 설치	지표
/why	왜 판정하지 않나	표토
/how	어떻게 도나 (포스트잇, 90일 한계)	심토
/start	받아서 켜기, 자주 막히는 곳	자갈층
/mcp	AI 붙이기, 도구 11개	점토층
/story	만든 이유	암반

페이지마다 다른 깊이의 흙 위에 놓입니다. 아래로 갈수록 짙어지고, 띠 경계마다 지층선이 그어져요. 앱 화면 아래에서 모루가 파고 다니는 그 땅입니다.

언어

한국어는 /why, 나머지는 /en/why, /ja/why 로 갑니다.

주소가 달라야 검색 엔진이 언어별로 잡습니다. 한 주소에서 자바스크립트로 말만 바꾸면 검색 결과에는 한 언어만 남아요. 그래서 언어 고르는 자리도 셀렉트가 아니라 링크입니다.

• hreflang 을 세 언어 + x-default 로 걸어요
• canonical 이 자기 언어를 가리켜요
• 사이트맵에 xhtml:link 대체 링크가 54개 들어갑니다

문구는 옮긴 게 아니라 그 언어로 다시 썼습니다. 앱과 같은 기준이에요.

정해둔 것

색과 픽셀 규칙은 앱에서 가져옵니다. 사이트가 자기 팔레트를 고르면 브랜드가 갈라져요. 앱에서 색을 바꾸면 tokens.css 도 같이 바꿉니다.

스프라이트도 앱에서 복사한 것입니다. sprites.ts 를 손으로 고치지 마세요. 모루가 앱과 사이트에서 다르게 생기면 그때부터 캐릭터가 아닙니다. 새 동작은 앱에 먼저 넣고 pnpm sprites 로 확인한 뒤 이 파일을 다시 복사합니다.

모루는 흙 위에서 안 보입니다. 몸통이 #6f5442, 표토가 #6d5138 이라 대비가 1.05 예요. 상자를 깔아 가리는 방법을 먼저 해봤는데 액자에 갇힌 것처럼 어색해서, 실루엣에 테두리를 둘렀습니다. 도트 게임이 원래 쓰는 방법이고, 밝은 배경에서는 테두리가 형체를 만들고 어두운 배경에서는 몸통 색이 살아납니다. 둘이 번갈아 일해요.

모션은 그 페이지가 하는 말입니다. 장식이 아니에요.

페이지	모션	왜
/	peek	땅에서 올라옴
/why	shake	도리도리. "안전합니다" 라고 안 한다
/how	dig	파는 중
/start	wave	인사
/mcp	carry	건네기. 읽는 건 AI 에게 넘긴다
/story	nod	담담하게 끄덕

픽셀 한 칸은 화면을 따라 자랍니다. 앱은 13px 글씨에 3px 테두리라 비율이 맞는데, 큰 화면에서 64px 헤드라인 옆의 3px 그림자는 의도가 아니라 실수처럼 보여요.

--px: clamp(3px, 0.32vw, 7px);

자바스크립트 파일이 0개입니다. 모루 프레임을 빌드할 때 SVG 로 구워서 HTML 에 박아요. 가로로 이어진 같은 색은 하나로 합쳐서, 페이지당 gzip 5KB 입니다. 프레임을 겹쳐두고 hidden 만 옮기기 때문에 자바스크립트가 꺼져 있어도 첫 장은 보여요.

문구 규칙은 WRITING.md 에 있습니다. 토스와 당근 원칙을 읽고 우리 상황에 맞게 고쳤어요. 특히 일부러 어기는 것 셋을 먼저 보세요.

올리기

main 에 밀면 GitHub Pages 로 나갑니다. 타입 검사를 통과해야 올라가요.

서버가 할 일이 없어서 정적 호스팅으로 갑니다. 남의 플랫폼을 끼우면 그쪽이 방문 기록을 갖게 되는데, 화면에 "분석 도구를 쓰지 않습니다" 라고 적어뒀어요. 그 말과 어긋나지 않는 쪽을 골랐습니다.

도메인은 public/CNAME 에 있습니다. 바꾸려면 거기와 astro.config.mjs 의 site 를 같이 고치세요. site 가 틀리면 사이트맵과 공유 카드 주소가 통째로 어긋납니다.

검색과 공유

사이트맵	xhtml:link 로 언어별 대체 링크까지. 21개 URL
hreflang	세 언어 + x-default
canonical	페이지마다 자기 언어
공유 카드	언어별 1200x630 PNG. SVG 는 대부분의 메신저가 안 그립니다
구조화 데이터	SoftwareApplication
robots.txt	사이트맵 위치를 알려주고, 공유 카드 화면은 막습니다

keywords 메타는 안 씁니다. 검색 엔진이 안 봐요. 대신 페이지마다 제목과 설명을 그 언어로 따로 씁니다.