ProtoPie는 사용자가 모든 측면에 쉽고 시각적으로 접근할 수 있도록 GUI를 사용하는 WYSIWYG 도구입니다. 따라서 적절한 아이콘을 만들어 내는 일은 결코 쉬운 일이 아니었습니다.
결합된 피스
위 이미지에서 Trigger와 Response 피스의 아이콘을 볼 수 있습니다. 오늘은 제스처 아이콘 세트를 제작하는 과정에 대해 이야기해 보려 합니다. 제스처를 2D로 표현하는 것은 쉽지 않으며, 우리는 항상 더 나은 아이콘을 원하기 때문에, 이번 기회가 Pie 팬 여러분이 소중한 피드백을 보내 주실 수 있는 기회가 되었으면 합니다.
왜 제스처 아이콘이 필요할까요?
텍스트 라벨만 있는 Interaction Piece는 직관적으로 이해하기 어렵습니다.
Trigger와 Response의 이름만 적어서는 현재 어떤 일이 일어나고 있는지 명확하게 전달하기에 충분하지 않기 때문에 아이콘이 필요합니다. 또한 각 Piece의 이름을 변경할 수 있기 때문에, Piece의 원래 속성을 보여 줄 필요가 있었습니다. 더 나아가 아이콘 세트는 Trigger와 Response의 집합으로 인터랙션을 만든다는 ProtoPie의 개념을 전달하기에도 좋은 방법처럼 보였습니다.
제약 사항 이해하기
대부분의 제스처 아이콘은 손가락 메타포를 사용하며, 이런 아이콘은 매우 이해하기 쉽습니다. 그러나 ProtoPie에는 공간 제약이 있고, 앞으로 더 많은 Trigger와 Response를 추가할 예정입니다. 따라서 우리는 일관성을 유지하면서 제스처를 더 미니멀한 방식으로 표현해야 합니다. 그 외에도 몇 가지 다른 제약 사항이 있습니다.
우리가 Interaction 아이콘을 만들 때 염두에 두어야 하는 몇 가지 제약 사항.
아이콘은 14px x 14px 이하여야 합니다.
비슷한 제스처는 시각적으로 묶을 수 있어야 하지만, 다른 제스처는 명확하게 구분되어야 합니다.
하나의 아이콘에 세 개 이상의 메타포를 사용할 수 없습니다.
아이콘은 단일 색상이어야 합니다.
제스처 분류하기
Trigger를 어떻게 분류할지에 대한 우리의 생각을 보여 주는 이미지
아이콘을 만들기 전에, 우리는 Trigger와 Response를 그 속성에 따라 분류하고 특정 규칙에 따라 배치하기로 했습니다. 우리의 생각은 Trigger와 Response가 목록 메뉴에서 일관된 방식으로 정렬되면, 사용자는 문맥을 바탕으로 Trigger를 쉽게 이해할 수 있고, 원하는 Trigger와 Response를 더 빨리 찾으며, 더 효율적으로 인터랙션을 만들 수 있다는 것이었습니다.
다시 말해, Tap이나 Move 같은 일반적인 인터랙션은 큰 문제가 없더라도 ProtoPie가 도입한 Chain이나 Range 같은 새로운 유형의 인터랙션이나, 다른 곳에서는 Flick으로 알려진 Fling처럼 다른 이름으로 알려질 수 있는 인터랙션에는 텍스트 라벨만으로는 충분하지 않을 수 있습니다.
이러한 이유를 바탕으로 우리는 Trigger를 네 가지 범주로 나누었습니다.
Trigger 범주
아이콘의 외형과 느낌은 ProtoPie의 다른 영역에서 보이는 아이콘과 같아야 했습니다. ProtoPie는 소프트웨어가 서비스가 아니라 생산성을 제공하는 도구이기 때문에, 아이콘의 미적 요소보다 명확성과 가독성을 우선했습니다. 아이콘의 크기 제한은 결국 아이콘의 최종적인 모습을 자연스럽게 결정하는 데 도움이 되었습니다. 아이콘에 귀여운 느낌을 줄 수 있는 둥근 모서리 대신, 우리는 각진 모서리를 선택했습니다. 또한 좁은 선을 사용해 제한된 크기에서 아이콘이 답답해 보이지 않도록 했습니다.
이제 각 Trigger 아이콘의 특징을 시각적으로 살펴보겠습니다.
아이콘에 속성 표시하기
일회성 Trigger와 연속 Trigger
일회성 Trigger와 연속 Trigger는 화면 입력에 따라 실행됩니다. 따라서 우리는 공통의 터치 동작 메타포를 사용할 수 있었습니다. 손가락을 대신하기 위해 화살표를 선택했으며, 화살표를 사용하면 방향성과 움직임의 느낌을 표현할 수 있다는 장점이 있습니다. 화면의 표현은 가능한 한 최소화했고, 이 아이콘은 누군가가 손가락으로 화면을 터치하고 있는 사람을 마주 보고 있을 때 보게 될 모습을 반영합니다.
일회성 Trigger는 Y축에서 본 손가락과 화면으로 표현됩니다.
Tap은 Touch Up과 Touch Down을 결합한 Trigger입니다.
더블 탭
더블 탭은 연속된 두 번의 Tap으로 이루어진 Trigger이므로, 더블 탭 아이콘은 Tap Trigger 아이콘과 유사한 특징을 가집니다. 또한 이 아이콘은 Trigger의 기능을 짐작할 수 있도록 설계되었습니다.
Touch와 관련된 Trigger 아이콘의 차이는 시간 차이인지 압력 차이인지에 있습니다.
Touch Down, Long Press, 3D Touch Trigger는 압력이나 시간에 따라 서로 구분됩니다. 따라서 화면 메타포의 차이를 보여 주면 서로 다른 Trigger를 구분할 수 있습니다. 그 결과 3D Touch Trigger는 Sensor Trigger이지만, 그 아이콘은 다른 일회성 Trigger의 아이콘과 비슷하게 보이도록 설계되었습니다.
Fling
Fling Trigger는 스와이프가 일정한 속도나 거리로 이루어져야만 실행될 수 있습니다. 곡선 화살표는 이러한 선행 조건을 표현하는 데 도움이 됩니다.
연속 Trigger: Drag, Pinch, Rotate
일회성 Trigger와 달리 연속 Trigger는 화면이 터치되는 순간 시작되어 물리적 접촉이 더 이상 없을 때까지 계속 진행됩니다. 따라서 아이콘은 손가락이 화면에 흔적을 남기는 모습을 보여 주는 궤적 메타포를 사용합니다. 일회성 Trigger와 달리 연속 Trigger의 아이콘은 위에서 동작을 바라보았을 때 보이는 모습을 나타냅니다.
연속 Trigger 아이콘은 Z축 방향에서 본 시점을 표현한 것입니다.
조건부 Trigger
조건부 Trigger 아이콘
조건부 Trigger는 속성의 변화에 따라 2차 응답을 활성화합니다. 따라서 입력 동작 대신 각 Trigger의 속성을 아이콘으로 보여 주어야 합니다.
Chain Trigger는 속성의 변화에 따라 항상 2차 응답을 활성화합니다. 우리는 Chain Trigger를 정의하는 과정에서 “Mapping”이라는 용어를 사용하고 있다는 사실을 깨달았습니다. 자연스럽게 두 속성이 서로 연결되어 있음을 보여 주기 위해 체인 메타포를 사용했습니다.
Range Trigger도 Chain Trigger처럼 속성의 변화에 따라 반응하도록 설정할 수 있지만, Range Trigger와 Chain Trigger의 차이점은 Range Trigger가 미리 정의된 값 범위에 들어갈 때 Response를 활성화한다는 점입니다. 우리는 Property 패널의 배치 설정을 나타내기 위해 아이콘에 수직선을 선택했습니다. 따라서 Trigger 아이콘에는 수직선 메타포를 사용했습니다.
Sensor Trigger
Sensor Trigger 아이콘
Sensor Trigger의 아이콘은 모바일 기기에서 어떤 센서를 사용하는지 보여 줍니다. ProtoPie는 현재 4가지 유형의 센서를 지원합니다.
Tilt Trigger는 기기가 X축 또는 Y축으로 얼마나 기울어졌는지 감지합니다. 기울이기는 특히 표현하기 어려운 제스처였고, Google 검색 결과에는 모바일 기기가 Z축을 따라 회전하는 모습을 묘사한 아이콘이 보여 매우 오해의 소지가 있으며 Z축 회전이 암시된다는 인상을 줄 수 있습니다. 따라서 원근감을 보여 주도록 기기를 묘사하는 것이 옳습니다.
Compass Trigger는 모바일 기기의 나침반 센서를 사용해 기기의 각도를 절대 북쪽과의 관계로 결정하므로 나침반 아이콘을 사용합니다.
Sound Trigger는 기기 주변 소리의 크기를 측정하므로 마이크 메타포를 사용합니다.
Response
다른 프로그램의 Response 아이콘
Response 아이콘을 설계할 때, 우리는 정해진 규칙을 따르기보다 각 Response의 특징을 강조하는 것이 중요하다고 보았습니다. 대부분의 Response는 드로잉 도구에서 흔히 볼 수 있는 메타포를 사용하므로, 보편성을 유지하는 데 신경 썼습니다.
Response 아이콘 세트
Response를 나열하는 데는 정해진 기준이 있습니다. Response는 사용 빈도를 고려해 배열되며, 레이어의 좌표를 변경할 수 있는 Move, Scale, Rotate, 3D Rotate가 상단에 배치됩니다. 그다음에는 레이어의 시각적 특성을 수정하는 Opacity, Color, Radius Response가 있습니다.
완성된 아이콘 세트
ProtoPie 제스처 아이콘 세트
적절한 메타포와 공통 디자인 언어가 있으면 아이콘은 제품을 더 정교하게 다듬어 줍니다. 아이콘은 화면에서 많은 공간을 차지하지 않지만, 생산성과 사용성에 큰 영향을 미칠 수 있습니다. 그래서 우리는 ProtoPie에서 사용되는 아이콘을 항상 검토하고 다듬습니다.
이렇게 완성된 아이콘은 현재 ProtoPie Studio 외의 다른 용도로도 사용되고 있습니다. 아이콘 세트는 ProtoPie 출시 이벤트 초대장에 인쇄된 패턴을 만드는 데 사용되었습니다. 또한 이 아이콘들은 튜토리얼에 등장해 사용자가 개념을 이해하는 데 도움을 줍니다.
우리는 제스처 인터랙션을 표현하는 데 관심 있는 다른 디자이너들을 돕고자 SVG 파일과 아이콘 폰트를 공유합니다.
