brunch

You can make anything
by writing

C.S.Lewis

by 박준형 Jun 11. 2016

Sketch+Craft_Prototype으로
카톡만들기

디자이너들이 더욱 바빠질 것 같다

Invisionapp에서 가장 기다리던 소식은 언제 silverflow(지금은 Craft prototype)를 써볼수 있느냐는 것이었다. 그런데 몇일 전, 베타키를 배포하고 있다는 소식을 듣고 부랴부랴 고객센터에 ~~(더듬더듬 영어로)~~ 메일을 보내 Prototype을 써 볼 수 있었다. (메일을 보내면 베타키와 설치하는 방법까지 함께 보내준다)

써보고 든 생각은 와 이거다! 싶었다.

원래 Invisionapp의 짧은 러닝커브는 완전 마음에 들었지만, 표현할 수 있는 인터랙션의 풍부함이나 스케치 파일을 올리고 나서 프로토타이핑 할 때 다시 한 번 아트보드들을 정리해야만 하는 것은 여간 귀찮은 일이 아니었다.

그런데 스케치 파일 위에서 바로 작업하고 결과물을 폰에서 바로 확인하니 간편하기 이를데없다. 심지어 iOS app을 기획하고 있다면 Skala preview로 매번 결과물을 확인할 필요도 없을만큼 싱크도 실시간으로 잘 된다.

참 좋은 제품이 나왔는데 그냥 기능들을 열거 하는 것보다 조금 더 이해하기 쉽게 카톡만드는 과정을 이 글로 소개하려고 한다. (사실 전체 기능을 다 써보지 않아서 자세히는 다 모르기때문이기도 하다..)

Craft_protoype으로 카톡만들기

1. 스케치로 프로토타이핑할 카톡페이지를 만든다. 과정은 다음과 같다.

참 쉽죠?

2. 같은 방식으로 대화방 아트보드도 만들어준 후 katalk room1과 링크시킨다.

이 때, 연결되는 개체는 레이어 단위이므로 슬라이스 하거나 사각형을 만들어서 그것과 연결 시킨다

3. URL을 사파리로 연결하기

개체를 누른 상태에서 단축키 c를 누르면 선 형태의 인디케이터가 노출되는데, 상단의 어플리케이션 목록에서 사파리 아이콘에 연결시키면 다음과 같은 대화상자가 호출되고 웹사이트 링크를 작성할 수 있다.

4. 입력필드 만들기

이건 아주 쉽다. 개체를 누른 상태에서 인풋필드라고 지정해주면 되는데, 오직 텍스트 레이어만 인풋필드로 만들어 줄 수 있다. (타이핑 되는 서식도 텍스트 레이어의 서식을 따른다)

5. 모달 뷰를 만든다

카톡 보면 대화창 위 레이어 형태로 모달뷰를 띄울때가 있는데 그 액션을 구현하고 싶다. 그러러면 빈 아트보드에 모달뷰들을 만들어놓고 각각 연결시키면 된다. 이럴 때 유의할 점은 아트보드 배경색이 반드시 비어있는지 확인해야한다는 것이다. 아니면 이전 화면을 완전히 덮어버린다.