어느 날, Darren Bennett는 자신이 고객들을 위해 만든 디자인의 공통 구성 요소들을 추려내어 누구나 접근할 수 있는 인터랙션 라이브러리에 넣기로 결정했습니다.
그는 이를 Skeleton UI라고 이름 붙였으며, ProtoPie에서 만들어진 최초의 인터랙션 라이브러리였습니다.
Darren은 ProtoPie 앰배서더이자 트레이너이며, 매우 경험 많은 UX/UI 디자이너이기도 합니다. 최근 웨비나에서 그는 인터랙션 라이브러리에서 조건과 변수를 사용하는 방법과 그것이 인터랙션 디자인 시스템과 어떻게 연결되는지에 대한 팁을 공유했습니다.
이 글에서는 조건, 변수, 인터랙션 라이브러리의 기본을 살펴봅니다. 마지막에는 인터랙션 라이브러리에서 조건과 변수를 사용하는 방법을 자세히 알아보겠습니다.
ProtoPie 앰배서더이자 트레이너인 Darren Bennett.
ProtoPie의 ‘조건’이란 무엇인가요?
이름 그대로, 조건 트리거는 프로토타입이 실행되거나, 특정 텍스트 문자열이 수신되거나, 레이어가 특정 위치로 이동했을 때처럼 특정 조건에 따라 인터랙션을 활성화합니다. 조건은 특정 요구 사항에 따라 응답을 활성화합니다:
체인
범위
시작
감지
조건은 특정 요구 사항에 따라 응답을 활성화합니다.
ProtoPie의 ‘변수’란 무엇인가요?
변수를 값들을 저장하는 ‘바구니’라고 생각해 보세요. 이름, 비밀번호, 계좌 잔액처럼 나중에 사용할 수 있는 어떤 데이터든 저장할 수 있습니다. 변수의 값을 수정하고 변수의 변화를 감지해 동적인 인터랙션을 만들 수 있습니다. 수식을 사용할 수 있는 곳이라면 어디에서든 변수를 사용할 수 있습니다.
변수는 값을 저장하는 ‘바구니’와 같습니다.
‘인터랙션 라이브러리’란 무엇인가요?
인터랙션 라이브러리는 기본적으로 ProtoPie Cloud에 존재하는 컴포넌트 모음으로, 팀원들이 프로토타입에서 컴포넌트 인스턴스를 매우 쉽고 빠르게 사용할 수 있게 해 줍니다.
인터랙션 라이브러리.
인터랙션 라이브러리에서 ProtoPie의 조건과 변수를 사용하는 방법
컴포넌트 상태를 제어하는 방법
가장 먼저 버튼 컴포넌트부터 시작해 봅시다. 버튼은 가장 단순한 UI 컴포넌트이자 여러 상태를 가진 컴포넌트입니다.
비활성 상태뿐 아니라 색상 상태까지 오버라이드를 만들어 시작하세요.
오른쪽에서 ‘disabled’ 값을 “1”로 설정하세요. 코딩 경험이 있다면 0과 1이 각각 true와 false라는 사실에 익숙할 것입니다.
disabled 및 색상 상태에 대한 오버라이드를 만드는 것부터 시작하세요.
오버라이드할 수 있게 만드세요. 외부에서 컴포넌트를 사용하는 사람이 접근할 수 있도록 체크박스를 선택합니다. 변수가 변경될 때는 ‘detect’ 트리거를 사용하세요.
그러면 상태가 감지되고 조건 블록이 실행됩니다.
변수가 변경될 때 사용되는 Detect 트리거.
고유한 컴포넌트 인스턴스 만들기
컴포넌트와 인스턴스를 다루기 시작하면, 각각에 직접 개별적으로 말을 걸고 싶어질 것입니다. 방법은 이렇습니다.
그룹의 일부로 동작해야 하는 단일 컴포넌트인 라디오 버튼부터 시작해 봅시다.
오른쪽의 오버라이드 패널에서 두 개의 변수를 사용합니다. ‘name’ 변수는 각 라디오 버튼에 고유한 이름을 부여하고, ‘radio group’ 변수는 컴포넌트를 더 똑똑하게 만들어 다른 인스턴스들을 인식하게 합니다.
‘Name’과 ‘Radio Group’ 변수를 설정하기.
내부에는 여러 변수가 있습니다. 두 오버라이드 변수인 ‘name’과 ‘radio group’ 변수를 주목하세요.
라디오를 클릭하면 씬에 라디오가 클릭되었다는 메시지를 보냅니다.
그 메시지가 씬에 전달되는 즉시, 컴포넌트 내부에서도 이를 다시 받아들이는 또 다른 메시지를 받게 됩니다. 사실상 그것을 듣고 있는 셈입니다.
메시지가 돌아오면 ‘ReceivedGroup’과 ‘SelectedName’ 같은 다른 변수에 할당됩니다.
메시지가 들어오면 두 변수를 비교할 수 있게 해 주는 조건을 사용하세요. 이 라디오의 이름이 선택된 이름과 일치하나요? 이 두 값은 같은가요? 그리고 같다면, 이 특정 인스턴스가 선택되었다는 뜻인가요?
조건을 사용해 두 변수를 비교하기.
복잡해 보일 수 있지만, 곧 자연스럽게 익숙해질 것입니다.
변수에서 수식 사용하기
이 점을 설명하기 위해 타이머를 만들어 봅시다. 커뮤니티의 많은 사람들이 해결 방법을 찾고 있는 주제이기도 합니다.
간단합니다. 보통은 화면에 나타나는 데 시간이 조금 걸리고, 일정 시간 동안 머문 뒤 사라집니다. 하지만 컴포넌트와 화면에 머무는 시간을 제어할 수 있습니다.
간단한 오버라이드 기능이 있는데, 바로 화면에 머무는 시간인 ‘duration’입니다.
화면에 머무는 시간을 설정하기.
타이머의 현재 값에 관계없이 “+1”을 더하세요. ‘repeat’ 기능을 활성화해 숫자가 올라가도록 합니다.
지속 시간이 충족되면 Detect를 사용해 타이머가 완료되었는지 감지하세요. 해당 조건이 실행되면 ‘snap bar’를 다시 아래로 이동시키고 변수의 시간을 0으로 재설정합니다.
Detect 트리거를 사용해 타이머가 완료되었는지 감지하기.
더 알아보려면 다음 튜토리얼을 확인하세요: 수식과 변수를 사용해 스톱워치 타이머 만들기.
ProtoPie로 창의력을 무한하게 펼치세요
Google, BMW, GoPro의 디자인 팀은 ProtoPie를 사용해 창의력을 마음껏 발휘합니다. 여러분은 왜 안 되겠어요?
ProtoPie 다운로드를 지금 바로 무료로 받아보세요.
ProtoPie 앰배서더 Darren Bennett가 ProtoPie에서 만든 최초의 인터랙션 라이브러리인 SkeletonUI를 확인해 보세요.
