2024년 04월 22일
2

Frames 실험기

프론트엔드
KKingmo

Changmo Oh

@KKingmo

전체 글 보기

Frames 실험기

Farcaster에서 요즘 제일 재밌는 기능 중 하나가 Frames다.
Frames 소개 문서

기존 Open Graph Protocol(Facebook이 만든 콘텐츠 표준)을 확장한 형태로, 링크 미리보기처럼 생겼지만 그 안에서 버튼으로 사용자 상호작용까지 가능하다.
이미지 카드처럼 보이는데 누르면 반응하고, 그에 따라 다음 화면이 바뀌는 인터랙티브 카드라고 보면 된다.

그냥 새롭고 재밌어 보여서 가볍게 맛 좀 봤다.
평소 잘 쓰던 warpcast 안에서 서브 앱처럼 동작하는 쓸만한 Frame 하나쯤 만들어보고 싶었고,
그래서 프론트는 frog.fm, 데이터 수집은 neynar API 써서 몇 개 만들어봤다.


만들 때 쓴 도구들

  • frog.fm – 프레임 만들기 전용 프론트엔드 프레임워크 (Next.js 기반)
  • neynar API – Farcaster 유저/캐스트 정보 가져오는 API

Docs가 워낙 잘 돼 있어서 생각보다 수월하게 만들 수 있었다.
나온 지 얼마 안 된 기술치곤 꽤 괜찮았다.


만든 Frames

실제로 warpcast 안에서 돌아가는 카드들이다.
버튼 누르면 바로바로 반응 오고, 댓글로 피드백도 바로 받아볼 수 있어서 꽤 재밌었다.

1. 나랑 맞팔 안 된 사람 찾기 Frame

자신과 맞팔로우 안되어 있는 사용자를 찾는 프레임(warpcast)
github-구현코드


2. 내 인기 Cast Top 10 보여주는 Frame

자신의 인기있는 top 10 cast 보여주는 프레임(warpcast)
GitHub 구현 코드 보기


3. 나한테 Like + Recast + Tip 전부 준 사람 보여주는 Frame

자신에게 like, recast, tip을 모두 준 사용자를 보여주는 프레임(warpcast)


짧은 소감

댓글로 사람들 반응 보는 재미가 쏠쏠했다.
덕분에 기존 소셜미디어랑은 또 다른 재미가 있다는 걸 느꼈고,
기술적으로도 “이런 식으로 인터랙션 UI를 카드에 넣는 게 가능하구나” 싶은 깨달음도 있었다.

기술이 아직 초창기라 불편한 점도 있지만,
이게 나중에 어떻게 발전할지 좀 기대된다.
짧은 Frames 탐험일지는 여기서 마친다.