brunch

매거진 Framer 초보탈출기

라이킷 30 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유나 Jan 23. 2017

3. Component로 간단한 프로토타입 만들기

Scroll과 Flow를 활용한 Medium 프로토타입 만들기

프레이머가 업데이트를 거듭하며 조금씩 디자이너 친화적으로 발전하고 있는데(아주 바람직하다) 오늘은 그 중 하나인 Components를 활용해서 페이지 전환을 해보고자 한다.

처음부터 위와 같은 형태의 프로토타입을 만들어보라고 했으면 몇날 며칠을 클릭했을 때 배경이 dimd되는 것은 어떻게 할 것이며 옆에서 슬라이딩 되는 건 또 어찌할까에 대해 머리를 쥐어뜯으며 고민하다가 아몰랑 내팽겨쳤을 그런 것들이 snippets에 있는 components를 활용하면 간단히 해결되는 놀라운 마법이 펼쳐진다.(상대적으로 간단한 것일 수 있다. 하하)

뾰로롱

그중에서도 가장 최근에 추가되었고 활용도가 높아보이며 for문, if문 같은 복잡한 것 없이 사용할 수 있는 아주 간단한 프로토타입을 만들어 볼텐데 이왕이면 예쁜게 좋으니까 medium의 디자인을 좀 빌려와서 psd를 import해서 해보자.

사전준비

1. medium의 상단과 하단 bar 디자인이 있는 psd(또는 sketch)

이전에도 얘기했지만 그룹폴더로 만들지 않으면 모두 백그라운드로 병합되니 만드시 ui 요소는 그룹폴더로 만들어둬야 한다.

중간 컨텐츠는 없고 상단 하단 bar ui만 남겨 놓은 psd

2. 콘텐츠 (메인, 서브, 이벤트이미지)

메인에 뿌려질 컨텐츠와 상세로 이동했을 때 보여질 컨텐츠 이미지 2장을 준비한다. 그림에서 보는 것과 같이 예제에서는 Editors' picks이라는 이미지 배너를 탭하면 상세페이지로 넘어가도 back 버튼을 클릭하면 다시 메인으로 돌아오는 프로토타입을 만들 예정이다. 그래서 메인 콘텐츠 이미지에서 Editors' picks와 서브콘텐츠 이미지에서 back버튼을 잘라서 따로 준비했다. 그렇게 총 4개의 이미지를 미리 준비한다.

예제에 필요한 파일은 여기서 다운 받아도 된다.

https://www.dropbox.com/s/hk8uvdm28z27ate/medium_files.zip?dl=0

medium_files.zip

Dropbox를 통해 공유함

www.dropbox.com

하지만 개인적으로는 다른 앱이나 ui를 직접 만들어서 사용해보는 걸 추천한다. 그래야 응용력도 생기고 이미지를 어떻게 자르고 준비해야 하는지에 대한 감도 익힐 수 있다. 어렵다면 같은 파일을 가지고 예제를 따라한 후 반드시 다른 디자인을 이용해 만들어보길 권한다.

파일이 준비됐다면 이제 만들어보자.

1. psd import

포토샵에서 파일을 열어놓은 상태에서 프레이머의 import 버튼을 클릭하면 3번째에 포토샵이 활성화가 된다. 가볍게 import 버튼을 클릭하면 된다.

import를 하게 되면 무조건 레이어를 선택할 때 'psd.레이어명', 스케치를 import했다면 'sketch.레이어명' 라고 써줘야하는데 psd, sketch를 매번 붙이기는 번거로우니 생략하기 위해 하단의 코드를 추가한다.

psd = Framer.Importer.load("imported/ui_medium@1x")

Utils.globalLayers(psd) #여기서 바로 위 코드의 제일 앞에 사용된 이름을 그대로 넣으면 된다.

Framer.Extras.Hints.disable()

2. 서브 콘텐츠 레이아웃

메인이 아니라 서브 콘텐츠 레이아웃을 먼저 잡는 이유는 flow를 써서 메인에서 서브로 전환을 하게 되는데 이럴경우 서브는 초기 화면에 노출이 되지 않아 레이아웃이 잘 잡혔는지 확인하기가 번거롭다. 그래서 미리 서브콘텐츠 먼저 전체적인 레이아웃을 잡는게 개인적으로 편하기 떄문에 서브 먼저 잡는다.

