[feat] 코드펜 플러그인 추가, [docs] 문서 추가

.changeset/modern-berries-deny.md

@@ -0,0 +1,5 @@
+---
+"gatsby-blog": minor
+---
+
+codepen 플러그인, 문서 구조 변경 및 추가

content/CSS/[2022-05-22]animation-timeline으로 css만으로 스크롤 애니메이션 만들기/index.md

@@ -0,0 +1,99 @@
+---
+title: "animation-timeline으로 css만으로 스크롤 애니메이션 만들기"
+date: "2022-05-22"
+description: "animation-timeline으로 css만으로 스크롤 애니메이션 만들기"
+tag: ["CSS"]
+category: "CSS"
+thumbnail: ./1.png
+---
+
+## 개요
+
+예전에 동아리에서 CSS 애니메이션이 가득한 사이트를 클론 코딩하는 과제를 받았던 적이 있다.
+
+당시에 스크롤을 내리면서 나타나는 애니메이션을 보며 이것도 JS 없이 CSS로 할 수 있는 건가?(아무래도... js없이 css로 애니메이션을 만드는게 성능에 더 좋으니깐.) 궁금했었는데, 스택오버플로우에서 찾아보니 단호하게 방법이 없다는 글만 나왔던 기억이 있다.
+
+그러다 [**`animation-timeline`**](https://developer.mozilla.org/en-US/docs/Web/API/AnimationTimeline)이라는 Web Animations API를 알게 됐다.
+어쩐지 한글 문서는 잘 안 나오더라니 크롬 experimental 기술이었다.
+chrome experiments는 크롬에서 최신 웹 기술을 선보이는 것이라고 한다.
+
+사용하려면 `chrome://flags에 접속해서 experimental web platform features`를 enabled로 바꿔줘야 한다.
+
+![1.png](./1.png)
+
+여기서 하나 알고 가야할 [**`@supports`**](https://developer.mozilla.org/ko/docs/Web/CSS/@supports) 라는 at-rule이 있는데, 사용 시 브라우저가 지원이 될 때 스타일을 적용시킨다.
+
+scroll-timeline에 대한 자세한 설명은 [**여기서**](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/) 볼 수 있다.
+
+먼저 `time-range`를 알아보면, time range는 *시간을 의미하는 게 아니라, 스크롤 바 진행정도와 애니메이션 진행정도에 맵핑되는 숫자*라고 한다.
+
+> TIP: Always set time-range to the exact same time as the animation-duration, unless you have a very good reason not to.
+
+팁에 따라 애니메이션 duration time과 time-range를 일치시키도록 하자.
+
+`linear vs ease-in`에 대한 설명도 나와 있다.
+
+> TIP: Always set animation-timing-function to linear when working with @scroll-timeline.
+
+문서에서는 linear을 쓰는 걸 권장하는데, 이유는 애니메이션 진행정도와 스크롤 진행정도는 맵핑되는데 스크롤에 따라 갑자기 빨라지는 애니메이션은 이상하게 느껴지기 때문이다.
+
+## 실습
+
+그럼 스크롤에 따라 다른 속도 애니메이션을 만들어보자.
+
+```html
+<section id="first">
+  <div><h1 class="first-header">This is Header</h1></div>
+  <div><h1 class="second-header">This is Header</h1></div>
+</section>
+```
+
+```css
+@supports (animation-timeline: works) {
+  .first-header {
+    animation: 3s linear forwards move-text-down;
+    animation-timeline: move-timeline-first;
+  }
+
+  @scroll-timeline move-timeline-first {
+    time-range: 1s;
+  }
+
+  @keyframes move-text-down {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(200%);
+    }
+  }
+
+  .second-header {
+    animation: 1s linear forwards move-text-up;
+    animation-timeline: move-timeline-second;
+  }
+  @scroll-timeline move-timeline-second {
+    time-range: 1s;
+  }
+  @keyframes move-text-up {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+}
+```
+
+https://codepen.io/suu3/pen/azoZLEe
+
+지원되는 브라우저에서만 확인해 볼 수 있다.
+
+translateY 값을 다르게 줘서 속도에 차이를 줬다. 두 h1이 같은 크기지만 first-header가 먼저 border를 침범하게 된다.
+
+## Reference
+
+1. [https://www.youtube.com/watch?v=EkEyA4RtfNE](https://www.youtube.com/watch?v=EkEyA4RtfNE)
+2. [https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/)
+3. [https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/)

content/기타/[2022-04-24]유니티 WebGL 방식으로 gh-pages 배포하기/index.md

@@ -0,0 +1,49 @@
+---
+title: "유니티 WebGL 방식으로 gh-pages 배포하기"
+date: "2022-04-24"
+description: "유니티 WebGL 방식으로 gh-pages 배포하기"
+tag: ["유니티"]
+category: "기타"
+thumbnail: ./1.png
+---
+
+![배포된 이미지]("./1.png")
+
+최근에 유니티도 WebGL로 웹 배포가 가능하다는 걸 알게 됐다 (그것도 gh-page로!)
+
+그래서 일 년 전에 만든 유니티 프로젝트로 배포해보기로 했다.
+
+이 프로젝트는.. 개발을 접한 초기에 게임 개발자를 진로로 잡고 책 보면서 만들었던 것이다. (지금은 웹 개발 쪽으로 갔지만...)
+
+사실 이때 aseprite라는 픽셀 아트 프로그램에 빠져있었어서 픽셀 아트를 그리고 싶어서 만들게 된 게 더 컸다. (개발은 이용당함.) 실제로 코드 작성 부분은 몇 시간 안 걸렸고 도트 그리는 게 힘들었던 기억이 있다. ㅎ.
+
+## 배포 방법
+
+1. **WebGL 설치**
+
+   - File - Build Setting - Platform에서 WebGL을 찾는다. 설치하지 않았으면 install with Unity Hub 버튼이 보일 것이다.
+
+2. **Switch Platform**
+
+3. **Build**
+   - 체크 없이 바로 빌드
+
+빌드 된 파일을 깃헙에 올려 gh-page 설정을 하면 된다.
+
+## 겪은 문제
+
+1. **.exe did not run properly!**
+
+내 경우 경로명에 한글이 들어간 게 문제였다.
+
+컴퓨터 관리자 폴더명이 한글로 되어 있어서 종종 문제가 생기는데 쓴 지 오래된 컴퓨터라 수정하기 곤란해서 다른 컴퓨터로 옮겨서 해결했다. ㅠㅠ 언제 한 번 싹 바꿔야지 하는 생각.
+
+2. **Unable to parse Build/[File Name].framework.js.br**
+
+gh-page 배포하고 들어갔더니 이런 내용의 콘솔 에러 창이 떴다.
+
+[**여기**](https://forum.unity.com/threads/solved-webgl-build-error-unable-to-parse-build-file-name-framework-js-br.1102759/) 나온 것처럼 나도 Player의 Compression Format을 disabled로 바꿔서 해결했다.
+
+댓글에 3D 프로젝트로 생성하면 이런 오류가 안 생긴다는 말도 있는데, 나도 2D로 생성했긴 함.
+
+[**웹으로 띄운 결과물 🥳🎉**](https://suu3.github.io/EliminateGhost/WebGL/)

gatsby-config.ts

@@ -59,6 +59,13 @@ module.exports = {
           "gatsby-remark-copy-relative-linked-files",
           "gatsby-remark-autolink-headers",
           "gatsby-remark-prismjs", // should be placed after `gatsby-remark-autolink-headers`
+          {
+            resolve: "gatsby-remark-codepen",
+            options: {
+              theme: "dark",
+              height: 400,
+            },
+          },
         ],
       },
     },

package.json

@@ -20,6 +20,7 @@
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-svgr": "3.0.0-beta.0",
     "gatsby-remark-autolink-headers": "^6.12.0",
+    "gatsby-remark-codepen": "^0.1.1",
     "gatsby-remark-copy-relative-linked-files": "^1.5.0",
     "gatsby-remark-images": "^7.11.0",
     "gatsby-remark-prismjs": "^7.11.0",