[회고] 프론트엔드 멘토(Frontend Mentor) Challenge - 1탄

Frontend Mentor Challenge - 1탄

실패를 기록하자

지금와서 회고를 작성할 수 있었던 이유는 제가 고민하고 실패했던 것들을 git PR에 모두 남겼두었기 때문입니다. 지금도 다시금 읽으면서 많은 공부가 되는거 같습니다

Frontend Mentor란?

Frontend Mentor는 프론트엔드 개발자들이 프로젝트를 경험하고, 역량을 향상시킬 수 있는 온라인 학습 사이트입니다.
다양한 주제의 챌린지가 제공되며, 유료 결제시 피그마 파일도 받아볼 수 있습니다. 결제를 하지 않더라도 이미지 파일, 스타일 가이드, 컨텐츠 등이 포함되어 있어서 개발하는데는 문제가 없습니다.
저 같이 프론트엔드를 시작하는 단계의 사람들에게 다영한 경험을 할 수 있게해주어 매우 유용한 사이트라고 생각합니다

저는 가난한 취준생이기에 무료로 제공되는 이미지 파일, 스타일 가이드, 컨텐츠를 바탕으로 챌린지에 도전했습니다.

재밌는 점은 내가 구현한 결과물을 남들이 볼 수 있게 올려줍니다.

Product preview card component

챌린지 정보

• 챌린지: Product preview card component
• Frontend Mentor 업로드 링크: Desktop-first solution using CSS Flexbox - by jungsu-jung
• github: git 링크
• 배포(github-pages): 배포 링크

과제 선택 배경

선정 이유는 사실 큰 이유는 없습니다 ㅎㅎ
처음이기에 가장 쉬운걸 해보자라고 생각했는데, 마침 프론트엔드 맨토 사이트에 필터기능이 존재하여 Free와 Newbie로 필터하여 가장 먼저 나오는 챌린지인 Product preview card component 도전하였습니다.

배운점

• hover시 버튼 배경 color 어둡게 설정하기

  • 주어진 color에 hover시 color가 주어지지 않아서 어떻게 처리해야될지 몰라 고민하였습니다.
  • filter: brightness(75%)를 적용하여 어두워지게 하였더니, 안에 Text도 어두워져서 실패
  • 결국 주어지지 않은 새로운 색상을 생성하여 구현함
    (무료 버전이라 색상이 일부 제공되지 않아서 겪은 문제같습니다.)

• 가운데 정렬 방식

  • place-content을 사용하면 justify-content, align-items를 동시에 설정 가능

  	display: flex;
    	place-content: center;

• 상품이미지 picture tag 사용 (div backgorund-image VS img VS picture)

  1. backgorund-image:

     • 순수 디자인적인 요소로 배경 이미지를 설정할때 사용합니다. 그렇기에 별다른 의미가 담겨있지 않을때 사용하는데, 상품 이미지의 경우 컨텐츠에 포함되는 정보를 가지기 때문에 backgorund-image는 상품이미지 설정에 적합하지 않습니다.

  2. img tag와 반응형을 위한 srcset 속성:

     • img에는 화면의 사이즈별로 이미지를 다르게 설정할 수 있는 srcset이라는 속성이 있습니다. 동일한 이미지를 기기 크기에 따라 해상도 다른 이미지로 전환할때 사용됩니다.

         <img srcset="이미지경로.jpg 원본크기w, 
              sizes="(미디어조건) 최적크기(%단위 사용불가),
              src="기본이미지.jpg" alt="설명" />

         <img srcset="product-480w.jpg 480w,
                      product-800w.jpg 800w"
               sizes="(max-width: 480px) 440px,
                      (max-width: 800px) 777px,"
               src="product.jpg" alt="상품이미지" />

  3. 그렇다면 왜 picture로 선택했는가?

     • 물론, img의 srcset을 이용하면 화면 크기에 따른 이미지 제공이 가능합니다.
       하지만, 사용하는 상황이 다릅니다. 위에서 이야기했던 부분인데 srcset과 size는 일반적으로 동일한 이미지를 최적화된 사이즈로 제공, 저밀도/고밀도로 해상도 전환하기 위해 사용합니다.
     • picture은 아트 디렉션(art direction) 문제를 해결하기 위해 일반적으로 사용합니다. 간단하게 풀어서 말하면 가로/세로의 길이가 다른 이미지가 필요할때 사용합니다.
       PC에서는 전체 큰 이미지를 화면상에 출력하는 것이 가능하지만, 테블릿이나 모바일에서는 화면이 더 작고, 비율도 다르기 때문에 그대로 보여주기 어렵습니다.
       과거에는 단순히 PC 화면만 고려하면 됐지만, 현재는 다양한 기기들이 늘어나면서 더욱 이런 문제가 고착화되었습니다. 이를 위해 이미지 일부분을 자르거나 비율이 다른 이미지를 생성하여 상황에 맞는 이미지를 제공이 필요하게 되었습니다. 이럴때 picture을 사용하여 해결이 가능합니다

            <picture>
              <source media="(max-width: 767px)" srcset="./images/image-product-mobile.jpg" >
              <img src="./images/image-product-desktop.jpg" alt="product image">
            </picture>

그래서 최종적으로 picture를 선택하게 되었습니다.

위 주제와 조금 다른 이야기지만 성능 관점에서 backgorund-image로 여러 개의 큰 이미지를 로드하면 CSS가 구문 분석하는데 시간이 더 오래 걸리기 때문에 전체 사이트 속도가 느려집니다.
그러나 img태그를 사용하면 HTML이 구문 분석될 때 각각의 이미지 요청이 독립적으로 수행되기 때문에 모든 콘텐츠가 한 번에 준비될 때까지 기다리지 않고 위에서 아래로 콘텐츠를 더 빨리 개별적으로 볼 수 있게 됩니다.

참고

• 반응형 이미지 - MDN
• When to use IMG vs. CSS background-image? - stackoverflow
• HTML img vs CSS background-imag

관련 PR

• https://github.com/wjdwjdtn92/Frontend-Mentor-Challenges/pull/1
• https://github.com/wjdwjdtn92/Frontend-Mentor-Challenges/pull/2