아트보드
스케치의 아트보드와 거의 같다. 어도비 애들도 최근에 아트보드를 도입했다. 포토샵CC와 최근 클로즈드 베타 중인 코멧(Comet) 등이 그렇다.
아트보드를 사용했을 때의 가장 큰 장점이라면 UI 플로우를 시각적으로 확인 가능하다는 점이다. 여기에 미리보기까지 사용하면 디자인 과정에서 최대한 실제 결과물과 동일한 수준의 사용성을 미리 경험해 볼 수 있다.
프린서플 아트보드의 단점이라면 아트보드 간 자유로운 위치 이동이 안된다는 점이다. iOS가 런처 아이콘의 빈 자리 없이 아이콘을 자동으로 채우는 방식과 동일하다. 몇 페이지 안되는 프로토타이핑이라면 별 문제가 없지만 시나리오가 길어질수록 화면이 복잡해 진다.
해외 포럼에서도 이 부분에 대해 많은 사용자들이 불편을 느끼고 있다고 하니 앞으로 개선되리라 기대해 본다.
사각형
프린서플에서 비주얼 디자인을 위해 제공하는 툴은 딱 하나다. 바로 사각형(Rectangle)이다. 상단 메뉴바 좌측의 ‘사각형(Rectangle)’ 아이콘을 눌러보자.
기본적으로 44x44 사이즈의 사각형이 생성된다. iOS 기본 터치 영역이 이 크기니 이것보다 작은 터치 영역으로 디자인하지 말라는 얘기다. 암튼 이 사각형을 선택한 채로 캔버스 왼쪽 상단의 인스펙터에서 다양한 설정을 할 수 있다.
이제 이 사각형을 기본으로 다양한 도형을 그릴 수 있는데 Boolean 기능이 없으니 너무 큰 기대는 하지 말고 그냥 다른 툴에서 불러오길 추천한다.
텍스트
텍스트 역시 사각형과 기본 속성이 비슷하다. 예전 버전에서는 캔버스에서 설정한 서체가 미리보기에서 제대로 표현되지 않았었는데 최근 업데이트를 통해 이 부분을 개선했다. 나눔바른고딕 같은 한글도 문제 없이 잘 표현된다.
이미지
프린서플의 이미지 임포트(Import)는 살짝 다르다. 아니 좀 이상하다. 메뉴바에서 ‘File > Import Images’를 클릭하면 다음과 같은 팝업이 뜬다.
이미지 불러올 때 드래그로 불러오라는 것이다. 드래그&드랍만 가능하다.
폴더에서 원하는 이미지를 선택한 후 프린서플의 아트보드로 드래그하면 된다. 한 가지 좋은 점이 있다. 스케치로 작업 중이라면 아트보드에서 원하는 이미지를 카피해서 프린서플에 붙여넣기 하면 알파 값이 유지된 채 카피된다는 점이다.
참고로, iOS 디자인 작업 시 파일명 끝에 ‘@2x’나 ‘@3x’을 붙여주는데 이런 이미지들은 프린서플 미리보기에서도 그 해상도에 맞게 고화줄로 출력해 준다.
그룹
여러 개의 레이어를 선택한 후 Command+G를 눌러 그룹을 만들 수 있다. 앞서 얘기한 것처럼 사각형을 기반으로 다양한 도형을 만들 때도 사용할 수 있다.
크롭/마스크/클리핑
프린서플에서 이미지나 도형에 크롭/마스크/클리핑을 적용하려면 먼저 해당 이미지를 그룹으로 만들어야 한다.
만약 위 그림의 로고를 반으로 잘라내고 싶다면? 그룹으로 만들고 아래와 같이 그룹 레이어의 영역을 조절한다.
이렇게 하고 미리보기를 보면 아무 변화가 없다. 이 상태에서 왼쪽 상단 인스펙터에서 ‘Clip Sublayers’를 체크해 준다.
캔버스와 미리보기에서 수정된 이미지를 볼 수 있다.
‘적당히’ 활용하면 ‘적당히’ 번거로움을 덜어줄 수 있는 정도의 기능들이다.
오늘은 여기까지…
비주얼 디자인은 스케치나 포토샵으로 디자인해라. 프린서플은 마이크로 인터랙션 테스트가 필요한 부분이나 전반적인 플로우 점검 시 사용해라. UI 설계하는 분들은 파워포인트나 키노트 대신 프린서플에서 바로 플로우를 그려보길 권장한다. 뻔한 UI 말고 참신한 UI 만들고 싶은 생각이 들 때 말이다.
