프로토타이핑9 V0 by Vercel (프로토타이핑, 프롬프트, 보안) 자연어 한 줄로 React 컴포넌트가 생성되는 시대가 왔습니다. Vercel이 공개한 생성형 UI 플랫폼 V0는 텍스트 또는 이미지 입력만으로 프론트엔드 시안을 즉시 만들어줍니다. 저도 Bolt.new로 비슷한 경험을 해봤는데, 이런 도구들이 실제 외주 현장에서 어떻게 작동하는지는 소개 영상과 꽤 다른 면이 있습니다.프로토타이핑 속도가 바꾼 외주 현장V0는 자연어 프롬프트나 이미지를 입력하면 React 컴포넌트 3종을 동시에 생성해 줍니다. 생성에는 30 크레딧이 소모되고, 이후 수정 프롬프트는 10 크레딧씩 차감되는 구조입니다. 무료 플랜 기준 200 크레딧이 제공되니 처음 써보기에는 충분한 양입니다.저는 Bolt.new로 유사한 워크플로를 실제 외주에 적용해 봤습니다. 클라이언트가 "대시보드와 가입 .. 2026. 5. 31. Origami Studio 입문 (패치 에디터, iOS 시뮬레이션, 외주 활용) 솔직히 말씀드리면, 저는 Figma 프로토타이핑으로 꽤 오랫동안 버텨왔습니다. 클라이언트가 "실제 앱처럼 보여달라"고 할 때마다 Figma의 한계를 느끼면서도, 굳이 새 도구를 배울 필요가 있냐고 스스로를 설득했습니다. 그러다 iOS 스크롤뷰 바운싱 효과를 Figma로 재현하려다 완전히 막혔고, 그게 Origami Studio를 시작한 계기가 되었습니다.패치 에디터, 처음엔 낯설지만 핵심이 됩니다Origami Studio를 처음 켜면 가장 당황스러운 것이 패치 에디터(Patch Editor)입니다. 여기서 패치 에디터란 레이어의 속성값과 인터랙션 로직을 노드 기반으로 연결하는 작업 공간을 의미합니다. 쉽게 말해, Figma의 프로토타입 연결선 대신 전기 회로처럼 패치와 패치를 와이어로 이어 동작을 만드는.. 2026. 5. 21. Figma 드래그앤드롭 (컴포넌트, 인터랙션, 업로드 UX) 클릭 버튼 하나로만 파일을 올릴 수 있는 인터페이스, 한 번쯤 답답하게 느껴보신 적 있으실 겁니다. 저도 외주 작업에서 똑같은 상황을 겪었습니다. 클릭만 되는 업로드 버튼을 드래그앤드롭 병행 방식으로 바꾼 이후, 주간 업로드 건수가 14건에서 28건으로 두 배가 됐습니다. 그 전환점에 Figma 프로토타입이 있었습니다.컴포넌트 기반 설계가 왜 필요한가Figma에서 드래그앤드롭 인터랙션을 만들 때 많은 분들이 단순히 화면 두 개를 연결하는 것으로 충분하다고 생각하시는 경우가 있는데, 저는 그렇게 접근하면 반드시 막히는 지점이 온다고 봅니다.핵심은 Variants(베리언츠)입니다. 여기서 Variants란 하나의 컴포넌트 안에서 상태별 디자인 변형을 묶어두는 기능입니다. 파일 아이콘 하나에 '기본 상태'와 .. 2026. 5. 11. 피그마 3D 캐러셀 (스마트 애니메이트, 자동재생, 마스킹) 직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.스마트 애니메이트로 3D 전환 효과 만들기피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과.. 2026. 5. 3. 피그마 프로토타이핑 (온클릭, 오버레이, 스마트애니메이트) 기획서를 열심히 써서 넘겼는데 회의실에서 돌아오는 말이 "이게 정확히 어떻게 동작하는 건가요?"였던 경험, 한 번쯤 있으실 겁니다. 저도 그랬습니다. 텍스트로 설명하는 데 한계를 느끼고 피그마 프로토타이핑을 제대로 파고들기 시작했는데, 막상 써보니 알려진 것과 다른 점도 있었고, 예상보다 강력한 부분도 있었습니다.말로 설명하던 시절과 프로토타입이 바꾼 것피그마 프로토타이핑은 디자인한 화면을 실제로 작동하는 것처럼 인터랙티브하게 연결해 테스트할 수 있는 기능입니다. UI 설계 단계에서 개발 전에 이해관계자와 소통하거나 사용성을 검증하는 데 활용됩니다.일반적으로 프로토타이핑 툴은 복잡하고 진입 장벽이 높다고 알려져 있지만, 제가 직접 써봤는데 피그마는 그렇지 않았습니다. 프로토타입 모드에서 요소를 선택하고 .. 2026. 4. 15. 디자인 스프린트 (발산수렴, 퍼실리테이션, 프로토타이핑) 아이디어는 있는데 어디서부터 시작해야 할지 막막한 적 있으셨습니까? 5일 만에 아이디어를 프로토타입까지 끌어올리는 구조가 있습니다. 구글 벤처스에서 제안한 디자인 스프린트입니다. 저도 처음 접했을 때 "5일이면 뭘 얼마나 할 수 있겠어"라고 생각했는데, 실제로 써보고 나서 생각이 완전히 바뀌었습니다.발산과 수렴을 의도적으로 분리하는 이유디자인 스프린트의 핵심 구조는 발산(Divergence)과 수렴(Convergence)의 명확한 분리에 있습니다. 발산이란 가능한 한 많은 아이디어를 제약 없이 쏟아내는 단계이고, 수렴은 그중에서 실제로 검증할 하나의 방향을 추려내는 단계입니다. 이 두 과정을 같은 시간 안에 섞어버리면 팀원들은 아이디어를 꺼내면서 동시에 비판받을 준비를 해야 하는데, 이게 생각보다 심리적.. 2026. 4. 10. 이전 1 2 다음
