디자이너를 위한 코드 with Framer #5
이제 조금은 Framer와 친해졌길 기대해본다. 여러번 얘기하긴 했지만 Framer는 코드 작성을 하는 도구라는 걸 꼭 기억해줬으면 좋겠다. 이렇게 경험이 쌓이면 다른 환경에서 코드를 작성할 때도 도움이 된다. Framer를 툴로 이용한 이유는 간단한 것도 있지만, 실제로 웹을 다이나믹 하게 만드는 coffeescript(Javascript)를 동일한 문법으로 사용할 수 있는건 덤이다. 사실 Framer를 잘 쓰기 위한 글이었다면 훨씬 쉬웠을수도 있다.
갑작스러운 필자의 히스토리
사실 나는 예전부터 웹페이지 만들기에 꽤 재미를 느끼고 있었다. 하지만 항상 지저분해지는 코드와 Javascript의 태생적 한계(?) 때문에 꽤 귀찮아 하고 있었는데 친구의 권유로 coffeescript가 있다는 걸 알게 됐고 그 편의성에 매료되었다. 그걸로 몇 가지 웹 프로덕트를 만들어보다 보니, Framer라는게 나왔다. 그래서 사실 나는 Framer 코드를 작성하는데 들이는 러닝코스트가 거의 없었다. 그냥 필요한 게 있으면 Framer Docs를 참고해서 적용 가능 했다. 실제로는 아직 써보지 않은 Framer 컴포넌트들도 수두룩 하다.
비슷하게는 coffeescript로 웹을 만들면서 익힌 프로그래밍 구조를 통해서 애플의 새로운 언어인 Swift로 iOS앱을 만들기도 했다. (물론 이건 러닝커브가 상당했다…ㄷㄷ)
만든건 단순한 디데이앱(UNIQDAY)입니다. (앗. 이거슨 PPL인가…)
어쨌든 컴퓨터언어의 문법 구조에 어느정도 익숙해지게 되면 다른 환경을 만났을때 진입 장벽이 꽤 줄어든다. 당장은 Framer를 공부하기 위해 이글을 볼 확률이 높겠지만 세상은 급변하니까, 도구보다 개념을 익혀두면 급변하는 상황에 유연하게 대처할 수 있…지 않을까 생각해본다.
아무튼 이번엔 반복문 (for loop)
UI인터랙션에 있어서 반복문은 꽤 중요하다. UI에서는 비슷한 엘리먼트가 반복되는 경우가 많기 때문이다. 단순히 layer가 반복되는 걸 포함해서 특정한 행위가 반복되는 경우에도 반복문은 유용하게 쓰인다.
아래의 그림이 오늘 최종적으로 마주하게 될 그림이다. 여기에 애니메이션 까지 추가로 구현해 보려고 한다.
물론 위 그림은 앞서 소개한 개념들로도 충분히 힘들게! 그릴 수 있다. 근데, 너무 많으니까 조금만 개수를 줄이자. 배열도 그냥 일자로 …
그럼 노가다를 한번 시작해볼까.
우선 그 전에 미리 소스를 준비해뒀다. unsplash 무료 이미지 사이트에서 받아놓은 이미지가 포함된 프로젝트 파일이다. 덤으로 상단 GNB이미지도 포함되어있다. 아래 링크를 눌러 다운받도록 하자.
프로젝트 파일 http://share.framerjs.com/m45mf07zyhps/
tip1. photo_1.jpg를 갖다 쓰고 싶으면 파일을 그냥 코드창에 드래그 해보자. 그럼 자동으로 레이어를 만들면서 파일의 주소를 적어준다. 물론 우리가 적어줘도 된다. framer 프로젝트 폴더 안에 폴더와 파일을 어떤 형태로든 넣어서 가져올 수 있다.
그럼 일단 우린 노가다로 5개 사진의 리스트를 그려보자.
디자이너들의 영혼의 동반자 copy & paste를 쓰더라도 이건 좀 아니다 싶을꺼다. 만약에 여기서 사진의 height를 바꾸려고 한다면? ㅇㅏ… 몇개를 고쳐야 되는거야. 그럼 좀 더 똑똑하게 변수를 써볼까? height가 변경되는 걸 대비하는 코드를 작성해보자.
음 쪼금 똑똑한거 같네… 그럼 숫자를 200정도로 줄여보자. 헛. y좌표가 고정되어 있어서 간격이 생겨버린다. 이것도 같이 바꿔 줘야 할 것 같다. 상단 GNB의 세로 크기만큼은 또 더해줘야 한다.
음 꽤 괜찮은거 같아. 하지만 여전히 우린 노가다를 하고 있다. 레이어 5개 정도야 뭐 열심히 하면 할 만 하겠지만. 처음 본 예제처럼 만드려면 무려 28개의 레이어를 만들어야 된다.
border를 추가하려면 28개 레이어에 border를 다 줘야한다.
상상만 해도 넘나 싫다…
이정도 고생을 했으면 반복문을 숙지하고픈 욕심이 생길 수 밖에 없다. 왕좌의 게임을 보고 있는 사람이 있다면 이건 마치 아리아 성장기 같은… 느낌적인 느낌.
반복문의 기본적인 형태는 이런 식이다.
아마 감이 잘 오지 않을텐데. 이런 코드를 작성해보고 실행해보자.
for value in [1..10]
print value그럼 콘솔창에 1,2,3… 10까지 순차적으로 출력되는 걸 볼 수 있다. in 뒤에 오는 대괄호가 반복할 값의 범위다. 반복할 횟수라고 얘기하지 않고 값의 범위라고 이야기 하는 이유는 횟수로 단정하기에는 늬앙스가 다르기 때문이다. 이것은 array라는 개념을 설명해야 한다.
array 배열
사전을 찾아보자. 집합체. 배열이라고 설명되어있다. 변수에 대해서 숙지가 되어있다고 하면, array는 변수 다발 같은 거라고 생각하면 된다.
하나의 변수에는 하나만 담을 수 있다. 하지만 하나의 array에는 여러개의 변수를 담을 수 있다. 만약… 변수만을 이용해서 값을 저장한다고 하면
firstNumber = “one”
secondNumber = “two”
thirdNumber = “three”이런식으로 문자를 세개의 변수에 저장할 수 있지만 순차적으로 사용하려면 각각의 변수명을 적어주어야 하기 때문에 비효율적이다. array를 사용하면 이런식이다. 대괄호 안에 콤마로 값을 구분하여 사용한다.
numbers = [“one”, “two”, “three”]numbers라는 array하나로 세개의 변수를 담았다. 변수는 이름을 쓰면 사용할 수 있는데 array의 각각의 값을 사용하려면 어떻게 해야할까.
numbers[0] 위 처럼 array명과 대괄호 안에 숫자를 넣으면 된다. print해보면 numbers[0]의 값은 “one”이라고 나온다. 컴퓨터 언어는 0부터 시작하는거 알쥬?
앞서 설명한 [1..10]은 사실상 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]의 축약 표현이다. 즉 숫자 1부터 10까지의 값을 가진 array라고 볼 수 있다. 값이 10개이기 때문에 10번 반복 하는 것이다.
맨 처음 작성한 반복문 코드를 이렇게 변형해서 써보자.
for value in ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
print value뒤에 숫자가 없지만 array 값이 10개 이기 때문에 10번 반복되고 콘솔창에는 아까처럼 숫자가 아닌 문자로 표현된 값이 출력될거다.
위 코드를 좀 더 읽기 좋게 쓰면 이런식이다. array를 먼저 정의하고 반복문에서는 정의된 array만 갖다 쓴다.
numbersString = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]for value in numbersString
print value
tip2. 뒤에 숫자 array가 아닌 다른 형태의 값을 가진 array가 올 때는 value와 함께 index값을 받을 수 있도록 정의할 수 있다. 이유는 숫자로 된 array는 value자체가 index가 될 수 있기 때문이다.
for value, index in ["one", "two"]
print value
print index출력결과를 한번 보기 바란다.
그럼 다시 돌아가서 반복문으로 그리려고 했던 그림을 그려보자.
반복문을 이해하려고 할때는. 조금 노가다 스럽게 이해해보려는 노력을 하자. 예를 들면 이런식이다.
value가 1이라고 생각하고 반복문 안의 코드를 실행
value가 2이라고 생각하고 반복문 안의 코드를 실행
value가 3이라고 생각하고 반복문 안의 코드를 실행
value가 4이라고 생각하고 반복문 안의 코드를 실행
value가 5이라고 생각하고 반복문 안의 코드를 실행
value가 6이라고 생각하고 반복문 안의 코드를 실행
value가 7이라고 생각하고 반복문 안의 코드를 실행
value가 8이라고 생각하고 반복문 안의 코드를 실행
value가 9이라고 생각하고 반복문 안의 코드를 실행
value가 10이라고 생각하고 반복문 안의 코드를 실행이상의 시 같긴 하지만 이런식으로 생각하면 도움이 된다. 물론 나중엔 이런생각 안해도 된다. 이렇게 하는 이유는 반복문이 돌아가는 동안 변하는 값은 value밖에 없기 때문이다.
그렇게 보면 photo라는 레이어를 만들때 y좌표 값을 왜 저렇게 적어놓았는지 이해가 갈꺼다. y좌표는 사진의 세로 크기와 GNB세로 크기와 관련이 있었다. value에서 1은 뺀 이유는 우리가 반복문의 범위는 1부터로 잡아 놓았기 때문에 0부터 시작하게 하기 위해서다. 노가다로 그릴때 코드를 참고해보면 된다.
자 그러면 사진을 다르게 넣어줘야 한다. 반복문에서 변하는 값은 단 하나. value라는 사실을 인지하자. 준비해둔 이미지 파일명은 숫자가 붙어있다!
“오. 느낌이와”
레이어의 image 속성에 들어가는 파일주소 사이에 value를 더해주도록 했다. 이렇게 하면 다른 사진을 볼 수 있다! 아까 노가다 스럽게 생각한 것에 대입해보면 이렇게 되는거다.
image: "images/photo_1.jpg"
image: "images/photo_2.jpg"
image: "images/photo_3.jpg"
image: "images/photo_4.jpg"
image: "images/photo_5.jpg"
image: "images/photo_6.jpg"
image: "images/photo_7.jpg"
image: "images/photo_8.jpg"
image: "images/photo_9.jpg"
image: "images/photo_10.jpg"tip3. Javascript에서는 문자와 숫자를 더하면 문자가 된다.
우린 레이어 10개를 만들었지만 5개 만들 때보다 코드가 훨씬 짧다!!
자 그럼 우리가 애초에 그리려고 했던 그리드 형태를 그릴 차례다. 이중 반복문을 써보자.
가로로 4개의 레이어를 만드는 반복문
위 반복문을 10번 반복하게 하는 반복문먼저 가로로 4개 레이어를 만드는 반복문을 작성하고 10번 반복하는 반복문으로 감싸보자. 방금 했던 코드와 개념적으로 같다.
10번 반복하는 반복문 안에 4개의 레이어를 만드는 반복문을 이중으로 사용했다.
y좌표를 건드리지 않은 이유는 만든 4개의 레이어를 그룹으로 묶어서 그룹의 좌표를 옮기려고 하기 때문이다. 그룹으로 묶는건 layer의 parent속성을 이용하면 된다. 포토샵에서 레이어를 그룹안에 넣는 것과 유사하다. 대신 framer에서는 그룹도 layer다. 그럼 groupLayer를 만들자.
위 코드는 이제 설명해주지 않아도 이해가 가야한다! 추가적인건 photo레이어 속성에 parent라는게 추가 된 것. groupLayer를 부모(상위그룹)으로 만들어 줬다.
어라. 그런데 photo레이어를 만들때 value로 이미지 숫자를 주다보니 똑같은 사진이 반복된다. 이럴땐 사진 번호를 위한 변수를 외부에 선언해두고 레이어가 생성되는 반복문이 돌때마다 카운트가 올라가게 적어주면 된다.
변수를 반복문 외부에 선언하는 이유는 반복문 안에 선언하게 되면 반복문이 돌때마다 다시 1로 대입되기 때문이다.
tip4. photoNumber += 1은 photoNumber = photoNumber + 1과 같다.
난 죽어도 반복문을 하나만 쓰고 싶다는 사람은 그렇게 할 수도 있다. 대신 조건문을 함께 써야한다. 대충 요령만 알려주면 레이어를 4개씩 그릴때 마다y좌표 값이 바뀌어야 한다. 힌트는 여기까지만! 좀 더 수학이 자신있는 사람은 조건문 없이도 스마트한 연산을 통해서 반복문 하나로 그릴 수도 있다.
마지막은 작성한 예제코드에 애니메이션을 조금 추가해봤다. 개념적으로는 전혀 새로운게 없기 때문에 코드만 첨부한다.
http://share.framerjs.com/9u6w7byffkih/
delay는 조금 새로울지도. 하지만 개념은 같다. 이제 함수만 남았다. 여기까지 잘 따라온 분이라면 조금만 화이팅 하시길..! :)
ㄴ…나도 화이팅…