또 다른 방법으로는 메인을 먼저 잡은 후 메인에 대한 코드를 비활성화 시킨 다음 서브를 잡을 수도 있다. 이건 개인이 편한 순서대로 하면 된다.

2-1. Snippets > Components > Scroll List

서브 컨텐츠가 길어서 스크롤을 할 수 있어야 한다. Snippets > Components > Scroll List를 클릭하면 아래와 같이 '이게 뭔가...' 싶은 코드들이 자동으로 생긴다.

# Variables

rows = 16

gutter = 10

rowHeight = 200

scroll = new ScrollComponent

size: Screen.size

scrollHorizontal: false

# Loop to create row layers

for index in [0...rows]

cell = new Layer

width: Screen.width

height: rowHeight

y: index * (rowHeight + gutter)

parent: scroll.content

backgroundColor: "#00AAFF"

hueRotate: index * 10

레이아웃을 다 잡을 게 아니고 어차피 길쭉한 통이미지를 사용할거라 오늘의 예제에서 이런 코드들이 다 필요한 건 아니기 때문에 놀란 가슴을 진정시켜도 된다. 이 코드들 중 딱 한부분만 사용할거고 나머지 코드들에 대해서는 다음에 따로 정리를 할 예정이니 아래의 코드만 남기고 나머지는 모두 지운다.

이 예제에서는 메인과 서브 2번의 scroll component가 필요하다. 동일한 이름으로 사용할 수 없으니 구분을 위해 scroll을 scrollSub라고 수정했다.

scrollSub = new ScrollComponent #새로운 scroll component를 scrollSub이라는 이름으로 정했다.

size: Screen.size #크기를 스크린에 맞춘다

scrollHorizontal: false #세로로만 스크롤이 되야 하니 좌우 스크롤이 되는 걸 방지한다.

2-2. 서브콘텐츠 레이어 생성하고 스크롤 가능하게 만들기

여기에 잘라놓은 서브콘텐츠 레이어를 삽입한다.어떻게 할까? 서브콘텐츠 이미지 잡고 그냥 프레이머에 드래그 하면 된다. 친절한 프레이머씨는 이미지 드래그만으로도 레이어를 생성해준다. 친절을 좀 더 베풀어서 프레이머가 우리의 의도를 간파하고 자동으로 스크롤까지 되게 해주면 좋으련만 이미지만 삽입한다고 자동으로 스크롤까지 되진 않는다.

스크롤이 되게 하려면 코드 하나를 삽입해야 되는데 방법은 간단하다. 서브콘텐츠 레이어를 위에 만들어놓았던 scroll component의 콘텐츠로 지정해주는 코드를 삽입하면 된다. 이 방법은 앞에 만들어보았던 '햄버거 버튼 만들기'에 사용했던 parent라는 속성을 활용하면 된다.

subList = new Layer

width: 750

height: 4950

image: "images/subList.png"

parent: scrollSub.content #스크롤이 가능한 scrollSub을 subList의 부모레이어로 지정해줌으로써 subList를 scrollSub라는 이름으로 정의된 scroll component의 콘텐츠로 종속시킨다는 의미다. 일반 레이어를 부모레이어로 지정해줄 때는 앞에 사용된 레이어명만 쓰면 되지만 component에서는 반드시 .content가 붙어야한다.

2-3. back버튼 삽입

서브 콘텐츠에 메인콘텐츠로 이동할 수 있도록 back버튼 레이어를 삽입하는데 방법은 서브 콘텐츠 이미지 삽입했던 것과 동일하다. 이미지를 프레이머로 드래그 하면 자동으로 생성된다. 이제 위치에 맞춰서 x, y좌표값을 수정해주고 back버튼 역시 서브 콘텐츠가 스크롤 될 때 같이 이동해야 하므로 서브콘텐츠를 부모레이어로 설정해준다. (서브콘텐츠 레이어처럼 scroll component를 부모로 지정해줘도 된다. 하지만 추후에 좌표값 등 수정이 편하도록 서브콘텐츠를 부모로 지정했다.)

btnBack = new Layer

width: 23

height: 40

x: 34

y: 64

