요소복제 및 더미데이터 간편 삽입 '크래프트 CRAFT' *스케치앱, 포토샵 서드파티 프로그램*

 

웹 기반 프로토타이핑 서비스를 제공하는 인비전 invision에서 출시한 UI 디자인 보조 툴 크래프트 craft를 사용해 봤다. 크래프트는 요소복제와 더미데이터 삽입을 간편하게 해주는 스케치앱과 포토샵의 서트파티 프로그램이다. 크래프트에는 가이드 생성 기능과 아직 오픈되지 않은 프로토타이핑 기능도 포함되어 있는데 여기서는 요소복제와 더미데이터 삽입 기능을 소개한다. 

스케치앱 플러그인 컨텐츠 제너레이터로 더미데이터 자동 삽입의 맛을 본지 며칠 만에 크래프트를 알게 되었는데 기능이 훨씬 좋다. 삽입되는 이미지의 느낌도 마음에 든다. 텍스트 더미 데이터에 한글도 사용할 수 있다. 

 

다운로드 및 설치

다운로드 https://www.invisionapp.com/craft 

다운로드 후 실행하면 어도비 크리에이티브 클라우드의 관리 프로그램처럼 상단에 떠있다. 

 

이곳에서 Install 버튼을 눌러서 설치하면 된다. 설치되기 전에는 Up to date 라고 쓰여있는 곳에 Install 버튼이 있다. 나의 경우에는 처음 설치할 때 오류 메세지가 나오면서 설치가 잘 되지 않았는데 재부팅해서 Craft Manager 삭제 후 다시 시도 해보니 설치가 되었다. 

위 스크린샷에서 보다시피 Sketch용과 Photoshop용을 별도로 설치해야 한다.

 

스케치앱에 추가된 크래프트

설치가 정상적으로 되면 스케치앱에서 다음과 같이 인스펙터 옆에 4개의 아이콘이 생긴다. 위에서부터 순서대로 요소복제, 이미지삽입, 가이드생성, 텍스트삽입 도구다. 

 

 

 

1. 요소복제

Inside Selection과 Specific Count의 두 가지 방식으로 복제할 수 있다.

• 인사이드 셀렉션은 복제할 요소의 가로방향, 세로방향의 간격을 설정한 뒤 실행하면 일정한 영역의 마스크가 자동으로 생성되면서 그 영역에 해당하는 만큼 요소가 복제된다. 영역을 드래그해서 늘리거나 줄이면 복제 요소도 추가 또는 삭제 된다.
• 스페시픽 카운트는 가로방향, 세로방향으로 복제할 개수를 지정해서 실행한다. 

 

복제할 요소 Shape과 Text를 선택한 뒤 인사이드 셀렉션의 Horizontal을 20으로 입력하고 복제했다.

 

 

다음과 같이 마스크영역이 생기면서 가로로 3개가 복제됐다. 
이 상태에서 설정했던 요소의 간격을 줄일 수 있다. Horizontal을 10으로 바꾸고 Adjust Gutter 해보자. 

 

 

요소의 간격이 줄어들면서 마스크영역 내에 요소가 추가로 더 보인다.

 

 

이제 세로방향으로 복제해보자. Vertical을 20으로 하고 Adjust Gutter 한다. 아직 아무 변화가 보이지 않는다. 

 

 

마스크영역 아래의 사각버튼을 잡아 아래로 드래그 해보자. 그럼 다음과 같이 늘어난 마스크영역 만큼 요소가 복제되어 보여진다. 

 

 

이번에는 가로방향, 세로방향으로 복제될 개수를 지정하는 스페시픽 카운트 Specific Count를 사용해보자. 

간단하다. 복제할 요소를 선택하고 Specific Count에서 Vertical과 Horizontal에 복제 개수와 간격을 입력하고 실행하면 된다. 

 

 

 

2. 더미이미지 삽입 

 

이미지 삽입은 4가지 방법으로 가능하다. 

• Folder
• Dropbox
• Unsplash
• Web 

PC에 저장된 이미지를 선택해 삽입하려면 Folder를 이용하면 된다.

드롭박스에 업로드 되어있는 이미지를 삽입하려면 Dropbox를 이용하면 된다.

크래프트의 매력은 Unsplash와 Web이다.

Unsplash 언스플래시의 드롭다운을 펼쳐보면 색상, 카테고리의 2가지로 웹을 실시간 검색해서 더미 이미지를 삽입해준다. 확실하진 않지만 아마도 CC0 라이센스 이미지를 제공하는 unsplash.com을 검색하는 게 아닐까? 

