미리보기 프로토타입의 시대
다양한 프로토타입 도구들을 비교하며, 실제 디자인 개발로 이어질 수 있는 프로세스를 고민하고 있다.
vercel은 문장을 기반으로 실제 동작하는 화면을 빠르게 구현할 수 있는 도구다. 몇 줄의 텍스트와 원하는 그래픽, 인터랙션을 입력하면 제품처럼 동작하는 결과를 만들어낸다. 다만, 의도한 대로 정밀하게 구현하려면 코드 지식이 필요하다. 세부 조정이나 커스터마이징을 위해서는 개발적인 접근이 불가피하다.
Framer는 세련된 웹/앱 프로토타입을 만들 수 있는 도구다. 미려한 결과물을 기대할 수 있지만, 초기 세팅에 많은 시간이 소요된다. 유연한 인터랙션이나 모바일 환경에 최적화된 프로토타입을 만들기엔 한계가 있다. 이 또한 코드가 뒷받침될 때 진가를 발휘한다.
Createwithplay 2.0은 GUI 기반으로 디테일한 인터랙션을 만들 수 있는 강점이 있다. Swift 코드도 함께 생성되므로 iOS 환경에 특화된 시나리오 설계에 유용하다. 하지만, 생성된 코드를 직접 앱에 적용하거나 완성된 제품으로 연결하기는 어렵다. 프로토타입 이상의 결과물을 기대하긴 어렵다.
Figma는 디자인을 기반으로 빠르게 프로토타이핑할 수 있는 구조다. Dev Mode를 활용하면 플랫폼별 코드로 변환해 개발과의 연계도 수월하다. 다만, 화면이 많아지거나 조건이 복잡해질 경우 파일 용량이 커지고 메모리 문제로 이어질 수 있다.
현재 내가 적용하고 있는 워크플로우는 다음과 같은 흐름을 따른다.
먼저 Figma를 이용해 전체적인 디자인을 구성한다. 그 후, 이 디자인을 기반으로 vercel에 스크린샷, 아이콘, 조건 등을 문장으로 입력해 실제 구동 예시를 구현한다. v0는 입력된 문장을 해석해 실제 동작에 가까운 화면을 빠르게 만들어주기 때문에, 초기 구동 이미지나 시뮬레이션 제작에 유용하다.
이후, 사용성 테스트(UT)를 위해 다시 Figma로 돌아와 Maze 서비스를 연동한다. Maze는 간단한 프로토타입 테스트부터 정량적 사용자 피드백 수집까지 가능해, 디자인 단계에서 서비스 방향성을 검증하는 데 적합하다.
이 과정을 거친 후, 정제된 사용자 흐름과 인터랙션은 Play 2.0을 활용해 구현한다. iOS 기반 인터랙션이나 모션에 강점이 있는 툴로, GUI만으로도 디테일한 앱 동작 흐름을 구성할 수 있다. Play는 단순히 프로토타입 목적뿐만 아니라, 개발 이전 단계에서 실제 사용 시나리오를 팀과 리뷰하고 방향성을 조율하는 데에 큰 도움이 된다.
이러한 워크플로우는 디자인 → 구동 예시 → 사용자 검증 → 인터랙션 흐름 완성까지의 단계로 이어지며, 각 툴의 특성을 효율적으로 결합해 실제 제품 개발 전 충분한 준비와 피드백을 확보할 수 있게 해준다.
단, 매번 반복적으로 적용할 순 없다. 프로젝트의 규모와 예산, 기간에 맞춰 프로세스를 운영해야 한다.그리고 각 도구는 목적에 따라 적절히 활용되어야 하며, 실제 제품화와의 연결 가능성, 개발 연동, 인터랙션 정교함 등을 기준으로 우선순위를 설정할 필요가 있다.
