[번역글] Framer로 Apple 뮤직 앱 만들기 1
Recreating the Apple Music app in Framer
글을 시작하기 전에
새로운 Framer 업데이트에 관련된 글을 찾다가 2017년 8월 1일, Tes Mat 님의 Medium에서 올라온 글을 우연히 읽게 되었습니다 (원본 링크). 글을 읽고 나서 Framer를 사용해 보신 적이 없으신 분들도 글을 읽으시면서 차근차근 따라 해 보시면 전체적인 Framer의 다양한 기능과 콘셉트에 큰 그림을 그릴 수 있다고 믿어 의심치 않을 거 같다는 생각이 들어 개인적으로 연락을 드려 번역 동의를 여쭈어 봤고 너무 감사하게도 흔쾌히 동의를 해주신 뿐만 아니라 글에 필요한 assets까지 보내주셔서 글을 번역하는데 큰 도움이 될수 있었습니다. 다시 한번 감사의 말씀을 전합니다.
워낙 많은 단어와 변수의 이름들이 있기에 글로는 잘 이해가 안되거나 막히는 부분이 있으실꺼라고도 생각합니다. 저는 개인적으로 글이 시작되고 바로 밑에 있는 완성된 프로젝트 파일을 다운 받아서 완성된 파일의 코드를 같이 보면서 따라오시는 방법을 추천해 드립니다.
글이 시작됩니다.
Apple Music 앱의 Now Playing 화면을 아래로 swipe 할 때 마치 마법처럼 mini player로 전환되는 것을 보신 적이 있으신가요? 저는 그 인터렉션이 너무 멋지다고 생각해서 Framer에서 구현해 봐야겠다는 생각을 해봤습니다.
또한 몇몇 스크린들을 스크롤할 수 있게 하면서 보너스로 실제로 음악을 플레이 할수 있게 만들면 어떨까요?
밑에 완성된 프로토타입 비디오가 있습니다 (밑에 링크를 클릭해서 보실 수 있습니다):
브라우저에서 오픈 - Framer에서 오픈
시작하기
물론, 500 라인이 넘는 큰 프로토타입이지만 저희는 세세한 부분까지 자세히 살펴볼 것이므로 Framer 초보자분들에게 좋은 시작점이 될 것입니다. 만약 Framer를 처음 사용하시는 분들은여기 링크를 눌러 다운로드하실 수 있고 , 14일 동안 무료로 사용하실 수 있습니다.
시작하기 전 여러분들이 특별히 알아두실 점은 없습니다. 게시물마다 관련된 Framer's Get Started 링크를 달아 놓을 거고요. code에 관련된 링크는 이렇게 초록색으로 표시되고 - 클릭하시면 관련된 Framer Docs 링크로 연결됩니다. layer이름들은 보기 쉽게 Bold로 표시했습니다. (역주: code와 layer에 관한 이름들은 따로 번역하지 않고 원본 글에 명칭 한 그대로 남겨 두었습니다)
그리고 스텝의 마지막마다 브라우저에서 오픈 프로토타입을 볼 수 있는 웹 링크와, Framer에서 오픈 바로 프로젝트를 다운로드할 수 있는 링크가 있습니다.
스크린들은 스케치에서 작업을 했습니다, 그러나 Mini Player는 Framer Design를 사용해 다시 만들어볼 꺼구요.
전체 화면 Player에서 Mini Player로 전환되는, 그리고 다시 전체 화면으로 돌아오기까지의 애니메이션들을 서로 다른 타이밍으로 결합할껏입니다.
또 이외에 여러분들이 배울 것들로는 :
스케치 파일을 import 하기
Filters를 이용해 레이어들을 grayscale으로 만들고, 색깔들을 invert 시키기
몇몇 요소들 (Tab Bar와 Status Bar)을 모든 스크린에서 나타날 수 있게 하기
모듈을 사용하여 (스크러빙할 수 있는) progress bar, 볼륨 조절 및 재생시간 + 남은 시간 표시가 나오는 음악 플레이어를 만들기
TextLayer 사용하기
JavaScript를 사용하여 TextLayer의 현재 날짜를 표시하는 함수를 만들기
ScrollComponents를 사용하고, 그 안에 또 다른 ScrollCompoenents를 사용하기...
... 그리고 Direction Lock을 사용하여 다른 방향으로 같이 스크롤되지 않게 하기
마스크 된 Sketch 그룹들을 ScrollCompoenet으로 wrap 하기
PageComponent를 사용하기
Parent layers를 사용하여 PageComponent 안에 페이지 사이즈를 조절하기
CSS를 사용해 iOS 배경 흐림 효과 재현하기
1. 스케치 파일 가져오기 (Import the Sketch file)
스케치 파일(다운로드 파일) 안에는 여러분들이 프로토타입을 만드는데 필요한 스크린들이 있습니다.
스케치 파일 안에 있는 4개의 아트보드스케치 파일 안에는 4개의 아트보드가 있는데요:
Library 스크린 (또한 Status Bar와 Tab Bar 가 있습니다)
두 번째 tab 에 있는 For you 스크린
For You 스크린에 들어가는 두 번째 카드
Now Playing 스크린
Library 스크린은 사실 굉장히 큽니다. 거기에 있는 Recent Added alblum은 마스크가 덮여있는데, Symbol 페이지로 가시면 전체 디자인을 보실 수 있습니다.
수정하기 쉽게 만들어 놓았고요, For You 스크린에 있는 Recently Played 도 동일한 방법으로 만들었습니다.
Symbols 페이지안에는 Library페이지에 Recently Added 앨범 와 For you페이지에 Recently Played 앨범을 찾을수 있다시작합니다!
새로운 Framer 프로젝트를 만들고, 저장합니다 ('Apple Music'이라고 이름을 지으면 될 거 같습니다), 그리고 스케치 파일을 import 합니다.
(스케치 파일에서) 디자인은 1x에서 만들어졌는데, 이 말은 (iPhone 7) 스크린이 375 x 667 인터페이스 포인트를 측정한다는 것을 의미합니다. 그러나 Framer에 스케치 파일을 import 할 때는 @2 x로 가져오시면 750 x 1334 픽셀이 됩니다.
이제 여러분 프로젝트 라인 윗줄에는 이런 코드가 생겼을 것입니다
# "Apple Music"파일 가져오기
sketch = Framer.Importer.load("imported/Apple Music@2x", scale: 1)
이제 'sketch'라는 변수를 '$'로 이름을 바꾸면 앞으로 타입핑 할 때 일이 훨씬 줄겠죠...
# "Apple Music"파일 가져오기
$ = Framer.Importer.load("imported/Apple Music@2x", scale: 1)
... 왜냐면 sketch.Satus_Bar 라는 변수를 이제 $.Status_Bar 로 적을 수 있게 됐기 때문입니다.
브라우저에서 오픈 - Framer에서 오픈
2. Library 스크린을 스크롤 가능하게 만들기
다른 아트보드는 오른쪽에 (스케치 파일과 같은 동일한 거리로) 배치되었기 때문에 현재 우리눈 으로는 Library 스크린 밖에 보이지 않습니다. 다른 아트보드들은 나중에 필요시 옮기도록 하겠습니다.
프레이머 왼쪽에 위치한 레이어 패널에서 스크롤을 끝까지 하시면 Library 아트보드 (현재는 당연히 레이어 상태인)에 3개의 자식 레이어들이 있습니다: Status_Bar, Tabs, Library_content (끝에 두 개는 자신들의 자식 요소를 가지고 있고요).
Layer Panel에 있는 Library 아트보드 와 자식 레이어들음, 화면 자체의 내용은 Library_content에서 찾을 수 있으며 ScrollComponent의 wrap() 함수를 사용하여 스크롤할 수 있게 만듭니다:
scroll_library = ScrollComponent.wrap $.Library_content
새로운 ScrollComponent인 scroll_library는 기본적으로 모든 방향으로 스크롤할 수 있으며 옆으로도 스크롤할 수 있지만 scrollHorizontal을 비활성화하면 쉽게 문제를 해결할 수 있습니다.
scroll_library.scrollHorizontal = no
페이지의 마지막 부분은 Tab bar에 의해 부분적으로 숨겨져 있으므로 contentInset을 추가해야 합니다.
scroll_library.contentInset =
bottom: $.Tabs.height + 80
저는 $ .Tabs의 height를 사용했고 Tab bar 바로 위에 놓일 Mini Player 공간을 만들기 위해 80포인트를 추가했습니다.
브라우저에서 오픈 - Framer에서 오픈
3. 처음 탭(tab)만 작동하게 만들기
현재 탭들은 전부 빨간색인데요, 원래 원래 첫 번째 탭만 빨간색이어야 되고, 나머지 탭들은 회색이어야 합니다.
Framer에서는 레이어의 색상을 조정할 수 있기 때문에 의도적으로 빨강을 남겼습니다. 그리고 색상을 제거 (grayscale , saturate)하는 일은 특히 쉬운데요.
for... in loop를 사용하여 $ .Tabs의 모든 자식 요소(children)들에게 적용하고 채도를 0으로 낮추면 회색이 됩니다.
여전히 너무 어두워 보이는 거 같으니, opacity를 60%로 낮추도록 하죠.
for tab in $.Tabs.children
tab.saturate = 0
tab.opacity = 0.6
그런 다음 첫번째 탭인 $ .Tab_Library에 대해 속성을 리셋합니다. 이제 첫 번째 탭만 빨간색으로 표시됩니다.
$.Tab_Library.saturate = 100
$.Tab_Library.opacity = 1
브라우저에서 오픈 - Framer에서 오픈
4. For You 스크린 스크롤할 수 있게 만들기
$. For_you 아트보드는 현재 화면 밖에 있죠 따라서 x 위치를 변경하여 보이게 만들도록 하겠습니다.
$.For_you.x = 0
Library 스크린처럼 스크롤할 수 있도록 wrap을 사용해 포장합니다
scroll_for_you = ScrollComponent.wrap $.For_you
ScrollComponent에 대한 몇 가지 수정을 하면:
scroll_for_you.props =
scrollHorizontal: no
contentInset:
bottom: $.Tabs.height + 20
( props을 사용하면 각 속성에 대해 별도의 줄을 쓰는 대신, 한 번에 모든 설정할 수 있게 됩니다.)
브라우저에서 오픈 - Framer에서 오픈
5. Status bar와 Tab bar를 맨 앞에 배치하기
Tab bar와 Satus bar가 사라진 걸 보셨을 것입니다. 지극히 정상적인 현상입니다, 왜냐하면 Tab bar와 Satus bar는 Library 아트보드에 속해 있기 때문인데요.
이제 $. Library의 부모로 부터 때어내도록 하겠습니다.
$.Status_Bar.parent = null
$.Tabs.parent = null
Tab bar와 Satus bar의 부모 요소를 null로 만들었습니다. 이제 부모가 없기 때문에, 목록의 맨 위로 이동해 진 것을 볼 수 있습니다.
Layer Panel에 있는 Tab Bar 와 Status Bar딱 우리가 원하는 데로 됐습니다!
그러나, 한 가지 문제가 있습니다. 다음 단계에서 만드는 추가 레이어 (여기에 ScrollComponent, 투명 회색 오버레이)가 이미 존재하는 모든 항목 위에 배치됩니다.
그러면 결국에는 Status와 Tab을 앞으로 다시 가져와야 되겠죠:
$.Status_Bar.bringToFront()
$.Tabs.bringToFront()
해결책 : 부모가 없는 Status bar와 Tab bar의 코드를 프로젝트 라인 끝부분에 배치하면 문제가 해결됩니다.
그래서 이렇게 코멘트를 달고 fold를 시켰습니다... (역주: fold 하고 싶은 코드들을 드래그 해서 오른쪽 마우스클릭, 그리고 fold 선택)
# Status bar와 Tab bar를 항상 위에 배치한다
$.Status_Bar.parent = null
$.Tabs.parent = null
... 그리고 항상 문서의 끝 부분에 있는지 계속 확인해 주세요.
브라우저에서 오픈 - Framer에서 오픈
6.Recently Played 앨범 스크롤할 수 있게 만들기
For You화면은 현재 스크롤 가능하지만, 다른 부분에 스크롤할 수 있는 것에 대해서도 역시 막지 않습니다.
Recently Played섹션에는 지금 볼 수 있는 것보다 더 많은 앨범이 포함되어 있는데요.
recentlyPlayed = ScrollComponent.wrap $.Recently_Played_albums
recentlyPlayed.props =
scrollVertical: no
contentInset:
right: 20
ContentInset: 20을 설정해서 'See All' 버튼과 마지막 앨범의 끝부분과 라인을 맞췄습니다.
이제 Recently Played 리스트도 스크롤이 가능스크롤 동작 제한하기
약간 고칠 점이 하나 있다면, 왼쪽 또는 오른쪽을 스크롤할 때 우연히 위나 아래로 스크롤되는 것을 느끼셨을 텐데요. 원래 앱에서는 이런 식으로 작동이 되지 않고 있죠.
그렇기 때문에 특정 방향으로 스크롤을 시작하면 다른 방향으로 스크롤하는 되는 것을 막아야 합니다. 이를 위해 directionLock을 두 scrollComponent에서 활성화시켜야 하는데요, 결국 이렇게 보이게 되겠죠:
# Scroll Component for the whole artboard
scroll_for_you = ScrollComponent.wrap $.For_you
scroll_for_you.props =
scrollHorizontal: no
contentInset:
bottom: $.Tabs.height + 20
directionLock: yes (추가된 코드)
# Scroll Component for the Recently Played section
recentlyPlayed = ScrollComponent.wrap $.Recently_Played_albums
recentlyPlayed.props =
scrollVertical: no
contentInset:
right: 20
directionLock: yes (추가된 코드)
브라우저에서 오픈 - Framer에서 오픈
7.New Music Mix 및 Favourites Mix카드 용 페이지 구성 요소
My New Music Mix와 My Favorites Mix카드를 스와이프 할 수 있게 만들어야 하는데, 항상 다른 카드에서 다른 카도로 이동해야 하기에 PageComponent를 사용할 것입니다.
mixes = new PageComponent
frame: $.New_Music_mix.frame # card’s frame을 재사용한다
parent: $.For_you
scrollVertical: no
directionLock: yes
레이어의 프레임(frame) 속성에는 크기 (너비 및 높이)와 위치 (x 및 y)가 모두 포함되어 있으므로 PageComponent는 원래 레이어보다 부모 레이어 ($. For_you) 로 완전히 동일한 공간을 차지합니다.
'Mixes'카드 용 페이지 구성 요소, 여전히 비어있어 투명 회색이다이제 addPage() 함수를 사용하면 이렇게 됩니다:
mixes.addPage $.New_Music_mix
mixes.addPage $.Favourites_mix
브라우저에서 오픈 - Framer에서 오픈
다음 글 : [[번역글] Framer로 Apple 뮤직 앱 만들기(2)
