{Sketch+Framer} Studying to make my prototype_ver.Kor

실무에서 사용 중인 지인 디자이너들에게 어깨너머로 이야기 몇 마디 들은 것이 전부인 스케치와 프레이머를 올해 들어서야 손에 잡아보기 시작했다. 그에 관한 스터디 일지 및 주관적인 감상 후기문이다.

이미 해당 툴들이 출시된 지 시간이 좀 되었기에 어떤 분들에게는 지금은 너무 당연한 이야기의 반복이 될지도 모르겠다. 다만, 나 또한 스터디할 때 이렇게 일지 남겨주시는 분들의 이야기를 읽으며 공감할 때도 있고 배우는 점도 있어 개인 기록용이긴 하나 나의 이야기도 누군가에게는 도움이 되었으면 하는 마음으로 공유한다.

{1} Sketch

첫 번째, UI를 위한 그리고 Material Design을 위한 툴

스케치는 확실히 포토샵보다 UI 작업을 위해 기능을 최적화되었음을 인터페이스만 보고도 느껴졌다. 다만 포토샵에서 하던 레이어층이 두터운 그래픽의 UI 작업은 힘들어 보였고 플랫한 머터리얼 디자인(Material Design)에 더 강점을 보였다.

스케치 자체는 인터페이스 위치가 다르거나 UI 작업하기에 더 편하게 메뉴 속성을 다르게 분류했을 뿐이지 포토샵과 크게 다르지는 않았다. 유투브나 블로그 등을 참고하여 예제 한두 번 따라 해본다면 크게 어렵지는 않았다.

필자는 작년에 블랙 프라이데이 세일을 통해서 udemy 온라인 강의 사이트에서 강의를 구매를 해서 들었다. 기능 사용의 큰 틀을 배우는 것은 이러한 강의를 이용했지만 그 때 그 때마다 필요한 요소는 역시 유튜브나 블로그 등에서 찾았다. 한국 서비스로는 에듀케이션 위드(edwith)라는 곳에서 ‘3일 만에 배우는 Sketch'라는 강의도 무료 배포되어 있으니 참고하기 바란다.

두 번째, 작업 요소들을 체계화 정리하는 데에 탁월성

한 눈에 볼 수 있는 스케치툴 작업 플로우

처음 스케치가 UI에 최적화되어 있는 툴이라고 느낀 첫 번째 기능은 ‘아트보드(Artboard)’이었다. 보통 포토샵이든 스케치든 새 작업판을 생성할 때 프로그램이 디폴트로 제공하는 사이즈가 있다. 예를 들어 앞으로 우리가 작업해야 할 작업물이 아이패드에서 구동될 것이라고 가정하고 아래의 이미지를 비교해보자.

포토샵(좌)과 스케치(우)의 아트보드 생성 옵션

아이패드의 해상도(768x1024)를 알고 있다면 양쪽 기능에서 큰 무리 없이 사이즈를 찾을 수 있지만 아이패드 단어만 알고 있어도 한눈에 바로 찾을 수 이는 것은 확실히 스케치이다. 작년에 스케치를 체험판으로 다운받아 봤을 땐 디폴트 아이폰 사이즈가 6였는데 현재는 업데이트되어 7인 것도 소소하지만 인상적이었다.

포토샵에서는 스마트 오브젝트(Smart Object)가 있다면 스케치에는 ‘심볼(Symbol)’이 인상적이었던 두 번째 기능이다. 하나의 개체이지만 독립된 공간으로 넘어가 추가 작업도 가능하다는 기본 성질은 스마트 오브젝트와 같지만 스케치의 장점인 작업 플로우를 한 화면에서 확인할 수 있는 요소가 더해져 인터페이스의 요소들을 관리하기 편했다.

포토샵에서는 본 작업창과 스마트 오브젝트창과의 전환과 수정 반영 로딩이 걸리는 반면 스케치는 전환과 함께 심볼이었던 이미지를 그룹 풀기와 같이 다시 일반형으로 변환도 바로 할 수 있어 작업 전체의 속도감이 시원하게 붙는 느낌이었다. 특히 벡터 기반이라는 점이 이러한 장점을 더 극대화하는 부분이었다.

심볼(Symbol) 역시 한 플로우에서 작업

한가지 아쉬운 것은 프레이머에서는 스케치의 심볼이 플로우 리스트에 표시되지 않아 코드 작업을 입힐 수 없었다. 말이 나온 김에 이번에는 툴에 대해 기본적인 감각을 익히기 위한 작업이었기에 스케치에서의 디자인은 간결하게 진행하고 바로 프레이머로 넘어갔다.

{2} Framer

첫 번째, 코드 까막눈에게는 초기 진입 장벽이 높은 툴

프로토타입툴로 프레이머를 가장 먼저 선택했던 이유는 많은 글들에서 인터랙티브 요소나 모션 등이 실제와 가장 흡사하게 표현 가능하다는 이유였었다. 이전에 인비전(invision)도 써보았으나 확실히 다루기 쉬웠고 실무를 위한 커뮤니케이션에서는 무리가 없는 화면 전환과 모션이 가능하긴 했지만 마치 PPT 프로그램으로 인터랙션 시뮬레이션을 만지는 느낌이었다.

