# Tailwind CSS로 복잡한 애니메이션 만드는 방법

TailwindCSS를 사용하여 인상적이고 복잡한 애니메이션을 만드는 방법에 대해 살펴보겠습니다. TailwindCSS는 개발자들이 모던하고 반응형이며 시각적으로 매력적인 사용자 인터페이스를 쉽게 구축할 수 있는 매우 인기있는 유틸리티 기반 CSS 프레임워크입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## TailwindCSS 소개

복잡한 애니메이션에 들어가기 전에, TailwindCSS를 간단히 소개하겠습니다. TailwindCSS는 HTML 요소에 직접 적용할 수 있는 다양한 유틸리티 클래스를 제공하여 사용자 지정 CSS를 작성하지 않고도 UI 컴포넌트를 구축할 수 있도록 하는 CSS 프레임워크입니다. TailwindCSS의 유연성을 통해 개발자들은 광범위한 디자인 스타일과 애니메이션을 손쉽게 구현할 수 있습니다.

## 준비물

- TailwindCSS 설정
- CSS 및 CSS에서의 애니메이션에 대한 기본적인 이해

## 우리가 만들 것

Tailwind CSS로 아래와 같은 애니메이션을 만들어보겠습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="https://miro.medium.com/v2/resize:fit:1200/1*7luPcDVyB3smqaaFIgZ0SA.gif" />

## Tailwind CSS 애니메이션 시작하기

애니메이션에 들어가기 전에 프로젝트에 Tailwind CSS를 설정했는지 확인하세요.

Tailwind CSS는 HTML 요소에 적용할 수 있는 애니메이션에 대한 제한된 집합의 유틸리티 클래스를 제공합니다. 이를 살펴보겠습니다.

## 애니메이션 적용하기

TailwindCSS에는 Spin, Bounce, Ping, Pulse 등 다양한 미리 정의된 애니메이션이 있습니다. 요소에 애니메이션을 적용하려면 원하는 애니메이션 이름 뒤에 animate 클래스를 추가하면 됩니다. 예를 들어, spin 애니메이션을 적용하려면 animate-spin 클래스를 사용할 수 있습니다. 다음은 예시입니다.

```html
<div class="animate-spin">Look Mom! I am spinning!</div>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이것은 페이지가 로드될 때 화면에서 div 요소를 회전시켜 "회전" 애니메이션을 적용합니다.

## 사용자 정의 애니메이션 정의하기

Tailwind.config.js에서 사용자 정의 애니메이션을 만들거나 기존 애니메이션을 사용자 정의하는 방법을 살펴보겠습니다.

새로운 @keyframes 애니메이션을 추가하려면 테마 구성의 keyframes 섹션을 사용하고 animation 섹션에 애니메이션을 추가하면 됩니다.

```js
module.exports = {
  theme: {
    extend: {
      animation: {
        //기존 애니메이션 사용자 정의하기
        "spin-slow": "spin 3s linear infinite",

        //새로운 애니메이션 추가하기
        "my-animation": "new-animation 3s linear infinite",
      },
      keyframes: {
        //여기서 새로운 애니메이션을 위한 keyframes를 추가합니다.
        "new-animation": {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
    },
  },
};
```

이제 우리는 이 유틸리티를 사용하여 우리만의 사용자 정의 애니메이션을 만들 수 있습니다. 우리는 먼저 애니메이션의 @keyframes를 추가해야 합니다.

```js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        //우리의 fall 애니메이션 keyframes
        fall: {
          "0%": { transform: "translate(0%,-150%) skewX(0deg)" },
          "50%": { transform: "translate(0%,0%) skewX(-10deg)" },
          "100%": { transform: "translate(0%,150%) skewX(0deg)" },
        },
      },

      animation: {
        // 그런 다음 테마 구성의 애니메이션 섹션에서 이러한 keyframes를 이름으로 참조할 수 있습니다.
        fall: "fall 3s ease infinite",
        // 애니메이션 단축 CSS 속성 즉
        // 애니메이션 이름 | 애니메이션 지속 시간 | 애니메이션 타이밍 함수
        // 애니메이션 반복 횟수
      },
    },
  },
};
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이렇게 하면 이제 animate-fall 클래스를 적용하여 모든 요소에 우리의 fall 애니메이션을 적용할 수 있습니다.

우리의 fall 애니메이션을 사용할 준비가 되었습니다.

<img src="https://miro.medium.com/v2/resize:fit:1200/1*h2VZc5HtFSj1UBd1gp6_kg.gif" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제 우리의 애니메이션을 해체해 보겠습니다.

- "Develop"라는 단어가 위에서 내려와 하단으로 외부로 확장됩니다.
- "Develop"가 나간 후에 "Design"이

중앙으로 우아하게 내려가며, 동기화를 보장하기 위해 애니메이션 주기의 절반(이 경우 1.5초)의 지연을 가집니다.

- "Develop"와 "Design"의 각 글자는 파도 모양으로 내려가며, 각 글자의 하강 사이에 100ms 또는 150ms의 지연이 있어 매력적인 시각적 효과를 만듭니다.

하지만 이를 어떻게 할까요? tailwind.config.js에는 하나의 애니메이션만 정의할 수 있고 애니메이션 지연을 적용할 수 있는 유틸리티 클래스가 없습니다.

이를 수행하는 방법이 두 가지 있습니다.

1. 임의의 값 사용하기
   테마에 포함시키기에 맞지 않는 일회용 애니메이션 값을 사용해야 하는 경우, 임의의 값 사용하기 위해 대괄호를 사용하여 어떤 임의의 값을 사용하여 property를 생성할 수 있습니다.

```html
<div class="animate-[fall_3s_ease_100ms_infinite]">
  
</div>

<div class="animate-[fall_3s_ease_1s_infinite]">
  
</div>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2. TailwindCSS 플러그인
   플러그인을 사용하면 Tailwind가 CSS 대신 JavaScript를 사용하여 사용자의 스타일시트에 새로운 스타일을 주입할 수 있습니다.

```js
module.exports = {
  plugin(({ matchUtilities, theme }) => {

      //Tailwind에 사용할 css 속성 추가
      matchUtilities({
        'animation-delay': (value) => {
          return {
            'animation-delay': value,
          };
        },
      });
    }),
  ],
}
```

이제 animation-delay-[time] 클래스를 사용하여 애니메이션이 시작되기 전에 지연을 도입할 수 있습니다.

```html
<div className="animate-delay animation-delay-[1000ms]">
  
