고충실도, 고기능의 고급 프로토타이핑은 빠르게 인기 있는 주제가 되고 있습니다. 그러나 많은 디자이너들이 이 기술을 도입하는 데 어려움을 겪고 있습니다. 사실 이 물결을 헤쳐 나가려면 사고방식의 전환이 필요합니다. 하지만 문제를 관리 가능한 조각들로 나누어 배우면 어렵지 않습니다.
고급 프로토타입을 작업할 때, 본질적으로 최종 제품이 어떤 모습일지, 즉 엔지니어링 팀이 현실로 구현할 제품의 기반을 쌓고 있는 셈입니다. “하지만 저는 디자이너지 프로그래머가 아니잖아요! 도대체 어디서부터 시작해야 하죠?”라고 생각할 수 있습니다.
좋은 소식은: 이미 생각보다 훨씬 더 많이 알고 있다는 것입니다.
개요
올바른 질문부터 시작하기
고급 프로토타이핑의 보편적인 문제
좋은 소식은, 여러분에게 이미 필요한 기술이 있다는 것!
프로토타이핑의 장벽 넘기
사례 연구: macOS 계산기 앱 재현하기
사용자에게 보이는 단계 쪼개기
상호작용의 다음 단계로 넘어가기
고급 프로토타이핑의 힘
다음: 계산기를 단계별로 프로토타이핑하는 방법
올바른 질문부터 시작하기
여정은 관점의 변화로 시작됩니다. 고급 프로토타입을 만드는 과제에 직면하면, ProtoPie 같은 도구를 바로 잡고 “좋아, 이제 이 프로토타입을 어떻게 만들지?”라고 묻고 싶은 유혹이 듭니다. 하지만 그건 잘못된 접근입니다.
프로토타이핑 도구를 열기 전에 가장 먼저 던져야 할 진짜 질문은: “내가 디자인하는 제품은 어떻게 작동하는가?”
****고급 프로토타이핑의 보편적인 문제
ProtoPie가 다루기 어렵다는 말을 디자이너들에게서 자주 듣게 됩니다. 하지만 이는 ProtoPie나 다른 어떤 고급 프로토타이핑 도구에 대한 공정한 평가는 아닙니다.
문제는 고급 프로토타이핑이 Figma나 Sketch 같은 도구에서 해왔을지도 모르는 더 단순한 프로토타이핑과는 완전히 다른 게임이라는 점입니다. 현실적으로 고급 프로토타이핑은 선을 이리저리 끌고 다니며 오브젝트를 서로 붙이는 것만큼 쉽게 될 수는 없습니다. 고급 프로토타이핑은 디자인의 작동하는 모델을 만드는 것이며, 이는 당연히 제품이 어떻게 작동하는지에 대한 더 깊은 이해를 요구합니다.
Figma를 “단순한” 프로토타이핑 도구라고 언급했는데, 최근의 프로토타이핑 개선 사항을 생각하면 다소 공정하지 않을 수도 있습니다. 하지만 한 가지 흥미로운 점이 있습니다: ProtoPie에서 어려움을 겪고 있다면, Figma의 변수와 조건을 다룰 때도 비슷한 어려움에 부딪힐 가능성이 큽니다. 핵심은 도구보다도 당신이 어떤 사고방식을 가지고 접근하느냐에 더 가깝습니다.
좋은 소식은 여러분에게 이런 기술이 있다는 것입니다!
저와 함께 한 번 믿고 뛰어들어 보시길 부탁드리겠습니다. 고급 프로토타입을 만들려면 한동안 프로그래머의 모자를 써야 합니다. 걱정하지 마세요, 코딩할 필요는 없습니다! 하지만 제품이 어떻게 작동하는지, 즉 프로그래머가 코딩을 시작하기 전에 이해하듯이 이해해야 합니다.
아주 큰 요구처럼 들릴 수도 있습니다. 그러나 제품을 디자인하며 보낸 시간을 떠올려 보세요. 여러분은 이미 제품이 어떻게 작동하는지 깊이 파고들어 왔습니다. 결국 지난 몇 주 혹은 몇 달 동안 제품이 실제로 어떻게 작동하는지 생각하는 일 말고는 한 적이 없지 않나요? 그것이 여러분의 디자인 결정을 이끌지 않았나요?
예를 들어, 개발자 인수인계를 지원하기 위해 아래와 비슷한 문서를 만들어 보셨을 겁니다:
개발자 인수인계를 위한 프로세스 흐름도
💡** 실용 팁!** 이런 문서는 제품이 어떻게 작동하는지에 대한 지식의 보물창고입니다.** **여러분은 제품을 이해하고 있으며, 어쩌면 결국 그것을 만들 개발자보다도 더 잘 이해하고 있을지 모릅니다. 여러분은 이미 절반은 와 있습니다.
프로토타이핑의 장벽 넘기
그렇다면 고급 프로토타입을 만드는 일이 여전히 왜 이렇게 어려울까요? 이것이 이 글의 핵심으로 우리를 데려갑니다. 도구에서 프로토타이핑을 시작하는 것이 아니라, 머릿속에서 프로토타이핑을 시작해야 한다는 것입니다. 머릿속에서 프로토타이핑을 시작하려면 프로그래머처럼 생각해야 합니다. 즉, 제품을 전체가 작동하도록 만드는 더 작은 상호작용의 조각들로 분해해야 합니다.
ProtoPie Studio를 열기도 전에 제 사고 과정을 함께 따라가 보겠습니다.
사례 연구: macOS 계산기 앱 재현하기
실제 사례로 macOS 계산기 앱을 살펴보겠습니다. 단순하지만, 우리 모두 그 작동 방식을 알고 있으므로 이 과정을 보여 주기에 완벽한 사례입니다. 기본 워크플로는 간단합니다. 숫자를 입력하고, 연산을 선택하고, 또 다른 숫자를 입력한 다음, 계산 창에서 결과를 보기 위해 등호를 누르는 것입니다.
macOS 계산기의 기본 UI
계산에 필요한 간단한 단계를 살펴보겠습니다. 여기서 "사용자"는 앱을 사용하는 사람을, "시스템"은 앱과 그 기능을 의미합니다.
계산을 '단계'로 쪼개기
프로토타입을 진행하면서 기능을 더 추가할 것입니다. 우선은 1단계.에 집중해 보겠습니다.
얼핏 보면 계산기에서의 사용자 상호작용은 단순해 보입니다. 하지만 우리는 명백한 것 너머의 더 세부적인 부분으로 들어가고자 합니다. 이 단일 단계를 더 깊이 해부해 보겠습니다:
사용자는 숫자 키 중 아무거나를 사용해 첫 번째 숫자를 입력한다
1단계를 완료하는 단계
사용자에게 보이는 단계 쪼개기
이 **1단계 **분해는 사용자에게 보이는 단계들을 보여 줍니다. 그러나 더 많은 일이 보이지 않는 곳에서 일어나고 있습니다(하지만 우리는 직관적으로 알고 있습니다):
보이는 단계를 더 세부적으로 쪼개기
💡 **실용 팁! **세세한 부분까지 파고들어 시스템과 사용자의 동작을 비교하면, 이제 제 프로토타입에 대한 시야가 더 선명해집니다.
이 단계를 다시 살펴보고 빌드에 어떤 의미가 있는지 이해해 봅시다:
1. 시스템은 입력된 숫자를 기억하기 위해 약간의 메모리를 할당하며, 이 숫자들은 계산의 첫 번째 숫자로 합쳐집니다. 시스템은 이를 NUMBER A라고 부릅니다.
이것은 변수를 만들어야 한다는 뜻입니다. 변수는 정보를 조금 저장하는 방법입니다. 우리는 이 변수를
NUMBER_A또는 간단히a라고 부르겠습니다.
2. 시스템은 NUMBER A를 “0”으로 초기화합니다
변수
a의 초기값을0으로 지정하겠습니다
3. 시스템은 처음에 디스플레이에 NUMBER A의 값을 표시합니다
a의 값으로 업데이트할 수 있는 텍스트 박스가 필요합니다
4. 사용자가 숫자 키(예: “5”)를 누릅니다
이것은 각 키마다 클릭 가능한 오브젝트가 필요하다는 뜻입니다. 사용자가 그것을 클릭하거나 탭하면, 시스템은 키 라벨에 표시된 숫자 값을 전달받습니다.
5. 시스템은 NUMBER A의 이전 값(”0”)과 방금 입력한 숫자(”5”)를 결합합니다 → “05”
a의 값을 이전 값과 새로 누른 숫자를 결합하여 업데이트하고 있습니다. (여기에는 실제로 프로토타입을 만들기 전까지는 명확하지 않을 수도 있는 미묘한 부분이 있습니다 — 괜찮습니다! 이는 반복적인 과정입니다.)
6. 디스플레이는 NUMBER A의 새 값을 반영하도록 업데이트됩니다
우리는 텍스트 박스를
a의 새 값으로 업데이트하고 싶으므로, 디스플레이 텍스트 박스를 업데이트하기 전에a의 값을 먼저 업데이트해야 한다는 뜻입니다.또한 앞의 0을 제거하고 싶습니다. 그래서 현재
a의 값이 “05”이더라도, 디스플레이에는 단순히 “5”가 표시됩니다.
7. 사용자가 또 다른 숫자 키를 누릅니다
숫자 키를 누를 때마다 위의 단계를 반복합니다.
8. …연산 키가 눌릴 때까지 눌린 숫자 키 수만큼 반복합니다
사용자는 연산 키가 눌릴 때까지 첫 번째 숫자를 입력하는 상태에 있게 되므로, 프로세스의 어느 단계에 사용자가 있는지 추적해야 할 가능성이 큽니다.
우선, 우리의 경험은 네 단계를 가질 것이라고 가정해 보겠습니다:
첫 번째 숫자 입력
연산자 선택
두 번째 숫자 입력
계산
위 단계가 진행되는 동안, 연산자 키가 눌릴 때까지 우리는 1단계: “첫 번째 숫자 입력" 상태에 머물게 되며, 그 시점에 사용자는 2단계: “연산자 선택.” 상태로 들어갑니다.
단계를 저장용 변수를 사용할 수 있습니다. 이를
phase라고 부르겠습니다.
이 시점에서, 저는 ProtoPie를 어떻게 사용할지 생각하지 않은 채 상호작용의 1단계: "숫자 A 입력"에 대한 단계를 정리했습니다.
그런데 앞서의 흐름도를 기억하시나요? 그것은 계산기 앱의 흐름을 보여 주며, 그것이 어떻게 작동하는지 시각화하는 데 도움을 줍니다. 지금까지 우리는 이 부분에만 집중했습니다:
1단계: 첫 번째 숫자 입력
💡** 실용 팁! **여기까지 해 온 모든 작업을 활용해 앱 디자인을 발전시키세요. 이 사고 실험을 통과하는 데 큰 도움이 됩니다. 이미 충분히 생각해 두었으니, 그동안 해 온 생각을 그대로 재사용하세요.
상호작용의 다음 단계로 넘어가기
이제 상호작용의 다음 단계에 대해 위와 같은 연습을 반복할 수 있습니다:
사용자가 연산자 키 중 하나를 눌러 연산을 선택한다
이것은 더 세분화할 수 있습니다:
사용자가 연산자 키 중 하나를 누릅니다
시스템은 단계를 “첫 번째 숫자 입력”에서 “연산자 선택”으로 변경합니다
시스템은 선택된 연산자를 저장합니다
사용자가 두 번째 숫자를 입력하기 전에 다른 연산자 키를 누를 수도 있습니다
시스템은 저장된 연산자를 새로 선택한 것으로 업데이트합니다
이 단계는 사용자가 두 번째 숫자 입력을 시작하기 위해 숫자 키를 누를 때까지 반복됩니다.
그리고 우리의 흐름도는 이를 이렇게 보여 줍니다:
2단계: 연산자 선택
다음으로, 이를 만들기 위한 요구사항을 도출해 보면 다음과 같습니다:
1. 사용자가 연산자 키 중 하나를 누릅니다
숫자 키와 마찬가지로 연산자 키도 버튼이어야 합니다. 우리는 더하기, 빼기, 곱하기, 나누기라는 네 가지가 있습니다.
2. 시스템은 단계를 “숫자 A 입력”에서 “연산자 선택”으로 변경합니다
phase변수를 업데이트하여 이제 더 이상 1단계: “숫자 A 입력,” 상태가 아니라 2단계 “연산자 선택.” 상태임을 반영해야 합니다.
3. 시스템은 선택된 연산자를 저장합니다
선택한 연산자를 저장할 변수가 필요합니다. 이를
op라고 부를 수 있습니다
4. 사용자가 숫자 B를 입력하기 전에 다른 연산자 키를 누를 수도 있습니다
이는 사용자가 숫자 B를 입력하기 전에 마음을 바꿀 수 있다는 뜻입니다. 따라서 숫자 키가 눌릴 때까지는 절대 3단계로 넘어가지 않도록 해야 합니다.
5. 시스템은 저장된 연산자를 새로 선택한 것으로 업데이트합니다
변수
op를 새로 선택한 연산자B로 업데이트하겠습니다
6. 사용자가 숫자 B 입력을 시작하기 위해 숫자 키를 누를 때까지 이 단계는 반복됩니다
이는 사용자가 다시 숫자 입력을 시작할 때까지 원하는 만큼 마음을 바꿀 수 있다는 뜻이며, 그 시점에 사용자는 3단계: “숫자 B 입력.”으로 전환됩니다.
위 연습을 모든 단계에 대해 반복하면 이 기본 경험을 만들기 시작하는 데 필요한 모든 것을 갖추게 됩니다. 이것이 제 프로토타이핑 여정의 시작입니다. 우선 이러한 기본 상호작용의 작동 모델을 만들고, 수정 키나 이후 계산에서 비롯되는 추가 기능과 복잡성은 잠시 제쳐 두겠습니다. 목표는 더 나아가기 전에 이 기본 동작을 확실히 다지는 것입니다.
보이지 않는 시스템 동작까지 세세하게 나눈 이 분석은, ProtoPie를 열기도 전에 우리 프로토타입의 청사진을 형성합니다.
고급 프로토타이핑의 힘
이제 어떻게 만들지 알았으니, 위 단계들이 내가 선택한 도구에서 어떻게 구현되는지 생각해 볼 수 있습니다. 물론 여기서 가장 자연스러운 선택은 ProtoPie입니다. 그 고급 기능을 통해 기본을 넘어 프로토타입을 확장할 수 있고, 정교한 상호작용을 쉽게 탐색하고 구현할 수 있습니다. 물론 Figma 같은 다른 디자인 도구에서도 할 수 있지만, ProtoPie가 이를 훨씬 더 쉽고 빠르게 만들어 줍니다.
간단한 유틸리티 앱을 재현하는 것은 ProtoPie의 기능적 컴포넌트가 얼마나 유용한지 보여 주는 완벽한 예입니다. 저는 비슷한 키들 모두에 같은 방식으로 반응할 수 있습니다(예: 숫자 키는 모두 같은 컴포넌트의 인스턴스가 될 수 있습니다). 이렇게 하면 로직이 한곳에 모여 복잡성이 줄어듭니다. 게다가 프로토타입을 실행하는 동안 변수 값을 쉽게 추적할 수 있어, 진행 중 생길 수 있는 문제를 해결하는 데 큰 도움이 됩니다. 또한 ProtoPie에 내장된 고급 수학 함수 덕분에 계산기 데이터를 다루는 일도 훨씬 수월합니다.
다음: 계산기를 단계별로 프로토타이핑하는 방법
상호작용을 세심하게 분석하고 이를 작동하는 프로토타입으로 옮기는 과정은 위압적으로 느껴질 수 있습니다. 그래도 ProtoPie 같은 도구가 있으면 그 과정은 부담스러운 일이 아니라 흥미로운 탐색이 됩니다. 더구나 이런 유형의 앱 프로토타입은 ProtoPie가 할 수 있는 일의 표면만 살짝 건드리는 수준에 불과합니다.
이 글 시리즈의 다음 편에서는 기능이 완전한 계산기 앱을 단계별로 만드는 과정을 함께 살펴보겠습니다. 함께 고급 프로토타이핑이 제공하는 방대한 가능성을 탐구하며, 여러분이 가장 야심 찬 디자인 프로젝트를 현실로 구현할 준비를 충분히 갖추도록 하겠습니다.
