2026년 5-6월의 요약

5월

비쥬얼 디렉팅에 좀 더 박차를 가하다.

5월에는 드디어 내가 만들고 있던 것이 조금 더 분명해졌다.

처음에는 Remotion으로 Lyrics M/V를 만들려고 했다.
그러다 재사용 가능한 Typography Component가 필요해졌다.
Component가 늘어나니 Variant가 필요해졌다.
Variant가 늘어나니 자연어 디렉션을 Parameter로 번역할 규칙이 필요해졌다.
규칙이 생기니 Scene, Sequence, Cut, Layer를 아우르는 Config Schema가 필요해졌다.
그리고 Schema가 생기자 이제 그것을 작성하고 검증하며 코드로 바꾸는 전체 Handoff System이 필요해졌다.

결국 5월의 작업은 “영상 하나를 어떻게 만들 것인가”보다 다음 질문에 가까웠다.

머릿속의 움직임을 어떻게 구조화하고, 그 구조를 코드와 렌더링 결과까지 손실 없이 전달할 것인가.

6월

7월

창작 관련으론 한게 전혀 없고 야설 20몇편이랑 야짤만 100장 넘게 그렸네…미친… 그나마 스스로 위안하는 건 여름 학기 무사히…는 아니지만 간신히 버티고 있다는거?

차마 공개하지 못할 야짤들과 야설들만 잔뜩 연성(…)

7월, 번아웃과 구조화 사이에서

7월은 이상하게도 손은 바빴는데 마음은 자꾸 뒤처지는 달.

이것저것 많이 만들고 고치고 실험했는데도, 월말에 돌아보면 늘 같은 질문이 남는다. 대체 이 모든 작업은 한 사람의 어떤 이름으로 묶일 수 있는가.

표면적으로는 제각각이다. 멀티 비디오 레이아웃 문제, 미디어 삽입 구조, Remotion 트랜지션,

UX 포트폴리오 설계에 대한 고민들.

조금만 더 들여다보면, 이 흩어진 조각들은 전부 같은 질문으로 수렴한다. 기술과 디자인, 창작과 시스템, 감각과 논리 사이에 무언가를 만드는 사람은 어떤 방식으로 내 일을 설명해야할까

2026년 5월 레트로: 코드가 춤추기 시작하는 달

“The Hardest Button to Button” — 가장 어려운 건, 역시나 시작 버튼이다.

5월은 조용히 미쳐가는 달. 코딩하고, 리팩토링하고, 커밋. 38KB짜리 단일 파일과 씨름하고, 가사 글자 하나하나가 무질서하게 날아다니는 걸 컨트롤하려다 번번이 실패하고, 그 실패를 개선하는 과정이 담긴

5월 타임라인 요약

5월

작은 진전과 작업 과정 기록

같은 파일 안에 GSAP 엔진 기반 코드(entryEase: ‘back.out(1.7)’)와 Remotion native 코드(interpolate, frame, fps)가 공존하고 있었다는 것. 이 둘은 실행 엔진 자체가 다르다. GSAP은 브라우저 requestAnimationFrame 기반이고, Remotion은 프레임 단위 렌더링 기반이라 타이밍이 근본적으로 맞질 않는다.

진단 결과:

• MotionReveal.tsx + MotionStagger.tsx + TypoStagger.tsx — 셋 다 “children 순차 등장” 담당. 즉 중복 3형제
• staggerOrderToGsap vs resolveStaggerIndex — 같은 StaggerOrder를 해석하지만 출력 대상이 달라서 동시에 존재하는 이중 구현
• MOTION_MAP 섹션은 완전히 다른 책임을 지고 있는데, 아무도 분리하지 않은 채 방치

해결 방향은 전면 교체가 아니라 레이어 분리 전략. 리팩토링. GSAP 계열은 현재 유지하되, Remotion-native 신규 레이어(_motion/)를 따로 쌓는 방식.

ChaoticFlyIn: 실패 로그가 곧 작업 일지

5월 28–29일 이틀에 걸쳐 가장 많은 커밋이 쏟아진 날이다. The Hardest Button to Button 리릭스 MV의 핵심 타이포 효과인 ChaoticFlyIn 개발 스프린트.

커밋 메시지 순서 그대로가 이 날의 서사다:

1. Chaotic Flip MV 변환 시도 그러나 실패
2. ChaoticFlyIn
3. Chaotic Flyin splitText util 변경 — 텍스트 분리 로직을 갈아엎었다.
4. Chaotic Flyin 수정하기 → Chaotic Flyin 다듬기 → Chaotic Flyin 범용성 확장 — 점점 진화
5. feat(ChaoticFlyInMV): add vertical mode with verticalStagger, charSpacing, splitLine support — 최종적으로 수직 모드, 캐릭터 간격, 라인 분리까지 지원하는 범용 컴포넌트가 됐다.

Chroma Drift → Niji: 씬 단위로 조립되는 MV

Chroma Drift 씬 작업이 본격화됐고, 최종 렌더링을 완료했다. 그리고 곧바로 다음 프로젝트 “Niji”로 넘어간다. Hero Scroll 애니메이션 이상 수정, Jitter 클리닝, VideoStagger 분리, 루트 정리. 렌더링 직전에 한 번씩 터지는 그 대청소. 코드를 짜다 보면 어느 순간 “지금 안 치우면 나중에 더 끔찍해진다”는 신호에 응답한 날.

감정 복기

나오야 팬아트 Mograph 실험 아이디어, 팬픽 씬 구상이 뒤섞여 있다.

Remotion 컴포넌트 구조 생각하다가 갑자기 “나오야 캐릭터에 판화 느낌 Mograph 실험 해봐야지”로 점프하고, 다시 splitText 유틸 문제로 돌아온다. 사실 이 크로스오버가 프로젝트의 DNA다. 음악을 분석하는 방식, 캐릭터 심리를 레이어로 해석하는 방식, 코드를 모듈화하는 방식 — 전부 같은 사고 패턴. “Musicality based physical move training must have been incorporated. Drum-DDR-Fencing was so connected.” 그 연결고리가 여기서도 작동하고 있다.

시행착오와 미완의 흔적

• _motion/ 신규 레이어 구조는 설계까지 마쳤지만 Phase 1 실제 분리 작업은 6월로 넘어갔다.
• motionVariants.ts 로드맵은 완벽하게 그렸는데 정작 분할은 안 됐다.

반성/계획: 루틴과 방향성

총평

뭐가 문제인지, 어떻게 쪼개야 하는지, 어디서부터 시작해야 하는지를 몸으로 체득한 시간.

ChaoticFlyIn이 실패했다가 범용 컴포넌트로 진화, motionVariants.ts 해부가 커다란 리팩토링 로드맵

6월

2026년 6월 레트로 저널: 공사판 위에서 리듬을 맞추는 법

6월 파일과 작업 범위

한편 ReelsLyricsMV-remotion 쪽 커밋 흐름은 5월 말부터 이어진 Lyrics MV 작업의 후속선상에 있었다. Chroma Drift, Niji, ChaoticFlyIn, 가사 정리, 설정 베이스 재정비 같은 작업들이 한 줄기에서 이어진다.

요약 테이블

타임라인 요약

6월 전반: 반짝이는 기능보다 버티는 구조

6월 초중반의 작업 톤은 ReelsLyricsMV-remotion의 흐름을 보면 렌더링 전 리팩토링, 씬 분리, 루트 정리, 지터 같은 작업이 누적되며 “계속 돌아가게 하기”에 초점이 맞춰져 있었다.

이 시기에는 가사와 모션을 붙이는 과정이 비주얼 연출이 아니라, 반복 작업을 줄이는 설계의 문제로 다뤄졌다.

Remotion 안에서 텍스트가 어떻게 등장하고 사라지는지, 장면과 장면 사이가 어떻게 이어지는지, 그리고 그 모든 것이 다시 수정 가능해야 한다는 조건을 좀 더 구체적으로 표하기 위해 노력했다.

6월 중반: ChaoticFlyIn을 길들이는 시간

ChaoticFlyIn이다. 수정하기, 다듬기, 범용성 확장, 세로 모드 추가 식으로 계속 바꾸며 살아남았다.

세로형 정렬, verticalStagger, charSpacing, splitLine 지원은 이 효과를 특정 장면 전용으로 둘 것인가, 혹은 재사용 가능한 언어로 만들 것인가에 대한 대답.

6월 후반: 가사 정리와 설정 베이스 재정비

월말로 갈수록 작업은 더 종합적 unifying 모듈화를 어찌할 것인지 고민하는 것 중심으로 수렴한다.

lyrics 수정 적용 예시, 여러 옵션 수정 로그, lyrics M/V 설정 베이스 실행, Lyrics 정리 같은 기능 추가보다 문법 통일과 운영 안정화를 암시한다.

작은 진전과 작업 과정 기록

이 달의 진전은 대부분 “남들이 보기엔 별것 아닌데 만드는 사람한텐 치명적으로 중요한 것들”이었다. 텍스트 줄바꿈 하나, 세로 정렬 옵션 하나, 렌더링 직전의 이상한 흔들림 하나를 잡는 일이 결국 전체 결과물의 유지성을 좌우하는 것 같다.

중반과 후반에 최소 두 번은 텍스트 형태로 사고를 묶어두며 좀 더 규칙성을 갖겠다 다짐했다.

즉흥적인 생산만 할 것이 아니라, 이 생산을 어떻게 회고하고 어떻게 포트폴리오 서사로 바꿀지까지 의식해야겠다.

시행착오와 미완의 프로젝트

6월의 실패는 드라마틱한 붕괴라기보다, 끝없이 작은 문제들이 이어지는 형태였다. 그래서 더 피곤하다. 모든 게 작아 보여서 남들에겐 설명도 어렵고, 만 계속 신경이 긁힌다.

Chaotic Flip MV 변환 시도 그러나 실패 같은 커밋의 여운은 여전히 남아 있다. 비록 5월 말의 기록이지만, 6월 작업의 기조를 설명해준다. 여기서는 실패를 지우지 않는다. 실패는 수정 로그의 첫 줄이 된다.

이 달의 미완은 명확하다.

• 범용화는 시작됐지만 아직 완전히 끝난 것은 아니다.
• 구조는 더 나아졌지만, 여전히 손이 많이 가는 공사판 상태다.
• 메모는 남았지만, 그것이 곧바로 외부용 포트폴리오 문장으로 번역된 것은 아니다.

즉 6월은 “완성”보다 “다음 달에도 이걸 이어갈 수 있느냐”를 통과한 달이다.

감정 복기

이 시기의 정서는 묘하게 이중적이다. 한쪽에서는 분명 진전이 있다. 모션은 더 정교해졌고, 가사는 더 다루기 쉬워졌고, 시스템은 조금 더 덜 불안정해졌다.

그런데 다른 한쪽에서는, 여전히 이 모든 일이 공사판처럼 느껴진다. 아무도 박수 쳐주지 않는 리팩토링, 티 안 나는 옵션 정리, 자꾸 꼬이는 장면 전환. 이런 건 겉으로는 화려하지 않아서 오히려 자기 자신이 그 가치를 계속 증명해줘야 한다.

그래서 6월은 성취감과 허무감이 같이 들어온다. “분명 나아졌는데 왜 아직도 멀었지?”라는 감정. 이 모순이야말로 기술과 창작을 동시에 하는 사람에게 너무 익숙한 월말의 표정이다.

놓친 부분과 인정

6월은 구조를 다졌지만, 그 구조를 외부 사람이 한눈에 이해할 수 있는 형태로 보여주는 데까지는 아직 못 갔다.

또 하나, 메모는 남아도 정리된 서사로 자동 변환되지는 않는다. 기록과 전달은 다른 노동이다.

6월은 기록에는 성공했지만, 전달을 위한 편집까지는 다 하지 못한 달이라고 보는 편이 정확하다.

반성/계획- 시스템 루틴과 미래 방향성

매번 장면을 만들 때마다 새로 고생하지 않으려면, 효과와 설정과 가사 구조를 더 일찍 공통화해야 한다.

다음 스프린트의 방향도 자연스럽게 보인다.

• 타이포 모션을 재사용 가능한 컴포넌트로 더 밀어붙일 것.
• 월중 메모를 월말 회고로 자동 연결할 수 있는 텍스트 루틴을 강화할 것.
• 결과물뿐 아니라 과정 자체를 보여주는 포트폴리오형 문장 구조를 미리 설계할 것.

중요한 건 잘 만들기만이 아니라 계속 만들 수 있는 구조와 남에게 설명 가능한 서사를 동시에 쌓는 일이다.

내적 갈등 분석

6월의 내적 갈등은 꽤 선명하다.

회고

6월은 조용한 달. 거대한 런칭도 없고, 눈에 띄는 대외 발표도 없고, 와 하고 박수칠만한 이벤트도 적다.

폰트 간격, 세로 정렬, 줄 분리, 렌더링 안정화, 가사 정리, 메모 파일 축적이 하찮아 보이는 것들이 결국 다음 결과물의 척추가 되었으면 좋겠다.

예쁘게 포장된 완성본은 아니어도, 다음 달의 자신이 다시 들어와 작업을 이어붙일 수 있는 현장을 남긴 6월이 되었음 좋겠다.

총평

크리에이티브와 테크놀로지를 같이 붙드는 일은 늘 모순적이다. 하나는 감각을 요구하고, 다른 하나는 구조를 요구한다.

6월은 그 둘이 서로 발목을 잡는 대신, 최소한 한 리듬 안에서 같이 움직일 수 있다는 가능성을 조금 보여줬다.

실패 로그를 지우지 않고, 메모를 남기고, 구조를 손보고, 다음 달의 자신이 덜 미치도록 바닥을 다져놓은 것. 그게 6월의 진짜 결과물이다.

7월

타임라인 요약

7월 초반은 기술적 짜증의 연속이었다. 여러 개의 비디오를 한 화면 안에서 자연스럽게 배치하는 일은 생각보다 훨씬 성가셨고, 미디어 삽입 구조를 확장하는 작업도 단순한 기능 추가가 아니라 레이아웃과 경험 전체를 다시 생각하게 하는 문제였다.

중반으로 넘어가면서 관심은 더 복합적으로 갈라진다. 한편으로는 Remotion과 kinetic typography, 오디오 분석, lyric timing 실험이 이어졌고, 다른 한편으로는 UX 프로젝트가 왜 방향을 잃는지, 포트폴리오를 어떤 구조로 써야 하는지, 좋은 리서치 문서란 무엇인지 같은 질문들이 문장으로 축적

이번 달의 진전은 거대한 런칭이나 완성품보다, 공들여 붙인 작은 연결점들에 있었다.

몰아치는 시험에 대비해 여름학기 동안 시험을 일단 쳐내니라 바뻤던 점들, 그리고 여러 변화점들.

인간관계의 갑작스런 손절, 분노, 관계와 인기에 대한 허탈함. 결국 나는 무엇을 원했던 건가 다시 한번 생각해보는 계기들.

그 분노가 엄청 이어져서 그런가,

Remotion 관련 메모들도 같은 결을 가진다. kinetic typography, 오디오 분석, RVC-less auto-align, lyric timing 실험은 겉보기엔 영상 효과 연구처럼 보이지만 실제로는 코드 기반 창작을 시스템으로 만들려는 시도였던듯 하다.

한 번 멋있게 나오는 장면을 만드는 것보다, 원하는 순간에 원하는 리듬으로 다시 불러낼 수 있는 구조를 만드는 쪽

시행착오와 미완의 프로젝트

오히려 미완과 시행착오로 가득했다. 멀티 비디오 레이아웃은 해결이라기보다 계속 조정 중인 난제였고, 자동화 파이프라인이나 커스텀 비디오 에디터 같은 더 큰 구상은 아직 본격적인 결과물로 닫혔다. 분명 다양한 템플릿을 개발하고 예전보다 많이 발전했는데 이렇다하게 보일만한 걸 보이는 게 힘들다.

이런 달의 피로는 묘하다. 실패가 거창하면 차라리 접거나 다시 시작하면 되는데, 7월의 문제들은 대개 작은 불편과 애매한 불안정성으로 남아 있다. 줄 맞춤 하나, 레이아웃 하나, 문서화 하나, 구조 하나. 밖에서 보면 별일 아닌데, 만드는 사람은 그 사소함 때문에 더 오래 시달린다.

감정 복기

7월의 정서는 번아웃과 오기가 한 몸으로 붙어 있는 상태. 작업량은 분명 적지 않았는데, 그것이 외부의 인정이나 명확한 시장 언어로 곧장 환원되지는 않는다는 현실감이 무척이랑 와닿았다.

“내가 잘하는 일”과 “업계가 알아듣는 말” 사이의 간극이 자주 드러난다. 순수미술, 데이터 감각, 프론트엔드, UX, 접근성, 영상 시스템 설계를 한 사람의 역량으로 묶으려 해도, 바깥은 여전히 도구 사용 연차나 직무명 같은 납작한 기준을 먼저 묻는다.

트랜지션을 모듈화하고, 포트폴리오 프레임을 다시 쓰고, UX에 대해 고민하는 내 모습을 보면 이 길을 접진 않은 듯 하다.

7월 작업 요약

템플릿, GSAP으로 갈아엎은 이야기

Remotion, 이거 참… “텍스트만 좀 바꾸자, “애니메이션 타이밍 0.5초만 당겨달라” 같은 요청이 올 때마다 내가 직접 코드를 까서 수정해야 하는 이런 방식은 너무 시간이 오래 걸렸다.

이럴 바엔 걍 내가 애프터 이펙트를 익히는 게 나으려나 싶기도 했다.

목표는 명확했다. “반복된, 그러니까 패턴화가 된 영상 모션에는 코드 한 줄 안 건드리고, 설정 파일 하나만 슥슥 고쳐서 원하는 비디오를 뽑아낼 수 있게 만들자.” 이 한 문장을 목표로 지난 몇 주간 벌인 디버깅(이라 쓰고 아무도 요청하지 않는 개삽질이라 읽는다) 기록을 여기에 남긴다.

처음엔 KNKVideo 프로젝트의 간단한 Editor 컴포넌트를 손보는 것부터 시작했다. 근데 시작부터 props 타입이 개판이고, 컴포넌트끼리 데이터를 어떻게 주고받는지 한눈에 들어오지도 않았다. Remotion이 기본적으로 제공하는 템플릿 구조가 파일도 너무 잘게 쪼개놓고, 애니메이션 로직도 interpolate나 useCurrentFrame 같은 걸로 복잡하게 얽혀있으니, 이건 뭐 내가 만들어 놓고도(ㅋㅋㅋㅋㅅㅂ) 유지보수하기가 빡셌다.

코드 누가 짰는지 참 드럽게 짰넼ㅋㅋㅋ…아 맞다, 내가 짰지…ㅅㅂ ㅠㅠㅠ

특히 애니메이션. styled-components랑 Remotion의 interpolate 함수를 섞어서 애니메이션을 만드니 코드가 그냥 지옥이 되더라.

// 예시: 기존의 복잡한 애니메이션 코드
const titleStyle: React.CSSProperties = {
  opacity: interpolate(frame, [0, 20], [0, 1]),
  transform: `translateY(${interpolate(frame, [0, 20], [50, 0], {
    extrapolateRight: 'clamp',
  })}px)`,
};

const subtitleStyle: React.CSSProperties = {
  opacity: interpolate(frame, [30, 50], [0, 1]),
  // ... 이런 식으로 애니메이션이 컴포넌트마다 흩어져 있었음
};

OldAnimation.tsx

파일 구조

ProjectRoot/
├── src/remotion/
│   ├── SalesPresentation/
│   │   ├── config.ts              ← 디자인 편집 영역
│   │   ├── SalesPresentation.tsx  ← 메인 컴포넌트
│   │   └── components/
│   │       ├── ContentSlide.tsx   ← 재사용 슬라이드
│   │       └── Background.tsx     ← 배경 컴포넌트
│   ├── TeamIntro/
│   │   ├── TeamMemberSlideGsap.tsx ← GSAP 기반 슬라이드
│   │   └── TeamIntroSequence.tsx   ← 시퀀스 컴포넌트
│   └── utils/
│       ├── useGsapTimeline.tsx    ← GSAP 훅
│       └── CaptionRenderer.tsx    ← 자막 렌더러
└── public/static/
    ├── audio/
    ├── images/
    └── captions/

다이어그램

위에서 말한 모든 내용들을 다이어그램으로 요약하면 대충 이러하다ㅋ.ㅋ

graph TD
    A[Config.ts - 디자인 편집 영역] --> B[Template Component]
    B --> C[GSAP Timeline Hook]
    C --> D[Animation Refs]
    
    E[Series Component] --> F[Individual Slides]
    F --> G[Reusable Slide Component]
    G --> H[Props Interface]
    
    I[Audio/Caption Files] --> J[Caption Renderer]
    J --> K[Style Props]
    
    A --> L[Aspect Ratio Styles]
    L --> M[Responsive Layout]
    
    subgraph "Data Flow"
        N[slidesData Array] --> O["map() → Series.Sequence"]
        O --> P[Individual Slide Props]
        P --> Q[Rendered Components]
    end

발견한 이슈들 - 요약과 해결책

다른 관련 포스팅을 보고 싶다면