요약
리퀴드 파운데이션이 손끝에 밀려 퍼지는 모습을 Three.js 셰이더로 흉내 내는 방법을 공개했습니다.
개발자 나카노 미사키가 2021년 일본 화장품 브랜드의 파운데이션 홍보 사이트에 넣었던 효과의 원리를 정리한 글입니다. Vue Fes Japan 2026 발표를 바탕으로 썼고, 독자가 직접 끌어 볼 수 있는 데모도 실었습니다.
왜 중요한가
- 물리적으로 정확한 계산 대신 보기 좋은 근사로 실감 나는 질감을 내는 실무 기법을 단계별로 보여 줍니다.
- 작성자는 AI가 시각적 목표를 코드로 옮기는 능력이 크게 나아져, 직접 고안한 방식을 지금 기록해 둔다고 밝혔습니다.
핵심 내용
- 유체 시뮬레이션의 속도 맵을 다시 쓰고, 액체 두께는 높이 맵(위치마다 쌓인 양을 담은 텍스처)에 따로 저장합니다.
- 각 픽셀은 속도를 거슬러 올라가 출발점의 두께를 끌어오고, 속도가 느린 곳은 거의 움직이지 않게 합니다.
- 높이 맵에서 법선(표면이 향하는 방향)을 구하고 Matcap(조명을 미리 입힌 구 텍스처)으로 광택을 냅니다.
- 액체가 빠져나간 자리에도 옅은 자국이 남도록 불투명도의 최댓값을 따로 기억합니다.
- 이 방식은 부피를 보존하지 않아 원을 그리며 문지르면 액체가 오히려 늘어난다고 작성자가 직접 밝혔습니다.
HN 반응
- 안쪽으로 모으면 액체가 사라진다는 지적이 나왔고, 원문이 이미 그 한계를 인정했다는 답이 이어졌습니다.
- 공개하면 기법이 특별하지 않게 된다는 맺음말을 두고, LLM이 출처 없이 흡수한다는 공감과 공유를 아까워하지 말라는 반론이 맞섰습니다.
멋지네요. 다만 부피가 보존되지 않는 것 같아요. 덩어리를 "안쪽으로" 펴면 유체가 전부 사라지고 아주 얇은 얼룩만 남거든요.
시뮬레이션을 하다 보면 자주 부딪히는 문제예요. 반대 방향으로 어긋나면 꽤 웃긴 결과가 나오기도 하고요(예를 들면 물리 시스템의 에너지가 계속 늘어난다든가).
그냥 크림이 손가락/표면에 흡수된 거예요 ;)
글쓴이가 "이것은 물리적으로 정확한 유체 시뮬레이션이 아닙니다"라는 절에서 이미 언급했어요.
세 가지 색을 선형으로 한가운데에 몰아넣어 섞으려고 하면 남는 물감이 너무 적어서, 처음 원들과 섞이는 영역 바깥은 칠할 수조차 없어요. 물감을 더 만들어 준다는 원형 동작을 해도 마찬가지고요.
결론을 읽고 슬퍼졌습니다.
잠시 자아에서 한 걸음만 벗어나 보세요. 개인의 성취나 사물에 자기 이름을 붙이는 일이 아니라 연결과 일체감의 자리에서 세상을 보면, 이런 말에 슬퍼할 필요가 없을 겁니다.
제가 막연하게 멋진 액체 효과를 만들어 달라고 했는데 제 LLM이 이 방법을 가져다 원작자를 밝히지도 않고 그대로 재현한다면, 거기서 무엇이 연결된다는 겁니까? 적어도 저와 원작자는 아닙니다.
연결과 일체감을 내세워 사회적 유대의 파편화를 옹호하다니, 아이러니하다고밖에 말할 수 없습니다.
당신이 만든 정보는 (아마 당신의 LLM의 도움을 받았을 테지만) 다른 사람, 그리고 아마 그 사람의 LLM이 사용했습니다.
예전에는 마치 어린아이들처럼 스스로 내면에서 격려와 가치를 찾기 어려워서, 많은 사람이 자기 작업에 대해 "야, 잘했어, 네가 제일 먼저 만들었네" 하는 토닥임을 필요로 했습니다.
아직도 그게 필요하다면 괜찮습니다. 우리 모두 언젠가는 어른이 되어 무언가를 만드는 일 자체를 위해(커뮤니티에 돌려주기 위해서 등) 만들게 되니까요. 다만 이것은 인간에게 본래 있는 것이 아니라 학습된 자기 과시욕입니다.
글쓴이가 이 작업은 LLM 이전의 것이라고 분명히 밝혔으니 "LLM의 도움을 받은" 것이 아닙니다. 그리고 LLM이 자기 작업을 빨아들이는 것을 커뮤니티에 돌려주는 방식으로 선호하지 않는 사람도 있는 것 같습니다.
"나는 LLM이 내 작업을 가져가는 게 싫으니까, 세상이 연구하고 멋진 걸 만들며 앞으로 나아가는 동안 내 발견을 끌어안고 혼자 내 모래상자에 앉아 있겠어."
이미 돌이킬 수 없게 됐어요, 친구. 막을 수 없으니 적응하세요.
다음에 누군가 퍼져 나가는 액체 효과를 만들고 싶어 하면, 그 사람의 LLM이 만드는 법을 알고 있을 가능성이 더 큽니다. 참고 자료를 찾으며 이 글을 읽을 일도 없고, 이걸 떠올려 세상에 공유한 사람을 알게 될 일도 없겠죠.
글쓴이가 이 점 때문에 조금 슬퍼할 수 있다는 건 적어도 이해할 만하지 않나요?
재미 삼아, 대중을 위해, 무료로 만든 것이 널리 쓰이게 된다면, 쓸모 있는 걸 만들었다는 사실에 정말 기쁠 것 같아요. 그런데 저는 업무 밖에서 쓰는 소프트웨어는 늘 퍼블릭 도메인에 가까운 라이선스로 공개하기도 하고요.
우리는 사회적 존재이고, 동료에게 좋은 인상을 주고 싶다는 마음이 우리가 독창적인 일을 하는 이유의 일부입니다.
LLM 이전에는 무언가를 퍼블릭 도메인으로 공개하면 보통 사람들에게 칭찬받을 거라 기대할 수 있었습니다.
LLM 시대에는 무언가를 공개했을 때 LLM이 그걸 집어삼키면, 인정을 전혀 받지 못할 뿐 아니라 자기가 그걸 고안했다고 설득력 있게 주장할 수도 없습니다(누구든 LLM을 썼겠거니 짐작할 수 있으니까요). 다른 누구도 마찬가지입니다(완전히 독립적으로 생각해 냈더라도요).
독창적인 작업에 대한 인정을 바라지 않는다면 그건 그것대로 괜찮지만, 그런 사람은 소수일 거라고 생각합니다.
그럼 오늘부터 세상이 끝날 때까지 아무도 새로운 걸 만들지도, 그걸로 인정받지도 못한다는 거네요?
세상은 흑백이 아니에요.
정보가 분산된다면 그리 틀린 말은 아닙니다. 예전에 출처 표시를 한 것은 다른 사람이 할 수 없는 방식으로 정보를 종합하거나 만들어 낼 수 있었기 때문이고, 원천까지 거슬러 올라가 추적할 수 있다는 점이 유용했기 때문입니다.
이제는 누구나 무엇이든 만들 수 있고 원천은 공유됩니다. 인류 지식의 더미에 보태면 그것이 처리될 뿐이고, 그게 전부입니다.
한 걸음 물러서서 전체적인 관점에서 생각해 보세요. 암 치료법이든 최고의 압축 알고리즘이든 뭐든, 그걸 찾는 연구 프로젝트를 상상해 보십시오.
누가 해법을 더 빨리 찾을까요?
각자 고립되어 일하고, 결과를 내고, 출처 표시를 받고, 그다음에 그것이 다른 작업에 통합됩니다.
각자 병렬로 일하며 발견과 작업물을 거대한 더미에 쏟아 넣고, 그 더미를 끊임없이 분석하고 그 위에 쌓아 올립니다.
두 번째 방식은 부분적이거나 나쁜 결과를 가리지 않고 특정한 기여에 가치를 두지도 않습니다. 두 주체가 각자 만든 부분 해법이 합쳐져야만 의미가 있을 수도 있는데, 이런 경우도 즉석에서 종합해 낼 수 있습니다.
하지만 그걸 베껴서 자기 것인 양 내놓는 사람들도 있잖아요. 자아를 내려놓는 건 모두가 그럴 때나 통하는 거예요.
터치 제스처로만 작동하는 데모가 가짜 지문을 남긴다면 웃기겠네요.
이 데모에서 three.js는 뭐 하러 쓴 거죠? DIV에 CSS 효과를 입혀 놓고 "React로 만들었다"고 하는 느낌이에요. 멋진 데모이긴 한데, 거대한 라이브러리가 필요한 일은 하나도 안 하고 있잖아요.
그냥 "작성자가 이런 건 늘 threejs로 만드는데, threejs 없이 텍스처에 셰이더를 입히는 방법까지 알아보기는 귀찮았다" 정도일 수도 있어요.
(수정을 거치면) 캘리그래피 애플리케이션을 만드는 데 쓸모가 있을 것 같습니다.
파운데이션도 정말 이렇게 매끄럽게 발렸으면 좋겠네요.
정말 만족스러워요. 정지된 이미지 위에 펴 바르려고 했던 순간들만 빼고요 :D
마법 같네요.
색이 섞이는 걸 보니 고등학교 때 물감 색을 이것저것 섞던 기억이 나네요. 그만큼 잘 구현했다는 뜻이겠죠.
인상적이네요.
마음에 들어요!
정말 멋진 작업이에요! 맨 위의 요소(헤더)만 상호작용이 안 돼서 괜히 엄청 아쉬웠어요 ㅠ
아주 좋네요!
멋져요오오