컨셉: "미니멀하고 감성적인 도자기"
페이지 구성:
1. 인트로 → 조용한 분위기의 도자기 작업 영상(부드러운 패럴랙스 배경)
2. 도자기 제작 과정 → 스크롤할 때 한 단계씩 등장하는 스토리
3. 대표 제품 소개 → 차분한 색감과 함께 천천히 나타나는 도자기
4. 브랜드 철학 → "흙과 불이 빚어낸 아름다움"
5. CTA → "우리의 작품을 만나보세요"
고려 사항 : 패럴랙스, 인터랙션 애니메이션이 있어야 함
GSAP + ScrollTrigger를 활용해서 패럴랙스 적용
결론 도출 ->
"갤러리 느낌을 기반으로 하되, 브랜드 스토리텔링을 포함하는 방식"
= 처음에는 미니멀한 갤러리 스타일로 보여주고, 아래로 스크롤하면서 브랜드의 가치를 전달하는 원페이지 구성!
색상
자연 친화적 & 감성적인 분위기 → 1️⃣ 뉴트럴 미니멀
CLAYN은 "흙"과 관련된 브랜드이므로 뉴트럴 미니멀 톤(1번)이 더 적합할 것 같아!
✔ 너무 차갑지 않으면서도 미니멀한 감성을 유지
✔ 자연스러움과 현대적인 감각을 동시에 살릴 수 있음
/*컬러 변수*/
--point-clr : #C4A88A; -> 포인트 색
--extra-point-clr : #005D66; -> 추가 포인트 색2
--extra-extra-point-clr : #fbcccd; -> 추가 포인트색3
--body-clr: #222222; -> 기본 텍스트 색
--body-bg-clr: #F8F6F4; -> 기본 배경색
--logo-clr: #222222; -> 로고 색
--warm-gray: #5C5C5C; -> 웜 그레이 색, 블랙에서 약간의 따뜻함을 가미할 때 사용chatGPT에 물어본 도움 받을 사이트들
🔍 CLAYN 랜딩 페이지 구성에 맞는 자료 찾기 가이드
🔹 1️⃣ 도자기 작업 영상 & 이미지 (인트로 & 제작 과정)
고퀄리티 무료 영상 사이트
Pexels – “Pottery” 또는 “Ceramic Making” 검색
Pixabay – 도자기 제작 영상 다수
Videvo – 도자기 제작 관련 무료 영상
고퀄리티 무료 이미지 사이트
Unsplash – “Minimal Pottery” 검색
Pexels – “Handmade Pottery” 검색
Freepik – 도자기 관련 고해상도 이미지 다수
🔹 2️⃣ 도자기 제작 과정 관련 아이콘 & 그래픽
아이콘 리소스 사이트
Flaticon – “Pottery” 검색
Noun Project – 미니멀한 도자기 아이콘 다수
SVG 애니메이션용 아이콘
Lordicon – 애니메이션 가능한 도자기 아이콘
Icons8 – 다양한 스타일의 아이콘 제공
🔹 3️⃣ 폰트 (차분한 브랜드 분위기 연출)
고급스러운 무료 폰트 추천
Google Fonts
"Playfair Display" – 고급스러운 감성
"Cormorant Garamond" – 아트적인 느낌
"Inter" – 미니멀하고 깔끔한 텍스트
🔹 4️⃣ 브랜드 철학 & 감성적인 문구
도자기 브랜드 철학 참고
유명 수제 도자기 브랜드 웹사이트 참고 (예: Heath Ceramics)
감성적인 글귀 참고: Pinterest에서 “Pottery Quotes” 검색
🔹 5️⃣ GSAP 패럴랙스 효과 참고 (애니메이션 적용 예제)
GSAP 공식 사이트 – ScrollTrigger 예제 확인
CodePen – “GSAP Parallax” 검색하여 다양한 구현 예제 확인
폰트
🎨 CLAYN 브랜드에 맞는 폰트 조합
타이틀 (브랜드명, 주요 헤드라인) → 감성적인 고급스러움
✅ Playfair Display (영문) + Noto Serif KR (한글)
느낌: 고급스러우면서도 차분한 감성
추천 이유: Playfair Display는 세련되고 아트적인 느낌을 주고, Noto Serif KR은 부드러운 세리프 계열로 브랜드의 품격을 유지
<style>
font-family: "Playfair Display", "Noto Serif KR", serif;
</style>본문 텍스트 → 읽기 쉽고 미니멀한 스타일
✅ Inter (영문) + Pretendard (한글)
느낌: 깔끔하고 현대적인 미니멀 디자인
추천 이유: Inter는 가독성이 뛰어나고, Pretendard는 고급스러운 한글 폰트로 정돈된 느낌을 줌
<style>
font-family: "Inter", "Pretendard", sans-serif;
</style>