우리 어머니는 논리(Logic)를 사랑하셨습니다. 아무것도 이치에 맞지 않던 시대에 태어나셨기 때문입니다. 어머니는 제2차 세계 대전이 끝난 해인 1945년에 태어나셨고, 저희 가족이 유대인(Jewish)이었기에 말 그대로 죽을 고비를 넘기셨습니다. 하지만 삶의 첫날부터 어머니는 기근, 인종차별, 그리고 불운이 끊임없이 자신을 앗아가려 한다는 것을 깨달으셨습니다. 2011년, 암은 어머니를 영원히 제 곁에서 데려갔습니다. 하지만 조금 가벼운 이야기를 하자면, 이번 어머니의 날에 저는 제가 아는 유일한 방법인 UI 광기 어린 과학 (UI mad science)을 통해 어머니를 다시 살려내려 합니다!

어머니가 어떻게 이 2026년 어머니의 날 스콜리텔링 (Scrollytelling) 실험에 영감을 주었는지, 그리고 어머니가 어떻게 저의 개발 (Dev)과 삶에 대한 접근 방식에 영감을 주었는지 설명하겠습니다. 그 과정에서 이 가상 어머니의 날 선물에 사용된 몇 가지 기술에 대해서도 논의할 것입니다. 저는 보통 영감을 주는 글이나 기술적인 포스트 중 하나를 쓰지만, 이번 어머니의 날에는 두 가지를 모두 얻어 가실 수 있습니다.

인터랙티브 어머니의 날 카드 체험하기

여기 CodePen이 있습니다. 이 프로젝트는 스크롤 스냅 이벤트 (scroll-snap events)와 스크롤 상태 쿼리 (scroll-state queries)를 사용하므로, 현재로서는 Chromium 기반 브라우저에서만 작동합니다.

CodePen Embed Fallback

또는, 제 여덟 살 아들의 해설이 담긴 비디오 데모가 여기 있습니다. 아이가 태어나기 전에 할머니가 돌아가셨기 때문에, 이것이 아이가 할머니와 상호작용할 수 있는 가장 가까운 방법이라는 사실을 깨닫는 것은 시원섭섭한 일이었습니다.

이것을 만든 이유

어머니는 카자흐스탄의 한 병원에서 태어나셨는데, 그곳은 민간인 환자들이 외상 후 스트레스 장애 (PTSD)를 앓는 퇴원 군인들과 병실을 공유하던 곳이었습니다. 군인들이 산부인과 병실을 들락날락하며 환자들을 겁주었고, 그로 인해 제 할머니의 분만 과정은 더욱 힘들어졌습니다.

어머니가 태어났을 때, 그녀는 숨을 쉬지 못하고 있었습니다. 의료진은 그녀를 차가운 물에 담갔다가, 다시 뜨거운 물에, 그리고 다시 차가운 물에 담갔습니다 — 당시에는 과학적 근거가 없는 소위 요법에 기반한 처치였습니다. 이것은 그녀의 삶에서 나타난 더 큰 패턴의 시작이었습니다. 그녀는 도움을 받아서가 아니라, 도움으로 위장된 혼돈 속에서도 살아남아 왔습니다.

그래서 성인이 된 어머니는 헤아릴 수 없는 것들 속에서 패턴과 의미를 찾아냄으로써 살아남는 법을 배웠습니다. 어머니는 자신의 세 가지 열정을 결합하여 이를 성취했습니다.

• 사진 (Photography) 분야에서, 그녀는 주변의 혼돈이 일시적으로 아름다움으로 조화를 이루는 순간들을 프레임에 담았습니다.
• 교육 (Teaching) 분야에서, 그녀는 그 이미지들을 사용하여 혼돈을 사람들이 따라갈 수 있는 논리적인 단계로 나누어 이야기를 전달하는 데 활용했습니다.
• 컴퓨터 프로그래밍 (Computer programming) 분야에서, 그녀는 그 삽화로 그려진 교육적인 순간들을 인터랙티브한 경험 (Interactive experiences) 속에 캡슐화했습니다. 실제 삶과 달리, 프로그래밍된 상호작용이 잘못되면 왜 그런지 추적하여 문제를 해결할 수 있습니다.

다시 말해, 어머니는 웹 (Web)이 존재하기도 전에, 제가 지금은 웹 개발 (Web development)이라고 생각하는 기술 세트를 사용하여 저를 교육하셨습니다.

어머니를 알아가는 경험의 게임화 (Gamifying)

