블로그에 할로윈 테마 적용하기 — 물결 위에 호박 띄우기

할로윈이 다가오니까 블로그도 한번 꾸며보고 싶어졌다. 시즌마다 화면이 바뀌는 앱들처럼 수미상관도 할로윈 분위기를 내보고 싶었다.

그래서 클로드한테 할로윈 동안만 사이트를 꾸며보자고 했다.

물결 위에 호박 떠내려 보내기

클로드가 처음 가져온 안은 꽤 얌전했다. 물결 색을 주황과 보라로 바꾸고, 물결 위로 검은 고양이 한 마리가 천천히 걸어가는 정도였다.

나쁘진 않았는데 좀 심심했다. 사이트 맨 위 히어로 영역에는 원래 로고 뒤로 물결이 흐르고 있으니까, 그 위로 호박이 둥둥 떠내려가면 재미있겠다 싶었다. 대신 좀비는 빼달라고 했다. 할로윈이어도 좀비는 내 취향이 아니라서.

그렇게 물결 위에 호박이 셋 올라탔다. 물결이 흘러가는 쪽으로 같이 흘러가고, 물결이 기울면 호박도 같이 기운다. 물결마다 흐르는 방향이 달라서 호박끼리 서로 엇갈려 지나가기도 한다. 마우스를 가까이 가져가면 호박 얼굴에 노란 불이 켜지고, 가끔은 박쥐도 한 마리씩 날아간다.

그런데 막상 받아 보니 고양이가 없었다. 처음 안에 있던 고양이가 호박을 넣는 사이에 슬쩍 빠져 있었던 거다.

할로윈은 잘 모르지만, 고양이를 한번 봐버린 이상 고양이를 빼는 건 참을 수 없었다. 고양이는 어디 갔냐고 물었더니, 걸어 다니는 대신 셋 중 제일 큰 호박 위에 올라타서 돌아왔다. 꼬리를 살랑거리면서 가끔 눈도 깜빡인다. 이건 좀 웃겼다.

큰 호박은 물에 반쯤 잠기게 하기

호박은 다 귀여웠는데, 보다 보니 아쉬운 게 두 가지 있었다.

첫 번째는 크기였다. 다 고만고만해서, 가끔 엄청 큰 호박이 한 번씩 떠내려가면 재미있을 것 같았다. 두 번째는 호박들이 하나같이 물결선 위에 너무 얌전히 앉아 있다는 거였다. 물에 떠 있는 거면 아래쪽은 좀 잠겨 있어야 자연스러울 텐데.

먼저 왕호박을 넣었다. 페이지에 들어오고 조금 있으면 하나가 화면을 가로질러 지나가고, 그 뒤로는 한참에 한 번씩 새로 들어온다. 계속 떠 있으면 금방 질릴 것 같아서, 한 번 지나가고 나면 한동안은 안 나온다.

잠기는 모습은 클로드가 처음에 반투명하게 만들어 왔다. 물결선 아래쪽이 물에 비치듯 옅어지는 식이었는데, 내가 생각한 건 그게 아니었다. 비쳐 보이는 것보다 아예 잘려서 안 보이는 쪽이 물에 잠긴 느낌이 날 것 같았다.

지금은 호박을 물결선 위쪽까지만 그린다. 물결이 출렁이면 호박이 잘리는 선도 같이 출렁여서, 진짜 물에 떠 있는 것처럼 보인다. 작은 호박은 거의 다 떠 있고, 왕호박은 절반쯤 물 아래에 있다.

하는 김에 마녀 모자를 쓴 호박도 가끔 지나가게 해달라고 했다. 왕호박이랑 한꺼번에 나오면 정신없으니까, 클로드가 처음 나오는 때를 조금 늦춰뒀다.

할로윈 켜고 끄는 버튼 달기

꾸미는 건 재미있었지만, 누군가는 이런 게 불편할 수도 있겠다는 생각이 들었다. 그래서 테마 바꾸는 버튼 옆에 할로윈 테마를 끄고 켤 수 있는 버튼도 달았다.

버튼은 호박 모양이다. 켜져 있을 때는 눈과 입에 노란 불이 들어온 주황 호박이고, 누르면 얼굴 없는 그냥 호박이 된다.

이 작은 아이콘 하나가 생각보다 오래 걸렸다. 처음엔 글자 같았고, 다음엔 눈이 너무 커서 외계인 같았다. 결국 세모 눈에 톱니 입, 누구나 아는 할로윈 호박으로 다시 그려달라고 했다.

꺼진 모습은 얼굴만 뺐더니 사과처럼 보여서 세로로 골을 두 줄 넣었다. 켜진 모습은 몸통까지 주황으로 칠하고 나서야 불 켜진 호박 느낌이 났다.

라이트 모드와 다크 모드를 기억해두는 것처럼, 할로윈 테마를 켜고 끈 상태도 기억해둬서 다시 들어와도 그대로 유지되도록 했다. 다만 올해 꺼뒀다고 내년 할로윈까지 꺼져 있으면 아쉬울 것 같아서, 꺼둔 건 그해에만 기억하도록 해달라고 덧붙였다.

기간을 정해두고 저절로 켜고 끄기

할로윈 테마는 10월 30일부터 11월 1일까지, 할로윈을 끼고 사흘만 켜지게 했다. 올해는 마침 금, 토, 일이다. 11월 2일이 되면 내가 따로 손대지 않아도 알아서 사라진다.

나라마다 시차가 있으니, 할로윈도 보는 사람이 있는 곳의 시간에 맞춰 나타났다가 사라지면 좋겠다 싶었다. 그래서 날짜는 서버가 아니라 들어온 사람의 브라우저 날짜로 계산해달라고 했다. 기간이 아닐 때는 호박 버튼도 보이지 않는다.

버튼에 유령, 진도 막대에 사탕 달기

처음 해보는 거라 히어로 영역만 시험 삼아 꾸며봤다. 해보니 생각보다 재미있었는데, 막상 히어로 영역 아래로 내려가면 평소와 똑같은 화면이라 좀 심심했다.

그래서 버튼이나 진도 막대에 쓰는 포인트 색도 주황으로 바꿨다. 색만 바꾸기엔 좀 아쉬워서 버튼 근처에 사탕이나 유령 같은 걸 넣어보자고 했더니, 클로드가 유령은 버튼 모서리에, 사탕은 진도 막대 끝에 달아보자고 했다.

이제 주황 버튼에 마우스를 올리면 오른쪽 위 모서리에서 작은 유령이 쏙 올라와 둥실거린다. 진도 막대 끝에는 막대사탕이 천천히 돌면서 달려 있다. 진도가 늘수록 사탕 막대도 점점 길어지는데, 이것도 소소한 재미가 될 것 같았다.

웹 접근성 챙기기

이번에 처음 알게 된 게 하나 있다. 휴대폰이나 컴퓨터 설정에는 「동작 줄이기」 같은 옵션이 있다. 화면이 움직이면 어지럽거나 불편한 사람들이 켜두는 설정인데, 웹사이트도 이 설정이 켜져 있는지 알 수 있어서 켜져 있으면 움직임을 줄여주는 게 좋다고 한다.

호박이 떠다니고 박쥐가 날아다니는 화면이 누군가한테는 꽤 피곤할 수도 있겠다 싶었다. 그래서 동작 줄이기를 켜둔 사람한테는 꾸미기는 그대로 보여주고 움직임만 뺐다.

• 호박은 물결 위에 가만히 떠 있다.
• 박쥐는 날아다니지 않는다.
• 유령은 튀어 오르지 않고 그 자리에 나타나기만 한다.
• 사탕은 돌지 않는다.

내년 할로윈 기다리기

며칠만 켜지는 꾸미기인데도 만드는 내내 재미있었다. 띄워놓고 보면 왕호박이 언제 지나가나 괜히 기다리게 된다. 박쥐랑 마녀 모자 쓴 호박도 잘 어울리게 들어갔고, 호박 위 고양이가 가끔 눈 깜빡이는 것도 참 귀엽다.

다만 이번엔 히어로 영역을 제외하면 색이랑 유령, 사탕 정도라 조금 아쉽다. 내년 할로윈에는 본문 곳곳에도 재미있는 요소들을 더 채워봐야겠다.