[프로젝트] 반응형 브랜드 소개 페이지

또나·2023년 5월 16일
0

Ben & Jerry's IceCream

기간 : 2023.4.24 ~ 2023.5.5 (약 10일)

포트폴리오 첫 작업은 리디자인부터 해보고 싶었다.
리디자인은 분위기가 확 바뀌는 게 포인트라 어떤 사이트를 해볼까 찾아보다
Peace, Love, & Ice Cream 라는 슬로건과 패키지가 귀여운 브랜드를 찾았고 브랜드에 비해 사이트가 낡은 느낌이 들어 결정!




1. 기획

https://www.benjerry.co.kr/

  • 작동되지 않는 페이지 있음
  • 불필요하게 페이지가 나뉘어져 있어 사용자 편의성 떨어짐
  • 전체적으로 낡은 느낌의 디자인

👉 핵심 정보를 담은 원페이지, 브랜드 색을 담은 플랫한 느낌으로 리디자인
👉 섹션별 높이는 100vh로 화면에 꽉차게
👉 video, slick, fullpage 활용하기




2. 디자인

여러 사이트를 보며 디자인을 참고하고 스케치로 전체적인 방향을 잡았다.
플랫한 느낌을 줄 일러스트 작업 후 프로토타입 완성.
모바일은 따로 시안 잡지 않고 스케치를 와이어프레임 삼음.
(디자인에만 4일 소요.. 디자인은 늘 너무 어렵다 흑ㅠ-ㅠ)




3. 코딩, 섹션별 기능

메인

  • 대표 영상으로 브랜드가 갖고 있는 색을 뚜렷히 하고자 함.
  • 더보기를 누르면 벤앤제리스 공식 유튜브 채널로 이동.
  • nav에 hover시 가상클래스로 준 밑줄 나오는 효과.

모바일 nav

  • 가상클래스를 이용해 버튼을 누르면 visibility: visible; 로 보여지게 함.
  • align-self: flex-end;을 활용해 닫힘 버튼은 따로 정렬.

섹션1

  • 가치관을 카드 디자인으로 나타냈다. 심심한 느낌이 들지 않게 hover 효과.
  • flex-direction: column; 으로 모바일엔선 세로 정렬이 되도록 함.

섹션2

  • 맛 소개 섹션, 아이스크림 맛이 하나씩 슬라이드 됨.
  • slick을 적용하자마자 기존 디자인이 무너지면서 아이스크림 윗부분이 잘려버리는 현상이 있었는데 해당 클래스에 margin 값을 줘 살려냈다.
<script>
    $('.flavor__slider').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
    });
</script>   

섹션3

  • slick 플러그인을 두가지로 활용할 수 있을까? 라는 의문으로 기획한 섹션.
  • 프로모션 섹션, 다양한 이벤트 & 인스타 게시물들이 슬라이드 됨.
<script>
    $('.promotion__slider').slick({
        variableWidth: false,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    centerMode: false,
                    slidesToShow: 1,
                }
            }
        ]
    });
</script>   

섹션4

  • 어코디언 메뉴를 구현할 QnA 섹션
  • 필요한 아이콘은 Xeicon 유니코드 사용



4. fullPage 오류

🔹 영상 멈춤

video 태그에 data-keepplaying 추가

<body>
	<video src="img/video.mp4" autoplay muted loop data-keepplaying></video>
</body>

🔹 anchor 미작동

스크립트에 앵커 값을 주지 않아서 생기는 문제, anchors : 추가

<script>
  $('#fullpage').fullpage({
      licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
      anchors:['main', 'about', 'flavor', 'promotion', 'qna'],
      autoScrolling:true,
      scrollHorizontally: true,
  })
</script>  

🔹 페이지 씹힘

섹션마다 준 id데이터속성으로 변경

<body>
	<!--before: id를 부여했었음-->
	<section class="section_flavor section" id="flavor">
    <!--after: attr로 변경-->
	<section class="section_flavor section" data-anchor="flavor">
</body>

🔹 높이가 다르면 미작동

높이가 다른 섹션에 fp-auto-height 클래스 추가

<body>
	<footer class="section fp-auto-height"></footer>
</body>

🔹 display 속성 변경

지정 섹션 안에 wrap 역할을 할 div 생성

<body>
	<footer class="section fp-auto-height">
    	<div class="wrap"></div>
    </footer>
</body>
profile
공부 기록장

0개의 댓글