그러나 인터랙션이 자연스럽게 실제와 비슷하게 프로토타입화된다 하니 이보다 더 매력적이지 않을 수가 없었다. 또한, 프레이머는 ‘디자인 모드(Design mode)’가 따로 존재하여 보통 코드로 일일이 작성해야 했던 것들을 디자인 모드에서 포토샵으로 만들듯이 도형을 그려내면 알아서 코드 모드에 코드가 작성되는 튜토리얼 영상을 봤을 때는 디자이너에게 매우 유용한 툴이라고 강력한 확신이 들었다. 물론 이 생각은 지금도 변함은 없다. 그렇지만 모든 디자이너에게 프레이머를 추천하고 싶지는 않다.

최근 적지 않게 디자인학과에서 프로그래밍 커리큘럼을 진행하고 있다고 알고 있다. 나 또한 재학 당시 플래시의 액션 스크립트부터 시작해서 인터랙션 파트의 피지컬 컴퓨팅 수업을 수강했었다. 그렇기에 프로그래머 분들처럼 전문적으로 알지는 못해도 코딩의 흐름(?)정도는 느낌상 알 수가 있었기에 그나마 프레이머의 작업 흐름이 이해가 되었지만 여전히 내가 원하는 인터랙션 구현을 위해서는 실제 프로그래밍 버금가게 리서치와 스터디를 요구했다.

프레이머 코드 모드 작업 모습— 위 흰색 코드와 달리 회색 코드는 실험 입력한 코드. 이것만 해도 코드줄 수가 방대하다.

두 번째, 코딩 작업의 시각화

공부하면서 힘도 많이 들었던 애증 있는 이 매력적인 툴은 위 단락에서 언급한 디자인 모드와 같이 코딩 작업 자체를 모두 일일이 손으로 입력하지 않아도 옵션창에서 선택 및 입력하게 하여 코딩 작성에 도움을 주었다.

예를 들어 스케치를 프레이머로 임포트 한 후 ‘Cha_01’이라는 이름을 가진 레이어를 탭 하면 인터랙션 이벤트가 발생하도록 코딩을 작성해본다고 가정해보자.

원하는 레이어에 오른쪽 버튼으로 메뉴창을 켜 이벤트 방법 선택

좌측 레이어 리스트에서 ‘Cha_01’에 오른쪽 버튼 클릭으로 메뉴창을 활성화시켜 해당 레이어에 이벤트를 추가(Add Event)하여 탭이 시작될 때(TapStart)만 발생하도록 하겠다라는 식으로 메뉴를 클릭한다.

그러면 자동적으로 우측 코드 모드에 코드값이 입력된 것을 아래 그림에서 확인할 수 있다. 스케치에서 불러온(sketch1) 해당 레이어(Cha_01)에 탭이 시작되면(onTapStart) 이벤트가 발생(event, lyaer)한다.

즉, sketch1.Cha_01.onTapStar(event, layer) ->인 것이다.

원하는 레이어에 인터랙션의 세부 속성값 좌 옵션창에서 입력

그 후, 발생될 이벤트에 어떤 애니메이션(animate)이 있을지 위에서 언급한 것과 똑같은 방식으로 애니메이션이 일어나게 할 레이어명(cover_up)에 오른쪽 클릭으로 메뉴창에서 입력해주면 된다. 그 후 세부 모션과 같은 속성값이 필요한 경우에는 위 그림과 같이 좌측 옵션창에 자동으로 속성 입력창이 활성화되어 해당 수치를 조정하면 이 역시도 자동으로 우측 코드 모드에 입력된다.

sketch1.Cha_01.onTapStart(event, layer) ->
sketch1.cover_up.animate
x: 0
y: -3

이러한 흐름으로 완성된 코드를 해석하자면 [Cha_o1이 탭이 시작되면 cover_up이라는 레이어의 y값이 -3으로 움직이는 애니메이팅이라는 이벤트가 실행된다]라고 보면 된다.

이것만으로도 벌써 이해가 잘 안되고 머리 아픈 사람도 분명 있을 것이다. 그래도 진짜 프로그래밍 툴 작업을 해봤거나 그 모습을 본다면 코딩을 해야 하는 프로그램치고는 프레이머는 친절한 편이라는 것을 알 수 있을 것이다.

간단하지만 이렇게 나의 첫 프로토타입 작업물이 완성되었다. 투자 시간과 과정 단계를 생각하자면 결과물 자체는 참으로 얼마 안 걸렸을 것 같은 모습이었다. 실제로 구동 체험해보실 분들에게는 아래 URL에서 체험 가능하다.

  • https://framer.cloud/rWNGt/
    앱스토어에서 Framer 앱을 설치하고 링크탭에서 위 URL을 넣으면 모바일 버전으로 감상도 가능.

이번 작업을 통해서 100퍼센트 내가 원했던 인터랙션과 모션이 프로토타입화되진 못했지만 그래도 자연스럽게 인터랙션이 흘러나오는 스크린을 보고 있자면 왜 디자이너들도 그 어려운 코딩 공부를 해가며 이 툴을 선호하는지 이해가 되었다. 그렇지만 앞서 말했듯이 모든 디자이너에게 추천하지는 않고 이러한 코딩 작업에 흥미를 느끼고 끊임없이 실험과 공부를 이어나갈 수 있는 분들에게 추천드린다.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade