분류 전체보기125 Framer CMS 실전 가이드 (CMS 컬렉션, 디테일 페이지, 필터링) 클라이언트가 처음 이런 말을 꺼냈을 때 솔직히 당황했습니다. "블로그랑 포트폴리오를 저희가 직접 관리하고 싶은데, 디자이너한테 매번 부탁하긴 좀 그렇고요." 개발자 없이 디자인도 챙기면서 콘텐츠 관리까지 넘겨야 하는 상황. 그때 Framer CMS를 제대로 파고들기 시작했고, 결과적으로 그게 5년 차 프리랜서로서 새로운 전환점이 됐습니다.CMS 컬렉션, 왜 디자이너한테 게임체인저인가CMS(Content Management System)란 웹사이트에 새 콘텐츠를 추가할 때 디자인 캔버스를 건드리지 않아도 되는 콘텐츠 관리 시스템입니다. 쉽게 말해, 블로그 글을 하나 올리고 싶을 때 Figma나 Framer 에디터를 열지 않아도 된다는 뜻입니다. 그냥 정해진 입력란을 채우면 페이지가 자동으로 생성됩니다.제가.. 2026. 5. 22. Cursor 디자이너 활용 (온보딩, 디자인토큰, 자동화) 디자이너가 코드 저장소에 접근하는 순간, 보통 두 가지 반응이 나옵니다. "생각보다 별거 없네"와 "이거 건드렸다가 서버 날리는 거 아니야?" 저도 처음 외주에서 GitHub 레포 접근권을 받았을 때 후자였습니다. 그런데 Cursor를 쓰기 시작하면서 그 경계가 조금씩 무너졌고, 지금은 디자인 토큰 동기화부터 Storybook 스토리 생성까지 디자이너 단독으로 처리하고 있습니다.온보딩 장벽, 디자이너는 어디서 막히나디자이너가 코드베이스에 합류할 때 가장 먼저 부딪히는 것이 권한 문제와 환경 설정입니다. 실제로 팀 단위 온보딩을 진행해 보면 처음 한 시간이 거의 퍼미션 이슈로 날아가는 경우가 많습니다. 대기업일수록 더합니다. 엔지니어링 리소스가 디자이너에게 미리 프로비저닝(provisioning)되지 않는.. 2026. 5. 21. Origami Studio 입문 (패치 에디터, iOS 시뮬레이션, 외주 활용) 솔직히 말씀드리면, 저는 Figma 프로토타이핑으로 꽤 오랫동안 버텨왔습니다. 클라이언트가 "실제 앱처럼 보여달라"고 할 때마다 Figma의 한계를 느끼면서도, 굳이 새 도구를 배울 필요가 있냐고 스스로를 설득했습니다. 그러다 iOS 스크롤뷰 바운싱 효과를 Figma로 재현하려다 완전히 막혔고, 그게 Origami Studio를 시작한 계기가 되었습니다.패치 에디터, 처음엔 낯설지만 핵심이 됩니다Origami Studio를 처음 켜면 가장 당황스러운 것이 패치 에디터(Patch Editor)입니다. 여기서 패치 에디터란 레이어의 속성값과 인터랙션 로직을 노드 기반으로 연결하는 작업 공간을 의미합니다. 쉽게 말해, Figma의 프로토타입 연결선 대신 전기 회로처럼 패치와 패치를 와이어로 이어 동작을 만드는.. 2026. 5. 21. ProtoPie 고급 프로토타입 (HMI 연동, 체인 트리거, 라이선스 ROI) Figma로 모든 걸 해결할 수 있다고 생각하셨나요? 저도 한때 그랬습니다. 그런데 자동차 인포테인먼트 외주를 받고 나서 그 생각이 완전히 바뀌었습니다. 화면 기울기에 따라 UI가 회전하는 시나리오를 Figma로 검증하려다 한계에 부딪혔고, 결국 ProtoPie로 넘어가서야 첫 사용자 테스트를 마칠 수 있었습니다. 이 글은 그 경험을 바탕으로 씁니다.왜 Figma만으로는 안 되는가 — HMI 연동의 벽디자인 툴 시장에서 Figma의 점유율이 압도적이라는 사실은 이미 잘 알려져 있습니다. 그런데 Figma가 약한 영역이 분명히 존재합니다. 바로 하드웨어 센서와 연동되는 고충실도 프로토타입(high-fidelity prototype) 영역입니다. 여기서 고충실도 프로토타입이란, 실제 사용 환경과 거의 동일한.. 2026. 5. 20. Lottie 애니메이션 (AE 익스포트, 성능 최적화, 네이티브 통합) 솔직히 이건 예상 밖이었습니다. 온보딩 애니메이션 하나를 MP4로 넣었다가 파일 크기가 2.4MB까지 불어났고, 로딩 지연 컴플레인이 바로 들어왔습니다. 그때 처음 Lottie로 전환했는데, 같은 애니메이션이 240KB로 줄고 로딩 시간이 1.8초에서 0.3초로 뚝 떨어졌습니다. 그 경험 이후로 저는 모바일 앱 외주에서 애니메이션을 MP4로 설계하는 선택지 자체를 지웠습니다.After Effects에서 JSON으로 — Bodymovin 익스포트의 핵심Lottie 워크플로우는 After Effects에서 시작합니다. 여기서 Bodymovin이라는 플러그인이 핵심 역할을 합니다. Bodymovin이란 After Effects에서 제작한 벡터 애니메이션을 JSON 파일 형식으로 변환해주는 무료 익스포트 플러그.. 2026. 5. 20. Rive 상태 기계 (입문, Figma 동기화, 컴포넌트) 애니메이션 툴을 바꾼다고 해서 사용자 반응이 달라질까요? 저는 반신반의하면서 Lottie를 버리고 Rive로 갈아탔고, 결과적으로 NPS가 6에서 9로 뛰었습니다. 도구 하나가 그 차이를 만들었다기보다, 상태 기계(State Machine)라는 개념이 인터랙션 설계 방식 자체를 바꿔놓은 겁니다. 이 글은 그 경험을 토대로 Rive 상태 기계의 구조와 실무 적용법을 논리적으로 풀어봅니다.상태 기계 입문: 노드와 트랜지션의 구조Rive의 애니메이션 작업은 타임라인(Timeline) 방식과 상태 기계(State Machine) 방식으로 나뉩니다. 타임라인은 Lottie와 비슷하게 프레임 단위로 움직임을 정의하는 방식입니다. 반면 상태 기계는 각 애니메이션을 하나의 '상태(State)'로 보고, 상태 간 전환 .. 2026. 5. 19. 이전 1 ··· 4 5 6 7 8 9 10 ··· 21 다음
