더마스터피스 홈페이지 리디자인
시안 6안 — 전체 사이트
한국어 버전 미리보기입니다. 브랜드 전용 서체 대신 시안별 웹폰트를 썼고, 로고(M 서명)는 그대로입니다. 각 시안은 홈·소개·사업 부문·작업 116건 상세·아카이브·콜라보레이터·문의까지 127페이지로 만들어져 있습니다. 동작 줄이기 설정을 켜면 효과가 꺼집니다. 이미지는 모두 예시이며 실제 공연 사진으로 교체될 예정입니다.
1 목록 Index
흰 바탕 위 텍스트만으로 짜인 디렉터리. 프로젝트 목록과 연도가 곧 디자인이고, 이미지는 hover 할 때만 조용히 나타납니다.
- 팔레트
- #FFFFFF · #000000 · #6E6E6E
- 서체
- Inter Tight · Pretendard
- 효과
- 히어로 문장 줄 단위 리빌 · 스크롤 연동 구분선 그리기 · 행 hover 반전 · 커서 따라오는 미리보기 · 페이지 전환(올라오며 등장)
- 레퍼런스
- Experimental Jetset · minimal.gallery
- 페이지
- 127페이지 · 작업 · 상세 예시 · 아카이브
2 정지 Still
검은 화면 한가운데 가는 이미지 띠 한 줄. 극장의 암전처럼 비워 두고 작품만 남깁니다.
- 팔레트
- #0A0A0A · #EDEDEB · #8C8C88
- 서체
- SUIT (300) · Cormorant Garamond Italic
- 효과
- Lenis 부드러운 스크롤 · 이미지 띠 clip-path 순차 리빌 · 고정(sticky) 크로스페이드 무대 · 암전 블러 페이지 전환
- 레퍼런스
- Philipp Hafner · Studio Dumbar · Order
- 페이지
- 127페이지 · 작업 · 상세 예시 · 아카이브
3 갤러리 Masterpiece Wall (수정)
작품을 거는 하얀 미술관 벽. 붓으로 그려지듯 나타나는 M 서명과 눈높이 캡션 — 장식 효과를 덜어내고 서체를 교체했습니다.
- 팔레트
- #FCFCFB · #0B0B0B · #86683B
- 서체
- Noto Serif KR (300) · Libre Caslon Condensed · Pretendard
- 효과
- M 서명 붓질 리빌 · 액자 이미지 붓질(clip-path) 스크롤 리빌 · 드래그로 넘기는 갤러리 · 메뉴 밑줄 그리기 · 액자→상세 모프
- 레퍼런스
- Snøhetta · Norgram
- 페이지
- 127페이지 · 작업 · 상세 예시 · 아카이브
6 비앙케토 Bianchetto — Margiela archive
흰 페인트(비앙케토)로 덮고, 번호를 매기고, 드러내는 아카이브 문서. 타자기 대문자 제목, 인덱스 채널 번호, 컨택트시트 프레임, 페이지마다 러닝헤드와 폴리오, [ ENDS ]로 닫히는 문서.
- 팔레트
- #F7F9FA · #EFF5FA · #231F20 · #8D989C
- 서체
- Courier Prime · Noto Serif KR · Wanted Sans
- 효과
- 비앙케토 흰 칠이 내려와 덮는 히어로 · 프레임 위 흰 칠 걷힘(스크롤 연동) · 단단한 가로 경계로 드러나는 페이지 전환 · 러닝헤드 스크롤스파이 · 썸네일→상세 모프
- 레퍼런스
- Maison Margiela
- 페이지
- 127페이지 · 작업 · 상세 예시 · 아카이브