*내용 정정 2016.5.22 
⌈드롭다운을 펼쳐 검색어, 색상, 카테고리의 3가지로 웹을 실시간 검색한다⌋ 는 내용을 정정한다. 
드롭다운에서 입력한 검색어는 드롭다운 리스트에 사전에 정리되어 있는 카테고리를 검색하는 기능이다. 입력한 검색어로 unsplash 사이트를 검색하는 것은 아니다.

 

 

동물과 관련된 더미이미지를 삽입해보겠다. Animals를 선택하고 실행한다. 웹에서 이미지를 실시간 검색해서 삽입하기 때문에 개수에 따라 시간이 좀 걸리기도 한다. 

 

 

이미지검색중...

 

 

잠시 기다리면 다음과 같이 동물관련 이미지가 삽입된다. 이미지가 마음에 들지 않는 다면 다시 Place Photo를 클릭한다. 마음에 들지 않는 이미지만 선택한 후 클릭해도 된다. 

 

 

Web은 특정 웹페이지의 이미지를 긁어와서 삽입해주는데 제대로 삽입이 안 되는 경우도 있다. 이미지저장이 허용된 사이트만 제대로 작동하는 게 아닐까 싶다. 

 

한번 해보자. 

이미지가 삽입될 Shape을 선택 후 Web을 클릭한다. 처음에는 구글 검색페이지가 나온다. 레몬차를 검색해본다. 화면의 아무 곳이나 클릭하면 해당 페이지에 있는 이미지를 긁어다가 삽입해 준다. 

하지만 검색결과 중에 ‘레몬차 관련 이미지’ 링크로 들어가 보겠다. 안내 메시지에 나와있듯이 Command키를 누른 상태로 클릭해야 링크로 들어갈 수 있다. 그냥 클릭하면 그 페이지의 이미지를 긁어온다. 클릭 후 이미지가 들어오기 까지 시간이 좀 걸린다. 

 

레몬차 이미지 검색 화면으로 들어왔다. 여기서 화면의 아무 곳이나 클릭한다. 

 

웹 페이지에 있는 이미지를 긁어다가 아래처럼 삽입해준다. 

느낌 전달하는데 이정도 이미지면 충분하지 않을까 싶다. 검색되는 동안 기다려야 하는 불편함이 있지만 그래도 이 정도 느낌이 나와준다면 괜찮은 듯.

 

 

 

3. 더미텍스트 삽입

크래프트는 다양한 유형의 더미텍스트를 일괄 삽입할 수가 있다.
위에 보이는 9개 유형 외에 비어있는 점선 박스를 클릭하면 프로그램 자체적으로 가지고 있는 전화번호, 우편번호, 시간, 월, 색상 등 다른 텍스트 유형을 더 추가할 수가 있다. 그리고 자기만의 더미텍스트를 만들어 놓고 사용할 수도 있다. 

 

다양한 텍스트 유형

Names 을 클릭하면 남자이름 Male, 여자이름 Female, 둘다 Both 등으로 상세한 타입을 제공한다. Headlines과 Article, Dates, Currency 등도 상세 타입을 선택할 수가 있다. 

 

 

자신만의 더미텍스트 만들기 

Preserve order 체크 시 입력한 순서대로 삽입 된다.

 

 

프로그램에 저장되어 있는 다른 텍스트 유형을 패널에 추가하기

비어있는 점선 박스 Add action 클릭 후 목록에서 선택한다. 

 

 

목록 편집하기

우측 상단의 편집 아이콘을 클릭하면 편집 상태가 된다. X를 클릭하면 잘 사용하지 않는 텍스트 타입을 숨길 수 있다. 직접 만든 더미데이터의 X를 클릭하면 삭제된다. 직접 만든 더미데이터에는 연필아이콘이 있는데 클릭하면 데이터를 수정할 수 있다.

 

 

 

마치며

아래는 크래프트의 unsplash 에서 red 컬러를 선택해서 검색한 이미지와 내가 직접 만든 한글별명 더미텍스트로 구성한 목록이다. 

사실 스케치앱의 제너레이터 플러그인이 검색해서 삽입해주는 더미이미지가 대체로 마음에 들지 않았는데 unsplash 이미지라 그런지 전반적으로 마음에 든다.

 

  

*내용 추가 2016.5.22 

며칠전 크래프트 앱이 업데이트 되면서 스케치앱에 설치된 툴 아이콘 모양이 변경되었다. 툴의 구성에도 변화가 있었는데 가이드생성 도구가 빠지고, 라이브러리 도구가 새로 생겼다. 

위에서부터 순서대로 요소복제, 라이브러리(신규기능), 이미지삽입, 텍스트삽입 도구다. 이 글에서 소개한 요소복제, 이미지삽입, 텍스트삽입 기능에 별다른 변화는 없는 듯하다.