Sorrel & Vane

어떻게 만들어졌나

원본은 호주의 미용의학 클리닉 사이트입니다. 화면은 홈·시술·고민별·소개·개인정보·이용약관 6종이고 시술·고민 상세 화면은 없습니다.

홈 히어로는 1,800px 높이에 사진 2장을 쌓고 가운데 띠에 로고·메뉴·예약 링크를 고정합니다. 12칸 그리드는 칸 107.5px, 간격 10px, 좌우 여백 20px 그대로입니다.

프리로더는 약 1.4초 머문 뒤 1초에 걸쳐 사라지고, 메뉴 4개가 100ms 간격으로 나타납니다. 사진 나타남 500ms, WHY 전환 300ms는 원본 이징 값과 같습니다.

시술 5개·고민 3개 아코디언은 왼쪽 목록을 고정합니다. 오른쪽 사진이 100vh씩 흐르면 보이는 항목이 펼쳐집니다.

영상 8개는 스톡 정지 사진으로 바꿨고 Lenis 관성 스크롤은 뺐습니다. 비활성 글자는 불투명도 0.7, 프리로더 색은 #7b7370으로 바꿔 대비 4.5:1을 맞췄습니다.

서체는 Newsreader와 Hanken Grotesk로 바꿨습니다. 상호·의료진·주소·전화·영업시간은 모두 지어낸 값이고 원본 카피는 옮기지 않았습니다.

주요 기능

• 프리로더 · 히어로 고정 띠
• WHY 4항목 자동 넘김 · 진행 막대
• 시술 5 · 고민 3 스크롤 아코디언
• 메뉴 미리보기 패널 · 대기 화면 · 현지 시각

어디에 어떻게 쓸 수 있나

시술 종류가 많지 않은 미용의학 클리닉·피부과에 맞습니다. 홈, 시술, 고민별, 소개, 약관 2종이 같은 머리막대와 꼬리말을 씁니다.

확인할 점

예약 링크는 mailto뿐이고 예약 폼·가격·소요 시간 정보가 없습니다. 영상 자리는 정지 사진이라 원본의 촬영 영상 인상은 옮기지 못했습니다.