민트페이퍼
RENEWAL DESIGN
인디밴드 공연기획사 민트페이퍼의 글로벌 아티스트와 함께하는 여행테마 페스티벌 “Have a nice trip 2023”
신나는 공연과 어울리지 않는 정적인 소개페이지에 대한 아쉬움이 있어 선정하게 되었습니다.
동적 움직임을 담은 웹 구현을 목표로 팀과 함께 시끌벅적한 한여름의 페스티벌을 표현했습니다.
- 담당업무
- 공통역역 헤더
- 홈 메인배너
- about 페이지
- 일러스트
- 영상
- 퍼블리싱 가이드라인 작성
keyword
#Dynamic#Hot Summer#Festival
TARGET
인디공연 매니아층
feat. 여름을 즐기려는 일반인
민트페이퍼는 인디밴드 공연 매니아층이
있지만 일반인도 이 여름의 페스티벌을
즐기고 싶도록 생동감있게 표현
Design Concept
한 여름의 페스티벌
여행테마 공연이라는 것을 효과적으로 전달하기 위해 역동적이고 생기있는 공연장의 느낌을 사용자에게 생생하게 전달하기 위해 일러스트와 웹의 움직임을 통해 직관적으로 전달하고자 했습니다.
일러스트로 개성 더하여인디밴드 공연 느낌 살리기!!
공연의 시끌벅적함을 담아웹 움직임 구현
타이틀 서체는 일러스트로 작업하여 일러스트와의 일관성 유지
일러스트 시안, 제작, 영상
일러스트는 브랜드 에센스 중에서도 특히 사용자에게 전달하고자 하는 메시지를 감성적으로 전달할 수 있는 강력한 커뮤니케이션 툴이라고 생각하여 인디밴드 공연의 아이덴티티를 좀 더 효과적으로 인식시킬 수 있기에 이를 적극 활용하여 작업을 진행했습니다.
한여름 밤의 페스티벌에 대한 느낌을 전달하는 것을 목적으로 음악, 휴식, 여행을 모티브로 다양한 캐릭터를 통해 페스티벌의 즐거움을 반영한 일러스트레이션 시안을 구상했습니다.
퍼블리싱 가이드라인
퍼블리싱 가이드라인은 구글의 가이드라인을 기준으로 서식의 규칙을 완성했습니다. 팀원 및 다른이가 보았을때도 이해하기 쉬워야 하기 때문에 일관성을 유지했습니다.
JavaScript
jQuery
CSS
자연스럽고 다양한 움직임을 구현하여 페스티벌의 느낌을 표현했습니다. 자바스크립트 구현 상황을 최소화하기위해 CSS로 할 수 있는 요소를 분석하여 우선작업을 진행했습니다.
01
공통영역 헤더
믹스 블랜드 모드
CSS
mix-blend-mode : different;
position:fixed로 고정된 헤더 영역에
요소를 겹치는 효과를 주어
스크롤시 이벤트 효과 생성
02
홈 메인배너
스크롤 이벤트
jQuery
스크롤할 때마다 실행되는 함수 작성
스크롤 down 영상확대 / up 영상 축소!
$(window).scroll(function () {
const scroll = $(window).scrollTop();
$("#mov01").css({
width: 100 + scroll / 18 + "%"});
});
스크롤 이벤트가 발생할 때마다 scroll 함수가 호출되며, scrollTop을 사용하여 현재 스크롤 위치를 계산하고 해당 위치에 따라 요소의 너비를 조정하는 함수를 작성하여 scroll 변수에 할당합니다.
영상 요소의 CSS 속성을 변경하기 위해 css() 메소드를 작성하여, width 속성을 조정하여 요소의 너비를 변경합니다. 너비는 100 + scroll / 18 + "%"로 설정되며, 스크롤 위치에 따라 동적으로 변경됩니다.
03
마우스무브
이벤트
jQuery
섹션영역1에서 마우스 움직임 발생시
banner-box 이미지 움직임
const movingImg = (evt) => {
let x = evt.clientX; let y = evt.clientY;
$("#banner-title").css({ left: 20 - x / 60, bottom: 20 - y / 30 });
});
$(".banner-wrapper").on("mousemove", movingImg);
movingImg라는 함수를 정의, 이 함수는 이벤트 객체에서 마우스 포인터의 x와 y좌표를 가져와 매개변수로 받습니다.
jQuery를 사용하여 "banner-title"이라는 id를 가진 요소를 선택하고 CSS 스타일을 적용합니다. 이렇게 하면 요소가 마우스 움직임에 반응하여 움직이는 효과가 만들어집니다.
함수는 requestAnimationFrame을 호출하여 자기 자신을 재귀적 으로 호출하여 계속해서 애니메이션 효과를 만듭니다.
04
:hover 이벤트
CSS
지정된 요소에 마우스가 올라가면
이미지가 움직이는 애니매이션 실행
CSS 스타일값을 작성하고 호버시 작동하도록 설정.
CSS 애니메이션과 transition 값을 함께 사용하면
더 자연스러운 움직임의 이벤트 실행
05
about 페이지
svg 라인
스크롤 이벤트
JavaScript
스크롤 이벤트가 발생할 때마다 scrolled 함수가 호출되면서 svg 경로 애니매이션이 구현
svg 이미지를 원하는 만큼 보여줄 수 있도록 strokeDasharray, strokeDashoffset을 사용
Git, Github
organization
[git] github organization으로 협력하여 작업을 진행했습니다. 각자의 로컬 repository에서 작업하여 push와 merge를 진행했습니다. 각자의 브랜치를 잘 생성하여 작업을 진행하고, main에 병합할때 소통이 중요하다고 느꼈습니다.
Style Guide
Logo
민트 페이퍼의 로고 / HAVE A NICE TRIP 2023 “HAVE A NICE TRIP 2023”의 로고는 일러스트로 라인을 따서 일러스트와의 통일성을 유지시켜 주었습니다.
Color Palette
민트페이퍼의 대표 컬러인 민트와 여름에 어울리는 트로피컬 컬러로 한여름의 무드를 표현했습니다.
Typography
POPPINS
S-CORE DREAM
일러스트로 그린 서체
Project Results
다양한 움직임에 대한 흥미가 커서 팀으로 작업하는 만큼 혼자서 작업하기엔 부담스러운 움직임이 들어있는 웹을 선정했습니다.다소 움직임 무거워 보이는 프로젝트이지만 중점으로 생각했던 중요한 움직임을 모두 구동했습니다.
리뉴얼 진행과정
웹 선정 및 분석 > 컨셉 결정 > 디자인 작업 진행 > 퍼블리싱 가이드라인 작성 > 퍼블리싱 > 움직임제어 > 오류수정
Bad
레퍼런스 사이트를 완전 동일하게 구현하지 못한 점
-
움직임의 디테일 완성도가 부족. 홈을 3명이 나눠서 작업하고 연결하는 과정에서 구조 가 틀어지고 생각지도 못한 움직임의 변화가 생기고움직임도 원하는 대로 제어가 되지 않았다.
Good
톤 앤 매너에 맞는 컬러, 일러스트, 웹 디자인
-
목표한 웹 움직임 구현
-
분업화된 효율적인 프로젝트 진행
-
팀원들간 서로 배려하며 프로젝트 완료
WEB PUBLISHING
“Have a nice trip 2023”
인디밴드 공연기획사 민트페이퍼의 여행테마 페스티벌 공연정보를 담은 웹입니다. 보는 이로 하여금 시끌벅적한 여름 페스티벌에 대한 느낌을 전달하는 것을 목적으로 일러스트와 웹의 동적 구현을 통해 페스티벌의 즐거움을 담았습니다.
PROJECT팀 프로젝트 / JavaScript
작업일정2023.06.30 ~ 2023.07.10
KEYWORD#DYNAMIC #HOT SUMMER #FESTIVAL
- Skills
- HTML5 / CSS3 / JavaScript & jQuery
- GIT & GITHUB / ILLUSTRATION / GIF / SVG / Video
- Tools
-