저는 Roland Franke의 스크롤 스냅 이벤트 (Scroll-snap events)를 사용한 해체된 방사형 슬라이스 전환 (Deconstructed radial slice transition)에서 영감을 얻었습니다. Roland의 Pen은 전경에 앉아 있는 인물이 지켜보는 동안 풍경 사이의 눈길을 사로잡는 스크롤 트리거 (Scroll-triggered) 전환을 보여줍니다. 이는 어머니가 세상을 관찰하며 보여주었던 인내심을 떠올리게 했습니다. 하지만 어머니는 그 모든 것을 어린 시절의 제가 소화할 수 있는 짧고 인터랙티브한 이야기로 캡슐화하곤 하셨습니다.

저는 어머니의 날 게임에서 CSS 도형으로 스타일링된, 낮에서 밤으로 변하는 스크롤 트리거

저의 어머니는 비디오 게임이 반드시 무언가를 폭파하는 것에 관한 것이어야 할 필요는 없다고 가르쳐 주셨습니다. 어머니는 Pokémon Snap이 존재하기 훨씬 전부터 QuickBASIC을 사용하여 사진 촬영 게임을 만드셨습니다. 90년대에 한 상점 앞을 지나갈 때 창문 안에서

어머니는 한 번은 소련(Soviet Union)에서의 어린 시절 사진 촬영에 관한 이야기를 해주신 적이 있습니다. 어머니는 단지 멋져 보인다는 이유로 정부 건물을 사진으로 찍었던 것을 기억하셨는데, 한 군인이 어머니를 발견하고 카메라에서 필름 롤을 압수했다고 합니다. 어쩌면 그 교훈은 무언가의 실체를 드러내는 것이, 단어의 군사적인 의미에서 무언가를 쏘는 것만큼이나 위협적일 수 있다는 점이었을지도 모릅니다.

게임에서 흔히 볼 수 있는 폭력은 우리가 삶에서 마주하는 불확실성과 무작위성 (randomness)에 대한 은유이지만, 어머니의 사진 촬영 게임은 게임 안에서조차 폭력이 그 문제에 대처하는 유일한 방법은 아니라는 것을 저에게 가르쳐 주었습니다.

스콜리텔링 (Scrollytelling) 어머니의 날 카드의 작동 방식

어머니는 혼란스러운 세상 속에서 찰나의 의미 있는 순간들을 포착하기 위해 카메라를 사용하던 능력을 통해, 이 실험 속 UFO들의 무작위성 (randomness)에 영감을 주셨습니다.

결정론적인 (deterministic) 스크롤 트리거 애니메이션 (scroll-triggered animations)과 UFO 및 텍스트 물리 효과의 무작위성 (randomness)의 결합은, 제가 아직 실무에서 자주 접하지 못한 외계 기술인 scroll-snap events를 사용하여 가능합니다. 이 신흥 모듈은 이 글을 쓰는 시점 기준으로 Chrome과 Opera에서만 사용 가능하며, 간단한 JavaScript API를 제공합니다. 이를 통해 낮과 밤의 장면 사이를 스냅 (snap) 하도록 페이지 스타일을 지정할 때, CSS만으로는 불가능한 동작들, 예를 들어 UFO의 무작위 비행 경로와 우주선이 텍스트를 통과할 때 글자를 밀어내는

참고: CSS에서의 무작위성 (Randomness in CSS)이 도입될 예정이지만, 현재는 Safari에서만 작동합니다.

다음은 스크롤 스냅 (scroll snapping)을 활성화하기 위한 CSS입니다:

/* 스크롤 컨테이너 */
body {
  overflow-y: auto;
...

…그리고 스크롤 스냅 이벤트 (scroll snap events)를 처리하기 위한 JavaScript입니다:

// scrollsnapchanging는 사용자가 스크롤하는 동안 발생하며 —
// snapTargetBlock은 사용자가 향하고 있는 패널입니다.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
...

이러한 이벤트들을 처리함으로써, 사용자가 낮과 밤 사이를 오갈 때 게임 로직의 상태에 따라 두 장면 사이의 문맥 인식 전환 (context-aware transitions)을 생성할 수 있음을 알 수 있습니다. 저희 어머니는 제가 일을 제대로 해낼 수 있도록 항상 한 번 더 기회를 주시곤 했습니다.

만약 당신이 일반적인 어머니의 날 선물을 구글링하다가 이 글을 발견했다면…

마지막 한 마디: 혹시라도 당신의 어머니가 브라우저의 신흥 기능들을 보여주는 전위적인 (avant-garde) 수제 가상 선물을 좋아하지 않으실 경우를 대비해, Kindle 같은 것을 선물하세요. 저는 어머니가 살아계실 때 Kindle을 사드렸습니다. 우리는 각자의 Kindle로 같은 소설을 따로 읽고, 제가 방문할 수 없는 날에는 전화로 서로의 감상을 비교하곤 했습니다.

모두 행복한 어머니의 날 (Mother’s Day) 되세요!