image: "images/btnBack.png"

parent: subList

3. 메인콘텐츠 레이아웃

메인콘텐츠 역시 스크롤이 가능해야하고 클릭할 Editor's pick 이미지를 삽입해야 한다. 서브콘텐츠 만들 때 했던 2-1부터 2-3까지를 반복하면 된다.

scrollMain = new ScrollComponent #서브콘텐츠 스크롤과 구분하기 위해 scrollMain으로 명명했다.

size: Screen.size

scrollHorizontal: false

mainList = new Layer

width: 750

height: 4820

image: "images/mainList.png"

parent: scrollMain.content #스크롤이 되도록 부모레이어로 scrollMain의 콘텐츠로 종속시켰다.

clickImg = new Layer

width: 228

height: 182

x: 12

y: 10

image: "images/clickImg.png"

parent: mainList

4. flow component를 이용해 메인과 서브 연결하기

이제 flow component를 이용해서 메인콘텐츠와 서브 컨텐츠를 연결하기만 하면 완성이 된다.

Snippets > Components > Flow를 클릭하면 아래와 같은 코드들이 생성된다.

# Create layers

layerA = new Layer

size: Screen.size

backgroundColor: "#00AAFF"

layerB = new Layer

size: Screen.size

backgroundColor: "#FFCC33"

# Set up FlowComponent

flow = new FlowComponent

flow.showNext(layerA)

# Switch on click

layerA.onClick ->

flow.showNext(layerB)

layerB.onClick ->

flow.showPrevious()

프리뷰 화면에서 한번 작동해보면 어떤 구조인지 대충 파악이 가능하다.

layerA가 메인콘텐츠고 layerB가 서브 콘텐츠다. layerA를 클릭하면 layerB가 로드되고, layerB를 클릭하면 다시 layerA로 돌아가는 구조다. 그러면 예제를 여기에 대입해보자.

우선 우리는 이미 메인콘텐츠와 서브콘텐츠 레이어를 모두 만들어두었기 때문에 layerA, layerB는 필요없으니 삭제한다. 그리고 layerA, layerB가 삽입된 부분에 scrollMain, scrollSub, clickImg, btnBack을 적절히 교체하면 된다. 코드를 보자.

# Set up FlowComponent

flow = new FlowComponent #새로운 flow component를 flow라는 이름으로 정했다.

flow.showNext(scrollMain) #처음화면을 어떤 것으로 할건지 지정해주는 부분이다. 메인콘텐츠가 보여야 하니 괄호 안에 layerA대신 scrollMain을 삽압힌다.

# Switch on click

clickImg.onClick -> #무엇을 클릭했을 때 다음 내용을 실행하라는 내용이다. 여기서 우리는 Editor's pick 이미지를 클릭했을 때 실행을 할테니 layerA대신 clickImg를 삽입한다.

flow.showNext(scrollSub) #무엇을 실행할지 정의한다. clickImg를 클릭하면 서브콘텐츠가 로드되도록 해야하므로 layerB대신에 scrollSub를 삽입한다.

btnBack.onClick -> #서브콘텐츠에서 back버튼을 클릭하면 메인으로 돌아오게 하기 위해서 layerB대신에 btnBack을 넣어준다.

flow.showPrevious()

영어를 그대로 해석하면 된다. showNext는 '다음을 보여줘'라는 것이고 showPrevious는 '이전을 보여줘'인데 다음이 무엇일지 정의되지 않은 상태이니 showNext에 다음에 뭘 보여줄 것인지를 괄호안에 넣으면 되는 것이고 showPrevious는 이미 다음으로 넘어온 후 이므로 이전이 존재한다. 그래서 괄호에 아무것도 넣지 않아도 되는 것이다.

근데 여기까지만 하면 뭔가 이상하다. 여기서 끝내면 맨 처음 불러왔던 ui가 의미가 없다. 의미를 살려주자. 물론 손쉽게 레이어를 bringtoFront해서 맨 앞으로 가져와도 된다. 하지만 그렇게 되면 메인과 서브 콘텐츠들의 좌표값을 다 수정해줘야 한다. 귀찮은 일인다.

쉽게 해결하기 위해 각 각 header와 footer로 지정해주면 된다.

flow.header = headBar

flow.footer = tapBar