html, css, javascript 에 처음 입문한 수업으로써, 개인 및 팀프로젝트 인터랙티브 웹 제작을 목표로 했습니다.
- 인터랙티브 웹페이지 코드 리뷰
- html, css, javascript, Motion, Orientation Sensor를 활용한 인터랙티브 모바일 웹페이지 제작
첫 인터랙티브 미디어개론 팀 프로젝트
2021.5 ~ 2021.6.16
- 사용자 클릭/터치 위치에 랜덤 크기의 비눗방울 생성
- 모션 센서를 통해 디바이스를 빠르게 흔들면 효과음과 함께 비눗방울 터트리기
- 오리엔테이션 센서를 통해 사용자가 디바이스를 기울이는 방향으로 비눗방울 움직이기
default.mp4
html, css, javascript, Motion, Orientation Sensor
1차 과제 코드 리뷰 전반 담당
프로젝트 전반 컨셉/기능 기획
html, css, 이미지, 음향 소스, 폰트 등을 통한 프로토타입 제작 및 디자인
JS를 통한 비눗방울 생성 이벤트 추가
최종 발표자료 제작
- 1차 코드리뷰 과제 우수과제 선정(11조)
https://blog.naver.com/ch0rckbean/222405793784
Html, Css, Javascript를 활용한 첫 인터랙티브 웹페이지 제작
2021.5
-
주제를 잘 살릴 수 있는 디자인 및 페이지 구성
-
인터랙티브 요소
-
개연성 있는 스토리텔링
"노을이 진 후 밤하늘에서 일어나는 일"
사용자의 마우스 스크롤/클릭에 따라 멋진 야경과 밤하늘의 우주, UFO 까지 볼 수 있는 근사한 인터랙티브 웹페이지
섹션 구성
- “아름다운 노을 속, 스크롤을 내리면 해가 지고 구름이 사라지며 비행기가 날아가는 등 어느덧 밤이 됩니다."
- scrollY , y position 활용
- "아름다운 노을이 지고 밤이 되면 우주 은하로 나아갑니다."
- GO 버튼 클릭시 UFO 위치 이동, 일정 위치 도달 시 제자리로 돌아옴
- scrollY , y position 활용
-
"신비로운 은하 속 UFO의 신비까지 경험한 지구인, 우주선 앞에서 앞으로 살아갈 행성을 선택하게 됩니다.
하단의 작은 행성 아이콘을 클릭하면 우주선이 목적지 행성으로 바뀌며 그 곳에서의 삶을 약속합니다."
- 행성 아이콘 클릭시 각 행성 Img로 Src 변경, 행성 아이콘 Hover 이벤트 적용
Html, Css, Javascript
- 스토리텔링 및 개연성을 적용한 기획
- Html, Css, JavaScript 입문 및 동작 이해
- 스크롤/클릭 이벤트 사용
- 프론트엔드 첫 프로젝트