어렸을 적 본 “톰 소여의 모험”을 보면 자주 등장하는 공간으로, 다락방이 있습니다.
항상 주인공들은 다락방에서 그들의 꿈을 펼치는 모습을 보여주었습니다.
어린 마음에 저 역시 다락방을 가지고 싶다는 소망은 있었지만, 그 소망을 이루지 못한 채 성인이 되어 버렸습니다.
저는 저에게 다락방이 생긴다면 아주 소중한 물건들을 보관할 거라는 다짐을 했어요.
그래서 찹도 다락방을 만들었습니다.
제가 좋아하고 재미있어하는 다양한 인터랙션들을 모으고 실험하는 공간입니다.
Traffic Light | 2025-09
어느 날 지인에게서 “신호등도 장애가 발생하지 않나? 장애가 발생하면 어떡하지?”라는 질문을 들었습니다.
항상 서비스를 만들다 보면 장애 상황에 대해 상상해보고, 때로는 직접 마주하게 됩니다. 그런데 우리가 매주 마주하는 신호등 역시 가끔은 장애가 발생하지 않을까? 그런데 왜 인지하지 못했을까? 이 생각에 빠지게 되었습니다.
그날 이후로 저는 신호등을 유심히 관찰하게 되었습니다. 그리고 해외여행을 다니면서 각국의 다른 신호등 모습에도 영감을 받았습니다. 이런 생각들이 모여, 우리나라의 신호등을 관찰하고 직접 구현해 보았습니다.
Opening Box | 2025-10
다락방이라면 상자들이 쌓여 있고, 약간의 먼지가 묻어나는 그런 모습을 상상했습니다. 무엇보다도 상자를 열었을 때, 한동안 잊고 있던 추억의 물건과 기억들이 불쑥 나타나는 순간을 그리고 싶었습니다.
상자를 열고 그 속의 물건을 만나는 순간을 담고 싶었습니다.
Tactile Fader | 26-01
저는 초등학교 때 방송부였습니다.
단순히 “있어 보인다”는 이유로 방송부에 지원하였고, 아나운서, 카메라 등 여러 직무 중에서도 가장 눈길을 끌었던 PD를 맡았습니다.
제 주된 업무는 아침 조례 및 행사 시에 영상을 틀고 알맞게 소리를 조절하는 것이었습니다. 소리 조절은 음향 슬라이더로 하게 됩니다.
그런데 저는 종종 그 음향 슬라이더의 촉감이 기억납니다. 약간은 움푹 파여 손가락이 알맞게 들어맞고, 움직일 때는 매끈하게 움직이는 것이 아닌, ‘토도독’이라고 해야 할까요? 약간의 걸림이 느껴지는 그 촉감이요.
종종 떠오르는 이 기억 속 촉감을 구현해 보았습니다.
Stranger things | 26-01
최근 넷플릭스 시리즈인 “기묘한 이야기”를 보다가 구글에 기묘한 이야기를 검색했는데, 영상 속의 재미있는 인터랙션을 보게 되었습니다. (참고)
그래서 저도 기묘한 이야기를 주제로 재미있는 인터랙션을 구현해 보고 싶다는 생각이 들어, 다양한 인터랙션이 담긴 기묘한 이야기 카드를 만들어 보았습니다.
다음 프로젝트들은 인터랙션 예제를 기반으로 학습하며 구현하였습니다.
-
Curtain Reveal Menu
https://www.youtube.com/watch?v=GSPUUN4nDGE -
Fancy Gradient Hover Link
https://youtu.be/NUeCNvYY_x4?si=iBFO9FVGQTdgxHWI -
Full Screen Carousel
https://youtu.be/nG2IyH43xMU?si=9TTa8kBT06vfZH75 -
Hover Card Effect / Hover Effect
https://youtu.be/joDhIH6Xumw?si=xVGYGs_Hy-TyyN01 -
Hover Glide Image Gallery
https://youtu.be/GHZBa_R93ag?si=7CgbZuIucLE-FDEP -
Intelligent Mouse Trailer
https://www.youtube.com/watch?v=CZIJKkwc8l8 -
Living Shapes
https://www.youtube.com/watch?v=dhfQnmGXSwU -
Mouse Move Image Gallery
https://www.youtube.com/watch?v=Jt3A2lNN2aE -
Sparkling Text
https://youtu.be/yu0Cm4BqQv0?si=BN9UZUb1r0PGGMlR -
Staggered Grid Effect
https://youtu.be/bAwEj_mSzOs?si=1ztOQIy0jNlLvCze -
Website Header
https://youtu.be/zGKNMm4L-r4?si=rZIgcM9M7bAmAiXv
메인에서 날짜를 클릭하면 작품과 제작 이유를 함께 볼 수 있습니다. 새 글은 apps/web/works/<slug>/post.mdx에 작성합니다. 로컬 실행·게시·배포 방법은 갤러리 작성 안내를 참고하세요.
새 React 작품은 pnpm new:work <slug> --title "작품 제목"으로 생성하고 pnpm dev:web으로 미리 봅니다. 기존 작품을 함께 실행하려면 pnpm dev를 사용합니다.