[내일배움캠프 본캠] 6/27 TIL

Framer 4일차

 

1. Top Button 구현하기

Top Button이란?

Top button(탑 버튼)은 주로 웹사이트에서 사용자가 페이지의 하단에 있거나 긴 페이지를 스크롤하여 내려갔을 때, 클릭하면 페이지의 최상단으로 빠르게 이동할 수 있도록 만들어 놓은 버튼.

이런 점이 좋아요

• 편의성 증대: 긴 페이지를 한 번에 최상단으로 이동하여 사용자에게 편의를 제공합니다.
• 사용자 경험(UX) 향상: 사용자의 페이지 탐색 효율성을 높여줍니다.
• 시간 절약: 긴 스크롤을 하지 않아도 되어 빠르게 원하는 지점으로 이동할 수 있습니다.

 

2. Mouse Cursor 만들기

Mouse Cursor란?

**Mouse Cursor(마우스 커서)**는 화면 위에서 마우스의 위치를 시각적으로 나타내는 아이콘이나 포인터를 말합니다. 사용자가 마우스를 움직이면 이 커서가 함께 이동하며 현재 위치를 표시하고 사용 가능한 동작을 안내합니다.

이런 점이 좋아요

• 위치 안내 : 사용자의 마우스 위치를 화면에서 보여줍니다.
• 인터랙션 안내 : 클릭 가능한 요소 위에서 손가락 모양이나 링크 모양으로 변하여 클릭할 수 있음을 나타냅니다.
• 상태 피드백 제공 : 작업 처리 중일 때는 로딩 상태(스피너나 모래시계)로 변경되어 시스템 상태를 사용자에게 알려줍니다.

 

 3. Lottie(로띠) 연동하기

Lottie(로띠)란?

Lottie는 JSON 기반의 벡터 애니메이션 파일 형식입니다. After Effects에서 만든 애니메이션을 Bodymovin 플러그인을 통해 JSON으로 내보내고, 이걸 웹, iOS, Android, React Native, Windows 등 다양한 플랫폼에서 실시간 렌더링할 수 있게 해 주는 기술입니다.

이런 점이 좋아요

• 초경량 : GIF, MP4에 비해 훨씬 작은 파일 크기. 예를 들어 GIF 128 KB라면 Lottie JSON은 약 31 KB, dotLottie였으면 8 KB 정도로 압축 가능합니다.
• 무한 확장성 : 벡터 기반이라 해상도에 상관없이 선명하게 확대/축소 가능합니다.
• 크로스 플랫폼 지원 : 하나의 JSON 파일로 iOS, Android, 웹, React Native 같은 다양한 플랫폼에서 똑같이 작동합니다.
• 상호작용 가능 :벡터기반의 코드베이스로 클릭, 스크롤 등 사용자 입력에 반응하도록 애니메이션을 제어할 수 있습니다.
• 디자이너 → 개발자 핸드오프 용이 : JSON 파일로 바로 Export가 가능하며, 개발자는 Lottie 라이브러리로 바로 렌더링만 하면 사용이 가능합니다.
• 무료 에셋 : 다양한 무료 에셋이 많아서 MVP에 사용하기 좋아요.

 

 4. Spline(스플라인) 3D 연동하기

Spline(스플라인)이란?

웹 기반 3D 디자인 툴로, 디자이너가 코드 없이 인터랙티브한 3D 콘텐츠를 만들 수 있게 해주는 도구입니다. 피그마, 프레이머, 비전 프로, 앱 빌드 등 다양한 플랫폼에 연동이 가능합니다.

📌 주요 특징:

• 실시간 협업 지원 (Figma처럼)
• 3D 모델링, 머티리얼 설정, 애니메이션, 인터랙션 설정 가능
• 웹, 앱, 프레이머(Framer) 등에 내장 가능 (embed 형태 또는 export)
• React/Three.js 기반으로 코딩 없이도 프로토타입 수준의 3D 앱 구현 가능

🎯 사용 예시:

• 3D 제품 뷰어 / 랜딩페이지 히어로 섹션 / 인터랙티브 버튼
• 포트폴리오, 광고, NFT 플랫폼 등에서 자주 활용됨

이런 점이 좋아요

• 간소화된 3D 툴 : 모델링, 머티리얼 설정 등 블렌더, 시포디보다 쉽고 편하다는 장점이 있습니다.
• 크로스 플랫폼 지원 : React/Three.js 기반으로 코딩 없이도 프로토타입 수준의 3D 앱 구현이 가능합니다. Web, App, Figma, Framer, Vision Pro 등 다양한 매체에 연동이 가능합니다.
• 무료 에셋 : 다양한 무료 에셋이 많아서 MVP에 사용하기 좋아요.
• AI 기능 : 베타 수준이긴 하지만, AI를 통한 모델링도 가능합니다.

 

5. 스크롤 별 인터랙션 구현하기

인터랙션 디자인(Interaction Design, IxD)이란?

사용자가 제품을 쉽고 즐겁게 사용할 수 있게 만드는 인터페이스의 동작 설계를 의미합니다. 즉, 사용자가 클릭, 스크롤, 탭, 제스처, 마우스오버 등을 했을 때, 화면이나 시스템이 이에 반응하는 것입니다.

이런 것이 중요해요.

• 피드백 (Feedback) – 사용자 행동에 시스템이 반응 (버튼 누를 때 색 변화 등)
• 컨트롤 (Control) – 사용자가 조작할 수 있는 느낌 제공
• 가시성 (Visibility) – 어떤 동작이 가능한지 알려줌
• 일관성 (Consistency) – 이전 행동과 결과의 예측 가능성
• 내비게이션 (Navigation) – 쉽게 돌아가고, 어디에 있는지 알 수 있게 설계

 

6. CMS 레이아웃 변경 

복습 :: CMS란?

CMS (Content Management System)는 전문적인 코딩 없이도 웹 콘텐츠를 생성, 수정, 배포, 관리할 수 있게 도와주는 시스템 또는 플랫폼입니다.

즉, 디자이너, 기획자, 마케터처럼 비개발자도 콘텐츠를 쉽게 다룰 수 있도록 해주는 도구입니다.

 

7. CMS 공유하기 기능 제작 

Framer에 코드 컴포넌트는 왜 있는걸까?

Framer는 원래 웹빌더 툴이 아니었다.

개발자를 위한 프로토타이핑 프레임워크인 Framer.js를 시작으로 오랫동안 React가 가능한 디자이너와 개발자의 고급인터랙션 도구툴로 사용되었어요. 하지만 코드 중심 구조는 대부분의 디자이너에게 너무 어렵고, 비주얼 중심의 노코드 툴이 강화되는 시장상황에 따라 2020년 피봇팅하게 됩니다.

그래서 여전히 코드 오버라이드나 CMS 연동, 커스텀 컴포넌트 등 개발자 친화 기능이 많은 거예요!