[project] gwcschool.com

곡성 목공예&커피 체험관 웹사이트 제작

gatsby를 사용해서 곡성 목공예&커피 체험관 웹사이트를 제작했다. 애니메이션은 역시 gsap을 사용했다. 스크롤 애니메이션을 구현하기 위해서 처음에는 react-use 라이브러리를 사용했는데 landscape모드에서 잘 작동하지 않아서 scrollTrigger를 사용했더니 문제 없이 잘 작동한다 :)

이번 프로젝트 역시 홈페이지에 들어갈 사진 촬영부터 디자인과 구축, 배포 및 등록까지 스스로 다하다보니 저번 프로젝트와 마찬가지로 애착이 가는 웹사이트다..💚 일한다는 핑계로 가서 놀고 먹고 아주 잘~쉬고 즐기면서 웹사이트를 만들 수 있었다.

웹사이트는 http://www.gwcschool.com에서 확인할 수 있다.

Screenshot

내가 보고 느낀 곡성 목공예&체험관의 느낌을 최대한~ 잘 살려서 웹사이트에 담으려고 노력했다. 따뜻하고 포근한 휴식의 공간, 자연친화적인 분위기를 살리기 위해서 베이지, 오렌지, 그린 컬러를 주로 사용했고 사진 보정도 따뜻한 계열의 컬러를 많이 사용했다.

---

유용하게 사용했던 component

gatsby-image 혹은 gatsby-background-image 플러그인을 사용할 때, 쿼리를 다이나믹하게 받는 component이다.

///// BgImage.js
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import BackgroundImage from 'gatsby-background-image';
import styled from 'styled-components';

const Container = styled(BackgroundImage)`
  width: 100%;
  height: auto;
  min-height: ${(props) => props.height};
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
`;

const BgImage = (props) => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(quality: 100, maxWidth: 1920) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
    `}
    render={(data) => {
      const image = data.images.edges.find((n) => {
        return n.node.relativePath.includes(props.filename);
      });

      if (!image) {
        return null;
      }

      return (
        <Container
          fluid={image.node.childImageSharp.fluid}
          height={props.height}
        />
      );
    }}
  />
);

export default BgImage;

/////  Image.js
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import styled from 'styled-components';
import Img from 'gatsby-image';

export const ImageWrapper = styled.div`
  width: 100%;
  height: 100%;

  img {
    transform: scale(1); // animation 구현
    transition: all 0.7s !important;

    &:hover {
      transform: scale(1.1);
    }
  }
`;

const Image = (props) => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 1920) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={(data) => {
      const image = data.images.edges.find((n) => {
        return n.node.relativePath.includes(props.filename);
      });

      if (!image) {
        return null;
      }

      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

보완하고 싶은 점

1️⃣ Image animation on scroll
특정 이미지에 background-image-attachment: fixed를 사용해서 애니메이션을 줬었는데 모바일에서는 작동하지 않는다는 점과 IE에서의 버그를 고치기 위해서 body에 준 overflow속성이 scroll position issue를 일으켜서 애니메이션을 삭제했다. 그랬더니 너무 밋밋한 느낌..🤔 스크롤에 따라서 이미지가 조금씩 확대되는 애니메이션을 줘야겠다.

2️⃣ Image Carousel
데스크 탑에서, 이미지가 4장이 디스플레이 되고 버튼을 누르면 한칸씩 이동하는 carousel을 구현하고 싶었는데 생각처럼 잘 되지 않았다.🥺 반응형으로 만들어야하다보니 각 디바이스에서 보여지는 슬라이더의 갯수가 달라져야했다. (예를 들면, 데스크탑: 4장, 타블렛: 3장, 모바일: 1장) 일단 어떻게든 만들긴했는데... 조만간 다시 만들어야할듯 싶다.