Contents
1. 프로젝트 개요 (Project Overview)
2. 사용한 기술 스택 (Tech Stack)
3. 개발 과정 (Development Process)
4. 결과 및 개선점 (Lessons Learned & Future Improvements)
5. 프로젝트 관련 링크 (Project Links)
아래로 스크롤하시면 설명페이지가 나옵니다.
Project: CLAYN
CLAYN의 설명페이지입니다.
해당 프로젝트의 개요, 기술 스택, 구현하고자 하는 것 등
필요한 설명을 담고 있습니다.
1. 프로젝트 개요
(Project Overview)2. 사용한 기술 스택
(Tech Stack)3. 개발 과정
(Development Process)4. 결과 및 개선점
(Lessons Learned & Future Improvements)
프로젝트 명 : CLAYN
감성적이면서도 미니멀한 도자기 브랜드의 원페이지 랜딩 페이지를 제작하는 것을 목표로 한 프로젝트.
인터랙티브 애니메이션과 패럴랙스 기능을 조화롭게 적용하는 것이 핵심 목표.
주요 개발 방향
100% 개인 프로젝트로 진행.
단순한 인터랙션 구현이 아니라, 애니메이션이 사용자의 몰입도를 높이고, UX적으로도 자연스럽게 작동하도록 설계.
페이지 구성과 애니메이션 흐름을 매끄럽게 연결하면서도 UX를 고려한 최적의 설계를 목표로 함.
프론트엔드 기술
디자인 및 최적화 도구
Figma (디자인 기획 및 초안 제작)
Illustrator & Photoshop (UI 요소 제작)
(이미지 압축 및 최적화)
개발 환경 & 배포
VS Code (개발)
Git & GitHub (버전 관리 및 배포)
중점 사항
반응형 웹 디자인을 완벽하게 적용
GSAP을 이용한 인터랙티브 애니메이션을 최적화하여 구현.
폴더 & 코드 구조 설계
프로젝트 구조를 체계적으로 정리하여 CSS와 JS 파일을 목적별로 분리
JavaScript는 모듈화된 구조로 설계하여, 핵심 로직을 main.js에서 통합 관리
JavaScript 모듈화 & 함수 최적화
한 함수에 너무 많은 기능을 담지 않도록 설계하여 가독성과 유지보수성을 높임
예시
animation.js → GSAP 애니메이션 관련 함수 관리
components.js → UI, Modal 관련 함수 정리
main.js → Vanila Js, 다른 파일 함수 총괄 관리
레이아웃 개발 & 반응형 설계
Desktop 버전으로 우선 제작 후 반응형 적용
반복적으로 사용되는 스타일(Global Styles)을 global.css에서 관리
애니메이션을 반응형에서도 자연스럽게 동작하도록 고려하여 설계
UX & 웹 접근성 개선
tabindex, focus-visible을 활용하여 키보드 내비게이션 최적화.
JavaScript는 모듈화된 구조로 설계하여, 핵심 로직을 main.js에서 통합 관리
aria-hidden을 활용하여 스크린 리더기 사용자 경험 개선
모달창 ESC 키 닫기 기능 적용하여 접근성 강화
SEO & 성능 최적화
메타 태그 최적화 (검색엔진 & SNS 공유)
404 페이지 noindex 설정으로 검색엔진에서 제외.
aria-hidden을 활용하여 스크린 리더기 사용자 경험 개선
스크립트 최적화 (defer, preconnect 적용)
프로젝트를 마치고 느낀 아쉬움
GSAP을 과도하게 사용하여 사이트가 무거워진 점
디자인적으로 아쉬운 부분이 있음 → UI/UX 디자인 역량을 더 높이고 싶음
앞으로 추가하고 싶은 기능
모달창이 열릴 때 tabindex를 모달 내부로 제한하는 기능 구현
스크립트 추가 학습 후 모달 간 tabindex 이동 문제 해결 예정
이번 프로젝트를 통해 배운 점
GSAP & ScrollTrigger의 동작 원리를 이해, 실 사용하면서 경험치 획득
CSS와 Vanila script활용의 중요성 체감 (최대한 CSS 애니메이션 활용, JS 최소화)
폴더 & 파일 구조화, 함수 모듈화가 유지보수에 미치는 영향 학습
웹 접근성, SEO 최적화가 UX에 미치는 영향 체감