SANGYUL LEE — Technical Artist · UI Motion

CORE COMPETENCY

세 가지 관점, 하나의 목표 — 플레이어가 느끼는 품질

이펙트·UI연출·테크니컬 아트는 결국 같은 질문에 답하는 일입니다. "이 순간이 플레이어에게 어떻게 느껴지는가?"

VFX 아티스트

REAL-TIME VFX

0.08초짜리 임팩트 플래시부터 150프레임 궁극기 루프까지, 게임 템포에 맞는 이펙트 타이밍을 설계합니다.

언리얼 나이아가라 · 캐스케이드 스킬 FX + 시퀀서 시네마틱 — 라이브 MMO 궁극기·컷인 연출
Unity VFX Graph · Shuriken 전투/보상 이펙트 140+종 제작
플립북 텍스처 설계 — 10×3 ~ 10×15 그리드 시트 규격화 및 최적화
모바일 오버드로우 예산 안에서의 가산/알파 블렌딩 트레이드오프

UI 연출자

UI MOTION DESIGN

버튼 하나의 눌림부터 보상 획득의 카타르시스까지, UI 위에서 벌어지는 모든 움직임을 연출합니다.

언리얼 UMG 라이브 UI 연출 — 블소2 · 블소 NEO · 리니지 W/2M · 배틀 크러쉬 (강화·메뉴·씬 연출)
UIParticle(uGUI) 기반 재화 비행·획득 연출 — 마스킹/소팅 이슈 해결
DOTween 시퀀스 연출 + UI 전용 커스텀 셰이더 (Grayscale, RGBMask Dissolve)
CSS/웹 HUD 모션 — 체력바 트랜지션, 레벨업 카드 연출 (HTML5 게임)

테크니컬 아티스트

TA / PIPELINE

아티스트가 만든 것을 측정 가능하게, 반복 작업을 자동화 가능하게 만듭니다.

HLSL·머티리얼 제작 — 언리얼 머티리얼 에디터 & Unity URP 커스텀 셰이더 (Wrapped Lambert, Fresnel Rim, Shockwave)
VFX 자동 캡처 파이프라인 — 에디터 배치 레코더 + Node.js 추출기 (Unity·UE5 양 엔진 지원)
Unity YAML 파싱 → 텍스처 추적 → 스프라이트시트 자동 생성 (TypeScript)

LIVE SERVICE CREDITS — UNREAL ENGINE

언리얼 엔진 라이브 대작 — 실제 연출 작업

모두 언리얼 엔진 기반 타이틀입니다 — 세븐나이츠 2 · 블레이드&소울 2 · 블레이드&소울 NEO · 리니지 W · 리니지 2M · 배틀 크러쉬의 라이브 서비스에서 UMG UI 연출과 나이아가라·캐스케이드 스킬 FX, 시퀀서 시네마틱을 직접 작업했습니다. 아래 모든 캡처는 본인 작업 쇼릴 영상에서 발췌한 것이며, 각 카드의 버튼으로 영상 전체를 볼 수 있습니다.

세븐나이츠 2

UNREAL ENGINE · 나이아가라·캐스케이드 — 스킬 FX · 시퀀서 시네마틱 · HUD UI

▶ 스킬 FX 쇼릴 ▶ UI 연출 쇼릴

세븐나이츠2 인게임 HUD UI 연출 — 인게임 — HUD UI 연출 · 전투 중 스킬 FX (난전 시인성 관리)

궁극기 3막 설계 — 캐스팅(기대) → 임팩트(폭발) → 여운(잔광). 임팩트는 짧을수록 강하다는 원칙으로 타이밍 배분
시퀀서 컷인과의 협업 — 컷인 FOV 변화·블러가 이펙트 밀도를 보완, 파티클 수를 늘리지 않고 체감 화력을 올림
속성별 모션 언어 — 화염·신성·암속성 스킬마다 전개 곡선과 잔광 톤을 분리해 캐릭터 개성을 강화

블레이드 & 소울 2

UNREAL ENGINE · UMG — 메뉴 · 강화 · 시즌 이벤트 · 씬 연출

▶ 블소2 UI 연출 쇼릴

수묵의 모션 언어 — 강화 성공의 먹선 소용돌이처럼, UI 등장이 '배치'가 아니라 '획'으로 느껴지는 동양적 커브
확정 순간의 무게 — 일상 인터랙션은 절제하고, 강화 성공 같은 확정 순간에만 화면 전체 연출을 허용
씬 연출 — 운명의 성도 별자리, 야루의 상자 등 시스템 화면을 세계관의 한 장면으로

리니지 W

UNREAL ENGINE · UMG — 장비창 · 이벤트 메세지 · 대화 UI

리니지 W 캐릭터 대화 UI 연출 — 이벤트 메세지 · 캐릭터 대화 UI 연출

절제가 만드는 무게감 — 다크 톤 위에 금속 질감의 미니멀 모션, 정보 밀도가 높아도 시선이 흐트러지지 않게

▶ 쇼릴에서 보기

리니지 2M

UNREAL ENGINE · UMG — 강화 · HUD · 뽑기 · 컬렉션

리니지 2M HUD·퀘스트 완료 연출 — HUD 연출 · 퀘스트 완료 연출

▶ 쇼릴에서 보기

블소 NEO · 배틀 크러쉬

UNREAL ENGINE · UMG — 인벤토리 · 스탯 슬롯 · 메인메뉴 · 튜토리얼

블레이드앤소울 NEO 인벤토리 연출 — 블소 NEO — 인벤토리 · 스탯 슬롯 연출

톤의 스펙트럼 — MMO 다크 톤부터 팝한 캐주얼까지, IP에 맞춰 모션 언어를 전환

▶ 쇼릴에서 보기

INTERACTIVE VFX LAB

이펙트는 멈춘 그림이 아닙니다 — 직접 재생해 보세요

아래 모든 카드는 실제 게임 프로젝트에서 추출한 프레임 시퀀스/스프라이트시트를 이 페이지의 자체 플립북 엔진으로 재생하는 것입니다. 카드를 클릭하면 일시정지되고, 배속을 바꿔 타이밍 설계를 확인할 수 있습니다.

LIB 자체 파이프라인으로 캡처한 레퍼런스 (다양한 출처 — 도구의 처리 능력 증명) IN-GAME 직접 제작한 인게임 이펙트 UI · WS 직접 제작

TECHNICAL ART

방금 보신 카드들은 손으로 만든 게 아닙니다

위 VFX Lab의 시퀀스들은 제가 만든 자동 캡처 파이프라인의 산출물입니다. 게임 속 이펙트 3,815개를 자동 캡처하고, 그중 3,087개를 13개 카테고리로 자동 분류해 검색 가능한 라이브러리로 만들었습니다. "이 이펙트 다른 게임에서 어땠더라?"라는 질문에 3초 안에 답하는 시스템입니다.

STEP 1 — CAPTURE

VfxBatchRecorder.cs

Unity Editor 상주 레코더. _VfxBatchTrigger.json 감지 → VFX 프리팹을 스폰·재생·프레임 캡처. 해상도/FPS/길이 설정 가능.

STEP 2 — EXTRACT

vfx-sprite-extractor

TypeScript CLI. Unity YAML/.meta 파싱 → GUID 맵 → 텍스처 추적. UE5 프로젝트도 지원.

STEP 3 — PROCESS

Auto-Trim + Sheet Export

투명 여백 자동 트림 → N×N 그리드 자동 산출 → 시트 출력(원본+50%). Sharp 기반 이미지 처리.

STEP 4 — SERVE

VFX Library v1→v3

캡처 3,815개 → 분류 3,087개 검색·재생·추출 웹 뷰어. 3차에 걸쳐 자체 개량.

📐왜 만들었나

이펙트 레퍼런스 탐색이 작업 시간의 30%를 먹고 있었습니다. 게임별로 흩어진 이펙트를 한 번 캡처해서 영구 재사용 — 신규 프로젝트 무드보드 제작이 일 단위에서 분 단위로 줄었습니다.

🔁v1 → v3, 96.5% 경량화

v1(5.3GB 정적 HTML)은 무거웠고, v2(메타데이터+서버)는 관리성을 얻은 대신 느렸습니다. v3는 썸네일 분리·지연 로딩으로 코어를 184MB까지 경량화. 도구도 제품처럼 이터레이션합니다.

🧪이 포트폴리오도 산출물입니다

지금 보고 계신 페이지의 플립북 플레이어·시퀀스 재생·뷰포트 기반 재생 제어 모두 같은 파이프라인 철학으로 작성한 자체 제작 엔진입니다.

VFX Sprite Library v3 — 실제 화면 직접 설계·구현한 이펙트 레퍼런스 도구 · 라이브 데모 동봉

VFX Library v3 카테고리 화면 — 13개 카테고리 · 3,087 이펙트 자동 분류 — 검색 · 일괄 재생 · 원클릭 추출

VFX Library v3 Explosion 카테고리 — 60개 동시 재생 — Explosion 카테고리 608종 — "Play All"로 60개 동시 재생, 알파 배경 토글, ZIP/PNG 원클릭 추출

_VfxBatchTrigger.json — 아티스트용 캡처 명세

// 아티스트는 JSON에 프리팹 경로만 적으면 됩니다.
// 에디터 상주 레코더가 감지해서 알아서 캡처합니다.
{
  "prefabs": ["Assets/.../VFX.BloodSurge.prefab"],
  "width": 512, "height": 512,
  "fps": 30, "duration": 5.0,
  "background": "transparent"
}

VfxBatchRecorder.cs — 프레임 캡처 루프 (발췌)

for (int f = 0; f < frameCount; f++)
{
    yield return new WaitForEndOfFrame();

    RenderTexture.active = rt;
    GL.Clear(true, true, new Color(0,0,0,0)); // 알파 보존
    cam.Render();
    readTex.ReadPixels(new Rect(0, 0, w, h), 0, 0);

    File.WriteAllBytes(
        Path.Combine(dir, $"frame_{f:D4}.png"),
        readTex.EncodeToPNG());
}

PROJECT 01

Blood Invasion

담당 — VFX 시스템 · UI 파티클 연출 · 커스텀 셰이더 · TA 전반 Unity 6 · URP 17 2D 타워디펜스 · 모바일

뱀파이어 테마의 모바일 타워디펜스. "피"라는 단일 테마를 122개 VFX 프리팹과 60+ 셰이더그래프로 변주하면서도 시인성을 잃지 않는 것이 과제였습니다. 적 9종(암살자·사냥꾼·창병·사제·마녀 등) 각각의 피격 이펙트를 속성 시스템으로 체계화했고, 전투의 핵심 보상 루프(혈액 오브 획득 → 제단 강화)는 UIParticle로 월드→UI를 끊김 없이 연결해 연출했습니다.

🩸속성 기반 VFX 아키텍처

VFX.Hit.* 50+ 변형을 적 타입별로 운영하되, 머티리얼·텍스처는 공유 풀에서 조합. 상태이상(화상·빙결·감전)은 VFX.Status* 계열로 분리해 중첩 표현이 가능하게 설계.

🌀커스텀 URP 셰이더 8종

RadialShockwave(충격파 왜곡), VerticalPannerWithSideFade(혈류 기둥), URPStylizedLava, UI용 RGBMask Dissolve 등 셰이더그래프로 안 되는 영역은 HLSL로 직접 작성.

✨UIParticle 보상 연출 — UI 프리팹 366종 운영

mob-sakai ParticleEffectForUGUI 기반. Shared/Prefabs/UI 366종(버튼·게이지·배지·재화 연출)을 단일 체계로 운영하며, 재화 비행 연출의 Canvas 소팅·마스킹 충돌을 해결하고 획득 타이밍에 게이지 펀치 스케일을 동기화.

RadialShockwave.shader — 극좌표 충격파 링 (URP HLSL, 직접 작성)

// 파티클 버텍스 컬러 알파를 '시간'으로 사용 → 머티리얼 복제 없이
// 파티클 시스템의 Color over Lifetime만으로 링 확산을 구동
float waveRadius = input.color.a;

// 극좌표 샘플링: 각도별로 반지름을 왜곡해 '유기적인' 링을 만든다
float2 polarUV = float2(dist, normalizedAngle) * _MainTex_ST.xy + _MainTex_ST.zw;
float radiusDistortion = (tex.r - 0.5) * _Distortion;
float distToWave = abs(dist - (waveRadius + radiusDistortion));

// 링 두께 + 전/후 에지 페이드 + 원형 마스크
float ringMask = 1.0 - smoothstep(0.0, _Width, distToWave);
float waveMask = ringMask * frontSoftness * backSoftness * circleMask;

인게임 캡처 — 전투 VFX 자체 배치 레코더로 캡처한 실제 인게임 이펙트

UI 연출 — 재화 획득 / 피드백 루프 uGUI 캔버스 위에서 재생되는 UIParticle 계열

플립북 텍스처 아틀라스 이펙트의 원재료 — 시트 설계도 함께 보여드립니다

Blood_splash_03 — 2048² 아틀라스

Blood_splash_05 — 2048² 아틀라스

Blood_splash_08 — 2048² 아틀라스

PROJECT 02

K2 — 블록 퍼즐

담당 — 게임필 FX · UI 연출 · 에디터 툴링 Unity · 모바일 퍼즐 라이브 운영 빌드

캐주얼 퍼즐에서 이펙트는 곧 게임필(game feel)입니다. 매치 한 번의 짧은 임팩트부터 주문 완료·시즌 진행 같은 보상 연출의 여운까지 — 모두 "플레이어의 손가락이 옳았다"고 말해주는 피드백으로 설계했습니다. 연출 제작과 함께, 아트·기획의 반복 속도를 끌어올리는 에디터 툴링을 담당했습니다.

⚡타이밍이 곧 설계

임팩트(~0.1s) → 보상(0.3~0.4s) → 무드 루프(2s)의 3계층 템포. 빠른 피드백은 짧고 강하게, 보상은 여운 있게.

🧰에디터 툴링 환경

FlyEffectTestMenu(연출 즉시 테스트), TMPFontResamplerWindow(폰트 리샘플), StageEditor(레벨 편집), AutoPlayEditor(자동 플레이 검증) — 아트·기획 반복 속도를 끌어올리는 도구들.

🚚라이브 빌드에 실린 연출

푸드트럭 테마 로비의 시즌 진행 HUD, 주문 보드의 접수·클리어 피드백 — 연출은 시안이 아니라 운영 빌드에서 검증됩니다.

라이브 빌드 — 인게임 Unity 실빌드 스크린샷

K2 로비 — 푸드트럭 테마 — 로비 — 푸드트럭 테마 · 시즌 진행 HUD

K2 인게임 — 주문 접수 퍼즐 보드 — 인게임 — 주문 보드 · 클리어 피드백 연출

PROJECT 03

WoolSaga (울사가)

1인 제작 — 기획 · 아트 디렉팅 · 셰이더 · VFX · UI 전부 Unity 6 + PixiJS 8 듀얼 빌드

털실 드래곤을 조작하는 캐주얼 퍼즐. 같은 게임을 Unity(네이티브)와 PixiJS(웹) 두 갈래로 구현하면서, 플랫폼이 달라도 동일한 비주얼 아이덴티티를 유지하는 것이 핵심 과제였습니다. Unity 쪽은 양털 질감을 위한 커스텀 셰이더를, 웹 쪽은 44프레임 플립북 VFX를 제작했습니다.

🐑WoolFluff 셰이더 — "양털은 PBR로 안 됩니다"

표준 Lit은 양털을 광택 플라스틱처럼 만듭니다. Wrapped Lambert(부드러운 명암 경계) + Fresnel Rim(실루엣의 보풀 빛) + 무광 처리로 섬유 질감을 표현. ShadowCaster/DepthOnly 패스까지 URP 완전 대응.

💥런타임 파티클 — ExplosionFX

프리팹 없이 코드로 생성하는 2계층 파티클(보풀 퍼프 + 스파크). 색상 틴트를 게임 로직(실 색깔)과 연동해 9색 변형을 에셋 추가 없이 처리.

🖥️코드 기반 HUD 빌더

HudController.cs — HP/실타래 게이지, 퍼즐 그리드, 승패 모달을 전부 런타임 생성. 와일드카드 펄스 링 등 상태 연출 포함. 프리팹 머지 충돌 없는 UI 워크플로.

WoolFluff.shader — 핵심 라이팅 (URP HLSL, 직접 작성)

// Wrapped Lambert — 명암 경계를 부드럽게, 섬유 내부의 빛 번짐을 모사
float wrapped = saturate((NdotL + _Wrap) / (1.0 + _Wrap));

half3 diffuse = baseRGB * mainLight.color * (wrapped * shadow + _AmbientStrength);

// Fresnel rim — 실루엣에서 밝게, 안쪽으로 감쇠.
// 림을 베이스 컬러로도 틴트해 "털 자체가 빛을 머금은" 느낌으로.
float fresnel = pow(1.0 - saturate(dot(N, V)), _RimPower);
half3 rim = fresnel * _RimColor.rgb * _RimIntensity * baseRGB;

return half4(diffuse + rim, _BaseColor.a);

웹 빌드용 플립북 VFX PixiJS에서 재생되는 프레임 시퀀스 — 여기서도 동일 엔진으로 재생 중

실제 빌드 — 인게임 PixiJS 웹 빌드 스크린샷

아트 디렉팅 테마 배경 · 캐릭터 · 타이틀 시네마틱

타이틀 시네마틱 — 드래곤

PROJECT 04

던전 서바이버스 (Dungeon Survivors)

1인 제작 — HUD 모션 · 전투 연출 · 시스템 전부 Phaser 3 · HTML5 8캐릭터 · 5존 · 풀 메타 루프

뱀서라이크 장르의 HTML5 게임. 수백 마리 적이 쏟아지는 화면에서 UI는 0.12초 트랜지션으로 즉각 반응하되 전투를 가리지 않아야 합니다. 캔버스(전투)와 DOM(HUD)을 분리해 각자의 최적 기술로 연출했습니다 — 체력/경험치 바는 CSS 그라디언트+트랜지션, 레벨업 룰렛은 DOM 오버레이, 전투 이펙트는 Phaser 파티클.