로드맵 ( 문서화 설명 포함 )

Dustin Jung·2025년 2월 6일

프로젝트 CLAYN

목록 보기

3/10

CLAYN 브랜드 웹 프로젝트 로드맵

0단계: GSAP를 이해하고 사용하기 위한 기초 gsap 공부 ( 최대 3일 )

공부의 흔적

https://velog.io/write?id=20606122-433f-4276-91b5-202c3b6ab4e7

1단계: 아이디어 구체화 (1일)

목표: 프로젝트의 핵심 방향과 개요를 정리하고 구체적인 계획 수립

완료:
브랜드 이름, 컨셉, 컬러 톤, 폰트 선정 (이미 완료)
웹사이트 구성 방향 확정: "갤러리 느낌 기반 + 스토리텔링 + 원페이지 디자인"
각 섹션의 기본 텍스트 초안 작성 (이미 완료)
다음 단계: 와이어프레임 설계

2단계: 피그마 와이어프레임 설계 (2~3일)

목표: 페이지 레이아웃과 디자인 시안을 설계

피그마 사용법 간단 정리 및 참고 자료 확인
CLAYN 브랜드 스타일에 맞춘 UI 요소 정리
와이어프레임 설계
각 섹션의 레이아웃 초안 설계
텍스트와 이미지를 배치하고 섹션 간의 전환을 시각화
리뷰 및 수정
완성된 와이어프레임 검토 및 피드백 반영

3단계: 기본 HTML/CSS/JS 구조 설계 (3~5일)

목표: 와이어프레임을 기반으로 웹사이트 기본 구조 개발

유지보수를 쉽게 하기 위해 폴더 구조부터 정리해놓고 시작하기
HTML: 각 섹션의 마크업 작성 (타이틀, 본문 텍스트, 이미지, 버튼 등 정리 )
- 인트로 섹션: 부드러운 텍스트 페이드인 및 배경 패럴랙스
- 제작 과정 섹션: 도자기 제작 단계별로 등장 애니메이션 추가
- 대표 제품 섹션: 이미지와 텍스트의 슬라이드 인 애니메이션
- 브랜드 철학 섹션: 섬세한 텍스트와 배경 동시 애니메이션
- CTA 섹션: 브랜드 PR과 내 PR
- Footer 섹션 : 문의사항 등.
CSS: 컬러 톤과 폰트 스타일링 적용

배경색, 텍스트 색상, 폰트 적용

JS: GSAP ScrollTrigger를 활용한 기본 애니메이션 설정
스크롤 시 텍스트 등장, 이미지 움직임, 패럴랙스 효과 구현

4단계: GSAP ScrollTrigger로 애니메이션 구현 (5~7일)

목표: 브랜드 감성을 살릴 수 있는 스크롤 애니메이션 적용

5단계: 반응형 및 최적화 (3~5일)

목표: 모든 기기에서 적절히 보이는 반응형 웹사이트 구현
- 반응형 레이아웃 설정
- 모바일, 태블릿, 데스크탑 레이아웃 테스트, portrait과 landscape에 따른 모든 변수 고려.

6단계: GSAP 와 사이트 전반적인 성능, UX, 웹표준에 따른 최적화 (2~4일)

ScrollTrigger를 사용한 스크롤 애니메이션 부드럽게 조정
메모리 누수 방지, UI/UX에 고려한 수정, 웹표준, 웹접근성 고려.

7단계: 테스트 및 배포 (2~3일)

목표: 최종 점검 및 라이브 배포
- 테스트
  - 브라우저 호환성 테스트 (Chrome, Safari, Firefox 등)
  - 스크롤 애니메이션 정상 작동 확인
  - 텍스트 및 디자인 요소 오타/오류 수정
  - GitHub Pages에 배포

총 예상 기간: 3~4주

주요 툴

디자인: Figma
개발: Visual Studio Code, GSAP, 바닐라 JS
배포: GitHub Pages

Categorize(문서화)

올바른 유지 보수를 위해 필수

초기 문서구조

📂 project-CLAYN
├── 📂 assets/ // 디자인 리소스: Figma 파일, 참고자료 등
├── 📂 public/ // 정적 파일: 이미지, 폰트, 아이콘 등
│ ├── 📂 images/ // 로고, 제품 사진, 배경 이미지 등
│ ├── 📂 fonts/ // 조선일보명조 같은 커스텀 폰트
│ ├── 📂 icons/ // SVG 등 아이콘 파일
│ ├── 📂 videos/ // 인트로 영상이 있다면 여기에
├── 📂 src/ // 소스 코드
│ ├── 📂 css/ // 스타일 관련 파일
│ │ ├── global.css // 전역 스타일
│ │ ├── style.css // 미디어쿼리 외 전역 스타일
│ │ ├── responsive-desktop.css // 데스크탑 반응형 스타일 (1280px 이상)
│ │ ├── responsive-tablet.css // 태블릿 반응형 스타일 (769px ~ 1279px)
│ │ ├── responsive-mobile.css // 모바일 반응형 스타일 (0 ~ 768px)
│ │ ├── animations.css // GSAP 애니메이션 관련 스타일
│ │ ├── components.css // 버튼, 카드 등 UI 컴포넌트 스타일
│ │ ├── font-style.css // 폰트, 컬러 정의
│ │ ├── fonts.css // 커스텀 폰트 스타일 (다운로드 폰트 정의)
│ ├── 📂 js/ // 기능 관련 파일
│ │ ├── lenis.js // Lenis 스크롤 설정
│ │ ├── animations.js // GSAP 애니메이션 관련 스크립트
│ │ ├── components.js // 공통 UI 컴포넌트 관리
│ │ ├── main.js // 메인 스크립트 (페이지 초기화 및 이벤트 핸들링)
│ │ ├── utils.js // 공통 유틸 함수 (필요 시 추가 가능)
│ ├── 📂 html/ // 개별 페이지 HTML
│ │ ├── mainPage.html // 메인 페이지
│ │ ├── 404.html // 404 페이지
├── index.html // 프로젝트 루트 페이지
└── 파비콘들