adererror
프로젝트 종류
반응형 웹디자인 & 웹퍼블리싱
프로젝트 인원
팀 프로젝트 / 4인
프로젝트 기간
2024.05.07 - 2024.05.24
Skills & Tools
JavaScript, jQuery, GSAP, SCSS | Figma
반응형 웹디자인 & 웹퍼블리싱
팀 프로젝트 / 4인
2024.05.07 - 2024.05.24
JavaScript, jQuery, GSAP, SCSS | Figma
1. 자바스크립트 공부를 통한 실력 향상 및 다양한 플러그인 학습
- GSAP ScrollTrigger 활용
- SCSS, SVG 활용
- CSS 애니메이션을 이용한 제품 이미지 슬라이드
2. 아더에러의 심플한 기존 홈페이지에 다양한 이벤트를 넣어 화려하게 구현
Brand Page 전체 관리자
Index Page 디자인, 이벤트 구현 담당
웹페이지 디자인 담당
프로젝트 최종 발표, 수정+보완
- 브랜드 선정 및 역할분담
- 디자인 컨셉 회의 / 피그마 작업 시작
- 퍼블리싱 가이드라인 수립
- Sub Page 디자인(제품 페이지, 제품 리스트)
- Sub Page 디자인(브랜드소개, 콜라보)
- Index Page 디자인 및 마크업
- Sub Page HTML, CSS 작업
- Sub Page Js작업
- Index Page HTML, CSS 작업
- Sub Page 반응형 구현
- Index Page Js 작업 (gsap, svg 활용)
- Index Page 반응형 구현 및 디자인 수정
- 각 페이지별 통일 및 최종 수정
- 프로젝트 최종 발표
# 도전적인
# 강렬한
# 깔끔한
프리텐다드 Pretendard
프리텐다드 Pretendard
프리텐다드 Pretendard
프리텐다드 Pretendard
Jost Sans
Jost Sans
Jost Sans
Jost Sans
#FFFFFF
#F3F3F3
#000C5
#000000
브랜드의 다양한 컨셉이 담긴 컨텐츠와 제품을 보여주기 위해서, 아더에러의 시그니처 컬러인 블루와 함께 4가지의 컬러만 사용했습니다. 다양한 이미지와 어우러지도록 간결한 폰트와 스타일을 적용했습니다.
mediaQuery를 활용한 반응형 웹 제작
mobile breakpoint : 1100px
tablet breakpoint : 430px
hover, opacity, transition을 사용한 자연스러운 마우스 이벤트
animation으로 marquee 애니메이션 구현
transition을 사용해 자연스러운 움직임 구현
MouseMove, Touch, isDragging 속성을 활용한 드래그 슬라이드
JavaScript에서 EventListener를 사용한 이벤트 처리
querySelectorAll, setInterval으로 이미지 슬라이드 쇼 구현
• 팀원들과 함께 퍼블리싱 가이드라인을 세워두고 작업하면서 효율적인 작업을 할 수 있었다.
• 프로젝트 진행 중 막히는 부분이 생겼을 때, 다같이 상의하며 해결점을 보다 빠르게 찾을 수 있었고 서로 소통하는 방법을 배웠다.
• 반응형 웹사이트를 구축하면서 그전에 사용해보지 않았던 플러그인을 공부하고, 기기별 특성에 최적화 된 디자인에 대해 알 수 있게되었다.
• 반응형 웹사이트 구현을 목표로 하였으나, 모바일을 많이 고려하지 않은 채로 진행하다보니, 구현된 이벤트중 생략한 부분이 많아졌다.
• 팀으로 같이 작업하기 때문에 폰트, 컬러, 단위 등 미리 변수적용을 했더라면 프로젝트 마무리 단계에서 시간을 좀 더 단축시킬 수 있었을 것이다.
• 웹사이트에 부분적으로 적용한 동적 이벤트의 자잘한 오류를 완벽하게 해결하지 못했다.
• git organization을 활용하여 협업하는 방법을 배울 수 있었다. 그 과정에서 팀원과의 소통하고, git을 효육적으로 활용하는 방법을 배우게 되었다.
• 관심 있던 브랜드의 웹사이트를 리뉴얼하면서 욕심이 생기니 더 어렵게 느껴졌다. 하지만 이 프로젝트를 통해 평소에 익숙한 것을 더 철저히 분석해야 하는 것의 중요성을 배웠다.
• gsap, scss 등 생소했던 개념에 대해 공부할 수 있는 좋은 기회였고, 이를 더 적극적으로 활용할 수 있는 퍼블리셔로 성장할 수 있는 좋은 출발이었다.