ProtoPie vs. 시리즈: Framer
Framer와 ProtoPie 중 나에게 맞는 툴은 무엇인지 알아보세요.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
요약
▶ ProtoPie는 코딩이 전혀 필요 없는 프로토타이핑 툴로, 사용하기 쉽고 다양한 프로토타이핑 기능 및 연동 기능을 제공하며 고도화된 협업이 가능합니다.
▶ Framer는 코딩 역량을 보유하고 있거나, 프로덕션 코드를 단일 진실 공급원으로 정의하는 디자인 팀에게 적합한 툴입니다.
▶ 그러나 Framer는 다른 프로토타이핑 툴에 비해 학습 곡선이 높기 때문에, 기술적인 배경이 부족한
디자이너에게는 적합하지 않습니다.
모든 프로토타이핑 도구가 동일하지는 않습니다. 각각의 장단점 및 특정 사용 사례가 있기 때문에, 현재 타깃 유저와 팀에 가장 적합한 프로토타이핑 툴이 무엇인지 충분한 이해가 필요합니다.
이번 아티클에서는 현재 가장 잘 알려진 툴 중 두 가지인 Framer와 ProtoPie를 비교해 보고자 합니다.
두 가지 모두 많은 훌륭한 기능들을 제공해서 지금까지 선택을 못 하셨다면, 이번 아티클을 꼭 주목해 주세요.
이번 아티클에서는 구체적으로 아래 내용들에 대해 알아보겠습니다.
▶ Framer에 대해
▶ ProtoPie에 대해
▶ ProtoPie와 Framer의 비슷한 점과 차이점
▷ 기능별 비교
▶ Voice Feature (보이스 프로토타이핑)
▶ Formula와 variable
▶ 소프트웨어 및 하드웨어 연동
▷ 사용성 비교
▶ 사용 편의성
▶ 공유 및 협업
▶ 코딩 및 코드 생성
▶ Framer 와 ProtoPie, 어떤 툴을 사용해야 할까요?
이 아티클 완독 후, 여기를 클릭하여 ProtoPie와 다른 훌륭한 프로토타이핑 툴인 Figma를 비교하는 내용도 확인해 보세요.
Framer 인터페이스Framer에 대해
Framer(영문)는 디자인과 코드를 사용하여 모바일 및 웹 인터페이스를 위한 hi-fi 프로토타입을 제작할 수 있는 도구입니다. 처음에는 단순한 코딩 기반 도구로 시작했지만, 이후 점차적인 기능적 확장을 통해 더 많은 혜택을 제공하고 있습니다. 한 예로, 디자이너는 Framer에서 새 프로젝트를 시작할 때 포토샵에서 에셋을 생성하고, 스프링 물리 및 베지어 곡선을 이용해 3D 공간에서 레이어에 애니메이션을 적용할 수 있습니다. 또한, CSS 변환을 기반으로 높은 프레임 속도를 위해 하드웨어를 가속화할 수 있습니다.
현재 Framer는 Windows 및 Mac에서 지원되고 있으며, 브라우저 또는 데스크톱 앱에서 사용 가능합니다.
ProtoPie에 대해
ProtoPie는 모바일, 데스크톱, 웹 및 IoT 등 디지털 인터랙션 디자인 아이디어를 초현실적이고 고품질의 프로토타입으로 제작하기에 적합한 툴입니다. ProtoPie는 variable 및 formula를 사용해 프로토타입 구현하기, 음성 프로토타입 제작 등 보다 현실적인 프로토타입을 제작하기 위한 기능들을 다수 제공합니다.
ProtoPie의 가장 차별화된 기능은 하드웨어 소프트웨어 연동 기능입니다. 특히, 다른 툴에서는 제공하지 않는 Arduino 직렬 통신 및 Arduino 무선 통신과의 인터랙션 기능을 제공합니다.
이런 다양한 고도의 기능을 탑재한 ProtoPie는 Microsoft, BMW, Headspace, Snap, Electrionic Arts 같은 글로벌 유수 기업의 디자인 프로세스에 없어서는 안되는 툴이 되었습니다.
ProtoPie와 Framer의 비슷한 점과 다른 점
이제 본격적으로 ProtoPie와 Framer의 비슷한 점, 다른 점, 그리고 주요 강점은 무엇인지 좀 더 살펴보겠습니다.
기능
우수한 프로토타입은 우수한 기능을 탑재한 도구로부터 탄생합니다. 따라서 현재 팀의 상황과 필요에 가장 잘 맞는 프로토타이핑 툴을 선택해야 합니다.
Voice Feature (보이스 프로토타이핑)
Framer에는 보이스 프로토타이핑 기능이 따로 탑재되어 있지 않습니다. 따라서 Web Audio API 같은 별도의 툴을 통해 수동으로 보이스 프로토타이핑(영문) 기능을 구현해야 합니다.
반면 ProtoPie는 음성 텍스트 변환 (STT) 및 텍스트 음성 변환 (TTS) 기능을 갖추어, 고품질의 보이스 프로토타입 구현이 가능합니다. 이 기능을 통해 음성 명령에 응답하거나, 사용자가 말한 내용을 텍스트로 변환하는 프로토타입을 제작할 수 있습니다.
또한 음성 검색, 음성 인식 및 받아쓰기 기능을 통해 화면을 터치하는 것 이상의 입체적인 프로토타입을 구현할 수 있습니다.
ProtoPie의 Voice feature에 대해 더 자세히 알아보려면 여기를 클릭하세요.
Formula와 variable
Framer의 variant와 variable을 통해 프로토타입을 구현할 수 있습니다. 하지만 이 부분에서 몇 가지 주요 제한 사항(영문)이 있습니다. 예를 들어, Framer에서는 디자이너가 모든 텍스트 레이어 속성을 variable로 커스터마이징하거나, component를 게시하거나, state 간 component에 애니메이션 적용 기능이 아직 지원되지 않습니다.
ProtoPie에서는 formula와 variable을 중심에 둔 인터랙션 디자인 및 소프트웨어 프로토타이핑 툴입니다. 디자이너는 formula와 variable을 사용해서 프로토타입의 레이어 속성을 변경하거나 function을 구현할 수 있습니다.
Variable을 사용한 이동식 탭 막대ProtoPie는 Framer를 포함한 다른 프로토타이핑 툴과 차별화되는 풍부한 formula와 variable 기능을 탑재하여, 프레임 간의 와이어링만으로는 얻을 수 없는 높은 수준의 현실성과 역동성 구현이 가능합니다.
ProtoPie의 formula 및 variable을 통해 이메일 주소의 유효성 검사, 최소 암호 길이 설정, 쇼핑 카트의 내 항목 수 계산, 그리고 계정 내 잔액 확인 등과 같은 다양한 기능을 구현할 수 있습니다.(전처럼 맨 상단으로 올라가기 때문에 #하단 내용 지움)
ProtoPie의 formula 및 variable을 통해 이메일 주소 유효성 검사 같은 다양한 기능을 구현할 수 있습니다.
'이메일 주소의 유효성 검사', '최소 암호 길이 설정' 한정으로 bit.ly 링크를 만들었습니다. 하지만 클릭하시면 아시겠지만 결과는 동일합니다. 따라서 원래 작성됐던 방식으로 진행하는 것이 가장 좋을 듯 합니다.
Syntax, layer properties, function 등 formula를 사용한 예제를 확인하려면 여기를 클릭하세요. 또한 여기를 클릭하면 predefined variable을 사용한 예제를 확인할 수 있습니다.
소프트웨어 및 하드웨어 연동
Framer는 다양한 소프트웨어 연동 기능(영문)을 제공하지만, ProtoPie Connect처럼 외부 하드웨어와 연동이 불가능합니다.
ProtoPie에는 3개의 핵심 요소 (Studio, Player 및 Cloud) 와 하나의 익스텐션 (Connect) 이 있습니다. ProtoPie Studio는 코드 없이도 고도의 인터랙션을 제작할 수 있는 인터페이스입니다. 카메라, 음성 및 가속도계에 대한 액세스를 제공하여 복수의 기기와 프로토타입 간의 인터랙션이 가능합니다.
ProtoPie Player는 스마트 기기에서 프로토타입을 실행할 수 있으며, ProtoPie Cloud는 온라인 스토리지 및 클라우드 기반 협업을 위한 도구입니다.
마지막으로, ProtoPie의 가장 차별화된 기능인 ProtoPie Connect는 다양한 하드웨어 및 소프트웨어 연동이 가능합니다. ProtoPie Connect를 통해 복수의 장치, 디스플레이 및 하드웨어에서 프로토타입을 동시에 실행할 수 있으며, Arduino를 통해 직렬 혹은 무선 통신의 형태로 신호를 주고받을 수도 있습니다.
아래 영상은 실제 사용 사례를 보여주는 영상입니다.
단계별 가이드(영문)를 통해 소프트웨어 및 하드웨어가 연동된 프로토타이핑에 대해 더 자세히 알아보세요.
사용성
디자인팀이 더 효율적으로, 고도의 결과물을 제작하기 위해서는 사용하기 쉽고, 전체적인 디자인 프로세스에 잘 부합하는 프로토타이핑 툴이 반드시 필요합니다. 따라서 프로토타이핑 툴 선정 시, 사용성을 가장 최우선으로 고려하는 것이 필요합니다.
사용 편의성
Framer는 강력한 툴이지만, 학습 곡선이 매우 높습니다. Framer를 사용하여 코드 없이도 프로토타입 제작이 가능하지만, 프로토타입에 확장된 기능을 추가하려면 코드가 필요합니다. 즉, 코드 구성 요소(영문), 코드 오버라이드 및 HTML, CSS, JavaScript 및 React와 같은 프로그래밍 언어에 익숙해져야 툴을 최대한 활용할 수 있습니다.
한편 ProtoPie는 코딩이 전혀 필요하지 않습니다. 여전히 학습 곡선이 있지만 이는 Framer보다 훨씬 간단하고 짧습니다. ProtoPie는 간단한 개념적 모형인 ‘Object - Trigger - Response’를 사용합니다. 이 모델은 아주 간단한 첫번째 인터랙션부터 더욱 고도화되고 복잡한 수천번째 인터랙션까지 모두 제어합니다.
여기를 클릭하여 시작에 도움이 될 만한 리소스를 확인해 보세요.
하지만 이는 단순히 저희만의 의견이 아닙니다.
한 사용자가 말한 것처럼, “[ProtoPie]는 사용 편의성과 강력한 기능을 최적으로 누릴 수 있는 툴”입니다.
프로토파이의 개념적 모형: Object - Trigger - Response.공유 및 협업
팀워크는 꿈을 현실화합니다. 모든 팀들은 각자의 관점과 아이디어를 디자이너와 공유함으로써 협업해야 하고, 진행 상황에 대해 잘 인지하고 있어야 합니다.
Framer Library(영문)는 React 기반 JavaScript(영문) 라이브러리를 제공하여 디자인과 엔지니어 간의 격차를 해소하며, 디자이너가 멋진 인터랙션과 애니메이션을 쉽게 만들고 공유할 수 있도록 도와줍니다. 프로토타입 제작이 완료되면 디자이너는 Framer Motion에서 핸드 오프 모드로 전환하여 디자이너와 엔지니어가 원활히 협업할 수 있도록 돕습니다. 또한 프로토타이핑 단계와 프로덕션 단계에서 동일한 애니메이션 라이브러리가 사용되기 때문에, 디자인 프로세스 전반에 걸쳐 일관성을 보장합니다.
ProtoPie 또한 수준 높은 공유 및 협업 기능을 제공합니다. 프로토타입을 Interaction Recording과 연결하면, 적용된 인터랙션 스펙을 엔지니어에게 공유할 수 있습니다. 또한, 프로토타입에 접근할 수 있는 사용자를 손쉽게 관리하고, 공유 시 프로토타입 표시 방식을 정확하게 선택할 수 있습니다.
Interaction Recording을 통해 엔지니어는 인터랙션별 스펙을 쉽게 확인할 수 있습니다.코딩 및 코드 생성
디자이너는 Framer로 코드를 가져와 UI 화면을 생성하거나 실제 코드를 사용하여 특정 component를 만들고 커스터마이징 할 수 있습니다. 또한 필요한 경우 코드를 프로젝트에 활용할 수 있습니다. (영문) 따라서 JavaScript, HTML 및 CSS로 코딩 역량을 보유하고 있다면, 다양한 사용자 지정 옵션을 설정할 수 있습니다.
Framer를 사용하면 Code Components 및 Code Overrides, 두 가지 방법으로 코드를 사용할 수 있습니다.
하지만 코드를 작성할 수 없거나, 엔지니어에게 코딩 작업을 위임하는 것을 선호하는 경우, 단 1의 코딩 없이도 수준 높은 인터랙션을 구현할 수 있는 ProtoPie가 최선의 선택입니다.
Framer 와 ProtoPie, 어떤 툴을 사용해야 할까요?
그렇다면, ProtoPie와 Framer 중 더 적합한 툴은 무엇일까요?
안타깝게도 모든 디자인팀의 필요나 환경이 다르기 때문에, 이 질문에 대한 정확한 해답은 없습니다.
Framer는 코딩 역량을 보유하고, 리서치 또는 테스트 단계에서 고품질 제품 검증을 원하는 팀에게 가장 적합한 옵션입니다. Framer의 경우, 프로덕션 코드를 component로 쉽게 가져올 수 있습니다. 따라서, 조직에서 프로토타입의 프로덕션 코드를 단일 진실 공급원으로 생각한다면 Framer가 더 적합한 선택입니다.
반면에 ProtoPie는 코드를 작성할 수 없거나, 코딩을 원하지 않는 디자이너에게 가장 직관적이고 기능이 풍부한 옵션입니다. 다양한 하드웨어 및 소프트웨어 프로토타이핑 연동이 가능하고, drag & drop 같은 마이크로 인터랙션이 포함된 프로토타입을 구현할 수 있으며, 프로토타입 안에 오디오 및 영상을 통합할 수 있습니다. 또한 tilt, sound 및 나침반과 같은 스마트폰 센서 기능을 사용하여 프로토타입을 만들 수도 있습니다.
지금 ProtoPie를 통해 단 한 줄의 코드 없이 자신만의 hi-fi 프로토타입을 무료로 제작해 보세요. 또한 Canny(영문)를 통해 로드맵에 무엇이 있는지 확인하고, 피드백을 통해 기능 추가 요청을 할 수 있습니다.
