Showing Posts From
Framer로
- 14 Dec, 2025
Framer로 프로토타입을 만들었는데 개발자가 '이건 안 된다'고 할 때
금요일 오후 3시, 핸드오프 미팅 Framer에서 3일 동안 만든 프로토타입이다. 스크롤에 따라 헤더가 자연스럽게 줄어들고, 카드가 부드럽게 스택되면서 올라온다. 제스처 기반 스와이프로 다음 화면 전환. 60fps로 돌아간다. 완벽하다. "이거 봐봐. 이렇게 자연스럽게." 개발자 준호가 노트북 화면을 들여다본다. 5초 동안 아무 말 없이 본다. 나쁜 징조다. "디자님, 이거... 좀 어려울 것 같은데요." 심장이 철렁한다. "어려운 게 아니라 안 되는 거예요?" "안 되는 건 아닌데, 시간이..." 시간. 항상 시간이다. 스프린트는 2주 남았고, 백엔드 API도 아직이고, 다른 화면 5개가 더 남았다고 한다. 저 부드러운 애니메이션 하나 구현하려면 일주일은 걸린다고. "그럼 어떻게 해야 돼?" "일단 헤더는 그냥 fixed로 고정하고, 카드 애니메이션은 빼고, 화면 전환은 기본 transition으로..." 내가 3일 동안 만든 게 30초 만에 무너진다.Framer가 준 착각 Framer는 마약이다. 좋은 의미로. 스크롤 이벤트 연결하는 데 5분. 제스처 인식 3분. 스프링 애니메이션 커브 조정 2분. 뭐든지 된다. 마치 내가 프론트엔드 개발을 정복한 것 같은 착각. "이 정도면 개발도 쉽지 않을까?" 아니다. 전혀 아니다. Framer는 프로토타이핑 툴이다. 실제 프로덕션 코드가 아니다. 저 부드러운 애니메이션 뒤에는 최적화되지 않은 리소스가 수십 개 돌아간다. 실제 앱에서 저렇게 구현하면 배터리가 2시간 만에 죽는다. 준호가 설명해줬다. "디자님이 만든 저 프로토타입, 지금 RAM 800MB 먹고 있어요. 우리 앱 전체가 100MB 목표인데." 현타가 온다. "그럼 Framer로 만드는 게 의미가 없는 거야?" "아니요, 방향성 보여주는 건 좋은데... 그걸 그대로 구현할 거라고 기대하시면 안 돼요." 기대하시면 안 된다. 이 문장이 가슴에 꽂힌다. 가능성과 현실 사이 문제는 내가 Framer에서 본 게 "가능성"이고, 개발자가 보는 건 "현실"이라는 거다. 내가 본 것:사용자가 느낄 경험 브랜드가 전달할 감성 경쟁사와 차별화되는 인터랙션 앱스토어 리뷰에 "UI 예쁘다"는 댓글개발자가 본 것:프레임 드롭 가능성 크로스 브라우징 이슈 성능 최적화 난이도 유지보수 복잡도 일정 지연 리스크둘 다 틀리지 않았다. 그게 더 화난다.월요일, 타협안 찾기 주말 내내 생각했다. 포기할 건 포기하고, 지킬 건 지켜야 한다. 준호한테 메시지 보냈다. "준호님, 제가 좀 더 공부해볼게요. 근데 질문 좀 해도 돼요?" 30분 뒤 답장. "당연하죠. 통화할까요?" 통화했다. 1시간 동안 했다. 내가 물었다. "헤더 애니메이션이 제일 중요한데, 이건 어떻게든 살릴 수 없어요?" 준호가 대안을 줬다. "transform 속성만 쓰면 돼요. 그럼 GPU 가속 받아서 부드러워요. 다만 디자인을 조금 단순하게..." "카드 스택 애니메이션은요?" "그건 라이브러리 쓰면 돼요. React Spring. 비슷하게 나올 거예요. 100% 똑같진 않지만." "스와이프 제스처는?" "이건 진짜 시간 걸려요. 다음 스프린트로 미뤄도 될까요?" 미룬다. 좋다. 전부 포기하는 것보단 낫다. 우선순위 정하는 법 이제 안다. Framer 프로토타입 만들 때부터 우선순위를 정해야 한다. 내 기준:브랜드 정체성 - 이건 못 버림 핵심 사용자 경험 - 이것도 못 버림 디테일한 인터랙션 - 여기서부터 협상 가능 장식적 애니메이션 - 과감히 버림헤더 애니메이션은 1번이다. 우리 앱의 아이덴티티다. 경쟁사는 다 고정 헤더다. 우리만 다르다. 이건 지킨다. 카드 전환은 2번이다. 사용자가 계속 보는 부분이다. 조금 단순해져도 부드러워야 한다. 스와이프 제스처는 3번이다. 있으면 좋지만, 버튼으로도 된다. 배경 파티클 효과는 4번이다. 예쁘지만, 없어도 된다. 준호가 "이거 Canvas 써야 되는데..." 하는 순간 바로 뺐다.개발자와 친해지는 게 답이다 3개월 전만 해도 핸드오프 미팅이 전쟁터였다. "이거 왜 이렇게 만드셨어요?" "디자인이 그런데요." "그럼 저희는 어떻게 해요?" "그건 개발자가 알아서..." 둘 다 방어적이었다. 서로 영역 침범당할까봐. 지금은 다르다. 준호랑 일주일에 한 번씩 30분 커피 챗을 한다. 디자인 얘기도 하고, 개발 얘기도 듣는다. 준호가 알려준 것들:CSS transform이 왜 빠른지 리플로우가 뭔지 React 컴포넌트 라이프사이클 번들 사이즈가 왜 중요한지내가 알려준 것들:8pt 그리드가 왜 필요한지 디자인 시스템이 개발에도 이득인 이유 피그마 컴포넌트 구조가 React랑 비슷한 점 사용자 테스트에서 나온 피드백이제 서로 언어를 안다. 내가 "이 애니메이션 GPU 가속 되게 만들 수 있어?"라고 물으면, 준호가 "네, transform 쓰면 돼요"라고 바로 답한다. 준호가 "이 컴포넌트 재사용 가능하게 만들어주시면 좋겠어요"라고 하면, 내가 "Variant 파서 Props 넘길 수 있게 해줄까?"라고 답한다. 통역이 필요 없어졌다. 현실적 프로토타입 만들기 이제 Framer 쓰는 방식이 바뀌었다. 예전: 최대한 화려하게. 모든 인터랙션 다 넣기. 개발자가 알아서 하겠지. 지금: 구현 가능한 선에서. 우선순위 명확하게. 개발자랑 미리 논의. 새로운 프로세스:러프 프로토타입 만들기 (1일) 준호한테 15분 퀵 리뷰 (기술적 제약 확인) 수정해서 디테일 프로토타입 (1일) 다시 30분 미팅 (구현 방법 논의) 최종 정리해서 핸드오프2단계에서 준호가 말한다. "이 부분은 쉬워요. 30분이면 돼요." "여기는 라이브러리 써야 해요. 하루 정도요." "이건... 진짜 어려운데, 꼭 필요해요?" 그럼 나도 판단한다. 꼭 필요한가? 다른 방법은? 다음 버전으로 미룰 수 있나? 시간이 더 걸리긴 한다. 하지만 결과물이 실제로 나온다. 예전엔 프로토타입만 예뻤다. 실제 앱은 달랐다. 지금은 80% 비슷하다. 나머지 20%는 타협이다. 타협은 패배가 아니다 디자이너로서 제일 싫은 단어가 "타협"이었다. "타협하면 디자인이 망가진다." "타협은 프로답지 않다." "애플은 타협 안 한다." 거짓말이다. 애플도 타협한다. 우리가 모를 뿐이다. 타협은 현실을 받아들이는 거다. 무한한 시간, 무한한 인력, 무한한 예산은 없다. 스타트업은 특히. 좋은 타협:핵심은 지키고 디테일을 양보 지금 버전에선 포기, 다음 버전에 추가 다른 방법으로 비슷한 효과나쁜 타협:브랜드 정체성 포기 사용자 경험 해치는 결정 그냥 귀찮아서 대충준호가 "카드 애니메이션 빼요"라고 했을 때, 나는 "그럼 Fade 트랜지션이라도 넣자"고 했다. 완전히 없애는 것보단 낫다. 준호도 동의했다. 10분이면 된다고. 결과: 내 프로토타입보단 덜 화려하다. 하지만 앱이 빠르고, 일정도 맞췄고, 사용자는 만족한다. 앱스토어 리뷰에 "속도 빠르네요" 댓글 달렸다. 타협했지만 이겼다. 다음 프로젝트는 다르게 다음 주부터 새 프로젝트다. 온보딩 플로우 리디자인. 이번엔 처음부터 다르게 한다. 1단계: 와이어프레임 (피그마) 2단계: 준호랑 30분 브레인스토밍 3단계: 프로토타입 (Framer, 단 구현 가능한 것만) 4단계: 주간 체크인 (진행 상황 공유) 5단계: 핸드오프 (서프라이즈 없음) 준호가 말했다. "이번엔 좀 더 여유 있게 만들 수 있을 것 같아요." 여유. 좋은 단어다. 디자이너의 새로운 역할 예전 생각: 디자이너는 예쁘게만 만들면 된다. 구현은 개발자 몫. 지금 생각: 디자이너는 구현 가능한 아름다움을 만든다. 개발자와 함께. 역할이 바뀌는 게 아니다. 확장되는 거다. 여전히 해야 할 것:사용자 리서치 인터페이스 디자인 비주얼 아이덴티티 프로토타이핑추가로 하는 것:기술적 제약 이해 개발자와 협업 언어 우선순위 판단 현실적 일정 감각더 어려워졌다. 하지만 더 재밌다. 준호가 "디자님, 이번 건 정말 잘 나올 것 같아요"라고 할 때, 그게 제일 좋다. 개발자가 기대한다는 건, 실제로 나온다는 뜻이다. Framer 프로토타입은 여전히 예쁘다. 하지만 이제 그게 전부가 아니다. 실제 앱도 예쁘다. 조금 덜 화려할 뿐. 하지만 실제로 존재한다. 존재하는 디자인이 상상 속 완벽함보다 낫다.금요일 6시. 준호가 슬랙 메시지 보냈다. "디자님, 헤더 애니메이션 구현 끝났어요. 확인해보세요." 앱 켰다. 부드럽다. 내 프로토타입이랑 거의 똑같다. 심장이 뛴다. "준호님 천재" 라고 답장 보냈다. 준호가 웃는 이모지 보냈다. 이게 협업이다.