- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다 - 5단계 기계 검사 4번째: design-gate 실행 의무화 - references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙 - tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합) - 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0) feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18) - 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판 - LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png) - 시간표 자동배치 결함 수리(명시적 격자 좌표) - QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인
This commit is contained in:
Yun Chan
parent
78ddc8b61a
commit
72337b7ee0
226 changed files with 18212 additions and 380 deletions
|
|
@ -4,45 +4,61 @@
|
|||
* 사례를 추가할 때 **여기 한 항목만 넣으면** 모자이크 그리드에 자동으로 들어간다.
|
||||
* 페이지 코드는 건드리지 않는다.
|
||||
*
|
||||
* 순서가 곧 표시 순서다(최근 것을 위에). `size` 는 타일 크기이고,
|
||||
* 전부 같은 크기로 두지 마라 — 균일한 격자는 이 스킬이 금지하는 형태다.
|
||||
* 목요일의 화원이 선두(size: "lg")로 가장 크게 나오고,
|
||||
* 나머지는 6열 모자이크 그리드에서 3+3 (md), 2+2+2 (sm) 리듬으로 배치된다.
|
||||
*/
|
||||
import type { ImageMetadata } from "astro";
|
||||
import thursdayFlowers from "../assets/shots/work-thursday-flowers.png";
|
||||
import thursdayFlowers2 from "../assets/shots/work-thursday-flowers-2.png";
|
||||
import luminaOptics from "../assets/shots/work-lumina-optics.png";
|
||||
import luminaOptics2 from "../assets/shots/work-lumina-optics-2.png";
|
||||
import orbitAerospace from "../assets/shots/work-orbit-aerospace.png";
|
||||
import orbitAerospace2 from "../assets/shots/work-orbit-aerospace-2.png";
|
||||
import muwolCoffee from "../assets/shots/work-muwol-coffee.png";
|
||||
import muwolCoffee2 from "../assets/shots/work-muwol-coffee-2.png";
|
||||
import pulsegate from "../assets/shots/work-pulsegate.png";
|
||||
import pulsegate2 from "../assets/shots/work-pulsegate-2.png";
|
||||
import hyangIncense from "../assets/shots/work-hyang-incense.png";
|
||||
import hyangIncense2 from "../assets/shots/work-hyang-incense-2.png";
|
||||
import formArch from "../assets/shots/work-form-architecture.png";
|
||||
import formArch2 from "../assets/shots/work-form-architecture-2.png";
|
||||
import synapseBci from "../assets/shots/work-synapse-bci.png";
|
||||
import synapseBci2 from "../assets/shots/work-synapse-bci-2.png";
|
||||
import baekjeCeladon from "../assets/shots/work-baekje-celadon.png";
|
||||
import baekjeCeladon2 from "../assets/shots/work-baekje-celadon-2.png";
|
||||
import overtoneSound from "../assets/shots/work-overtone-sound.png";
|
||||
import overtoneSound2 from "../assets/shots/work-overtone-sound-2.png";
|
||||
import fontFoundry from "../assets/shots/work-font-foundry.png";
|
||||
import fontFoundry2 from "../assets/shots/work-font-foundry-2.png";
|
||||
import gaonLms from "../assets/shots/work-gaon-lms.png";
|
||||
import gaonLms2 from "../assets/shots/work-gaon-lms-2.png";
|
||||
import dureEnrollment from "../assets/shots/work-dure-enrollment.png";
|
||||
import dureEnrollment2 from "../assets/shots/work-dure-enrollment-2.png";
|
||||
|
||||
export interface WorkItem {
|
||||
slug: string;
|
||||
/** 사이트 이름. 실제 클라이언트가 아니라 데모면 그렇다고 적는다 */
|
||||
name: string;
|
||||
/** 무엇을 만든 것인가 — 한 줄 */
|
||||
kind: string;
|
||||
/** 2단계에서 정한 한 문장 컨셉 */
|
||||
concept: string;
|
||||
/** 감수한 리스크 하나. 이 스킬의 결과물을 다른 것과 구별하는 지점이다 */
|
||||
risk: string;
|
||||
preset: string;
|
||||
/** YYYY-MM */
|
||||
date: string;
|
||||
/** 자랑이 아니라 잰 값. 없으면 비워 둔다 */
|
||||
metrics: string[];
|
||||
/** 실제로 열리는 주소. 목업이 아니라 동작하는 사이트여야 한다 */
|
||||
href: string;
|
||||
shot: ImageMetadata;
|
||||
/** 호버할 때 바뀌는 두 번째 컷. 없어도 된다 */
|
||||
shotAlt?: ImageMetadata;
|
||||
alt: string;
|
||||
/** 모자이크 타일 크기 */
|
||||
size: "lg" | "md" | "sm";
|
||||
}
|
||||
|
||||
export const WORK: WorkItem[] = [
|
||||
/* ── 1행: 선두 대형 히어로 타일 (6열 풀 와이드) ── */
|
||||
{
|
||||
slug: "thursday-flowers",
|
||||
name: "목요일의 화원",
|
||||
kind: "플로럴 스튜디오 · 한 장",
|
||||
concept: "꽃을 파는 가게가 아니라, 꽃으로 작업하는 사람의 기록",
|
||||
risk: "첫 화면에 큰 사진을 깔지 않았습니다. 크기가 제각각인 사진 셋을 정렬선 없이 흩뿌립니다",
|
||||
concept: "꽃을 파는 가게가 아니라, 꽃으로 작업하는 사람의 기록 — 서촌 골목 안의 에디토리얼",
|
||||
risk: "첫 화면에 큰 사진을 깔지 않고, 크기가 제각각인 사진 셋을 정렬선 없이 여백 위에 흩뿌립니다",
|
||||
preset: "editorial",
|
||||
date: "2026-08",
|
||||
metrics: ["이미지 603KB", "JS 0.6KB", "본문 대비 13.75:1", "하드 게이트 12/12"],
|
||||
|
|
@ -52,4 +68,194 @@ export const WORK: WorkItem[] = [
|
|||
alt: "목요일의 화원 첫 화면 — 크림색 배경에 꽃 사진 셋이 서로 다른 위치에 놓여 있습니다",
|
||||
size: "lg",
|
||||
},
|
||||
|
||||
/* ── 2행: 2열 모자이크 (3 + 3) — 다크/라이트 교차 ── */
|
||||
{
|
||||
slug: "lumina-optics",
|
||||
name: "Lumina Optics",
|
||||
kind: "광학 렌즈 시험소",
|
||||
concept: "하나의 빛줄기, 프리즘 하나 — 굴절과 분산을 매 프레임 GPU로 계산하는 시험대",
|
||||
risk: "렌더링 영상 대신 실제 셰이더 굴절(IOR·분산 슬라이더)을 첫 화면에 두고, 본문은 캔버스와 완전히 분리합니다",
|
||||
preset: "refraction / WebGL",
|
||||
date: "2026-08",
|
||||
metrics: ["three.js 165KB 지연로드", "IOR 1.45–2.20 실시간", "WebGL 실패 시 사진 폴백", "하드 게이트 12/12"],
|
||||
href: "/work/lumina-optics/",
|
||||
shot: luminaOptics,
|
||||
shotAlt: luminaOptics2,
|
||||
alt: "Lumina Optics — 어두운 시험대 위 프리즘을 통과한 빛이 스펙트럼으로 펴지는 WebGL 장면과 MTF 곡선",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "form-architecture",
|
||||
name: "스튜디오 폼 (FORM)",
|
||||
kind: "공간건축연구소 아카이브",
|
||||
concept: "판맞춤 도면 묶음 — 색이 아니라 선과 치수가 말한다",
|
||||
risk: "사진 없는 역연도 텍스트 인덱스와, 스티키 평면도가 섹션을 지나는 동안 스스로 그려지는 구조",
|
||||
preset: "swiss-minimal",
|
||||
date: "2026-08",
|
||||
metrics: ["무채색 100%", "Radius 0", "scroll-draw 평면도", "하드 게이트 12/12"],
|
||||
href: "/work/form-architecture/",
|
||||
shot: formArch,
|
||||
shotAlt: formArch2,
|
||||
alt: "스튜디오 폼 — 헤어라인으로 나뉜 텍스트 인덱스와 선으로 그려진 평면도, 흑백 사진 3점",
|
||||
size: "md",
|
||||
},
|
||||
|
||||
/* ── 3행: 3열 모자이크 (2 + 2 + 2) ── */
|
||||
{
|
||||
slug: "muwol-coffee",
|
||||
name: "무월 (霧月)",
|
||||
kind: "싱글오리진 원두 정기구독",
|
||||
concept: "종이 원장처럼 정직한 구독 — 가격은 첫 화면에, 거래 내역은 원장으로 공개",
|
||||
risk: "세로 GNB와 카드 대신 원장의 행(行) 문법으로 원두를 나열하고, 구독 CTA는 회색조에서 가장 어두운 반전 블록으로",
|
||||
preset: "quiet-commerce",
|
||||
date: "2026-08",
|
||||
metrics: ["가격 첫 화면 노출", "앰버 강조 1색", "산미-바디 좌표 플롯", "하드 게이트 12/12"],
|
||||
href: "/work/muwol-coffee/",
|
||||
shot: muwolCoffee,
|
||||
shotAlt: muwolCoffee2,
|
||||
alt: "무월 로스터리 — 원두 사진과 가격이 함께 놓인 히어로, 향미 좌표 플롯과 생두 매입 원장",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "pulsegate",
|
||||
name: "Pulsegate",
|
||||
kind: "Edge Latency & Synthetic Probe",
|
||||
concept: "발광 없는 계기판 — 코발트는 배경이 아니라 글자와 차트 선으로만 존재한다",
|
||||
risk: "깜빡이는 상태점과 티커를 버리고 정적 24시간 프레임 하나, 그리고 스크롤에 따라 그려지는 배선도를 배치합니다",
|
||||
preset: "dark-instrument",
|
||||
date: "2026-08",
|
||||
metrics: ["코발트=잉크 전용", "CSS scroll-draw 배선도", "단일 가격 행", "하드 게이트 12/12"],
|
||||
href: "/work/pulsegate/",
|
||||
shot: pulsegate,
|
||||
shotAlt: pulsegate2,
|
||||
alt: "Pulsegate — 24시간 p99 차트가 담긴 정적 계기 프레임과 코발트색 선의 배선 다이어그램",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "hyang-incense",
|
||||
name: "향연 (享煙)",
|
||||
kind: "자연 침향 아카이브",
|
||||
concept: "한지 위의 장부 — 여백이 주인공이고 연기 한 줄기가 흔적이다",
|
||||
risk: "상품 사진 대신 사진 없는 목록(텍스트가 상품)과 한지 그레인, 세로쓰기 캡션으로 장부의 물성을 만듭니다",
|
||||
preset: "quiet-luxury",
|
||||
date: "2026-08",
|
||||
metrics: ["본문 17px·1.9행간", "한지 SVG 그레인", "수지 장부 공개", "하드 게이트 12/12"],
|
||||
href: "/work/hyang-incense/",
|
||||
shot: hyangIncense,
|
||||
shotAlt: hyangIncense2,
|
||||
alt: "향연 — 넓은 한지 여백 위에 세로로 피어오르는 연기 사진과 조용한 숙성 장부",
|
||||
size: "sm",
|
||||
},
|
||||
|
||||
/* ── 4행: 2열 모자이크 (3 + 3) ── */
|
||||
{
|
||||
slug: "orbit-aerospace",
|
||||
name: "궤도 우주공학",
|
||||
kind: "75kN 메탄 엔진 사양서",
|
||||
concept: "도면은 말하지 않고 측정만 한다 — 재생냉각 엔진의 단면도와 지상 연소 시험 기록",
|
||||
risk: "홍보 문구 대신 손으로 그린 엔진 단면도를 첫 화면에, 보류된 시험까지 지우지 않은 기록표를 함께 둡니다",
|
||||
preset: "technical-schematic",
|
||||
date: "2026-08",
|
||||
metrics: ["모든 수치에 측정조건", "SF-27–31 시험 공개", "구리 액센트 1색", "하드 게이트 12/12"],
|
||||
href: "/work/orbit-aerospace/",
|
||||
shot: orbitAerospace,
|
||||
shotAlt: orbitAerospace2,
|
||||
alt: "궤도 우주공학 — 제도 모눈 위 엔진 단면도와 구리색 강조의 사양표, 야간 연소 시험 사진",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "synapse-bci",
|
||||
name: "Synapse BCI Lab",
|
||||
kind: "64채널 신경 인터페이스",
|
||||
concept: "측정 조건이 붙은 계기 — 시뮬레이션은 시뮬레이션이라고 적고, 미측정값은 공백으로 둔다",
|
||||
risk: "64채널 스파이크 래스터 캔버스(화면 밖에서 정지)를 첫 화면에 두고, 윤리 섹션을 콘텐츠로 승격합니다",
|
||||
preset: "dark-instrument",
|
||||
date: "2026-08",
|
||||
metrics: ["래스터 SIM 명시", "미측정값 '—' 표기", "윤리 섹션 상위", "하드 게이트 12/12"],
|
||||
href: "/work/synapse-bci/",
|
||||
shot: synapseBci,
|
||||
shotAlt: synapseBci2,
|
||||
alt: "Synapse BCI — 골드색 스파이크 틱이 흐르는 64채널 래스터 캔버스와 신경 칩 접사 사진",
|
||||
size: "md",
|
||||
},
|
||||
|
||||
/* ── 5행: 3열 모자이크 (2 + 2 + 2) ── */
|
||||
{
|
||||
slug: "baekje-celadon",
|
||||
name: "비색의 침묵 (翡色之靜)",
|
||||
kind: "고려청자 특별전 큐레이션",
|
||||
concept: "암실의 세 개의 방 — 사진이 어두울수록 유약이 가까워진다",
|
||||
risk: "전시 포스터 형식을 버리고 빙렬 매크로를 풀블리드 판으로, 상감 접사와 '제1실·제2실' 방 번호 문법으로 구성합니다",
|
||||
preset: "editorial-archival",
|
||||
date: "2026-08",
|
||||
metrics: ["빙렬 풀블리드 판", "비색 액센트 1색", "3개 방 구조", "하드 게이트 12/12"],
|
||||
href: "/work/baekje-celadon/",
|
||||
shot: baekjeCeladon,
|
||||
shotAlt: baekjeCeladon2,
|
||||
alt: "비색의 침묵 — 암실 스포트라이트 아래 청자 주자 사진과 빙렬 매크로의 풀블리드 판",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "overtone-sound",
|
||||
name: "오버톤 사운드랩",
|
||||
kind: "공간 음향 · DSP 연구소",
|
||||
concept: "어두운 스튜디오 바닥의 목록 — 격자는 일부러 비틀었다",
|
||||
risk: "절차적 유사-FFT 캔버스(오디오 디코드 없음)와 스태거 2열 아카이브, 압축 타입 스케일로 반복을 피합니다",
|
||||
preset: "anti-grid",
|
||||
date: "2026-08",
|
||||
metrics: ["캔버스 파형·화면밖 정지", "스태거 2열 아카이브", "앰버 1색", "하드 게이트 12/12"],
|
||||
href: "/work/overtone-sound/",
|
||||
shot: overtoneSound,
|
||||
shotAlt: overtoneSound2,
|
||||
alt: "오버톤 사운드랩 — 앰버색 파형이 흐르는 어두운 히어로와 어긋난 두 열의 작업 목록",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "font-foundry",
|
||||
name: "한성활자연구소",
|
||||
kind: "본문용 한글 활자 파운드리",
|
||||
concept: "글자가 상품이다 — 첫 화면의 거대 글리프와 인주각, 나머지는 물성과 눈금",
|
||||
risk: "Lorem ipsum 없는 스페시멘과 자간·행간·크기가 실시간 반영되는 조판 시험대를 전면에 배치합니다",
|
||||
preset: "editorial-archival",
|
||||
date: "2026-08",
|
||||
metrics: ["시험대 슬라이더 3종", "Lorem 0회", "인주 액센트 1색", "하드 게이트 12/12"],
|
||||
href: "/work/font-foundry/",
|
||||
shot: fontFoundry,
|
||||
shotAlt: fontFoundry2,
|
||||
alt: "한성활자연구소 — 한지 톤 위 거대한 한글 글리프와 슬라이더 3개의 조판 시험대",
|
||||
size: "sm",
|
||||
},
|
||||
|
||||
/* ── 6행: 관리 앱 2종 (3 + 3) — 메뉴·모달이 실제로 작동한다 ── */
|
||||
{
|
||||
slug: "gaon-lms",
|
||||
name: "가온 학적부",
|
||||
kind: "학습관리 콘솔 · 8화면",
|
||||
concept: "종이 학적부를 화면으로 옮긴 관리 콘솔 — 형광펜 밑줄과 날인이 상태를 말한다",
|
||||
risk: "관리 콘솔의 기본값인 파란 사이드바와 카드 그리드를 버리고, 학적부의 행(行) 문법으로 화면 여덟 개를 묶어 짓습니다",
|
||||
preset: "ledger-console",
|
||||
date: "2026-08",
|
||||
metrics: ["뷰 9종 전환", "알림 센터", "공지 아코디언 · 분류 필터", "수업 진도 바", "출석 일별 합계", "과목 필터", "모달 2종"],
|
||||
href: "/work/gaon-lms/",
|
||||
shot: gaonLms,
|
||||
shotAlt: gaonLms2,
|
||||
alt: "가온 학적부 — 종이 톤 대시보드의 주간 출석 막대와 과제 마감 표, 흑연 사이드바",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "dure-enrollment",
|
||||
name: "두레대학 수강신청",
|
||||
kind: "수강신청 · 6화면",
|
||||
concept: "공문처럼 읽히는 수강신청 — 명조 제목과 IBM Plex 본문, 벽돌 申 도장이 상태를 누른다",
|
||||
risk: "여섯 화면이 하나의 상태(신청·관심)를 공유합니다. 시간 겹침·학점 초과·정원 마감은 도장을 누르기 전에 막습니다",
|
||||
preset: "timetable-ink",
|
||||
date: "2026-08",
|
||||
metrics: ["시간 겹침 즉시 차단", "색인탭 6종 전환", "이수 학점 실시간 집계", "빈 상태 안내"],
|
||||
href: "/work/dure-enrollment/",
|
||||
shot: dureEnrollment,
|
||||
shotAlt: dureEnrollment2,
|
||||
alt: "두레대학 수강신청 — 과목 원장 목록과 주홍 도장 블록이 놓이는 주간 시간표 격자",
|
||||
size: "md",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue