<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397092/Use%20Case/Screenshot_2025-06-20_at_1.24.47_PM_gjdrl1.png" caption="INFCON 2024 Key Visual & Inflearn Banners 이병기" />

## INFCON 2024 Key Visual & Inflearn Banners  
**이병기 (Inflab 프로덕트 디자이너)**

Inflab은 매년 IT 전문가들이 한자리에 모이는 오프라인 컨퍼런스인 **INFCON**을 개최합니다. 2024년에는 기존 개발자 중심에서 벗어나 디자이너, PM, PO까지 역할 범위를 확장해 제품 개발의 전 과정을 아우르도록 기획했습니다. 규모 또한 대폭 확대해 2,000명 이상의 참석자를 목표로 했습니다. 저는 이번 행사에서 키 비주얼과 컨퍼런스 분위기 전체를 설계하는 역할을 맡았습니다. 핵심 키워드는 **확장과 확산**이었습니다.

이 추상적인 키워드를 시각적으로 풀어내기 위해 ‘무한한 우주’, ‘블랙홀과 웜홀’, ‘급속히 팽창하는 에너지’ 등의 메타포를 고민했습니다. 곧 정적인 이미지로는 한계가 있다는 걸 깨달았고, 동적이고 인터랙티브한 디자인이 필요했습니다. 전통적인 After Effects와 Lottie 플러그인 워크플로우는 빠른 반복 작업에 비해 속도가 느리고 무거웠기 때문에, 더 빠르고 실험적인 **Phase**를 선택했습니다.

결과는 매우 만족스러웠습니다. 이벤트 페이지는 방문자가 몰리면 부하가 걸리기 쉽지만, json으로 내보낸 애니메이션은 끊김 없이 안정적으로 재생되었고, 벡터 기반 그래픽은 대형 LED 화면에서도 완벽하게 확장되었습니다.

사실 Phase 사용은 이번이 처음이 아닙니다. 한국 출시 직후 진행된 **Phase 챌린지**에 참여하면서 실제 서비스에 활용할 만한 퀄리티를 확인했고, 이후에도 Inflearn 랜딩 페이지에서 추상적인 개념을 효율적으로 전달할 때마다 Phase를 사용해왔습니다.

---

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397497/Use%20Case/Screenshot_2025-06-20_at_1.31.32_PM_gs06ki.png" caption="Inflearn App - 식물 키우기 온보딩 박유리" />

## Inflearn App - 식물 키우기 온보딩  
**박유리 (Inflab 프로덕트 디자이너)**

Inflearn 앱에는 매일 학습 습관을 자연스럽게 만들어 주고 유지율을 높이기 위한 **식물 키우기** 시스템이 도입되었습니다. 사용자는 학습 활동으로 식물을 키우고, 일정 시간이 지나면 열매를 수확하여 보상을 받습니다. 이렇게 새로운 기능을 직관적으로 이해하고 참여 의지를 높이기 위해 온보딩 애니메이션이 필요했습니다.

가장 중요한 목표는 위젯 설치 유도였는데, Android와 iOS의 설치 플로우가 달라 플랫폼별 맞춤 흐름이 필요했습니다. 긴 텍스트 설명으로 사용자를 피로하게 하기보다, **Phase**를 활용해 7~8초 내에 모든 메시지를 시각적으로 전달했습니다. 가벼운 .json 포맷 덕분에 로딩 속도도 빠르고, 실제 앱에서도 애니메이션이 매끄럽게 작동했습니다.

---

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397689/Use%20Case/Screenshot_2025-06-20_at_1.34.42_PM_msnnt7.png" caption="Rallit - My Log 기능 온보딩 김보경" />

## Rallit - My Log 기능 온보딩  
**김보경 (Inflab 프로덕트 디자이너)**

**Rallit**(링크)은 커리어 중심의 채용 플랫폼으로, 사용자가 자신의 경험, 스킬, 연봉 데이터를 기반으로 맞춤형 커리어 인사이트를 얻고 더 나은 기회를 찾을 수 있도록 돕습니다. 기업은 이 데이터를 활용해 적합한 인재를 찾고 연결할 수 있습니다.

‘My Log’ 기능은 사용자가 자신의 커리어 여정을 기록하고 연봉 그래프 등을 통해 시각적으로 확인할 수 있게 도와줍니다. 그러나 기능이 UI 깊숙이 숨겨져 있었고, 찾더라도 바로 로그인 모달이 떠서 사용자가 흥미를 느끼기 어려웠습니다. 그래서 **Phase**로 기능 소개 온보딩 애니메이션을 제작해 사용자가 쉽게 이해하고 자연스럽게 사용할 수 있도록 했습니다.

---

## ✅ Why Phase

#### 우리 팀이 Phase를 좋아하는 이유

- **애니메이션의 힘**  
  추상적인 개념 전달이나 온보딩과 같은 특정 사용자 플로우 안내에서 애니메이션은 항상 텍스트나 이미지보다 효과적입니다. 한 번의 부드러운 시퀀스로 모든 메시지를 전달할 수 있습니다.

- **직관적이면서도 강력한 기능**  
  키프레임 애니메이션 시스템이 After Effects보다 훨씬 가볍고 직관적입니다. Figma 프로토타이핑에 익숙한 디자이너라면 누구나 쉽게 접근해 바로 프로덕션 퀄리티의 결과물을 만들 수 있습니다. 파일 복제 기능 덕분에 라이트/다크 모드 버전 제작도 간편합니다.

- **효율적인 내보내기 옵션**  
  .json(Lottie), .lottie, .dot 포맷은 마이크로 인터랙션과 웹 애니메이션의 사실상 표준이 되었습니다. 웹 성능을 중시하는 디지털 프로덕트 디자이너에게는 Lottie가 가장 효율적인 선택입니다.

- **한국 사용자 친화적**  
  Phase Korea 팀이 빠른 피드백과 한국어 학습 리소스를 제공해 도입이 쉽습니다. 글로벌 툴이지만 국내 사용자 커뮤니티도 활발해 현지화된 환경에서 편안하게 사용할 수 있습니다.


inflearn_logo.svg

Inflearn이 Phase를 활용해 디자인과 애니메이션 워크플로우를 빠르게 혁신하는 방법

Pitcrew는 **Pillo**라는 복약 알림 앱을 개발하고 있습니다. 약을 자주 깜빡하거나 복약 관리가 번거로운 사람들을 위해 설계된 앱입니다. 여러 가지 약을 동시에 복용해야 하는 사용자들이 꾸준히 복약 루틴을 유지할 수 있도록 돕고 있습니다. 현재는 북미 시장을 중심으로 서비스를 제공하고 있습니다.

2025년, 저희는 새로운 미션을 세웠습니다:  
**"만성질환 복약 관리를 쉽고 즐겁게 만들어 최적의 치료 효과를 달성하자."**  
이를 위해 게이미피케이션, 캐릭터 디자인, 모션 요소를 사용자 경험에 자연스럽게 녹여내는 방법을 고민하다가, 아주 적절한 시점에 **Phase**를 만나게 되었습니다. 단순히 기능만 해결하는 데 그치지 않고, 사용자에게 브랜드 경험을 강화해주는 즐거운 인터랙션을 만드는 것이 저희의 목표입니다.


## 1) 온보딩 알람 설정 애니메이션

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398120/Use%20Case/pillo-loading-sm_spgyzk.gif" caption="온보딩 알람 설정 애니메이션" />

**Remix 링크**

[**https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee**](https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee)

온보딩 알람 설정 애니메이션은 이러한 접근 방식을 잘 보여줍니다. 이전에는 기본적인 시계 애니메이션만 사용했지만, 캐릭터의 잠재력을 충분히 활용하지 못했었습니다. 이번에는 **Pillo 캐릭터**가 직접 시계 바늘을 돌려 알람 시간을 맞추도록 만들어, 사용자가 알람 설정이 완료되었음을 직관적으로 확인할 수 있도록 했습니다.

이 애니메이션은 사용자가 선택한 시간에 따라 실시간으로 반응하여 설정이 올바르게 저장되었음을 자연스럽게 알려줍니다. 단순한 로딩 화면 대신 캐릭터가 알람을 준비하는 모습을 보여줌으로써 기능에 대한 신뢰감을 높이고 감성적인 브랜드 연결감을 만들어냅니다. 그 결과는 데이터로도 증명되었습니다: 신규 사용자 이탈률이 크게 감소했고 첫 사용 경험 만족도가 눈에 띄게 향상되었습니다.


## 2) 하트 선물 상자 애니메이션

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398110/Use%20Case/Gift_wvg3xv.gif" caption="하트 선물 상자 애니메이션" />

**Remix 링크**

[**https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce**](https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce)

Phase를 활용해 하트 보상 애니메이션도 제작했습니다. 사용자가 선물 상자를 열 때 기분 좋은 순간을 선사하기 위해, 상자가 열리고 하트가 튀어나오는 과정을 가볍고 직관적인 애니메이션으로 구현했습니다. 덕분에 보상 경험은 더욱 즐겁고 몰입감 있게 전달되었고, 제작 효율성도 유지할 수 있었습니다.

## Phase가 가장 인상 깊었던 점

Phase가 특히 인상 깊었던 이유는 바로 **빠르고 가볍다는 것**입니다. 전반적인 제품 경험을 혼자 담당하는 디자이너로서 불필요한 반복 작업을 줄이고 임팩트 있는 작업에 집중해야 했습니다. After Effects는 간단한 애니메이션을 만들기엔 너무 무겁고 비효율적이었어요. Phase는 벡터 기반으로 가볍고 반응성이 뛰어나 모바일 인터랙션에 최적화되어 있습니다. 인터페이스도 직관적이어서 기본적인 모션 경험만 있으면 바로 시작할 수 있고 별도의 학습 곡선도 필요 없습니다.

Phase 덕분에 저희가 추구하는 "복약 관리를 쉽고 즐겁게!"라는 비전을 실현할 수 있었습니다. 앞으로도 더 많은 사용자 접점에서 Phase를 적극 활용할 계획입니다.

📱 **Pillo 앱 다운로드**  
[https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care](https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care)

🌐 **Pillo 공식 웹사이트**  
[https://www.angrypillbox.com/](https://www.angrypillbox.com/)


small_image 1 (1).png

thumbnail_image 1 (1).png

image 1 (1).png

AngryPillbox가 Phase를 활용해 모션 디자인 시스템을 한층 업그레이드하는 방법

Phase를 사용하면 인터페이스 디자이너가 빠르고 쉽게 생동감 넘치는 애니메이션을 제작할 수 있어 디자인의 전체적인 시각적 매력을 한층 더 높일 수 있습니다!

에바 쳉

large_Eva-min.jpg

medium_Eva-min.jpg

small_Eva-min.jpg

thumbnail_Eva-min.jpg

Eva-min.jpg

프리랜서

복잡한 애니메이션 툴과 달리 Phase는 UI/UX 디자이너에게 매우 직관적입니다. 손쉽게 제작을 할 수 있습니다.

보울론 왕

medium_IMG_6650 (1).jpg

small_IMG_6650 (1).jpg

thumbnail_IMG_6650 (1).jpg

IMG_6650 (1).jpg

애니메이터 @ PoMotion

UX 애니메이션은 어려울 수 있습니다. 애니메이션을 처음부터 새로 제작하려면 시간이 많이 걸리고 도구도 너무 복잡합니다. 하지만 Phase는 사용자 친화적인 인터페이스와 쉬운 워크플로우로 눈이 계속 가네요.

알렉스 KW 첸

thumbnail_Alex Chen Profile Pic.jpeg

Alex Chen Profile Pic.jpeg

UIUX 디자이너 @ TSMC

hero.title

case_study_title

Inflearn이 Phase를 활용해 디자인과 애니메이션 워크플로우를 빠르게 혁신하는 방법

AngryPillbox가 Phase를 활용해 모션 디자인 시스템을 한층 업그레이드하는 방법

testimonial_title

에바 쳉

프로토타이핑 시작하기

제품

프로토타이핑

애니메이션

공동 작업

코드 내보내기

Figma 플러그인

학습하기

튜토리얼

사례 연구

자료

소개

채용

커뮤니티

릴리즈 노트

자주 묻는 질문

규정

개인정보 취급방침

서비스 약관