Hello, PhotoShop. Hello, Rive

진짜 별 걸 다 해본다…

이제 나름 공식 1인 개발자로 지낸 지 3일 째다.

Babple 프로젝트가 이제 안드로이드 12인 테스트에 들어가서, 지난주부터 이번 주까지는 딱히 건들게 없어서, 새 프로젝트의 기획을 시작했다.

기획서를 다 쓰고, 화면 기획까지 거의 다 끝내고 보니까…

새로 진행할 프로젝트는 약간 동물원 느낌이 나서… 좀 귀여운 캐릭터가 있는 아기자기한 타이쿤 느낌으로 방향성이 나왔다.

근데 막상 이렇게 되고 나니까, 꼭 필요하지만 내겐 경험이 1도 없는게 필요해졌다.

캐릭터와 애니메이션

난 맹세코 살면서 “포토샵”을 깔아서 만져본 적도 없고, 애니메이션이라고는 초등학교 때 이지툰이나 책 귀퉁이게 그려서 만든게 다인 진성 공대생 개발자이다.

근데… 캐릭터랑 애니메이션, 그것도 꽤나 귀여운 애니메이션이 갑자기 필요해졌다.

그래서 처음엔 외주를 알아보려고 했다. 에셋만 10개 정도 있으면 시작은 할 수 있을테니까…

근데, 캐릭터 당 그리는 것만 8만원이다.

애니메이션은 그거보다 더 하겠지? 하고 바로 런쳤다.

흠.. 그렇다고 고작 메인 화면에 쫑쫑 거리는 캐릭터 하나 넣겠다고 Unity를 태우자니… 이건 진짜 배보다 배꼽이 더 크고..

90년대 게임처럼 스프라이트 이미지를 프레임별로 수십 장 찍어서 if-else로 돌려막기엔… 지금은 2026년이다.

용량 최적화도 안 될뿐더러, 무엇보다 개발자로서 용납할 수 없는 레거시한 방식이다.

그래서 찾은 기술적 해답은 [Rive]였다.

3D 모델링 없이 2D 이미지를 쪼개서 뼈(Bone)를 심고 메쉬(Mesh)를 변형해 움직이는 2.5D 애니메이션.

벡터 기반이라 용량은 가볍고, 60fps의 고품질 연출이 가능하다.

물론, 나는 오늘 태어나서 포토샵을 처음 깔아본 디자인 잼병이다.

이건 그 처절한 생존기이자 학습 노트다.

---

1. 리소스 준비: 생성형 AI의 도움 (Nano Banana)

일단 원화가 필요했다.

그림 실력이 없으니 생성형 AI 모델인 Nano Banana를 활용했다. 프롬프트 엔지니어링을 통해 타이쿤 장르에 어울리는 3D 렌더링 스타일의 동물 캐릭터를 10장 정도 뽑아냈고, 퀄리티도 매우 만족스럽다.

핵심은 T-Pose(T자 자세)로 뽑는 것.

그래야 관절을 심고 움직일 때 이미지 왜곡을 최소화할 수 있다.

결과물은 대만족.

하지만 문제는 이 정적인 ‘통짜 JPG’를 어떻게 살아 움직이게 만드느냐는 것이다.

2. 도구의 중요성

Rive에서 리깅(Rigging)을 하려면 팔, 다리, 몸통을 다 분리(Slicing)하고, 잘린 단면을 둥글게 칠해주는 ‘리터칭’ 작업이 선행되어야 한다.

처음엔 개발자가 무슨 포토샵이야, 윈도우 기본 툴이면 되지라는 오만함으로 그림판 3D를 켰다.

아니 근데, 난 심지어 이거 꽤나 잘 쓴다…

결과: 30분 만에 프로젝트를 엎었다. 누끼는 지저분하고, 관절 리터칭은 색종이를 가위로 오려 붙인 것처럼 조잡했다. 물론 더 보기 좋고 그럴듯하게 뽑을 수도 있었다. 근데 그러면, 슬라이싱하고 리터칭 하는데만 캐릭터 하나당 반나절을 쓸 거 같았다.

결국 Photoshop을 결제했다.

