# 애니메이션 GIF: 멈춰 주세요!

**URL:** https://meta.discourse.org/t/animated-gifs-make-it-stop/187607
**Category:** Feature
**Created:** [4월 21, 2021, 11:30오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607 "2021-04-21T11:30:24Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [4월 21, 2021, 11:30오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/1 "2021-04-21T11:30:24Z")

</div>

사람들이 애니메이션 GIF를 올리면 그게 계속, 계속, 계속, 계속, 계속 재생되고…

트위터는 애니메이션을 멈추게 할 방법을 제공해 줍니다. 슬랙은 이미지를 접어서 더 이상 보이지 않게 해 줍니다. 제발, 제발 디스커스도 비슷한 기능을 제공해 주세요. 🙏

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [4월 21, 2021, 11:53오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/2 "2021-04-21T11:53:20Z")

</div>

[Stylus](https://github.com/openstyles/stylus)를 사용하여 모든 애니메이션 GIF의 스타일(`display: none` 또는 `visibility: hidden`)을 변경할 수 있습니다:

> `div.topic-body div.lightbox-wrapper > a.lightbox > img[src$='.gif']`

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4월 21, 2021, 8:12오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/4 "2021-04-21T20:12:39Z")

</div>

물론 전적으로 동의합니다! 브라우저는 _예전에는_ 이 기능을 네이티브로 지원했었죠. 여기에서 더 자세히 읽어보실 수 있습니다:

> **[Boing Boing | Substack](https://premium.boingboing.net/)**
>
> A Directory of Mostly Wonderful Things. Click to read Boing Boing, a Substack publication with tens of thousands of subscribers.

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [4월 21, 2021, 11:32오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/6 "2021-04-21T23:32:54Z")

</div>

크롬을 사용 중이라면 이 확장 프로그램을 추천합니다:

> **[Animation Policy - Chrome Web Store](https://chromewebstore.google.com/detail/animation-policy/ncigbofjfbodhkaffojakplpmnleeoee)**
>
> Run animations only once, or disable animation completely.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4월 22, 2021, 12:04오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/7 "2021-04-22T00:04:58Z")

</div>

작은 업데이트 하나.

이 주제에 정말 많은 YES가 있네요. 사실 오늘早些에 누군가가 GIF를 올렸을 때 저도 정확히 같은 느낌을 받았어요.

@pmusaraj 님이 이 기능을 작업 중이며, 준비가 되면 업데이트해 주실 거예요.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4월 22, 2021, 6:13오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/9 "2021-04-22T18:13:22Z")

</div>

브라우저들이 GIF에서 모든 페이지 애니메이션을 멈추기 위한 esc 키 지원을 제거한 건 정말 아쉽습니다. 많은 분들이 잊고 있지만, 이건 \_정말 존재했던 기능\_이었거든요.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [4월 22, 2021, 7:18오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/10 "2021-04-22T19:18:14Z")

</div>

훌륭한 기능 요청을 해 주셔서 감사합니다, @ganncamp. 이제 구현이 완료되었습니다([커밋](https://github.com/discourse/discourse/commit/c11d75da8783f3ded3338b13238646b49cfdcc64)) 그리고 메타에 배포되었습니다. 이미지를 클릭하면 애니메이션이 일시 정지되었다가 다시 재생됩니다. 브라우저 보안 제한으로 인해 일시 정지 시에는 이미지의 첫 번째 프레임만 표시되며, 클릭한 순간의 프레임을 표시할 수 없습니다.

직접 체험해 볼 수 있는 GIF를 하나 첨부합니다:

![giphy-4](https://global.discourse-cdn.com/meta/original/3X/3/8/382019d338c9acab96064c6e916fea0ef06ab5ce.gif)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4월 23, 2021, 1:01오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/11 "2021-04-23T01:01:07Z")

</div>

잘 되어 보입니다. 몇 가지 작은 제안이 있습니다:

1. 무슨 일이 있었는지 사용자들이 알 수 있도록 작은 “일시정지” 오버레이를 추가하는 건 어떨까요? (우측 하단에 반투명한 `II` 표시?)

2. (확신은 없지만) 이 기능이 GIF가 완전히 로드된 후에만 작동하는 것 같습니다. 일부 애니메이션 GIF는 로드에 시간이 걸릴 수 있습니다. GIF가 완전히 로드되지 않은 상태에서도 일시정지가 되는지 확인하기 위해 로컬에서 스로틀링(throttling)을 사용해서 테스트해 볼 수 있을까요?

---

<div class="post-metadata">

### Author: ![geoff777](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/geoff777/32/202388_2.png) [@geoff777](https://meta.discourse.org/u/geoff777)
#### Post date: [4월 26, 2021, 4:08오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/12 "2021-04-26T16:08:20Z")

</div>

메타(Meta)에서 이상한 동작을 발견했어요.  
여기에 지피에프(GIF)를 올렸는데 [https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777](https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777)

멈추지 않았어요. 두 가지 브라우저를 시도해 봤습니다.  
며칠 전에 이 스레드를 읽은 기억이 나서 여기에 왔습니다.  
‘STOP IT’ 지피에프를 클릭하니 멈췄어요.  
다시 제 게시물로 돌아왔더니 이번에는 멈춥니다.

그러니까 …  
테스트 테스트 테스트 …

![Thats So Raven Hello GIF by Cameo](https://global.discourse-cdn.com/meta/original/3X/1/a/1a03d2bf7f9962025eaad451d6e509439f816a95.webp)

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [4월 26, 2021, 4:11오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/13 "2021-04-26T16:11:40Z")

</div>

GIF를 마우스로 호버했을 때 “현재 GIF 중지” 버튼 옆에 설정을 표시할 수 있는 기능이 있으면 좋겠습니다:

- GIF 자동 재생 켜기/끄기 (세션에 저장)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [4월 26, 2021, 4:14오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/14 "2021-04-26T16:14:00Z")

</div>

조지프, 고맙습니다. 업로드가 작동하지 않는 기술적 이유는 현재 이 기능이 데이터베이스(DB)에 저장된 업로드에 대해서만 작동하기 때문입니다. 위에서 언급하신 업로드는 giphy URL이며, 로컬 업로드 기록이 없습니다. 특정 URL의 자산이 애니메이션 이미지인지 일반 정적 이미지인지 확실하게 알 수 없기 때문에, 다른 URL의 애니메이션 이미지로 이 기능을 쉽게 확장할 수 없습니다.

예를 들어 giphy URL의 경우 educated guess(추정)을 할 수는 있지만, 업로드가 로컬에서 처리되지 않는 한 확실하게 알 수 없습니다.

업데이트: 아, 그리고 위에 게시하신 글의 giphy 업로드가 이제 로컬로 다운로드되었고, 일시정지가 정상적으로 작동합니다.

---

<div class="post-metadata">

### Author: ![geoff777](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/geoff777/32/202388_2.png) [@geoff777](https://meta.discourse.org/u/geoff777)
#### Post date: [4월 26, 2021, 4:18오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/15 "2021-04-26T16:18:24Z")

</div>

위에 올린 GIF가 지금은 일시정지가 안 돼요.

그다음 새로고침을 했더니 되네요.

아마 이 일시정지 안 되는 문제는 GIF를 올린 사람에게만 해당되고, 새로고침하면 해결되는 것 같아요.

수정 - 아, @pmusaraj 님의 위 글을 이제 읽었네요.

네, 말이 되네요. 로컬에 있을 때만 일시정지가 되는 거군요.  
그러니까 짧은 시간 동안 일시정지 기능이 작동하지 않는 거네요. 알아서 다행이에요. 감사합니다.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [4월 26, 2021, 7:46오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/16 "2021-04-26T19:46:51Z")

</div>

> [@sam](#):
>
> (확신은 없지만) GIF가 완전히 로드된 후에만 작동한다고 생각합니다. 일부 애니메이션 GIF는 로드에 시간이 좀 걸릴 수 있습니다.

일시정지 동작은 작동하지만, GIF가 완전히 로드될 때까지 캔버스가 첫 번째 프레임을 읽거나 그릴 수 없습니다. 이 문제를 제대로 수정할 수 없다고 생각하여 `canvas` 요소에 은은한 배경색을 추가했습니다. 다음과 같이 표시됩니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/e/7e5ef6a0a1b0a8d958d182d4b63e4ee38b856bc0.png)

또한 재생/일시정지 아이콘과 몇 가지 다른 개선 사항도 추가했습니다.

> <https://github.com/discourse/discourse/pull/12839>
>
> \- Adds pause/play icons in bottom/right corner
> \- Pauses animated images automat…ically on blur
> \- Resumes animated images when window focus returns
> \- Pauses on load when OS has \`prefers-reduced-motion\` enabled
> \- Adds subtle background color to \`canvas\` element, so that in slow connections where the full GIF loads slowly, pausing the animation will show something in stead of blank space
> 
> The icons are shown as follows: 
> 
> Pause icon is shown for non-touch devices on hover.
> Play icon is shown on all devices when animation is paused.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 3, 2021, 3:00오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/17 "2021-05-03T15:00:39Z")

</div>

이 주제는 6일 후 자동으로 닫혔습니다. 더 이상 새로운 답변을 게시할 수 없습니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 19, 2021, 11:12오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/18 "2021-05-19T23:12:45Z")

</div>

여기서 볼 수 있듯이, 라이트박싱(Lightboxing)이 문제를 일으키고 있습니다. 아래 애니메이션 GIF를 클릭/탭하여 동작을 비교해 보세요:

![ed1bdf66998acb6fa9d93c4d8b318dbb07c15203](https://global.discourse-cdn.com/meta/original/3X/e/d/ed1bdf66998acb6fa9d93c4d8b318dbb07c15203.gif)

![igor-bastidas-2](https://global.discourse-cdn.com/meta/original/3X/6/2/62ddc37a5edbefc3abb90c7c71122a83915157aa.gif)

두 번째 GIF에서는 어느 정도 작동하는 것 같지만, 라이트박스 확장 및 수축 과정에서 일시정지/재생을 위한 클릭 중 하나가 흡수된다는 단점이 있습니다.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 19, 2021, 11:23오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/19 "2021-05-19T23:23:13Z")

</div>

음 @pmusaraj 이 이슈를 다시 열려고 해요. 애니메이션 GIF가 라이트박스로 열렸을 때 처리 방식을 좀 더 개선해야 할 것 같아요. 지금은 꽤 불편하거든요.

어떤 방식으로 처리하는 게 적절할지 잘 모르겠어요? 애니메이션 GIF는 라이트박스를 안 띄우는 게 좋을까요? 아니면 이런 경우 "일시정지"와 "전체 크기"를 위한 클릭 영역을 따로 두는 게 좋을까요?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 19, 2021, 11:26오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/20 "2021-05-19T23:26:38Z")

</div>



---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [5월 19, 2021, 11:29오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/22 "2021-05-19T23:29:14Z")

</div>

> [@sam](#):
>
> 라이트박스 애니메이션 GIF가 아니에요?

이건 어때요? 애니메이션 GIF를 라이트박스로 보는 것에서 얻을 수 있는 이점이 있는지 잘 모르겠네요…

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 19, 2021, 11:30오후 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/23 "2021-05-19T23:30:57Z")

</div>

기술적으로는 과시할 거대한 애니메이션을 사용할 수도 있겠네요.

일단 라이트박스를 비활성화해 두고 누가 불만을 제기하는지 지켜보는 건 어떨까요? 애니메이션 GIF의 경우 보통 좋지 않은 결과를 초래하고 쓸모가 없다는 데 전적으로 동의합니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 20, 2021, 12:19오전 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/24 "2021-05-20T00:19:13Z")

</div>

네, 애니메이션 GIF에서 라이트박스를 비활성화하는 것이 쉽다면 그렇게 합시다. 백포트도 해야 할 것 같네요!

[다음 페이지](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607.md?page=2)
