Sketch App Korea 오프라인 워크숍후기(1)
LETS: Interaction Design & Prototyping
2016. 09. 10 토. 오후 2: 00 ~ 오후 5: 30
서울숲역에 위치한 카우앤독에서 Sketch App Korea의 2016 오프라인 워크숍이 열렸다.
본 워크숍은 <아래 이미지(출처 : https://www.facebook.com/groups/sketchappkorea/)>처럼
총 4개의 Session에 각 Session마다 2~3개의 강의가 한 번에 진행이 되었다.
그렇기 때문에 이 글은 내가 들은 강의와 전체 진행에 대한 이야기
그리고 나의 생각이 들어가 있는 후기.
위 강의 중에서 내가 들었던 강의는
Session A - A2 Let's Start FRAMER (안지용/카카오)
Session B - B1 ProtoPie : Code-free & Sensor-aided Prototyping tool for designers (신해나/Protopie)_강연자 분이 바뀜.
Session C - C2 Design Process : Service & Product (하경제/카카오)
Last Session - Panel Talk / Q&A (전체)
이렇게 강의를 들었기 때문에 후기는 전체가 아닌, 내가 직접 들은 것들만 작성되어있다.
1) Session A - A2 Let's Start FRAMER (안지용/카카오)
<필자가 사진을 날려먹어서, 강연자분의 사이트에서 가지고 왔습니다. 출저 : anzi.kr>강의 시간이 짧았기 때문에 많은 내용을 다루기보다는
실제로 간단한 예제 실습을 하면서, 기본 명령어를 익히고,
Framer 레이어와 작동 구조에 대해 설명하고 학습을 했다.
<Framer 설치 후, 강연자가 하는 대로 똑같이 코딩을 따라하면서 기본 코딩을 익히는 방식>강연자가 소개해준 framer 기본 코딩 설명서
주로 위에 있는 내용들을 다시 알기 쉽게 설명해주는 과정이었는데
좋았던 것은
이해하기 쉽게 포토샵과 비교를 해서 설명을 해준 점이었다.
포토샵에서 작업을 하기 전에 파일을 열고 Layer에서 작업을 하고, 속성을 Layer에서 주듯이.
Framer에서도 New layer를 만들어 그 안에서 다양한 명령어들을 입력해서 나가는 구조라는 것.
<이와 같은 예제를 각 기능별로 5가지 정도 진행을 했다.>*아래는 강의시간에 들은 설명들을 정리한 내용.
Visible:false (레이어 창의 눈(아이콘)과 비슷
Properties (개인의 특징, 외형)
Methods, Behavior (만들고, 먹고, 생각하고 하는 행동들)
LayerA(이름은 임의로 지정) = new Layer (레이어를 컨트롤해주기 위해서는 이름을 지정해줘야 한다.)
layerA = new Layer
layerA.name = "Layer A"
layerA.on Events.Click, (event, layer) ->
print "Clicked", layer.name
# Output: "Clicked", "Layer A"
<예시 코딩> 레이어 이름을 지정해주면, 그에 따른 이벤트들이나 행동들을 넣고 작동시킬 수 있습니다.
Framer에서
. (dot)이 붙는 건 해당 레이어에서 할 수 있는 속성과 기능들을 볼 수 있습니다.
<하단 이미지 참조>
Yoon 이라는 레이어에 . (dot)을 붙였을 때 하단에 관련된 기능을 바로 볼 수 있다.Read docs 에 대한 언급
- 강연자 분도 Framer 사이트에서 제공하는 docs를 보고 읽을 줄 안다면, Framer에 대한 이해가 더 쉬워질 것이라 설명을 해주었다.
-docs에서
제목에 ()가 붙은 것들은 행동 관련
<string>은 문자열을 입력
<number>는 숫자 입력
<하단 이미지 참조>
()가 붙은 것들은 행동관련
<string>은 문자열을 입력
<number>는 숫자입력내가 Framer를 항상 원하고 있었지만 혼자서 작업을 진행 못했던 것은
개념에 대한 이해가 부족했던 것이었다.... 역시 맨땅에 헤딩은 쉽지 않은 듯...
하지만 이번 강의를 들으면서 Framer의 기본적인 구조에 대한 이해를 할 수 있었던 것 같아 좋았고
약간의 울렁증을 극복하고, docs에 대한 이해도 했으니 이 강연을 토대로 조금씩 나아갈 수 있을 것 같다.
(코딩에 대해 무지한 자신을 다시 한번 반성..)
안지용 님 강연 잘 들었습니다. 감사합니다.
강연자 분의 개인 사이트 : Anzi.kr
Framer : https://framerjs.com/
2) Session B - B1 ProtoPie : Code-free & Sensor-aided Prototyping tool for designers (신해나/Protopie)
실제 Protopie를 만들고 계시는 신해나님께서 나와서 강의를 해주셨습니다.이번에도 노트북으로 Protopie를 실제로 만져보면서 진행하는 실습형 강의였다.
Protopie는 간단한 프로토타입 화면을 제작한 뒤에 핸드폰 화면에서 반영되는 모습까지 실시간으로 확인할 수 있는 과정까지 볼 수 있는 툴이었다.
Framer와 달랐던 건 직접 명령어를 작성하는 코딩이 주가 아닌, 약간의 Adobe After effect 또는 Flash와 같이 기능 및 이펙트들을 추가해서 직접 수치 등을 조정하고 간단하게 애니메이션도 넣고, 화면 전환 및 이동도 할 수 있게 만든 툴이었다.
특히 핸드폰에 Protopie앱을 설치하고, 연결을 하면 쉽게 바로바로 구동시켜 확인할 수 있었다.
강연자 분께서 인터렉션의 필수 요소로는
<Object, Trigger, Response> 이 3가지라고 정의해주었다.
*인터렉션의 대상인 Object(오브젝트), 그것을 실행시키는 Trigger(트리거), 실행 후 피드백인 Response(리스펀스)
이러한 정의 때문인지 Protopie는 위 인터렉션 요소 3가지를 그대로 가지고가 화면 안에서 작업을 할 수 있게 만들어진 툴인 것 같았다.
최근 스케치 사용이 늘어나면서 스케치와의 호환이 중요하게 여겨지는데,
스케치에서 각 레이어를 선택 후 Export를 하게 되면 작업 파일을 바로 Protopie로 옮겨 올 수 있었다.
Protopie 화면입니다.<실습했던 파일이 날라가서, 작업했던 이미지는 없습니다..>Protopie 화면을 보면, 레이어를 만들고, Trigger를 추가해서 수치들을 조정해서 만들 수 있게 되어있다.
Trigger에서 액션 Tap을 선택했다면, tap을 했을 때에 대한 인터렉션을 추가로 지정할 수 있다.정말 편리한 건 이처럼, Trigger 액션을 선택하면, 그다음 인터렉션을 또 추가로 입력할 수 있다는 것이다.
거기에 시간 조절 위치, 크기, 나타나는 방법 등을 조절을 할 수 있었다.
정말 편리하다. 그냥 원하는 대로 넣고 조절만 해주면 끝이다. 물론 이러한 작업이 엄청나게 복잡해진다면, 그것을 관리하는 것 또한 문제일 것이다..
거의 기본적인 인터렉션들을 다 제공을 하는 듯해 무겁지 않은 프로토타입을 만들 때는 편리해 보였다.
하지만 강연 시간이 40분이었기 때문에 많은 걸 해 볼 순 없었다.
또한 좋았던 점은 제작자분이 디자이너, 사용자 입장에서 필요한 것들을 직접 더 편리하게 사용할 수 있도록 고민하고 Protopie를 만들어가고 있다는 것이었다.
신해나 님 강연 잘 들었습니다. 감사합니다.
Protopie korea 페이스북 그룹 : https://www.facebook.com/groups/ProtoPieKorea/
Protopie : http://protopie.io/
3) Session C - C2 Design Process : Service & Product (하경제/카카오)
<천번의 미팅보다 하나의 프로토타입이 더 가치있다>저 PPT의 말처럼 내가 할 수 있다면 얼마나 좋을까..
이번 강의는 프로토타이핑 툴을 사용하면서 작업환경이 어떻게 변화했는지
실제 적용된 경험을 들을 수 있었던 시간이었다.
Product design에 대한 정의
<사용자의 문제를 해결하고, 사업적인 가치를 바탕으로 모든 의사결정을 한다.>
각 회사에서 주로 사용하는 디자인 프로세스비율 <왼쪽부터 Agile, Design Sprint, Lean UX, No process, Waterfall>위 사진은 회사에서 주로 사용하는 디자인 프로세스인데 Agile이 52%로 1위였고, Waterfall 이 2%로 마지막이었다. (이 자료를 보면서 과연 우리는 Waterfall일까... Agile일까 고민이 되었던...)
상단 파란색부터 시계방향으로 <Discover, Design, Develop, Test>Agile에 대한 설명을 보여주는 이미지.
Agile은 쉽게 설명해서 빠르게 작게 작게 나눠서 작업해가는 방식이고
Discover > Design > Develop > Test 4가지를 묶어서 서클이라고 하고, 서클 하나를 sprint라고 한다. Sprint는 모든 것을 개발하기보다 버튼, 애니메이션, 화면 전환 등 작게 나뉘어서 부분 부분 작업을 할 때 위와 같은 방식으로 작업을 한다고 한다.
최근 시장은 빠르게 변화하고, 사용자들 또한 진화하고, 완전히 다른 유통방식의 등장, 실패 비용 등의 증가로 팀 내에서 프로젝트 진행을 할 때
<가설 검증과, Fast fail, 유연한 사고, 커뮤니케이션 윤활유>등이 필요하다고 설명했다.
이러한 내용들을 바탕으로 최근엔 agile 방식과 프로토타이핑 툴의 사용이 요구되고 있다고 생각이 들었다.
카카오 내에서 프로토타이핑 툴을 사용했던 서비스로는
*보이스톡은 Pixate http://www.pixate.com/
- 그룹 콜로 전화 오는 사용자들의 사진.
- 말하는 사람이 가운데로 오는 화면.
*페이스톡은 POP https://popapp.in/
- 라이브 필터 화면을 POP으로 작업.
개발팀과의 거리가 멀었기 때문에 조정하는 작업에서 조금 힘이 들었고, 미묘한 타이밍 등은 계속해서 개발자와 수시로 소통하면서 조절을 해야 하는 어려움이 있었지만, 이러한 툴을 이용함으로써 화면의 이해를 높이는 데는 도움이 되었다고 한다.
주로 개발자가 옆에 붙어있으면, 지속적으로 붙어서 작업을 한다고 한다.
나도 이러한 방법을 추천하고, 제일 좋은 것 같다. 개발자와의 관계 유지.
이렇게 프로토타입이 만들어지는 것을 보면서,
나 또한 프로토타입으로 앱 전체를 보여주고 만들어야 하는지에 대한 고민도 있었다.
그러한 고민을 조금은 날려주는 답변을 강연자 분께 들을 수 있었다.
"감이 안 올 때, 내 손에 들어서 사용하는 느낌을 모를 때..."
"설득이 필요할 때"
"(프로토타이핑) 툴에 대한 이해도가 높을 때"
하지만 이에 따른 주의해야 할 상황 또한 들을 수 있었는데,
"만드는 시간 < 주어진 시간 (만드는 시간이 주어진 시간보다 더 소요되면 안 된다)"
"문서, 스케치, 대화로 가능한 상황"
"프로토타입으로 보여줄 범위가 너무 넓거나, 또는 좁거나"
"슈퍼 개발자가 있을 때(애니메이션이 무엇이든 뚝딱.)"
이 이야기를 듣고 나서, 툴이 분명 강력한 커뮤니케이션 도구가 될 수 있지만
그것이 목적이 되어서 프로젝트 시간에 영향을 주거나 하면 안 되고
내가 먼저 툴에 대한 이해도가 높은 상태에서, 상황에 따른 툴을 선택하거나 더 나은 방향을 제시해 작업을 진행해야 한다는 것이다.
그렇다면 과연 지금 우리 회사에서는 이것을 사용할 수 있을까라는 고민은 일단 툴에 대한 이해도를 좀 더 높이고 나서 고민하는 것이 좋겠다는 생각이 들었다. (툴은 필요하다고 생각은 든다.)
또한 이야기 들었던 것 중에서 공감이 되었던 건
"팀 내에서 포토샵을 주로 사용하기 때문에 스케치로 작업 환경을 바꾸는 것이 쉽지 않았다"라는 것이다.
그리고 가이드 작업은 스케치 > 제플린으로 이어지기 때문에
제플린 안에서 Q/A와 서비스 기획 등을 태그를 달아서 관리를 한다고 들을 수 있었다.
추가로
파일의 파편화에 대한 이야기도 나왔었는데
<여러 디자이너가 하나의 프로젝트를 진행하며 만들어진 여러 개의 스케치 파일들을 어떻게 관리하는지>
에 대한 물음의 답은 현장에서 나오진 않았지만 마지막 디자이너가 최종적으로 확인하고 수정해서 올리는 것이 그나마 아직까지는 나은 방안이라는 이야기였다.
나도 현재 스타트업에서 일하면서 항상 고민인 부분이다.
현재는 혼자서 프로젝트를 진행하기에 문제는 없지만, 혹시라도 많은 인원이 한 번에 작업하는 프로젝트를 진행하게 될 경우 파일은 어떻게 관리하는 게 좋을지에 대한 고민을 아직 겪어볼 수 없기에 답을 내릴 수 없었다.
그래도 전반적인 실무에서의 이야기를 들을 수 있었고, 내가 어떻게 해나가야 할지 생각을 할 수 있는 시간이었다.
하경제 님 강연 잘 들었습니다. 감사합니다.
Pixate http://www.pixate.com/
마지막 세션은 글이 너무 길어서, 전체 후기와 함께 다음으로...
마지막 세션의 내용은 현재 일하고 있는 디자이너로써 너무 좋은 내용들의 이야기들이 오고 갔기 때문에 꼭 공유하고 싶다. (엄청 길다.)
