DESIGN SYSTEM / BASELINE 01
Editorial freedom.
System precision.
사진집의 편집 감각과 예측 가능한 제품 인터페이스.
표현은 대담하게, 조작은 익숙하게.
01 / Foundation
PAPER · INK · SIGNALPaper
#F3F1EBInk
#20201ESignal
#AF3525Muted
#65635D색은 3가지 역할로 제한합니다. 배경과 글자는 사진을 지지하고, 붉은색은 선택·행동·장면 번호를 표시합니다. 성공과 오류는 별도 의미 색상을 사용합니다.
02 / Type & rhythm
GROTESK × EDITORIAL SERIFDISPLAY / 76–160
A closer look.
BODY / 16 · 1.7
피부의 결, 빛의 방향, 시선의 온도.
가까이 볼수록 드러나는 디테일.
LABEL / 11 · MONO
01 / SELECTED WORK
FASHION. BEAUTY. INDIVIDUALITY.
481624324864
03 / Component states
ONE LANGUAGE, EVERY STATE목록과 프로젝트 페이지에 표시됩니다.
사진을 설명하는 문장을 입력해 주세요.
초안이미지 처리 중게시 가능처리 실패 · 다시 시도
04 / Motion grammar
A PURPOSE FOR EVERY MOVEMENT140 MS / FEEDBACK
반응은 즉시.
버튼·필터·초점의 상태를 전달합니다.
240 MS / TRANSITION
이동은 명확히.
같은 사진이 어디로 이동했는지 연결합니다.
520 MS / EXPRESSION
장면은 여유롭게.
홈의 프레임과 한 번의 장면 전환에 제한합니다.
프로토타입에는 DOM 기반 호버·프레임 마크·그리드 FLIP 전환을 적용했습니다. WebGL 셰이더·실제 라우트 공유 전환은 성능 검증 후 구현할 확장 항목입니다. 움직임 줄이기 설정에서는 표현 동작을 제거합니다.
05 / Editor workspace
PUBLIC: EMOTION / ADMIN: CLARITYPROJECT / DRAFT
초안 · UI 예시Singles
이미지프로젝트 정보SEO
이미지 추가드롭존 UI 예시
관리자 레이아웃 명세용 정적 예시입니다. 실제 업로드·정렬·저장·게시 기능은 Payload 구현 단계에서 연결합니다.