*수기로 작성한 메모에 의존해 작성한 후기글로 모호한 부분이 있을 수 있습니다. 혹 이슈가 있으면 댓글로 알려주세요:)
지난 11월 27일, 프레이머 x 29xm Seoul Meetup 에 다녀왔습니다.
거진 한 달이 지났지만... 당시에 배운 팁과 영감을 다시 떠올리고 정리하기 위해 이렇게 후기 글을 작성합니다.
밋업은 신청 하루 만에 100명이 넘게 몰린 만큼 많은 관심 속에서 진행되었습니다.
스피커 세션은 총 4파트로 이루어져있었습니다.
1. 정연지, 한지원 (29cm) : 이굿위크 프로젝트에서 프레이머의 도입
2. 안기현 (Wisetracker) : 프레이머로 시작하는 데이터 트래킹 (광고 성과측정, 유저 행동분석, 마케팅 오토메이션)
3. 장정훈 (LottieFiles) : 더 주목받는 웹사이트의 비밀소스: 모션 애니메이션
4. 최진용 (플랭) : 프레이머 Localization 실패기 (간체, 번체)
각 강연에서 들으면서 했던 메모와 생각을 아래에 정리했습니다.
1. 정연지, 한지원 (29cm) 이굿위크 프로젝트에서 프레이머의 도입
29cm팀은 기존의 콘텐츠 제작 툴을 Framer로 전환한 경험을 공유해주셨습니다. 이전에 사용하던 툴은 리뉴얼이 안되어있고 장기간 관리되지 않아 불편함이 컸습니다. 이에 따라 더 나은 대안을 찾고자 했습니다.
콘텐츠 제작 툴을 고를 때 가장 중요하게 생각했던 두 가지 원칙은 다음과 같습니다.
1️⃣ 우리가 만들지 않는다. (개발 제작 공수가 적게 들어야 한다.)
2️⃣ 브랜딩과 디자인에서 자유도를 높일 수 있어야 한다.
여러 노코드 웹빌더 서비스를 검토한 결과, Framer가 이 두 가지를 모두 충족한다는 결론을 내렸고, 그 선택은 틀리지 않았습니다.
그 결과로 제작 속도 기존 대비 50% 단축되었으며 -> 여유로운 작업이 가능해졌고 -> 이런 속도와 효율 덕분에 콘텐츠 발행량도 대폭 증가했습니다.
발표 후 진행된 Q&A 시간에서, 한 분이 흥미로운 질문을 던졌습니다.
“Framer는 디자이너가 퍼블리싱도 가능한 노코드 툴인데, 그렇다면 프론트엔드 개발자는 어떤 방식으로 협업에 참여하나요?”
29cm 팀의 답변에 따르면, 'Code Component'를 활용하는 지점이 협업의 주요 지점이라고 합니다.
디자인과 퍼블리싱을 넘어 실제 기능 구현이 필요한 부분에서 프론트엔드 개발자가 코드 컴포넌트를 활용해 지원합니다.
또한 Framer를 도입하며 가장 긍정적이었던 점으로 인터페이스가 친숙해 러닝커브가 낮은 점을 꼽아주셨는데, 저도 공감했던 포인트 였습니다. Framer는 피그마와 유사한 인터페이스를 제공해 UX/UI 디자이너들에게 친숙합니다. 덕분에 디자이너들 간의 적응 속도가 빨랐다고 합니다. 저도 처음 Framer를 접했을 때 직관적인 사용성과 효율성에 감탄했어서 공감이 갔습니다.
💡생각 와이어프레임이나 레이아웃 작업도 피그마 등 다른 툴을 거치지 않고 Framer에서 바로 진행하는지 궁금해서, 29cm 디자이너분께 따로 질문을 드렸습니다. 답변에 따르면, 브랜딩과 그래픽 작업은 다른 툴에서 진행하지만, 레이아웃 구성부터는 바로 Framer에서 작업한다고 하셨습니다.
저는 아직 Framer 사용이 익숙하지 않아 피그마에서 먼저 시도한 후 Framer로 옮기는 방식을 사용하고 있습니다. 조금 더 손에 익으면 바로 프레이머에서 작업할 수 있겠다고 생각했습니다.
2. 안기현 (Wisetracker) : 프레이머로 시작하는 데이터 트래킹 (광고 성과측정, 유저 행동분석, 마케팅 오토메이션)
두 번째는 Framer에서 어떻게 데이터를 분석할 수 있도록하는지였는데요, 밋업에 참가한 사람 중 과반수가 디자이너였기 때문에 친절하게 데이터 수집의 개념부터 설명해주셨습니다.
데이터 수집이란, 사용자들이 발생한 행동을 수집하는 일련의 과정입니다.
데이터를 확인하는 법은 크게 두 가지가 있습니다.
1️⃣ Event/Trigger 기반 분석: 특정 사용자 행동(예: 버튼 클릭)을 이벤트로 설정하고, 이 이벤트가 발생한 빈도를 확인하는 방법.
- 이런 이벤트를 설정하면 사용자가 어떤 UI 요소에 더 많이 반응했는지 확인 가능함.
2️⃣ 퍼널 분석: 사용자가 어떤 경로를 따라가면서 특정 단계에서 이탈하거나 전환하는지를 보여주는 분석 방식.
- 예를 들어, 페이지 방문 → 버튼 클릭 → 결제 단계의 퍼널을 설계하여 어디에서 사용자가 이탈했는지 파악할 수 있음.
Framer에서 코드 Override를 활용하면 디자이너도 손쉽게 데이터를 수집하고 분석할 수 있다고 강조하셨습니다. 방법도 간단하니 꼭 시도해 보라고 추천하셨는데요. 자세한 내용은 아래 링크에서 확인할 수 있습니다.
Tracking guide with Framer
안녕하세요, 똑똑한 데이터 활용을 향한 출발점이 될 와이즈트래커입니다. 궁금하신 사항을 남겨주시면 확인 후 빠르게 답변드릴게요.
www.wisetracker.co.kr
💡생각 데이터와 아직은 낯가리고 있던 중인데, 짧은 강의로 이해를 시켜주셔서 우선 감사했고 실제 운영할 때 한 번 꼭 넣어봐야겠다는 생각이 들었습니다.
3. 장정훈 (LottieFiles) : 더 주목받는 웹사이트의 비밀소스: 모션 애니메이션
적절한 모션은 차별화를 만들어내고 시선을 끄는 강력한 도구라는 점을 강조하셨습니다. 또한, Lottie Files를 Framer에 플러그인으로 간단히 추가하는 방법도 소개해 주셨습니다.
💡생각 적절한 모션은 이제 웹/UXUI 디자인 트렌드에서 필수 요소로 자리 잡은 것 같습니다. 피그마 -> 로티 플러그인만 사용해봤는데, 프레이머에서 쉽게 적용할 수 있구나 알게 되었습니다.
4. 최진용 (플랭) : view-height(vh)를 활용한 Scroll Variant / 프레이머 Localization 실패기
1.view-height(vh)를 활용한 Scroll Variant
1. 좌측의 고정 화면은 Component로 만들고, 컴포넌트안에 스크롤에 따라 나올 화면들을 차례대로 Variant로 지정해줍니다.
2. 우측 영역에 Scroll Section을 지정해줍니다.
3. 좌측 컴포넌트에 이제 스크롤 애니메이션 효과를 주기 위해, 우측 패널에서 Effect > Scroll Variant를 선택해 적용하고 Trigger: Section in view'로 설정, Variant를 Section과 매치해줍니다.
4. 우측 텍스트 영역의 높이를 사용자의 디바이스에 맞춰 높이를 설정하는 View-height로 설정해줍니다.
💡생각 아직 프레이머 초보인 제게는 조금 어려워보였지만...재밌는 효과라 한 번 도전해봐야겠다는 생각이 들었습니다.
찾아보니 스크롤 Variant를 활용하는 방법은 Framer 홈페이지의 Course안에서도 확인할 수 있어서, 발표와 아래 링크를 참고하면서 한번 따라해보려고 합니다.
Lesson: Scroll Variant — Framer Academy
Learn how to create engaging and dynamic phone content that adapts as you scroll through different sections.
www.framer.com
2.프레이머 Localization 실패기
Framer의 Localization 기능은 웹사이트의 콘텐츠를 여러 언어 버전으로 제공할 수 있는 기능입니다.
이 기능의 최대 장점은 각 나라 도메인(예: UXdesignerlog.com/kr, UXdesignerlog.com/jp)을 따로 설정하지 않아도 된다는 것입니다. 단일 도메인(예: UXdesignerlog.com)에서 원하는 언어를 다 관리할 수 있습니다.
하지만, 이런 편리한 기능을 왜 플랭팀을 포기했을까요?
플랭팀은 한국어를 영어/일본어/간체/번체로 로컬라이징하려고 했는데, 두가지 주요 시련에 부딪히게 됩니다.
1차 시련: 줄바꿈이 안된다.
- 언어마다 적절한 줄바꿈이 필요했지만, Framer는 이를 지원하지 않았습니다.
2차 시련: 언어별 폰트가 없다.
- 폰트의 용량이 크기 때문에 구글 웹폰트 중 본고딕으로 대응하려고 했으나, 언어별 폰트를 지원하지 않았습니다.
결국 릴리즈 일정이 우선이었기 때문에 국가별 도메인을 따로 디자인하고 적용하는 방식으로 타협했다고 합니다. 늘 그렇듯이 릴리즈가 우선이니까요ㅎㅎ
💡생각 실패기인만큼 현실적인 문제를 부딪치게 되는 디자이너들의 마음에 공감이 갔으며, 발표자분이 유쾌하게 풀어주셔서 재미있게 들었습니다. 프레이머가 업데이트 되어서 사용할 수 있게 되면 좋겠습니다.
마치며
각 강연에서 얻은 팁과 지식을 바탕으로 Framer를 더 깊이 활용해보고 싶다는 생각이 들었습니다. 유용한 경험을 나눠주신 모든 발표자분과 좋은 추억을 만들어준 프레이머에 감사드립니다. 😊
'Review' 카테고리의 다른 글
| 토스 10주년 0to100 : 위닝세션 [토스는 원래 디자인을 잘하지 않았다] 후기 (3) | 2025.04.09 |
|---|---|
| [작은 UX 경험] 1. 토스 심플리시티 24 사전 신청 (1) | 2024.11.07 |
