프로젝트 CLAYN
1.3차 프로젝트 구상
📌 창의적인 패럴랙스 웹디자인 아이디어 1\. 시간 여행 갤러리 (Historical Scroll Timeline) ⏳ 컨셉: 스크롤을 내리면 시간이 흐르듯이 이미지와 텍스트가 등장하는 패럴랙스 페이지. 역사적 사건, 제품 발전 과정, 혹은 개인의 성장 스토리
2.피그마 작업 서순 잡기
CLAYN 브랜드 랜딩 페이지 – 와이어프레임 기본 구성1️⃣ 인트로 섹션구성 요소:큰 타이틀: "CLAYN – 감성 도자기 브랜드"서브타이틀: "손끝에서 탄생하는 예술을 만나보세요."배경 이미지/영상: 작업 중인 도자기(패럴랙스 적용 가능)스크롤 인디케이터: 아래로
3.로드맵 ( 문서화 설명 포함 )
CLAYN 브랜드 웹 프로젝트 로드맵1단계: 아이디어 구체화 (1일)목표: 프로젝트의 핵심 방향과 개요를 정리하고 구체적인 계획 수립완료:브랜드 이름, 컨셉, 컬러 톤, 폰트 선정 (이미 완료)웹사이트 구성 방향 확정: "갤러리 느낌 기반 + 스토리텔링 + 원페이지 디
4.프로젝트 CLAYN 최적화 서순 잡기 ( 결과 포함 )
✔️ GSAP ScrollTrigger 성능 개선scrub: true 사용 시, anticipatePin 옵션을 적절히 조정 (지나치게 높은 값이면 성능 저하)markers: true로 애니메이션 흐름 확인 후, 불필요한 트리거 제거lazy: false로 설정하여 스크
5.프로젝트 CLAYN 최종 문서 구조와 함수 관리 방식
파일 원본을 모아놓거나, 개발에 쓰인 figma 자료들, 포토샵이나 일러스트로 제작해서 사이트에 쓴 것들 보관.git에는 안올라가는 자료들, 사이트를 제작하면서 참고하면서 공부한 내용이나, 레퍼런스를 한 사이트의 링크등을 적어둔 폴더내부 다운받은 font 파일들을 보관
6.25-02-28 lighthouse 성능 검사 개선
1. 성능 최적화 (GSAP 중심) ✔️ GSAP ScrollTrigger 성능 개선 scrub: true 사용 시, anticipatePin 옵션을 적절히 조정 (지나치게 높은 값이면 성능 저하) markers: true로 애니메이션 흐름 확인 후, 불필요한 트리거
7.25-02-28 lighthouse 접근성 검사 개선
문재 발생 이유 : 로고 SVG를 감싸는 용도로 i태그 안에 svg로 로고를 집어 넣었으나, img 태그가 아니라서 alt가 없음, 웹에서 a태그의 의도를 파악하지 못해 접근성(A11Y) 측면에서 좋지 못함. label을 숨길때와 마찬가지로 리더기 인식을 위해 텍스트
8.25-02-28 lighthouse 검색엔진 최적화 검사 개선
문제가 되는 이유메타 설명meta name="description"은 웹페이지의 핵심 내용을 검색엔진에 알려주는 중요한 요소임.기존에는 이렇게 있었음.이렇게 작성하여 추가수정.이로 인해 얻는 효과meta description이 포함됨 > 검색 결과에서 요약문이 표시됨브
9.프로젝트 이후 UX 추가 개선 - 키보드 네비게이션과 썸네일(meta tag = open graph, twitter)
키보드 네비게이션이란? 키보드만 사용해서 웹사이트를 탐색할 수 있도록 보장하는 기능 일반적으로 Tab, Enter, Space, Arrow(←↑→↓), ESC 키 등을 사용해서 웹사이트의 요소를 이동하고 조작할 수 있어야 함. 웹 접근성을 높이기 위해, 마우스를
10.25-03-17 웹표준에 근거한 추가 수정
이 태그를 쓴 video는 배경으로 깔아둔 video라서 role=presentation을 줬었음.video role=presentation은 video 자체가 interactive한 요소라서 w3c에서 지원을 안 함.본래 aria-hidden="true"도 같이 넣어