Tessel & Rook

어떻게 만들어졌나

원본은 인터페이스·프로덕트 디자인 스튜디오의 포트폴리오 사이트입니다. 사례 6건, 아카이브 14행, FAQ 7개를 줄이지 않고 옮겼습니다.

그리드는 좌우 여백 40px에 6칸 210px, 간격 20px입니다. 메뉴 밑줄 6개가 곧 그리드 표시입니다.

흑백 두 색에 가는 세리프와 굵은 그로테스크를 한 문장 안에서 섞습니다. 서체는 Noto Serif Display, Hanken Grotesk, DM Mono로 바꿨습니다.

로드 때 글자 스크램블이 400ms에 시작해 1,700ms에 끝납니다. 푸터 마퀴는 30초에 한 바퀴 돕니다.

홈의 사례 행에 마우스를 올리면 사진이 커서를 따라옵니다. 사례마다 수상과 작업 범위를 같은 자리에 둡니다.

쇼릴은 영상 대신 사진 컷으로 바꿨습니다. 수상 기관, 인물, 책 이름은 모두 가상입니다.

주요 기능

• 6칸 210/20 그리드 · 양끝 정렬 히어로 4줄
• 로드 글자 스크램블 · 푸터 마퀴
• 사례 행 커서 따라오는 사진
• 아카이브 14행 · 후기 캐러셀 · FAQ · 문의 폼

어디에 어떻게 쓸 수 있나

사례 수가 많지 않은 디자인·개발 스튜디오에 맞습니다. 사례 목록, 상세, 아카이브 표, 소개, 문의가 한 그리드로 이어집니다.

확인할 점

문의 폼은 검증만 하고 전송하지 않습니다. 개인정보 처리방침과 404는 원본 화면을 확인하지 못해 같은 틀로 만들었습니다.