📌 SÉANCE AGENCY - 모델 에이전시 웹사이트
🔹 프로젝트 개요
🔹 프로젝트 목적
SÉANCE AGENCY는 서울에서 소속 모델로 캠페인·에디토리얼·뷰티 화보를 캐스팅하고 촬영해 제작까지 하는 모델 에이전시이자 이미지 스튜디오입니다. 에이전시는 사진으로 예약되기 때문에 첫 화면에서 사진 말고는 전부 걷어냈습니다. 스크롤도, 히어로 문구도 없이 작업이 끝없는 평면 위에 놓이고, 방문자는 그 평면을 어느 방향으로든 끌어 넘깁니다. 아이덴티티는 촛농 빨강·상아·그을음 세 가지 색과 세리프 워드마크로 정리했고, 빨강은 인트로와 페이지 사이를 덮는 블록 커튼에만 나오게 해 흑백 작업물이 늘 화면을 차지하도록 했습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
An Endless Plane (끝없는 평면):
첫 화면은 드래그·휠·터치로 미는 2D 격자이며 관성이 있습니다(GSAP Observer). 격자 사본을 이어 붙이지 않고 칸마다 나머지 연산으로 제자리를 돌게 했고, 순환 지점을 화면 밖 한 줄에 두어 튀는 순간이 보이지 않습니다.
드래그가 끝나며 생기는 클릭은 무시해, 격자를 밀다가 작업이 잘못 열리지 않습니다. 휴대폰에서도 같은 평면이 손가락을 따라옵니다.
Cursor Label & Letter Sweep (커서 라벨과 글자 스윕):
커서를 따라다니는 라벨이 빈 곳에서는 Drag, 카드 위에서는 View로 바뀝니다. 처음 나타날 때만 무작위 문자로 스크램블되고, 이후 단어 교체는 글자 투명도를 무작위 순서로 훑습니다.
카드의 제목과 분류는 평소 흐리게 있다가 호버하면 글자 단위로 훑어 올라오고, 커서가 떠나면 되감깁니다.
Iris Intro & Pixel Curtain (아이리스 인트로와 픽셀 커튼):
첫 방문에는 상아색 표지 위에 점, “Faces, summoned.” 문장, 빨간 세리프 워드마크가 차례로 나오고, 워드마크가 한 번 숨을 쉰 뒤 표지가 원으로 줄어들며 사라집니다. 세션당 한 번만 재생합니다.
메뉴와 페이지 전환은 같은 정사각 블록 격자를 씁니다. 덮을 때는 페이드 없이 딱 켜지고, 걷을 때는 부드럽게 사라집니다. 메뉴는 오른쪽만 꽉 채우고 왼쪽은 성기게 남기며, 열 때마다 모양을 새로 뽑습니다.
Filter, List & Work Pages (필터·리스트·작업 상세):
Campaign·Editorial·Beauty 필터가 격자를 다시 배치하고, 리스트 보기는 같은 작업을 글자 색인으로 보여 줍니다.
작업 상세는 큰 세리프 제목, 짧은 소개, 크레딧(모델·촬영·클라이언트·연도)과 서로 다른 사진 다섯 장의 비대칭 갤러리, 이전·다음 작업으로 구성됩니다.
🔹 디자인 포인트
🔹 담당 역할