</div>
```

이렇게 하면 이제 우리의 완전한 애니메이션을 만들 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```jsx
const TypographyAnimation = () => {
  const firstWord = "develop";
  const secondWord = "design";

  const renderWordAnimation = (word: string, startingDelay: number) => {
    return word.split("").map((letter, index) => (
      <span
        key={index}
        className={`animate-fall animation-delay-[${startingDelay + index * 50}ms] translate-y-[-150%]`}
      >
        {letter}
      </span>
    ));
  };

  return (
    <span className="relative inline-flex ml-2 overflow-hidden p-2">
      <div className="flex flex-row">{renderWordAnimation(firstWord, 0)}</div>

      <span className="absolute top-0 bottom-0">
        <div className="flex flex-row">{renderWordAnimation(secondWord, 1500)}</div>
      </span>
    </span>
  );
};
```

Tailwind CSS 사용할 때 애니메이션을 작업하는 방법에 대해서 소개합니다

Tailwind CSS로 복잡한 애니메이션 만드는 방법

# linear-gradient를 활용한 여러가지 border 애니메이션 5가지

`linear-gradient`, `conic-gradient`,`hue-rotate` 등을 활용해 아래 5가지 border 애니메이션을 만드는 방법에 대해서 공유합니다.
단순 코드 공유가 아닌 결과물을 보고 애니메이션을 만들어가는 과정을 담아보려고 합니다.

**1. 길이가 변하는 border 애니메이션**
![2](./img/double_border.gif)
**2. 움직이는 점선 border 애니메이션**
![1](./img/dotted_box.gif)
**3. 무지개 border 애니메이션**
![3](./img/rotated_rainbow_box.gif)
**4. 빛나는 border 애니메이션**
![4](./img/rotated_conic_box.gif)
**5. 색깔이 변하는 border 애니메이션**
![5](./img/hue_box.gif)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

---

## 1. 길이가 변하는 border 애니메이션

![2](./img/double_border.gif)
첫 번째로 만들어볼 것은 마우스 오버 시 border 길이가 변하는 박스인데요.
좌측 상단과 우측 하단의 선의 길이가 변하는 것처럼 보이지만
아래 박스처럼 좌측 상단과 우측 하단의 사각형이 커졌다 작아졌다 하는 구조로 만들 수 있습니다.
![6](./img/double_box_real.gif)

여기서 적절한 위치의 border만 사용하면 원하는 결과를 얻을 수 있을 것 같습니다.
그리고 좌상단, 우하단 두 개의 사각형만 추가로 필요하므로 `::after`, `::before` 가상 요소만 사용하여 깔끔하게 작업할 수 있을 것 같습니다.

```css
.double_box {
  position: relative;
  border: 1px solid #0f0;
  width: 200px;
  height: 100px;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    transition: 0.2s ease-in-out;
  }

  &::before {
    top: -5px;
    left: -5px;
    border-top: 1px solid #0f0;
    border-left: 1px solid #0f0;
  }

  &::after {
    right: -5px;
    bottom: -5px;
    border-bottom: 1px solid #0f0;
    border-right: 1px solid #0f0;
  }

  &:hover::before,
  &:hover::after {
    width: calc(100% + 9px);
    height: calc(100% + 9px);
  }
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 결과

`::before`, `::after` 가상 요소의 border와 사이즈를 변경해서 아래와 같은 길이가 변하는 border 애니메이션을 구현할 수 있습니다.

<iframe height="307.078125" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/yLEgPNe?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/yLEgPNe">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 2. 움직이는 점선 애니메이션

![1](./img/dotted_box.gif)

두 번째로 만들어볼 것은 움직이는 점선 애니메이션인데요.
우선 점선 박스를 만들기 위해 border 속성 값인 dotted를 사용해 보겠습니다.

```css
border: 1px dotted #333;
```

![1](./img/dotted-box.png)

하지만 border는 따로 animation을 제공하지 않기 때문에 움직이는 점선 애니메이션을 만들 수 없습니다.
그렇기 때문에 다른 방법으로 점선을 구현해야 합니다. 점선은 `linear-gradient` 로 아래와 같이 구현할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```css
.dotted_box {
  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 4px 1px repeat-x, /* 상 */ linear-gradient(
        90deg,
        #333 50%,
        transparent 50%
      ) 0 100% / 4px 1px repeat-x, /* 하 */ linear-gradient(0, #333 50%, transparent 50%) 0 0 / 1px 4px repeat-y, /* 좌 */
      linear-gradient(0, #333 50%, transparent 50%) 100% 0 / 1px 4px repeat-y; /* 우 */
}
```

![1](./img/dotted-box.png)

점선 박스를 만들었으면 점선을 이동시켜서 움직이는 것처럼 애니메이션을 작성해야 합니다.
시계방향으로 회전하는 애니메이션을 만들고 싶다면 아래 애니메이션 \처럼 `background-position`을 각각 이동시켜주면 됩니다.

**시계 방향**

```css
@keyframes linearGradientMove {
  100% {
    /* 상  ,    하    ,   좌   ,  우    */
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}
```

**반시계 방향**
반시계 방향이라면 아래와 같이 작성하면 됩니다.
복잡해보이지만 직접 작성해보면 어떻게 동작하는지 이해가 쉽게 됩니다.

