notes
그록 봇으로 디자인·기획하기 — Astro 블로그 화면 구상
Astro 블로그 화면의 디자인·기획 방향과 노션 글 전환 구조 메모.
이 글은 Astro 블로그의 디자인·기획을 어떻게 잡았는지 적는 메모다. 피그마에 화면을 그리기 전에, 그록 봇들을 역할별로 나눠 대화를 돌리며 방향을 맞췄다. 전략은 Notion에 남기고, 화면은 Figma에 쌓았다.
날짜: 2026-09-14 · Figma 샷: exports/notion-2026-09-14 (최신 export)
관련: Untitled · 이 블로그를 만드는 이유 — 노션 글을 밖으로 옮기기 전에
Figma: Astro Blog Design
1. 왜 봇끼리 화면을 구상했나
혼자 피그마를 열어서 바로 그리기보다, 역할이 다른 그록 봇에게 나눠 맡기고 대화를 쌓는 편이 빨랐다.
- 노션 문서 정리싸개 — 방향·CMS 전제·첫 글을 Notion에 문서화
- 풀야근 노이로제 디자이너 — Figma 화면·컴포넌트·토큰, Admin/글쓰기 UI 정리
- 다크서클 10cm 기획자 — 공개 화면 IA·카피 방향 (필요 시)
- 상급 노예 개발자 — 구현 가능 범위·Astro/Notion API 쪽 제약
사람은 “공개만 / Notion에서만 쓴다 / Admin 없다” 같은 한 줄을 던지고, 봇들이 서로 이어서 화면과 문서를 맞춘다.
에이전트 목록과 채팅이 한 화면에 있다. 왼쪽은 역할별 봇, 오른쪽은 디자이너·문서 봇이 주고받은 흐름이다.
2. 전략은 Notion, 화면은 Figma
방향이 흔들릴 때마다 Notion에 한 페이지로 고정했다. 예: 글은 Notion만, 블로그는 API로 읽기만, 관리자·DnD·글쓰기 UI는 없다.
디자이너 봇은 그 문서를 기준으로 공개 화면만 Figma에 맞추겠다고 회신했고, 남아 있던 글등록(Admin) 프레임은 제거·Deprecated로 돌렸다.
위 캡처처럼 “공개 Home / Post / Insights / About만”, “작성은 Notion”, “빌드 후 반영”이 대화에 반복된다. 피그마 산출물도 그 범위로 잘랐다.
3. 화면 구상 루프
대략 이런 식으로 돌렸다.
- 사람: 한 줄 제약 (Notion CMS · 공개만 · Admin 없음)
- 문서 봇: Notion에 방향성 페이지 작성·수정
- 디자이너 봇: Figma Screens / Components / Specs에 반영, PNG로 남김
- 사람: 캡처·피드백 (“글등록 화면 보이면 안 됨” 등)
- 디자이너: Admin 프레임 숨김·삭제, 공개 화면만 유지
- 다시 문서·스펙에 링크·샷 정리
UX 레퍼런스도 디자이너 채팅 안에서 읽고, 다크 셸·Ink Teal 액센트·컴포넌트 보드로 옮겼다.
4. Figma에 나온 공개 화면 (2026-09-14 export)
활성 파일: EWt5VrwYVBpTAfXpqJnRah · export 폴더 exports/notion-2026-09-14.
공개 IA: Home / · Post /posts/... · Insights /insights · About /about
작성·어드민·레이아웃 DnD는 범위 밖.
Home Desktop 2:78
Home Mobile 2:18
Hero 클로즈업 (WebGL Monitor 0< 슬롯)
Post Desktop 2:181
Post Mobile 2:141
Insights Desktop 5:624
Insights Mobile 5:690
About Desktop 5:756
About Mobile 5:790
Components DS Board 48:256
5. 페이지 전환 · 스켈레톤 (2026-09-15)
디자이너가 Specs에 mid-nav 스켈레톤·전환 타이밍을 올렸다. 구현 기준은 Figma 143:421이고, PNG는 exports/page-transition/에 있다.
전환은 TopNav를 고정한 채 본문만 스켈레톤 → 콘텐츠로 짧게 크로스페이드한다. 권장 구간은 페이드인 약 120–160ms, 콘텐츠로 넘길 때 180–280ms ease-out이다. 셸 배경은 #0B1220, 스켈레톤 뼈대는 #1E293B / #334155, shimmer는 Ink Teal #0F766E만 쓴다. 보라·원형 스피너·풀페이지 로더는 쓰지 않는다. View Transitions / Astro 라우터로 chrome 밖 슬롯만 바꾸는 쪽이 맞다. 데이터가 없으면 스켈레톤을 오래 두지 말고 Tags Empty 같은 기존 empty로 넘긴다.
Motion · Transition Specs
Transition Desktop
Transition Mobile
Skeleton · List (Desktop)
Skeleton · Post body (Desktop)
6. 페이징 · 태그 택소노미 (2026-09-15)
디자이너가 Posts·Tags 목록과 페이지네이션을 Specs / Pagination set에 올렸다. PNG는 exports/pagination/에 있다.
TagFilter 칩은 DB 표시명을 그대로 쓰고, URL /tags/[slug]는 Untitled 표의 슬러그 맵을 따른다 (next-js, library-skills, ci-cd, react-native 등).
페이징은 목록 아래에 quiet 페이지 컨트롤을 두는 쪽이다. TopNav는 고정하고, 셸 토큰(#0B1220 / Ink Teal #0F766E)은 기존과 같다. 한 페이지 10글, 현재 페이지는 teal 밑줄, 메타는 muted 1-10 / N이다. 글이 없으면 페이저를 숨긴다.
Posts · Tags · Pagination Specs
Pagination DS
Posts Desktop (paginated)
Tags Desktop (paginated)
Posts Mobile
Tags Mobile
Pager closeup
TagFilter closeup
Pagination component
7. 히어로 카피 (2026-09-15 확정)
「동작하게 만들고, 읽히게 남긴다.」 · Home 2:78 / 2:18 · exports/hero-tagline/
하이라이트(틸 그라데이션): 「읽히게 남긴다.」 전체(마침표 포함).
Hero zone final
Home Desktop
Home Mobile
8. 정리
이 블로그의 디자인·기획은 그록 봇들이 역할별로 문서를 쓰고·화면을 고치고·서로 링크를 주고받는 협업으로 화면을 구상했다.
- 전략·CMS 전제 → Notion
- 화면·컴포넌트·모션 → Figma
- 사람은 제약과 피드백만 짧게
다음에 코드로 옮길 때도 같은 문서·같은 공개 네 화면만 기준으로 삼으면 된다.