Cards summarize, viewers inspect.
카드는 대표 이미지와 맥락만 보여주고, 확대/비교/원본 확인은 viewer layer가 맡는다.
design system
Devlog component workbench
토큰, 카드, 이미지 뷰어, 비교 뷰어를 한 페이지에서 확인하는 내부 품질 게이트다.
Mobile is first-class.
A/B 풀뷰는 모바일에서 세로 stack, 데스크톱에서 side-by-side를 기본으로 한다.
Sheet is evidence, not the control.
비교 sheet는 보조 증거이며, 기본 비교는 side/slide/stack으로 처리한다.
tokens
Foundations
현재 사이트가 실제로 사용하는 색, surface, radius, type scale, spacing을 한곳에서 본다.
#f4f1e8 #fffdf6 #e8eef0 #202125 #67645f #2f6d5a #345f7b #9a4b3f #b87928 eyebrow
Page Title Scale
Readable long-form archive copy with restrained operational tone.
Panel title
Small headings stay compact inside panels, cards, and tool surfaces.
Reference Prototype usable Needs polish
cards
Card states
이미지 카드는 조작 패널이 아니라 preview와 metadata를 제공해야 한다.
Visual Direction Reference
A/B/C style comparison
A baseline, B lighting treatment, C deferred direction을 한 장에서 비교한다.
Criteria 각 패널의 제작비/가독성/표현 차이가 분리되어 읽힌다.
Verdict A/B 중심 검증, C는 deferred
현재 visual path를 A baseline + B lighting treatment로 좁혔다.
docs/assets/style-samples/alchemy-workshop-style-comparison-v2.png Set C Prototype usable
Green Rug
Floor prop
Profile magenta-key / green-subject check
Metrics large floor shape, good room grounding
바닥 영역을 묶고 작업실 장면을 방처럼 보이게 하는 테스트용 소품.
Source chroma-key
viewers
Viewer primitives
Single, A/B, Slider를 같은 surface와 caption 규칙으로 본다.
Base scene
B-like lighting
interaction
Overlay launch states
텍스트 버튼 대신 이미지 표면/미리보기 자체가 inspection affordance를 제공해야 한다.
comparison
Comparison viewer story
세트 선택, side/slider/sheet 전환, 표면 클릭 확대를 한 번에 검증한다.
현재 가장 중요한 비교. A 기반 구조를 유지하면서 B 후보의 창빛, 깊이감, 병/증류기 glow가 어느 정도 유효한지 본다.
Base scene
B-like lighting
Base scene
Restrained lighting