```css
@keyframes linearGradientMove {
  100% {
    /* 상  ,    하    ,   좌   ,  우    */
    background-position: -4px 0, 4px 100%, 0 4px, 100% -4px;
  }
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 결과

border 속성으로는 지원하지 않지만 `linear-gradient`로 아래와 같이 움직이는 점선 애니메이션을 구현할 수 있습니다.

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/zYaNPMR?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/zYaNPMR">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 3. 무지개 border 애니메이션

![3](./img/rotated_rainbow_box.gif)

세 번째로는 무지개 border 애니메이션을 구현해 보겠습니다.
가장 먼저 기본적인 css 속성으로 해결할 수 있는지 판단해 볼 텐데요.
위와 같은 스펙을 지원하는 css 속성은 없으니 다른 방법으로 만들어야겠다는 생각이 듭니다.
이번에도 테두리만 보이지만 사각형을 활용해 볼 수 있을 것 같습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```css
.rotated_box {
  &::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(
        #d53e33,
        #d53e33
      ), linear-gradient(#377af5, #377af5);
    animation: rotate 3s linear infinite;
  }
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

![3](./img/rainbow_box.png)

`linear-gradient` 활용해 `::before` 요소에 위와 같이 4개의 사각형을 만들어줍니다.
그리고 회전을 시켜주면 테두리가 비슷한 모습이 나올 것 같습니다.

![3](./img/rainbow_box2.gif)

회전을 시켜보니 위 영상처럼 빈 공간이 노출되는데요.
이 부분은 `::before`의 사이즈를 키워서 해결할 수 있습니다.

```css
.rotated_box {
  &::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%; /* 2배 */
    height: 200%; /* 2배 */
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(
        #d53e33,
        #d53e33
      ), linear-gradient(#377af5, #377af5);
    animation: rotate 3s linear infinite;
  }
}
```

![3](./img/rainbow_box3.gif)

이런 형태까지 만들었으니 이제 `::after` 요소를 이용해서 내부 영역을 흰색으로 채워주면 됩니다.

### 결과

예시에서는 4개만 사용했지만 더 다양한 색깔로 나누어서도 구현이 가능할 것 같습니다.

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/KKeaZay?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/KKeaZay">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 4. 빛나는 border 애니메이션

![4](./img/rotated_conic_box.gif)

다음으로 만들어 볼 것은 테두리가 빛나는 애니메이션입니다.
이 애니메이션 또한 기본 css 속성이 존재하지 않기 때문에 다른 방법으로 구현해야 하는데요.

이번엔 `linear-gradient`가 아니라 `conic-gradient`를 이용해서 구현해 보겠습니다.

`linear-gradient`가 직선 형태의 그라데이션이라면 `conic-gradient`는 중심점을 기준으로 원형으로 그라데이션을 그리는 속성입니다.

```css
.rotated_one_conic_box {
  &::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
  }
}
```

![4](./img/conic_box1.png)

이제 이 `::before` 가상 요소를 무지개 애니메이션 때와 같이 회전시켜주고 `::after` 요소를 이용해 내부 컨텐츠를 채워주면 됩니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 결과

<iframe height="300" style="width: 100%;" scrolling="no" title="conic-box" src="https://codepen.io/13akstjq/embed/GRGrVZg?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/GRGrVZg">
  conic-box</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 5. 색깔이 변하는 border 애니메이션

![5](./img/hue_box.gif)

색깔이 변하는 border 애니메이션은 그라데이션 border만 만들 수 있다면 쉽게 적용할 수 있습니다.
그라데이션 border 관련해서는 [재원님이 작성한 포스트](https://yobi.navercorp.com/UIDEV-Team3-Works/posts/238?referrerId=368655786)를 참고하였습니다.

```css
.rotated_gradient_box {
  width: 200px;
  height: 100px;
  margin: 7px auto 0;
  border-radius: 21px;
  border: 10px solid transparent;
  background-image: linear-gradient(#444, #444), linear-gradient(to left, #37a9fa, #5951f3);
  background-clip: content-box, border-box;
  background-origin: border-box;
}
```

![5](./img/gradient-box1.png)

이렇게 그라디언트 border를 적용 했으면 `hue-rotate` 속성과 애니메이션으로 색상을 변경해 주면 됩니다.
`hue-rotate`는 각도 값을 넣어주면 되며, 아래 사진과 같은 색상환에 따라서 색상이 노출됩니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```css
hue-ratote(angle)
```

![5](./img/hue-rotate.png)

### 결과

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/MWXJNXX?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/MWXJNXX">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 마치며

점점 인터렉티브한 웹사이트가 많아지면서 기존 속성들로 해결하기 어려운 경우들이 많이 있는데요.
그럴 때는 전혀 다른 용도로 사용되는 속성을 이용하거나, 도형, 마스크 등등 다양한 방법으로 구현해야 합니다. 스펙을 조정하는 방법도 있겠지만 다양한 아이디어로 스펙을 구현해 보는 것도 좋을 것 같습니다.

linear-gradient, conic-gradient 등을 활용해 border 애니메이션을 만드는 방법에 대해서 공유합니다

linear-gradient를 활용한 border 애니메이션 5가지 만들기

# HTML CSS로 반응형 테이블 만드는 방법

<img src="https://miro.medium.com/v2/resize:fit:1400/1*jTLeBdCKKscV-GR2nVSy2w.gif" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이 글은 CSS Grid에 대한 통찰을 제공하고, 일상적인 작업에서 CSS Grid를 어떻게 활용하는지에 대한 예제를 제공하기 위한 것입니다.

그리드 레이아웃은 열과 행의 시스템을 사용하여 아름답고 간단한 레이아웃을 만들 수 있는 새로운 CSS 기능입니다. 웹 페이지의 디자인을 귀찮게하지 않고 만들 수 있게 해줍니다! 2017년 10월 이후로 모든 주요 브라우저에서 지원되고 있습니다.

Wes Bos가 제작한 이 멋진 강의를 보고 CSS Grid의 팬이 되었습니다!

Evodeck에서 일한 프로젝트 중 하나에서 그리드 레이아웃을 사용하여 데이터 테이블을 구현할 수 있는 기회를 보았고 시도해 보기로 결정했습니다. 개발 프로세스와 애플리케이션의 진행에 큰 영향을 미치지 않는 방식으로 변경하거나 롤백할 수 있는 작은 내용을 선택했습니다.

시각적인 목적으로, 가상의 사용자 데이터를 사용하여 작은 예제를 보여 드리겠습니다.

<img src="./img/Responsive-data-tables-with-CSS-Grid_1.png" />

이 테이블의 CSS 코드는 몇 줄인가요?

<img src="./img/Responsive-data-tables-with-CSS-Grid_2.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

12줄입니다! 맞습니다. CSS에서 12줄의 코드만 있으면 되고 마법은 2번째와 3번째 줄에서 일어납니다. 여기서는 클래스가 grid인 HTML 요소가 내용을 그리드로 표시하고 각각의 5개 열이 사용 가능한 공간의 1fr로 설정되도록 지정했습니다! 😲 다른 설정은 필요 없으며, 이는 본질적으로 반응형입니다! 또한 CSS의 repeat() 함수를 사용했는데, 자세한 내용은 여기를 확인하십시오.

<img src="https://miro.medium.com/v2/resize:fit:1400/1*38Jo6O4-7ZBLrq0fXVRvOA.gif" />

"1fr"이라는 마법 표현은 요소가 사용 가능한 공간의 일부분을 차지한다는 것을 의미합니다! 이를 통해 필요한만큼 많은 공간을 갖는 열을 만들고 고정 너비로 작업할 필요가 없어집니다! 😮

이제 다양한 너비의 열이 필요한 경우, 다음과 같이 지정하면 됩니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="./img/Responsive-data-tables-with-CSS-Grid_4.png" />

여기서 말하는 바는 다음과 같습니다.

- "Id" 열은 사용 가능한 공간의 1fr을 차지해야 합니다.
- "Full Name"과 "Email" 열은 사용 가능한 공간의 3fr을 차지해야 합니다.
- "Country"와 "Created at" 열은 사용 가능한 공간의 2fr을 차지해야 합니다.

결과는 다음과 같습니다:

<img src="./img/Responsive-data-tables-with-CSS-Grid_5.png" />

그리고 우리는 더 많은 것을 할 수 있습니다! 분수 대신 고정 너비로 작업하려면 minmax() 함수를 사용할 수도 있습니다. 예를 들어, 첫 번째 열의 너비를 최소 50px, 최대 100px로 고정하려면 코드는 다음과 같습니다:

<img src="./img/Responsive-data-tables-with-CSS-Grid_6.png" />

그러면 최종 결과는 아래와 같습니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="./img/Responsive-data-tables-with-CSS-Grid_7.png" />

<img src="./img/Responsive-data-tables-with-CSS-Grid_8.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS Grid의 가장 일반적인 사용법은 grid-template-areas를 사용하여 레이아웃을 만드는 것이지만, 저는 테이블에도 매우 유용하다고 생각합니다!

요약하면, 저는 CSS Grid가 매우 유용하고 사용하기 쉽다고 생각하며, 미래가 있고 커뮤니티에서 잘 받아들여질 것이라고 생각합니다!

Grid를 Flexbox나 테이블보다 선택해야 하는 이유에 대한 세부 사항이나 논의에는 들어가지 않겠습니다. 단순히 Grid를 선택한 이유는 매우 쉽게 작업할 수 있고, 테이블보다 코드가 적게 들며, Flexbox보다 복잡하지 않으며, 무엇보다 Out-of-the-box에서 많은 기능을 제공하기 때문입니다!

HTML CSS를 활용해서 브라우저 너비에 따라 줄어드는 테이블을 만드는 방법을 공유합니다

HTML CSS로 반응형 테이블 만드는 방법

# image-set 속성으로 반응형 background-image 사용하기

`image-set` 속성을 사용해서 아래와 같이 브라우저 및 디바이스마다 다른 이미지를 적용하는 방법에 대해 알 수 있습니다.

<img src="https://user-images.githubusercontent.com/46010705/199180122-3b69bb91-75b2-4b7e-9f62-ac80bde4a81b.gif" width="700">

---

## 1. srcset

`image-set` 속성에 대해서 소개해 드리기 전에 기존에 자주 사용하는 `srcset` 대해서 간략히 설명하고 넘어가도록 하겠습니다.

코드 작성을 하다 보면 아래와 같이 이미지를 사용하는 경우가 많이 있는데요.

```html
<img src="./img/large-landscape_2048x1365.jpeg" width="2048" height="1365" alt="" />
```

```css
img {
  max-width: 100%;
  height: auto;
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

코드를 위와 같이 작성하면 브라우저에서 아래와 같이 보입니다.

<img src="https://user-images.githubusercontent.com/46010705/199177264-f4e1c114-740c-49a1-b357-4ad8987acc16.png" width="500">

고해상도의 이미지를 사용하는 것은 큰 브라우저에서는 의미가 있지만 아래처럼 핸드폰 화면에서도 엄청나게 큰 사이즈의 이미지 파일을 보여주는 것은 낭비가 됩니다.

<img src="https://user-images.githubusercontent.com/46010705/199177660-777e3efa-a51a-48c8-b96b-de45bc07a6a2.JPG" width="500">

핸드폰 화면같이 작은 경우에서는 상대적으로 작은 이미지를 보여주더라도 문제가 없습니다.

### 사용 방법

이러한 개념으로 나오게 된 `srcset`은 아래와 같이 사용하고 있습니다.
w(너비)가 750 이하인 경우에는 작은 사진을 보여주도록 작성한 코드입니다.

```html
<img
  src="./img/large-landscape_2048x1365.jpeg"
  srcset="./img/small-landscape_799x533.jpeg 750w, ./img/large-landscape_2048x1365.jpeg 2048w"
  width="2048"
  height="1536"
  alt=""
/>
```

### 결과

잘 동작하는지는 브라우저에서 확인해 보겠습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="https://user-images.githubusercontent.com/46010705/199180122-3b69bb91-75b2-4b7e-9f62-ac80bde4a81b.gif" width="700">

너비에 따라서 명시한 이미지 소스대로 보이는 것을 볼 수 있습니다.

> 여기서는 확인을 위해서 small, large에 서로 비율이 다른 이미지를 사용했지만,<br> `srcset` 속성은 비율이 같고 다양한 사이즈의 크기를 갖는 이미지들을 사용하고 싶을 때 적합한 속성이고 만약 비율이 다른 이미지를 사용하고 싶다면 `@media` 미디어쿼리를 사용하는 것이 적합합니다.

추가로, 크롬 브라우저에서 테스트 시 아래 gif처럼 브라우저 사이즈 조건을 만족하는 상황에서 새로고침을 해도 `srcset`이 적용이 안되는 경우가 있는데요.

<img src="https://user-images.githubusercontent.com/46010705/199181357-b59f14e0-ec15-4b8d-be5f-6f853879acfb.gif" width="700">

이것은 크롬브라우저의 이미지 캐시에 의해서 발생하는 이슈로 개발자도구 옵션의 Network 탭에서 'Disable cache' 를 활성화해주면 정상적으로 동작하는 것을 확인하실 수 있습니다.

<img src="https://user-images.githubusercontent.com/46010705/199181626-07917403-e6e3-45cb-9bfc-4747199200e2.png" width="700">

## 2. image-set

`image-set` 속성은 `srcset` 속성과 같은 목적이고 사용법도 거의 동일합니다.<br> 다만 img태그에 사용하는지 `background-image`에 사용하는지에 따라 다를 뿐 입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 사용방법

**As-is**

```css
.box {
  background-image: url("./img/large-landscape_2048x1365.jpeg");
}
```

**To-be**

```css
.box {
  background-image: image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
}
```

크롬 브라우저에서는 `-webkit-` prefix를 붙혀야 정상 동작합니다.

```css
.box {
  background-image: -webkit-image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
  background-image: image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 결과

브라우저에서 테스트해보면 아래 gif처럼 PC인 경우에 large이미지가 MW인 경우에는 small 이미지가 적용되는 것을 보실 수 있습니다.

<img src="https://user-images.githubusercontent.com/46010705/199197725-c52d111e-6815-4393-bf47-b3c3619d4ac1.gif" width="700">

모바일 기기에서도 small 이미지가 정상적으로 적용됩니다.

<img src="https://user-images.githubusercontent.com/46010705/199198274-2dfba72a-ae23-434a-803d-107ebe7da8d9.JPG" width="500">



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 지원범위

<img src="https://user-images.githubusercontent.com/46010705/199199878-dc0221d9-5c04-430e-bc0d-30cce82b23c3.png" width="700">

- IE는 지원하지 않고 다른 최신 브라우저에서도 완벽히 동작하지는 않기 때문에 사용에 제약은 있을 것으로 보입니다.

- `image-set`은 `srcset`과 달리 'x' 단위만 사용 가능하고 'w', 'h' 단위는 지원 예정입니다. [MDN](https://drafts.csswg.org/css-images-4/#issue-372ac642)

## 마치며

작업할 때 보통 기획에 따라서 img를 사용할지 `background-image`를 사용할지 결정이 되는 경우가 많은데요. <br> img 요소 속성들과 `background-image`의 값들이 기능적으로 공통되는 부분이 많아지면 UI개발을 함에 있어서 작업 방식을 선택할 때 보다 수월해지지 않을까 하는 생각이 들었습니다.

image-set 속성으로 디바이스에 따라 다른 이미지를 적용하는 방법에 대해서 살펴봅니다

image-set 속성으로 반응형 background-image 사용하기

# 웹 서비스 디자인 시스템 컬러 설계하는 방법

## 지속 가능한 시스템을 구축하기 위한 16가지 팁

[이 게시물은 그의 공식 링크에서 업데이트되었습니다.]

<img src="./img/Color-in-Design-Systems_0.png" />

컬러는 내 전문 분야는 아니지만, 여기 시스템이 안정화되면서 핵심 팔레트, 색상 온도 및 색조 선택, 보조 팔레트, 그리고 접근성 있는 대비에 대한 문제를 해결하는 동안 배운 16가지 교훈이 있다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 핵심 팔레트

여기서 말하는 것은 브랜드 컬러, 중립색 및 일반적으로 상호 작용하는 디지털 블루와 같은 모든 곳에서 사용되는 색상입니다.

## #1. 브랜드 컬러를 빨리 안정화하라

모든 조직은 핵심 브랜드 컬러가 하나, 둘 또는 그 이상일 수 있다. 그 빨강. 그 파랑. 그 주황. 이것들을 확정하라. 색상 변수 하나 또는 둘로 상당히 설정되어 있더라도, 계속해서 주요 색상을 변경하는 것만큼 디자인 시스템 팀이 그들의 역량을 향상시키지 못한다는 신호는 없다.

중요 사항: 주요 브랜드 컬러를 초기에 결정하라. 왜냐하면 그것들은 빠르게 널리 퍼져간다.

<img src="./img/Color-in-Design-Systems_1.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## #2. 브랜드 참여 (브랜드 컬러 변경 시)

브랜드 블루가 조금 탁한가요? 살리고 싶은 유혹을 이겨내지 못하겠나요? "우리는 웹을 위해 브랜드 오렌지를 채도를 높였어요"라는 경박한 발언에 이어 브랜드가 "무슨 말이야?"라고 반응하는 것보다 이른 상호 협업에 독이 들어간다.

중요 사항: 브랜드 컬러는 브랜드 팀의 영역이다. 그래서 그들과 조정하고 필요한 경우 그들의 판단에 따르라.

<img src="./img/Color-in-Design-Systems_2.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## #3. 중립색은 중립적이지 않게

어두운 짙은 회색부터 푹신한 연한 회색까지 중립색은 필수적인 UI 거푸집을 제공한다. 시스템에 중립색을 적재하면 몇 가지라도, 탁한 색상에 팀이 접근할 수 있는 위험이 있다. 또한 "와이어프레임처럼 보이는" 디자인으로 이어질 수 있다. 그리고 어두운 색상이나 밝은 색상 배경에서 충분한 접근성 있는 대비를 가진 어느 회색도 가지고 있지 않다.

중요 사항: 유용한 대비를 얻기 위해 몇 가지 연한 회색과 몇 가지 어두운 회색을 제공하라. 그러나 중간 회색을 피하는 것을 고려해라.

<img src="./img/Color-in-Design-Systems_3.png" />

## #4. "디지털 블루"로 가라. 모두가 그렇게 한다.

내 지난 다섯 개의 디자인 시스템은 기본 버튼 및 링크 색상으로 채도가 높은 파란색을 선택했다. 링크는 항상 파란색이었고 아마도 최초의 브라우저 탄생 이후로였을지도 모른다. 이 "디지털" 블루는 링크 및 클릭 가능한 항목을 위한 유틸리티 색상으로 어떤 핵심 팔레트에나 필수적이다.

중요 사항: "디지털 블루"를 선택할 때 (그렇게 하게 될 때 ;) ) 접근성이 있는 색상을 선택하고 브랜드 자체의 파란색이나 빨간색, 주황색, 보라

색 또는 녹색과 충돌하지 않도록 확인하라.

<img src="./img/Color-in-Design-Systems_4.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 색상의 색조와 채도

몇 가지 색상만 선택하고 끝낼 수는 없다, 맞나요? 시스템 사용자들은 종종 색상 선택을 범위별로 조정해야 하며 쉽게 재사용하고 경계를 알아야 한다.

## #5. 각 색상별로 색조와 채도 범위 쌓기

색상 팔레트 디스플레이 패턴은 웹보다 훨씬 오래되었다. 그럼에도 불구하고 나는 여전히 조밀하게 배열된 색조 스택을 좋아한다. 그것들은 그저... 아름답다. 최고의 스택은 단순히 색상뿐만 아니라 HEX 코드, 코드 변수 및 기타 지시자 (표면에 오버레이 된 유형 금지와 같은)를 결합하여 시각적으로 표현한다. 빠른 스캔만 필요하다.

중요 사항: 각 색상에 사용 가능한 색상을 스택으로 쌓고 중요한 세부 정보를 촘촘하게 포함하는 시각화로서 스택을 다루어라.

<img src="./img/Color-in-Design-Systems_5.png" />

## #6. 밝기별로 색조와 채도에 이름 붙이기

우리 모두가 그렇게 해온 일이다. 시스템이 한 달 동안 안정되면, 중립 색상 $color-gray-1, $color-gray-2, ..., $color-gray-7은 안정적이다. 그런 다음, 순간, -1과 -2 사이에 끼워 넣을 새로운 색조가 생겼다. 그런 번호 체계는 별로다.

중요 사항: 색상 이름을 HSL의 밝기를 기준으로 0에서 100 사이로 스케일을 조정하라. 예: $color-gray-05 및 $color-gray-92와 같이. 이 스케일은 어두운 색상에서 밝은 색상으로 익숙한 범위를 반영하며 새로운 옵션을 삽입하고 나중에 사용되지 않을 때까지 $color-gray-93을 기억할 것이다.

<img src="./img/Color-in-Design-Systems_6.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## #7. 색조와 채도의 양 제한하기

좋은 시스템의 핵심은 끝없는 옵션 없이 선택의 폭, 일관된 미학을 제공하는 것이다. 대부분의 경우, 디자인 시스템은 무한한 선택을 제공할 필요가 없다. 제공하는 옵션이 많을수록 조화롭게 조합하고 응용 프로그램 간에 일관된 느낌을 유지하기가 더 어려워진다.

중요 사항: 손쉬운 다양성을 제공하고 지루한 다양성을 피하십시오. 시스템 사용자들에게 충분한 선택권을 부여하되, 하나의 옵션 이상은 제공하지만 몇 가지 의도적인 선택만을 허용하십시오.

<img src="./img/Color-in-Design-Systems_7.png" />

## #8. 변형 방법을 알려주라: 직접 선택 또는 기능적 선택

SASS 및 Stylus와 같은 현대적인 도구는 색상을 변형시키는 어둡게 만들기(darken) 및 밝게 만들기(lighten)와 같은 변형 함수를 제공한다. 이러한 편리한 도구들은 버튼을 호버하는 경우와 같이 색상을 세밀하게 대비시킬 수 있게 한다.

그러나 변형은 문제가 될 수 있다: 신중하게 설계된 기본 색상이 접근성이 떨어지는 대안으로 바뀔 수 있다(아래 참조), 페이지의 전반적인 팔레트가 흐릴 수 있다 또는 중간 밝기의 색상에 대한 "5% 시스템"이 중간 밝기의 색상에 대해 충분한 대비를 제공하지 못할 수 있다.

중요 사항: 시스템에서 색상 변형을 의도적으로 허용하거나 피하십시오. 이러한 실천을 지지하는 경우, 효과적으로 이러한 실천이 언제와 어떻게 이루어져야 하는지에 대한 예제를 제공하십시오. 예를 들어 중간 밝기의 경우 5-10%, 더 극단적인 경우 10-20%를 사용하십시오. 변형을 피해야 하는 경우, 간결하게 문서화하십시오.

<img src="./img/Color-in-Design-Systems_8.png" />

# 보조 팔레트

브랜드 색상과 그 변형을 넘어, 잘 고려된 색상 시스템은 다양한 목적을 위해 예약

된 더 넓은 다양한 색상을 배열한다.

## #9. 피드백 색상과 같은 의미 있는 세트 정의하기

대부분의 시스템은 오류를 위한 특정 빨간색, 성공을 위한 녹색, 경고를 위한 노란색 및 (가능한 경우 더 가벼운 하늘색) 정보 메시지를 위한 파란색을 예약한다. 피드백 색상은 다른 주요 구성 요소와 상호 작용하는 페이지 상단에 위치하거나 원하지 않는 상황의 결과로 나타난다. 시스템 지침이 없으면 이러한 메시지는 제품 코드에 내장되어 제품 팀이 문제를 빠르게 해결하고 이동하는 결과가 될 수 있다.

중요 사항: 조화롭게 맞물리는 색상을 보장하기 위해 피드백 색상 및 기타 관련 세트를 탐색하고 정의하십시오. 나중에 막바지에 밀어 넣지 않고 팀원들이 "그냥 구글에서 가져왔어"라고 기억하지 않게 하십시오.

<img src="./img/Color-in-Design-Systems_9.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## #10. 테마 다양성 설명하기

일부 시스템에서는 제품, 섹션 또는 브랜드별로 커스텀 색상을 사용한다. 이는 주요 브랜드 (예: 메리어트 인터내셔널)를 하위 브랜드 (코트야드 호텔, 리츠 칼튼 및 Moxy 호텔과 같은)와 관련시키는 결과일 수 있다. 또는 주제별 테마를 사용한다. 사용자가 완전한 통제를 가질 수도 있으며 그들이 할 수 있는 (모든 혼돈의) 범위를 설명해야 할 수도 있다.

중요 사항: 사용 가능한 테마의 범위를 간략하게 공개하고 특정 맥락에서 허용되는 테마 색상의 범위에 대한 경계를 설정하십시오.

<img src="./img/Color-in-Design-Systems_10.png" />

## #11. 테마 작동 방식 정의하기

"가져다 쓰라!"라고 말하는 것만으로 충분하지 않다. 테마 색상은 버튼 배경색, 활성 탭 배경색 또는 주요 내비게이션의 두꺼운 상단 테두리와 같은 UI에서 예측 가능한 강조 효과에 적용될 수 있다. 더 중요한 것은 테마 색상이 다른 요소를 변경하지 않도록 금지되어야 한다는 점이다. (긴 형태 유형 또는 링크 색상과 같이) 안 보이게 되는 링크 색상과 같은 특정 UI 요소를 제외할 때마다 더 중요하다.

중요 사항: 특정 UI 요소의 속성을 참조함으로써 테마가 작동하는 방식을 식별하십시오. 더 중요한 것은 대부분의 요소가 제한되어 있음을 명확히하십시오.

<img src="./img/Color-in-Design-Systems_11.png" />

## #12. 먼지가 날리기 전까지 컬러 믹싱 가이드 피하기

내가 가장 좋아하는 디자인 시스템 도구 중 하나는 Google의 MDL 컬러 커스터마이저이다. 이 도구를 사용하면 사용자가 주요 및 보조 UI 색상을 효과적으로 결합할 수 있다. 매우 쉽고 결과가 매우 유용하다. 그러나 나와 함께 일하는 시스템 팀은 이러한 유형의 유연성을 제공하거나 해결해야 할 콤비네이터릭 도전을 해결하기 위해 충분한 시간과 주의를 기울이지 않거나 제공하고 싶어하지 않는다.

중요 사항: 핵심 시스템 가치가 아닌 경우 컬러 조합의 다양성을 해결하지 마십시오. 대부분의 경우, 시스템 사용자는 자신만의 조합을 짝짓거나 고려할 수 있는 조합마다 특별히 지정된 도구에서 이점을 얻을 것이다. 그들의 선택을 전파하는 데 도움을 주십시오.

# 대비 및 접근성

접근성 있는 색 대비를 해결하는 것은 처음부터 어떤 디지털 색상 시스템을 설정하는 핵심 실천 방식이어야 한다. 그러나 디자인은 동요할 수 있고, 팀은 때로는 패할 수 있다. 또는 일부 구성원은 접근성에 대해 알지 못할 수도 있다. 또는 그들은 그것을 우선하지 않을 수도 있다.

시스템 팀은 접근성 가치를 넓게 확산시키기 위해 접근성 실천 방법을 워크플로에 내재시켜야 한다.

## #13. 안전한 대비 비율을 식별하기



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

AA 대비 준수는 표준이다. 그러나 원활한 경험을 위해 AAA 대비를 선택할 수 있다. 브랜드 요소 (예: 회색 버튼에 흰색 텍스트)를 포함한 모든 UI 요소에 대한 접근성 평가를 수행하십시오.

중요 사항: 목표 대비를 식별하고 팀이 접근성을 준수하도록 보장하십시오.

<img src="./img/Color-in-Design-Systems_12.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## #14. 접근성 실패 후 처리 절차 구현하기

접근성 실패 후 처리 절차를 문서화하고 팀의 핵심 워크플로에 통합하십시오. 이는 색상이 일단 페이지에 렌더링되면 텍스트가 읽히지 않거나 너무 희미하거나 흐릿할 때 알림을 받을 수 있는 시스템을 구축하는 것을 의미한다.

중요 사항: 접근성은 다소 추상적이며 초보자가 처리하기 어려울 수 있다. 팀이 이러한 요구 사항을 실제 업무 흐름에 통합하도록 보장하십시오.

<img src="./img/Color-in-Design-Systems_13.png" />

## #15. 확대 배율을 고려한 색상 평가

모든 시스템 색상을 200%의 확대 배율로 적절한 대비 비율이 있는지 확인하십시오. 이렇게 하면 팀이 더 높은 픽셀 밀도의 디스플레이를 사용하는 사용자를 포함하는 다양한 환경에서 제품의 접근성을 보다 잘 파악할 수 있다.

중요 사항: 확대 배율이 높아지면 접근성이 감소한다는 사실을 고려하여, 확대 배율을 고려한 색상 대비 평가를 포함한 테스트 계획을 개발하십시오.

<img src="./img/Color-in-Design-Systems_14.png" />

## #16. 컬러 블라인드 브라우저 지원

컬러 블라인드 사용자가 모든 사람이 보는 것과 같은 페이지를 볼 수 있도록 보장하십시오. 이는 대부분이 쉽게 깨닫지 못할 수 있다. 예를 들어 차트에 색상을 사용하는 경우 추가 설명을 제공할 수 있다.

중요 사항: 컬러 블라인드 사용자가 페이지를 정확하게 이해하고 조작할 수 있는지 확인하십시오. 페이지가 색상에 의존하는 경우 추가 설명을 제공하십시오.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 결론

색상은 디자인 시스템에서 사용자 경험의 핵심적인 요소이다. 올바르게 설계된 컬러 팔레트는 일관된 UI를 제공하고 사용자가 정보를 빠르게 이해할 수 있도록 돕는다. 디자인 시스템 팀은 브랜드 컬러를 안정화하고, 다양한 색조와 채도를 고려하며, 접근성을 고려하여 사용자에게 최상의 경험을 제공하기 위해 적절한 대비를 확인해야 한다. 이를 통해 디자인 시스템은 지속적이고 일관된 UI를 제공하여 제품의 성능을 향상시키는 역할을 할 수 있다.

- [Material Design: 색상 시스템](https://material.io/design/color/the-color-system.html)
- [Understanding Color](https://webaim.org/articles/contrast/)
- [색각 정보](https://www.colourblindawareness.org/)

---

웹 서비스를 위한 효과적인 디자인 시스템에서 컬러를 설계하는 방법에 대한 팁과 지침입니다

웹 서비스 디자인 시스템 컬러 설계하는 방법

# 셀레니움 크롬드라이버 버전 이슈 해결방법 (This version of ChromeDriver only supports Chrome version)

셀레니움을 사용하다보면 아래와 같은 에러를 자주 만나는데 해결방법에 대해 알아보자

```bash
session not created: This version of ChromeDriver only supports Chrome version 105
Current browser version is 107.0.5304.87 with binary path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
```




<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img width="855" alt="스크린샷 2022-11-01 오전 8 32 09" src="https://user-images.githubusercontent.com/46010705/199128854-e993413b-65af-4309-995c-4c6145b4ea31.png">

결론부터 말하자면 이 에러는 ChromeDriver에서 **지원하는 Chrome버전이 로컬에 설치되어있는 Chrome 버전과 차이가 생겨서 발생하는 것이다.**

**해결 방법은 로컬에 ChromeDriver를 버전에 맞게 재설치해주면 된다.**

아래 크롭드라이브 설치 링크로 방문해준다.

[https://chromedriver.chromium.org/downloads](https://chromedriver.chromium.org/downloads)

<img width="978" alt="스크린샷 2022-11-01 오전 8 34 23" src="https://user-images.githubusercontent.com/46010705/199128961-a6e923fe-9fbb-4d8b-89d2-67456a08b39b.png">

에러메세지에서 나와있는 버전의 크롬 드라이버를 선택해준다.

<img width="829" alt="image" src="https://user-images.githubusercontent.com/46010705/199129048-570e667c-ac7a-4f35-80c1-2e00a9f69ef3.png">

사용하는 환경에 맞는 파일을 다운로드해준다.
나는 M1 mac을 사용중이니 `chromedriver_mac_arm64.zip`을 다운로드 받아준다.

<img width="306" alt="image" src="https://user-images.githubusercontent.com/46010705/199129159-69e93ba3-0563-488f-bfe1-ee40f29bd2d3.png">

다운로드 받아서 열 때는 우클릭으로 열기를 눌러준다.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img width="259" alt="image" src="https://user-images.githubusercontent.com/46010705/199129197-81f23ba0-442c-4f66-960c-56bd0497a14f.png">

우클릭 후 열기를 눌러주면 위와 같이 나오는데 여기서 열기를 눌러준다.

<img width="562" alt="image" src="https://user-images.githubusercontent.com/46010705/199129391-941e55b4-83ed-4b07-a3e5-450434ab9738.png">

이렇게 설치가 성공적으로 됐다는 메세지가 나오면 성공이다.
이제 설치를 마친 크롬드라이버를 환경변수 폴더로 이동시켜주어야한다.


cd /usr/local/bin/


<img width="446" alt="image" src="https://user-images.githubusercontent.com/46010705/199129295-64de6753-bc2d-4c62-82ba-f365c862122a.png">


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

기존 크롬드라이버 제거


sudo rm chromedriver


크롬드라이버 이동


sudo mv chromedriver /usr/local/bin

This version of ChromeDriver only supports Chrome version 이슈 해결 방법에 대해 정리합니다

Mac에서 셀레니움 크롬드라이버 버전 이슈 해결방법 This version of ChromeDriver only supports Chrome version

# Nextjs에서 svg 사용하는 방법

create-react-app에서는 기본적으로 svg를 사용할 수 있도록 내장되어있지만
Nextjs에서는 따로 설정을 해주어야하는데요. 그 내용에 대해서 알아봅니다.

CRA에서는 아래와 같이 코드를 작성하면 svg파일을 불러올 수 있는데요.

```tsx
import {ReactComponent as Svg} from './button.svg';
{...중략}

const Component = () => {
	return <Svg />
}
```

아쉽게도 Nextjs에서는 따로 설정을 해주어야합니다.

## 설정방법



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

nextjs에서 svg를 사용하기 위해서는 `@svgr/webpack` 모듈을 설치해주어야합니다.

npm i -D @svgr/webpack
yarn add -D @svgr/webpack

설치를 마쳤다면 next.config.js 파일을 수정해주어야합니다.

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config) => {
    // 아래를 추가합니다.
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

module.exports = nextConfig;
```

위와 같이 설정을 마치면 아래처럼 Nextjs에서도 svg를 사용할 수 있습니다.

```tsx
import {ReactComponent as Svg} from './button.svg';
{...중략}

const Component = () => {
	return <Svg />
}
```

Nextjs에서 svg파일을 사용하는 방법에 대해서 정리합니다

Nextjs에서 svg파일을 사용하는 방법 2024년 8월 최신

# Nextjs Static HTML 사이트 배포하는 방법

웹사이트를 만들다보면 DB를 사용하지 않는 정적 웹 사이트를 만드는 경우가 있는데요.
Nextjs를 활용해 정적 웹사이트 배포하는 방법에 대해서 소개합니다.
정적 웹 사이트 배포는 Netlify를 통해서 진행합니다.

### scripts 변경

Nextjs 저장소의 package.json에 있는 build 명령어를 아래와 같이 바꿔줍니다.

```js
"scripts": {
  "build": "next build && next export"
}
```

### build

아래 명령어로 프로젝트를 빌드해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```bash
yarn build
```

### 정적 사이트 출력물

next export 명령어로 인해 `out/` 디렉토리가 생기고 하위에 아래와 같은 파일들이 생긴 것을 보실 수 있습니다.

<img width="447" alt="1" src="https://user-images.githubusercontent.com/46010705/203996982-3d261ae7-7a8e-4f65-b09e-0258197ff1a4.png">



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### Netlify 배포

이 out 폴더를 그대로 배포할건데요. 저는 [Netlify](https://www.netlify.com/)를 이용해서 정적 html 사이트를 배포할겁니다.

사이트를 방문해주시고 로그인 해주시면 아래와 같이 드래그앤드롭으로 폴더를 업로드 할 수 있는 영역이 보이는데요.

<img width="1194" alt="2" src="https://user-images.githubusercontent.com/46010705/203996990-a09ce2fc-35c6-4283-b6aa-3ab63da1710c.png">

업로드를 해줍니다.

<img width="1188" alt="3" src="https://user-images.githubusercontent.com/46010705/203997008-9247ab72-ab4a-48fd-a856-bd04be6b1296.png">

업로드를 완료하면 아래와 같이 static html 사이트가 배포되었는데요.
기본적으로 설정되어있는 사이트 url은 복잡하게 되어있으니 원하는 url로 변경해줍니다!

<img width="1220" alt="4" src="https://user-images.githubusercontent.com/46010705/203997016-001f68d4-68f5-4956-86a7-817f10587aa1.png">

<img width="1261" alt="5" src="https://user-images.githubusercontent.com/46010705/203997171-df283c4d-476f-4221-9d58-8a4269649f34.png">



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 사이트 접속

나와있는 url로 접속하면 내가 만든 정적 웹 사이트가 배포된 것을 보실 수 있습니다. Netlify외에도 다양한 정적 웹 사이트 배포 서비스가 많이 있는데요. 앞으로 다른 서비스도 사용해보도록 하겠습니다.

<img width="500" alt="6" src="https://user-images.githubusercontent.com/46010705/203997438-5566b47c-5bc7-46e1-a8b4-46feb558a925.png">

위 사이트는 블로그 포스팅 썸네일을 조금 쉽게 만들 수 있도록 만들고 있는 사이트인데요. 배포를 위해서 구색만 맞춰놨는데 앞으로 조금씩 기능을 추가해보도록 하겠습니다.

Nextjs Static HTML site를 Netlify에 deploy하는 방법에 대해서 소개합니다

Nextjs Static HTML 사이트 netlify에 배포하는 방법

# Nextjs build 에러 해결 방법 (Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children)

```bash
yarn  build
```

위 명령어로 빌드를 했을 때 아래와 같이 빌드 에러가 발생하는 경우가 있는데요.

![](/assets/img/2022-11-25-Nextjs-build-에러-해결-방법-1.png)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children 이 에러는 dangerouslySetInnerHTML을 사용하는 요소는 한개의 children만 가져야된다는 에러입니다.

저는 아래와 같이 작성했었는데 이렇게 작성할 경우 `{}` 를 다른 자식으로 인식하기 때문에 발생했던 에러였습니다.

```tsx
<span dangerouslySetInnerHTML={{ __html: titleText }}>{}</span>
```

## 해결방법



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

아래와 같이 `{}`를 제거하고 다시 빌드를 하게 되면 에러가 해결됩니다.
`{}`외에도 ` `같은 공백으로도 빌들에러가 발생하게 되니 참고하시기 바랍니다.

```tsx
<span dangerouslySetInnerHTML={{ __html: titleText }}></span>
```

Only set one of children or propsdangerouslySetInnerHTML reactno-danger-with-children 에러 해결 방법에 대해서 정리합니다

Nextjs build 에러 해결 방법 Only set one of children or propsdangerouslySetInnerHTML reactno-danger-with-children

# React Hook useEffect has missing dependencies 해결 방법

React 사용시 무조건 만나게 되는 Warning인 react-hooks/exhaustive-deps warning 해결 방법에 대해서 정리합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

![](/assets/img/2022-11-25-React-Hook-useEffect-has-missing-dependencies-해결-방법-1.png)

react-hooks/exhaustive-deps는 React 훅을 사용할 때 그 중에서도 useEffect를 사용할 때 주로 발생하는데요.

보통 이런 식으로 경고 메세지를 띄워줍니다.

```bash
React Hook useEffect has missing dependencies: '' and ''. Either include them or remove the dependency array.
```

## 해결 방법

react-hooks/exhaustive-deps 해결 방법은 useEffect에서 사용되는 state를 useEffect의 배열 []에 넣어주면 됩니다.

예를 들어 아래와 같이 작업이 되어있을 때는 경고메세지가 뜨는데요.

```tsx
useEffect(() => {
  getThumbnailBg(backgroundKeyword);
}, []);
```

useEffect에서 사용중인 State인 `backgroundKeyword` 를 `[]`에 넣어주게 되면 경고를 발생시키지 않는 것을 확인할 수 있습니다.

```tsx
useEffect(() => {
  getThumbnailBg(backgroundKeyword);
}, [backgroundKeyword]);
```

정리해보면, useEffect를 사용할 때는 useEffect내에서 사용되는 State를 []에 넣어주면 됩니다. 이런 경고가 발생하는 이유는 useEffect내부에서 사용되는 State의 변경이 감지되었을 때를 대비하기 위함이라고 생각하시면 될 것 같습니다.

react-hooksexhaustive-deps Warning 해결 방법에 대해서 정리합니다

Posts