Practice Project Retrospective- Overwatch 캐릭터 선택 페이지

Seong Ho Kim·2023년 12월 30일
CSShtmlscss개인 프로젝트연습용 프로젝트

프론트엔드 개발 프로젝트 포트폴리오 & 회고록

목록 보기
4/4
post-thumbnail

😄 Practice Project 소개

  • HTML, SCSS(CSS) 기본적인 연습을 위해 영상 강의를 참조하여 오버워치 게임의 캐릭터를 선택할 수 있는 페이지를 연습용으로 제작해서 정리해보았습니다.

🖥️ Practice Project Github 저장소

Github 저장소 : 여기를 클릭해주세요

🏃🏻 기간 & 참여 인원

  • 날짜 : 2023년 12월 29일(금)
  • 인원 : Front-End 1명 (개인 프로젝트)

🛠️ 기술 스택

  • HTML, CSS, SCSS

HTML과 CSS에 대한 기본적인 내용을 간단하게 Test 해보기 위함으로 기본적인 HTML, CSS만 사용하였습니다.

✅ 구현 기능 선정

1) 필수 구현 List

  1. 캐릭터 List(각도 : 14deg)
  2. Overwatch 로고
  3. 각 캐릭터별 애니메이션 효과

1-1) 캐릭터 List

  • 32개의 오버워치 캐릭터를 담아서 표현하기 위해 hero 부모 클래스에 images 자식 클래스를 넣어서 캐릭터마다 보여줄 List들을 표현하였습니다. 다만, 오버워치 캐릭터 리스트가 32개 이기 때문에 개발자 입장에서 봤을땐, 코드의 가독성이 좋지 않아서 만약에 React를 사용했을때 무조건 map으로 묶어서 반복적인 UI를 하나로 처리하고 싶었지만, 해당 프로젝트는 일반 HTML을 중점으로 잡아서 표현했습니다.

1-1-1 HTML 전체 코드)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Overwatch 캐릭터 선택 페이지</title>
    <link
      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
      rel=" stylesheet"
    />
    <link href="/css/overwatch.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="heroes">
      	<!--캐릭터 리스트가 32개라 코드 가독성이 떨어져 한개로 대체합니다.-->
        <div class="hero">
          <div class="images"></div>
        </div>
        ...생략...
        
      </div>
      ...생략...
    </div>
  </body>
</html>

1-1-2 캐릭터 코드 - HTML)

	<div class="container">
      <div class="heroes">
      	<!--캐릭터 리스트가 32개라 코드 가독성이 떨어져 한개로 대체합니다.-->
        <div class="hero">
          <div class="images"></div>
        </div>
        ...생략...
      </div>
      ...생략...
    </div>

1-1-3 React 전체 코드)

import React from 'react';
import './overwatch.scss'; 

const OverwatchCharacterSelection = () => {
  return (
    <div className="container">
      <div className="heroes">
        {[...Array(30)].map((_, index) => (
          <div className="hero" key={index}>
            <div className="images"></div>
          </div>
        ))}
      </div>
      <div className="logo">
        <img
          src="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png"
          alt="오버워치 로고"
        />
      </div>
    </div>
  );
}

export default OverwatchCharacterSelection;

1-1-4 캐릭터 코드 - React)

	...생략...
    <div className="heroes">
        {[...Array(30)].map((_, index) => (
          <div className="hero" key={index}>
            <div className="images"></div>
          </div>
        ))}
    </div>
  • 일반 HTML 에선 React 처럼 map 메서드로 묶어서 반복 UI를 처리할 수 없는데 React 에선 JSX의 return문안에 HTML과 함께 묶어서 처리할 수 있기 때문에 코드가 간결해지고 유지보수도 용이하다는 장점이 있습니다.(map 메서드의 이해를 돕기위해 React를 예로 표현하고자 했습니다)

1-1-5 SCSS 전체 코드)

.container {
  height: 100vh;
  padding: 50px 0;
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  .heroes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;

    .hero {
      width: 80px;
      height: 84px;
      margin: 4px;
      background-color: #555;
      border: 3px solid white;
      border-radius: 10px;
      transform: skewX(-14deg);
      overflow: hidden;
      transition: transform 0.1s, background-color 0.6s;
      box-sizing: border-box;

      .images {
        width: 140%;
        height: 100%;
        transform: skewX(14deg) translateX(-14px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90px;
      }

      &:hover {
        background-color: #ff9c00;
        transform: skewX(-14deg) scale(1.3);
        z-index: 1;
        cursor: pointer;
      }

      @for $i from 1 through 32 {
        &:nth-child(#{$i}) {
          .images {
            background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero#{$i}.png");
          }
        }
      }
    }
  }

  .logo {
    max-width: 300px;
    margin: 0 auto;

    img {
      width: 100%;
    }
  }
}
  • 웹 페이지에서 Overwatch의 32명의 영웅을 선택하는 카드들을 보여주는 레이아웃과 스타일을 정의하고 있습니다. 특히 CSS에선 32명의 이미지를 각각 적용시키려면 nth-child를 사용해서 List 순서를 일일히 정해줘야 하기에 코드의 가독성이 떨어지고 유지보수 측면에서 매우 어렵다는 단점이 있지만, SCSS에서는 이미지를 반복문으로 돌려서 사용하는 방법으로 스타일링 로직을 처리하도록 했습니다.

😊 연습용 프로젝트 회고

  • 영상 강의를 참조해서 공부하고 만들어 보는것도 좋았지만, CSS가 아직까지 어려웠던 점이 있었던거 같아요 이번 강의를 통해, 모르고 넘어갔던 부분이던지, 아예 몰랐던 부분도 있었기에 확실히 CSS를 공부하면서 프로젝트를 만드는데 큰 도움이 되었던거 같습니다. 특히 여기서 한가지 더 좋았던 점이 있었다면? React로 프로젝트를 하다보니 CSS를 쓰지않고 SCSS 위주로만 썼는데 일반 HTML에서도 SCSS를 CSS에 덮어씌워서 사용해봤는데, 확실히 SCSS의 필요성이 대두되는 거 같아서 좋았습니다:)

  • 아쉬웠던 점도 있었다면 React가 아닌 HTML로 작업하다보니 코드의 가독성이 떨어지고 CSS 내에서도 32개의 아이템 이미지도 반복적으로 처리할 수 있는 반복문 로직이 없어 스타일링을 수정하거나 nth:child로 일일이 모두 추가해줘야하는 불편함이 있었다는 점이 개발자로서 너무 아쉬웠습니다.

  • 어쩌면 아쉬웠던 점이 장점이 될수도 있겠다는 생각이 들었습니다. 이전에 멘토님에게 받았던 코드리뷰중에 nth:child가 왜 유지보수에 안좋은지를 다시한번 느낄 수 있었고 개인 플젝 뿐만 아니라 현업에서도 코드리뷰 문화를 지향하는지 마음에 상기 시킬 수 있어서 감사하다는 생각이 들었습니다.

Reference

  • 해당 프로젝트는 실무로 나가기 위해 준비하고 있는 연습용 프로젝트 입니다.
  • 작성되어 있는 코드는 크롬 브라우저 기준으로 정상적으로 동작하긴 하지만, 일부 컴퓨터에는 브라우저 마다 환경이 다르고 일부는 정상적으로 동작하지 않을 수 있어 참고용으로만 봐주시면 감사드리겠습니다.
profile
Seong Ho Kim
안녕하세요 Junior UIUX Designer 입니다 😊
이전 포스트

3rd Team Project Retrospective - OneBook(Fin_Pong)

0개의 댓글