Projects/우주 심리 테스트
-
03. 모바일 <video>태그 자동 재생 관련 이슈Projects/우주 심리 테스트 2021. 6. 11. 14:38
이번 프로젝트에서 가장 골치아팠던 부분은 바로 일부 페이지에서 사용되는 동영상을 자동재생하는 기능이었다. 쉽게 될 줄 알았는데 아무래도 브라우저에서 사용자가 원하지 않는 동영상이 자동으로 재생되는것을 막아서 발생하는 문제였는데, 이를 한번 정리해보겠다. video 태그에 autoplay가 작동하기 위해서는 muted 요소와, playsinline 요소(iOS)가 추가되어야 한다. 많은 브라우저에서 정책상의 문제로 소리가 나오는 동영상은 자동 재생 하지 않는다. 즉 음소거 영상의 경우에만 자동재생이 허용된다. 이를 위해 자동재생이 필요한 video 태그에는 muted 요소를 추가해줘야한다. * video파일에 audio track이 존재하지 않으면 muted속성이 없어도 자동재생이 된다. (출처: http..
-
02. 모바일 100vh 스크롤 문제 해결하기Projects/우주 심리 테스트 2021. 6. 9. 20:10
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 vh 우리는 종종 스크린 사이즈의 너비를 혹은 높이 이용해 css 스타일링을 하곤 한다. 이 때 사용하는 단위가 바로 vw, vh 인데 1vw는 스크린 너비의 1%, 1vh는 스크린 높이의 1%를 말한다. 다시 말해, 100vw는 스크린 가로 사이즈, 100vh는 스크린 세로 사이즈를 의미한다. 이번 mbti 페이지에는 이 vw, vh라는 단위를 자주 사용했다. 브라우저의 관리자 모드에서 모바일 환경에서의 해상도를 미리 확인 해 볼수 있는데, 처음에 우리는 이 모드로 계속해서 확인 하면서 화면에 딱 맞는 ..
-
01. VanillaJS 프로젝트 배포 (feat. Pacel, AWS EC2, Nginx)Projects/우주 심리 테스트 2021. 6. 5. 17:55
2주정도 걸려서 제작 한 우주 여행 심리테스트 페이지 🙂 유플래닛-나만의 행성찾기[우주심리 테스트 mbti] 유플래닛만의 특별한 나만의 행성 찾기 mbti. 어서 나만의 행성을 찾으러 여행을 떠나볼까요? uplanet.me 최근 심리테스트, mbti 성향분석 등을 활용한 마케팅 웹 페이지가 많이 등장했다. 그리고 케이어스라는 친한 회사 대표님이 이와 같은 심리테스트 웹 페이지 제작을 의뢰해서 예전에 인상이 깊었던 the forest의 심리테스트가 떠올라 유사한 느낌으로 몰입가능한 심리테스트 페이지를 한번 만들어 보고자했다. VanillaJS 연습도 할 겸, 프론트엔드 개발자 지우님과 디자이너 한 분 이렇게 세명이서 프로젝트를 시작했다. 배포를 이렇게 하는게 맞나...? 당시에는 번들러라는 것의 개념을 모..