(Tip: 결제 후 바로 해지 신청을 하니, 어도비가 가지 말라며 2달 무료 쿠폰을 줬다. 구독 모델의 리텐션 전략을 몸소 체험하며 무료로 시작했다.)*

🛠️ 개발자가 느낀 포토샵의 효율성 (TIL)

오늘 처음 써봤지만, IDE 단축키 외우듯 기능을 익히니 생산성이 비약적으로 상승했다.

• 누끼 따기 (L): 올가미 도구(Lasso)로 대충 영역을 잡으면 AI가 경계를 인식한다. O(n) 걸릴 작업이 O(1)이 된 느낌.
• 레이어 분리 (Ctrl + Shift + J): 선택 영역을 잘라내어 새 레이어로 분리한다. 이 단축키 하나로 사지절단(?) 작업 속도가 10배 빨라졌다.
• 리터칭 (B, Alt, S): 여기가 하이라이트다.
• 잘린 관절 부위가 비어있을 때 B(브러시)를 누르고 Alt로 인접 픽셀 색상값(Color Picker)을 가져와 칠한다.
• 질감이 어색하면 S(도장 툴)로 옆에 있는 털 질감을 그대로 복사(Alt)해서 덮어 씌운다(In-painting).
• 마지막으로 손가락 도구로 문지르니(Smudge) 관절이 매끈하게 이어졌다.

3. Rive 리깅과 메쉬 토폴로지

파츠가 분리된 PSD 파일을 Rive로 import 했다. 이제 뼈를 심고(Bone Binding) 움직이면 되는데…

아 이거 진짜 빡셌다. 러닝커브가 없는 듯 있고, 메시 잡는게… 내가 처음이다보니까 아예 감이 없어서 문제가 뭔지 깨닫는데 하루 종일 걸렸다.

유튜브 튜토리얼을 보며 에셋을 지웠다 넣었다만 10번. 맨땅에 헤딩하다 깨달은 핵심 원리는 두 가지다.

1) 메쉬(Mesh)는 ‘빨대 주름’처럼 짜야 한다

처음엔 Auto Mesh 기능으로 대충 짰더니, 팔을 굽힐 때마다 햄스터 팔꿈치가 종이 접히듯 찌그러졌다.

해결책은 관절이 꺾이는 부위에 가로 선(Edge)을 3줄 정도 수동으로 그어주는 것.

마치 구부러지는 빨대의 주름처럼 메쉬 토폴로지를 구성해야 부드러운 곡선으로 굽혀진다.

아래는 나름 괜찮은 예시로 잘 뽑힌 거 같은 메시 예시이다.

2) 웨이트(Weight) 조절이 관건이다

뼈를 심고 나서, 뼈가 움직일 때 어떤 정점(Vertex)들이 얼마나 따라갈지 정해주는 것이 웨이트다.

• 100% 종속: 로봇처럼 딱딱하게 움직임.
• 50:50 분배: 관절 부위는 두 뼈의 영향을 섞어줘야 젤리처럼 말랑하게 늘어난다.

4. 미래의 나를 위한 애니메이션 명세서 (Cheat Sheet)

고생 끝에 리깅을 마쳤다.

이제 코드로 넘어가기 전, 일관성 있는 모션을 위해 15년 차 애니메이터(의 빙의를 받은 AI)의 조언을 바탕으로 애니메이션 사양서를 정리했다.

나중에 까먹지 않기 위해 기록해둔다.

---

1. Idle (대기 상태) - “숨 쉬는 젤리”

가만히 있어도 “살아있다”는 느낌을 주는 것이 핵심이다.

• 키포인트: 호흡 (Breathing)

• 프레임 구성 (60fps 기준, 2초 루프):

• 0f (시작): 기본 포즈.

• 30f (중간):

  • 몸통(Body): Y축 스케일을 102% 정도로 살짝 늘리고, X축은 99%로 줄인다. (숨 들이마심)

  • 어깨/팔: 숨을 들이마시니 흉곽에 딸려 아주 살짝 위로 올라가게.

  • 배: 빵빵하게 부풀어 오르게.

  • 60f (끝): 0f과 동일하게 복사. (숨 내뱉음)

