****# 외계물질 프로젝트

Dev log

Structure

• desktop mobile 분리
• Scroll 반응

2022.09.12

• 기본 프로젝트 세팅
  • react를 기반으로 Greensock 같은 애니메이션 라이브러리를 적극적으로 활용해보기

2022.10.11

• Structure

  • desktop / mobile 분리
    • Layout 정리하기
    • background image 적용하기
    • main font
    • mobile notch 수정
      • https://erikmartinjordan.com/safari-ios-notch-change-color
    • CDN 전송방식 서치
    • full page scroll 방식 사용하기
      • react-full-page
    • 스크롤 훅 만들기

• page1

  • logo
  • video

2022.10.14

• page 2
  • react-three를 사용해서 노이즈 오브젝트 제작
    • https://codesandbox.io/s/el11e?file=/src/App.js
  • 특정 지점을 클릭하면 텍스트가 팝업되도록? 혹은 화면에 표시되도록 설정하기

2022.10.17

• 로고

  • png로 다 짜르기
  • png -> webp
  • 데이터 분리하기
  • GSAP 적용하기
  • image preload
    • loading을 따로 만들어야 할까? 이미지가 너무 많다.

2022.10.18

• 뉴스

  • 페이지 선택 버튼 만들기
    • 뉴스 페이지
      • 뉴스의 화질? 사이즈 조절하기
  • 관찰일지 페이지 구성
    • 모델 업로드
    • 관찰일지 업로드
    • 페이지 새로 하나 만들기
    • 애니메이션

• 노이즈

  • lazy loading 혹은 suspense를 사용해서 intersection observe가 작동하면 동작하도록 만들기 (최적화)

TODO

• 모바일 반응형 틀 잡기
• 첫 번째 페이지 GIF 수정
• 두 번째 페이지 텍스쳐 추가 및 설명 추가하기
• 세 번째 페이지 팝업 방식 수정하기
• 네 번째 페이지 RP 참여자 기록 추가하기
  • 전환 방식 고민하기 (모바일에서도 반영 가능한?..)
• 휴먼관찰일지 전환 추가

2022.11.10

• RP page
  • reloading 시에 media query 에러 수정하기
  • 화면 사이즈 조절해보기
  • 스크린 snap 오작동 오류 잡아내기
  • 쿼리 잘 동작하면, 기존에 작성해둔 모바일 / 데스크톱 분리 페이지 삭제하기
• 외계물질 (두 번째)
  • 포인트 설정하고 설명 적기
  • data 한 곳에 모아주기

마무리를 위한 TASK 정리

• 외계물질

  • 2번째 페이지
    • 데스크톱 커서 모양
    • 모바일 커서 모양
  • 3번째 페이지
    • 건물 이미지에 사람 및 텍스트가 가려지지 않도록 올리기
  • RP
    • 모델 있는 것들은 업로드 하기
    • 모델 없는 것들은 그냥 기본 이미지?

• 휴먼 관찰일지

  • setTimeOut 사용해서 전체 변환 시키기

    • 버튼으로 테스트

  • 1번째 페이지

    • 낙서이미지
    • 영상
    • 영상 배경

  • 2번째 페이지

    • 사람 스캐닝으로 변경

  • 3번째 페이지

    • 박사 얼굴
    • 로고
    • 건물 이미지

참고 자료

• Razy loading