Tip: 박자를 정직하게 가져가지 말고, Ease-in / Ease-out 곡선을 사용해 숨을 들이마실 때는 천천히, 내뱉을 때는 조금 더 빠르게 잡아주면 리얼하다.

---

2. Walk (걷기) - “오뚜기 스텝”

다리가 짧은 2.5D 캐릭터는 다리를 앞뒤로 젓는 것보다, 무게 중심을 좌우로 옮기는 것이 훨씬 자연스럽다.

• 키포인트: 좌우 틸트 (Weight Shift & Tilt)

• 프레임 구성 (60fps 기준, 40프레임 루프 / 약 0.66초):

• 0f (왼발 착지):

  • 몸통(Root): 왼쪽으로 -5도 회전(Rotation). 무게가 실리니 Y축 위치를 살짝 내린다.

  • 발: 왼발은 지면에 고정, 오른발은 살짝 든다.

• 10f (교차/도약):

  • 몸통: 회전값 0도. Y축 위치를 가장 높게 올린다. (통통 튀는 느낌)

  • 귀/배: 관성으로 인해 몸통보다 살짝 늦게 아래로 처지게 메쉬 변형.

• 20f (오른발 착지):

  • 몸통: 오른쪽으로 +5도 회전. Y축 위치 다시 내림.

  • 발: 오른발 지면 고정, 왼발 듦.

• 30f (교차/도약): 10f과 반대 발로 동일한 메커니즘.

• 40f (루프): 0f과 완벽하게 동일한 값으로 복사.

Tip: 팔과 귀는 몸통 박자보다 3~4프레임 정도 뒤로 밀어서(Offset) 키를 찍어야 한다. 몸이 먼저 가고 살들이 나중에 따라오는 ‘물리적인 쫀득함’이 생긴다.

---

2. Walk (걷기) - “오뚜기 스텝”

다리가 짧은 2.5D 캐릭터는 다리를 앞뒤로 젓는 것보다, 무게 중심을 좌우로 옮기는 것이 훨씬 자연스럽다.

• 키포인트: 좌우 틸트 (Weight Shift & Tilt)

• 프레임 구성 (60fps 기준, 40프레임 루프 / 약 0.66초):

• 0f (왼발 착지):

  • 몸통(Root): 왼쪽으로 -5도 회전(Rotation). 무게가 실리니 Y축 위치를 살짝 내린다.
  • 발: 왼발은 지면에 고정, 오른발은 살짝 든다.

• 10f (교차/도약):

  • 몸통: 회전값 0도. Y축 위치를 가장 높게 올린다. (통통 튀는 느낌)
  • 귀/배: 관성으로 인해 몸통보다 살짝 늦게 아래로 처지게 메쉬 변형.

• 20f (오른발 착지):

  • 몸통: 오른쪽으로 +5도 회전. Y축 위치 다시 내림.
  • 발: 오른발 지면 고정, 왼발 듦.

• 30f (교차/도약): 10f과 반대 발로 동일한 메커니즘.

• 40f (루프): 0f과 완벽하게 동일한 값으로 복사.

Tip: 팔과 귀는 몸통 박자보다 3~4프레임 정도 뒤로 밀어서(Offset) 키를 찍어야 한다. 몸이 먼저 가고 살들이 나중에 따라오는 ‘물리적인 쫀득함’이 생긴다.

---

3. Success (성공/레벨업) - “용수철 점프”

디즈니 애니메이션의 12원칙 중 ‘Squash & Stretch(찌그러짐과 늘어남)‘를 극단적으로 적용해 보상감을 극대화한다.

• 키포인트: 스쿼시 앤 스트레치 (Squash & Stretch)

• 프레임 구성 (60fps 기준, 70프레임 / One-shot):

• 0f ~ 12f (준비/Anticipation):

  • 몸통: 바닥에 붙을 듯이 납작하게 찌그러트린다. (Scale Y: 80%, Scale X: 120%)
  • 눈: 꽉 감는다. 에너지를 응축하는 단계.

• 12f ~ 16f (도약/Action):

  • 타이밍: 단 4프레임 만에 하늘로 솟구친다. (Interpolation: Linear 혹은 Expo Out)
  • 몸통: 순식간에 길쭉하게 늘린다. (Scale Y: 120%, Scale X: 80%)

• 16f ~ 28f (체공/Hang Time):

  • 포즈: 공중에서 만세 자세로 잠시 멈춘 듯한 무중력 상태 유지.

• 28f ~ 35f (착지/Overshoot):

  • 몸통: 바닥에 닿자마자 충격으로 젤리처럼 출렁거리며 다시 납작해짐.

• 35f ~ 70f (안정/Settle): 원래의 Idle 자세로 부드럽게 돌아옴.

Tip: 도약할 때(12f~16f)는 속도 그래프를 가파르게 잡아서 ‘총알처럼’ 튀어나가게 하고, 공중에 떴을 때는 완만하게 잡아야 타격감이 산다.

---

4. Fail (좌절) - “녹는 아이스크림”

유저의 연민을 자극해야 한다. 긴장(Tension) 상태에서 순식간에 이완(Release)되어 무너지는 낙차를 이용한다.

• 키포인트: 중력 낙하 (Gravity Drop)

• 프레임 구성 (60fps 기준, 90프레임 / One-shot):

• 0f ~ 40f (한숨 준비):

• 몸통/가슴: 폐활량을 최대로 써서 천천히 부풀린다. 어깨도 같이 위로 상승. (답답함 고조)

• 40f ~ 45f (정적): 터지기 직전, 아주 잠깐 멈춤.

• 45f ~ 55f (낙하):

• 속도: 아주 빠르게! 힘이 빠지며 수직으로 툭 떨어진다.

• 고개: 푹 숙임 (-30도 회전).

• 55f ~ 90f (여운):

• 물리효과: 몸통은 멈췄지만, 귀와 팔은 관성으로 인해 덜렁덜렁 흔들리다 천천히 멈춘다. (Damping 진동 그래프 형태)

Tip: 앱 연동 시, 몸이 바닥에 떨어지는 45f~50f 타이밍에 맞춰 스마트폰 햅틱(Haptic) 진동을 짧게 주면 “쿵” 하는 느낌이 손끝으로 전달되어 몰입감이 배가된다.

---

5. Sit (앉기) - “퍼지는 찹쌀떡”

State Machine에서 Stand → Sit으로 상태가 전환될 때 재생된다. 다리가 짧아 ‘앉는다’기보단 ‘퍼진다’는 느낌으로 접근했다.

• 키포인트: 면적 확산 (Volume Spread)

• 프레임 구성 (60fps 기준, 45프레임 / Transition):

• 0f ~ 10f (반동): 앉기 위해 몸을 살짝 위로 들어 올린다.

• 10f ~ 25f (하강):

• 엉덩이: 바닥(Ground)까지 Y축 이동.

• 다리: 무릎 관절 메쉬를 바깥쪽으로 벌려 ‘V’자 형태를 만든다.

• 25f ~ 35f (퍼짐):

• 몸통 하단: 바닥에 닿는 순간 뱃살 메쉬(Mesh)의 좌우 폭(Width)을 120%까지 늘린다. 액체 괴물처럼 바닥에 착 달라붙는 연출.

• 35f ~ 45f (안정): 과하게 퍼진 살이 살짝 제자리로 돌아오며 편안한 자세 유지.

Tip: 단순히 뼈만 내리지 말고, Rive의 Mesh Deformation 기능을 적극 활용해 뱃살이 중력에 의해 아래로 처져서 땅에 깔리는 모양을 잡아줘야 한다. (이게 2.5D의 맛이다.)

마치며

처음엔 “개발자가 무슨 아트 작업이야” 싶어서 피하고 싶었지만, 막상 AI와 최신 툴(Photoshop, Rive)을 조합하니 1인 개발자도 충분히 상용 게임 퀄리티의 에셋을 만들 수 있다는 걸 확인했다.

물론, 시간은 좀 갈아야 하지만… 이젠 진짜 다 잘해야 하는 시대가 아닌가?

이렇게 나름 내 개발 주머니에 포토샵과 Rive를 채워 넣었다.

마침